11 #permalink FOOTER - sekcja stopki

Stopka (footer)

footer: Główny kontener stopki, który zajmuje pełną szerokość strony (width: 100%), ma tło w kolorze #7c4200, oraz biały kolor tekstu (color: var(--white-color)). 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) wewnątrz kontenera #socialmedia. Następnie jest sekcja z informacjami ogólnymi, w tym prawami autorskimi (All rights reserved © 2023 Lorem ipsum) oraz linkiem do polityki prywatności (Privacy Policy). 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>
        <div id="socialmedia">
           <!-- Linki do mediów społecznościowych -->
            <a href="https://www.facebook.com/" class="social__link"><img src="img/facebook.svg" alt="Facebook" loading="lazy" width="30" height="30"></a>
            <a href="https://www.instagram.com/" class="social__link"><img src="img/instagram.svg" alt="Instagram" loading="lazy" width="30" height="30"></a>
            <a href="https://www.youtube.com/" class="social__link"><img src="img/youtube.svg" alt="Youtube" loading="lazy" width="30" height="30"></a>
            <a href="https://www.twitter.com/" class="social__link"><img src="img/twitter.svg" alt="Twitter" loading="lazy" width="30" height="30"></a>
        </div>
        <div class="footer">
            <!-- Stopka strony -->
            <p class="footer__text">
               <!-- Tekst i linki w stopce -->
                All rights reserved &copy; 2023 Lorem ipsum |
                <a href="./privacy.html" class="footer__link">Privacy Policy</a>
            </p>
        </div>
        <div>
           <!-- Dodatkowe informacje lub linki -->
            <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>
        </div>
    </footer>

Source: styleFaq.css, line 1021