1.3 #permalink HOME SLIDER - sekcja slider
-
.slides img: Ta reguła ustawia szerokość i wysokość dla obrazków w sekcji o klasie "slides".
-
.slides img:hover: Dodaje animację "pulse" na najechanie kursorem na obrazki w sekcji "slides". Animacja trwa 2 sekundy i jest nieskończona (infinite).
-
.slides img:hover ~ .slide-description: Dodaje animację "pulse" na najechanie kursorem na obrazki w sekcji "slides", a także na odpowiadające im opisy (elementy o klasie "slide-description").
-
div.slider-controls: Ta reguła stylizuje kontener dla kontrolerów slidera, nadając mu wyśrodkowanie, marginesy, wysokość i odstęp na dole.
-
.slider-radio: Ukrywa elementy typu radio, które służą jako kontrolery slidera.
-
.slider-label: Stylizuje etykiety kontrolerów slidera, ustawiając kolor tekstu, efekt podkreślenia przy najechaniu kursorem i efekt przejścia.
-
.slider-label: Określa wygląd kontrolerów slidera (elementy typu label), nadając im szerokość, wysokość, zaokrąglenie, kursor i tło.
-
.slider-radio:checked + .slider-label: Zmienia tło kontrolera na czarne, gdy odpowiadające mu radio jest zaznaczone.
-
.slider-controls > a:hover, .slider-controls > a:focus, .slider-nav > div:target: Zmienia tło kontrolera na czarne przy najechaniu kursorem lub skoncentrowaniu na nim, a także przy wybraniu odpowiedniego celu (target) na stronie.
-
.slider: Stylizuje główny kontener slidera, ustawiając go jako kontener flex, ustawiając szerokość na 100% i ukrywając nadmiarowe elementy.
-
.slides: Stylizuje kontener dla slajdów, nadając mu ustawienia scroll-snap oraz ukrywając nadmiarowe elementy w poziomie i pionie.
-
.slide: Stylizuje pojedynczy slajd, nadając mu właściwości scroll-snap, szerokość, marginesy, tło i cień.
-
#tooltip .icon: Ta reguła stylizuje ikony tooltipów, ustawiając margines, kolor tła, kolor ikonki, zaokrąglenie i padding.
-
.icon:hover: Dodaje efekt powiększenia przy najechaniu kursorem na ikonkę.
-
.icon: Ustawia margines dla ikonek.
-
.product-grid1, .product-grid2: Stylizuje kontenery dla produktów, ustawiając kontener flex, odstępy i marginesy.
-
.product-item1: Stylizuje pojedynczy produkt, ustawiając border, padding, tekstowe centrowanie, szerokość, tło i pozycję.
-
.product-item1 img: Stylizuje obrazki produktów, ustawiając szerokość na 30px i zachowując proporcje.
-
span .price: Ustawia margines na prawo dla elementu span z klasą "price".
-
.price-rating: Stylizuje kontener dla cen i ocen produktów, ustawiając flexbox, odstępy i margines na górze.
-
.rating: Stylizuje kontener dla ocen produktów, ustawiając flexbox, odstępy i margines na prawo.
-
.details-button-x: Stylizuje przyciski "DETAILS", ustawiając margines, szerokość, tło, kolor tekstu, obramowanie i efekt przejścia.
-
.details-button-x:hover: Dodaje efekt podkreślenia i zmiany koloru tła po najechaniu kursorem na przycisk.
-
.h3: Stylizuje nagłówki h3, nadając im pogrubienie.
-
.price: Stylizuje ceny produktów, nadając im pogrubienie.
-
.product-item1 img: Stylizuje obrazki produktów, dostosowując szerokość do 100% i zachowując proporcje.
-
.overlay: Stylizuje overlay na slajdach, nadając mu pozycję absolutną, kolor tła, kolor tekstu, padding oraz centrowanie treści.
-
.slide-description: Stylizuje opisy slajdów, ustawiając pozycję absolutną, tło, kolor tekstu, padding, flexbox i inne właściwości.
-
.product-name, .price: Zmniejsza marginesy dla elementów o klasach "product-name" i "price".
-
.price: Nadaje pogrubienie cenom produktów.
Ten kod definiuje stylizację slidera obrazków na stronie internetowej, obejmując różne elementy i efekty, takie jak animacje, przyciski, kontrolery i wiele innych, aby stworzyć atrakcyjny i interaktywny slider.
Markup
<div class="slider">
<div class="slides">
<div id="slide-1" class="slide">
<img src="img/mainPage1.webp" alt="Lorem ipsum 1v2" loading="lazy" width="260" height="400">
<div class="slide-description">
<p class="product-name">Lorem Ipsum</p>
<p class="price">10$</p>
</div>
</div>
<div id="slide-2" class="slide">
<img src="img/mainPage2.webp" alt="Lorem ipsum 2v2" loading="lazy" width="260" height="400">
<div class="slide-description">
<p class="product-name">Lorem Ipsum</p>
<p class="price">10$</p>
</div>
</div>
<div id="slide-3" class="slide">
<img src="img/mainPage10.webp" alt="Lorem ipsum 3v2" loading="lazy" width="260" height="400">
<div class="slide-description">
<p class="product-name">Lorem Ipsum</p>
<p class="price">10$</p>
</div>
</div>
<div id="slide-4" class="slide">
<img src="img/mainPage11.webp" alt="Lorem ipsum 4v2" loading="lazy" width="260" height="400">
<div class="slide-description">
<p class="product-name">Lorem Ipsum</p>
<p class="price">10$</p>
</div>
</div>
<div id="slide-5" class="slide">
<img src="img/mainPage14.webp" alt="Lorem ipsum 5v2" loading="lazy" width="260" height="400">
<div class="slide-description">
<p class="product-name">Lorem Ipsum</p>
<p class="price">10$</p>
</div>
</div>
<div id="slide-6" class="slide">
<img src="img/mainPage13.webp" alt="Lorem ipsum 6v2" loading="lazy" width="260" height="400">
<div class="slide-description">
<p class="product-name">Lorem Ipsum</p>
<p class="price">10$</p>
</div>
</div>
<div id="slide-7" class="slide">
<img src="img/mainPage12.webp" alt="Lorem ipsum 7v2" loading="lazy" width="260" height="400">
<div class="slide-description">
<p class="product-name">Lorem Ipsum</p>
<p class="price">10$</p>
</div>
</div>
<div id="slide-8" class="slide">
<img src="img/mainPage8.webp" alt="Lorem ipsum 8v2" loading="lazy" width="260" height="400">
<div class="slide-description">
<p class="product-name">Lorem Ipsum</p>
<p class="price">10$</p>
</div>
</div>
<div id="slide-9" class="slide">
<img src="img/mainPage9.webp" alt="Lorem ipsum 9v2" loading="lazy" width="260" height="400">
<div class="slide-description">
<p class="product-name">Lorem Ipsum</p>
<p class="price">10$</p>
</div>
</div>
</div>
</div>
<div class="slider-controls">
<input type="radio" id="slide-radio-1v2" name="slide" class="slider-radio">
<label for="slide-radio-1v2" class="slider-label" onclick="window.location.href='#slide-1';"></label>
<input type="radio" id="slide-radio-2v2" name="slide" class="slider-radio">
<label for="slide-radio-2v2" class="slider-label" onclick="window.location.href='#slide-2';"></label>
<input type="radio" id="slide-radio-3v2" name="slide" class="slider-radio">
<label for="slide-radio-3v2" class="slider-label" onclick="window.location.href='#slide-3';"></label>
<input type="radio" id="slide-radio-4v2" name="slide" class="slider-radio">
<label for="slide-radio-4v2" class="slider-label" onclick="window.location.href='#slide-4';"></label>
<input type="radio" id="slide-radio-5v2" name="slide" class="slider-radio" checked>
<label for="slide-radio-5v2" class="slider-label" onclick="window.location.href='#slide-5';"></label>
<input type="radio" id="slide-radio-6v2" name="slide" class="slider-radio">
<label for="slide-radio-6v2" class="slider-label" onclick="window.location.href='#slide-6';"></label>
<input type="radio" id="slide-radio-7v2" name="slide" class="slider-radio">
<label for="slide-radio-7v2" class="slider-label" onclick="window.location.href='#slide-7';"></label>
<input type="radio" id="slide-radio-8v2" name="slide" class="slider-radio">
<label for="slide-radio-8v2" class="slider-label" onclick="window.location.href='#slide-8';"></label>
<input type="radio" id="slide-radio-9v2" name="slide" class="slider-radio">
<label for="slide-radio-9v2" class="slider-label" onclick="window.location.href='#slide-9';"></label>
</div>styleIndex.css, line 1998