6 #permalink CONTACT - sekcja kontaktowa
Kod HTML:
-
Główny kontener strony:
<main> -
Kontener zawierający przycisk o ID "button" (ukryty):
<div id="container" class="container"> -
Sekcja kontaktowa o klasie "section" i ID "contact":
<section class="section contact" id="contact"> -
Nagłówek
<h1>o ukrytym stylu, zawierający tylko kropkę (nie widoczny):<h1 style="display:none;">.</h1> -
Formularz o klasie "form" z akcją przekierowania do "#thankyou":
<form class="form" action="#thankyou"> -
Nagłówek
<h2>z tytułem "CONTACT US":<h2>CONTACT US</h2> -
Pole tekstowe do wprowadzenia imienia, z atrybutami placeholder, title i required:
<p><input type="text" name="name" placeholder="Write your name here..." title="Please fill out this field." required></p> -
Pole tekstowe do wprowadzenia adresu e-mail, z atrybutami placeholder, title i required:
<p><input type="email" name="email" placeholder="Let us know how to contact you back..." title="Please fill out this field." required></p> -
Pole wyboru daty urodzenia, z atrybutami title i required:
<p><input type="date" name="dob" title="Please fill out this field." required></p> -
Pole tekstowe do wprowadzenia numeru telefonu, z atrybutami placeholder, pattern, title i required:
<p><input type="tel" name="phone" placeholder="Your phone number..." pattern="[0-9]{3}-[0-9]{3}-[0-9]{3}" title="A phone number should be 123-456-789" required></p> -
Pole tekstowe do wprowadzenia wiadomości, z atrybutami placeholder, title, required i liczbą wierszy (rows):
<p><textarea name="message" placeholder="What would you like to tell us..." title="Please fill out this field." required rows="5"></textarea></p> -
Przycisk do wysyłania wiadomości:
<button type="submit">Send message</button> -
Kontener z danymi kontaktowymi, zawierający numer telefonu i adres e-mail:
<div> -
Numer telefonu:
<span class="phone"></span> 123 456 789 -
Adres e-mail:
<span class="contakt"></span> contact@company.com -
Kontener z informacją podziękowania, domyślnie ukryty:
<div id="thankyou"> -
Zawartość kontenera z informacją podziękowania:
<div class="thankyou-content"> -
Tekst podziękowania:
<p>Udało ci się wysłać wiadomość. Miłego dnia!</p>
Kod CSS:
-
Styl dla nagłówka sekcji:
.section__heading- Rozmiar czcionki wynosi 2rem, kolor czerwony (var(--red-color)), margines dolny 2rem. W stanie hover stosowana jest transformacja skali. -
Styl dla kontenera z informacją podziękowania (ukryty):
#thankyou- Jest ukryty (display: none;) i pojawia się jako warstwa z tłem po wysłaniu formularza. Ma animację fadeOut. -
Styl dla kontenera z informacją podziękowania po wywołaniu jako cel w adresie URL:
#thankyou:target- Staje się widoczny (display: flex;). -
Styl zawartości kontenera z informacją podziękowania:
.thankyou-content- Tło białe (var(--white-color)), padding 20px, zaokrąglone rogi (border-radius). -
Styl dla sekcji kontaktowej:
#contact- Ma określoną względną wysokość (height), zaokrąglone rogi (border-radius) i jest pozycjonowany relatywnie. -
Styl dla formularza:
.form- Tło koloru lilowego (var(--lilinav-color)), padding, zaokrąglone rogi, cień. Szerokość ograniczona do 600px i maksymalnej wysokości 600px. Jest wyśrodkowany na stronie. -
Styl dla nagłówka formularza:
.form h2- Kolor szary (var(--gray-color)), marginesy. -
Styl dla paragrafów formularza:
.form p- Marginesy i szerokość 100%. -
Styl dla ostatniego paragrafu, aby usunąć margines dolny:
.form p:last-child -
Styl dla pól wejściowych i obszarów tekstowych formularza:
.form input, .form textarea- Wygląd, marginesy i zaokrąglone rogi. Nieprawidłowe wprowadzenie ma czerwony obramowanie. -
Styl dla przycisku formularza:
.form button- Kolor tła, kolor tekstu, zaokrąglone rogi, animacja. -
Styl dla przycisku formularza w stanie hover, zmiana koloru tła:
.form button:hover -
Styl dla kontenera z danymi kontaktowymi:
.form div- Tło, kolor tekstu, tekst wyśrodkowany. -
Styl dla ikon telefonu i adresu e-mail:
.form div span -
Styl dla obszaru tekstowego formularza, możliwość zmiany rozmiaru:
.form textarea -
Styl dla modala (okna dialogowego) - domyślnie ukrytego, wykorzystującego animację fadeOut:
.modal -
Styl dla zawartości modala:
.modal-content- Tło, margines, zaokrąglone rogi, szerokość.
.
Udało ci się wysłać wiadomość. Miłego dnia!
.
Udało ci się wysłać wiadomość. Miłego dnia!
Markup
<main>
<div id="container" class="container">
<button style="display: none;" id="button" class="button">Potwierdź godzinę !</button>
</div>
<section class="section contact" id="contact">
<h1 style="display:none;">.</h1>
<form class="form" action="#thankyou">
<h2>CONTACT US</h2>
<p>
<input type="text" name="name" placeholder="Write your name here..." title="Please fill out this field." required>
</p>
<p>
<input type="email" name="email" placeholder="Let us know how to contact you back..." title="Please fill out this field." required>
</p>
<p>
<input type="date" name="dob" title="Please fill out this field." required>
</p>
<p>
<input type="tel" name="phone" placeholder="Your phone number..." pattern="[0-9]{3}-[0-9]{3}-[0-9]{3}" title="A phone number should be 123-456-789" required>
</p>
<p>
<textarea name="message" placeholder="What would you like to tell us..." title="Please fill out this field." required rows="5"></textarea>
</p>
<button type="submit">Send message</button>
<div>
<span class="phone"></span> 123 456 789
<span class="contakt"></span> contact@company.com
</div>
</form>
</section>
<div id="thankyou">
<div class="thankyou-content">
<p>Udało ci się wysłać wiadomość. Miłego dnia!</p>
</div>
</div>
</main>styleContact.css, line 729