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.
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
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?
Linux
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?
Promocje
Nasza firma jest najlepsza
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
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.
Tytuł popupa
Tu znajduje się treść popupa. Możesz tutaj dodać dłuższy tekst lub inne elementy.
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>style.css, line 1
1.1 #permalink Menu-navbar
Ten kod HTML reprezentuje nagłówek (header) strony internetowej. Oto jego opis:
Sekcja "lewy":
W lewej części nagłówka znajduje się kontener o klasie "lewy". Wewnątrz tego kontenera jest kolejny kontener o klasie "flex", który używa układu flexbox. W kontenerze "flex" znajduje się kontener o klasie "container-logo", który zawiera logo strony. Logo jest zbudowane z trzech elementów: litera "L" (klasa "L"), środkowa część (klasa "mid"), oraz napis "ADING GO" (klasa "ADING"). Sekcja "prawy":
W prawej części nagłówka znajduje się kontener o klasie "prawy". Wewnątrz tego kontenera jest kontener "search-container", który zawiera pole tekstowe do wprowadzania zapytań wyszukiwania (input) o id "search-input" oraz przycisk do rozpoczęcia wyszukiwania (a) o id "search-btn". Pole tekstowe ma atrybut "placeholder" ustawiony na "Szukaj...", co sugeruje użytkownikowi, że może tam wprowadzić zapytanie. Przycisk ma ikonę lupy (i class="fas fa-search" ** /i**), a jego kliknięcie rozpoczyna wyszukiwanie. Sekcja "script":
Ten fragment kodu JavaScript jest osadzony w nagłówku i odpowiedzialny za obsługę wyszukiwania. Po załadowaniu całej zawartości dokumentu (event "DOMContentLoaded"), kod dodaje obsługę zdarzeń dla pola tekstowego "search-input" oraz przycisku "search-btn". Kiedy użytkownik wciśnie klawisz Enter w polu tekstowym, zostaje uruchomiona funkcja "search", która otwiera nową kartę przeglądarki z wynikami wyszukiwania na Google. Kliknięcie przycisku "search-btn" również uruchamia funkcję "search" i otwiera nową kartę przeglądarki z wynikami wyszukiwania. Ten kod HTML i JavaScript tworzy interaktywną nagłówkę z polem wyszukiwania, które pozwala użytkownikom na wprowadzanie zapytań i wyszukiwanie ich na stronie Google.
Ten kod HTML i JavaScript reprezentuje nawigację na stronie internetowej. Oto jego opis:
Element nav:
Jest to element HTML, który zazwyczaj zawiera menu lub linki nawigacyjne na stronie. Sekcja "pasek":
Wewnątrz nawigacji znajduje się kontener o klasie "pasek". Sekcja "container":
To kolejny kontener o id "container", który ma na celu ograniczenie szerokości elementów nawigacyjnych. Element div z id "menu-toggle" i klasą "hamburger":
Ten element reprezentuje przycisk "hamburger" (trzy poziome paski), który jest używany w menu w wersji mobilnej. Po kliknięciu przycisku "hamburger", menu staje się widoczne lub ukryte. Element div z id "menu-container":
To kontener, który zawiera menu nawigacyjne. Lista nieuporządkowana ul z id "menu":
To główne menu nawigacyjne, które zawiera listę linków. Elementy li:
Są to elementy listy, które reprezentują poszczególne pozycje w menu. Elementy a:
Są to odnośniki (linki) w menu, które prowadzą do różnych sekcji lub stron na stronie internetowej. Podmenu:
W kodzie znajdują się również elementy ul i li, które tworzą podmenu dla niektórych pozycji w głównym menu. Skrypt JavaScript:
Skrypt JavaScript znajduje się na końcu kodu i jest odpowiedzialny za interakcję z przyciskiem "hamburger". Kiedy przycisk "hamburger" jest kliknięty, skrypt dodaje lub usuwa klasę "active" z przycisku i kontenera menu, co powoduje jego rozwinięcie lub schowanie w zależności od aktualnego stanu. Ten kod tworzy responsywne menu nawigacyjne, które może być zwinięte i rozwinięte na stronie internetowej, szczególnie w przypadku korzystania z urządzeń mobilnych.
#menu:
Jest to styl dla elementu o identyfikatorze "menu". Element jest ustawiony jako relatywny (position: relative). Ma lewe wyrównanie (float: left). Otrzymuje odstęp wewnętrzny 20 pikseli na lewej i prawej stronie (padding: 0 20px). Posiada zaokrąglone rogi z promieniem 3 pikseli (border-radius: 3px). Tło ma kolor szary (#ccc). #menu, #menu ul:
Są to style, które usuwają domyślne punkty (kropki) na liście. #menu li:
Styl dla bezpośrednich potomków elementu o identyfikatorze "menu". Elementy li są wyświetlane obok siebie (float: left). Posiadają perspektywę o wartości 1000 pikseli (perspective: 1000px), co może być używane w połączeniu z efektami 3D. #menu a:
Styl dla odnośników (a) wewnątrz elementu o identyfikatorze "menu". Odnośniki są wyświetlane jako bloki (display: block). Posiadają odstęp wewnętrzny (padding) na górze, dole i poziomo. Odstęp 13 pikseli na górze i dole oraz 20 pikseli poziomo (padding: 13px 20px 13px 20px). Tekst odnośników nie jest podkreślony (text-decoration: none). Kolor tekstu jest ustawiony na ciemnoszary (#4b4b4b). Rozmiar czcionki to 18 pikseli. Odnośniki mają przejrzyste tło (background: transparent). Zdefiniowano animację przejścia dla odnośników z opóźnieniem 0.25 sekundy (transition: all .25s ease-in-out). #menu li:hover a:
Styl dla odnośników, które są podświetlane po najechaniu kursorem na ich rodzica. Tło odnośnika zmienia kolor na ciemniejszy szary (#333). Kolor tekstu odnośnika zmienia się na niebieski (#00dffc). #menu li ul:
Styl dla listy nieuporządkowanej wewnątrz elementów w menu rozwijanym. Lista jest ukryta . Ma szerokość 200 pikseli. Posiada zaokrąglone rogi na dole po lewej i prawej stronie (border-bottom-left-radius i border-bottom-right-radius) z promieniem 4 pikseli. Tło listy jest przezroczyste. Treść listy jest obcinana w przypadku przekroczenia szerokości elementu nadrzędnego (overflow: hidden). Punkt transformacji animacji 3D ustawiony jest na środkowy górny róg listy (transform-origin: 50% 0%). #menu li:hover ul:
Styl dla listy, która jest wyświetlana po najechaniu kursorem na element li w menu rozwijanym. Dodano animację "swingdown", która kontroluje animację pojawiania się menu rozwijanego. Zmieniono kolor tła na ciemniejszy szary (#333). Zwiększono przejrzystość do 1 (opacity: 1). Ustawiono widoczność na "visible" (visibility: visible). Dodano cień na menu rozwijanym (box-shadow) i określono parametry animacji (animation-name, animation-duration, animation-timing-function). @keyframes swingdown:
Jest to definicja animacji "swingdown" przy użyciu animacji CSS. Animacja rozpoczyna się od opacznia bliskiego jedności (0.99999) i obrotu elementu o 90 stopni wzdłuż osi X. W trakcie animacji element obraca się w różnych kierunkach, symulując efekt "swingu" lub kiwania, z określonymi wartościami transformacji i funkcjami czasu. #menu li li a:
Styl dla odnośników (a) wewnątrz elementów li w menu rozwijanym. Dodano odstęp wewnętrzny z lewej strony (padding-left: 15px). Grubość czcionki wynosi 400. Kolor tekstu jest ustawiony na jasnoszary (#ddd). Tekst nie posiada cienia. Dodano kreski przerywane na górze i na dole odnośników (border-top i border-bottom) z przezroczystym kolorem. Dodano efekt przejścia (transition) dla płynnych zmian koloru. #menu li li a:hover:
Styl dla odnośników, które są podświetlane po najechaniu kursorem na nie w menu rozwijanym. Kolor tekstu odnośników zmienia się na niebieski (#00dffc). Dodano kreski przerywane na górze i na dole odnośników z jasnym kolorem oraz delikatne tło o niebieskim odcieniu.
.L i .ADING:
Są to klasy, które ustawiają pozycję (top i left) elementów ikony. Przesuwają elementy w lewo i w górę na określone pozycje. .outter:
To styl dla zewnętrznego okręgu w ikonie. Ustala pozycję (top i left), szerokość (80px), wysokość (80px) i promień zaokrąglenia (border-radius). Dodaje efekt obracania się wskazówki zegara z animacją CSS. Kolor lewej krawędzi jest ustawiony na #7D1935. .mid:
To styl dla środkowego okręgu w ikonie. Ustala pozycję (top i left), szerokość (50px), wysokość (50px) i promień zaokrąglenia (border-radius). Dodaje efekt obracania się wskazówki zegara z inną prędkością niż zewnętrzny okrąg. Kolor lewej krawędzi jest ustawiony na #B71427. Animacja (@-webkit-keyframes, @-moz-keyframes, @-o-keyframes, @keyframes):
Definiuje animację o nazwie "spin", która obraca elementy od 0 do 360 stopni. Ustawiona jest prędkość animacji, iteracja (nieskończoność) i funkcja czasowa (linear).
.search-container:
Ustawia tło na białe (#fff), okrągły kształt (dzięki border-radius), cień (za pomocą box-shadow) i inne właściwości. Określa wysokość (30px) i dodaje wewnętrzne wypełnienie (padding: 10px 20px), aby uzyskać odpowiedni rozmiar i odstępy. Ustala wyśrodkowanie treści za pomocą display: flex, justify-content: center i align-items: center. Kursor zmienia się na "pointer" po najechaniu na element. Definiuje animację przejścia (transition: 0.8s). .search-container:hover > .search-input:
Po najechaniu na .search-container, szerokość elementu .search-input zmienia się na 400px, co powoduje jego rozwinięcie. .search-container .search-input:
Ustawia tło na przezroczyste, usuwa obramowanie (border: none) i zmienia wygląd na biały prostokąt z zaokrąglonymi rogami (dzięki border-radius). Szerokość początkowa elementu to 0px, ale zmienia się w trakcie animacji przejścia (transition: 0.8s). Ustala czcionkę o wadze 500 i rozmiarze 16px. .search-container .search-btn .fas:
Ustala kolor ikony "fas" (Font Awesome) na #5cbdbb. @keyframes hoverShake:
Jest to definicja animacji hoverShake, która powoduje delikatne drganie elementu po najechaniu na niego kursorem. Skew transformuje element, a wartości kąta zmieniają się, aby uzyskać efekt drgania. .search-container:hover:
Po najechaniu na .search-container, animacja hoverShake jest uruchamiana, co powoduje drganie elementu przez krótki czas.
.search-container:
Ustawia tło na białe (#fff), okrągły kształt (dzięki border-radius), cień (za pomocą box-shadow) i inne właściwości. Określa wysokość (30px) i dodaje wewnętrzne wypełnienie (padding: 10px 20px), aby uzyskać odpowiedni rozmiar i odstępy. Ustala wyśrodkowanie treści za pomocą display: flex, justify-content: center i align-items: center. Kursor zmienia się na "pointer" po najechaniu na element. Definiuje animację przejścia (transition: 0.8s). .search-container:hover > .search-input:
Po najechaniu na .search-container, szerokość elementu .search-input zmienia się na 400px, co powoduje jego rozwinięcie. .search-container .search-input:
Ustawia tło na przezroczyste, usuwa obramowanie (border: none) i zmienia wygląd na biały prostokąt z zaokrąglonymi rogami (dzięki border-radius). Szerokość początkowa elementu to 0px, ale zmienia się w trakcie animacji przejścia (transition: 0.8s). Ustala czcionkę o wadze 500 i rozmiarze 16px. .search-container .search-btn .fas:
Ustala kolor ikony "fas" (Font Awesome) na #5cbdbb. @keyframes hoverShake:
Jest to definicja animacji hoverShake, która powoduje delikatne drganie elementu po najechaniu na niego kursorem. Skew transformuje element, a wartości kąta zmieniają się, aby uzyskać efekt drgania. .search-container:hover:
Po najechaniu na .search-container, animacja hoverShake jest uruchamiana, co powoduje drganie elementu przez krótki czas.
Markup
<header>
<div class="lewy">
<div class="flex">
<div class="container-logo">
<div class="L">L</div>
<div class="outter">
<div class="mid"></div>
</div>
<div class="ADING">GO</div>
</div>
</div>
</div>
<div class="prawy">
<div class="search-container">
<input type="text" id="search-input" placeholder="Szukaj..." class="search-input">
<a href="#" id="search-btn" class="search-btn">
<i class="fas fa-search"></i>
</a>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var searchInput = document.getElementById('search-input');
var searchButton = document.getElementById('search-btn');
function search() {
var query = searchInput.value
var googleSearchUrl = 'https://www.google.com/search?q=' + encodeURIComponent(query);
window.open(googleSearchUrl, '_blank'); // Otwiera wyniki wyszukiwania w nowej karcie
}
searchInput.addEventListener('keypress', function (event) {
if (event.key === 'Enter') {
event.preventDefault(); // Zapobiega standardowej akcji formularza
search();
}
});
searchButton.addEventListener('click', function (event) {
event.preventDefault(); // Zapobiega standardowej akcji linku
search();
});
});
</script>
<nav>
<div class="pasek">
<div id="container">
<div id="menu-toggle" class="hamburger">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<div id="menu-container">
<ul id="menu">
<li><a href="#">Strona główna</a>
</li>
<li><a href="galeria.html">Galeria</a>
</li>
<li><a href="#">Konto</a>
<ul>
<li><a href="zaloguj.html">Zaloguj się</a></li>
<li><a href="zarejestruj.html">Zarejestruj się</a></li>
</ul>
</li>
<li>
<a href="sklep.html">Sklep</a>
</li>
<li><a href="#">About Me</a>
<ul>
<li><a href="dostawa.html">Koszt zakupu</a></li>
<li><a href="lista.html">Zrób listę</a></li>
<li><a href="sklep.html">Sklep</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
<script>
const hamburger = document.getElementById("menu-toggle");
const menuContainer = document.getElementById("menu-container");
hamburger.addEventListener("click", () => {
hamburger.classList.toggle("active");
menuContainer.classList.toggle("active");
});
</script>style.css, line 459
1.2 #permalink Stopka
Oto opis kodu HTML dla stopki (footer) strony internetowej:
Sekcja Social Icons:
W stopce znajduje się kontener o klasie "social-icons". Ten kontener zawiera trzy ikony, reprezentujące różne media społecznościowe. Pierwsza ikona to ikona Facebooka (i class="fab fa-facebook" /i), która jest również odnośnikiem do strony Facebooka (https://www.facebook.com). Druga ikona to ikona Instagrama (i class="fab fa-instagram" /i), która jest odnośnikiem do strony Instagrama (https://www.instagram.com). Trzecia ikona to ikona YouTube (i class="fab fa-youtube" /i), która jest odnośnikiem do strony YouTube (https://www.youtube.com). Atrybut "target="_blank"" oznacza, że po kliknięciu na ikonę otworzy się nowe okno przeglądarki z odpowiednią stroną. Sekcja Copyright:
Poniżej sekcji "social-icons" znajduje się kontener o klasie "copyright". W tym kontenerze jest wyświetlany tekst "© 2023 Wszelkie prawa zastrzeżone". Tekst ten informuje, że prawa autorskie do treści na stronie są zastrzeżone i należą do właściciela witryny. Ten fragment kodu HTML jest odpowiedzialny za stopkę strony internetowej i zawiera odnośniki do różnych mediów społecznościowych oraz informację o prawach autorskich.
footer:
Tło stopki ma kolor #333 (ciemny odcień szaro-czarny). Tekst w stopce jest biały (kolor: #fff). Tekst jest wycentrowany poziomo (text-align: center). Stopka ma wewnętrzny margines 20 pikseli na górze i na dole (padding: 20px). Element ma pozycję względną (position: relative). Wysokość stopki wynosi 100 pikseli (height: 100px). Jest odstęp 20 pikseli od elementu nad stopką (margin-top: 20px). .social-icons:
To kontener dla ikon społecznościowych w stopce. Ma pozycję absolutną (position: absolute), co oznacza, że jest pozycjonowany względem najbliższego elementu z pozycją relatywną (czyli elementu footer). Jest umieszczony na środku stopki (top: 40px) i rozciąga się na całej szerokości (left: 0, right: 0). #facebook:hover, #instagram:hover, #yt:hover:
Są to pseudoklasy :hover dotyczące konkretnych ikon społecznościowych (Facebook, Instagram, YouTube). Gdy kursor najedzie na daną ikonę, ma miejsce efekt skalowania na 150% wielkości (scale: 1.5). Kolor tekstu ikony zmienia się na odpowiedni (blue, orange, red) po najechaniu kursorem. .social-icons a:
To style dla linków (ikon społecznościowych) w stopce. Margines poziomy między nimi wynosi 10 pikseli na lewo i na prawo (margin: 0 10px). Rozmiar ikon wynosi 32 piksele (font-size: 32px). Kolor tekstu ikon jest biały (color: #fff). Linki nie posiadają podkreślenia (text-decoration: none). .copyright:
To style dla tekstu z informacją o prawach autorskich. Rozmiar czcionki wynosi 14 pikseli (font-size: 14px). W skrócie, stopka (footer) ma ciemne tło z białym tekstem i zawiera ikony społecznościowe (social-icons). Ikony te zmieniają rozmiar i kolor po najechaniu na nie kursorem. Tekst z informacją o prawach autorskich (copyright) ma mniejszy rozmiar czcionki.
Markup
<footer>
<div class="social-icons">
<a href="https://www.facebook.com" target="_blank"><i class="fab fa-facebook" id="facebook"></i></a>
<a href="https://www.instagram.com" target="_blank"><i class="fab fa-instagram" id="instagram"></i></a>
<a href="https://www.youtube.com" target="_blank"><i class="fab fa-youtube" id="yt"></i></a>
</div>
<div class="copyright">
© 2023 Wszelkie prawa zastrzeżone
</div>
</footer>style.css, line 371