KSS Style Guide

10 #permalink PRIVACY - sekcja polityki prywatności

Toggle example guides Toggle HTML markup

Sekcja "Stylizacja sekcji polityki prywatności"

  • 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 na konkretne wartości (160px na górze i 100px na dole).

  • .privacy__container: Kontener o klasie "privacy__container" ma maksymalną szerokość 1200px, jest wyśrodkowany na stronie (margin: 0 auto), posiada padding i tekst jest justyfikowany.

  • .privacy__container p: Paragrafy wewnątrz kontenera "privacy__container" są pogrubione (font-weight: bold) i mają biały kolor tekstu.

Ten styl jest prosty i skupia się głównie na wyśrodkowaniu i czytelności treści w sekcji polityki prywatności.

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