5 #permalink PRODUKT 1/2/3 - sekcja produktów
Główna sekcja:
-
main: Określa główny kontener sekcji, ustala elastyczność (flex) na 1 oraz marginesy na górze i na dole.
-
.products label: Styluje etykiety (label) wyboru kategorii produktów, nadając im obramowanie, tło, i inne właściwości.
-
.products: Definiuje kontener na produkty, używa flexboxa do wyśrodkowania i ustawienia kierunku kolumny.
-
.products > div: Określa szerokość i maksymalną szerokość kontenera na produkty, automatyczne wyśrodkowanie.
-
.products input[type="radio"] + label: Styluje etykiety label, które następują po wyborze radio input.
-
.products input:checked + label: Styluje zaznaczoną etykietę, zmieniając tło i kolor tekstu.
-
.product_women-main, .product_men-main, .product_kids-main: Ukrywa główne kontenery produktów dla różnych kategorii.
-
.product_women, .product_men, .product_kids: Definiuje wygląd produktów, ich marginesy, tło i inne właściwości.
-
.product_women:hover, .product_men:hover, .product_kids:hover: Styluje efekt hover dla produktów, dodając cień i animację.
-
.product_women img, .product_men img, .product_kids img: Dostosowuje wygląd obrazków produktów.
-
.product_women h3, .product_men h3, .product_kids h3: Styluje tytuły produktów.
-
.product_women p, .product_men p, .product_kid p: Styluje opisy produktów.
-
.product_women a, .product_men a, .product_kids a: Styluje przyciski "View Product".
-
Media queries są używane do dostosowania wyglądu na różnych szerokościach ekranu.
Sekcja "styleProductFirst.css - sekcja produktów":
Ta sekcja zawiera style CSS dla innej strony internetowej, która prezentuje produkty. Oto główne cechy tej sekcji:
-
main: Określa główny kontener sekcji, ustala elastyczność (flex) na 1 oraz marginesy na górze i na dole.
-
Stylowanie obrazków, logo, przycisków oraz elementów formularza.
-
Wykorzystanie efektów hover do animowania niektórych elementów.
-
Media queries dostosowują wygląd na różnych szerokościach ekranu.
Sekcja "Produkty 1 / 2 / 3 - sekcja produktów":
Ta sekcja zawiera definicje stylów CSS dla kolejnej strony internetowej, która prezentuje produkty w koszyku zakupowym oraz formularz płatności. Oto główne cechy tej sekcji:
-
main: Określa główny kontener sekcji, ustala elastyczność (flex) na 1 oraz marginesy na górze i na dole.
-
Stylowanie koszyka zakupowego, tabeli produktów, i formularza płatności.
-
Media queries dostosowują wygląd na różnych szerokościach ekranu.
Ogólnie rzecz biorąc, te style CSS definiują wygląd i układ trzech różnych sekcji na stronie internetowej, każda z nich służy do prezentacji różnych rodzajów produktów lub informacji.
.
Lorem
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
| Exercise | Description | Duration | Intensity |
|---|---|---|---|
| Lorem ipsum | Lorem ipsum Lorem ipsum | 30 min | Lorem |
| Lorem ipsum | Lorem ipsum Lorem ipsum | 30 min | Lorem |
| Lorem ipsum | Lorem ipsum Lorem ipsum | 30 min | Lorem |
| Lorem ipsum | Lorem ipsum Lorem ipsum | 30 min | Lorem |
| Lorem ipsum | Lorem ipsum Lorem ipsum | 30 min | Lorem |
| Lorem ipsum | Lorem ipsum Lorem ipsum | 30 min | Lorem |
| Lorem ipsum | Lorem ipsum Lorem ipsum | 30 min | Lorem |
| Lorem ipsum | Lorem ipsum Lorem ipsum | 30 min | Lorem |
| Lorem ipsum | Lorem ipsum Lorem ipsum | 30 min | Lorem |
| Lorem ipsum | Lorem ipsum Lorem ipsum | 30 min | Lorem |
Markup
<main>
<section class="section premium-package" id="premium">
<h1 style="display:none;">.</h1>
<div class="premium-package__container">
<h2 class="section__heading premium-package__text">Lorem</h2>
<div class="fotos">
<img src="img/product19.webp" alt="Image product1" width="200" height="200">
<img src="img/product4.webp" alt="Image product2" width="200" height="200">
<img src="img/product20.webp" alt="Image product3" width="200" height="200">
</div>
<div class="premium-package__box">
<div class="premium-package__item">
<i class="premium-package__icon fas fa-dumbbell"></i>
<h3 class="premium-package__title">Lorem ipsum</h3>
<p class="premium-package__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="premium-package__item">
<i class="premium-package__icon fas fa-running"></i>
<h3 class="premium-package__title">Lorem ipsum</h3>
<p class="premium-package__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="premium-package__item">
<i class="premium-package__icon fas fa-drumstick-bite"></i>
<h3 class="premium-package__title">Lorem ipsum</h3>
<p class="premium-package__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="premium-package__item">
<i class="premium-package__icon fas fa-swimmer"></i>
<h3 class="premium-package__title">Lorem ipsum</h3>
<p class="premium-package__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<div id="przycisk">
<a href="./payFirstProduct.html"><img src="img/cart2.webp" alt="cart" width="100" height="100">
<h2>DODAJ DO KOSZYKA!</h2>
</a>
</div>
<div class="tabelka">
<table class="premium-table">
<thead>
<tr>
<th>Exercise</th>
<th>Description</th>
<th>Duration</th>
<th>Intensity</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum Lorem ipsum</td>
<td>30 min</td>
<td>Lorem</td>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum Lorem ipsum</td>
<td>30 min</td>
<td>Lorem</td>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum Lorem ipsum</td>
<td>30 min</td>
<td>Lorem</td>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum Lorem ipsum</td>
<td>30 min</td>
<td>Lorem</td>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum Lorem ipsum</td>
<td>30 min</td>
<td>Lorem</td>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum Lorem ipsum</td>
<td>30 min</td>
<td>Lorem</td>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum Lorem ipsum</td>
<td>30 min</td>
<td>Lorem</td>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum Lorem ipsum</td>
<td>30 min</td>
<td>Lorem</td>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum Lorem ipsum</td>
<td>30 min</td>
<td>Lorem</td>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum Lorem ipsum</td>
<td>30 min</td>
<td>Lorem</td>
</tr>
</tbody>
</table>
</div>
</section>
</main>styleProductFirst.css, line 421