social_network

anonymous@undisclosed.example.com (Anonymous) — Mon, 09 Mar 2026 18:09:00 +0000
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>
Дополнения и Файлы

Файлы шаблона
worldwide open-source software - software:development:demo:cms:ucms:application_template

social_network

11.4. Шаблон приложения sns (социальная сеть)

Дополнения и Файлы
