KSS Style Guide

2 #permalink ABOUT US - sekcja podstrony o nas

Toggle example guides Toggle HTML markup

Sekcja "Strona główna - Stylizacja ogólna"

  1. main: Kontener głównej treści strony, wykorzystuje elastyczność flex (flex: 1) w celu dostosowania się do dostępnej przestrzeni. Posiada margines górny (margin-top: 160px) oraz margines dolny (margin-bottom: 100px).

  2. #relativeTemplate: Kontener o pozycji relative, zajmujący 70% wysokości widoku (70vh). Zawiera różne elementy, takie jak obrazy, tła i wzory.

  3. #relativ, #background2, #background3: Elementy o pozycji absolute, umieszczone na tle (relativeTemplate). Posiadają zróżnicowane rozmiary, tła, cienie (box-shadow) i są rozmieszczone w różnych częściach strony.

  4. .pattern-container i .circle: Elementy tworzące wzory na tle (relativeTemplate). Tworzą okręgi o różnych rozmiarach i przezroczystości.

Sekcja "O nas - Sekcja informacyjna"

  1. .about-us__container: Kontener zawierający treść sekcji "O nas". Posiada maksymalną szerokość, marginesy, wyrównanie tekstu do środka oraz maksymalną szerokość 1200px.

  2. .about-us__text: Tekst opisujący sekcję "O nas". Definiuje grubość czcionki, rozmiar czcionki, kolor, marginesy i efekt transformacji przy najechaniu myszą.

  3. .about-us__textbox: Kontener dla tekstu w sekcji "O nas". Ma maksymalną szerokość i jest wyśrodkowany.

  4. .about-us__link: Link do innej strony z określonym rozmiarem czcionki, kolorem i podkreśleniem tekstu.

  5. .about-us__box: Kontener dla zdjęć w sekcji "O nas". Jest wyśrodkowany, wykorzystuje flexbox do równomiernego rozmieszczenia elementów i ma margines górny.

  6. .about-us__img: Zdjęcia w sekcji "O nas" z maksymalną szerokością, automatyczną wysokością dostosowaną, marginesami, zaokrągleniem narożników i efektem transformacji przy najechaniu myszą.

Sekcja "Media Queries - Dostosowanie do różnych urządzeń"

  1. Reguły Media Queries: W kodzie znajdują się trzy sekcje Media Queries, które reagują na zmiany szerokości ekranu i dostosowują stylizację do różnych rozmiarów urządzeń (max-width: 1000px, max-width: 768px, max-width: 650px, max-width: 530px). W tych sekcjach zmieniane są między innymi pozycje, rozmiary i style elementów, aby zapewnić responsywność na różnych urządzeniach.

Ogólnie rzecz biorąc, ten fragment kodu opisuje strukturę i stylizację sekcji "O nas" na stronie internetowej oraz efekty wizualne na tle strony głównej. Stylizacja jest dostosowana do różnych rozmiarów ekranów za pomocą reguł Media Queries.

Example
background2 background3

Meet us

  • lorem ipsum
  • lorem ipsum
  • lorem ipsum
  • lorem ipsum
Lorem ipsum!

.

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!
Lorem ipsum Lorem ipsum Lorem ipsum
Markup 
    <main>
        <div id="relativeTemplate">
            <div id="relativ"></div>
            <img src="img/abootUs2.webp" alt="background2" id="background2">
            <img src="img/abootUs3.webp" alt="background3" id="background3">
            <div id="relativ2">
                <h3>Meet us</h3>
                <ul>
                    <li>lorem ipsum</li>
                    <li>lorem ipsum</li>
                    <li>lorem ipsum</li>
                    <li>lorem ipsum</li>
                </ul>
                <a href="./contact.html" class="contactClass">Lorem ipsum!</a>
            </div>
            <div class="pattern-container">
                <div class="circle"></div>
                <div class="circle"></div>
                <div class="circle"></div>
                <div class="circle"></div>
                <div class="circle"></div>
            </div>
            <div class="pattern-container">
                <div class="circle"></div>
                <div class="circle"></div>
                <div class="circle"></div>
                <div class="circle"></div>
                <div class="circle"></div>
            </div>
            <div class="pattern-container">
                <div class="circle"></div>
                <div class="circle"></div>
                <div class="circle"></div>
                <div class="circle"></div>
                <div class="circle"></div>
            </div>
            <div class="pattern-container">
                <div class="circle"></div>
                <div class="circle"></div>
                <div class="circle"></div>
                <div class="circle"></div>
                <div class="circle"></div>
            </div>
            <div class="pattern-container">
                <div class="circle"></div>
                <div class="circle"></div>
                <div class="circle"></div>
                <div class="circle"></div>
                <div class="circle"></div>
            </div>
            <div class="pattern-container">
                <div class="circle"></div>
                <div class="circle"></div>
                <div class="circle"></div>
                <div class="circle"></div>
                <div class="circle"></div>
            </div>
        </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 522