Khóa Học Lập Trình Web

<header>
    <h1>TeeGenZ 👕</h1>
    <nav>
        <ul>
            <li><a href="#">Trang chủ</a></li>
            <li><a href="#">Mẫu áo</a></li>
            <li><a href="#">Bảng giá</a></li>
            <li><a href="#">Giỏ hàng (0)</a></li>
        </ul>
    </nav>
</header>

<hr>

<section>
    <h2>In Áo Thun Thể Hiện Cá Tính Của Bạn</h2>
    <p>Tự do thiết kế, in ấn sắc nét, giao hàng toàn quốc chỉ trong 2 ngày.</p>
    <button>Khám phá các mẫu áo</button>
</section>

<hr>

<section>
    <h2>Các Mẫu Áo Phôi Bán Chạy</h2>

    <div>
        <img src="https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?w=300" alt="Áo thun trắng basic" width="200">
        <h3>Áo Thun Trắng Basic</h3>
        <p>Giá: 150.000 VNĐ</p>
        <button>Thêm vào giỏ</button>
    </div>

    <br>

    <div>
        <img src="https://images.unsplash.com/photo-1556821840-3a63f95609a7?w=300" alt="Áo Hoodie đen" width="200">
        <h3>Áo Hoodie Đen Dày Dặn</h3>
        <p>Giá: 350.000 VNĐ</p>
        <button>Thêm vào giỏ</button>
    </div>
</section>

<hr>

<footer>
    <h2>Bạn đã có thiết kế riêng?</h2>
    <p>Hãy tải file ảnh của bạn lên đây, chúng tôi sẽ in nó lên áo!</p>
    
    <form action="#">
        <label for="customerName">Tên của bạn:</label>
        <input type="text" id="customerName" placeholder="Nhập tên..."><br><br>

        <label for="designFile">Tải ảnh thiết kế (PNG/JPG):</label>
        <input type="file" id="designFile"><br><br>

        <button type="submit">Gửi yêu cầu in</button>
    </form>

    <br>
    <p>© 2026 Bản quyền thuộc về TeeGenZ.</p>
</footer>

<section>
    <h2>Các Mẫu Áo Phôi Bán Chạy</h2>

    <div class="product-card">
        <img src="https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?w=300" alt="Áo thun trắng basic" width="200">
        <h3>Áo Thun Trắng Basic</h3>
        <p class="price">Giá: 150.000 VNĐ</p>
        <button class="btn-buy">Thêm vào giỏ</button>
    </div>

    <div class="product-card">
        <img src="https://images.unsplash.com/photo-1556821840-3a63f95609a7?w=300" alt="Áo Hoodie đen" width="200">
        <h3>Áo Hoodie Đen Dày Dặn</h3>
        <p class="price">Giá: 350.000 VNĐ</p>
        <button class="btn-buy">Thêm vào giỏ</button>
    </div>
</section>

/* 1. RESET CSS (Xóa lề thừa mặc định) */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

body {
    background-color: #f4f4f9;
    color: #333;
}

/* 2. TRANG TRÍ HEADER */
header {
    background-color: #111;
    color: #fff;
    padding: 20px;
    text-align: center;
}

header a {
    color: #f39c12;
    text-decoration: none;
    margin: 0 15px;
    font-weight: bold;
}

/* 3. TRANG TRÍ BANNER */
section {
    padding: 40px 20px;
    text-align: center;
}

/* 4. TRANG TRÍ THẺ SẢN PHẨM - BOX MODEL THỰC CHIẾN */
.product-card {
    background-color: white;
    width: 250px;
    margin: 20px auto;
    padding: 15px;          /* Đệm bên trong */
    border: 2px solid #ddd; /* Viền ngoài */
    border-radius: 10px;    /* Bo góc */
}

.product-card img {
    border-radius: 8px;
}

.price {
    color: #e74c3c;
    font-weight: bold;
    margin: 10px 0;
}

/* 5. TRANG TRÍ NÚT MUA HÀNG */
.btn-buy {
    background-color: #f39c12;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}

/* Hiệu ứng khi di chuột vào nút */
.btn-buy:hover {
    background-color: #d68910;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">

<section>
    <h2 class="text-center mb-4">Các Mẫu Áo Phôi Bán Chạy</h2>
    <div class="product-list"> <!-- Container -->

        <div class="product-card">...</div>
        <div class="product-card">...</div>

    </div>
</section>

/* ================== BUỔI 3: FLEXBOX & GRID ================== */

/* 1. Flexbox cho Header */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 40px;
}

header nav ul {
    display: flex;
    list-style: none;
}

/* 2. Grid cho Sản phẩm */
.product-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 0 40px;
}

.product-card {
    margin: 0;
    width: 100%;
}

/* 3. RESPONSIVE - Khi màn hình nhỏ */
@media (max-width: 768px) {
    header {
        flex-direction: column;
    }
    
    .product-list {
        grid-template-columns: 1fr;
        padding: 0 15px;
    }
}

<header>
    <h1>TeeGenZ 👕</h1>
    <nav>
        <ul>
            <li><a href="#">Trang chủ</a></li>
            <li><a href="#">Mẫu áo</a></li>
            <li><a href="#" class="fw-bold text-warning">
                Giỏ hàng (<span id="cartCountDisplay">0</span>)
            </a></li>
        </ul>
    </nav>
</header>

    <script src="script.js"></script>
</body>

// ==========================================
// BƯỚC 1: KHAI BÁO BIẾN LƯU SỐ LƯỢNG ÁO
// ==========================================
let cartQuantity = 0;

// ==========================================
// BƯỚC 2: TÌM CÁC THÀNH PHẦN TRÊN HTML
// ==========================================
const spanCartCount = document.getElementById("cartCountDisplay");
const buyButtons = document.querySelectorAll(".btn-buy");

// ==========================================
// BƯỚC 3: GẮN SỰ KIỆN CLICK CHO CÁC NÚT
// ==========================================
buyButtons.forEach(function(button) {
    button.addEventListener("click", function() {
        // 3.1. Tăng số lượng lên 1
        cartQuantity = cartQuantity + 1;
        
        // 3.2. Cập nhật lại thẻ HTML
        spanCartCount.innerText = cartQuantity;
        
        // 3.3. Hiện thông báo
        alert("Tuyệt vời! Bạn vừa thêm 1 chiếc áo vào giỏ hàng 👕");
    });
});