KSS Style Guide

Oto opis kodu HTML dla stopki (footer) strony internetowej:

Sekcja Social Icons:

W stopce znajduje się kontener o klasie "social-icons". Ten kontener zawiera trzy ikony, reprezentujące różne media społecznościowe. Pierwsza ikona to ikona Facebooka (i class="fab fa-facebook" /i), która jest również odnośnikiem do strony Facebooka (https://www.facebook.com). Druga ikona to ikona Instagrama (i class="fab fa-instagram" /i), która jest odnośnikiem do strony Instagrama (https://www.instagram.com). Trzecia ikona to ikona YouTube (i class="fab fa-youtube" /i), która jest odnośnikiem do strony YouTube (https://www.youtube.com). Atrybut "target="_blank"" oznacza, że po kliknięciu na ikonę otworzy się nowe okno przeglądarki z odpowiednią stroną. Sekcja Copyright:

Poniżej sekcji "social-icons" znajduje się kontener o klasie "copyright". W tym kontenerze jest wyświetlany tekst "© 2023 Wszelkie prawa zastrzeżone". Tekst ten informuje, że prawa autorskie do treści na stronie są zastrzeżone i należą do właściciela witryny. Ten fragment kodu HTML jest odpowiedzialny za stopkę strony internetowej i zawiera odnośniki do różnych mediów społecznościowych oraz informację o prawach autorskich.

footer:

Tło stopki ma kolor #333 (ciemny odcień szaro-czarny). Tekst w stopce jest biały (kolor: #fff). Tekst jest wycentrowany poziomo (text-align: center). Stopka ma wewnętrzny margines 20 pikseli na górze i na dole (padding: 20px). Element ma pozycję względną (position: relative). Wysokość stopki wynosi 100 pikseli (height: 100px). Jest odstęp 20 pikseli od elementu nad stopką (margin-top: 20px). .social-icons:

To kontener dla ikon społecznościowych w stopce. Ma pozycję absolutną (position: absolute), co oznacza, że jest pozycjonowany względem najbliższego elementu z pozycją relatywną (czyli elementu footer). Jest umieszczony na środku stopki (top: 40px) i rozciąga się na całej szerokości (left: 0, right: 0). #facebook:hover, #instagram:hover, #yt:hover:

Są to pseudoklasy :hover dotyczące konkretnych ikon społecznościowych (Facebook, Instagram, YouTube). Gdy kursor najedzie na daną ikonę, ma miejsce efekt skalowania na 150% wielkości (scale: 1.5). Kolor tekstu ikony zmienia się na odpowiedni (blue, orange, red) po najechaniu kursorem. .social-icons a:

To style dla linków (ikon społecznościowych) w stopce. Margines poziomy między nimi wynosi 10 pikseli na lewo i na prawo (margin: 0 10px). Rozmiar ikon wynosi 32 piksele (font-size: 32px). Kolor tekstu ikon jest biały (color: #fff). Linki nie posiadają podkreślenia (text-decoration: none). .copyright:

To style dla tekstu z informacją o prawach autorskich. Rozmiar czcionki wynosi 14 pikseli (font-size: 14px). W skrócie, stopka (footer) ma ciemne tło z białym tekstem i zawiera ikony społecznościowe (social-icons). Ikony te zmieniają rozmiar i kolor po najechaniu na nie kursorem. Tekst z informacją o prawach autorskich (copyright) ma mniejszy rozmiar czcionki.