6 #permalink GALLERY - sekcja galerii zdjęć

Sekcja "Stylizacja ogólna strony"

main: Element <main> posiada właściwość flex: 1, sugerując, że dostosowuje się do dostępnej przestrzeni flexbox na stronie. Posiada również marginesy na górze i na dole.
#relativeTemplate: Jest to kontener o id "relativeTemplate", który ma pozycję "relative", co umożliwia pozycjonowanie innych elementów wewnątrz niego. Ma szerokość 100% i wysokość 50vh (50% wysokości widoku).
#relativ i #background2: Oba te elementy mają pozycję "absolute" i zaokrąglone rogi (border-radius: 50%). #background2 ma cień (box-shadow) oraz szare tło. Oba te sekcje są osadzone wewnątrz kontenera "relativeTemplate" i ustawione na odpowiednich pozycjach.
#relativ2: Ten element reprezentuje kolejną sekcję o id "relativ2". Jest to również element absolutny z niebieskim tłem (rgb(55, 117, 209)), posiada zaokrąglone rogi, cień oraz zawiera nagłówek <h3>, listę <ul> oraz link <a>.

Sekcja "Stylizacja treści sekcji relativ2"

#relativ2 h3: Stylizuje nagłówek <h3> w sekcji "relativ2", ustawiając marginesy i rozmiar czcionki.
#relativ2 > ul > li: Określa stylizację listy w sekcji "relativ2", zmieniając typ punktorów na "lower-greek" oraz ustawiając rozmiar czcionki i margines.
#relativ2 > a: Stylizuje link w sekcji "relativ2", ustawiając margines, zaokrąglone rogi, dekorację tekstu, kolor i obramowanie.
#relativ2 > a:hover: Definiuje styl przycisku po najechaniu kursorem, zmieniając tło i kolor tekstu.

Sekcja "Nagłówki i teksty"

.section__heading: Nagłówek o klasie "section__heading" ma rozmiar czcionki 2rem, kolor czerwony oraz margines na dole.
.section__heading:hover: Dodaje efekt zmniejszenia rozmiaru (skalowania) nagłówka po najechaniu kursorem.
div h2: Stylizuje nagłówek <h2>, który znajduje się wewnątrz elementów <div>, ustawiając rozmiar czcionki, kolor oraz margines na dole.
.gallery-heading: Stylizuje nagłówek o klasie "gallery-heading", ustawiając rozmiar czcionki, podkreślenie tekstu, kolor oraz marginesy i odstęp między tekstem.

Sekcja "Galeria obrazków"

.gallery-container: Określa styl kontenera o klasie "gallery-container", ustawiając maksymalną szerokość oraz centrowanie zawartości.
#gallery: Stylizuje kontener o id "gallery", ustawiając margines na górze, układ siatki (grid), odstęp między elementami oraz centrowanie zawartości.
#gallery img: Definiuje styl obrazków w sekcji galerii, ustawiając maksymalną szerokość oraz efekt animacji po najechaniu kursorem.

Sekcja "Media Queries - Dostosowanie do różnych urządzeń"

Reguły Media Queries: Są to reguły CSS dostosowujące stylizację dla różnych szerokości ekranu. Zdefiniowane są trzy punkty przerwania: dla ekranów o szerokości od 768px do 1199px, od 1200px w górę oraz poniżej 768px. W każdym z tych punktów przerwania dostosowywane są pozycje i style elementów, aby zachować responsywność strony w zależności od rozmiaru ekranu.

Example

See our products

Product kids
Product mens
Product womens

Lorem ipsum!

Gallery

Markup

 <main>
        <div id="relativeTemplate">
            <div id="relativ"></div>
            <img src="img/abootUs2.webp" alt="background2" id="background2">
            <div id="relativ2">
                <h3>See our products</h3>
                <ul>
                    <li>Product kids</li>
                    <li>Product mens</li>
                    <li>Product womens</li>
                </ul>
                <a href="./contact.html" class="contactClass">Lorem ipsum!</a>
            </div>
        </div>
        <h1 style="display:none;">.</h1>
        <h2 class="gallery-heading">Gallery</h2>
        <div class="gallery-container">
            <section class="gallery_class" id="gallery">
                <h2 style="display:none;">.</h2>
                <img src="img/gallery1.webp" alt="Lorem Ipsum1" loading="lazy" width="400" height="400">
                <img src="img/gallery2.webp" alt="Lorem Ipsum2" loading="lazy" width="400" height="400">
                <img src="img/gallery3.webp" alt="Lorem Ipsum3" loading="lazy" width="400" height="400">
                <img src="img/gallery4.webp" alt="Lorem Ipsum4" loading="lazy" width="400" height="400">
                <img src="img/gallery5.webp" alt="Lorem Ipsum5" loading="lazy" width="400" height="400">
                <img src="img/gallery6.webp" alt="Lorem Ipsum6" loading="lazy" width="400" height="400">
                <img src="img/gallery7.webp" alt="Lorem Ipsum7" loading="lazy" width="400" height="400">
                <img src="img/gallery8.webp" alt="Lorem Ipsum8" loading="lazy" width="400" height="400">
                <img src="img/gallery9.webp" alt="Lorem Ipsum9" loading="lazy" width="400" height="400">
                <img src="img/gallery10.webp" alt="Lorem Ipsum10" loading="lazy" width="400" height="400">
                <img src="img/gallery11.webp" alt="Lorem Ipsum11" loading="lazy" width="400" height="400">
                <img src="img/gallery12.webp" alt="Lorem Ipsum12" loading="lazy" width="400" height="400">
            </section>
        </div>
  </main>

Source: styleGallery.css, line 505