4 #permalink PRODUKTY - sekcja nasze produkty
Sekcja "Stylizacja sekcji produktów"
-
main: Element
<main>posiada właściwośćflex: 1, co sugeruje, że dostosowuje się do dostępnej przestrzeni flexbox na stronie. Posiada również marginesy na górze i na dole. -
.products label: Reguła stylizacji dotycząca etykiet radiowych w sekcji "products". Etykiety są dodatkowo ozdobione obramowaniem, wewnętrznym odstępem, zaokrąglonymi rogami i zmieniają kolor tła oraz czcionki po najechaniu kursorem (hover).
-
.products: Kontener dla całej sekcji produktów. Elementy wewnątrz są wyśrodkowane pionowo.
-
.products > div: Ten selektor stosuje stylizację dla div-ów wewnątrz sekcji produktów. Ogranicza szerokość do 90% dostępnej przestrzeni, a maksymalnie do 400px, a elementy są wyśrodkowane na stronie.
-
.products label: Ten selektor definiuje stylizację etykiet w sekcji "products". Mają one określoną szerokość, a tekst jest wyśrodkowany.
-
.products input[type="radio"] + label: Stylizacja etykiet, które są bezpośrednimi sąsiadami wybranych radio inputów. Dodaje odstęp między nimi.
-
.products input:checked + label: Stylizacja etykiet, które są powiązane z wybranymi radio inputami. Zmienia kolor tła i czcionki.
-
input[type="radio"]: Ukrywa standardowe radio inputy.
Sekcja "Stylizacja produktów i kategorii"
-
.product_women-main, .product_men-main, .product_kids-main: Klasy reprezentują kontenery dla produktów w różnych kategoriach (Women, Men, Kids). Są domyślnie ukryte (
display: none) i wyświetlane w zależności od wyboru kategorii poprzez radio inputy. -
.product_women, .product_men, .product_kids: Stylizacja pojedynczego produktu. Mają obramowanie, odstęp, tło, zaokrąglone rogi i cień. Szerokość jest obliczana, aby pomieścić 3 produkty w jednym rzędzie. Dodaje efekt cienia i animację przy hoverze.
-
.product_women img, .product_men img, .product_kids img: Stylizacja obrazków produktów. Mają określoną szerokość, a szerokość jest dostosowywana do maksymalnej szerokości dostępnej przestrzeni. Są wyśrodkowane na stronie i mają odstęp na dole.
-
.product_women h3, .product_men h3, .product_kids h3: Tytuły produktów mają margines, określoną czcionkę i kolor.
-
.product_women p, .product_men p, .product_kids p: Opisy produktów mają margines, określoną czcionkę i kolor.
-
.product_women a, .product_men a, .product_kids a: Przyciski "View Product" mają tło, kolor czcionki i inne właściwości przy hoverze.
Sekcja "Media Queries - Responsywność"
- Media queries (
@media): Są dostępne dwa media queries, które dostosowują stylizację dla różnych szerokości ekranu. W szczególności zmieniają szerokość produktów w zależności od szerokości ekranu.
.
.
Markup
<main>
<section class="products">
<h1 style="display:none;">.</h1>
<h2 style="display:none;">.</h2>
<input type="radio" id="all" name="category" checked>
<label for="all">All</label>
<input type="radio" id="men" name="category">
<label for="men">Men</label>
<input type="radio" id="women" name="category">
<label for="women">Women</label>
<input type="radio" id="kids" name="category">
<label for="kids">Kids</label>
<section class="product_men-main">
<div class="product_men">
<img src="img/product1.webp" alt="Men photo item1" loading="lazy" width="250" height="250">
<h3>Men product 1</h3>
<p>$10.00</p>
<a href="./productFirst.html">View Product</a>
</div>
<div class="product_men">
<img src="img/product2.webp" alt="Men photo item2" loading="lazy" width="250" height="250">
<h3>Men product 2</h3>
<p>$10.00</p>
<a href="./productFirst.html">View Product</a>
</div>
<div class="product_men">
<img src="img/product3.webp" alt="Men photo item3" loading="lazy" width="250" height="250">
<h3>Men product 3</h3>
<p>$10.00</p>
<a href="./productFirst.html">View Product</a>
</div>
<div class="product_men">
<img src="img/product4.webp" alt="Men photo item4" loading="lazy" width="250" height="250">
<h3>Men product 4</h3>
<p>$10.00</p>
<a href="./productFirst.html">View Product</a>
</div>
<div class="product_men">
<img src="img/product5.webp" alt="Men photo item5" loading="lazy" width="250" height="250">
<h3>Men product 5</h3>
<p>$10.00</p>
<a href="./productFirst.html">View Product</a>
</div>
<div class="product_men">
<img src="img/product6.webp" alt="Men photo item6" loading="lazy" width="250" height="250">
<h3>Men product 6</h3>
<p>$10.00</p>
<a href="./productFirst.html">View Product</a>
</div>
</section>
<section class="product_women-main">
<div class="product_women">
<img src="img/product7.webp" alt="Women photo item1" loading="lazy" width="250" height="250">
<h3>Women product 1</h3>
<p>$99.00</p>
<a href="./productSecond.html">View Product</a>
</div>
<div class="product_women">
<img src="img/product8.webp" alt="Women photo item2" loading="lazy" width="250" height="250">
<h3>Women product 2</h3>
<p>$99.00</p>
<a href="./productSecond.html">View Product</a>
</div>
<div class="product_women">
<img src="img/product9.webp" alt="Women photo item3" loading="lazy" width="250" height="250">
<h3>Women product 3</h3>
<p>$99.00</p>
<a href="./productSecond.html">View Product</a>
</div>
<div class="product_women">
<img src="img/product10.webp" alt="Women photo item4" loading="lazy" width="250" height="250">
<h3>Women product 4</h3>
<p>$99.00</p>
<a href="./productSecond.html">View Product</a>
</div>
<div class="product_women">
<img src="img/product11.webp" alt="Women photo item5" loading="lazy" width="250" height="250">
<h3>Women product 5</h3>
<p>$99.00</p>
<a href="./productSecond.html">View Product</a>
</div>
<div class="product_women">
<img src="img/product12.webp" alt="Women photo item6" loading="lazy" width="250" height="250">
<h3>Women product 6</h3>
<p>$99.00</p>
<a href="./productSecond.html">View Product</a>
</div>
</section>
<section class="product_kids-main">
<div class="product_kids">
<img src="img/product4.webp" alt="Kids photo item1" loading="lazy" width="250" height="250">
<h3>Kids product 1</h3>
<p>$30.00</p>
<a href="./productThird.html">View Product</a>
</div>
<div class="product_kids">
<img src="img/product14.webp" alt="Kids photo item2" loading="lazy" width="250" height="250">
<h3>Kids product 2</h3>
<p>$30.00</p>
<a href="./productThird.html">View Product</a>
</div>
<div class="product_kids">
<img src="img/product15.webp" alt="Kids photo item3" loading="lazy" width="250" height="250">
<h3>Kids product 3</h3>
<p>$30.00</p>
<a href="./productThird.html">View Product</a>
</div>
<div class="product_kids">
<img src="img/product16.webp" alt="Kids photo item4" loading="lazy" width="250" height="250">
<h3>Kids product 4</h3>
<p>$30.00</p>
<a href="./productThird.html">View Product</a>
</div>
<div class="product_kids">
<img src="img/product8.webp" alt="Kids photo item5" loading="lazy" width="250" height="250">
<h3>Kids product 5</h3>
<p>$30.00</p>
<a href="./productThird.html">View Product</a>
</div>
<div class="product_kids">
<img src="img/product18.webp" alt="Kids photo item6" loading="lazy" width="250" height="250">
<h3>Kids product 6</h3>
<p>$30.00</p>
<a href="./productThird.html">View Product</a>
</div>
</section>
</section>
</main>styleOurProduct.css, line 452