1 #permalink HOME - sekcja główna strony

Cała strona główna prezentuję się tak, jak na załączonym obrazku. Zawiera ona nagłówek, sekcję z ofertą, sekcję z galerią, sekcję z opisem i sekcję z informacjami. Rodzieliłem ją na poszczególne sekcje, aby łatwiej było zdefiniować style dla poszczególnych elementów.

Markup

   <main>
        <section class="photoFirst">
            <!-- Sekcja pierwszego zestawu zdjęć -->
            <!-- Obrazy i tekst w tej sekcji -->
            <h2 style="display:none;">.</h2>
            <img id="photos1" src="img/mainPage4.webp" alt="Lorem ipsum 1" loading="lazy" width="300" height="300">
            <img id="photos2" src="img/mainPage5.webp" alt="Lorem ipsum 2" loading="lazy" width="300" height="300">
            <img id="photos3" src="img/mainPage6.webp" alt="Lorem ipsum 3" loading="lazy" width="300" height="300">
        </section>
        <input type="checkbox" id="toggleImages">
        <label for="toggleImages" id="showMoreButton" class="buttonFoto">LOAD MORE PHOTO</label>
        <div class="photoSecond">
            <div class="animation">
                <img class="glasses" src="https://kibbles.klausapp.com/assets/img/loader/glasses-regular.svg" alt="oksy1" width="140" height="140">
                <img class="logoCat" src="https://kibbles.klausapp.com/assets/img/loader/main.svg" alt="cot1" width="140" height="140">
            </div>
            <div class="animation">
                <img class="glasses" src="https://kibbles.klausapp.com/assets/img/loader/glasses-deal-with-it.svg" alt="oksy2" width="140" height="140">
                <img class="logoCat" src="https://kibbles.klausapp.com/assets/img/loader/main.svg" alt="cot2" width="140" height="140">
            </div>
            <div class="animation">
                <img class="glasses" src="https://kibbles.klausapp.com/assets/img/loader/glasses-hearts.svg" alt="oksy3" width="140" height="140">
                <img class="logoCat" src="https://kibbles.klausapp.com/assets/img/loader/main.svg" alt="cot3" width="140" height="140">
            </div>
        </div>
        <section class="photoSecond">
            <h2 style="display:none;">.</h2>
            <img class="photosX" src="img/mainPage1.webp" alt="Lorem ipsum 4" loading="lazy" width="300" height="300">
            <img class="photosX" src="img/mainPage2.webp" alt="Lorem ipsum 5" loading="lazy" width="300" height="300">
            <img class="photosX" src="img/mainPage3.webp" alt="Lorem ipsum 6" loading="lazy" width="300" height="300">
        </section>
        <label for="toggleImages" id="showLessButton" class="buttonFoto">LOAD LESS PHOTO</label>
        <div class="product-grid">
            <div class="product-item" style="background-color: #eae9e7;">
                <div class="product-image">
                    <img src="img/gallery1.webp" alt="Gallery 1" loading="lazy" width="300" height="300">
                </div>
                <div class="product-content">
                    <h3>LOREM IPSUM</h3>
                    <a href="./gallery.html" class="details-button">VIEW DETAILS</a>
                </div>
            </div>
            <div id="drugie" class="product-item" style="background-color: #eae9e7">
                <div class="product-image">
                    <img src="img/gallery2.webp" alt="Gallery 2" loading="lazy" width="300" height="300">
                </div>
                <div class="product-content">
                    <h3>LOREM IPSUM</h3>
                    <a href="./gallery.html" class="details-button">VIEW DETAILS</a>
                </div>
            </div>
        </div>
        <section class="section">
            <h2 class="section__heading">Lorem ipsum</h2>
            <div class="about-us__textbox">
                <p class="about-us__text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
                    ac felis mi. Nulla urna risus, malesuada nec blandit at, dictum a
                    est. Integer pulvinar dui elit, vitae vehicula est tempor venenatis.
                    Proin pulvinar pulvinar enim, et vestibulum leo. Vivamus placerat,
                    magna non commodo suscipit, sapien lorem finibus dui, nec interdum
                    lectus ante dictum mi.
                </p>
                <label for="modalCheck" class="button">Lorem ipsum!</label>
                <input type="checkbox" id="modalCheck" style="display: none">
                <div class="modal">
                    <div class="modal-content">
                        <p>Tak dobrze trafiłeś! To lorem ipsum!</p>
                    </div>
                </div>
            </div>
            <div class="product-item4">
                <img src="img/item1.webp" alt="Item" loading="lazy" width="1200" height="700">
                <div class="info-box">
                    <h2>Lorem Ipsum</h2>
                    <p class="price2">$50.00 <span class="old-price">$200.00</span></p>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, et do
                        eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    </p>
                    <a href="./services.html" class="details-button2">VIEW DETAILS</a>
                </div>
            </div>
            <div class="slider">
                <div class="slides">
                    <div id="slide-1" class="slide">
                        <img src="img/mainPage1.webp" alt="Lorem ipsum 1v2" loading="lazy" width="260" height="400">
                        <div class="slide-description">
                            <p class="product-name">Lorem Ipsum</p>
                            <p class="price">10$</p>
                        </div>
                    </div>
                    <div id="slide-2" class="slide">
                        <img src="img/mainPage2.webp" alt="Lorem ipsum 2v2" loading="lazy" width="260" height="400">
                        <div class="slide-description">
                            <p class="product-name">Lorem Ipsum</p>
                            <p class="price">10$</p>
                        </div>
                    </div>
                    <div id="slide-3" class="slide">
                        <img src="img/mainPage10.webp" alt="Lorem ipsum 3v2" loading="lazy" width="260" height="400">
                        <div class="slide-description">
                            <p class="product-name">Lorem Ipsum</p>
                            <p class="price">10$</p>
                        </div>
                    </div>
                    <div id="slide-4" class="slide">
                        <img src="img/mainPage11.webp" alt="Lorem ipsum 4v2" loading="lazy" width="260" height="400">
                        <div class="slide-description">
                            <p class="product-name">Lorem Ipsum</p>
                            <p class="price">10$</p>
                        </div>
                    </div>
                    <div id="slide-5" class="slide">
                        <img src="img/mainPage14.webp" alt="Lorem ipsum 5v2" loading="lazy" width="260" height="400">
                        <div class="slide-description">
                            <p class="product-name">Lorem Ipsum</p>
                            <p class="price">10$</p>
                        </div>
                    </div>
                    <div id="slide-6" class="slide">
                        <img src="img/mainPage13.webp" alt="Lorem ipsum 6v2" loading="lazy" width="260" height="400">
                        <div class="slide-description">
                            <p class="product-name">Lorem Ipsum</p>
                            <p class="price">10$</p>
                        </div>
                    </div>
                    <div id="slide-7" class="slide">
                        <img src="img/mainPage12.webp" alt="Lorem ipsum 7v2" loading="lazy" width="260" height="400">
                        <div class="slide-description">
                            <p class="product-name">Lorem Ipsum</p>
                            <p class="price">10$</p>
                        </div>
                    </div>
                    <div id="slide-8" class="slide">
                        <img src="img/mainPage8.webp" alt="Lorem ipsum 8v2" loading="lazy" width="260" height="400">
                        <div class="slide-description">
                            <p class="product-name">Lorem Ipsum</p>
                            <p class="price">10$</p>
                        </div>
                    </div>
                    <div id="slide-9" class="slide">
                        <img src="img/mainPage9.webp" alt="Lorem ipsum 9v2" loading="lazy" width="260" height="400">
                        <div class="slide-description">
                            <p class="product-name">Lorem Ipsum</p>
                            <p class="price">10$</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="slider-controls">
                <input type="radio" id="slide-radio-1v2" name="slide" class="slider-radio">
                <label for="slide-radio-1v2" class="slider-label" onclick="window.location.href='#slide-1';"></label>
                <input type="radio" id="slide-radio-2v2" name="slide" class="slider-radio">
                <label for="slide-radio-2v2" class="slider-label" onclick="window.location.href='#slide-2';"></label>
                <input type="radio" id="slide-radio-3v2" name="slide" class="slider-radio">
                <label for="slide-radio-3v2" class="slider-label" onclick="window.location.href='#slide-3';"></label>
                <input type="radio" id="slide-radio-4v2" name="slide" class="slider-radio">
                <label for="slide-radio-4v2" class="slider-label" onclick="window.location.href='#slide-4';"></label>
                <input type="radio" id="slide-radio-5v2" name="slide" class="slider-radio" checked>
                <label for="slide-radio-5v2" class="slider-label" onclick="window.location.href='#slide-5';"></label>
                <input type="radio" id="slide-radio-6v2" name="slide" class="slider-radio">
                <label for="slide-radio-6v2" class="slider-label" onclick="window.location.href='#slide-6';"></label>
                <input type="radio" id="slide-radio-7v2" name="slide" class="slider-radio">
                <label for="slide-radio-7v2" class="slider-label" onclick="window.location.href='#slide-7';"></label>
                <input type="radio" id="slide-radio-8v2" name="slide" class="slider-radio">
                <label for="slide-radio-8v2" class="slider-label" onclick="window.location.href='#slide-8';"></label>
                <input type="radio" id="slide-radio-9v2" name="slide" class="slider-radio">
                <label for="slide-radio-9v2" class="slider-label" onclick="window.location.href='#slide-9';"></label>
            </div>
        </section>
            <div class="product-grid1">
                <div class="product-item1">
                    <img src="img/gallery9.webp" alt="LoremIpsum" loading="lazy" width="200" height="200">
                    <div class="overlay">
                        <div class="text">
                            <h3>Lorem</h3>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit...
                            </p>
                            <a href="./ourProducts.html" class="details-button-x">VIEW ALL</a>
                        </div>
                    </div>
                </div>
                <div class="product-item1">
                    <img src="img/gallery12.webp" alt="Loremer" loading="lazy" width="200" height="200">
                    <h3>Lorem</h3>
                    <div class="price-rating">
                        <span class="price">30$</span>
                        <span class="rating"><img src="img/gwiazda_zolta.svg" alt="Promocja1" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja2" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja3" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja4" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_szara.svg" alt="Promocja5" loading="lazy" width="30" height="30">
                        </span>
                    </div>
                </div>
                <div class="product-item1">
                    <img src="img/gallery11.webp" alt="Loremer2" loading="lazy" width="200" height="200">
                    <h3>Lorem</h3>
                    <div class="price-rating">
                        <span class="price">30$</span>
                        <span class="rating"><img src="img/gwiazda_zolta.svg" alt="Promocja6" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja7" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja8" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja9" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_szara.svg" alt="Promocja10" loading="lazy" width="30" height="30">
                        </span>
                    </div>
                </div>
                <div class="product-item1">
                    <img src="img/gallery10.webp" alt="Loremer3" loading="lazy" width="200" height="200">
                    <h3>Lorem</h3>
                    <div class="price-rating">
                        <span class="price">30$</span>
                        <span class="rating"><img src="img/gwiazda_zolta.svg" alt="Promocja11" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja12" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja13" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja14" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_szara.svg" alt="Promocja15" loading="lazy" width="30" height="30">
                        </span>
                    </div>
                </div>
            </div>
            <div class="product-grid2">
                <div class="product-item1">
                    <img src="img/abootUs4.webp" alt="Loremer4" loading="lazy" width="200" height="200">
                    <h3>Lorem</h3>
                    <div class="price-rating">
                        <span class="price">30$</span>
                        <span class="rating"><img src="img/gwiazda_zolta.svg" alt="Promocja16" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja17" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja18" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja19" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_szara.svg" alt="Promocja20" loading="lazy" width="30" height="30">
                        </span>
                    </div>
                </div>
                <div class="product-item1">
                    <img src="img/abootUs3.webp" alt="Loremer5" loading="lazy" width="200" height="200">
                    <h3>Lorem</h3>
                    <div class="price-rating">
                        <span class="price">30$</span>
                        <span class="rating"><img src="img/gwiazda_zolta.svg" alt="Promocja21" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja22" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja23" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja24" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_szara.svg" alt="Promocja25" loading="lazy" width="30" height="30">
                        </span>
                    </div>
                </div>
                <div class="product-item1">
                    <img src="img/abootUs2.webp" alt="Loremer6" loading="lazy" width="200" height="200">
                    <h3>Lorem</h3>
                    <div class="price-rating">
                        <span class="price">30$</span>
                        <span class="rating"><img src="img/gwiazda_zolta.svg" alt="Promocja26" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja27" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja28" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja29" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_szara.svg" alt="Promocja30" loading="lazy" width="30" height="30">
                        </span>
                    </div>
                </div>
                <div class="product-item1">
                    <img src="img/abootUs1.webp" alt="Loremer7" loading="lazy" width="200" height="200">
                    <div class="overlay">
                        <div class="text">
                            <h3>Lorem</h3>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit...
                            </p>
                            <a href="./ourProducts.html" class="details-button-x">VIEW ALL</a>
                        </div>
                    </div>
                </div>
            </div>
        <section class="collection">
            <div class="collection__men">
                <h3 class="collection__heading">Product 1 Collection</h3>
                <div class="collection__shadow">
                    <img src="img/product1.webp" alt="product 1" class="collection__img" loading="lazy" width="150" height="150">
                </div>
                <a class="collection__btn" href="./ourProducts.html">explore more</a>
            </div>
            <div class="collection__women">
                <h3 class="collection__heading">Product 2 Collection</h3>
                <div class="collection__shadow">
                    <img src="img/product7.webp" alt="product 2" class="collection__img" loading="lazy" width="150" height="150">
                </div>
                <a class="collection__btn" href="./ourProducts.html">explore more</a>
            </div>
            <div class="collection__kids">
                <h3 class="collection__heading">Product 3 Collection</h3>
                <div class="collection__shadow">
                    <img src="img/product3.webp" alt="product 3" class="collection__img" loading="lazy" width="150" height="150">
                </div>
                <a class="collection__btn" href="./ourProducts.html">explore more</a>
            </div>
        </section>
        <section class="offer">
            <h2 style="display:none;">.</h2>
            <div class="offer__body">
                <img src="img/logo1transparent.webp" alt="LOGOv2" class="offer__img" loading="lazy" width="300" height="300">
                <div class="offer__content container">
                    <p class="offer__heading">SPECIAL OFFER</p>
                    <p class="offer__title">UPTO 70% OFF</p>
                    <p class="offer__text">
                        Upgrade your footwear collection with our 70% off special deal!
                        LOREM IPSUM!
                    </p>
                    <a href="./ourProducts.html" class="details-button">VIEW ALL</a>
                </div>
            </div>
        </section>
        <section class="service">
            <div class="service__content container">
                <div class="service__box">
                    <img src="img/pay1.webp" alt="pay1" loading="lazy" width="150" height="150">
                    <div class="service__text">
                        <h4 class="service__title">FREE SHIPING</h4>
                        <p class="service__describe">All Lorem ipsum $150</p>
                    </div>
                </div>
                <div class="service__box">
                    <img src="img/pay2.webp" alt="pay2" loading="lazy" width="150" height="150">
                    <div class="service__text">
                        <h4 class="service__title">QUICK PAYMENT</h4>
                        <p class="service__describe">100% Lorem ipsum </p>
                    </div>
                </div>
                <div class="service__box">
                    <img src="img/pay1.webp" alt="pay3" loading="lazy" width="150" height="150">
                    <div class="service__text">
                        <h4 class="service__title">FREE RETURNS</h4>
                        <p class="service__describe">Lorem ipsum 30 days</p>
                    </div>
                </div>
            </div>
        </section>
        <div class="load-more-container">
            <a href="./gallery.html" class="load-more-btn">LOAD MORE PRODUCTS</a>
        </div>
        <div class="newsletter-signup-section">
            <div class="newsletter-signup-container">
                <div class="newsletter-content">
                    <h2 class="newsletter-title">SIGN UP FOR THE NEWSLETTER</h2>
                    <p class="newsletter-description">Subscribe for the latest stories and promotions</p>
                </div>
                <form class="newsletter-form">
                    <input type="email" class="newsletter-input" placeholder="Enter your email address" required>
                    <button type="submit" class="newsletter-submit-btn">
                        <img src="img/phone.svg" alt="Send" loading="lazy" width="30" height="30">
                    </button>
                </form>
            </div>
        </div>
    </main>

