9 #permalink PRIVACY - sekcja polityki prywatności

Kod HTML:

<main>: Główny kontener strony.
<div id="container" class="container">: Kontener zawierający przycisk o ID "button" (który jest ukryty za pomocą style="display: none;").
<section class="section privacy" id="privacy">: Sekcja prywatności o klasie "section" i ID "privacy".
<h1 style="display:none;">.</h1>: Nagłówek <h1> o ukrytym stylu, zawierający tylko kropkę (nie widoczny).
<div class="privacy__container">: Kontener zawierający treść polityki prywatności.
<h2 class="section__heading">Polityka Prywatności</h2>: Nagłówek <h2> z klasą "section__heading" i tytułem "Polityka Prywatności".
<p>: Akapit zawierający tekst polityki prywatności. Jest pogrubiony (font-weight: bold;), a po najechaniu kursorem zachodzi na niego efekt powiększenia (transform: scale(1.1);).

Kod CSS:

main: Styl dla głównego kontenera strony. Minimalna wysokość wynosi 100%, jest pozycjonowany relatywnie, zajmuje elastycznie dostępną przestrzeń (flex: 1) i ma szerokość 100%.
#hamburger: Styl dla elementu o ID "hamburger", który jest ukryty (display: none;).
input#toggle: Styl dla elementu input o ID "toggle", który jest ukryty (display: none;).
.section__heading: Styl dla nagłówka sekcji. Dodaje wewnętrzny padding, a także efekt przejścia (transition: all 0.3s ease;) w celu płynnej animacji przy najechaniu kursorem.
.section__heading:hover: Styl dla nagłówka sekcji w stanie hover. Powoduje powiększenie nagłówka (transform: scale(1.1);).
.privacy__container: Styl dla kontenera polityki prywatności. Ustala maksymalną szerokość na 1200px, wyśrodkowuje go na stronie (margin: 0 auto;), dodaje wewnętrzny padding, i justyfikuje tekst do lewej.
.privacy__container p: Styl dla paragrafów w kontenerze polityki prywatności. Tekst jest pogrubiony (font-weight: bold;), ma efekt przejścia (transition: all 0.3s ease;) oraz ustalony interlinia na 2rem.
.privacy__container p:hover: Styl dla paragrafów w kontenerze polityki prywatności w stanie hover. Powoduje powiększenie tekstu (transform: scale(1.1);).

Example

Polityka Prywatności

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget massa sed sapien luctus bibendum. Mauris interdum interdum dolor, nec bibendum enim. Duis nec justo velit. Integer bibendum purus mauris, et accumsan mi facilisis nec. Nulla facilisi. Suspendisse fringilla tortor at nulla lacinia blandit. Cras ac eros a velit ultrices bibendum vel ac justo. Nunc euismod, nisi at elementum sagittis, odio lectus dignissim mi, ac ultrices turpis nulla et nisi. Proin vestibulum, felis vitae lobortis luctus, dolor enim venenatis tortor, a convallis ex velit eget lectus. In hac habitasse platea dictumst. Suspendisse vel egestas nisi. Donec semper dui at facilisis eleifend. Donec malesuada libero id metus semper interdum. Nulla vel ex vitae turpis hendrerit fringilla at sit amet velit. Aenean finibus justo vitae est sollicitudin, sit amet viverra arcu volutpat. Nulla facilisi. Donec nec ullamcorper nisl. Vestibulum cursus malesuada ante, et feugiat eros varius vitae. Maecenas vel odio ac turpis consectetur egestas. Suspendisse feugiat justo eu neque tincidunt condimentum. Sed vitae ultrices odio. Aenean vitae magna sit amet risus malesuada aliquet. Aenean a facilisis justo. Etiam sagittis mi elit, in malesuada turpis venenatis eu. Vestibulum euismod vitae enim nec scelerisque. Integer laoreet mauris quam, at pellentesque nulla iaculis eu. Pellentesque laoreet tincidunt est. Nam accumsan euismod neque, et accumsan magna aliquet eu. Suspendisse consectetur ultrices elit, id elementum purus tempus et. Nunc sagittis nunc ex, id ultrices nisl fermentum eu. Suspendisse luctus libero eu tellus varius euismod. Pellentesque sed gravida magna. Duis feugiat bibendum varius. Integer quis turpis ut justo viverra ultricies. Sed vel nulla quis justo euismod scelerisque. Suspendisse et metus dui. Nullam vel tellus nec ligula tempus varius ac quis magna. Fusce vestibulum pellentesque eros, id hendrerit mi cursus in. Sed eu justo fermentum, semper purus nec, feugiat odio. Vivamus rhoncus magna eu risus tempor, non tincidunt odio fermentum. Nulla facilisi. Etiam nec lectus vel justo feugiat dignissim eget quis ligula. Integer id ipsum dapibus, scelerisque odio ac, pharetra risus. Nulla nec quam quis ipsum euismod efficitur at nec eros. Sed semper finibus sapien vitae cursus. Fusce hendrerit aliquam massa, id efficitur justo. Donec eu odio sit amet justo venenatis efficitur non at tellus.

