ЖСО-201/2. Цифровые коммуникации. Практическое задание №7. Сложный лендинг с навигационной панелью

Вам нужно создать лендинг с навигационной панелью и динамическими объектами. Для этого вам потребуется:


- одна вращающаяся иллюстрация для стартового блока на прозрачном фоне в формате .png. Загрузите ее в репозиторий;

- не менее пяти иллюстраций квадратной формы одинакового (или примерно одинакового) размера. В моем примере - 600х600рх. Загрузите их в репозиторий;

- не менее пяти абзацев текста. Каждый абзац соответствует одной из иллюстраций;

- не менее пяти вкладок меню. Цвет каждой вкладки совпадает с основным цветом навигационной врезки справа и соответствующей ей иллюстрации и ведет на абзац с этой картинкой. Вкладки будут идти в том же порядке, что и цвета и привязанные к ним иллюстрации. Продумайте их порядок;

- фоновый цвет страницы. Используйте светлый фон, чтобы на нем были хорошо видны темные буквы;

- контрастный шрифт текста для мобайла. В мобильной версии текст наложится на цветную врезку. Если врезка темная, то шрифт нужно будет заменить на светлый. В моем примере он белый, вы можете использовать любой - лишь бы он хорошо читался с экрана смартфона.

Концепция десктоп-версии:

1 - интерактивное меню навигации
2 - раскрывающаяся и кликабельная вкладка при наведении курсора
3 - текст абзаца
4 - иллюстрация
5 - цветная врезка того же цвета, что и вкладка




Концепция мобайл-версии:

1 - интерактивное меню навигации
2 - кликабельная вкладка
3 - текст абзаца
4 - иллюстрация
5 - цветная врезка того же цвета, что и вкладка


В моем примере десять содержательных доменов лендинга (вкладка + абзац текста + картинка + цветная врезка). У вас их должно быть не менее пяти.

Для создания проекта вам потребуется:

1) CSS с параметрами стилей;
2) JavaScript библиотеки (3) с готовыми функциями;
3) JavaScript с логикой работы динамических объектов
4) HTML с подключенными вышеперечисленными файлами, опубликованный в вашем блоге.

Рекомендуемая тема: Notable Light с отключенными фоновыми элементами.

I CSS

1) Сначала задаем шрифт, интерфейс скроллинга и отображение бегунка справа:

@import url('https://fonts.googleapis.com/css?family=Montserrat:300,900');

::-webkit-scrollbar {
  width: 13px;

  
}
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 1px 1px 2px #E0E0E0;
  border: 11px solid transparent;

}

::-webkit-scrollbar-thumb {
  background: #646464;
  -webkit-box-shadow: inset 1px 1px 2px rgba(155, 155, 155, 0.4);
}

::-webkit-scrollbar-thumb:hover {
  background: #aaaaaa;
}

::-webkit-scrollbar-thumb:active {
  background: #888;
  -webkit-box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.3);
}

2) Теперь указываем базовые селекторы страницы, прячем нижний горизонтальный скроллбар. В селекторе body укажите цвет фона всей страницы:
      
html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    background-color: фоновый цвет страницы;
  }     
    
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;   
}
      
3) Начинаем с параметров для смартфонов. Специально помечаю их в коде вступительным комментарием чтобы из было легче найти при необходимости правки. Сначала идут параметры навигационной панели:

/*параметры для смартфонов*/
@media only screen and (max-width:480px) {
ul {
  position: fixed;
  display: block;
  margin-left: 20px;
  margin-top: 35vw;
  z-index: 3;
}
  
.nav {
  position: fixed;
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  transform: rotate(-90deg);
  margin-left: 0px;
  margin-top: 15vw;
  letter-spacing: 0.2vw;
  z-index: 3;
}
  
li {
  content:'';
  height: 40px;
  width: 5px;
  transition: width 0.3s ease-in-out;
}  
  
li:hover  {
   transition: width 0.3s ease-in-out;
   width: 8.3vw;
}

4) Теперь нужно задать идентификаторы каждой вкладки на этой панели. У вас их должно быть не менее пяти. Сначала указывается имя - оно у всех разное, затем - цвет. Лучше всего если вы их назовете по номерам, например, так:
  
