1 #permalink Strona główna - sekcja główna strony

Sekcja System:

Jest to sekcja o klasie "system". Zawiera trzy kontenery o klasie "container", każdy reprezentuje kartę. Każda karta ma dwa "oblicza" (face face1 i face face2). W pierwszym "obliczu" znajduje się ikona komputera oraz nagłówek "Komputery". W drugim "obliczu" jest opis oraz przycisk "Przejdź do strony", który przenosi na "sklep.html". Sekcja Promocje:

Zawiera nagłówek "Promocje". Posiada slider z obrazkami i cenami produktów. Slider ma przyciski do nawigacji pomiędzy slajdami. Sekcja Onas:

Jest to sekcja o klasie "Onas". Zawiera nagłówek "Nasza firma jest najlepsza". Dzieli się na dwie części: "onasgora" i "onasdol". W "onasgora" znajduje się tytuł "Dlaczego warto wybrać nasz serwis?" oraz opis firmy. W "onasdol" znajduje się tytuł "Co oferujemy?" oraz opis oferowanych usług. Sekcja Top:

Zawiera nagłówek "Najpopularniejsze komputery". Wyświetla trzy oferty komputerów, każda z obrazkiem, tytułem i opisem. Sekcja Przyszłość:

Zawiera nagłówek "Przyszłość". Wyświetla obrazek oraz opis. Popup:

Jest to blokowy element, który można wywołać poprzez zaznaczenie checkboxa "Czytaj dalej". Wyświetla dodatkowy tytuł i treść w okienku, a także przycisk "Zamknij", który zamyka popup. Sekcja Zdjęcia:

Zawiera nagłówek "Zdjęcia". Wyświetla różne obrazy w kontenerach z klasą "box". Ten kod HTML tworzy stronę internetową z różnymi sekcjami, w których można znaleźć informacje o produktach, promocjach, firmie oraz przyszłości. Istnieje również możliwość wyświetlania popupów z dodatkowymi treściami.

.container .card .face:

Są to elementy o szerokości 300 pikseli i wysokości 200 pikseli. Zdefiniowana jest animacja trwająca 0.4 sekundy. .container .card .face.face1:

Element ten jest odpowiedzialny za pierwszą stronę "card". Ma pozycję relatywną (position: relative). Tło jest koloru #333 (ciemny odcień szaro-czarny). Element jest wycentrowany zarówno w poziomie, jak i w pionie. Z-index wynosi 1, co oznacza, że jest na pierwszym planie w stosunku do drugiej strony "face". Efekt transformacji translateY(100px) przesuwa go o 100 pikseli w dół po osi Y. .container .card:hover .face.face1:

To reguła CSS aktywowana, gdy kursor najedzie na kartę (hover). Element .face.face1 przesuwa się w górę na swoim miejscu (transform: translateY(0)). Dodatkowo, karta ma efekt cienia oraz kolorowe wypełnienie, co tworzy efekt wizualny. .container .card .face.face1 .content:

Zawartość pierwszej strony karty. Początkowo ma niską przeźroczystość (opacity: 0.2). Trwa 0.5 sekundy animacji przejścia (transition: 0.5s). Tekst jest wycentrowany i biały (kolor: white). .container .card:hover .face.face1 .content:

Gdy kursor najedzie na kartę, zawartość .content staje się bardziej widoczna (opacity: 1). .container .card .face.face1 .content i:

Ikona na pierwszej stronie karty. Ma rozmiar 3 em i biały kolor. .container .card .face.face1 .content h3:

Tytuł na pierwszej stronie karty. Rozmiar czcionki wynosi 1 em, a kolor jest biały. .container .card .face.face1 .content a:

Przycisk na pierwszej stronie karty. Ma efekt przejścia trwający 0.5 sekundy. Gdy najeżdżamy na przycisk, zmienia się tło i kolor tekstu. .container .card .face.face2:

To druga strona "card". Ma pozycję relatywną (position: relative). Tło jest koloru whitesmoke (jasnoszary). Element jest wycentrowany zarówno w poziomie, jak i w pionie. Posiada cień oraz padding. .container .card:hover .face.face2:

Gdy kursor najedzie na kartę, druga strona .face2 przesuwa się w górę (transform: translateY(0)). .container .card .face.face2 .content p, a:

Styl dla tekstu i linków na drugiej stronie karty. Rozmiar czcionki wynosi 10 punktów, a kolor tekstu to #333 (ciemny szary). .container .card .face.face2 .content a:

Linki na drugiej stronie karty. Są bez podkreślenia (text-decoration: none). Mają czarny kolor tekstu, padding i marginesy, co tworzy efekt interaktywny. .container .card .face.face2 .content a:hover:

