1.5 #permalink HOME OFERTA/SERWIS - sekcja ofert
Główna sekcja stopki:
-
.collection: Pełna szerokość, tło koloru var(--fifth-color), biały kolor tekstu, wyśrodkowany tekst poziomo, odstęp na górze 1 rem.
-
.collection__men, .collection__women, .collection__kids: Trzy różne podsekcje reprezentujące kolekcje produktów.
-
.collection__heading: Stylizacja nagłówka sekcji kolekcji.
-
.collection__shadow: Dodanie cienia do obrazka.
-
.collection__img: Dostosowanie wyglądu obrazka produktu.
-
.collection__btn: Stylizacja przycisku "explore more".
Sekcja oferty:
-
.offer: Stylizacja sekcji oferty.
-
.offer__img: Dostosowanie wyglądu logo oferty specjalnej.
-
.offer__content.container: Kontener zawierający treść oferty specjalnej.
-
.offer__heading: Stylizacja nagłówka oferty specjalnej.
-
.offer__title: Stylizacja tytułu oferty specjalnej.
-
.offer__text: Stylizacja tekstu opisującego ofertę specjalną.
-
.details-button: Stylizacja przycisku "VIEW ALL".
Sekcja serwisu:
-
.service: Stylizacja sekcji serwisu.
-
.service__content.container: Kontener zawierający treść sekcji serwisu.
-
.service__box: Pojedyncza usługa w sekcji.
-
.service__img: Dostosowanie wyglądu obrazka reprezentującego usługę.
-
.service__text: Stylizacja tekstu opisującego usługę.
-
.service__title: Stylizacja nagłówka usługi.
-
.service__describe: Stylizacja opisu usługi.
Przycisk "Load More Products":
-
.load-more-container: Kontener zawierający przycisk.
-
.load-more-btn: Stylizacja przycisku "LOAD MORE PRODUCTS".
Sekcja z formularzem subskrypcji newslettera:
-
.newsletter-signup-section: Stylizacja sekcji z formularzem subskrypcji newslettera.
-
.newsletter-signup-container: Kontener zawierający treść sekcji subskrypcji newslettera.
-
.newsletter-content: Stylizacja treści sekcji subskrypcji newslettera.
-
.newsletter-title: Stylizacja nagłówka sekcji subskrypcji newslettera.
-
.newsletter-description: Stylizacja opisu sekcji subskrypcji newslettera.
-
.newsletter-form: Stylizacja formularza subskrypcji newslettera.
-
.newsletter-input: Stylizacja pola do wprowadzenia adresu e-mail.
-
.newsletter-submit-btn: Stylizacja przycisku do wysyłania formularza.
-
.newsletter-submit-btn img: Dostosowanie wyglądu ikony na przycisku.
Ten opis przedstawia działanie stylów CSS dla różnych elementów na stronie internetowej, korzystając z nazw klas i id.
.
SPECIAL OFFER
UPTO 70% OFF
Upgrade your footwear collection with our 70% off special deal! LOREM IPSUM!
VIEW ALL
FREE SHIPING
All Lorem ipsum $150
QUICK PAYMENT
100% Lorem ipsum
FREE RETURNS
Lorem ipsum 30 days
Markup
<section class="collection">
<div class="collection__men">
<h3 class="collection__heading">Product 1 Collection</h3>
<div class="collection__shadow">
<img src="img/product1.webp" alt="product 1" class="collection__img" loading="lazy" width="150" height="150">
</div>
<a class="collection__btn" href="./ourProducts.html">explore more</a>
</div>
<div class="collection__women">
<h3 class="collection__heading">Product 2 Collection</h3>
<div class="collection__shadow">
<img src="img/product7.webp" alt="product 2" class="collection__img" loading="lazy" width="150" height="150">
</div>
<a class="collection__btn" href="./ourProducts.html">explore more</a>
</div>
<div class="collection__kids">
<h3 class="collection__heading">Product 3 Collection</h3>
<div class="collection__shadow">
<img src="img/product3.webp" alt="product 3" class="collection__img" loading="lazy" width="150" height="150">
</div>
<a class="collection__btn" href="./ourProducts.html">explore more</a>
</div>
</section>
<section class="offer">
<h2 style="display:none;">.</h2>
<div class="offer__body">
<img src="img/logo1transparent.webp" alt="LOGOv2" class="offer__img" loading="lazy" width="300" height="300">
<div class="offer__content container">
<p class="offer__heading">SPECIAL OFFER</p>
<p class="offer__title">UPTO 70% OFF</p>
<p class="offer__text">
Upgrade your footwear collection with our 70% off special deal!
LOREM IPSUM!
</p>
<a href="./ourProducts.html" class="details-button">VIEW ALL</a>
</div>
</div>
</section>
<section class="service">
<div class="service__content container">
<div class="service__box">
<img src="img/pay1.webp" alt="pay1" loading="lazy" width="150" height="150">
<div class="service__text">
<h4 class="service__title">FREE SHIPING</h4>
<p class="service__describe">All Lorem ipsum $150</p>
</div>
</div>
<div class="service__box">
<img src="img/pay2.webp" alt="pay2" loading="lazy" width="150" height="150">
<div class="service__text">
<h4 class="service__title">QUICK PAYMENT</h4>
<p class="service__describe">100% Lorem ipsum </p>
</div>
</div>
<div class="service__box">
<img src="img/pay1.webp" alt="pay3" loading="lazy" width="150" height="150">
<div class="service__text">
<h4 class="service__title">FREE RETURNS</h4>
<p class="service__describe">Lorem ipsum 30 days</p>
</div>
</div>
</div>
</section>
<div class="load-more-container">
<a href="./gallery.html" class="load-more-btn">LOAD MORE PRODUCTS</a>
</div>
<div class="newsletter-signup-section">
<div class="newsletter-signup-container">
<div class="newsletter-content">
<h2 class="newsletter-title">SIGN UP FOR THE NEWSLETTER</h2>
<p class="newsletter-description">Subscribe for the latest stories and promotions</p>
</div>
<form class="newsletter-form">
<input type="email" class="newsletter-input" placeholder="Enter your email address" required>
<button type="submit" class="newsletter-submit-btn">
<img src="img/phone.svg" alt="Send" loading="lazy" width="30" height="30">
</button>
</form>
</div>
</div>styleIndex.css, line 2337