#one {background-color:#4169E1;}
#two {background-color:#302c2d;}

и так далее. Создав все вкладки, сохраните эту часть кода отдельно - ее нужно будет продублировать и для десктоп-версии.

5) Теперь задаем параметры цветной врезки:
  
section {
  position: relative;
  display: block;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
  
section .cover {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 1;
}

6) Расположение и отображение стартовой картинки:
  
section .cover img #start{
  position: absolute;
  display: block;
  min-width: 150%;
  min-height: 150%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

7)  Основного контента, текста вверху и параметров выравнивания и движения объектов:
  
section .content {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 2;
}
  
section .text {
  width: 100%;
}
  
.leveler {
  position: relative;
  left: 50%;
  top: 30%;
  -webkit-transform: translateZ(0px) translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
  
#start {
  position: absolute;
  padding-top: 70vw;
  margin-left: 15vw;
  width: 70vw;
  overflow: hidden;
  -webkit-animation: rotation 40s infinite linear;
}
  
@-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
  
8) Указываем размер картинок, заголовочной части, текста над ней и параметров их движения:

img {
  width: 100%;
}
  
#title {
  font-family: 'Montserrat', sans-serif;
  font-size: 9vw;
  margin-top: 31vw;
  margin-left: 17vw;
  line-height: 6vw;
  color: #302c2d;
  opacity: 1;
  animation: move 5s
}
  
@keyframes move {
    from {
      margin-top: 13vw;
      opacity: 0.2;
    }
     to {
      margin-top: 31vw;
      opacity: 1;
    }
  }
  
.uppertext {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.9vw;
  letter-spacing: 0.1vw;
  margin-top: 5vw;
  margin-left: 17vw;
}

 @keyframes expand {
    from {
      width: 0vw;
      opacity: 0;
    }
     to {
      width: 28vw;
      opacity: 1;
    }
  }

9) Теперь свойства скроллинга, показа иллюстраций и абзаца с текстом:
  
.scroll {
  position: relative;
  font-family: 'Montserrat', sans-serif;
  font-size: 3vw;
  font-weight: 900;
  letter-spacing: 0.3vw;
  color: #302c2d;
  margin-left: 30vw;
  margin-top: 70vw;
}
  
.square {
  position: relative;
  content:'';
  float: right;
  height: 120vh;
  width: 100vh;
}
  
.paragraph {
  width: 70vw;
  margin-left: 18vw;
  margin-top: 30vw;
  font-family: 'Montserrat', sans-serif;
  font-size: 2.8vw;
  line-height: 3.4vw;
  letter-spacing: 0.3vw;
  color: black;
}

10) Это градиент в первой цветной врезке. Укажите ваши цвета. первый цвет в списке = основной цвет в первой вкладке меню:
  
 #one2 {
  background: linear-gradient(to bottom right, цвет1, цвет2);
}

11) Добавляем класс постера для показа картинки:
  
.poster {
  width: 70vw;
  margin-top: 4vw;
  margin-left: 18vw;
  z-index: 1;
}

12) Задаем цвет шрифта в мобильной версии проекта, для тех случаев когда у вас будет темный фон врезки и ей нужен контрастный светлый шрифт:
  
#mobiletext {
    color: светлый цвет;
  }  
}

13) Параметры мобайла закончились. Теперь параметры для десктопа. Также начинаю с пометки чтобы легче было найти эти параметры в финальном коде. Перечень параметров похож на мобайл, пояснения даю только в пунктах, где вам нужно добавить свои значения:
      
/*параметры для десктопа*/
@media only screen and (min-width:990px) {
  
ul {
  position: fixed;
  display: block;
  margin-left: -200px;
  margin-top: -6vw;
  z-index: 3;
}
  
.nav {
  position: fixed;
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85vw;
  transform: rotate(-90deg);
  margin-left: -245px;
  margin-top: -12vw;
  letter-spacing: 0.2vw;
  z-index: 3;
}
  
li {
  content:'';
  height: 40px;
  width: 5px;
  transition: width 0.3s ease-in-out;
}  
  
li:hover  {
   transition: width 0.3s ease-in-out;
   width: 80px;
}
  
14) Скопируйте идентификаторы ваших вкладок из пункта 4. Их порядок и набор цветов должен быть одинаковым и в мобайле и в десктопе.

