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).