Source: styleIndex.css, line 241

1.1 #permalink HOME GALLERY - sekcja galerii

.section: Element o klasie "section" ma maksymalną szerokość 1200px, jest wyśrodkowany na stronie (margin: 0 auto).

.photoFirst img, .photoSecond img: Wszystkie obrazy w sekcjach "photoFirst" i "photoSecond" mają ustawione szerokości i wysokości na 300px.

label.button: Stylizuje etykiety typu button, nadaje im rozmiar czcionki, pogrubienie, podkreślenie, kolor i efekt przejścia po najechaniu kursorem.

label.button:hover, .promo-text a:hover: Definiuje styl etykiet typu button i linków, zmieniając kolor, rozmiar i kursor po najechaniu kursorem.

.photoFirst: Stylizuje sekcję "photoFirst", ustawiając marginesy, wykorzystując grid do rozmieszczenia elementów i zarządzania odstępami.

.buttonFoto: Stylizuje przycisk "LOAD MORE PHOTO", nadając mu kursor, tło, kolor tekstu, padding, marginesy, zaokrąglenie i efekt przejścia.

#toggleImages: Ukrywa elementy typu checkbox.

#toggleImages:checked ~ #showMoreButton: Po zaznaczeniu checkboxa ukrywa przycisk "LOAD MORE PHOTO".

