KSS Style Guide

1.4 #permalink HOME DETAILS - sekcja detali

Toggle example guides Toggle HTML markup

  1. product-grid: Styl dla kontenera zawierającego produkty. Ustawia margines po lewej stronie, ustawia go jako flex container z możliwością zawijania elementów i określa odstęp między nimi.

  2. product-image img: Styl dla obrazów produktów, ogranicza ich szerokość na 300 pikseli.

  3. product-item: Styl dla pojedynczego elementu produktu. Ustawia jego szerokość na podstawie obliczeń, wyśrodkowuje elementy, określa tło, marginesy i obramowanie.

  4. product-item img: Styl dla obrazów wewnątrz elementu produktu. Określa marginesy, maksymalną szerokość na 100% i wysokość na 300 pikseli.

  5. product-description: Styl dla opisu produktu, określa wewnętrzny padding.

  6. product-content: Styl dla zawartości produktu. Ustawia jego szerokość na podstawie obliczeń, lewy padding i wyrównuje tekst do lewej.

  7. product-content h3: Styl dla nagłówka h3 wewnątrz zawartości produktu, określa margines po prawej stronie.

  8. details-button: Styl dla przycisków "Details". Określa margines po prawej stronie, szerokość, wyśrodkowanie, kolor i inne właściwości. Podczas najechania myszką zmienia kolor tła, tekst i podkreślenie oraz kształt kursora na wskaźnik.

  9. section__heading, about-us__text, about-us__img: Stylizacja nagłówka sekcji, tekstu i obrazków w różnych sekcjach. Włącza animację "transform: scale(1.1)" podczas najechania myszką.

  10. section__heading: Dodatkowe style dla nagłówka sekcji, takie jak rozmiar czcionki, kolor i marginesy. Podczas najechania myszką zmienia rozmiar przy pomocy animacji.

  11. about-us__textbox: Style dla kontenera tekstu w sekcji "About Us". Określa szerokość i marginesy.

  12. about-us__text: Styl dla tekstu w sekcji "About Us" i animacja "transform: scale(1.2)" podczas najechania myszką.

  13. about-us__link: Styl dla odnośników w sekcji "About Us". Określa kolor i animację "transform: scale(1.2)" podczas najechania myszką.

  14. about-us__box: Styl dla kontenera zawierającego elementy sekcji "About Us". Określa wygląd i marginesy oraz animację "transform: scale(0.8)" podczas najechania myszką.

  15. about-us__img: Styl dla obrazków w sekcji "About Us". Określa szerokość, maksymalną szerokość, elastyczność, zaokrąglenie narożników i marginesy.

  16. modal: Stylizacja modala (okna modalnego) do wyświetlania treści na stronie. Określa jego wygląd, pozycję i tło.

  17. modal-content: Styl dla zawartości modala. Określa tło, marginesy i obramowanie.

  18. close: Styl dla przycisku zamykania modala. Określa kolor, rozmiar czcionki i wygląd podczas najechania myszką.

  19. #modalCheck:checked ~ .modal: Stylizacja modala w zależności od zaznaczenia checkboxa o id "modalCheck". Wyświetla modal i ustawia animację "fadeOut" na 3 sekundy.

  20. product-item4 img: Stylizacja obrazków w określonym elemencie o klasie "product-item4". Dodaje margines od góry.

  21. product-item4: Stylizacja konkretnego elementu o klasie "product-item4". Ustawia pozycję jako relatywną, szerokość i wysokość jako automatyczne oraz wyśrodkowuje go na stronie.

  22. info-box: Stylizacja okna informacyjnego (info-box) z danymi. Określa pozycję, tło, padding i cień.

  23. info-box h2: Stylizacja nagłówka w oknie informacyjnym. Określa margines na dole.

  24. price2: Stylizacja ceny w oknie informacyjnym. Określa wagę tekstu i margines na dole.

  25. old-price: Stylizacja przekreślonej starej ceny w oknie informacyjnym. Określa dekorację tekstu, wagę i margines po lewej stronie.

Example
26. **details-button2**: Stylizacja przycisku "Details" w oknie informacyjnym. Określa kolor tekstu, obramowanie, padding i margines na górze. Podczas najechania myszką zmienia kolor tła i kolor tekstu.
Gallery 1

LOREM IPSUM

VIEW DETAILS
Gallery 2

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.

Tak dobrze trafiłeś! To lorem ipsum!

Item

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 
26. **details-button2**: Stylizacja przycisku "Details" w oknie informacyjnym. Określa kolor tekstu, obramowanie, padding i margines na górze. Podczas najechania myszką zmienia kolor tła i kolor tekstu.
   <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 2242