Über-uns-Bereich

Teil des Abschnitts Styling with CSS der HTML-Journey von Coddy — Lektion 69 von 76.

Aufgabe

Einfach

Als Nächstes werden wir den About-Bereich mit fluiden Layouts und flexiblen Bildern gestalten, um sicherzustellen, dass er auf allen Bildschirmgrößen gut aussieht.

Ihre Aufgabe ist es, fluide Layout-Techniken und flexible Bilder für den Bereich mit der Klasse about anzuwenden, um ihn responsiv zu gestalten. Befolgen Sie die folgenden Schritte:

1. Den Bereichs-Container gestalten

Schreiben Sie eine CSS-Regel, die auf das <section>-Element mit der Klasse about abzielt.
Fügen Sie Padding hinzu, um Innenabstand zu schaffen.
Legen Sie eine max-width fest, um zu verhindern, dass sich der Bereich zu weit ausdehnt.

2. Den Text gestalten

Schreiben Sie eine CSS-Regel, die auf das h2-Element abzielt, und legen Sie dessen Farbe fest.
Schreiben Sie eine CSS-Regel, die auf das p-Element abzielt, und wenden Sie eine gut lesbare Textfarbe an.

3. Das Bild gestalten

Schreiben Sie eine CSS-Regel, die auf das img-Element abzielt.
Setzen Sie dessen width auf 40vw, um es responsiv zu machen.
Verwenden Sie float: right;, um es neben dem Text zu positionieren.
Fügen Sie einen 10px Margin hinzu, um Abstände um das Bild herum zu schaffen.

Probier es selbst

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