11.4. Шаблон приложения sns (социальная сеть)
Шаблон социальной сити в синих тонах (pigeon - голубь)
шаблоны главная
либо
Шаблон социальной сити в синих тонах (в кадре - in the frame)
- sample.html
<!doctype html> <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <!-- запрет автоперевода перевода google translate --> <meta name="google" content="notranslate"> <!-- отображение файктической ширины экрана для адаптивного дизайна --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>sample.html</title> <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css" /> <!-- следующие 3 строки нужны для корректного отображения семантических элементов HTML5 в старых версиях Internet Explorer--> <!--[if lt IE 9]> <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script> <![endif]--> <!-- блок стилей css --> <style> html { width: 100%; /* Ширина 100% */ margin: 0; padding: 0; } body { width: 960px; /* Задает ширину 960px от вьюпорта */ max-width: 90%; /* Но не шире 90% экрана */ margin: 0 auto; /* Центрирует контент */ box-sizing: border-box; /* Учитывает padding внутри ширины */ } .user_profile { display: flex; flex-direction: column; } .user_profile_preload { background-position: center; /* Центрирование */ width: 100%; height: 250px; object-fit: cover; /* Ключевое свойство: обрезка с сохранением пропорций */ } .user_profile_images { position: relative; /* Для позиционирования наложения */ top: -75px; /* Отступ сверху */ left: 75px; /* Отступ слева */ z-index: 10; /* Поверх базовой картинки */ width: 50px; /* Размер наложения */ width: 150px; height: 150px; overflow: hidden; /* Обрезает все, что выходит за круг */ border-radius: 50%; /* Делает контейнер круглым [1] */ border: 3px solid #fff; } .user_profile_nav { background-position: center; /* Центрирование */ width: 100%; height: 92px; } .user_profile_name { background-position: center; /* Центрирование */ height: 60px; line-height: 60px; /* Высота строки равна высоте блока */ font-family: "Times New Roman", Times, serif; font-weight: bold; /* Жирный шрифт */ font-style: italic; /* Делает шрифт наклонным (курсив) */ color: #0866FF; /* основной синий цвет */ font-size: 40px; /* Размер шрифта 40 пикселей */ padding-left: 250px; /* Отступ 250px слева */ } .user_profile_navbar { background-position: center; /* Центрирование */ height: 30px; line-height: 30px; /* Высота строки равна высоте блока */ font-family: "Times New Roman", Times, serif; font-weight: bold; /* Жирный шрифт */ font-style: italic; /* Делает шрифт наклонным (курсив) */ color: #0866FF; /* основной синий цвет */ font-size: 15px; /* Размер шрифта 20 пикселей */ padding-left: 250px; /* Отступ 250px слева */ } .nav-list { display: flex; /* Горизонтальное расположение */ list-style-type: none; /* Убираем маркеры списка */ padding: 0; margin: 0; gap: 20px; /* Расстояние между пунктами */ } .nav-list a { text-decoration: none; /* Убираем стандартное подчеркивание */ display: block; transition: border-color 0.3s; /* Плавный эффект */ border-bottom: 2px solid transparent; /* Линия прозрачна по умолчанию */ } .nav-list a:hover { border-bottom: 2px solid #0866FF; /* Подчеркивание при наведении */ } .nav-list a.active { border-bottom: 2px solid #0866FF; } /* Конец блока */ .user_block_content { display: grid; grid-template-columns: 30% 70%; /* Две колонки 30% 70%; */ gap: 10px; } .user_block_sadebar { } .user_block_sadebar_info { /* Светло-серый бордюр 1px */ border: 1px solid #dcdcdc; /* Мягкая тень: x-смещение, y-смещение, размытие, цвет */ box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.1); /* Дополнительно: скругление углов */ border-radius: 5px; /* Отступы внутри блока */ /* Цвет фона, чтобы блок не был прозрачным */ background-color: #fff; margin-top: 10px; — /* отступ сверху */ margin-bottom: 10px; — /* отступ снизу */ } .user_block_sadebar_info_paragraph { font-family: "Times New Roman", Times, serif; font-weight: bold; /* Жирный шрифт */ font-style: italic; /* Делает шрифт наклонным (курсив) */ color: #0866FF; /* основной синий цвет */ font-size: 15px; /* Размер шрифта 15 пикселей */ padding-left: 10px; /* Отступ 10px слева */ } .user_block_sadebar_info_field { padding-left: 20px; } /* Блок фото */ .user_block_sadebar_photo { /* Светло-серый бордюр 1px */ border: 1px solid #dcdcdc; /* Мягкая тень: x-смещение, y-смещение, размытие, цвет */ box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.1); /* Дополнительно: скругление углов */ border-radius: 5px; /* Отступы внутри блока */ /* Цвет фона, чтобы блок не был прозрачным */ background-color: #fff; margin-top: 10px; — /* отступ сверху */ margin-bottom: 10px; — /* отступ снизу */ } .user_block_sadebar_photo_paragraph { font-family: "Times New Roman", Times, serif; font-weight: bold; /* Жирный шрифт */ font-style: italic; /* Делает шрифт наклонным (курсив) */ color: #0866FF; /* основной синий цвет */ font-size: 15px; /* Размер шрифта 15 пикселей */ padding-left: 10px; /* Отступ 10px слева */ } .user_block_sadebar_photo_field { display: grid; grid-template-columns: repeat(3, 1fr); /* 3 колонки одинаковой ширины */ gap: 10px; /* Отступы между блоками */ padding: 10px; } .photo-item { } .photo-item img{ width: 100%; aspect-ratio: 1 / 1; /* Высота равна ширине */ object-fit: cover; /* Дополнительно: скругление углов */ border-radius: 3px; } /* Блок видео */ .user_block_sadebar_video { /* Светло-серый бордюр 1px */ border: 1px solid #dcdcdc; /* Мягкая тень: x-смещение, y-смещение, размытие, цвет */ box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.1); /* Дополнительно: скругление углов */ border-radius: 5px; /* Отступы внутри блока */ /* Цвет фона, чтобы блок не был прозрачным */ background-color: #fff; margin-top: 10px; — /* отступ сверху */ margin-bottom: 10px; — /* отступ снизу */ } .user_block_sadebar_video_paragraph { font-family: "Times New Roman", Times, serif; font-weight: bold; /* Жирный шрифт */ font-style: italic; /* Делает шрифт наклонным (курсив) */ color: #0866FF; /* основной синий цвет */ font-size: 15px; /* Размер шрифта 15 пикселей */ padding-left: 10px; /* Отступ 10px слева */ } .user_block_sadebar_video_field { display: grid; grid-template-columns: repeat(3, 1fr); /* 3 колонки одинаковой ширины */ gap: 10px; /* Отступы между блоками */ padding: 10px; } .video-item { } .video-item video{ width: 100%; aspect-ratio: 1 / 1; /* Высота равна ширине */ object-fit: cover; /* Дополнительно: скругление углов */ border-radius: 3px; } /*Блок контента в правой части*/ .user_block_content_main { /* Светло-серый бордюр 1px */ border: 1px solid #dcdcdc; /* Мягкая тень: x-смещение, y-смещение, размытие, цвет */ box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.1); /* Дополнительно: скругление углов */ border-radius: 5px; /* Отступы внутри блока */ /* Цвет фона, чтобы блок не был прозрачным */ background-color: #fff; margin-top: 10px; — /* отступ сверху */ margin-bottom: 10px; — /* отступ снизу */ } .user_block_content_header { height: 60px; font-family: "Times New Roman", Times, serif; font-weight: bold; /* Жирный шрифт */ font-style: italic; /* Делает шрифт наклонным (курсив) */ color: #0866FF; /* основной синий цвет */ font-size: 20px; /* Размер шрифта 20 пикселей */ padding-left: 80px; /* Отступ 80px слева */ } .user_profile_images_small { position: relative; /* Для позиционирования наложения */ top: -42px; /* Отступ сверху */ left: -70px; /* Отступ слева */ z-index: 20; /* Поверх базовой картинки */ width: 50px; /* Размер наложения */ height: 50px; overflow: hidden; /* Обрезает все, что выходит за круг */ border-radius: 50%; /* Делает контейнер круглым */ } .user_block_content_field { position: relative; /* Для позиционирования наложения */ padding-left: 10px; /* Отступ 10px слева */ } .user_block_content_field img{ width: 98%; height: 250px; object-fit: cover; /* Дополнительно: скругление углов */ border-radius: 3px; } </style> </head> <body> <!-- Вот наш главный заголовок, который используется на всех страницах нашего веб-сайта --> <header> </header> <!-- Контейнер изображения (фона) профиля на котором будут распологаться кнопки меню фото профиля, логотип приложени, имя пользователя --> <div class = "user_profile"> <!-- Контейнер изображения (фона) профиля --> <div class = "user_profile_preload"> <img src="./images/moscow_city.jpg" alt="preload" style="width: 100%; height: 100%; object-fit: cover; border-radius: 0 0 5px 5px;"> <!-- Контейнер изображения профиля --> <div class = "user_profile_images"> <img src="./images/photographer.jpg" alt="photo" class="circle-img"> </div> </div> <!-- Контейнер имя профиля --> <div class = "user_profile_nav"> <!-- Контейнер имя профиля --> <div class = "user_profile_name"> Alisa Sokolova </div> <!-- Контейнер меню профиля --> <div class = "user_profile_navbar"> <nav class="navbar"> <ul class="nav-list"> <li><a class="active" href="#">Публикации</a></li> <li><a href="#">Информация</a></li> <li><a href="#">Видео</a></li> <li><a href="#">Фото</a></li> </ul> </nav> </div> </div> </div> <!-- Блок контента и сейдбара --> <div class = "user_block_content"> <div class = "user_block_sadebar"> <div class = "user_block_sadebar_info"> <div class = "user_block_sadebar_info_paragraph"> Краткая информация </div> <div class = "user_block_sadebar_info_field"> сайт:</br> адрес:</br> почта: </div> </div> <div class = "user_block_sadebar_photo"> <div class = "user_block_sadebar_photo_paragraph"> Фото </div> <div class = "user_block_sadebar_photo_field"> <div class="photo-item"><img src="./images/photo_1.jpg" alt="preload"></div> <div class="photo-item"><img src="./images/photo_2.jpg" alt="preload"></div> <div class="photo-item"><img src="./images/photo_3.jpg" alt="preload"></div> <div class="photo-item"><img src="./images/photo_4.jpg" alt="preload"></div> <div class="photo-item"><img src="./images/photo_5.jpg" alt="preload"></div> <div class="photo-item"><img src="./images/photo_6.jpg" alt="preload"></div> <div class="photo-item"><img src="./images/photo_7.jpg" alt="preload"></div> <div class="photo-item"><img src="./images/photo_8.jpg" alt="preload"></div> <div class="photo-item"><img src="./images/photo_9.jpg" alt="preload"></div> </div> </div> <div class = "user_block_sadebar_video"> <div class = "user_block_sadebar_video_paragraph"> Видео </div> <div class = "user_block_sadebar_video_field"> <div class="video-item"><video src="./images/video_1.mp4" alt="preload"></div> <div class="video-item"><video src="./images/video_2.mp4" alt="preload"></div> <div class="video-item"><video src="./images/video_3.mp4" alt="preload"></div> <div class="video-item"><video src="./images/video_4.mp4" alt="preload"></div> <div class="video-item"><video src="./images/video_5.mp4" alt="preload"></div> <div class="video-item"><video src="./images/video_6.mp4" alt="preload"></div> <div class="video-item"><video src="./images/video_7.mp4" alt="preload"></div> <div class="video-item"><video src="./images/video_8.mp4" alt="preload"></div> <div class="video-item"><video src="./images/video_9.mp4" alt="preload"></div> </div> </div> </div> <div class = "user_block_content_main"> <!-- Блок закрепленных новостей --> <div class = "user_block_content_main_fixed"> <div class = "user_block_content_header"> Alisa Sokolova </br> 26.02.2026 <div class = "user_profile_images_small"> <img src="./images/photographer_small.jpg" alt="photo" class="circle-img"> </div> </div> <div class = "user_block_content_field"> Приятно, граждане, наблюдать, как тщательные исследования конкурентов набирают популярность среди определенных слоев населения <img src="./images/avia.jpg" alt="photo"> </div> </div> <!-- Конец блока закрепленных новостей --> <!-- Блок последних новостей --> <div class = "user_block_content_main_last"> <div class = "user_block_content_header"> Alisa Sokolova </br> 26.02.2026 <div class = "user_profile_images_small"> <img src="./images/photographer_small.jpg" alt="photo" class="circle-img"> </div> </div> <div class = "user_block_content_field"> Приятно, граждане, наблюдать, как тщательные исследования конкурентов набирают популярность среди определенных слоев населения <img src="./images/avia.jpg" alt="photo"> </div> </div> <!-- Конец блока последних новостей --> </div> </div> <!-- Конец блока контента и сейдбара --> <!-- Здесь основное содержимое нашей страницы --> <main> <!-- Она содержит статью --> <article> </article> <!-- Дополнительный контент также может быть вложен в основной контент --> <aside> </aside> </main> <!-- И вот наш главный нижний колонтитул, который используется на всех страницах нашего веб-сайта --> <footer> <p>©2026 Sample HTML5 Page. All rights reserved.</p> </footer> <!-- Optional: Link to a JavaScript file --> <script> </script> </body> </html>