Теперь мы дошли к самой сложной, но интересной части сайта. Тут есть 3 фотографии, 3 блока flex и текст с градиентами. Давайте сперва посмотрим конструкцию!
Այժմ մենք հասել ենք կայքի ամենադժվար, բայց հետաքրքիր հատվածին: Առկա է 3 լուսանկար, 3 flex բլոկ և գրադիենտներով տեքստ։ Եկեք նախ տեսնենք դիզայնը:
Ну что.. Давайте этот блок мы рассмотрим подробнее и попробуем вспомнить всё что нужно. Начнём как всегда с первого блока:
Դե ... Եկեք մանրամասն նայենք այս բլոկին և փորձենք հիշել այն ամենը, ինչ ձեզ հարկավոր է: Սկսենք ինչպես միշտ առաջին բլոկով.
Теперь займёмся большим текстом в центре:
Հիմա անդրադառնանք կենտրոնում գտնվող մեծ տեքստին.
Следом за ним идёт очень важный блок. Нам нужно создать блок в которых должны будут располагаться элементы и задать для них отступы:
Դրան հաջորդում է մի շատ կարևոր բլոկ. Մենք պետք է ստեղծենք մի բլոկ, որտեղ տարրերը պետք է տեղակայվեն և դրանց համար հեռավորություն սահմանենք.
Теперь нужно и создать наши блоки и задать цвет:
Այժմ մենք պետք է ստեղծենք մեր բլոկները և սահմանենք գույնը.
Теперь добавим для фотографий размеры:
Հիմա եկեք ավելացնենք լուսանկարների չափերը.
Теперь очередь нашего блока с текстами. Это будет нелегко. Сперва если посмотреть на него первая мысль, которая приходит в голову как его создать это взять два блока и приклеить друг к другу. Так мы получим два блока. Но сейчас мы сделаем поумнее:
Հիմա հերթը մեր բլոկինն է՝ տեքստերով։ Հեշտ չի լինի։ Սկզբում, եթե նայեք դրան, ապա առաջին միտքը, որ գալիս է ձեր մտքին, թե ինչպես ստեղծել այն, երկու բլոկ վերցնելն ու դրանք միմյանց կպցնելն է: Այսպիսով, մենք ստանում ենք երկու բլոկ: Բայց հիմա մենք դա կանենք ավելի խելացի.
Вместо двух блоков мы взяли элемент horizontal-line и поделили градиент на две ровные части и покрасили. Вот с текстом уже другой вопрос. Из-за того что текст у одного длиннее, а у другого короче у нас будет не состыковка. По этому мы добавим невидимые пробелы( ) чтобы текст слева был равным правому.
Երկու բլոկների փոխարեն վերցրեցինք horizontal-line տարրը և գրադիենտը բաժանեցինք երկու հավասար մասերի և գունավորեցինք։ Այստեղ տեքստի հետ մեկ այլ հարց է. Քանի որ մեկի տեքստն ավելի երկար է, իսկ մյուսը՝ ավելի կարճ, մենք չենք համընկնի։ Հետևաբար, մենք կավելացնենք անտեսանելի բացատներ( ) այնպես, որ ձախ կողմի տեքստը հավասար լինի աջին:
Теперь и для текстов зададим свои размеры и градиенты:
Այժմ տեքստերի համար մենք կսահմանենք մեր սեփական չափերն ու գրադիենտները.
Теперь у нас текст нормально сидит в центре. Нам остался только сделать <footer>.
Այժմ մենք տեքստը սովորաբար նստում ենք կենտրոնում: Մեզ միայն պետք է <footer> անել։