Markup

    <main>
        <div id="container" class="container">
            <button style="display: none;" id="button" class="button">Potwierdź godzinę !</button>
        </div>
        <section class="section privacy" id="privacy">
            <h1 style="display:none;">.</h1>
            <div class="privacy__container">
                <h2 class="section__heading">Polityka Prywatności</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget massa sed sapien luctus bibendum.
                    Mauris
                    interdum interdum dolor, nec bibendum enim. Duis nec justo velit. Integer bibendum purus mauris, et
                    accumsan
                    mi
                    facilisis nec. Nulla facilisi. Suspendisse fringilla tortor at nulla lacinia blandit. Cras ac eros a
                    velit
                    ultrices bibendum vel ac justo. Nunc euismod, nisi at elementum sagittis, odio lectus dignissim mi, ac
                    ultrices
                    turpis nulla et nisi. Proin vestibulum, felis vitae lobortis luctus, dolor enim venenatis tortor, a
                    convallis
                    ex
                    velit eget lectus. In hac habitasse platea dictumst. Suspendisse vel egestas nisi. Donec semper dui
                    at
                    facilisis
                    eleifend. Donec malesuada libero id metus semper interdum.
                    Nulla vel ex vitae turpis hendrerit fringilla at sit amet velit. Aenean finibus justo vitae est
                    sollicitudin,
                    sit amet
                    viverra arcu volutpat. Nulla facilisi. Donec nec ullamcorper nisl. Vestibulum cursus malesuada ante,
                    et
                    feugiat
                    eros varius vitae. Maecenas vel odio ac turpis consectetur egestas. Suspendisse feugiat justo eu
                    neque
                    tincidunt
                    condimentum. Sed vitae ultrices odio. Aenean vitae magna sit amet risus malesuada aliquet. Aenean a
                    facilisis
                    justo.
                    Etiam sagittis mi elit, in malesuada turpis venenatis eu.
                    Vestibulum euismod vitae enim nec scelerisque. Integer laoreet mauris quam, at pellentesque nulla
                    iaculis
                    eu.
                    Pellentesque laoreet tincidunt est. Nam accumsan euismod neque, et accumsan magna aliquet eu.
                    Suspendisse
                    consectetur
                    ultrices elit, id elementum purus tempus et. Nunc sagittis nunc ex, id ultrices nisl fermentum eu.
                    Suspendisse
                    luctus
                    libero eu tellus varius euismod. Pellentesque sed gravida magna.
                    Duis feugiat bibendum varius. Integer quis turpis ut justo viverra ultricies. Sed vel nulla quis
                    justo
                    euismod
                    scelerisque. Suspendisse et metus dui. Nullam vel tellus nec ligula tempus varius ac quis magna.
                    Fusce
                    vestibulum
                    pellentesque eros, id hendrerit mi cursus in. Sed eu justo fermentum, semper purus nec, feugiat odio.
                    Vivamus
                    rhoncus magna eu risus tempor, non tincidunt odio fermentum. Nulla facilisi. Etiam nec lectus vel
                    justo
                    feugiat
                    dignissim eget quis ligula. Integer id ipsum dapibus, scelerisque odio ac, pharetra risus. Nulla nec
                    quam
                    quis
                    ipsum euismod efficitur at nec eros. Sed semper finibus sapien vitae cursus. Fusce hendrerit aliquam
                    massa,
                    id
                    efficitur justo. Donec eu odio sit amet justo venenatis efficitur non at tellus.</p>
            </div>
        </section>
    </main>

Source: stylePrivacy.css, line 496