Gdy najeżdżamy na link, zmienia się tło i kolor tekstu, co tworzy efekt interaktywny. Dodatkowo, link ma cień.

.img-container:

Ustala pozycję jako "relative". Określa wysokość i szerokość na 250px. Ustala perspektywę 3D na 500px. Ustawia transform-style na "preserve-3d". .box:

Dodaje cień (box-shadow) o rozmiarze 10px, kolorze i przeźroczystości. Ustala szerokość i wysokość na 250px. Nadaje zaokrąglenie rogów o promieniu 25px. Określa "overflow" na "hidden", aby ukryć treść wykraczającą poza ramki. Dodaje obramowanie o szerokości 1px i kolorze #bbb. Pozycjonuje element jako "absolute" i umieszcza go na środku (top: 50%). Definiuje animację przejścia o czasie 800ms i efekcie "ease-in-out". .box img:

Skaluje obraz, aby wypełnił całą przestrzeń wewnątrz .box. .box:first-of-type, .box:nth-of-type(2), .box:nth-of-type(3), .box:nth-of-type(4):

Są to style aplikowane do kolejnych .box (elementów z obrazami) w kontenerze .img-container. Każdy z tych selektorów dostosowuje pozycję, przezroczystość, kolor i efekt 3D dla odpowiedniego .box. .box:first-of-type jest ukryty (opacity: 0) i obrócony w lewo (-10deg). .box:nth-of-type(2) ma pełną widoczność (opacity: 1) i jest obrócony w lewo (-10deg). .box:nth-of-type(3) jest lekko przezroczysty (opacity: 0.75), obrócony w lewo i przesunięty na osi Z (translateZ) o -50px. .box:nth-of-type(4) jest jeszcze bardziej przezroczysty (opacity: 0.5), obrócony w lewo i przesunięty na osi Z (translateZ) o -100px.

Example

Komputery

Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde ab repudiandae, explicabo voluptate et hic cum ratione a. Officia delectus illum perferendis maiores quia molestias vitae fugiat aspernatur alias corporis?

Windows

Linux

Promocje

200.00 PLN

100.00 PLN

200.90 PLN

200.10 PLN

Nasza firma jest najlepsza

Dlaczego warto wybrać nasz serwis?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas sagittis magna, at dignissim nunc aliquam in. Vivamus id vestibulum sem. Mauris ac orci sagittis ipsum venenatis maximus ac at erat. Nullam nec faucibus massa. Praesent urna augue, facilisis at tincidunt sit amet, scelerisque et arcu. Quisque ornare hendrerit porta. In hac habitasse platea dictumst. Nulla at urna leo. Aliquam molestie tellus nulla. Pellentesque tristique mollis blandit. Nullam maximus ligula fringilla diam tincidunt, sed sodales lorem euismod. In at ligula malesuada, tincidunt orci ut, ornare lectus. Donec et vulputate odio, eget venenatis metus. Suspendisse euismod laoreet consequat. Sed ultricies lectus ac mollis rutrum. Duis id sagittis odio. Etiam velit nibh, egestas id gravida eget, gravida vel elit. Morbi luctus gravida tempus. Quisque aliquam mi non vulputate fermentum. Morbi tempor sit amet velit a consectetur.

Co oferujemy?

Integer quis ante consectetur, suscipit elit et, mattis orci. Proin consectetur urna non turpis ultricies pretium. Etiam efficitur varius purus, commodo vehicula ligula ultrices eget. Phasellus viverra, ligula id molestie egestas, leo elit dapibus purus, sit amet dapibus libero nunc fermentum metus. Vestibulum sit amet finibus nulla. Etiam ante mi, cursus sit amet lacinia non, dapibus a elit. Donec nec tincidunt metus, eget aliquam ipsum. In venenatis id ex luctus tincidunt. Nunc eu risus sit amet dui porta tempus sit amet in ligula. Etiam sagittis pellentesque purus, vitae rutrum dolor aliquet ac. Vivamus vel mi mollis, pretium velit et, semper erat. Donec et purus eu neque luctus hendrerit. Duis venenatis vehicula lacus. Nulla laoreet facilisis est, congue sollicitudin diam tempor eget.

Najpopularniejsze komputery

Popularny komputer

Najlepszy wybór dla każdego

Popularny komputer

Najlepszy wybór dla każdego

Popularny komputer

Najlepszy wybór dla każdego

Przyszłość

Lorem ipsum

Czytaj dalej

Zdjęcia

Markup