#toggleImages:checked ~ #showLessButton: Po zaznaczeniu checkboxa wyświetla przycisk "LOAD LESS PHOTO".

#toggleImages:checked ~ .photoSecond: Po zaznaczeniu checkboxa wyświetla sekcję "photoSecond".

.photoSecond: Stylizuje sekcję "photoSecond", ustawiając marginesy, wykorzystując grid do rozmieszczenia elementów i zarządzania odstępami.

#showLessButton: Ukrywa przycisk "LOAD LESS PHOTO" na początku.

Animacje: Są definiowane animacje dla obrazów o id "photos1", "photos2", "photos3" oraz dla obrazków o klasie "photosX". Animacje te określają nazwę animacji, czas trwania, liczbę iteracji, funkcję czasu i tryb wypełnienia animacji.

.logoCat: Stylizuje obrazy o klasie "logoCat", nadając im szerokość, wysokość, pozycję i animację.

.animation: Stylizuje kontenery o klasie "animation", ustawiając pozycję, flexbox i zarządzanie odstępami.

.glasses: Stylizuje obrazy o klasie "glasses", określając pozycję, transformację i efekt przejścia po najechaniu kursorem.

Media queries: To reguły CSS dostosowujące stylizację dla różnych szerokości ekranu. Są zdefiniowane trzy punkty przerwania: dla ekranów o szerokości co najmniej 1000px, między 769px a 999px oraz poniżej 769px. W każdym z tych punktów przerwania dostosowywane są marginesy i układ elementów w sekcjach galerii w zależności od szerokości ekranu.

