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

  1. Vedel/a by si nastaviť border aj na elemente .join1 namiesto elementu .join2?
  2. Vymaž border-left z .join2 elementu a sprav rovnako vyzerajúcu čiaru sprava v elemente .join1.
  3. Súbor custom.css ulož.
  4. 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;
 }