About Section

Part of the Styling with CSS section of Coddy's HTML journey — lesson 69 of 76.

Challenge

Easy

Next, we will style the About section using fluid layouts and flexible images to ensure it looks great on all screen sizes.

Your task is to apply fluid layout techniques and flexible images for the section with class about to make it responsive. Follow the steps below:

1. Style the section container

Write a CSS rule that targets the <section> element with the class about.
Add padding to create space inside.
Set a max-width to prevent the section from stretching too wide.

2. Style the text

Write a CSS rule that targets the h2 element and set its color.
Write a CSS rule that targets the p element and apply a readable text color.

3. Style the image

Write a CSS rule that targets the img element.
Set its width to 40vw to make it responsive.
Use float: right; to position it beside the text.
Add a 10px margin to create spacing around the image.

Try it yourself

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