Tạo file index.html
<!DOCTYPE html><html lang="vi">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Website Đa Nền Tảng</title> <style> /* 1. Cài đặt chung */ * { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; background-color: #f4f4f4; }
/* 2. Bố cục Grid chính */ .grid-container { display: grid; grid-template-areas: 'header' 'nav' 'main' 'facts' 'footer'; gap: 10px; padding: 10px; }
/* 3. Header & Navigation */ header { grid-area: header; background-color: #2c3e50; color: white; padding: 20px; text-align: center; position: relative; }
/* Nút 3 gạch (Ẩn mặc định trên máy tính) */ .menu-icon { display: none; font-size: 28px; cursor: pointer; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); }
nav { grid-area: nav; background-color: #34495e; }
nav ul { list-style: none; display: flex; /* Nằm ngang trên máy tính */ justify-content: center; }
nav ul li a { display: block; color: white; padding: 15px 20px; text-decoration: none; transition: 0.3s; }
nav ul li a:hover { background-color: #1abc9c; }
/* 4. Nội dung chính */ main { grid-area: main; background: white; padding: 20px; border-radius: 5px; }
aside { grid-area: facts; background: #ecf0f1; padding: 20px; border-left: 5px solid #1abc9c; }
footer { grid-area: footer; background: #2c3e50; color: white; text-align: center; padding: 15px; }
/* 5. RESPONSIVE (Cho điện thoại < 768px) */ @media (max-width: 768px) { .menu-icon { display: block; /* Hiện nút 3 gạch */ }
nav ul { display: none; /* Ẩn menu mặc định */ flex-direction: column; /* Xếp dọc khi hiện */ text-align: center; }
/* Khi menu được kích hoạt (Active) */ nav.active ul { display: flex; }
.grid-container { grid-template-areas: 'header' 'nav' 'main' 'facts' 'footer'; } }
/* 6. RESPONSIVE (Cho máy tính > 768px) */ @media (min-width: 768px) { .grid-container { grid-template-columns: 200px 1fr 250px; grid-template-areas: 'header header header' 'nav main facts' 'footer footer footer'; }
nav ul { flex-direction: column; /* Menu bên trái trên desktop */ justify-content: flex-start; } } </style></head>
<body>
<div class="grid-container"> <header> <span class="menu-icon" onclick="toggleMenu()">☰</span> <h1>MY WEBSITE</h1> </header>
<nav id="navbar"> <ul> <li><a href="index.html">Trang chủ</a></li> <li><a href="san-pham.html">Sản phẩm</a></li> <li><a href="dich-vu.html">Dịch vụ</a></li> <li><a href="lien-he.html">Liên hệ</a></li> </ul> </nav>
<main> <h2>Nội dung chính</h2> <p>Đây là khu vực hiển thị nội dung bài viết. Giao diện này sử dụng CSS Grid để tự động sắp xếp lại các thành phần tùy theo kích thước màn hình.</p> <p>Hãy thử thu nhỏ trình duyệt để thấy menu biến thành nút 3 gạch!</p>
</main>
<aside> <h3>Thông tin thêm</h3> <p>Cột bên phải thường dùng để hiển thị quảng cáo hoặc các liên kết liên quan.</p>
</aside>
<footer> <p>© 2026 Giao diện thiết kế bởi Gemini</p> </footer>
</div>
<script> function toggleMenu() { const nav = document.getElementById('navbar'); // Thêm hoặc xóa class 'active' khi nhấn nút nav.classList.toggle('active'); } </script>
</body>
</html>...