1.7 #permalink HOME OFERTA/SERWIS - sekcja ofert
-
.offer: Stylizacja sekcji oferty, która określa tło, font oraz marginesy, a także wyśrodkowuje zawartość. Nadmiarowy tekst jest ukrywany.
-
.offer__body: Stylizacja elementu zawierającego treść oferty. Ustawia wygląd elementu, centruje zawartość i ukrywa nadmiarowy tekst.
-
.offer__content: Stylizacja kontenera treści oferty. Określa wygląd fontu, centruje zawartość i ustala odstępy między elementami.
-
.offer__heading: Stylizacja nagłówka oferty. Określa wygląd fontu, rozmiar, wagę, kolor tła i kolor tekstu.
-
.offer__title: Stylizacja tytułu oferty. Określa wygląd fontu, rozmiar, wagę, kolor tła i kolor tekstu.
-
.offer__text: Stylizacja tekstu oferty. Określa maksymalną szerokość, margines na dole, wygląd fontu, kolor tła i kolor tekstu.
-
.offer__btn: Stylizacja przycisku oferty. Definiuje wygląd tła, zaokrąglenie narożników, kolor tekstu i kursor myszki.
-
.offer__img: Stylizacja obrazka w ofercie. Określa szerokość, wysokość, maksymalną szerokość, marginesy, animację oraz punkt transformacji.
-
.service: Stylizacja sekcji usług, która ustala padding i odstępy między elementami.
-
.service__content: Stylizacja zawartości sekcji usług. Wyśrodkowuje zawartość i definiuje odstępy między elementami.
-
.service__box: Stylizacja pojedynczego bloku usługi. Ustawia wygląd fontu, marginesy oraz odstępy między elementami.
-
.service__box img: Stylizacja obrazka w bloku usługi. Określa szerokość i wysokość obrazka.
-
.service__title: Stylizacja tytułu usługi. Określa wygląd fontu.
-
.service__truck: Stylizacja ikony samochodu ciężarowego w usłudze. Ustala margines z prawej strony.
-
.load-more-container: Stylizacja kontenera przycisku "Load More". Określa wygląd oraz marginesy.
-
.load-more-btn: Stylizacja przycisku "Load More". Definiuje wygląd tła, zaokrąglenie narożników, kolor tekstu i efekt transformacji podczas najechania myszką.
-
.newsletter-signup-section: Stylizacja sekcji z formularzem subskrypcji newslettera. Wyśrodkowuje zawartość i ustala marginesy.
-
.newsletter-signup-container: Stylizacja kontenera formularza subskrypcji.
-
.newsletter-content: Stylizacja treści formularza subskrypcji. Ustala wygląd tekstu.
-
.newsletter-title: Stylizacja tytułu formularza subskrypcji. Określa rozmiar czcionki i marginesy.
-
.newsletter-description: Stylizacja opisu formularza subskrypcji. Określa margines na dole.
-
.newsletter-form: Stylizacja formularza subskrypcji. Ustala wygląd i marginesy.
-
.newsletter-input: Stylizacja pola wprowadzania danych w formularzu subskrypcji. Określa padding, szerokość, obramowanie i kolor tła.
-
.newsletter-submit-btn: Stylizacja przycisku wysyłania formularza subskrypcji. Definiuje wygląd tła, obramowanie, kursor myszki i rozmiar obrazka.
-
.load-more-btn:hover: Stylizacja przycisku "Load More" podczas najechania myszką. Zmienia kolor tła i dodaje podkreślenie.
-
.load-more-btn a: Dodatkowe style dla przycisku "Load More". Zmienia kolor tekstu i efekt transformacji podczas najechania myszką.
Podsumowując, powyższe style są używane do stylizacji różnych sekcji na stronie internetowej, takich jak oferta, usługi, przyciski "Load More" oraz formularz subskrypcji newslettera.
.
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="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="./product.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 3127