2 #permalink ABOUT US - sekcja podstrony o nas

CSS (Stylizacja)

main: Definiuje stylizację dla elementu <main>. Ustala minimalną wysokość na 100% widoku przeglądarki (min-height: 100%), ustawia pozycję jako względną (position: relative;), co może być przydatne w kontekście pozycjonowania innych elementów. Wykorzystuje elastyczne układanie (flex: 1) i ustawia szerokość na 100%.
#hamburger: Ten selektor dotyczy elementu o id "hamburger" i ustawia go na niewidoczny (display: none;). Być może jest to przycisk do rozwijania menu nawigacyjnego.
input#toggle: Ten selektor dotyczy elementu <input> o id "toggle" i również ustawia go na niewidoczny (display: none;). Może być używany do sterowania jakąś funkcjonalnością interaktywną na stronie.
.about-us__container: Definiuje stylizację dla kontenera sekcji "O nas" (<div class="about-us__container">). Ogranicza jego szerokość do maksymalnie 1200 pikseli, wyśrodkowuje go w poziomie (margin: 0 auto;), dodaje wewnętrzny padding o wielkości 2 rem i ustawia tekst na środku (text-align: center;).
.about-us__text: Stylizuje tekst w sekcji "O nas". Ustala jego pogrubienie (font-weight: bold;), dodaje wewnętrzny padding, ustawia rozmiar czcionki na 2 rem, margines na dole oraz efekt przejścia (transition: transform 0.3s ease;). W przypadku najechania kursorem na tekst, używa transformacji do zmniejszenia skali tekstu.
.about-us__textbox: Definiuje stylizację dla kontenera tekstu w sekcji "O nas". Ogranicza jego szerokość do maksymalnie 600 pikseli i wyśrodkowuje go w poziomie.
.about-us__link: Stylizuje linki w sekcji "O nas". Ustala rozmiar czcionki, kolor oraz dodaje podkreślenie i efekt przejścia.
.about-us__box: Definiuje układ elementów w sekcji "O nas". Używa elastycznego układu (display: flex) z rozmieszczeniem w równych odstępach (justify-content: space-evenly;).
.about-us__img: Stylizuje obrazy w sekcji "O nas". Ustala ich szerokość, ogranicza maksymalną szerokość do 350 pikseli, ustawia odstępy marginesów, zaokrągla rogi oraz dodaje efekt przejścia. Podczas najechania kursorem na obrazki, używa transformacji do zmniejszenia skali.
Media Query: W ramach Media Query, dla ekranów o szerokości co najmniej 768 pikseli, zmienia nieco stylizację obrazków (ustala minimalną szerokość) oraz zeruje wewnętrzny padding kontenera "O nas".

HTML

Kod HTML zawiera sekcję main z różnymi elementami, w tym przyciskiem, sekcją "O nas" oraz obrazkami. Jest to pewnie część strony internetowej, która zawiera informacje o firmie lub projekcie.

Warto zaznaczyć, że w kodzie HTML znajdują się również niektóre atrybuty inline, takie jak style="display: none;", które mogą być używane do kontrolowania widoczności elementów w zależności od potrzeb.

Ten kod HTML i CSS razem tworzą stylizację i zawartość sekcji "O nas" na stronie internetowej.

Example

O nas

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. Duis sodales velit sed sem condimentum mattis. Proin vitae orci gravida, ullamcorper sem at, consectetur tortor. Nam bibendum ut risus quis molestie. Nam ut fermentum tortor. Vestibulum facilisis enim mattis magna aliquam convallis. Sed ut leo placerat ligula cursus rutrum. Nunc neque nunc, feugiat id diam non, iaculis blandit augue. Morbi condimentum augue quis est ultrices, eget iaculis justo lacinia. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Lorem ipsum!

Markup

    <main>
        <div id="container" class="container">
            <button style="display: none;" id="button" class="button">Potwierdź godzinę !</button>
        </div>
        <section class="section about-us" id="about">
            <h1 style="display:none;">.</h1>
            <div class="about-us__container">
                <h2>O nas</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. Duis sodales velit sed sem condimentum mattis. Proin vitae orci gravida, ullamcorper sem at,
                        consectetur tortor. Nam bibendum ut risus quis molestie. Nam ut fermentum tortor. Vestibulum facilisis enim mattis magna aliquam convallis.
                        Sed ut leo placerat ligula cursus rutrum. Nunc neque nunc, feugiat id diam non, iaculis blandit augue.
                        Morbi condimentum augue quis est ultrices, eget iaculis justo lacinia. Orci varius natoque penatibus et magnis dis parturient montes,
                        nascetur ridiculus mus.</p>
                    <a href="./contact.html" class="about-us__text about-us__link">Lorem ipsum!</a>
                </div>
                <div class="about-us__box">
                    <img src="img/abootUs1.webp" alt="Lorem ipsum" class="about-us__img about-us__img--desktop" width="200" height="200">
                    <img src="img/abootUs2.webp" alt="Lorem ipsum" class="about-us__img" width="200" height="200">
                    <img src="img/abootUs3.webp" alt="Lorem ipsum" class="about-us__img" width="200" height="200">
                </div>
            </div>
        </section>
    </main>

Source: styleAboutUs.css, line 576