Cách tạo trang About / About Us (Giới thiệu) cho website với CSS

Giới thiệu

Trang "About Us" (Giới thiệu) là trang thiết yếu giúp khách hàng hiểu về doanh nghiệp, đội ngũ và giá trị cốt lõi. Bài viết này hướng dẫn xây dựng trang About đẹp, responsive với CSS thuần túy.

Ví dụ hoàn chỉnh

Mã dưới đây tạo trang About Us với header nổi bật, lưới hiển thị thành viên đội ngũ (team grid) responsive, và nút liên hệ có hiệu ứng hover:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
        html { box-sizing: border-box; }
        body {
            font-family: monospace, serif, sans-serif;
            margin: 0; padding: 0;
        }
        h1 {
            text-align: center;
            background-color: rgb(108, 18, 131);
            color: white;
            padding: 40px 0;
            margin-top: 0;
        }
        .teamContainer { margin-left: 10%; }
        img { width: 100%; height: 200px; object-fit: cover; }
        *, *:before, *:after { box-sizing: inherit; }
        .teamColumn {
            display: inline-block;
            width: 300px;
            height: 400px;
            margin-bottom: 16px;
            padding: 0 8px;
            vertical-align: top;
        }
        @media screen and (max-width: 650px) {
            .teamColumn { display: block; width: 100%; }
        }
        .teamCard {
            background-color: rgb(162, 162, 255);
            text-align: center;
            font-size: 20px;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        .personContainer { padding: 16px; }
        .personContainer::after, .teamContainer::after {
            content: ""; clear: both; display: table;
        }
        .Designation {
            color: rgb(15, 0, 100);
            font-weight: bold;
            font-size: 20px;
            margin: 8px 0;
        }
        .contact {
            border: none; outline: 0;
            display: inline-block; width: 100%;
            padding: 12px; color: white;
            font-weight: bold;
            background-color: rgb(78, 0, 102);
            text-align: center; cursor: pointer;
            border-radius: 4px;
            transition: background 0.3s;
        }
        .contact:hover { background-color: #555; }
    </style>
</head>
<body>
    <h1>About Us</h1>
    <div class="teamContainer">
        <div class="teamColumn">
            <div class="teamCard">
                <img src="https://images.pexels.com/photos/839011/pexels-photo-839011.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Jane Doe" />
                <div class="personContainer">
                    <h3>Jane Doe</h3>
                    <p class="Designation">CTO</p>
                    <p><button class="contact">Contact</button></p>
                </div>
            </div>
        </div>
        <div class="teamColumn">
            <div class="teamCard">
                <img src="https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Mike Ross" />
                <div class="personContainer">
                    <h3>Mike Ross</h3>
                    <p class="Designation">Front End Developer</p>
                    <p><button class="contact">Contact</button></p>
                </div>
            </div>
        </div>
        <div class="teamColumn">
            <div class="teamCard">
                <img src="https://images.pexels.com/photos/736716/pexels-photo-736716.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="John Doe" />
                <div class="personContainer">
                    <h3>John Doe</h3>
                    <p class="Designation">FullStack Developer</p>
                    <p><button class="contact">Contact</button></p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Các điểm nổi bật

• Responsive: Cột đội ngũ chuyển từ ngang (3 cột) sang dọc (1 cột) trên màn hình nhỏ (< 650px).
• Card thiết kế sạch: Nền xanh pastel, bo góc, bóng đổ nhẹ, hình ảnh cover đầy khung.
• Nút Contact: Đầy rộng card, đổi màu khi hover, dễ nhận diện.
• Clearfix: Sử dụng ::after trên container để chứa float.

Gợi ý cải tiến

• Thêm phần "Our Story", "Mission & Vision", "Values" với layout xen kẽ hình ảnh/văn bản (zig-zag).
• Sử dụng CSS Grid thay vì float/inline-block để code ngắn gọn, dễ bảo trì hơn.
• Thêm animation xuất hiện (fade-in, slide-up) khi cuộn vào view với IntersectionObserver.