Sezione Chi siamo

Fa parte della sezione Stilizzare con CSS del percorso HTML di Coddy. Lezione 69 di 76.

Sfida

Facile

Successivamente, daremo uno stile alla sezione About usando layout fluidi e immagini flessibili per assicurarci che abbia un bell’aspetto su schermi di tutte le dimensioni.

Il tuo compito è applicare tecniche di layout fluido e immagini flessibili alla sezione con classe about per renderla adattiva. Segui i passaggi indicati di seguito:

1. Dai uno stile al contenitore della sezione

Scrivi una regola CSS che selezioni l’elemento <section> con la classe about.
Aggiungi padding per creare spazio all’interno.
Imposta un max-width per impedire che la sezione si estenda troppo in larghezza.

2. Dai uno stile al testo

Scrivi una regola CSS che selezioni l’elemento h2 e imposta il suo colore.
Scrivi una regola CSS che selezioni l’elemento p e applica un colore del testo leggibile.

3. Dai uno stile all’immagine

Scrivi una regola CSS che selezioni l’elemento img.
Imposta la sua width su 40vw per renderla adattiva.
Usa float: right; per posizionarla accanto al testo.
Aggiungi un margine di 10px per creare spazio attorno all’immagine.

Provalo tu

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