Welcome Header

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

Challenge

Easy

Next, you will style the header with the class .welcome. It is the first thing users see when they visit the page, so it should stand out.

The .welcome section is hidden behind the fixed menu. We need to push it down so it’s fully visible.

Follow these steps:

Select the .welcome section in CSS.
Add a padding-top property to create space at the top.
Set the value to 10vh to ensure the spacing adapts to different screen sizes.

10vh takes up 10% of the total height of the screen. This makes the layout more flexible across different devices compared to a fixed pixel value.

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>