3 #permalink SERVICES - sekcja z usługami

Sekcja "Stylizacja sekcji z ofertami usług"

main: Element <main> posiada właściwość flex: 1, co sugeruje, że dostosowuje się do dostępnej przestrzeni flexbox na stronie. Marginesy na górze i na dole są ustawione.
.buttoner: Klasa "buttoner" jest używana do stylizowania przycisków w sekcji. Przyciski są wyśrodkowane zarówno w poziomie, jak i w pionie (display: flex; justify-content: center; align-items: center;). Mają białą czcionkę na szarym tle, padding (odstęp) oraz zaokrąglone rogi. Przy najechaniu kursorem przyciski stają się nieco większe i zmieniają kolor na czarny.
a: Ogólna reguła stylizacji dla linków, usuwa podkreślenie i nadaje im kolor biały oraz zaokrąglone rogi.
a:hover: Przy hoverze nad linkami, są one nieco powiększane i zmieniają kolor na czarny.
.offer__container: Element zawierający treść sekcji "Oferta". Ma ograniczenie szerokości (max-width), odstęp wewnątrz i jest wyśrodkowany na stronie.
.offer__text: Tytuł sekcji "Oferta" ma dużą czcionkę o kolorze określonym zmienną var(--first-color). Przy hoverze tekst jest nieco powiększany.
.offer__box: Kontener dla poszczególnych ofert, elementy są wyśrodkowane i rozmieszczone równomiernie wzdłuż poziomej osi.
.offer__item: Każdy element oferty ma określone proporcje flexbox, tło w kolorze białym, zaokrąglone rogi, cień i efekt transformacji przy hoverze.
.offer__icon: Ikony ofert mają rozmiar 3 rem i kolor określony zmienną var(--red-color).
.offer__title: Tytuły ofert mają większą czcionkę, są pogrubione i mają kolor określony zmienną var(--gray-color).
.offer__description: Opisy ofert mają mniejszą czcionkę i kolor określony zmienną var(--gray-color).
.about-us__box: Kontener dla sekcji z obrazkami. Elementy są rozmieszczone równomiernie wzdłuż poziomej osi, a obrazki zmniejszają się i wyglądają inaczej przy hoverze.
W kodzie CSS znajdują się również media queries, które dostosowują stylizację dla różnych szerokości ekranu, co sprawia, że strona jest responsywna.

Ogólnie rzecz biorąc, ten kod definiuje stylizację sekcji z ofertami usług na stronie internetowej, uwzględniając różne elementy, takie jak przyciski, obrazki, ikony i tekst. Stylizacja jest zgodna ze style guide o nazwie "5.0".

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>
        <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="./ourProducts.html">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="./ourProducts.html">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="./ourProducts.html">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="./ourProducts.html">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="./ourProducts.html">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="./ourProducts.html">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 378