Phần giới thiệu

Thuộc phần Tạo kiểu với CSS trong hành trình HTML của Coddy. Bài học 69 trên 76.

Thử thách

Dễ

Tiếp theo, chúng ta sẽ tạo kiểu cho phần About bằng bố cục linh hoạt và hình ảnh co giãn để phần này hiển thị đẹp trên mọi kích thước màn hình.

Nhiệm vụ của bạn là áp dụng các kỹ thuật bố cục linh hoạt và hình ảnh co giãn cho phần có lớp about để phần này thích ứng với nhiều kích thước màn hình. Hãy làm theo các bước dưới đây:

1. Tạo kiểu cho vùng chứa của phần

Viết quy tắc CSS nhắm đến phần tử <section> có lớp about.
Thêm khoảng đệm để tạo không gian bên trong.
Đặt max-width để ngăn phần này kéo dài quá rộng.

2. Tạo kiểu cho văn bản

Viết quy tắc CSS nhắm đến phần tử h2 và đặt màu cho phần tử này.
Viết quy tắc CSS nhắm đến phần tử p và áp dụng màu văn bản dễ đọc.

3. Tạo kiểu cho hình ảnh

Viết quy tắc CSS nhắm đến phần tử img.
Đặt width thành 40vw để hình ảnh co giãn theo kích thước màn hình.
Dùng float: right; để đặt hình ảnh bên cạnh văn bản.
Thêm lề 10px để tạo khoảng cách xung quanh hình ảnh.

Tự làm thử

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