KSS Style Guide

5 #permalink GALLERY - sekcja galerii zdjęć

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Kod HTML:

  • Główny kontener strony jest oznaczony jako <main>.

  • Kontener zawierający przycisk ma ID "container" i klasę "container". Przycisk jest ukryty za pomocą style="display: none;".

  • Nagłówek <h1> o ukrytym stylu zawiera tylko kropkę i jest oznaczony jako h1 z atrybutem style="display:none;".

  • Nagłówek <h2> z klasą "gallery-heading" zawiera tytuł "Gallery" i jest oznaczony jako h2 z klasą "gallery-heading".

  • Kontener galerii jest oznaczony jako <div class="gallery-container">.

  • Nagłówek dla każdej kategorii kolekcji jest oznaczony jako <div class="naglowek">.

  • Nagłówek <h2> z nazwą kolekcji dziecięcej zawiera tekst "CHILDREN'S COLLECTION" i jest oznaczony jako h2.

  • Sekcja galerii dla kolekcji dziecięcej jest oznaczona jako <section class="gallery_class" id="kid">.

  • **Obrazek w galerii ma atrybuty, takie jak src, alt, loading, width, height, oraz jest oznaczony jako <img> z identyfikatorem "spring1".

  • Analogiczne sekcje i obrazki są dostępne dla kolekcji męskiej (o ID "men") i damskiej (o ID "women").

Kod CSS:

  • Styl dla nagłówka z klasą "naglowek": Tekst jest wyśrodkowany, ma rozmiar czcionki 2rem, kolor "var(--primary-color)", marginesy są ustawione na 0, a padding na górze i dole wynosi 20px, szerokość jest 100%.

  • Styl dla nagłówków <h2> znajdujących się wewnątrz <div>: Tekst jest wyśrodkowany, ma rozmiar czcionki 2rem, jest czarny, a margines dolny wynosi 2rem.

  • Styl dla nagłówka galerii z klasą "gallery-heading": Tekst jest wyśrodkowany, ma rozmiar czcionki 2rem, jest podkreślony, ma kolor "var(--primary-color)", marginesy wynoszą 0, a padding na górze i dole 20px.

  • Styl dla kontenera galerii: Maksymalna szerokość wynosi 1600px, a marginesy są ustawione na "auto" w celu wyśrodkowania na stronie.

  • Style dla sekcji kolekcji dziecięcej (o ID "kid"), męskiej (o ID "men") i damskiej (o ID "women"): Ustawiają odstęp na górze na 10px, używają układu siatki (grid) z odstępem 10px i centrują zawartość.

  • Style dla obrazków w sekcjach kolekcji (o ID "kid img", "men img", "women img"): Maksymalna szerokość wynosi 400px i skalują się proporcjonalnie.

  • Style dla obrazków w stanie hover (o ID "kid img:hover", "men img:hover", "women img:hover"): Wykorzystują animację "fadeIn" o czasie trwania 2s.

  • Media queries są używane do dostosowania układu siatki dla różnych szerokości ekranu, od 767px do 1600px. W zależności od szerokości ekranu, liczba kolumn w siatce jest zmieniana, aby dostosować się do różnych rozmiarów urządzeń.

Example

.

Gallery

CHILDREN'S COLLECTION

MEN'S COLLECTION

WOMEN'S COLLECTION

Markup 
    <main>
        <div id="container" class="container">
            <button style="display: none;" id="button" class="button">Potwierdź godzinę !</button>
        </div>
        <h1 style="display:none;">.</h1>
        <h2 class="gallery-heading">Gallery</h2>
        <div class="gallery-container">
            <div class="naglowek">
                <h2>CHILDREN'S COLLECTION</h2>
            </div>
            <section class="gallery_class" id="kid">
                    <img src="img/gallery1.webp" alt="Lorem Ipsum1" loading="lazy" width="400" height="400" id="spring1">
                    <img src="img/gallery2.webp" alt="Lorem Ipsum2" loading="lazy" width="400" height="400" id="summer1">
                    <img src="img/gallery3.webp" alt="Lorem Ipsum3" loading="lazy" width="400" height="400" id="autumn1">
                    <img src="img/gallery4.webp" alt="Lorem Ipsum4" loading="lazy" width="400" height="400" id="winter1">
            </section>
            <div class="naglowek"></div>
                <h2>MEN'S COLLECTION</h2>
            </div>
            <section class="gallery_class" id="men">
                    <img src="img/gallery5.webp" alt="Lorem Ipsum5" loading="lazy" width="400" height="400" id="spring2">
                    <img src="img/gallery6.webp" alt="Lorem Ipsum6" loading="lazy" width="400" height="400" id="summer2">
                    <img src="img/gallery7.webp" alt="Lorem Ipsum7" loading="lazy" width="400" height="400" id="autumn2">
                    <img src="img/gallery8.webp" alt="Lorem Ipsum8" loading="lazy" width="400" height="400" id="winter2">
            </section>
            <div class="naglowek">
                <h2>WOMEN'S COLLECTION</h2>
            </div>
            <section class="gallery_class" id="women">
                    <img src="img/gallery9.webp" alt="Lorem Ipsum9" loading="lazy" width="400" height="400" id="spring3">
                    <img src="img/gallery10.webp" alt="Lorem Ipsum10" loading="lazy" width="400" height="400" id="summer3">
                    <img src="img/gallery11.webp" alt="Lorem Ipsum11" loading="lazy" width="400" height="400" id="autumn3">
                    <img src="img/gallery12.webp" alt="Lorem Ipsum12" loading="lazy" width="400" height="400" id="winter3">
            </section>
        </div>
    </main>
Source: styleGallery.css, line 826