KSS Style Guide

1.2 #permalink HOME DETAILS - sekcja detali

Toggle example guides Toggle HTML markup

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
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 
<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