9 #permalink PAY - sekcja płatności
Sekcja "Stylizacja sekcji płatności"
-
main: Element
<main>posiada właściwośćflex: 1, co sugeruje, że dostosowuje się do dostępnej przestrzeni flexbox na stronie. Marginesy na górze i na dole są wyzerowane, co oznacza brak dodatkowego odstępu. -
.shopping-cart: Kontener o klasie "shopping-cart" zajmuje 90% szerokości, ma białe tło, zaokrąglone rogi, cień i padding.
-
.button a: Linki w przyciskach "button" mają ustawiony kolor i usuwanie dekoracji tekstu.
-
.button a:hover: Zmienia kolor tekstu linków po najechaniu kursorem.
-
.button a:active: Określa styl linków po ich aktywacji (naciśnięciu).
-
.button a:visited: Stylizuje odwiedzone linki w przyciskach.
-
.title: Nagłówek o klasie "title" jest wyśrodkowany, ma rozmiar czcionki 24px i margines na dole. Po najechaniu kursorem jest skalowany.
-
.cart-items: Tabela o klasie "cart-items" jest stylizowana jako tabela zwykła, a jej komórki mają odpowiednie paddingi i obramowanie.
-
.cart-items th: Nagłówki tabeli mają białe tło.
-
.cart-total: Tekst o klasie "cart-total" jest wyśrodkowany, ma rozmiar czcionki 20px i margines na górze. Tekst wewnątrz elementu "cart-total" jest pogrubiony.
Sekcja "Stylizacja formularza płatności"
-
.credit-card-form: Formularz płatności o klasie "credit-card-form" ma białe tło, zaokrąglone rogi, cień, szerokość, marginesy i wybór czcionki.
-
.credit-card-form h2: Nagłówek o klasie "credit-card-form h2" ma kolor, margines na dole i jest wyśrodkowany.
-
.credit-card-form label: Etykiety dla pól formularza są stylizowane.
-
.credit-card-form input, .credit-card-form select, .credit-card-form button: Pola formularza, selecty i przyciski mają ustawienia dotyczące szerokości, paddingu, obramowania i zaokrąglonych rogów.
-
.credit-card-form button: Przyciski w formularzu mają tło niebieskie, biały tekst, efekt kursora i animację zmiany koloru tła po najechaniu kursorem.
Sekcja "Okno modalne po potwierdzeniu płatności"
-
#thankyou: Element o id "thankyou" jest ukryty, a po wywołaniu targetu jest wyświetlany na środku ekranu z efektem animacji fadeOut.
-
.thankyou-content: Zawartość elementu o klasie "thankyou-content" ma białe tło i zaokrąglone rogi.
-
.modal: Okno modalne o klasie "modal" jest ukryte, posiada tło z przezroczystością i jest wyśrodkowane na ekranie.
-
.modal-content: Zawartość okna modalnego ma białe tło, obramowanie i jest wyśrodkowana.
-
.close: Przycisk zamykania okna modalnego jest stylizowany, zmienia kolor po najechaniu kursorem.
Sekcja "Media Queries - Responsywność"
- Media queries (
@media (max-width: 800px)): Reguła media query dostosowuje stylizację do szerokości ekranu mniejszej lub równej 800px, zmieniając szerokość formularza płatności.
.
YOUR CART!
CREDIT CARD
Zamówiłeś produkt. Zajrzyj na email! Miłego dnia!
Markup
<main>
<section class="section contact" id="contact">
<h1 style="display:none;">.</h1>
<h2 style="text-align: center;">YOUR CART!</h2>
<div class="shopping-cart">
<div class="title">Shopping Cart</div>
<table class="cart-items">
<thead>
<tr>
<th>Product</th>
<th>Name</th>
<th>Quantity</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>-</td>
<td>-</td>
<td>
<button>-</button>
<input type="number" value="0" style="width: 50px; text-align: center;" disabled>
<button>+</button>
</td>
<td>$0.00</td>
</tr>
</tbody>
</table>
<div class="cart-total">
<span>Total: $0.00</span>
</div>
<a class="button" href="./ourProducts.html">Continue shopping</a>
</div>
<div class="credit-card-form">
<h2>CREDIT CARD</h2>
<form id="card-form" action="#thankyou">
<fieldset>
<legend>Card Details</legend>
<div class="infocard">
<img src="img/visa.webp" alt="Visa" height="50" width="50">
<img src="img/master.webp" alt="Mastercard" height="50" width="50">
</div>
<div class="form-group">
<label for="cardNumber">CARD NUMBER</label>
<input type="text" id="cardNumber" name="cardNumber" pattern="\d{4} \d{4} \d{4} \d{4}" placeholder="0000 0000 0000 0000" required>
</div>
<div class="form-group">
<label for="expiryMonth">EXPIRY DAY</label>
<select id="expiryMonth" name="expiryMonth">
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
<div class="form-group">
<label for="expiryYear">EXPIRY MONTH</label>
<select id="expiryYear" name="expiryYear">
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</div>
<div class="form-group">
<label for="cardHolder">CARDHOLDER NAME</label>
<input type="text" id="cardHolder" name="cardHolder" pattern="[A-Za-z\s]+" placeholder="JEAN O IMPUSM" required>
</div>
<div class="form-group">
<button type="submit">CONTINUE</button>
</div>
</fieldset>
</form>
</div>
</section>
<div id="thankyou">
<div class="thankyou-content">
<p>Zamówiłeś produkt. Zajrzyj na email! Miłego dnia!</p>
</div>
</div>
</main>stylePay.css, line 500