3 #permalink SERVICES - sekcja z usługami

main: Ten sekcja definiuje właściwości stylów dla elementu <main>. Ustawia elastyczny flex na 1, co oznacza, że <main> będzie rozciągał się, aby wypełnić dostępną przestrzeń, przy czym ma margines na górze wynoszący 160px i margines na dole wynoszący 100px.
.buttoner: Klasa ta jest używana do stylizacji przycisków. Przycisk jest wyśrodkowany zarówno w poziomie, jak i pionie za pomocą display: flex, justify-content: center i align-items: center. Ma margines na górze wynoszący 2rem, biały tekst na tle szarości (color: var(--white-color)), tło w kolorze szarości (background-color: gray), padding 10px na górze i dole oraz 10px po bokach, oraz zaokrąglone rogi (border-radius: 5px).
a: Ten styl dotyczy wszystkich linków na stronie. Usuwa domyślne podkreślenie (text-decoration: none), ustawia biały kolor tekstu oraz zaokrąglone rogi (border-radius: 5px). Dodaje płynne przejścia (transition: transform 0.2s), które powodują skalowanie przy najechaniu kursorem.
a:hover: Styl dla linków, gdy są najechane kursorem. Przyjmuje efekt skalowania (transform: scale(1.02);), co powoduje nieznaczne powiększenie linku, oraz zmienia kolor tekstu na var(--black-color), zapewniając subtelny efekt interakcji z użytkownikiem.
.offer__container: Klasa ta definiuje stylizację kontenera oferty. Ustala maksymalną szerokość na 1200px, wyśrodkowuje go na stronie za pomocą margin: 0 auto i dodaje wewnętrzny padding 2rem.
.offer__text: Stylizacja tekstu w sekcji oferty. Ustala rozmiar czcionki na 2rem, dodaje margines na dole wynoszący 2rem i efekt transformacji przy najechaniu kursorem (transform: scale(1.2)).
.offer__box: Klasa odpowiedzialna za stylizację kontenera zawierającego elementy oferty. Elementy te są ustawione w układzie flexbox z wyłączoną owijaniem (flex-wrap: wrap) oraz równym rozłożeniem (justify-content: space-between). Istnieje także margines na górze wynoszący 2rem.
.offer__item: Ta klasa stylizuje pojedynczy element oferty. Ma elastyczną szerokość, która dostosowuje się do dostępnej przestrzeni, jednocześnie zachowując marginesy i zaokrąglone rogi. Dodaje także subtelny efekt cienia za pomocą box-shadow, a przy najechaniu kursorem jest przesuwany w górę za pomocą transform: translateY(-5px).
.offer__icon: Klasa stylizująca ikony w sekcji oferty. Ustala rozmiar czcionki na 3rem, nadaje kolor var(--red-color) i dodaje margines na dole wynoszący 1rem.
.offer__title: Ta klasa stylizuje tytuł oferty. Ustala rozmiar czcionki na 1.5rem, nadaje pogrubienie (font-weight: bold), kolor var(--gray-color) oraz margines na dole wynoszący 1rem.
.offer__description: Klasa odpowiedzialna za stylizację opisu oferty. Ustala rozmiar czcionki na 1.1rem, nadaje kolor var(--gray-color) oraz margines na dole wynoszący 1rem.
.about-us__box: Klasa stylizująca kontener sekcji "O nas". Elementy wewnątrz tego kontenera są rozłożone równomiernie w układzie flexbox za pomocą justify-content: space-around i mają margines na górze wynoszący 2rem.
.about-us__img: Klasa stylizująca obrazy w sekcji "O nas". Ustala szerokość obrazu na 50% lub 85% w zależności od rozmiaru ekranu (dzięki zastosowanym regułom media queries), ogranicza maksymalną szerokość do 380px, dodaje marginesy oraz efekt transformacji przy najechaniu kursorem (transform: scale(0.8)).