Example

LOAD MORE PHOTO

LOAD LESS PHOTO

Markup

      <section class="photoFirst">
            <h2 style="display:none;">.</h2>
            <img id="photos1" src="img/mainPage4.webp" alt="Lorem ipsum 1" loading="lazy" width="300" height="300">
            <img id="photos2" src="img/mainPage5.webp" alt="Lorem ipsum 2" loading="lazy" width="300" height="300">
            <img id="photos3" src="img/mainPage6.webp" alt="Lorem ipsum 3" loading="lazy" width="300" height="300">
        </section>
        <input type="checkbox" id="toggleImages">
        <label for="toggleImages" id="showMoreButton" class="buttonFoto">LOAD MORE PHOTO</label>
        <div class="photoSecond">
            <div class="animation">
                <img class="glasses" src="https://kibbles.klausapp.com/assets/img/loader/glasses-regular.svg" alt="oksy1" width="140" height="140">
                <img class="logoCat" src="https://kibbles.klausapp.com/assets/img/loader/main.svg" alt="cot1" width="140" height="140">
            </div>
            <div class="animation">
                <img class="glasses" src="https://kibbles.klausapp.com/assets/img/loader/glasses-deal-with-it.svg" alt="oksy2" width="140" height="140">
                <img class="logoCat" src="https://kibbles.klausapp.com/assets/img/loader/main.svg" alt="cot2" width="140" height="140">
            </div>
            <div class="animation">
                <img class="glasses" src="https://kibbles.klausapp.com/assets/img/loader/glasses-hearts.svg" alt="oksy3" width="140" height="140">
                <img class="logoCat" src="https://kibbles.klausapp.com/assets/img/loader/main.svg" alt="cot3" width="140" height="140">
            </div>
        </div>
        <section class="photoSecond">
            <h2 style="display:none;">.</h2>
            <img class="photosX" src="img/mainPage1.webp" alt="Lorem ipsum 4" loading="lazy" width="300" height="300">
            <img class="photosX" src="img/mainPage2.webp" alt="Lorem ipsum 5" loading="lazy" width="300" height="300">
            <img class="photosX" src="img/mainPage3.webp" alt="Lorem ipsum 6" loading="lazy" width="300" height="300">
        </section>
        <label for="toggleImages" id="showLessButton" class="buttonFoto">LOAD LESS PHOTO</label>

Source: styleIndex.css, line 1193

1.2 #permalink HOME DETAILS - sekcja detali

Media Query 1 (min-width: 769px) and (max-width: 999px):

.photoFirst i .photoSecond: Marginesy z lewej strony są usuwane (ustawione na 0 pikseli), a marginesy z prawej strony zwiększone o 60 pikseli. Siatka (grid-template-columns) jest ustawiana na dwie kolumny o szerokości 250 pikseli.
.product-grid1 i .product-grid2: Elementy te są ukrywane na ekranach o szerokości od 769px do 999px.
.product-grid, .product-grid1, .product-grid2: Elementy te są zmieniane na układ kolumnowy (flex-direction: column).
.product-item i .product-item1: Wysokość elementów produktu jest ustawiana na 50%, a margines z prawej strony jest ustawiany na 10 pikseli.
.product-item img: Obrazki produktów mają ustaloną szerokość i wysokość na 100 pikseli.
.details-button, .details-button2, .details-button1: Przyciski "Details" mają ustawioną szerokość na 150 pikseli i marginesy na 10 pikseli.

Media Query 2 (max-width: 768px):

.about-us__box: Elementy w sekcji "O nas" są wyświetlane w układzie flex, zawijane w przypadku braku miejsca, wyśrodkowane i mają margines na górze o wielkości 2rem.
.about-us__img: Obrazy w sekcji "O nas" mają szerokość obliczaną jako 50% szerokości minus 1rem.
.product-grid1 i .product-grid2: Elementy te są ukrywane na ekranach o szerokości do 768px.
.details-button, .details-button2, .details-button1: Przyciski "Details" mają szerokość na 150 pikseli i marginesy na 10 pikseli.
.price: Cena produktu ma ustawioną grubość czcionki na "bold" i rozmiar czcionki na 1.5em.
.price2: Cena produktu jest ukrywana (display: none).
.info-box p: Paragrafy w skrzynce z informacjami są ukrywane (display: none).
.info-box h2: Nagłówek w skrzynce z informacjami ma szerokość 165 pikseli i rozmiar czcionki "medium".
.info-box: Skrzynka z informacjami ma zmienione właściwości takie jak szerokość, wysokość i marginesy.

Media Query 3 (max-width: 650px):

.about-us__box: Elementy w sekcji "O nas" zmieniają układ na kolumnowy i są wyśrodkowane w pionie.
.about-us__img: Obrazy w sekcji "O nas" mają szerokość na 80% i margines na dole o wielkości 1rem.
.modal: Okno modalne jest ukrywane (display: none).
.modal-content: Zawartość okna modalnego ma zmienioną szerokość i marginesy.
.product-item img: Obrazki produktów mają zmienione właściwości takie jak marginesy i szerokość.

W kodzie HTML znajduje się kontener .product-grid zawierający elementy produktów, sekcja z nagłówkiem o klasie .section__heading, opisem i linkiem. Jest również zawarta sekcja z elementem .product-item4 i skrzynka z informacjami.

Example

LOREM IPSUM

VIEW DETAILS

LOREM IPSUM

VIEW DETAILS

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac felis mi. Nulla urna risus, malesuada nec blandit at, dictum a est. Integer pulvinar dui elit, vitae vehicula est tempor venenatis. Proin pulvinar pulvinar enim, et vestibulum leo. Vivamus placerat, magna non commodo suscipit, sapien lorem finibus dui, nec interdum lectus ante dictum mi.

Lorem ipsum!

Lorem Ipsum

$50.00 $200.00

Lorem ipsum dolor sit amet, consectetur adipiscing elit, et do eiusmod tempor incididunt ut labore et dolore magna aliqua.

VIEW DETAILS

Markup

