Naštýlovanie sekcie záujmy
Sekcia záujmy je obalená v triede .interest-wrapper
. Pridaj do custom.css nasledujúci kód.
.interest-wrapper {
border: 1px solid #ccc;
padding: 40px 30px;
box-shadow: 1px 6px 10px #ced1d8;
border-radius: .2em;
height: auto;
overflow: hidden;
}
V prvom kroku okolo sekcie vytvoríme rám šírky 1px sivej farby (#ccc) plnou čiarou (solid).
Následne priradíme sekcii padding
, čo znamená, že zvrchu a zdola bude obsah odsadený o 40px a sprava a zľava bude obsah odsadený o 30px.
Okolo celého boxu pridáme tieň pomocou box-shadow
atribútu, kde prvá hodnota určuje smer tieňu, druhá hodnota (6px) určuje rozsah tieňu, tretia hodnota (10px) určuje rozmazanie tieňu a poslednou hodnotou je farba tieňu (#ced1d8).
Pre sekciu nastavíme automatickú výšku a v poslednom kroku pomocou overflow: hidden
zabezpečíme nepretečenie textu mimo sekcie (ak by užívateľ vyplnil dlhší text, ako je možné do boxu vložiť).
V druhom kroku upravíme farbu a veľkosť ikonky, ktorá je v tomto prípade písmo na základe triedy, ktorú sme jej priradili v index.html súbore .fa-i
.
.fa-i {
font-size: 4em;
color: #455376;
}
Poznámka: Je potrebné aby trieda .fa-i bola v kóde nižšie ako trieda .fa, ktorá by tento štýl prepisovala. Preto kľudne umiestni .fa-i čo najviac naspodok css súboru.
Zmenili sme veľkosť písma na 4em a farbu sme pridelili zhodnú s farbou pre nadpisy (#455376).