diff --git a/Friends.html b/Friends.html new file mode 100644 index 0000000..cb5ad41 --- /dev/null +++ b/Friends.html @@ -0,0 +1,104 @@ + + + + + + + Друзья + + +
+
+
+ + +
+
+
+ + +
+
+
+
+ Иконка друзей +

Мои друзья

+
+
+ Аватар +
+

Имя Фамилия

+

Информация о друге

+
+ Написать сообщение + +
+
+
+
+ Аватар +
+

Имя Фамилия

+

Информация о друге

+
+ Написать сообщение + +
+
+
+
+ Аватар +
+

Имя Фамилия

+

Информация о друге

+
+ Написать сообщение + +
+
+
+
+ Аватар +
+

Имя Фамилия

+

Информация о друге

+
+ Написать сообщение + +
+
+
+
+ Аватар +
+

Имя Фамилия

+

Информация о друге

+
+ Написать сообщение + +
+
+
+
+
+
+ \ No newline at end of file diff --git a/Groups.html b/Groups.html new file mode 100644 index 0000000..9e016f8 --- /dev/null +++ b/Groups.html @@ -0,0 +1,67 @@ + + + + + + + Группы + + +
+
+
+ + +
+
+
+ +
+
+
+
+ Иконка сообществ +

Мои сообщества

+
+
+ Аватар сообщества +
+

Название сообщества

+

Описание сообщества

+

1,234 подписчиков

+
+ Перейти в сообщество + +
+
+
+
+ Аватар сообщества +
+

Название сообщества

+

Описание сообщества

+

1,234 подписчиков

+
+ Перейти в сообщество + +
+
+
+
+
+
+ + \ No newline at end of file diff --git a/Messages.html b/Messages.html new file mode 100644 index 0000000..c51d0b4 --- /dev/null +++ b/Messages.html @@ -0,0 +1,70 @@ + + + + + + + Сообщения + + +
+
+
+ + +
+
+
+ +
+
+
+
+ Аватар +
+ Имя Фамилия +

Привет!

+
+
+
+ Аватар +
+ Имя Фамилия +

Привет!

+
+
+
+ Аватар +
+ Имя Фамилия +

Привет!

+
+
+
+ Аватар +
+ Имя Фамилия +

Привет!

+
+
+
+ Аватар +
+ Имя Фамилия +

Привет!

+
+
+
+
+
+ + \ No newline at end of file diff --git a/Profile.html b/Profile.html new file mode 100644 index 0000000..c0265fb --- /dev/null +++ b/Profile.html @@ -0,0 +1,81 @@ + + + + + + + Мой профиль + + +
+
+
+ + +
+
+
+ +
+
+
+
+ Аватар пользователя +

Имя Фамилия

+

Описание профиля

+
+ +
+ + +
+ +
+

Друзья

+
+
+ Аватар друга + Имя Фамилия +
+
+ Аватар друга + Имя Фамилия +
+
+ Аватар друга + Имя Фамилия +
+
+
+ +
+

Сообщества

+
+
+ Аватар группы + Название группы +
+
+ Аватар группы + Название группы +
+
+ Аватар группы + Название группы +
+
+
+
+
+
+ + \ No newline at end of file diff --git a/img/avatar1.jpg b/img/avatar1.jpg new file mode 100644 index 0000000..c02368c Binary files /dev/null and b/img/avatar1.jpg differ diff --git a/img/avatar2.png b/img/avatar2.png new file mode 100644 index 0000000..ed417d5 Binary files /dev/null and b/img/avatar2.png differ diff --git a/img/friends.png b/img/friends.png new file mode 100644 index 0000000..aa5c9dd Binary files /dev/null and b/img/friends.png differ diff --git a/img/groupAvatar.jpg b/img/groupAvatar.jpg new file mode 100644 index 0000000..f231843 Binary files /dev/null and b/img/groupAvatar.jpg differ diff --git a/img/groups.png b/img/groups.png new file mode 100644 index 0000000..8692443 Binary files /dev/null and b/img/groups.png differ diff --git a/img/icon-close.png b/img/icon-close.png new file mode 100644 index 0000000..ff3cb9c Binary files /dev/null and b/img/icon-close.png differ diff --git a/img/logo2.png b/img/logo2.png new file mode 100644 index 0000000..5f3e824 Binary files /dev/null and b/img/logo2.png differ diff --git a/img/post1.jpg b/img/post1.jpg new file mode 100644 index 0000000..fcf7cee Binary files /dev/null and b/img/post1.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..fe36101 --- /dev/null +++ b/index.html @@ -0,0 +1,67 @@ + + + + + + Социальная сеть MySocial + + + +
+
+
+ + +
+
+
+ +
+
+
+
+
+ Avatar +
+