<div class="product-grid">
            <div class="product-item" style="background-color: #eae9e7;">
                <div class="product-image">
                    <img src="img/gallery1.webp" alt="Gallery 1" loading="lazy" width="300" height="300">
                </div>
                <div class="product-content">
                    <h3>LOREM IPSUM</h3>
                    <a href="./gallery.html" class="details-button">VIEW DETAILS</a>
                </div>
            </div>
            <div id="drugie" class="product-item" style="background-color: #eae9e7">
                <div class="product-image">
                    <img src="img/gallery2.webp" alt="Gallery 2" loading="lazy" width="300" height="300">
                </div>
                <div class="product-content">
                    <h3>LOREM IPSUM</h3>
                    <a href="./gallery.html" class="details-button">VIEW DETAILS</a>
                </div>
            </div>
        </div>
        <section class="section">
            <h2 class="section__heading">Lorem ipsum</h2>
            <div class="about-us__textbox">
                <p class="about-us__text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
                    ac felis mi. Nulla urna risus, malesuada nec blandit at, dictum a
                    est. Integer pulvinar dui elit, vitae vehicula est tempor venenatis.
                    Proin pulvinar pulvinar enim, et vestibulum leo. Vivamus placerat,
                    magna non commodo suscipit, sapien lorem finibus dui, nec interdum
                    lectus ante dictum mi.
                </p>
                <label for="modalCheck" class="button">Lorem ipsum!</label>
                <input type="checkbox" id="modalCheck" style="display: none">
                <div class="modal">
                    <div class="modal-content">
                        <p>Tak dobrze trafiłeś! To lorem ipsum!</p>
                    </div>
                </div>
            </div>
            <div class="product-item4">
                <img src="img/item1.webp" alt="Item" loading="lazy" width="1200" height="700">
                <div class="info-box">
                    <h2>Lorem Ipsum</h2>
                    <p class="price2">$50.00 <span class="old-price">$200.00</span></p>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, et do
                        eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    </p>
                    <a href="./services.html" class="details-button2">VIEW DETAILS</a>
                </div>
</div>

Source: styleIndex.css, line 925

1.3 #permalink HOME SLIDER - sekcja slider

.slides img: Ta reguła ustawia szerokość i wysokość dla obrazków w sekcji o klasie "slides".
.slides img:hover: Dodaje animację "pulse" na najechanie kursorem na obrazki w sekcji "slides". Animacja trwa 2 sekundy i jest nieskończona (infinite).
.slides img:hover ~ .slide-description: Dodaje animację "pulse" na najechanie kursorem na obrazki w sekcji "slides", a także na odpowiadające im opisy (elementy o klasie "slide-description").
div.slider-controls: Ta reguła stylizuje kontener dla kontrolerów slidera, nadając mu wyśrodkowanie, marginesy, wysokość i odstęp na dole.
.slider-radio: Ukrywa elementy typu radio, które służą jako kontrolery slidera.
.slider-label: Stylizuje etykiety kontrolerów slidera, ustawiając kolor tekstu, efekt podkreślenia przy najechaniu kursorem i efekt przejścia.
.slider-label: Określa wygląd kontrolerów slidera (elementy typu label), nadając im szerokość, wysokość, zaokrąglenie, kursor i tło.
.slider-radio:checked + .slider-label: Zmienia tło kontrolera na czarne, gdy odpowiadające mu radio jest zaznaczone.
.slider-controls > a:hover, .slider-controls > a:focus, .slider-nav > div:target: Zmienia tło kontrolera na czarne przy najechaniu kursorem lub skoncentrowaniu na nim, a także przy wybraniu odpowiedniego celu (target) na stronie.
.slider: Stylizuje główny kontener slidera, ustawiając go jako kontener flex, ustawiając szerokość na 100% i ukrywając nadmiarowe elementy.
.slides: Stylizuje kontener dla slajdów, nadając mu ustawienia scroll-snap oraz ukrywając nadmiarowe elementy w poziomie i pionie.
.slide: Stylizuje pojedynczy slajd, nadając mu właściwości scroll-snap, szerokość, marginesy, tło i cień.
#tooltip .icon: Ta reguła stylizuje ikony tooltipów, ustawiając margines, kolor tła, kolor ikonki, zaokrąglenie i padding.
.icon:hover: Dodaje efekt powiększenia przy najechaniu kursorem na ikonkę.
.icon: Ustawia margines dla ikonek.
.product-grid1, .product-grid2: Stylizuje kontenery dla produktów, ustawiając kontener flex, odstępy i marginesy.
.product-item1: Stylizuje pojedynczy produkt, ustawiając border, padding, tekstowe centrowanie, szerokość, tło i pozycję.
.product-item1 img: Stylizuje obrazki produktów, ustawiając szerokość na 30px i zachowując proporcje.
span .price: Ustawia margines na prawo dla elementu span z klasą "price".
.price-rating: Stylizuje kontener dla cen i ocen produktów, ustawiając flexbox, odstępy i margines na górze.
.rating: Stylizuje kontener dla ocen produktów, ustawiając flexbox, odstępy i margines na prawo.
.details-button-x: Stylizuje przyciski "DETAILS", ustawiając margines, szerokość, tło, kolor tekstu, obramowanie i efekt przejścia.
.details-button-x:hover: Dodaje efekt podkreślenia i zmiany koloru tła po najechaniu kursorem na przycisk.
.h3: Stylizuje nagłówki h3, nadając im pogrubienie.
.price: Stylizuje ceny produktów, nadając im pogrubienie.
.product-item1 img: Stylizuje obrazki produktów, dostosowując szerokość do 100% i zachowując proporcje.
.overlay: Stylizuje overlay na slajdach, nadając mu pozycję absolutną, kolor tła, kolor tekstu, padding oraz centrowanie treści.
.slide-description: Stylizuje opisy slajdów, ustawiając pozycję absolutną, tło, kolor tekstu, padding, flexbox i inne właściwości.
.product-name, .price: Zmniejsza marginesy dla elementów o klasach "product-name" i "price".
.price: Nadaje pogrubienie cenom produktów.

Ten kod definiuje stylizację slidera obrazków na stronie internetowej, obejmując różne elementy i efekty, takie jak animacje, przyciski, kontrolery i wiele innych, aby stworzyć atrakcyjny i interaktywny slider.

Example

Lorem Ipsum

10$

Lorem Ipsum

10$

Lorem Ipsum

10$

Lorem Ipsum

10$

Lorem Ipsum

10$

Lorem Ipsum

10$

Lorem Ipsum

10$

Lorem Ipsum

10$

Lorem Ipsum

10$

