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

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

Теперь мы дошли к самой сложной, но интересной части сайта. Тут есть 3 фотографии, 3 блока flex и текст с градиентами. Давайте сперва посмотрим конструкцию!

Այժմ մենք հասել ենք կայքի ամենադժվար, բայց հետաքրքիր հատվածին: Առկա է 3 լուսանկար, 3 flex բլոկ և գրադիենտներով տեքստ։ Եկեք նախ տեսնենք դիզայնը: 

<section class="fourth-page">
  <h2 id="h2-big-text">3D НА САЙТЕ ВЫГЛЯДЕТЬ</h2>
  <div class="flex-elements" id="block-gap">
    <div class="flex-1">
      <img class="gift" src="/img/podarok.png" alt="Фотография подарка" width="277px" height="277px"/>
    </div>
    <div class="flex-2">
      <img class="microphone" src="/img/mikrafon.png" alt="Фотография микрофона" width="242px" height="242px"/>
    </div>
    <div class="flex-3">
      <img class="suitcase" src="/img/chemodan.png" alt="Фотография чемодана" width="277px" height="277px"/>
    </div>
  </div>
  <div class="horizontal-block">
    <div class="horizontal-line">
      <div class="line-texts">
        <h2 id="expensive">ДОРОГО</h2>
        <h2 id="and">И</h2>
        <h2 id="beautiful">КРАСИВО</h2>
      </div>
    </div>
  </div>
</section>

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

Դե ... Եկեք մանրամասն նայենք այս բլոկին և փորձենք հիշել այն ամենը, ինչ ձեզ հարկավոր է: Սկսենք ինչպես միշտ առաջին բլոկով. 

.fourth-page {
  width: 100%; /*Ширина блока 100%*/
  height: auto; /*Высота блока автоматическая*/
  background-color: #020a18; /*Цвет заднего фона*/
}
 
.fourth-page {
  width: 100%; /*Բլոկի լայնությունը 100%*/
  height: auto; /*Բլոկի լայնությունը 100%*/
  background-color: #020a18; /*Ֆոնի գույնը*/
}

Теперь займёмся большим текстом в центре:

Հիմա անդրադառնանք կենտրոնում գտնվող մեծ տեքստին. 

#h2-big-text {
  color: white; /*Цвет текста белый*/
  text-align: center; /*Позиция блока центр*/
  font-family: "Oswald", sans-serif; /*Семейство шрифтов Oswald*/
  font-style: normal; /*Стиль нормальный*/
  font-weight: 400; /* Жирность текста 400*/
  font-size: min(64px, 12vw); /*Размер шрифта от минимального(64px) до максимального(12vw)*/
  padding: 150px 0 50px 0; /*Внутренний отступ сверху(150px), справа(0px), снизу(50px) и слева(0px)*/
}
 
#h2-big-text {
  color: white; /*Տեքստի գույնը՝ սպիտակ*/
  text-align: center; /*Բլոկը դիրքը կենտրոն*/
  font-family: "Oswald", sans-serif; /*Տառատեսակների ընտանիք Oswald*/
  font-style: normal; /*Ոճը նորմալ է*/
  font-weight: 400; /* Հաստ տեքստ 400*/
  font-size: min(64px, 12vw); /*Տառատեսակի չափը նվազագույնից (64px) մինչև առավելագույնը (12vw)*/
  padding: 150px 0 50px 0; /*Սահմանի միջի հեռավորություն վերև (150px), աջ (0px), ներքև (50px) և ձախ (0px)*/
}

Следом за ним идёт очень важный блок. Нам нужно создать блок в которых должны будут располагаться элементы и задать для них отступы:

Դրան հաջորդում է մի շատ կարևոր բլոկ. Մենք պետք է ստեղծենք մի բլոկ, որտեղ տարրերը պետք է տեղակայվեն և դրանց համար հեռավորություն սահմանենք. 

.flex-elements {
  display: flex; /*Делает элементы гибкими*/
  justify-content: center; /*Блоки будут находиться в центре*/
}

#block-gap {
  column-gap: 38px; /*Внешние отступы по вертикали 38*/
  flex-wrap: wrap; /*Перенос блока на следующую строку допустим*/
  row-gap: 40px; /*Внешние отступы по горизонтали 40px*/
}
 
