Bạn có thể tham khảo " Mã HTML Website Giới Thiệu Vá Sạn Gỗ Dụng Cụ Tiện Dụng Cho Gian Bếp Xinh " Phiên bản Version 2 theo link sau :
https://blog.khoz.vn/ma-html-website-gioi-thieu-va-san-go-dung-cu-tien-dung-cho-gian-bep-xinh
Sau đây là code Template HTML Mẫu Website Vá Sạn Gỗ Version 2
<!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;
line-height: 1.6;
}
header {
background: #8b4513;
color: #ffffff;
padding: 15px;
text-align: center;
}
#content {
padding: 20px;
max-width: 1200px;
margin: auto;
position: relative;
}
h2, h3 {
color: #8b4513;
}
.hexagon-container {
float: right;
width: 200px;
height: 230px;
position: relative;
margin-left: 20px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hexagon-container:hover {
transform: translateY(-10px);
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
}
.hexagon {
width: 100%;
height: 100%;
background-color: #ffffff;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
.hexagon img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.hexagon-container:hover .hexagon img {
transform: scale(1.1);
}
.hexagon-content {
position: absolute;
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0.6);
color: white;
padding: 10px;
box-sizing: border-box;
text-align: center;
transition: background 0.3s ease;
}
.hexagon-content h3 {
margin: 0;
font-size: 16px;
}
.hexagon-content p {
margin: 5px 0;
font-size: 12px;
}
.hexagon-container:hover .hexagon-content {
background: rgba(0, 0, 0, 0.8);
}
#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, background-color 0.3s ease;
}
#shop-bar:hover {
transform: translateY(-50%) translateX(-10px);
background-color: #d62c1a;
}
/* Modal Window */
#myModal {
display: none;
position: fixed;
z-index: 1001;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
padding-top: 60px;
}
.modal-content {
background-color: #fefefe;
margin: 5% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 600px;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</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 Hexagon on the Right -->
<div class="hexagon-container">
<div class="hexagon">
<img src="vasangomau2.jpg" alt="Sạn Gỗ Teak">
<div class="hexagon-content">
<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>
</div>
</div>
<!-- End of Product Card Hexagon -->
<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>
<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="document.getElementById('myModal').style.display='block'">
Shop
</div>
<!-- Modal Window -->
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close" onclick="document.getElementById('myModal').style.display='none'">×</span>
<h2>Chào mừng đến với Shop của chúng tôi!</h2>
<p>Khám phá những sản phẩm vá sạn gỗ chất lượng cao, thiết kế đẹp mắt và giá cả phải chăng. Hãy ghé thăm trang shop của chúng tôi để xem thêm nhiều sản phẩm hấp dẫn khác.</p>
<button onclick="location.href='https://www.example.com/shop'">Ghé thăm shop ngay</button>
</div>
</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";
}
};
// Close the modal when clicking outside of it
window.onclick = function(event) {
var modal = document.getElementById('myModal');
if (event.target == modal) {
modal.style.display = "none";
}
};
</script>
</body>
</html>
