Naštýlovanie sekcie pridaj sa
Sekcia pridaj sa je tvorená 2ma farebnými blokmi rozdelenými na 6 a 6 stĺpcov (to sme si už definovali v HTML).
V tejto časti je potrebné iba text jednotne horizotnálne a vertikálne nacentrovať. Na to nám poslúži flexbox.
Flexbox je nový spôsob práce s centrovaním elementov v html, zarovnaním riadkov, stĺpcov a spôsobom práce s gridom.
.join1, .join2 {
justify-content: center;
align-items: center;
display: flex;
height: 200px;
}
Na začiatok je potrebné nastaviť pre obe bloky display: flex
(tým vieme, že s blokom pracujeme ako s flexboxom).
V ďalšom kroku mu definujeme pevnú výšku, aby sme vedeli (teda program vedel za nás) určiť, kde sa nachádza stred po vertikálnej výške.
Následne použijeme dve nové atribúty spojené s flexboxom. Prvým je justify-content
, ktorý nám nacentruje do stredu obsah v boxe ako celok a následne align-items
, ktorý nacentruje v rámci contentu jednotlivé položky.
Aby sme vedeli boxy odlíšiť dajme im odlišnú farbu.
.join1 {
background: #e51e41;
}
Box dva obsahuje čiaru zľava šírky 3px bielej farby, vďaka čomu docielime efekt oddelenia boxov od seba.
.join2 {
background: #c5308a;
border-left: 3px solid #fff;
}
Úloha
- Vedel/a by si nastaviť border aj na elemente
.join1
namiesto elementu.join2
? - Vymaž border-left z
.join2
elementu a sprav rovnako vyzerajúcu čiaru sprava v elemente.join1
. - Súbor custom.css ulož.
- Pozri si výsledok práce v prehliadači.
Aby bol text vo farebných boxoch výraznejší, zväčšíme písmo na 1.8rem a zmeníme farbu písma pre text a zároveň pre link v odkaze na bielu.
#join,
#join a {
color: #fff;
font-size: 1.8rem;
}
Aby bolo jasne viditeľné, že sa jedná o odkaz, na ktorý môžeme kliknúť link zvýrazníme boldom v atribúte font-weight
a text podčiarkneme pomocou text-decoration underline
.
#join a {
font-weight: bold;
text-decoration: underline;
}