<main>
<section class="system">
  <div class="container">
    <div class="card">
      <div class="face face1">
        <div class="content">
          <i class="fas fa-desktop"></i>
          <h3>Komputery</h3>
        </div>
      </div>
      <div class="face face2">
        <div class="content">
          <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde ab repudiandae, explicabo voluptate et
            hic cum ratione a. Officia delectus illum perferendis maiores quia molestias vitae fugiat aspernatur
            alias corporis?</p>
          <button
            onclick="window.location.href='sklep.html'">
            Przejdź do strony
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="card">
      <div class="face face1">
        <div class="content">
          <i class="fab fa-windows"></i>
          <h3>Windows</h3>
        </div>
      </div>
      <div class="face face2">
        <div class="content">
          <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde ab repudiandae, explicabo voluptate et
            hic cum ratione a. Officia delectus illum perferendis maiores quia molestias vitae fugiat aspernatur
            alias corporis?</p>
          <button
            onclick="window.location.href='sklep.html'">
            Przejdź do strony
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="card">
      <div class="face face1">
        <div class="content">
          <i class="fab fa-linux"></i>
          <h3>Linux</h3>
        </div>
      </div>
      <div class="face face2">
        <div class="content">
          <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde ab repudiandae, explicabo voluptate et
            hic cum ratione a. Officia delectus illum perferendis maiores quia molestias vitae fugiat aspernatur
            alias corporis?</p>
          <button
            onclick="window.location.href='sklep.html'">
            Przejdź do strony
          </button>
        </div>
      </div>
    </div>
  </div>
</section>
<section class="promocje">
  <h3 class="swieci">Promocje</h3>
  <div>
    <div class="slider">
      <div class="slides">
        <div id="slide-1">
          <div class="zdjecie">
            <img src="zdjecia/komputer1.png" alt="logo_barwne">
          </div>
          <div class="cena">
            200.00 PLN
          </div>
        </div>
        <div id="slide-2">
          <div class="zdjecie">
            <img src="zdjecia/komputer2.png" alt="logo_barwne">
          </div>
          <div class="cena">
            100.00 PLN
          </div>
        </div>
        <div id="slide-3">
          <div class="zdjecie">
            <img src="zdjecia/laptop.png" alt="logo_barwne">
          </div>
          <div class="cena">
            200.90 PLN
          </div>
        </div>
        <div id="slide-4">
          <div class="zdjecie">
            <img src="zdjecia/komputer3.png" alt="Komputer przyszłości">
          </div>
          <div class="cena">
            200.10 PLN
          </div>
        </div>
      </div>
      <div class="slider-controls">
        <input type="radio" id="slide-radio-1" name="slide" class="slider-radio">
        <label for="slide-radio-1" class="slider-label" onclick="window.location.href='#slide-1';"></label>
        <input type="radio" id="slide-radio-2" name="slide" class="slider-radio">
        <label for="slide-radio-2" class="slider-label" onclick="window.location.href='#slide-2';"></label>
        <input type="radio" id="slide-radio-3" name="slide" class="slider-radio">
        <label for="slide-radio-3" class="slider-label" onclick="window.location.href='#slide-3';"></label>
        <input type="radio" id="slide-radio-4" name="slide" class="slider-radio">
        <label for="slide-radio-4" class="slider-label" onclick="window.location.href='#slide-4';"></label>
      </div>
    </div>
  </div>
  <script src="slider.js">
  </script>
</section>
<section class="Onas">
  <h2 class="swieci">Nasza firma jest najlepsza</h2>
  <div class="onasgora">
    <div class="tytul">Dlaczego warto wybrać nasz serwis?</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas sagittis magna, at dignissim
      nunc aliquam in. Vivamus id vestibulum sem. Mauris ac orci sagittis ipsum venenatis maximus ac at erat. Nullam
      nec faucibus massa. Praesent urna augue, facilisis at tincidunt sit amet, scelerisque et arcu. Quisque ornare
      hendrerit porta. In hac habitasse platea dictumst. Nulla at urna leo. Aliquam molestie tellus nulla.
      Pellentesque tristique mollis blandit. Nullam maximus ligula fringilla diam tincidunt, sed sodales lorem
      euismod. In at ligula malesuada, tincidunt orci ut, ornare lectus. Donec et vulputate odio, eget venenatis
      metus. Suspendisse euismod laoreet consequat. Sed ultricies lectus ac mollis rutrum. Duis id sagittis odio.
      Etiam velit nibh, egestas id gravida eget, gravida vel elit. Morbi luctus gravida tempus. Quisque aliquam mi
      non vulputate fermentum. Morbi tempor sit amet velit a consectetur.</div>
  </div>
  <div class="onasdol">
    <div class="tytul" id="oferujemy">Co oferujemy?</div>
    <div>Integer quis ante consectetur, suscipit elit et, mattis orci. Proin consectetur urna non turpis ultricies
      pretium. Etiam efficitur varius purus, commodo vehicula ligula ultrices eget. Phasellus viverra, ligula id
      molestie egestas, leo elit dapibus purus, sit amet dapibus libero nunc fermentum metus. Vestibulum sit amet
      finibus nulla. Etiam ante mi, cursus sit amet lacinia non, dapibus a elit. Donec nec tincidunt metus, eget
      aliquam ipsum. In venenatis id ex luctus tincidunt. Nunc eu risus sit amet dui porta tempus sit amet in
      ligula. Etiam sagittis pellentesque purus, vitae rutrum dolor aliquet ac. Vivamus vel mi mollis, pretium velit
      et, semper erat. Donec et purus eu neque luctus hendrerit. Duis venenatis vehicula lacus. Nulla laoreet
      facilisis est, congue sollicitudin diam tempor eget.</div>
  </div>