To są główne elementy i reguły stylizacji w Twoim kodzie CSS. Ten kod pozwala na odpowiednie wyświetlanie i interakcję z elementami na stronie w zależności od rozmiaru ekranu i zachowuje spójny wygląd i efekty wizualne.

Example

Oferta

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.

VIEV MORE

Lorem ipsum

VIEV MORE

Lorem ipsum

VIEV MORE

Lorem ipsum

VIEV MORE

Lorem ipsum

VIEV MORE

Lorem ipsum

VIEV MORE

Markup

    <main>
        <div id="container" class="container">
            <button style="display: none;" id="button" class="button">Potwierdź godzinę !</button>
        </div>
        <section class="section offer" id="services">
            <h1 style="display:none;">.</h1>
            <div class="offer__container">
                <h2 class="section__heading offer__text">Oferta</h2>
                <div class="offer__box">
                    <div class="offer__item">
                        <i class="offer__icon fas fa-dumbbell"></i>
                        <h3 class="offer__title">Lorem ipsum</h3>
                        <p class="offer__description">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.</p>
                        <a class="buttoner" href="./product.html#kid">VIEV MORE</a>
                    </div>
                    <div class="offer__item">
                        <i class="offer__icon fas fa-running"></i>
                        <h3 class="offer__title">Lorem ipsum</h3>
                        <p class="offer__description">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.</p>
                        <a class="buttoner" href="./product.html#kid">VIEV MORE</a>
                    </div>
                </div>
                <div class="about-us__box">
                    <img src="img/product20.webp" alt="Lorem ipsum" class="about-us__img about-us__img--desktop"  width="200" height="200">
                    <img src="img/product11.webp" alt="Lorem ipsum" class="about-us__img"  width="200" height="200">
                    <img src="img/product12.webp" alt="Lorem ipsum" class="about-us__img"  width="200" height="200">
                </div>
                <div class="offer__box">
                    <div class="offer__item">
                        <i class="offer__icon fas fa-drumstick-bite"></i>
                        <h3 class="offer__title">Lorem ipsum</h3>
                        <p class="offer__description">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.</p>
                       <a class="buttoner" href="./product.html#men">VIEV MORE</a>
                    </div>
                    <div class="offer__item">
                        <i class="offer__icon fas fa-medkit"></i>
                        <h3 class="offer__title">Lorem ipsum</h3>
                        <p class="offer__description">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.</p>
                        <a class="buttoner" href="./product.html#men">VIEV MORE</a>
                    </div>
                </div>
                <div class="about-us__box">
                    <img src="img/product4.webp" alt="Lorem ipsum" class="about-us__img about-us__img--desktop"  width="200" height="200">
                    <img src="img/product14.webp" alt="Lorem ipsum" class="about-us__img"  width="200" height="200">
                    <img src="img/product16.webp" alt="Lorem ipsum" class="about-us__img"  width="200" height="200">
                </div>
                <div class="offer__box">
                    <div class="offer__item">
                        <i class="offer__icon fas fa-swimmer"></i>
                        <h3 class="offer__title">Lorem ipsum</h3>
                        <p class="offer__description">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.</p>
                        <a class="buttoner" href="./product.html#women">VIEV MORE</a>
                    </div>
                    <div class="offer__item">
                        <i class="offer__icon fas fa-child"></i>
                        <h3 class="offer__title">Lorem ipsum</h3>
                        <p class="offer__description">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.</p>
                        <a class="buttoner" href="./product.html#women">VIEV MORE</a>
                    </div>
                </div>
                <div class="about-us__box">
                    <img src="img/product1.webp" alt="Lorem ipsum" class="about-us__img about-us__img--desktop"  width="200" height="200">
                    <img src="img/product6.webp" alt="Lorem ipsum" class="about-us__img"  width="200" height="200">
                    <img src="img/mainPage9.webp" alt="Lorem ipsum" class="about-us__img" width="200" height="200">
                </div>
            </div>
        </section>
    </main>

Source: styleServices.css, line 565