Markup

  <div class="slider">
                <div class="slides">
                    <div id="slide-1" class="slide">
                        <img src="img/mainPage1.webp" alt="Lorem ipsum 1v2" loading="lazy" width="260" height="400">
                        <div class="slide-description">
                            <p class="product-name">Lorem Ipsum</p>
                            <p class="price">10$</p>
                        </div>
                    </div>
                    <div id="slide-2" class="slide">
                        <img src="img/mainPage2.webp" alt="Lorem ipsum 2v2" loading="lazy" width="260" height="400">
                        <div class="slide-description">
                            <p class="product-name">Lorem Ipsum</p>
                            <p class="price">10$</p>
                        </div>
                    </div>
                    <div id="slide-3" class="slide">
                        <img src="img/mainPage10.webp" alt="Lorem ipsum 3v2" loading="lazy" width="260" height="400">
                        <div class="slide-description">
                            <p class="product-name">Lorem Ipsum</p>
                            <p class="price">10$</p>
                        </div>
                    </div>
                    <div id="slide-4" class="slide">
                        <img src="img/mainPage11.webp" alt="Lorem ipsum 4v2" loading="lazy" width="260" height="400">
                        <div class="slide-description">
                            <p class="product-name">Lorem Ipsum</p>
                            <p class="price">10$</p>
                        </div>
                    </div>
                    <div id="slide-5" class="slide">
                        <img src="img/mainPage14.webp" alt="Lorem ipsum 5v2" loading="lazy" width="260" height="400">
                        <div class="slide-description">
                            <p class="product-name">Lorem Ipsum</p>
                            <p class="price">10$</p>
                        </div>
                    </div>
                    <div id="slide-6" class="slide">
                        <img src="img/mainPage13.webp" alt="Lorem ipsum 6v2" loading="lazy" width="260" height="400">
                        <div class="slide-description">
                            <p class="product-name">Lorem Ipsum</p>
                            <p class="price">10$</p>
                        </div>
                    </div>
                    <div id="slide-7" class="slide">
                        <img src="img/mainPage12.webp" alt="Lorem ipsum 7v2" loading="lazy" width="260" height="400">
                        <div class="slide-description">
                            <p class="product-name">Lorem Ipsum</p>
                            <p class="price">10$</p>
                        </div>
                    </div>
                    <div id="slide-8" class="slide">
                        <img src="img/mainPage8.webp" alt="Lorem ipsum 8v2" loading="lazy" width="260" height="400">
                        <div class="slide-description">
                            <p class="product-name">Lorem Ipsum</p>
                            <p class="price">10$</p>
                        </div>
                    </div>
                    <div id="slide-9" class="slide">
                        <img src="img/mainPage9.webp" alt="Lorem ipsum 9v2" loading="lazy" width="260" height="400">
                        <div class="slide-description">
                            <p class="product-name">Lorem Ipsum</p>
                            <p class="price">10$</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="slider-controls">
                <input type="radio" id="slide-radio-1v2" name="slide" class="slider-radio">
                <label for="slide-radio-1v2" class="slider-label" onclick="window.location.href='#slide-1';"></label>
                <input type="radio" id="slide-radio-2v2" name="slide" class="slider-radio">
                <label for="slide-radio-2v2" class="slider-label" onclick="window.location.href='#slide-2';"></label>
                <input type="radio" id="slide-radio-3v2" name="slide" class="slider-radio">
                <label for="slide-radio-3v2" class="slider-label" onclick="window.location.href='#slide-3';"></label>
                <input type="radio" id="slide-radio-4v2" name="slide" class="slider-radio">
                <label for="slide-radio-4v2" class="slider-label" onclick="window.location.href='#slide-4';"></label>
                <input type="radio" id="slide-radio-5v2" name="slide" class="slider-radio" checked>
                <label for="slide-radio-5v2" class="slider-label" onclick="window.location.href='#slide-5';"></label>
                <input type="radio" id="slide-radio-6v2" name="slide" class="slider-radio">
                <label for="slide-radio-6v2" class="slider-label" onclick="window.location.href='#slide-6';"></label>
                <input type="radio" id="slide-radio-7v2" name="slide" class="slider-radio">
                <label for="slide-radio-7v2" class="slider-label" onclick="window.location.href='#slide-7';"></label>
                <input type="radio" id="slide-radio-8v2" name="slide" class="slider-radio">
                <label for="slide-radio-8v2" class="slider-label" onclick="window.location.href='#slide-8';"></label>
                <input type="radio" id="slide-radio-9v2" name="slide" class="slider-radio">
                <label for="slide-radio-9v2" class="slider-label" onclick="window.location.href='#slide-9';"></label>
            </div>

Source: styleIndex.css, line 1998

1.4 #permalink HOME PRODUCTS - sekcja produktów

Styl ogólny: Oczywiście, oto opis z pogrubionymi nazwami klas i id:

.product-grid: Jest to kontener produktów. Ma ustawione odstępy od lewej strony o szerokości 15 pikseli. Elementy w tym kontenerze są wyświetlane w układzie flex, owijane w przypadku braku miejsca i oddzielane odstępem o szerokości 20 pikseli.
.product-image img: Ustala szerokość obrazków produktów na 300 pikseli.
.product-item: Każdy element produktu ma elastyczny rozmiar (flex-basis), obliczany na podstawie 50% szerokości, z odstępem od prawej strony o szerokości 20 pikseli. Elementy te są wyświetlane w układzie flex, wyrównane w pionie, z tłem o kolorze var(--white-color), wyrównane do lewej i prawej strony o marginesie 10 pikseli, z cieniem i obramowaniem.
.product-item img: Obrazki wewnątrz elementów produktów mają margines 10 pikseli, szerokość maksymalną 100% i wysokość 300 pikseli.
.product-description: Treść opisu produktu ma wewnętrzny margines o wysokości 10 pikseli.
.product-content: Zawartość produktu zajmuje elastyczne 50% szerokości, ma lewy wewnętrzny margines o szerokości 20 pikseli i jest wyrównana do lewej strony.
.product-content h3: Nagłówek elementu produktu ma margines prawej strony o szerokości 5 pikseli.
.details-button: Przycisk "Details" jest stylizowany z marginesem na prawo o szerokości 5 pikseli, szerokością 200 pikseli, wyśrodkowany i ma różne style, takie jak obramowanie, tło i kolor tekstu. Po najechaniu kursorem na przycisk zmienia się tło, kolor tekstu i tekst jest podkreślany.
.section__heading, .about-us__text, .about-us__img: Elementy te mają animację transformacji (skalowania) przy najechaniu kursorem.
.section__heading: Nagłówek sekcji ma określony rozmiar czcionki, kolor, marginesy i animację transformacji.
.about-us__textbox: Kontener dla tekstu ma maksymalną szerokość 80vw i marginesy po lewej i prawej stronie.
.about-us__text: Tekst ma właściwości takie jak justyfikacja, waga czcionki, rozmiar, linia, kolor i animację transformacji.
.about-us__link: Linki w tekście są stylizowane z kolorem i animacją transformacji.
.about-us__box: Kontener dla sekcji "O nas" ma różne style i animację transformacji.
.about-us__img: Obrazki w sekcji "O nas" mają określone właściwości, takie jak szerokość, maksymalna szerokość, elastyczność i zaokrąglenie rogów.
.modal: Okno modalne jest ukrywane domyślnie, ustawiane jako pozycja stała, z indeksem z przodu i tłem o kolorze rgba.
.modal-content: Zawartość okna modalnego ma określony kolor tła, marginesy, obramowanie i szerokość.
.close: Przycisk zamykania okna modalnego ma ustawiony kolor, wielkość i grubość czcionki.
#modalCheck:checked ~ .modal: Wyświetla okno modalne i stosuje animację po zaznaczeniu odpowiedniego elementu formularza.
.product-item4: Elementy produktów o klasie "product-item4" mają różne właściwości, takie jak pozycja, szerokość, wysokość i marginesy.
.product-item4 img: Obrazki wewnątrz elementów produktów o klasie "product-item4" mają określone właściwości.
.info-box: Skrzynka z informacjami o produkcie ma różne właściwości, takie jak pozycja, szerokość, tło i cień.
.info-box h2: Nagłówek skrzynki z informacjami ma margines dolny.
.price2, .old-price: Ceny produktów mają określone style, takie jak grubość czcionki i dekoracje tekstowe.
.details-button2: Przyciski "Details" w innej sekcji mają różne style, takie jak tło i kolor tekstu.

