12 #permalink FOOTER - sekcja stopki

Stopka (footer)

footer: Główny kontener stopki, który zajmuje pełną szerokość strony (100%), ma tło w kolorze var(--fifth-color) oraz biały kolor tekstu. Tekst w stopce jest wyśrodkowany poziomo (text-align: center;) i ma odstęp na górze wynoszący 1 rem (padding-top: 1rem;).
.footer__text: Klasa stosowana do stylizacji tekstu w stopce. Rozmiar czcionki wynosi 1.2rem, a kolor to var(--white-color).
.footer__link: Klasa używana do stylizacji linków w stopce. Linki mają kolor var(--red-color), są podkreślone (text-decoration: underline;) i posiadają płynne przejścia (transition) w celu uzyskania efektu transformacji podczas najechania kursorem. Przy hoverze linki są powiększane do 120% oryginalnej wielkości (transform: scale(1.2);) i zmieniają kolor na var(--red2-color).
.footer__link:visited: Styl dla odwiedzonych linków w stopce, nadaje im kolor rgba(0, 0, 0, 0.7).
footer img: Reguła CSS dotycząca obrazków w stopce. Obrazki są ograniczone do szerokości i wysokości 30 pikseli, mają odstęp marginesu 10 pikseli i efekt płynnego przejścia (transition) przy najechaniu kursorem (transform: scale(1.2);).

Kod HTML

Kod HTML zawiera różne elementy umieszczone w stopce. Na początku znajdują się ikony linków do różnych platform społecznościowych (Facebook, Instagram, YouTube, Twitter). Następnie jest sekcja z informacjami ogólnymi, w tym prawami autorskimi oraz linkiem do polityki prywatności. Na końcu stopki znajduje się odnośnik do weryfikatora CSS.

Stopka stanowi ważny element strony internetowej, zawierający istotne informacje, linki do mediów społecznościowych i inne zasoby.

Example

Markup

<footer>
        <a href="https://www.facebook.com/" class="social__link"><img src="img/facebook.svg" alt="Facebook" width="30" height="30"></a>
        <a href="https://www.instagram.com/" class="social__link"><img src="img/instagram.svg" alt="Instagram" width="30" height="30"></a>
        <a href="https://www.youtube.com/" class="social__link"><img src="img/youtube.svg" alt="Youtube" width="30" height="30"></a>
        <a href="https://www.twitter.com/" class="social__link"><img src="img/twitter.svg" alt="Twitter" width="30" height="30"></a>
        <div class="footer">
            <p class="footer__text">
                All rights reserved &copy; 2023 Lorem ipsum |
                <a href="./privacy.html" class="footer__link">Privacy Policy</a>
            </p>
        </div>
        <p>
        <a href="https://jigsaw.w3.org/css-validator/check/referer">
            <img style="border:0;width:88px;height:31px"
                src="https://jigsaw.w3.org/css-validator/images/vcss"
                alt="Poprawny CSS!">
        </a>
    </p>
</footer>

Source: styleFaq.css, line 729