Bagian Tentang

Termasuk bagian Menata dengan CSS dalam perjalanan HTML di Coddy. Pelajaran 69 dari 76.

Tantangan

Mudah

Selanjutnya, kita akan menata bagian About menggunakan tata letak fleksibel dan gambar fleksibel agar tampil dengan baik di semua ukuran layar.

Tugasmu adalah menerapkan teknik tata letak fleksibel dan gambar fleksibel pada bagian dengan class about agar responsif. Ikuti langkah-langkah berikut:

1. Tata container bagian

Tulis aturan CSS yang menargetkan elemen <section> dengan class about.
Tambahkan padding untuk membuat ruang di bagian dalam.
Tetapkan max-width agar bagian tersebut tidak melebar terlalu jauh.

2. Tata teks

Tulis aturan CSS yang menargetkan elemen h2 dan tetapkan warnanya.
Tulis aturan CSS yang menargetkan elemen p dan terapkan warna teks yang mudah dibaca.

3. Tata gambar

Tulis aturan CSS yang menargetkan elemen img.
Tetapkan width ke 40vw agar gambar responsif.
Gunakan float: right; untuk menempatkan gambar di samping teks.
Tambahkan margin 10px untuk memberi jarak di sekeliling gambar.

Coba sendiri

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