</section>
<section class="top">
  <h3>Najpopularniejsze komputery</h3>
  <div class="pozycja">
    <div class="noferta">
      <img src="zdjecia/komputer1.png" alt="Komputer appla">
      <div class="noferta2">
        <h4>Popularny komputer</h4>
        <p>Najlepszy wybór dla każdego</p>
      </div>
    </div>
    <div class="noferta">
      <img src="zdjecia/komputer3.png" alt="Komputer przyszłości">
      <div class="noferta2">
        <h4>Popularny komputer</h4>
        <p>Najlepszy wybór dla każdego</p>
      </div>
    </div>
    <div class="noferta">
      <img src="zdjecia/laptop.png" alt="Najlepszy laptop">
      <div class="noferta2">
        <h4>Popularny komputer</h4>
        <p>Najlepszy wybór dla każdego</p>
      </div>
    </div>
  </div>
</section>
<section>
  <div class="przyszlosc">
    <div class="divPrzyszlosc">
      <h3 class="swieci">Przyszłość</h3>
    </div>
    <img src="zdjecia/komputerPrzyszlosic.png" alt="Przyszłość">
    <div class="divNaObrazku">
      <h5>Lorem ipsum</h5>
      <p>Integer quis ante consectetur, suscipit elit et, mattis orci. Proin consectetur urna non turpis ultricies
        pretium. Etiam efficitur varius purus, commodo vehicula ligula ultrices eget. Phasellus viverra, ligula id
        molestie egestas, leo elit dapibus purus, sit amet dapibus libero nunc fermentum metus. Vestibulum sit amet
        finibus nulla. Etiam ante mi, cursus sit amet lacinia non, dapibus a elit. Donec nec tincidunt metus, eget
        aliquam ipsum. In venenatis id ex luctus tincidunt. Nunc eu risus sit amet dui porta tempus sit amet in
        ligula. Etiam sagittis pellentesque purus, vitae rutrum dolor aliquet ac. Vivamus vel mi mollis, pretium
        velit et, semper erat. Donec et purus eu neque luctus hendrerit. Duis venenatis vehicula lacus. Nulla
        laoreet facilisis est, congue sollicitudin diam tempor eget.</p>
      <label for="popup-toggle" class="buttonCzytajDalej">Czytaj dalej</label>
      <input type="checkbox" id="popup-toggle">
    </div>
  </div>
  <!-- Popup -->
  <div id="myPopup" class="popup">
    <div class="popup-content">
      <label class="close-button" for="popup-toggle">Zamknij</label>
      <h3>Tytuł popupa</h3>
      <p>Tu znajduje się treść popupa. Możesz tutaj dodać dłuższy tekst lub inne elementy.</p>
    </div>
  </div>
</section>
<section>
  <h3 class="swieci">Zdjęcia</h3>
  <div class="zdjecia">
    <div class="img-container">
      <div class="box">
        <img src="zdjecia/komputer1.png" alt="Kup nowy komputer">
      </div>
      <div class="box">
        <img src="zdjecia/komputer2.png" alt="Tani komputer">
      </div>
      <div class="box">
        <img src="zdjecia/komputer3.png" alt="Nie ma wydajniejszego komputera">
      </div>
      <div class="box">
        <img src="zdjecia/komputerPrzyszlosic.png" alt="Komputer biurowy">
      </div>
      <script src="animacja.js">
      </script>
    </div>
  </div>
</section>
  </main>

Source: style.css, line 1