Sekcja „O nas”

Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 69 z 76.

Wyzwanie

Łatwy

Następnie ostylujemy sekcję About, używając płynnych układów i elastycznych obrazów, aby wyglądała świetnie na ekranach o różnych rozmiarach.

Twoim zadaniem jest zastosowanie technik płynnego układu i elastycznych obrazów w sekcji z klasą about, aby była responsywna. Wykonaj poniższe kroki:

1. Ostyluj kontener sekcji

Napisz regułę CSS, która wybiera element <section> z klasą about.
Dodaj dopełnienie, aby utworzyć przestrzeń wewnątrz.
Ustaw max-width, aby zapobiec nadmiernemu rozciągnięciu sekcji.

2. Ostyluj tekst

Napisz regułę CSS, która wybiera element h2 i ustawia jego kolor.
Napisz regułę CSS, która wybiera element p i ustawia czytelny kolor tekstu.

3. Ostyluj obraz

Napisz regułę CSS, która wybiera element img.
Ustaw jego width na 40vw, aby był responsywny.
Użyj float: right;, aby umieścić go obok tekstu.
Dodaj margines 10px, aby utworzyć odstęp wokół obrazu.

Spróbuj swoich sił

<html>
    <head>
        <title>Swim with Whales in Tonga</title>
        <link rel="stylesheet" href="styles.css">  
    </head>
    <body>
        <nav class="menu">
            <a href="#">About</a>
            <a href="#">Experience</a>
            <a href="#">Contact</a>
        </nav>    
        <header class="welcome">
            <h1>Swim with Whales in Tonga</h1>
            <p>Experience the magic of swimming alongside majestic humpback whales.</p>
        </header>    
        <section class="about">
            <h2>About Tonga</h2>
            <img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Hawaiian_Islands_Humpback_Whale_National_Marine_Sanctuary_breaching_2018.png">
            <p>Tonga is a stunning Polynesian archipelago in the South Pacific, famous for its crystal-clear waters and vibrant marine life. From July to October, humpback whales migrate here to breed, offering a rare chance to swim with these gentle giants. Beyond whale encounters, Tonga boasts pristine beaches, lush tropical landscapes, and a rich cultural heritage. Visitors can explore traditional villages, experience authentic Tongan hospitality, and enjoy activities like snorkeling, diving, and sailing. Whether you're seeking adventure or relaxation, Tonga provides an unforgettable escape into nature’s beauty.</p>
            </section>      
        <section class="contact">
            <h2>Plan Your Adventure</h2>
            <table>
                <tr>
                    <td>Phone Number</td>
                    <td>+676 123 4567</td>
                </tr>
                <tr>
                    <td>Email</td>
                    <td>info@tongawhales.com</td>
                </tr>
            </table>
    </section>
</body>
</html>