<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>House Design with Product Card and Content Inside</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-image: url('your-background-image.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
font-family: Arial, sans-serif;
color: #333;
padding: 20px;
box-sizing: border-box;
}
.container {
display: grid;
grid-template-areas:
"review1 review1 review2 review2"
"review3 house house review4"
"review5 house house review6"
"review7 review7 review8 review8";
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
max-width: 600px;
max-height: 600px;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
}
.house {
grid-area: house;
position: relative;
width: 100%;
height: 100%;
background-color: #ffcc00;
border: 5px solid #333;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
padding: 10px;
box-sizing: border-box;
}
.roof {
position: absolute;
top: -25px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid #cc0000;
}
.door {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 25px;
height: 40px;
background-color: #663300;
border: 2px solid #333;
}
.window {
position: absolute;
width: 20px;
height: 20px;
background-color: #ffffff;
border: 2px solid #333;
}
.window.left {
top: 15px;
left: 10px;
}
.window.right {
top: 15px;
right: 10px;
}
.top-content,
.bottom-content {
background-color: rgba(255, 255, 255, 0.9);
padding: 5px;
border-radius: 5px;
text-align: center;
font-size: 14px;
color: #555;
}
.top-content {
margin-bottom: 10px;
}
.bottom-content {
margin-top: 10px;
}
.product-card {
background-color: #ffffff;
border: 1px solid #ccc;
border-radius: 5px;
padding: 15px;
text-align: center;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.product-card img {
max-width: 100%;
height: auto;
border-radius: 5px;
}
.product-card h3 {
font-size: 18px;
margin: 10px 0;
}
.product-card p {
font-size: 14px;
color: #777;
margin-bottom: 10px;
}
.product-card button {
padding: 8px 15px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.product-card button:hover {
background-color: #0056b3;
}
.review {
padding: 10px;
background-color: rgba(255, 255, 255, 0.9);
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.review1 { grid-area: review1; }
.review2 { grid-area: review2; }
.review3 { grid-area: review3; }
.review4 { grid-area: review4; }
.review5 { grid-area: review5; }
.review6 { grid-area: review6; }
.review7 { grid-area: review7; }
.review8 { grid-area: review8; }
</style>
</head>
<body>
<div class="container">
<div class="review review1">
<p><strong>Review 1:</strong> "Nồi cơm điện mới của chúng tôi không chỉ nấu cơm hoàn hảo mà còn có thiết kế đẹp mắt, làm sáng bừng không gian bếp của bạn!"</p>
</div>
<div class="review review2">
<p><strong>Review 2:</strong> "Máy xay sinh tố mới là một bổ sung tuyệt vời cho nhà bếp của chúng tôi. Nó hoạt động mạnh mẽ và dễ sử dụng, rất phù hợp cho những bữa sáng nhanh gọn."</p>
</div>
<div class="review review3">
<p><strong>Review 3:</strong> "Lò nướng điện hiện đại của chúng tôi nướng bánh và thực phẩm một cách hoàn hảo, giúp bạn có những bữa ăn gia đình ấm cúng hơn."</p>
</div>
<div class="house">
<div class="top-content">
<p>
Nồi cơm điện mini Chigo thích hợp cho người độc thân, gia đình 2-3 người. ăn ít cơm, sinh viên, ngại rửa cái nồi cơm điện bình thường to oạch.
<br>
- Đặc biệt cho gia đình có bé ở độ tuổi ăn dặm. Nấu cháo, hầm thức ăn ngon lắm ạ. Điểm đặc biệt nữa là có thể luộc trứng, khoai, hầm canh, nấu soup rất tiện lợi.
</p>
</div>
<div class="product-card">
<img src="https://w.ladicdn.com/60988adb4f31f60012f43f81/noi-com-dien-mini-ls2djakdrlfj31-20240716084513-trslz.jpg" alt="Product">
<h3>Nồi cơm điện</h3>
<p>
MINI CHIGO 1.2L CỰC TIỆN LỢI
</p>
<a href="https://shorten.asia/2VGARpQd">
<button>Mua ngay</button>
</a>
</div>
<div class="bottom-content">
<p>
- Thiết kế nhỏ gọn, dung tích hợp lý sẽ giúp bạn tiết kiệm điện năng tiêu thị cũng như làm gọn gàng không gian căn bếp
- Nồi cơm điện chigo với công suất 350W nấu cơm siêu nhanh
- Giữ ấm liên tục trong 12 tiếng Giữ kín hơi, luôn có cơm nóng hạt cơm vẫn giữ nguyên được độ dẻo thơm.
- Thiết kế ngộ nghĩnh, bắt mắt Kiểu dáng tròn và bảng điều khiển dễ thương tạo nét riêng cho sản phẩm.
- Bảng điều khiển 2 chế độ nấu cơm và nấu soup
- Khay chứa nước thừa, dây điện đều được thiết kế tháo rời để bạn dễ dàng vệ sinh, cất giữ sau khi sử dụng
- Thiết kế khép kín, gìữ lại chất dinh dưỡng cho hạt g̣ạo ngon hơn.
- Nắp đậy chống tràn có thể tháo rời, tiện lợi cho việc tẩy rửa.
</p>
</div>
</div>
<div class="review review4">
<p><strong>Review 4:</strong> "Máy pha cà phê tiện dụng, dễ dàng sử dụng và vệ sinh, mang lại những tách cà phê thơm ngon mỗi sáng."</p>
</div>
<div class="review review5">
<p><strong>Review 5:</strong> "Máy rửa chén tiết kiệm nước và điện năng, là trợ thủ đắc lực trong việc giữ gìn nhà bếp sạch sẽ."</p>
</div>
<div class="review review6">
<p><strong>Review 6:</strong> "Máy hút bụi mạnh mẽ và hiệu quả, giúp việc dọn dẹp nhà cửa trở nên nhanh chóng và dễ dàng hơn bao giờ hết."</p>
</div>
<div class="review review7">
<p><strong>Review 7:</strong> "Lò vi sóng với thiết kế hiện đại và nhiều tính năng thông minh, là trợ thủ đắc lực trong nhà bếp."</p>
</div>
<div class="review review8">
<p><strong>Review 8:</strong> "Bếp từ mới với thiết kế đẹp, dễ sử dụng và nấu ăn nhanh chóng, tiết kiệm thời gian."</p>
</div>
</div>
</body>
</html>
Giải thích HTML Mẫu Layout Ngôi Nhà Gia Dụng Product Card Nồi Cơm Điện Mini :
house: Khối chứa nội dung chia thành ba hàng (grid-template-rows: auto 1fr auto;
) bao gồm nội dung ở phần trên, product card ở giữa và nội dung khác ở phần dưới.
top-content và bottom-content: Hai khối nội dung văn bản được thêm vào để lấp đầy không gian trống phía trên và dưới của product card bên trong layout ngôi nhà.