Media Queries:

Kod zawiera także media queries, które dostosowują układ strony dla ekranów o szerokości poniżej 768px i 650px. Dla mniejszych ekranów, elementy są dostosowywane, marginesy, szerokości i inne właściwości są modyfikowane, aby strona była responsywna.

Struktura HTML:

Kod HTML zawiera sekcje z elementami o klasach "product-grid1" i "product-grid2", które reprezentują różne produkty z obrazkami, nagłówkami i cenami.

Ogólnie rzecz biorąc, ten kod HTML i CSS jest używany do wyświetlania produktów na stronie internetowej w formie siatki, z odpowiednimi stylami i animacjami. Jest również odpowiednio dostosowany do różnych rozmiarów ekranów dzięki media queries.

Example

Lorem

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

VIEW ALL

Lorem

30$

Lorem

30$

Lorem

30$

Lorem

30$

Lorem

30$

Lorem

30$

Lorem

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

VIEW ALL

Markup

            <div class="product-grid1">
                <div class="product-item1">
                    <img src="img/gallery9.webp" alt="LoremIpsum" loading="lazy" width="200" height="200">
                    <div class="overlay">
                        <div class="text">
                            <h3>Lorem</h3>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit...
                            </p>
                            <a href="./ourProducts.html" class="details-button-x">VIEW ALL</a>
                        </div>
                    </div>
                </div>
                <div class="product-item1">
                    <img src="img/gallery12.webp" alt="Loremer" loading="lazy" width="200" height="200">
                    <h3>Lorem</h3>
                    <div class="price-rating">
                        <span class="price">30$</span>
                        <span class="rating"><img src="img/gwiazda_zolta.svg" alt="Promocja1" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja2" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja3" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja4" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_szara.svg" alt="Promocja5" loading="lazy" width="30" height="30">
                        </span>
                    </div>
                </div>
                <div class="product-item1">
                    <img src="img/gallery11.webp" alt="Loremer2" loading="lazy" width="200" height="200">
                    <h3>Lorem</h3>
                    <div class="price-rating">
                        <span class="price">30$</span>
                        <span class="rating"><img src="img/gwiazda_zolta.svg" alt="Promocja6" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja7" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja8" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja9" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_szara.svg" alt="Promocja10" loading="lazy" width="30" height="30">
                        </span>
                    </div>
                </div>
                <div class="product-item1">
                    <img src="img/gallery10.webp" alt="Loremer3" loading="lazy" width="200" height="200">
                    <h3>Lorem</h3>
                    <div class="price-rating">
                        <span class="price">30$</span>
                        <span class="rating"><img src="img/gwiazda_zolta.svg" alt="Promocja11" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja12" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja13" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja14" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_szara.svg" alt="Promocja15" loading="lazy" width="30" height="30">
                        </span>
                    </div>
                </div>
            </div>
            <div class="product-grid2">
                <div class="product-item1">
                    <img src="img/abootUs4.webp" alt="Loremer4" loading="lazy" width="200" height="200">
                    <h3>Lorem</h3>
                    <div class="price-rating">
                        <span class="price">30$</span>
                        <span class="rating"><img src="img/gwiazda_zolta.svg" alt="Promocja16" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja17" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja18" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja19" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_szara.svg" alt="Promocja20" loading="lazy" width="30" height="30">
                        </span>
                    </div>
                </div>
                <div class="product-item1">
                    <img src="img/abootUs3.webp" alt="Loremer5" loading="lazy" width="200" height="200">
                    <h3>Lorem</h3>
                    <div class="price-rating">
                        <span class="price">30$</span>
                        <span class="rating"><img src="img/gwiazda_zolta.svg" alt="Promocja21" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja22" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja23" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja24" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_szara.svg" alt="Promocja25" loading="lazy" width="30" height="30">
                        </span>
                    </div>
                </div>
                <div class="product-item1">
                    <img src="img/abootUs2.webp" alt="Loremer6" loading="lazy" width="200" height="200">
                    <h3>Lorem</h3>
                    <div class="price-rating">
                        <span class="price">30$</span>
                        <span class="rating"><img src="img/gwiazda_zolta.svg" alt="Promocja26" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja27" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja28" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja29" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_szara.svg" alt="Promocja30" loading="lazy" width="30" height="30">
                        </span>
                    </div>
                </div>
                <div class="product-item1">
                    <img src="img/abootUs1.webp" alt="Loremer7" loading="lazy" width="200" height="200">
                    <div class="overlay">
                        <div class="text">
                            <h3>Lorem</h3>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit...
                            </p>
                            <a href="./ourProducts.html" class="details-button-x">VIEW ALL</a>
                        </div>
                    </div>
                </div>
            </div>

Source: styleIndex.css, line 1508

1.5 #permalink HOME OFERTA/SERWIS - sekcja ofert

Główna sekcja stopki:

