1.6 #permalink HOME PRODUCTS - sekcja produktów
-
.product-grid: Kontener produktów z odstępem 15 pikseli po lewej stronie. Elementy wewnątrz są układane w układzie flex, owijane i oddzielane odstępem 20 pikseli.
-
.product-image img: Szerokość obrazków produktów ograniczona do 300 pikseli.
-
.product-item: Element pojedynczego produktu z elastycznym flex-basis obliczanym na 50% szerokości, marginesem 20 pikseli z prawej strony, tłem o kolorze var(--white-color), marginesami 10 pikseli po lewej i prawej stronie, cieniem i obramowaniem.
-
.product-item img: Obrazki wewnątrz elementów produktów z marginesem 10 pikseli, szerokością maksymalną 100% i wysokością 300 pikseli.
-
.product-description: Treść opisu produktu z wewnętrznym marginesem o wysokości 10 pikseli.
-
.product-content: Zawartość produktu z elastycznym flex-basis na 50%, lewym wewnętrznym marginesem 20 pikseli i wyrównaniem do lewej strony.
-
.product-content h3: Nagłówek elementu produktu z marginesem 5 pikseli po prawej stronie.
-
.details-button: Przycisk "Details" z marginesem 5 pikseli po prawej stronie, szerokością 200 pikseli, wyśrodkowany, z różnymi stylami, takimi jak obramowanie, tło i kolor tekstu. Po najechaniu kursorem zmienia się tło, kolor tekstu i tekst jest podkreślany.
-
.section__heading, .about-us__text, .about-us__img: Elementy z animacją transformacji (skalowania) po najechaniu kursorem.
-
.section__heading: Nagłówek sekcji z określonym rozmiarem czcionki, kolorem, marginesami i animacją transformacji.
-
.about-us__textbox: Kontener dla tekstu z maksymalną szerokością 80vw i marginesami po lewej i prawej stronie.
-
.about-us__text: Tekst z właściwościami takimi jak justyfikacja, waga czcionki, rozmiar, linia, kolor i animacja transformacji.
-
.about-us__link: Linki w tekście ze stylem koloru i animacją transformacji.
-
.about-us__box: Kontener dla sekcji "O nas" z różnymi stylami i animacją transformacji.
-
.about-us__img: Obrazki w sekcji "O nas" z określonymi właściwościami, takimi jak szerokość, maksymalna szerokość, elastyczność i zaokrąglenie rogów.
-
.modal: Okno modalne ukrywane domyślnie, pozycja stała, z indeksem z przodu i tłem o kolorze rgba.
-
.modal-content: Zawartość okna modalnego z określonym tłem, marginesami, obramowaniem i szerokością.
-
.close: Przycisk zamykania okna modalnego z określonym kolorem, rozmiarem i grubością czcionki.
-
#modalCheck:checked ~ .modal: Wyświetla okno modalne i stosuje animację po zaznaczeniu odpowiedniego elementu formularza.
-
.product-item4: Elementy produktów o klasie "product-item4" z różnymi właściwościami, takimi jak pozycja, szerokość, wysokość i marginesy.
-
.product-item4 img: Obrazki wewnątrz elementów produktów o klasie "product-item4" z określonymi właściwościami.
-
.info-box: Skrzynka z informacjami o produkcie z różnymi właściwościami, takimi jak pozycja, szerokość, tło i cień.
-
.info-box h2: Nagłówek skrzynki z informacjami z marginesem dolnym.
-
.price2, .old-price: Ceny produktów z określonymi stylami, takimi jak grubość czcionki i dekoracje tekstowe.
-
.details-button2: Przyciski "Details" w innej sekcji z różnymi stylami, takimi jak tło i kolor tekstu.
Media Queries:
Kod zawiera także media queries, które dostosow
ują układ strony dla ekranów o szerokości poniżej 768px i 650px. Dla mniejszych ekranów, elementy są dostosowywane, marginesy, szerokości i inne właściwości są modyfikowane, aby strona była responsywna.
Struktura HTML:
Kod HTML zawiera sekcje z elementami o klasach "product-grid1" i "product-grid2", które reprezentują różne produkty z obrazkami, nagłówkami i cenami.
Lorem
Lorem
Lorem
Lorem
Lorem
Lorem
Markup
Ogólnie rzecz biorąc, ten kod HTML i CSS jest używany do wyświetlania produktów na stronie internetowej w formie siatki, z odpowiednimi stylami i animacjami. Jest również odpowiednio dostosowany do różnych rozmiarów ekranów dzięki media queries.
<div class="product-grid1">
<div class="product-item1">
<img src="img/gallery9.webp" alt="LoremIpsum" loading="lazy" width="200" height="200">
<div class="overlay">
<div class="text">
<h3>Lorem</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</p>
<a href="./product.html" class="details-button-x">VIEW ALL</a>
</div>
</div>
</div>
<div class="product-item1">
<img src="img/gallery12.webp" alt="Loremer" loading="lazy" width="200" height="200">
<h3>Lorem</h3>
<div class="price-rating">
<span class="price">30$</span>
<span class="rating"><img src="img/gwiazda_zolta.svg" alt="Promocja1" loading="lazy" width="30" height="30">
<img src="img/gwiazda_zolta.svg" alt="Promocja2" loading="lazy" width="30" height="30">
<img src="img/gwiazda_zolta.svg" alt="Promocja3" loading="lazy" width="30" height="30">
<img src="img/gwiazda_zolta.svg" alt="Promocja4" loading="lazy" width="30" height="30">
<img src="img/gwiazda_szara.svg" alt="Promocja5" loading="lazy" width="30" height="30">
</span>
</div>
</div>
<div class="product-item1">
<img src="img/gallery11.webp" alt="Loremer2" loading="lazy" width="200" height="200">
<h3>Lorem</h3>
<div class="price-rating">
<span class="price">30$</span>
<span class="rating"><img src="img/gwiazda_zolta.svg" alt="Promocja6" loading="lazy" width="30" height="30">
<img src="img/gwiazda_zolta.svg" alt="Promocja7" loading="lazy" width="30" height="30">
<img src="img/gwiazda_zolta.svg" alt="Promocja8" loading="lazy" width="30" height="30">
<img src="img/gwiazda_zolta.svg" alt="Promocja9" loading="lazy" width="30" height="30">
<img src="img/gwiazda_szara.svg" alt="Promocja10" loading="lazy" width="30" height="30">
</span>
</div>
</div>
<div class="product-item1">
<img src="img/gallery10.webp" alt="Loremer3" loading="lazy" width="200" height="200">
<h3>Lorem</h3>
<div class="price-rating">
<span class="price">30$</span>
<span class="rating"><img src="img/gwiazda_zolta.svg" alt="Promocja11" loading="lazy" width="30" height="30">
<img src="img/gwiazda_zolta.svg" alt="Promocja12" loading="lazy" width="30" height="30">
<img src="img/gwiazda_zolta.svg" alt="Promocja13" loading="lazy" width="30" height="30">
<img src="img/gwiazda_zolta.svg" alt="Promocja14" loading="lazy" width="30" height="30">
<img src="img/gwiazda_szara.svg" alt="Promocja15" loading="lazy" width="30" height="30">
</span>
</div>
</div>
</div>
<div class="product-grid2">
<div class="product-item1">
<img src="img/abootUs4.webp" alt="Loremer4" loading="lazy" width="200" height="200">
<h3>Lorem</h3>
<div class="price-rating">
<span class="price">30$</span>
<span class="rating"><img src="img/gwiazda_zolta.svg" alt="Promocja16" loading="lazy" width="30" height="30">
<img src="img/gwiazda_zolta.svg" alt="Promocja17" loading="lazy" width="30" height="30">
<img src="img/gwiazda_zolta.svg" alt="Promocja18" loading="lazy" width="30" height="30">
<img src="img/gwiazda_zolta.svg" alt="Promocja19" loading="lazy" width="30" height="30">
<img src="img/gwiazda_szara.svg" alt="Promocja20" loading="lazy" width="30" height="30">
</span>
</div>
</div>
<div class="product-item1">
<img src="img/abootUs3.webp" alt="Loremer5" loading="lazy" width="200" height="200">
<h3>Lorem</h3>
<div class="price-rating">
<span class="price">30$</span>
<span class="rating"><img src="img/gwiazda_zolta.svg" alt="Promocja21" loading="lazy" width="30" height="30">
<img src="img/gwiazda_zolta.svg" alt="Promocja22" loading="lazy" width="30" height="30">
<img src="img/gwiazda_zolta.svg" alt="Promocja23" loading="lazy" width="30" height="30">
<img src="img/gwiazda_zolta.svg" alt="Promocja24" loading="lazy" width="30" height="30">
<img src="img/gwiazda_szara.svg" alt="Promocja25" loading="lazy" width="30" height="30">
</span>
</div>
</div>
<div class="product-item1">
<img src="img/abootUs2.webp" alt="Loremer6" loading="lazy" width="200" height="200">
<h3>Lorem</h3>
<div class="price-rating">
<span class="price">30$</span>
<span class="rating"><img src="img/gwiazda_zolta.svg" alt="Promocja26" loading="lazy" width="30" height="30">
<img src="img/gwiazda_zolta.svg" alt="Promocja27" loading="lazy" width="30" height="30">
<img src="img/gwiazda_zolta.svg" alt="Promocja28" loading="lazy" width="30" height="30">
<img src="img/gwiazda_zolta.svg" alt="Promocja29" loading="lazy" width="30" height="30">
<img src="img/gwiazda_szara.svg" alt="Promocja30" loading="lazy" width="30" height="30">
</span>
</div>
</div>
<div class="product-item1">
<img src="img/abootUs1.webp" alt="Loremer7" loading="lazy" width="200" height="200">
<div class="overlay">
<div class="text">
<h3>Lorem</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</p>
<a href="./product.html" class="details-button-x">VIEW ALL</a>
</div>
</div>
</div>
</div>styleIndex.css, line 2768