15) Дальнейшие параметры стилей идут без изменений:

section {
  position: relative;
  margin-left: -10px;
  display: block;
  width: 120%;
  height: 60vw;
  overflow: hidden;
}
  
section .cover {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 1;
}
  
section .cover img #start {
  position: absolute;
  display: block;
  min-width: 100%;
  min-height: 100%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
  
section .content {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 2;
}
  
section .text {
  width: 100%;
}
  
.leveler {
  position: relative;
  left: 50%;
  top: 30%;
  -webkit-transform: translateZ(0px) translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
  
#start {
  position: absolute;
  padding-top: -9vw;
  margin-left: -5px;
  width: 38vw;
  overflow: hidden;
  -webkit-animation: rotation 180s infinite linear;
}
  
@-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
  
img {
  width: 100%;
}
  
#title {
  position: fixed;
  font-family: 'Montserrat', sans-serif;
  font-size: 4.31vw;
  margin-top: 25%;
  margin-left: 2%;
  line-height: 2.63vw;
  color: #302c2d;
  opacity: 1;
  animation: move 3s
}
  
@keyframes move {
    from {
      margin-left: 8vw;
      opacity: 0.3;
    }
     to {
      margin-left: 10vw;
      opacity: 1;
    }
  }
  
.uppertext {
  font-family: 'Montserrat', sans-serif;
  font-size: 1vw;
  letter-spacing: 0.25vw;
  margin-top: 2.63vw;
  margin-left: 10.1vw;
}
  
 @keyframes expand {
    from {
      width: 0vw;
      opacity: 0;
    }
     to {
      width: 13.68vw;
      opacity: 1;
    }
  }
  
.scroll {
  position: relative;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.80vw;
  font-weight: 900;
  letter-spacing: 0.1vw;
  color: #302c2d;
  margin-left: 45vw;
  margin-top: 20vw;
}
  
.square {
  position: relative;
  content:'';
  float: left;
  margin-left: 550px;
  height: 120vh;
  width: 300vh;
}
  
.paragraph {
  float: left;
  width: 29.28vw;
  margin-left: 25px;
  margin-top: 4vw;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.31vw;
  line-height: 2vw;
  letter-spacing: 0.2vw;
  color: black;
}

16) Цвета градиента продублируйте из пункта 10:

#one2 {
  background: linear-gradient(to bottom right, цвет1, цвет2);
}

17) Добавляем параметры постера. Здесь укажите цвет тени, отбрасываемой иллюстрациями на цветную врезку. В моем примере используется тень того же цвета, что и фон страницы. На данном пункте версия для десктопа завершается:

.poster {
  overflow: hidden;
  width: 350px;
  margin-top: 6vw;
  margin-left: 525px;
  z-index: 1;
 filter: drop-shadow(4px 10px 15px цвет тени);
}
}

II Библиотеки JavaScript

18) Вам нужно добавить в проект три библиотеки, отвечающие за исполнение динамических объектов. Для этого каждую из библиотек необходимо скачать, открыть в Notepad++, сохранить отдельно как .js файл. Затем загрузить в репозиторий и конвертировать через Githack. На выходе у вас будет три ссылки для встраивания. Встраивать библиотеки нужно будет в том же порядке, в котором они приведены ниже.

При сбоях при встраивании, библиотеки можно также поставить в HTML напрямую, понимая, что они тогда превратят ваш код в чудовище.
Библиотеки: 

III Ваш JavaScript

19) То же самое нужно сделать с динамическим сценарием - сохранить его как .js файл. Он будет встраиваться после всех библиотек. Подробнее о встраивании ниже в HTML разделе.

jQuery(document).ready(function($){
  'use strict';

  $.Scrollax();
});

IV HTML

20) Начинаем с указания традиционных тегов и заголовка:

<!--DOCTYPE html-->
 <head>
    <meta charset="UTF-8">
    <title>Ваш заголовок</title>

21) Встраиваем CSS

22) Закрываем верхнюю часть страницы, открываем основную, указываем масштаб:

</head>
<body>
<html>
<head>
 <meta name="viewport" content="width=device-width, initial-scale=1">

