1.4 #permalink HOME PRODUCTS - sekcja produktów
Styl ogólny: Oczywiście, oto opis z pogrubionymi nazwami klas i id:
-
.product-grid: Jest to kontener produktów. Ma ustawione odstępy od lewej strony o szerokości 15 pikseli. Elementy w tym kontenerze są wyświetlane w układzie flex, owijane w przypadku braku miejsca i oddzielane odstępem o szerokości 20 pikseli.
-
.product-image img: Ustala szerokość obrazków produktów na 300 pikseli.
-
.product-item: Każdy element produktu ma elastyczny rozmiar (flex-basis), obliczany na podstawie 50% szerokości, z odstępem od prawej strony o szerokości 20 pikseli. Elementy te są wyświetlane w układzie flex, wyrównane w pionie, z tłem o kolorze var(--white-color), wyrównane do lewej i prawej strony o marginesie 10 pikseli, z cieniem i obramowaniem.
-
.product-item img: Obrazki wewnątrz elementów produktów mają margines 10 pikseli, szerokość maksymalną 100% i wysokość 300 pikseli.
-
.product-description: Treść opisu produktu ma wewnętrzny margines o wysokości 10 pikseli.
-
.product-content: Zawartość produktu zajmuje elastyczne 50% szerokości, ma lewy wewnętrzny margines o szerokości 20 pikseli i jest wyrównana do lewej strony.
-
.product-content h3: Nagłówek elementu produktu ma margines prawej strony o szerokości 5 pikseli.
-
.details-button: Przycisk "Details" jest stylizowany z marginesem na prawo o szerokości 5 pikseli, szerokością 200 pikseli, wyśrodkowany i ma różne style, takie jak obramowanie, tło i kolor tekstu. Po najechaniu kursorem na przycisk zmienia się tło, kolor tekstu i tekst jest podkreślany.
-
.section__heading, .about-us__text, .about-us__img: Elementy te mają animację transformacji (skalowania) przy najechaniu kursorem.
-
.section__heading: Nagłówek sekcji ma określony rozmiar czcionki, kolor, marginesy i animację transformacji.
-
.about-us__textbox: Kontener dla tekstu ma maksymalną szerokość 80vw i marginesy po lewej i prawej stronie.
-
.about-us__text: Tekst ma właściwości takie jak justyfikacja, waga czcionki, rozmiar, linia, kolor i animację transformacji.
-
.about-us__link: Linki w tekście są stylizowane z kolorem i animacją transformacji.
-
.about-us__box: Kontener dla sekcji "O nas" ma różne style i animację transformacji.
-
.about-us__img: Obrazki w sekcji "O nas" mają określone właściwości, takie jak szerokość, maksymalna szerokość, elastyczność i zaokrąglenie rogów.
-
.modal: Okno modalne jest ukrywane domyślnie, ustawiane jako pozycja stała, z indeksem z przodu i tłem o kolorze rgba.
-
.modal-content: Zawartość okna modalnego ma określony kolor tła, marginesy, obramowanie i szerokość.
-
.close: Przycisk zamykania okna modalnego ma ustawiony kolor, wielkość i grubość 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" mają różne właściwości, takie jak pozycja, szerokość, wysokość i marginesy.
-
.product-item4 img: Obrazki wewnątrz elementów produktów o klasie "product-item4" mają określone właściwości.
-
.info-box: Skrzynka z informacjami o produkcie ma różne właściwości, takie jak pozycja, szerokość, tło i cień.
-
.info-box h2: Nagłówek skrzynki z informacjami ma margines dolny.
-
.price2, .old-price: Ceny produktów mają określone style, takie jak grubość czcionki i dekoracje tekstowe.
-
.details-button2: Przyciski "Details" w innej sekcji mają różne style, takie jak tło i kolor tekstu.
Media Queries:
- Kod zawiera także media queries, które dostosowują 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.
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.
Lorem
Lorem
Lorem
Lorem
Lorem
Lorem
Markup
<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="./ourProducts.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="./ourProducts.html" class="details-button-x">VIEW ALL</a>
</div>
</div>
</div>
</div>styleIndex.css, line 1508