7 #permalink CONTACT - sekcja kontaktowa

Sekcja "Stylizacja ogólna strony"

main: Element <main> posiada właściwość flex: 1, co sugeruje, że dostosowuje się do dostępnej przestrzeni flexbox na stronie. Dodatkowo ma marginesy na górze i na dole.
#contact: Sekcja kontaktowa o id "contact" jest wyposażona w białe tło, zajmuje 50% wysokości ekranu i jest pozycjonowana jako "relative". Jej rogi zostały zaokrąglone (border-radius: 6px).
#contact::before: Pseudo-element "::before" sekcji "contact" tworzy animowane tło w formie gradientu konicznego z efektem obrotu.

Sekcja "Formularz kontaktowy"

.form: Formularz o klasie "form" jest umieszczony wewnątrz sekcji kontaktowej. Ma białe tło, cień (box-shadow) i zaokrąglone rogi (border-radius: 8px). Jest wyśrodkowany i ma maksymalną szerokość.
.form h2: Nagłówek <h2> wewnątrz formularza jest stylizowany, ustawiając rozmiar czcionki, kolor i marginesy.
.form p: Paragrafy w formularzu są stylizowane, ustawiane są marginesy i szerokość elementów.
.form input, .form textarea: Pola tekstowe i pole tekstowe typu textarea są stylizowane, ustawiane są szerokość, padding, obramowanie i zaokrąglone rogi. Niepoprawne dane są wyróżniane czerwoną obwódką.
.form button: Przycisk "Send message" jest stylizowany, ustawiana jest szerokość, padding, tło, kolor tekstu, zaokrąglone rogi i efekt animacji.
.form button:hover: Definiuje styl przycisku po najechaniu kursorem, zmieniając tło i kolor tekstu.
.form div: Elementy <div> w formularzu są stylizowane, ustawiane są tło, kolor tekstu i inne właściwości.
.form div span: Spany wewnątrz divów w formularzu są stylizowane, ustawiane są marginesy i kolor tekstu.
.form textarea: Pole tekstowe typu textarea ma możliwość dostosowywania swojej wysokości.

Sekcja "Okno modalne"

.modal: Modal, czyli okno modalne, jest ukryte i umieszczone jako element "fixed" na stronie. Posiada transparentne tło.
.modal-content: Zawartość okna modalnego ma białe tło, obramowanie i jest wyśrodkowana na stronie.
.close: Przycisk zamykania okna modalnego jest stylizowany, ustawiany jest kolor i rozmiar czcionki oraz efekt podświetlenia po najechaniu kursorem.
#modalCheck:checked ~ .modal: Wykorzystuje pseudo-selektor ":checked" do wyświetlenia okna modalnego po kliknięciu na odpowiedni element. Wykorzystuje również animację "fadeOut" do płynnego znikania okna modalnego.

Sekcja "Przyciski"

.button:hover: Stylizuje przyciski o klasie "button" po najechaniu kursorem, zmieniając tło na kolor niebieski.
span.button: Stylizuje spany wewnątrz przycisków, dostosowując ich wygląd.

Sekcja "Media Queries - Dostosowanie do różnych urządzeń"

Reguły Media Queries: Dostosowują wygląd strony do różnych szerokości ekranu, zapewniając responsywność. Są zdefiniowane trzy punkty przerwania dla ekranów o różnych rozmiarach, a w każdym z nich dostosowywane są style elementów dla danej szerokości ekranu.

Example

Udało ci się wysłać wiadomość. Miłego dnia!

Markup

<main>
        <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>

Source: styleContact.css, line 556