.flex-elements {
  display: flex; /*Դարձնում է տարրերը ճկուն*/
  justify-content: center; /*Բլոկները կլինեն կենտրոնում*/
}

#block-gap {
  column-gap: 38px; /*Ուղղահայաց սահմանի դրսի հեռավորություն 38*/
  flex-wrap: wrap; /*Բլոկի տեղափոխումը հաջորդ տող թույլատրվում է*/
  row-gap: 40px; /*40px հորիզոնական սահմանի դրսի հեռավորություն*/
}

Теперь нужно и создать наши блоки и задать цвет:

Այժմ մենք պետք է ստեղծենք մեր բլոկները և սահմանենք գույնը. 

.flex-1,
.flex-2,
.flex-3 {
  width: 346px; /*Ширина блока 346px*/
  height: 378px; /*Высота блока 378px*/
  background: #09111e; /*Цвет фона*/
  border-radius: 65px; /*Размер скругления углов*/
  display: flex; /*Делает элементы гибкими*/
  justify-content: center; /*Блоки будут находиться в центре по горизонтали*/
  align-items: center; /*Блоки будут находиться в центре по вертикали*/
}
 
.flex-1,
.flex-2,
.flex-3 {
  width: 346px; /*Բլոկի լայնությունը 346px*/
  height: 378px; /* Բլոկի բարձրությունը 378px*/
  background: #09111e; /*Ֆոնի գույնը*/
  border-radius: 65px; /*Անկյունի կլորացման չափսը*/
  display: flex; /*Դարձնում է տարրերը ճկուն*/
  justify-content: center; /*Բլոկները կկենտրոնացվեն հորիզոնական ուղղությամբ*/
  align-items: center; /*Բլոկները կենտրոնացված կլինեն ուղղահայաց*/
}

Теперь добавим для фотографий размеры:

Հիմա եկեք ավելացնենք լուսանկարների չափերը. 

.gift {
  width: 80%; /*Ширина блока 80%*/
  height: auto; /*Высота блока автоматическая*/
}
  
.microphone {
  width: 70%; /*Ширина блока 70%*/
  height: auto; /*Высота блока автоматическая*/
}
  
.suitcase {
  width: 80%; /*Ширина блока 80%*/
  height: auto; /*Высота блока автоматическая*/
}
 
.gift {
  width: 80%; /*Բլոկի լայնությունը 80%*/
  height: auto; /*Բլոկի բարձրությունը ավտոմատ*/
}
  
.microphone {
  width: 70%; /*Բլոկի լայնությունըа 70%*/
  height: auto; /*Բլոկի բարձրությունը ավտոմատ*/
}
  
.suitcase {
  width: 80%; /*Բլոկի լայնությունը 80%*/
  height: auto; /*Բլոկի բարձրությունը ավտոմատ*/
}

Теперь очередь нашего блока с текстами. Это будет нелегко. Сперва если посмотреть на него первая мысль, которая приходит в голову как его создать это взять два блока и приклеить друг к другу. Так мы получим два блока. Но сейчас мы сделаем поумнее:

Հիմա հերթը մեր բլոկինն է՝ տեքստերով։ Հեշտ չի լինի։ Սկզբում, եթե նայեք դրան, ապա առաջին միտքը, որ գալիս է ձեր մտքին, թե ինչպես ստեղծել այն, երկու բլոկ վերցնելն ու դրանք միմյանց կպցնելն է: Այսպիսով, մենք ստանում ենք երկու բլոկ: Բայց հիմա մենք դա կանենք ավելի խելացի. 

.horizontal-block {
  display: flex; /*Делает элементы гибкими*/
  justify-content: center; /*Блоки будут находиться в центре по горизонтали*/
  padding: 30px 0 134px 0; /*Отступы внутренние сверху(30px), справа(0px), снизу(134px) и слева(0px)*/
}

