Создание макета сайта Третья часть

Կայքի դասավորության ստեղծում Երրորդ մաս

Что-то такое ты уже припоминаешь? Третий блок чем то похож на первый блок. Ну что... Начинаем? Давайте, как всегда, посмотрим на структуру блока. У нас там есть одна фотография, один большой текст, один маленький и кнопка.

Արդեն հիշու՞մ եք նման բան։ Երրորդ բլոկը որոշ չափով նման է առաջին բլոկին: Դե... Սկսե՞նք: Եկեք, ինչպես միշտ, նայենք բլոկի կառուցվածքին: Մենք ունենք մեկ լուսանկար, մեկ մեծ տեքստ, մեկ փոքր տեքստ և կոճակ:

<section class="third-block">
  <div class="third-block-texts">
    <h2 class="h2-text-3">Использовать VR или AR для просмотра продукта</h2>
    <p class="main-text-3">
      Через современные телефоны можно просмотреть продукт в Дополненной
      реальности либо в Виртуальной реальности чтобы ближе ознакомиться с
      ним и увидеть как это будет выглядеть при покупке.
    </p>
    <a href="#" class="btn-4 button-a">
      <p class="btn-text">Попробовать</p>
    </a>
  </div>
  <div>
    <img class="People-Building" src="/img/People_Building_Metaverse.png" alt="Фотография строителей мета вселенной" width="642px" height="622px"/>
  </div>
</section>

Начнём с главного блока:

Սկսենք հիմնական բլոկից.

.third-block {
  width: 100%;
  min-height: 778px;
  height: auto;
  background: #09111e;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  align-content: center;
}

Теперь приступим к текстам которые нужно упорядочить и задать размер.

Այժմ սկսենք այն տեքստերից, որոնք պետք է դասավորվեն և չափերը սահմանենք։

.third-block-texts {
  max-width: 640px;
  width: 95%;
  height: auto;
}

Тут пока что ничего удивительного. Давайте перейдём к большому тексту:

Առայժմ զարմանալի ոչինչ չկա։ Անցնենք մեծ տեքստին.

.h2-text-3 {
  font-family: "Open Sans", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: min(48px, 12vw);
  color: white;
}

Теперь очередь маленького текста:

Այժմ հերթը փոքր տեքստինն է.

.main-text-3 {
  font-family: "Open Sans", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: min(24px, 8vw);
  line-height: 160%;
  color: white;
  margin: 5px 0 35px 0;
}

И под конец фотография:

Եվ վերջապես լուսանկար.

.People-Building {
  width: 100%;
  height: auto;
}

Теперь уже давай посмотрим как же будет выглядеть:

Հիմա եկեք տեսնենք, թե ինչ տեսք կունենա այն.

Выглядит круто, но что-то не то 🤔. Посмотри в макет и попробуй исправить проблема самому 😁.

Թույն է թվում, բայց ինչ-որ բան այն չէ:🤔 Նայեք դասավորությանը և փորձեք ինքներդ լուծել խնդիրը 😁.