Имя пользователя

+

5 минут назад

+
+
+

Это пример публикации в ленте новостей социальной сети.

+ Post image +
+ + + +
+
+ +
+
+ Avatar +
+

Имя пользователя

+

8 минут назад

+
+
+

Это пример публикации в ленте новостей социальной сети.

+
+ + + +
+
+
+
+
+ + diff --git a/style.css b/style.css new file mode 100644 index 0000000..410a0cc --- /dev/null +++ b/style.css @@ -0,0 +1,442 @@ +.container { + max-width: 1237px; + margin: 0px auto; +} + +h1, h2, h3, h4, p { + margin: 0; + padding: 0; +} + +* { + box-sizing: border-box; +} + +body, html { + font-family: "Poppins", sans-serif; + font-size: 20px; + margin: 0; + padding: 0; + scroll-behavior: smooth; + background-color: #F4F4F4; + color: #333333; +} + +/* HEADER */ +header { + background-color: #4169E1; + padding: 15px 0; +} + +.header { + display: flex; + justify-content: space-between; + align-items: center; +} + +nav a { + text-decoration: none; + margin-right: 20px; + color: #FFFFFF; + font-weight: bold; + transition: color 0.3s; +} + +nav a:hover { + color: #FF8C42; +} + +/* MAIN */ +main { + margin-top: 40px; +} + +/* FEED */ +.feed { + display: flex; + flex-direction: column; + align-items: center; +} + +.post { + background-color: #FFFFFF; + padding: 20px; + border-radius: 10px; + + margin-bottom: 20px; + width: 100%; + max-width: 800px; +} + +.post-header { + display: flex; + align-items: center; + margin-bottom: 10px; +} + +.avatar { + width: 50px; + height: 50px; + border-radius: 50%; + object-fit: cover; +} + +.post-info { + margin-left: 10px; +} + +.username { + font-size: 18px; + font-weight: bold; +} + +.time { + font-size: 14px; + color: #666666; +} + +.post-text { + margin: 10px 0; + font-size: 16px; +} + +.post-image { + width: 100%; + border-radius: 8px; + margin-bottom: 10px; +} + +.post-actions { + display: flex; + justify-content: space-between; +} + +.post-actions button { + background: none; + border: none; + font-size: 16px; + cursor: pointer; + transition: color 0.3s; +} + +.post-actions button:hover { + color: #4169E1; +} + +/* FRIENDS */ + +.friends { + background-color: #FFFFFF; + padding: 20px; + border-radius: 10px; + + text-align: center; + max-width: 800px; + margin: 0 auto; + text-align: left; +} + +.friends-header { + display: flex; + gap: 55px; + margin-bottom: 20px; + align-items: center; +} + +.friends-header h1 { + font-weight: bold; + font-size: 32px; + color: black; +} + +.friend { + margin-bottom: 45px; + display: flex; + align-items: center; + gap: 35px; + position: relative; + padding: 20px; + border: 2px solid #eae3cd; + border-radius: 15px; + background-color: white; + +} + +.friend-info h1 { + font-size: 26px; +} +.friend-info p { + font-size: 14px; +} + +.friend img { + border-radius: 50%; +} + +.friend:last-of-type { + margin-bottom: 0px; +} + +.friends-buttons { + margin-top: 15px; + display: flex; + align-items: center; + gap: 15px; +} + +.friends-buttons a { + text-decoration: none; + color: rgb(42, 88, 133); + font-size: 14px; + transition: color 0.3s; +} + +.button-delete { + background: none; + border: none; + cursor: pointer; + color: black; + position: absolute; + top: 50%; + right: 20px; + transform: translateY(-50%); +} + +/* Messages */ + +.messages { + background-color: #FFFFFF; + padding: 20px; + border-radius: 10px; + text-align: center; + max-width: 800px; + margin: 0 auto; + text-align: left; +} + +.message { + display: flex; + gap: 25px; + margin-bottom: 20px; + border-radius: 5%; +} + +.message:hover { + background-color: #f5f5f5; + +} + +.message:last-child { + margin-bottom: 0; +} + +.message-content span { + font-weight: 600; + font-size: 18px; + color: black; +} + +.message-content p { + margin-top: 7px; + font-size: 16px; + color: black; + line-height: 1.5; +} + +.message img { + width: 60px; + height: 60px; + border-radius: 40%; +} + +/* GROUPS */ + +.groups { + background-color: #FFFFFF; + padding: 20px; + border-radius: 10px; + text-align: center; + max-width: 800px; + margin: 0 auto; + text-align: left; +} + +.groups-header { + display: flex; + gap: 55px; + margin-bottom: 20px; + align-items: center; +} + +.groups-header h1 { + font-weight: bold; + font-size: 32px; + color: black; +} + +.group { + margin-bottom: 45px; + display: flex; + align-items: center; + gap: 35px; + position: relative; + padding: 20px; + border: 2px solid #eae3cd; + border-radius: 15px; + background-color: white; +} + +.group-info h1 { + font-size: 26px; +} +.group-info p { + font-size: 14px; +} + +.group img { + border-radius: 50%; + object-fit: cover; +} + +.group:last-of-type { + margin-bottom: 0px; +} + +.groups-buttons { + margin-top: 15px; + display: flex; + align-items: center; + gap: 15px; +} + +.groups-buttons a { + text-decoration: none; + color: rgb(42, 88, 133); + font-size: 14px; + transition: color 0.3s; +} + +.button-leave { + background: none; + border: none; + cursor: pointer; + color: black; + position: absolute; + top: 50%; + right: 20px; + transform: translateY(-50%); +} + +.group-subscribers { + margin-top: 5px; + font-size: 14px; + color: #666; +} + +/* Profile */ + +.profile { + background-color: #FFFFFF; + padding: 20px; + border-radius: 15px; + max-width: 800px; + margin: 0 auto; +} + +.profile-header { + text-align: center; + margin-bottom: 20px; +} + +.profile-avatar { + width: 150px; + height: 150px; + border-radius: 50%; + object-fit: cover; + border: 4px solid #eae3cd; + margin-bottom: 15px; +} + +.profile-header h1 { + font-size: 32px; + color: black; + margin-bottom: 10px; +} + +.profile-bio { + font-size: 16px; + color: #666; + max-width: 500px; + margin: 0 auto; +} + +.profile-actions { + display: flex; + justify-content: center; + gap: 15px; + margin-bottom: 30px; +} + +.button-edit, .button-message { + padding: 10px 20px; + border: none; + border-radius: 8px; + font-size: 16px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.button-edit { + background-color: orange; + color: white; +} + +.button-edit:hover { + background-color: #e67e22; +} + +.button-message { + background-color: green; + color: white; +} + +.button-message:hover { + background-color: #2ecc71; +} + +.profile-friends, .profile-groups { + margin-bottom: 30px; +} + +.profile-friends h2, .profile-groups h2 { + font-size: 24px; + color: black; + margin-bottom: 15px; +} + +.friends-list, .groups-list { + display: flex; + flex-wrap: wrap; + gap: 15px; +} + +.profile-friend, .profile-group { + display: flex; + align-items: center; + gap: 10px; + background-color: #f9f9f9; + padding: 10px; + border-radius: 10px; +} + +.profile-friend img, .profile-group img { + width: 50px; + height: 50px; + border-radius: 50%; + object-fit: cover; +} + +.profile-friend span, .profile-group span { + font-size: 16px; + color: black; +}