Dưới đây là mã HTML đã được điều chỉnh để chèn hai product card vá sạn gỗ, trong đó hình ảnh sản phẩm nằm ở trên và thông tin mô tả nằm phía dưới. Các product card được chèn vào vị trí phù hợp trong nội dung bài viết, với bố cục mà chữ bao bọc xung quanh:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Giới Thiệu Vá Sạn Gỗ - Dụng Cụ Tiện Dụng Cho Gian Bếp Xinh</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f8f8f8;
}
header {
background: #8b4513;
color: #ffffff;
padding: 15px;
text-align: center;
}
#content {
padding: 20px;
max-width: 1200px;
margin: auto;
line-height: 1.6;
}
h2, h3 {
color: #8b4513;
}
.product-card {
border: 1px solid #ddd;
padding: 15px;
margin: 20px;
text-align: center;
background-color: #fff;
width: 40%;
float: left;
margin-right: 20px;
margin-bottom: 20px;
}
.product-card img {
max-width: 100%;
height: auto;
margin-bottom: 10px;
}
.product-card h3 {
margin: 10px 0;
font-size: 20px;
color: #333;
}
.product-card p {
margin: 5px 0;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
#banner {
display: none;
background-color: #e74c3c;
color: #fff;
text-align: center;
padding: 15px;
margin: 20px 0;
font-size: 18px;
font-weight: bold;
}
#shop-bar {
display: none;
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
background-color: #e74c3c;
color: white;
padding: 15px 20px;
font-size: 18px;
font-weight: bold;
border-radius: 5px 0 0 5px;
cursor: pointer;
z-index: 1000;
transition: transform 0.3s ease;
}
#shop-bar:hover {
transform: translateY(-50%) translateX(-10px);
}
</style>
</head>
<body>
<header>
<h1>Giới Thiệu Vá Sạn Gỗ - Dụng Cụ Tiện Dụng Cho Gian Bếp Xinh</h1>
</header>
<div id="content">
<h2>Vá Sạn Gỗ: Dụng Cụ Không Thể Thiếu Trong Gian Bếp Của Bạn</h2>
<p>Trong thời đại hiện nay, khi các sản phẩm từ nhựa và kim loại đang chiếm lĩnh thị trường, các dụng cụ bếp bằng gỗ vẫn giữ được vị trí đặc biệt nhờ vào vẻ đẹp tự nhiên và tính an toàn cho sức khỏe. Vá và sạn gỗ không chỉ mang lại cảm giác gần gũi với thiên nhiên mà còn rất bền bỉ và dễ dàng bảo quản. Dụng cụ bếp bằng gỗ có thể chịu nhiệt tốt, không bị biến dạng và không gây hại cho sức khỏe khi tiếp xúc với thực phẩm nóng.</p>
<p>Một trong những yếu tố quan trọng khi chọn mua vá và sạn gỗ là loại gỗ sử dụng. Các loại gỗ phổ biến được sử dụng để làm vá sạn bao gồm gỗ sồi, gỗ teak, và gỗ xà cừ. Mỗi loại gỗ đều có những đặc tính riêng biệt, từ màu sắc đến độ bền, giúp người dùng dễ dàng lựa chọn sản phẩm phù hợp với nhu cầu của mình.</p>
<!-- Product Card 1 -->
<div class="product-card">
<img src="https://w.ladicdn.com/s250x250/60988adb4f31f60012f43f81/vagoxacu_08371-20240815013806-yqigo.png" alt="Vá Gỗ Xà Cừ">
<h3>Vá Gỗ Xà Cừ</h3>
<p>Vá gỗ xà cừ với thiết kế đẹp mắt và chắc chắn, là lựa chọn lý tưởng cho mọi căn bếp. Gỗ xà cừ nổi tiếng với độ bền cao và khả năng chịu nhiệt tốt, giúp sản phẩm luôn bền đẹp theo thời gian.</p>
<p><strong>Giá:</strong> 120,000 VND</p>
</div>
<p>Vá gỗ xà cừ là một trong những sản phẩm được ưa chuộng nhất hiện nay nhờ vào chất lượng vượt trội và giá cả phải chăng. Với màu sắc tự nhiên và vân gỗ đẹp mắt, vá gỗ xà cừ không chỉ là dụng cụ hữu ích trong nhà bếp mà còn là điểm nhấn cho không gian bếp của bạn.</p>
<!-- Banner Section -->
<div id="banner">
Khuyến mãi đặc biệt: Giảm 10% cho đơn hàng đầu tiên khi mua vá sạn gỗ!
</div>
<h3>Lựa Chọn Vá Sạn Gỗ Phù Hợp Cho Gian Bếp Của Bạn</h3>
<p>Khi lựa chọn vá và sạn gỗ, có một số yếu tố bạn cần cân nhắc để đảm bảo rằng bạn sẽ mua được sản phẩm chất lượng tốt nhất. Trước hết, hãy quan tâm đến chất liệu gỗ. Gỗ teak và gỗ sồi là những lựa chọn phổ biến nhờ vào độ bền cao và khả năng chịu nhiệt tốt. Ngoài ra, kích thước và thiết kế của vá sạn cũng là yếu tố quan trọng, giúp bạn dễ dàng thao tác và sử dụng trong quá trình nấu nướng.</p>
<p>Thiết kế của vá và sạn gỗ cũng rất đa dạng, từ những kiểu dáng cổ điển đến hiện đại, phù hợp với nhiều phong cách trang trí bếp khác nhau. Những sản phẩm này không chỉ phục vụ mục đích nấu ăn mà còn giúp gian bếp của bạn trở nên ấm cúng và gần gũi hơn.</p>
<!-- Product Card 2 -->
<div class="product-card">
<img src="vasangomau2.jpg" alt="Sạn Gỗ Teak">
<h3>Sạn Gỗ Teak</h3>
<p>Sạn gỗ teak được biết đến với độ bền vượt trội và khả năng chống thấm nước. Thiết kế chắc chắn và đẹp mắt, phù hợp cho mọi loại chảo và nồi, giúp bạn dễ dàng chế biến các món ăn ngon.</p>
<p><strong>Giá:</strong> 150,000 VND</p>
</div>
<p>Sạn gỗ teak là sản phẩm hoàn hảo cho những ai yêu thích nấu ăn và cần một dụng cụ bền bỉ, dễ sử dụng. Với khả năng chống thấm nước và chịu nhiệt tốt, sạn gỗ teak luôn là lựa chọn hàng đầu trong các gian bếp hiện đại.</p>
<h3>Kết Luận</h3>
<p>Vá và sạn gỗ không chỉ là những dụng cụ hữu ích trong việc nấu nướng hàng ngày mà còn là những sản phẩm mang lại vẻ đẹp tự nhiên, ấm áp cho gian bếp của bạn. Với những thông tin trên, hy vọng rằng bạn sẽ tìm được những sản phẩm vá sạn gỗ phù hợp nhất cho nhu cầu của mình. Đừng quên tham khảo các khuyến mãi và ưu đãi đặc biệt khi mua sắm trực tuyến để có được giá tốt nhất!</p>
</div>
<!-- Slide Bar "Shop" -->
<div id="shop-bar" onclick="location.href='https://www.example.com/shop';">
Shop
</div>
<script>
window.onscroll = function() {
var banner = document.getElementById("banner");
var shopBar = document.getElementById("shop-bar");
var scrollPosition = window.scrollY + window.innerHeight;
var documentHeight = document.documentElement.scrollHeight;
if (scrollPosition > documentHeight * 0.3) {
banner.style.display = "block";
shopBar.style.display = "block";
} else {
banner.style.display = "none";
shopBar.style.display = "none";
}
};
</script>
</body>
</html>
Giải thích chi tiết:
Product Card: Hình ảnh sản phẩm nằm ở trên, thông tin mô tả và giá nằm phía dưới trong mỗi product card. Các card được đặt ở các vị trí phù hợp trong bài viết, với chữ bao bọc xung quanh.
Banner ẩn hiện: Banner sẽ xuất hiện khi người dùng cuộn qua 30% nội dung trang và hiển thị như một phần của nội dung bài viết.
Slide bar "Shop": Slide bar này sẽ xuất hiện khi người dùng cuộn qua 30% nội dung trang và luôn bám lề bên phải màn hình. Khi nhấp vào slide bar, người dùng sẽ được chuyển hướng đến trang shop.
Mẫu code này giúp bạn tạo một trang web giới thiệu sản phẩm vá sạn gỗ một cách chuyên nghiệp, kết hợp giữa hình ảnh, nội dung mô tả và các yếu tố thương mại để tối ưu hóa trải nghiệm người dùng.
