Über-Bereich

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

Aufgabe

Einfach

Als Nächstes gestalten wir den Abschnitt „Über uns“ mit fließenden Layouts und flexiblen Bildern, damit er auf allen Bildschirmgrößen gut aussieht.

Deine Aufgabe ist es, fließende Layout-Techniken und flexible Bilder für den Abschnitt mit der Klasse about anzuwenden, damit er responsiv ist. Befolge die folgenden Schritte:

1. Den Abschnittscontainer gestalten

Schreibe eine CSS-Regel, die auf das <section>-Element mit der Klasse about abzielt.
Füge Innenabstand hinzu, um innerhalb des Elements Platz zu schaffen.
Lege eine max-width fest, um zu verhindern, dass sich der Abschnitt zu weit ausdehnt.

2. Den Text gestalten

Schreibe eine CSS-Regel, die auf das h2-Element abzielt, und lege seine Farbe fest.
Schreibe eine CSS-Regel, die auf das p-Element abzielt, und wende eine gut lesbare Textfarbe an.

3. Das Bild gestalten

Schreibe eine CSS-Regel, die auf das img-Element abzielt.
Setze seine width auf 40vw, damit es responsiv ist.
Verwende float: right;, um es neben dem Text zu positionieren.
Füge einen 10px-Außenabstand hinzu, um einen Abstand 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>