23) Создаем навигационное меню. В классе навигации указываем отображаемое название (в моем примере - АЛЬБОМЫ). Напоминаю, что у вас в нем не менее пяти вкладок. Вы уже описывали его в CSS. Поэтому просто продублируйте имена вкладок в анкоре (выделил красным), в адресации нужно поставить закладки на абзацы - их имя должно начинаться с # (выделил голубым). У меня в примере - альбомы по номерам, у вас может быть что угодно:
<div class="nav">АЛЬБОМЫ</div>
    <ul>
   <a href="#album1"><li id="one"></li></a>
   <a href="#album2"><li id="two"></li></a> 
    </ul>

24) Теперь секция с заголовком, стартовой картинкой и описанием. Привожу ее полностью из моего примера, чтобы вы могли сопоставить расположение текста. Используйте свой текст и первую картинку на прозрачном фоне (ссылка из репозитория):

<section class="special" data-scrollax-parent="true" id="ntr">
  <div class="cover" id="start" data-scrollax="properties: { translateY: '30%', 'opacity': 1.5 }">
   <img src="ссылка на первую картинку"></div>
  <div class="content"> 
    <div class="text leveler">
      <div data-scrollax="properties: { 'translateY': '150%', 'opacity': 1.5 }">
       <div id="title">
        Катал Кохлан:<br><br>
       10 альбомов<br><br>рассерженного гения
       </div>
       <div class="uppertext">знаковые релизы с 1990 по 2022 год</div> 
       
       <div class="scroll">краткая              история</div> 
      </div>
     </div>
    </div>
   </section>

25) А дальше идут секции, состоящие из абзаца, картинки и цветной врезки. У вас их не менее пяти. Ниже приведено два примера, ключевое отличие между которыми - разный цвет шрифта. Если в мобайле у вас темный текст накладывается на светлый фон, то используется стандартная секция:

<section class="special" data-scrollax-parent="true" id="album1">
  <div class="cover" data-scrollax="properties: { translateY: '30%' }">
 <div class="square" id="one2"></div>
  </div>
  <div class="content">
    <div class="text leveler">
      <div data-scrollax="properties: { 'translateY': '150%', 'opacity': 1.5 }">
        <div class="paragraph">Ваш абзац с текстом.
</div>
        <div class="poster">
        <img src="ссылка на квадратную картинку">
        </div>
      </div>
    </div>
  </div>
</section>

Обратите внимание, что в секции вы указываете идентификатор из меню и закладку из него же (помечены голубым). У всех секций они разные и идут в той же последовательности, что и вкладки меню. 

26) Если у вас темный фон и нужен светлый текст для мобайла, то в секции будет дополнительный идентификатор mobiletext (помечен зеленым) и целиком секция будет выглядеть так:

<section class="special" data-scrollax-parent="true" id="album2">
  <div class="cover" data-scrollax="properties: { translateY: '30%' }">
 <div class="square" id="two"></div>
  </div>
  <div class="content">
    <div class="text leveler">
      <div data-scrollax="properties: { 'translateY': '150%', 'opacity': 1.5 }">
        <div class="paragraph" id="mobiletext">Ваш абзац с текстом.
</div>
        <div class="poster">
        <img src="ссылка на квадратную картинку">
        </div>
      </div>
    </div>
  </div>
</section>



27) Соберите последовательно все секции, укажите в них верные ссылки на картинки, разные абзацы текста, идентификаторы из меню и - если нужно - идентификаторы цвета шрифта для мобайла. Закройте теги:

</body>
</html>

28) Встройте библиотеки JavaScript (3 файла) и ваш JavaScript (1 файл).
Если вы встраиваете их из репозитория, то каждый файл встраивается так:

<script src="конвертированная ссылка из githack"></script>

Если напрямую, то каждый файл встраивается напрямую в теле отдельного тега <script></script>

29) Закройте оставшиеся теги

</body>
</html>

30) Опубликуйте задание в своем блоге. Если все верно, то ваш проект будет выглядеть похожим образом: https://konoplevdesign3.blogspot.com/p/flat-expanded.html

Проверьте результат с десктопа и с мобайла (в вертикальной ориентации смартфона). 

Ссылки на выполненное задание принимаются в комментариях к этому посту до 10:00 7 апреля.

