Phần liên hệ

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

Thử thách

Dễ

Trong nhiệm vụ này, bạn sẽ đặt bảng chứa thông tin liên hệ ở giữa phần .contact.

Dùng các kỹ thuật bố cục để bảng nằm ở vị trí phù hợp và trông đẹp mắt. Làm theo các bước dưới đây:

Viết quy tắc CSS nhắm đến phần tử <section> có lớp .contact.
Đặt display thành flex để có thể định vị linh hoạt các phần tử con.
Dùng flex-direction: column để xếp các phần tử theo chiều dọc.
Áp dụng align-items: center để căn giữa nội dung theo chiều ngang.
Đặt min-height là 30vh để bảo đảm có đủ không gian cho nội dung.

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">About</a>
        <a href="#experience">Experience</a>
        <a href="#contact">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>