.collection: Pełna szerokość, tło koloru var(--fifth-color), biały kolor tekstu, wyśrodkowany tekst poziomo, odstęp na górze 1 rem.
.collection__men, .collection__women, .collection__kids: Trzy różne podsekcje reprezentujące kolekcje produktów.
.collection__heading: Stylizacja nagłówka sekcji kolekcji.
.collection__shadow: Dodanie cienia do obrazka.
.collection__img: Dostosowanie wyglądu obrazka produktu.
.collection__btn: Stylizacja przycisku "explore more".

Sekcja oferty:

.offer: Stylizacja sekcji oferty.
.offer__img: Dostosowanie wyglądu logo oferty specjalnej.
.offer__content.container: Kontener zawierający treść oferty specjalnej.
.offer__heading: Stylizacja nagłówka oferty specjalnej.
.offer__title: Stylizacja tytułu oferty specjalnej.
.offer__text: Stylizacja tekstu opisującego ofertę specjalną.
.details-button: Stylizacja przycisku "VIEW ALL".

Sekcja serwisu:

.service: Stylizacja sekcji serwisu.
.service__content.container: Kontener zawierający treść sekcji serwisu.
.service__box: Pojedyncza usługa w sekcji.
.service__img: Dostosowanie wyglądu obrazka reprezentującego usługę.
.service__text: Stylizacja tekstu opisującego usługę.
.service__title: Stylizacja nagłówka usługi.
.service__describe: Stylizacja opisu usługi.

Przycisk "Load More Products":

.load-more-container: Kontener zawierający przycisk.
.load-more-btn: Stylizacja przycisku "LOAD MORE PRODUCTS".

Sekcja z formularzem subskrypcji newslettera:

.newsletter-signup-section: Stylizacja sekcji z formularzem subskrypcji newslettera.
.newsletter-signup-container: Kontener zawierający treść sekcji subskrypcji newslettera.
.newsletter-content: Stylizacja treści sekcji subskrypcji newslettera.
.newsletter-title: Stylizacja nagłówka sekcji subskrypcji newslettera.
.newsletter-description: Stylizacja opisu sekcji subskrypcji newslettera.
.newsletter-form: Stylizacja formularza subskrypcji newslettera.
.newsletter-input: Stylizacja pola do wprowadzenia adresu e-mail.
.newsletter-submit-btn: Stylizacja przycisku do wysyłania formularza.
.newsletter-submit-btn img: Dostosowanie wyglądu ikony na przycisku.

Ten opis przedstawia działanie stylów CSS dla różnych elementów na stronie internetowej, korzystając z nazw klas i id.

Example

Product 1 Collection

explore more

Product 2 Collection

explore more

Product 3 Collection

explore more

SPECIAL OFFER

UPTO 70% OFF

Upgrade your footwear collection with our 70% off special deal! LOREM IPSUM!

VIEW ALL

FREE SHIPING

All Lorem ipsum $150

QUICK PAYMENT

100% Lorem ipsum

FREE RETURNS

Lorem ipsum 30 days

LOAD MORE PRODUCTS

Markup

  <section class="collection">
            <div class="collection__men">
                <h3 class="collection__heading">Product 1 Collection</h3>
                <div class="collection__shadow">
                    <img src="img/product1.webp" alt="product 1" class="collection__img" loading="lazy" width="150" height="150">
                </div>
                <a class="collection__btn" href="./ourProducts.html">explore more</a>
            </div>
            <div class="collection__women">
                <h3 class="collection__heading">Product 2 Collection</h3>
                <div class="collection__shadow">
                    <img src="img/product7.webp" alt="product 2" class="collection__img" loading="lazy" width="150" height="150">
                </div>
                <a class="collection__btn" href="./ourProducts.html">explore more</a>
            </div>
            <div class="collection__kids">
                <h3 class="collection__heading">Product 3 Collection</h3>
                <div class="collection__shadow">
                    <img src="img/product3.webp" alt="product 3" class="collection__img" loading="lazy" width="150" height="150">
                </div>
                <a class="collection__btn" href="./ourProducts.html">explore more</a>
            </div>
        </section>
        <section class="offer">
            <h2 style="display:none;">.</h2>
            <div class="offer__body">
                <img src="img/logo1transparent.webp" alt="LOGOv2" class="offer__img" loading="lazy" width="300" height="300">
                <div class="offer__content container">
                    <p class="offer__heading">SPECIAL OFFER</p>
                    <p class="offer__title">UPTO 70% OFF</p>
                    <p class="offer__text">
                        Upgrade your footwear collection with our 70% off special deal!
                        LOREM IPSUM!
                    </p>
                    <a href="./ourProducts.html" class="details-button">VIEW ALL</a>
                </div>
            </div>
        </section>
        <section class="service">
            <div class="service__content container">
                <div class="service__box">
                    <img src="img/pay1.webp" alt="pay1" loading="lazy" width="150" height="150">
                    <div class="service__text">
                        <h4 class="service__title">FREE SHIPING</h4>
                        <p class="service__describe">All Lorem ipsum $150</p>
                    </div>
                </div>
                <div class="service__box">
                    <img src="img/pay2.webp" alt="pay2" loading="lazy" width="150" height="150">
                    <div class="service__text">
                        <h4 class="service__title">QUICK PAYMENT</h4>
                        <p class="service__describe">100% Lorem ipsum </p>
                    </div>
                </div>
                <div class="service__box">
                    <img src="img/pay1.webp" alt="pay3" loading="lazy" width="150" height="150">
                    <div class="service__text">
                        <h4 class="service__title">FREE RETURNS</h4>
                        <p class="service__describe">Lorem ipsum 30 days</p>
                    </div>
                </div>
            </div>
        </section>
        <div class="load-more-container">
            <a href="./gallery.html" class="load-more-btn">LOAD MORE PRODUCTS</a>
        </div>
        <div class="newsletter-signup-section">
            <div class="newsletter-signup-container">
                <div class="newsletter-content">
                    <h2 class="newsletter-title">SIGN UP FOR THE NEWSLETTER</h2>
                    <p class="newsletter-description">Subscribe for the latest stories and promotions</p>
                </div>
                <form class="newsletter-form">
                    <input type="email" class="newsletter-input" placeholder="Enter your email address" required>
                    <button type="submit" class="newsletter-submit-btn">
                        <img src="img/phone.svg" alt="Send" loading="lazy" width="30" height="30">
                    </button>
                </form>
            </div>
        </div>

Source: styleIndex.css, line 2337