РЕЗУЛЬТАТЫ:

Бердникова Яна - 5
Боровинских Анжелика - 5
Кирчанова Алёна - 5
Кулешов Савелий - 5
Майорова Ирина - 5
Маргарян Аршак - 5
Минина Яна - 4
Мухомедьярова Александра - 5
Мямикеева Анна - 5
Носова Алёна - 5
Орлова Дарья - 5
Плешакова Дарья - 4
Подкорытов Иван - 5
Пономарёва Дарья - 5
Старикова Полина - 5
Сухарева Полина - 5
Федотова Софья - 5
Хакимова Карина - 5
Шевалье Яна - 5
Шиманская Дарья - 5
Щёлокова Виктория - 5
Якушева Варвара - 4


Комментарии

  1. Старикова Полина2 апреля 2026 г. в 01:04

    https://pstarikovap06.blogspot.com/p/2007.html
    Старикова Полина - ЖСО-201

    ОтветитьУдалить
  2. Дарья Пономарёва2 апреля 2026 г. в 02:37

    https://daryaponomareva.blogspot.com/2026/04/snakes.html

    ОтветитьУдалить
  3. Дарья Плешакова2 апреля 2026 г. в 08:50

    Плешакова Дарья ЖСО-201 https://dashapleshakova.blogspot.com/p/5-import-urlhttpsfonts.html

    ОтветитьУдалить
  4. Vicki_torees3 апреля 2026 г. в 00:52

    https://shchelokovavictoria.blogspot.com/2026/04/5-weeknd-weeknd-5-house-of-balloons.html
    Щёлокова Виктория ЖСО-202

    ОтветитьУдалить
  5. Дарья Шиманская3 апреля 2026 г. в 02:42

    https://shimanskayadasha.blogspot.com/p/link-relstylesheet-href-httpsraw.html
    Шиманская Дарья ЖСО-202

    ОтветитьУдалить
  6. Майорова Ирина3 апреля 2026 г. в 04:31

    https://mayorovairina.blogspot.com/2026/04/import-urlhttpsfonts_4.html#album3
    Майорова Ирина, ЖСО-201

    ОтветитьУдалить
  7. Кузнецова Елизавета3 апреля 2026 г. в 12:09

    Кузнецова Елизавета - ЖСО-202
    https://repka44555.blogspot.com/2026/04/5-1990-2026.html
    Прошлое задание
    https://repka44555.blogspot.com/2026/03/landing-with-prices_27.html

    ОтветитьУдалить
    Ответы
    1. Dmitry Konoplev5 апреля 2026 г. в 11:46

      С предыдущим теперь все отлично, а вот текущее не принято - вы так и не поменяли имена файлов с .java на .js и динамический скроллинг не работает. Исправьте часть с JavaScript.

      Удалить
  8. Анастасия Белянская3 апреля 2026 г. в 14:28

    https://belyanskayanastya00.blogspot.com/2026/04/7.html

    ОтветитьУдалить
    Ответы
    1. Dmitry Konoplev5 апреля 2026 г. в 11:48

      Не принято. Вместо JavaScript у вас встроены пустые ссылки без имени файлов.

      Удалить
  9. Якушева Варвара4 апреля 2026 г. в 12:06

    https://yakushevavarvara.blogspot.com/2026/04/5-2026_12.html
    Якушева Варвара ЖСО-202

    ОтветитьУдалить
  10. Полина Сухарева4 апреля 2026 г. в 12:31

    https://polinkasuh.blogspot.com/p/5_71.html

    ОтветитьУдалить
  11. Савелий Кулешов5 апреля 2026 г. в 05:46

    https://kuleshovsaveliy.blogspot.com/2026/04/games-2026.html
    Савелий Кулешов ЖСО 201

    ОтветитьУдалить
  12. Софья Федотова5 апреля 2026 г. в 22:52

    Предыдущее задание: https://sofyafedotova.blogspot.com/2026/03/you-can-enjoy-smoothies-team-tasty-blue.html Последнее задание: https://sofyafedotova.blogspot.com/2026/04/space-universe-beyond-night-sky.html

    ОтветитьУдалить
    Ответы
    1. Dmitry Konoplev6 апреля 2026 г. в 12:58

      Предыдущее принято, в текущем - поднимите меню навигации вверх - сейчас оно находится ниже границы экрана.

      Удалить
  13. Аршак6 апреля 2026 г. в 09:34

    Этот комментарий был удален автором.

    ОтветитьУдалить
  14. Аршак6 апреля 2026 г. в 09:35

    Предыдущее задание: https://mrgnarsh.blogspot.com/p/horizon.html
    Последнее задание:https://mrgnarsh.blogspot.com/p/porsche-911-scrollbar-webkit-scrollbar.html

    Маргарян Аршак ЖСО-202

    ОтветитьУдалить
  15. Vicki_torees6 апреля 2026 г. в 09:39

    https://shchelokovavictoria.blogspot.com/2026/03/apple-iphone-17-pro-max-awe-dropping.html
    Прошлое задание Щёлокова Виктория ЖСО-202

    ОтветитьУдалить
  16. Иван6 апреля 2026 г. в 10:34

    Подкорытов Иван ЖСО-201
    https://podkorytovpr.blogspot.com/p/tool-discography-css-import.html

    ОтветитьУдалить
  17. Алёна Носова6 апреля 2026 г. в 11:38

    https://alenanosov19.blogspot.com/p/import-urlhttpsfonts_6.html
    нынешнее задание
    https://alenanosov19.blogspot.com/p/import-urlhttpsfonts.html
    предыдущее

    ОтветитьУдалить
  18. Савелий Кулешов6 апреля 2026 г. в 11:49

    https://kuleshovsaveliy.blogspot.com/2026/04/luxury-lifestyle-luxury-life-of-luxury.html
    Бердникова Яна ЖСО 202 (у нее не было доступа к ноутбуку, попросила скинуть через меня)

    ОтветитьУдалить
  19. avormud6 апреля 2026 г. в 11:59

    https://avormud.blogspot.com/p/xx.html

    Александра Мухомедьярова

    ОтветитьУдалить
  20. Аня Мямикеева6 апреля 2026 г. в 12:09

    https://annchesse.blogspot.com/2026/04/6-20_37.html#film1 Мямикеева ЖСО-202

    ОтветитьУдалить
  21. Сергей6 апреля 2026 г. в 12:48

    https://surovtsevs.blogspot.com/2026/04/201-font-facefont-familylorafont.html
    Суровцев ЖСО-201

    ОтветитьУдалить
    Ответы
    1. Dmitry Konoplev6 апреля 2026 г. в 12:59

      Не принято, элементы справа не отображаются.

      Удалить
  22. Боровинских Анжелика6 апреля 2026 г. в 12:52

    https://anzhelikaborovinskih.blogspot.com/p/5-porsche-911.html

    ОтветитьУдалить
  23. Яна Шевалье6 апреля 2026 г. в 13:00

    Этот комментарий был удален автором.

    ОтветитьУдалить
  24. Яна Шевалье6 апреля 2026 г. в 13:41

    https://shevalye.blogspot.com/p/2026.html

    ОтветитьУдалить
  25. Орлова Дарья6 апреля 2026 г. в 14:00

    https://orlovadariaaa.blogspot.com/p/ipad-ipad-ipad-apple-ipad-ipad.html

    ОтветитьУдалить
  26. Яна Минина6 апреля 2026 г. в 16:40

    Новое: https://mininaplan.blogspot.com/2026/04/5-one2-weirdcore_43.html
    Старое: https://mininaplan.blogspot.com/2026/04/flower-knows-flower-knows-02.html

    ОтветитьУдалить
  27. Кирчанова Алена6 апреля 2026 г. в 16:50

    https://alikirrrrr.blogspot.com/p/bmw-bmw-bmw-bmw-bmw-m3.html

    Кирчанова Алена

    ОтветитьУдалить
  28. Карина Хакимова6 апреля 2026 г. в 18:59

    Новое задание: https://khakimovakarina.blogspot.com/p/ateez-landing-albums-five-stages-of_11.html
    Предыдущее задание: https://khakimovakarina.blogspot.com/p/japan-matchatea-prices_37.html

    Хакимова Карина ЖСО-202

    ОтветитьУдалить

Добавлять новые комментарии запрещено.