.horizontal-line {
  max-width: 1115px; /*Максимальная ширина*/
  width: 90%; /*Ширина блока 90%*/
  height: 122px; /*Высота блока 122px*/
  border-radius: 100px; /*Скругления углов на 100px*/
  background: linear-gradient(to right, #151928 50%, #09111e 50%); /*Градиент*/
  display: flex; /*Делает элементы гибкими*/
  justify-content: center; /*Блоки будут находиться в центре по горизонтали*/
  align-items: center; /*Блоки будут находиться в центре по вертикали*/
}

.line-texts {
  display: flex; /*Делает элементы гибкими*/
  justify-content: center; /*Блоки будут находиться в центре по горизонтали*/
}
 
.horizontal-block {
  display: flex; /*Դարձնում է տարրերը ճկուն*/
  justify-content: center; /*Բլոկները կկենտրոնացվեն հորիզոնական ուղղությամբ*/
  padding: 30px 0 134px 0; /*Սահմանի միջի հեռավորություն վերևի (30px), աջ (0px), ներքևի (134px) և ձախ (0px)*/
}

.horizontal-line {
  max-width: 1115px; /*Առավելագույն լայնությունը*/
  width: 90%; /*Բլոկի լայնությունը 90%*/
  height: 122px; /*Բլոկի բարձրությունը 122px*/
  border-radius: 100px; /*Անկյունների կլորացում 100px-ով*/
  background: linear-gradient(to right, #151928 50%, #09111e 50%); /*Գրադիենտ*/
  display: flex; /*Դարձնում է տարրերը ճկուն*/
  justify-content: center; /*Բլոկները կկենտրոնացվեն հորիզոնական ուղղությամբ*/
  align-items: center; /*Բլոկները կենտրոնացված կլինեն ուղղահայաց*/
}

.line-texts {
  display: flex; /*Դարձնում է տարրերը ճկուն*/
  justify-content: center; /*Բլոկները կկենտրոնացվեն հորիզոնական ուղղությամբ*/
}

Вместо двух блоков мы взяли элемент horizontal-line и поделили градиент на две ровные части и покрасили. Вот с текстом уже другой вопрос. Из-за того что текст у одного длиннее, а у другого короче у нас будет не состыковка. По этому мы добавим невидимые пробелы(&nbsp;) чтобы текст слева был равным правому.

Երկու բլոկների փոխարեն վերցրեցինք horizontal-line տարրը և գրադիենտը բաժանեցինք երկու հավասար մասերի և գունավորեցինք։ Այստեղ տեքստի հետ մեկ այլ հարց է. Քանի որ մեկի տեքստն ավելի երկար է, իսկ մյուսը՝ ավելի կարճ, մենք չենք համընկնի։ Հետևաբար, մենք կավելացնենք անտեսանելի բացատներ(&nbsp;) այնպես, որ ձախ կողմի տեքստը հավասար լինի աջին: 

<section class="fourth-page">
  <h2 id="h2-big-text">3D НА САЙТЕ ВЫГЛЯДЕТЬ</h2>
  <div class="flex-elements" id="block-gap">
    <div class="flex-1">
      <img class="gift" src="/img/podarok.png" alt="Фотография подарка" width="277px" height="277px"/>
    </div>
    <div class="flex-2">
      <img class="microphone" src="/img/mikrafon.png" alt="Фотография микрофона" width="242px" height="242px"/>
    </div>
    <div class="flex-3">
      <img class="suitcase" src="/img/chemodan.png" alt="Фотография чемодана" width="277px" height="277px"/>
    </div>
  </div>
  <div class="horizontal-block">
    <div class="horizontal-line">
      <div class="line-texts">
        <h2 id="expensive">&nbsp;&nbsp;ДОРОГО</h2><!--Вот тут добавили два пробела-->
        <h2 id="and">И</h2>
        <h2 id="beautiful">КРАСИВО</h2>
      </div>
    </div>
  </div>
</section>
 
<section class="fourth-page">
  <h2 id="h2-big-text">3D НА САЙТЕ ВЫГЛЯДЕТЬ</h2>
  <div class="flex-elements" id="block-gap">
    <div class="flex-1">
      <img class="gift" src="/img/podarok.png" alt="Фотография подарка" width="277px" height="277px"/>
    </div>
    <div class="flex-2">
      <img class="microphone" src="/img/mikrafon.png" alt="Фотография микрофона" width="242px" height="242px"/>
    </div>
    <div class="flex-3">
      <img class="suitcase" src="/img/chemodan.png" alt="Фотография чемодана" width="277px" height="277px"/>
    </div>
  </div>
  <div class="horizontal-block">
    <div class="horizontal-line">
      <div class="line-texts">
        <h2 id="expensive">&nbsp;&nbsp;ДОРОГО</h2><!--Այստեղ ավելացվել է երկու բացատ-->
        <h2 id="and">И</h2>
        <h2 id="beautiful">КРАСИВО</h2>
      </div>
    </div>
  </div>
</section>

Теперь и для текстов зададим свои размеры и градиенты:

Այժմ տեքստերի համար մենք կսահմանենք մեր սեփական չափերն ու գրադիենտները. 

h2 {
  font-family: "Oswald", sans-serif; /*Семейство шрифтов Oswald*/
  font-size: min(80px, 9vw); /*Размер шрифта от минимального(80px) до максимального(9vw)*/
  font-weight: 400; /*Жирность шрифта 400*/
}

#beautiful {
  margin-top: -7px; /*Внешний отступ сверху -7px*/
  background: linear-gradient(90deg, #ff5f6d 0%, #ffc371 100%); /*Градиент*/
  -webkit-background-clip: text; /*Вставка фонового изображения на текст*/
  -webkit-text-fill-color: transparent; /*Убрать лишний фон*/
}

#expensive {
  padding-right: 0px; /*Внутренний отступ справа 0px*/
  margin-top: -7px; /*Внешний отступ сверху -7px*/
  background: linear-gradient(
    102.48deg,
    #ffe100 9.47%,
    #d69a00 59.89%,
    #ffe204 99.93%
  );/*Градиент*/
  -webkit-background-clip: text; /*Вставка фонового изображения на текст*/
  -webkit-text-fill-color: transparent; /*Убрать лишний фон*/
}

#and {
  margin-top: -7px; /*Внешний отступ сверху -7px*/
  color: #ffffff; /*Цвет текста*/
  padding: 0 20px; /*Внешний отступ сверху и снизу(0px), слева и справа(20px)*/
}
 
h2 {
  font-family: "Oswald", sans-serif; /*Տառատեսակների ընտանիքը Oswald*/
  font-size: min(80px, 9vw); /*Տառատեսակի չափը նվազագույնից (80px) մինչև առավելագույնը (9vw)*/
  font-weight: 400; /*Հաստ տառատեսակ 400*/
}

#beautiful {
  margin-top: -7px; /*Վերին սահմանի դրսի հեռավորություն -7px*/
  background: linear-gradient(90deg, #ff5f6d 0%, #ffc371 100%); /*Գրադիենտ*/
  -webkit-background-clip: text; /*Տեքստի վրա ֆոնային պատկերի տեղադրում*/
  -webkit-text-fill-color: transparent; /*Հեռացնել ավելորդ ֆոնը*/
}

#expensive {
  padding-right: 0px; /*Աջ սահմանի միջի հեռավորություն 0px*/
  margin-top: -7px; /*Վերին սահմանի դրսի հեռավորություն -7px*/
  background: linear-gradient(
    102.48deg,
    #ffe100 9.47%,
    #d69a00 59.89%,
    #ffe204 99.93%
  );/*Գրադիենտ*/
  -webkit-background-clip: text; /*Տեքստի վրա ֆոնային պատկերի տեղադրում*/
  -webkit-text-fill-color: transparent; /*Հեռացնել ավելորդ ֆոնը*/
}

#and {
  margin-top: -7px; /*Վերին սահմանի դրսի հեռավորություն -7px*/
  color: #ffffff; /*Տեքստի գույնը*/
  padding: 0 20px; /*Սահմանի միջի հեռավորություն վերևից և ներքևից (0px), ձախ և աջ (20px)*/
}

Теперь у нас текст нормально сидит в центре. Нам остался только сделать <footer>.

Այժմ մենք տեքստը սովորաբար նստում ենք կենտրոնում: Մեզ միայն պետք է <footer> անել։

<< Предыдущий Следующий >>
<< Նախորդը Հաջորդը >>