| <!DOCTYPE html> |
| <html lang="vi"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>BẾP 4.0 - Giữ bếp trong tâm - Trăm năm chăm sóc</title> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| :root { |
| --dark-green: #1a3e2e; |
| --yellow: #f5c542; |
| --gray: #e8e8e8; |
| --dark-gray: #333333; |
| --light-gray: #f5f5f5; |
| } |
| |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| } |
| |
| body { |
| background-color: var(--light-gray); |
| color: var(--dark-gray); |
| line-height: 1.6; |
| } |
| |
| .container { |
| max-width: 1200px; |
| margin: 0 auto; |
| padding: 0 20px; |
| } |
| |
| |
| header { |
| background-color: white; |
| box-shadow: 0 2px 10px rgba(0,0,0,0.1); |
| position: sticky; |
| top: 0; |
| z-index: 100; |
| } |
| |
| .header-container { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding: 20px 0; |
| } |
| |
| .logo { |
| display: flex; |
| align-items: center; |
| } |
| |
| .logo img { |
| height: 50px; |
| margin-right: 10px; |
| } |
| |
| .logo-text h1 { |
| color: var(--dark-green); |
| font-size: 24px; |
| font-weight: 700; |
| } |
| |
| .logo-text p { |
| color: var(--dark-gray); |
| font-size: 12px; |
| font-style: italic; |
| } |
| |
| nav ul { |
| display: flex; |
| list-style: none; |
| } |
| |
| nav ul li { |
| margin-left: 30px; |
| } |
| |
| nav ul li a { |
| text-decoration: none; |
| color: var(--dark-gray); |
| font-weight: 500; |
| transition: color 0.3s; |
| position: relative; |
| } |
| |
| nav ul li a:hover { |
| color: var(--dark-green); |
| } |
| |
| nav ul li a::after { |
| content: ''; |
| position: absolute; |
| width: 0; |
| height: 2px; |
| background-color: var(--yellow); |
| bottom: -5px; |
| left: 0; |
| transition: width 0.3s; |
| } |
| |
| nav ul li a:hover::after { |
| width: 100%; |
| } |
| |
| .cart-icon { |
| position: relative; |
| margin-left: 30px; |
| } |
| |
| .cart-count { |
| position: absolute; |
| top: -10px; |
| right: -10px; |
| background-color: var(--yellow); |
| color: var(--dark-green); |
| width: 20px; |
| height: 20px; |
| border-radius: 50%; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| font-size: 12px; |
| font-weight: bold; |
| } |
| |
| |
| .hero { |
| background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1556911220-e15b29be8c8f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') no-repeat center center/cover; |
| height: 600px; |
| display: flex; |
| align-items: center; |
| color: white; |
| text-align: center; |
| position: relative; |
| } |
| |
| .hero-content { |
| max-width: 800px; |
| margin: 0 auto; |
| padding: 0 20px; |
| } |
| |
| .hero h2 { |
| font-size: 48px; |
| margin-bottom: 20px; |
| color: white; |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.5); |
| } |
| |
| .hero p { |
| font-size: 18px; |
| margin-bottom: 30px; |
| text-shadow: 1px 1px 2px rgba(0,0,0,0.5); |
| } |
| |
| .btn { |
| display: inline-block; |
| padding: 12px 30px; |
| background-color: var(--yellow); |
| color: var(--dark-green); |
| text-decoration: none; |
| border-radius: 30px; |
| font-weight: 600; |
| transition: all 0.3s; |
| border: 2px solid var(--yellow); |
| } |
| |
| .btn:hover { |
| background-color: transparent; |
| color: var(--yellow); |
| } |
| |
| .btn-outline { |
| background-color: transparent; |
| color: white; |
| border: 2px solid white; |
| margin-left: 15px; |
| } |
| |
| .btn-outline:hover { |
| background-color: white; |
| color: var(--dark-gray); |
| } |
| |
| |
| .features { |
| padding: 80px 0; |
| background-color: white; |
| } |
| |
| .section-title { |
| text-align: center; |
| margin-bottom: 50px; |
| } |
| |
| .section-title h2 { |
| font-size: 36px; |
| color: var(--dark-green); |
| margin-bottom: 15px; |
| position: relative; |
| display: inline-block; |
| } |
| |
| .section-title h2::after { |
| content: ''; |
| position: absolute; |
| width: 50%; |
| height: 3px; |
| background-color: var(--yellow); |
| bottom: -10px; |
| left: 25%; |
| } |
| |
| .section-title p { |
| color: var(--dark-gray); |
| max-width: 700px; |
| margin: 0 auto; |
| } |
| |
| .features-grid { |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| gap: 30px; |
| margin-top: 50px; |
| } |
| |
| .feature-card { |
| background-color: var(--gray); |
| padding: 30px; |
| border-radius: 10px; |
| text-align: center; |
| transition: transform 0.3s, box-shadow 0.3s; |
| } |
| |
| .feature-card:hover { |
| transform: translateY(-10px); |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); |
| } |
| |
| .feature-icon { |
| background-color: var(--dark-green); |
| width: 80px; |
| height: 80px; |
| border-radius: 50%; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| margin: 0 auto 20px; |
| color: var(--yellow); |
| font-size: 30px; |
| } |
| |
| .feature-card h3 { |
| color: var(--dark-green); |
| margin-bottom: 15px; |
| font-size: 22px; |
| } |
| |
| |
| .products { |
| padding: 80px 0; |
| background-color: var(--light-gray); |
| } |
| |
| .product-tabs { |
| display: flex; |
| justify-content: center; |
| margin-bottom: 40px; |
| } |
| |
| .tab-btn { |
| padding: 10px 25px; |
| background-color: transparent; |
| border: none; |
| cursor: pointer; |
| font-size: 16px; |
| font-weight: 600; |
| color: var(--dark-gray); |
| position: relative; |
| transition: all 0.3s; |
| } |
| |
| .tab-btn:not(:last-child) { |
| margin-right: 15px; |
| } |
| |
| .tab-btn.active { |
| color: var(--dark-green); |
| } |
| |
| .tab-btn.active::after { |
| content: ''; |
| position: absolute; |
| width: 100%; |
| height: 3px; |
| background-color: var(--yellow); |
| bottom: -5px; |
| left: 0; |
| } |
| |
| .products-grid { |
| display: grid; |
| grid-template-columns: repeat(4, 1fr); |
| gap: 25px; |
| } |
| |
| .product-card { |
| background-color: white; |
| border-radius: 10px; |
| overflow: hidden; |
| box-shadow: 0 5px 15px rgba(0,0,0,0.1); |
| transition: transform 0.3s, box-shadow 0.3s; |
| } |
| |
| .product-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 25px rgba(0,0,0,0.15); |
| } |
| |
| .product-img { |
| height: 200px; |
| overflow: hidden; |
| position: relative; |
| } |
| |
| .product-img img { |
| width: 100%; |
| height: 100%; |
| object-fit: cover; |
| transition: transform 0.5s; |
| } |
| |
| .product-card:hover .product-img img { |
| transform: scale(1.1); |
| } |
| |
| .product-badge { |
| position: absolute; |
| top: 10px; |
| right: 10px; |
| background-color: var(--yellow); |
| color: var(--dark-green); |
| padding: 5px 10px; |
| border-radius: 20px; |
| font-size: 12px; |
| font-weight: bold; |
| } |
| |
| .product-content { |
| padding: 20px; |
| } |
| |
| .product-category { |
| color: var(--dark-gray); |
| font-size: 12px; |
| margin-bottom: 5px; |
| display: block; |
| } |
| |
| .product-title { |
| font-size: 18px; |
| color: var(--dark-green); |
| margin-bottom: 10px; |
| font-weight: 600; |
| } |
| |
| .product-price { |
| display: flex; |
| align-items: center; |
| margin-bottom: 15px; |
| } |
| |
| .current-price { |
| font-size: 18px; |
| font-weight: 700; |
| color: var(--dark-green); |
| margin-right: 10px; |
| } |
| |
| .old-price { |
| font-size: 14px; |
| color: #999; |
| text-decoration: line-through; |
| } |
| |
| .product-rating { |
| color: var(--yellow); |
| margin-bottom: 15px; |
| font-size: 14px; |
| } |
| |
| .add-to-cart { |
| width: 100%; |
| padding: 8px 0; |
| background-color: var(--dark-green); |
| color: white; |
| border: none; |
| border-radius: 5px; |
| cursor: pointer; |
| font-weight: 600; |
| transition: background-color 0.3s; |
| } |
| |
| .add-to-cart:hover { |
| background-color: var(--yellow); |
| color: var(--dark-green); |
| } |
| |
| |
| .smart-kitchen { |
| padding: 80px 0; |
| background-color: var(--dark-green); |
| color: white; |
| } |
| |
| .smart-kitchen .section-title h2 { |
| color: white; |
| } |
| |
| .smart-kitchen .section-title p { |
| color: var(--gray); |
| } |
| |
| .smart-kitchen-content { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 50px; |
| align-items: center; |
| } |
| |
| .smart-kitchen-img { |
| border-radius: 10px; |
| overflow: hidden; |
| box-shadow: 0 15px 30px rgba(0,0,0,0.3); |
| } |
| |
| .smart-kitchen-img img { |
| width: 100%; |
| height: auto; |
| display: block; |
| } |
| |
| .smart-kitchen-text { |
| padding-right: 20px; |
| } |
| |
| .smart-kitchen-text h3 { |
| font-size: 30px; |
| margin-bottom: 20px; |
| } |
| |
| .smart-kitchen-text p { |
| margin-bottom: 20px; |
| } |
| |
| .feature-list { |
| margin-bottom: 30px; |
| } |
| |
| .feature-item { |
| display: flex; |
| align-items: center; |
| margin-bottom: 15px; |
| } |
| |
| .feature-item i { |
| color: var(--yellow); |
| margin-right: 15px; |
| font-size: 20px; |
| } |
| |
| |
| .testimonials { |
| padding: 80px 0; |
| background-color: var(--light-gray); |
| } |
| |
| .testimonials-grid { |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| gap: 30px; |
| } |
| |
| .testimonial-card { |
| background-color: white; |
| padding: 30px; |
| border-radius: 10px; |
| box-shadow: 0 5px 15px rgba(0,0,0,0.05); |
| position: relative; |
| } |
| |
| .quote-icon { |
| color: var(--yellow); |
| font-size: 40px; |
| opacity: 0.3; |
| position: absolute; |
| top: 20px; |
| right: 20px; |
| } |
| |
| .testimonial-text { |
| margin-bottom: 20px; |
| font-style: italic; |
| color: var(--dark-gray); |
| } |
| |
| .testimonial-author { |
| display: flex; |
| align-items: center; |
| } |
| |
| .author-img { |
| width: 50px; |
| height: 50px; |
| border-radius: 50%; |
| overflow: hidden; |
| margin-right: 15px; |
| } |
| |
| .author-img img { |
| width: 100%; |
| height: 100%; |
| object-fit: cover; |
| } |
| |
| .author-info h4 { |
| color: var(--dark-green); |
| margin-bottom: 5px; |
| } |
| |
| .author-info p { |
| color: #777; |
| font-size: 14px; |
| } |
| |
| |
| .newsletter { |
| padding: 60px 0; |
| background-color: var(--yellow); |
| } |
| |
| .newsletter-container { |
| max-width: 700px; |
| margin: 0 auto; |
| text-align: center; |
| } |
| |
| .newsletter h3 { |
| font-size: 30px; |
| color: var(--dark-green); |
| margin-bottom: 20px; |
| } |
| |
| .newsletter p { |
| margin-bottom: 30px; |
| color: var(--dark-gray); |
| } |
| |
| .newsletter-form { |
| display: flex; |
| max-width: 500px; |
| margin: 0 auto; |
| } |
| |
| .newsletter-form input { |
| flex: 1; |
| padding: 15px 20px; |
| border: none; |
| border-radius: 30px 0 0 30px; |
| font-size: 16px; |
| outline: none; |
| } |
| |
| .newsletter-form button { |
| padding: 15px 30px; |
| background-color: var(--dark-green); |
| color: white; |
| border: none; |
| border-radius: 0 30px 30px 0; |
| font-weight: 600; |
| cursor: pointer; |
| transition: background-color 0.3s; |
| } |
| |
| .newsletter-form button:hover { |
| background-color: var(--dark-gray); |
| } |
| |
| |
| footer { |
| background-color: var(--dark-green); |
| color: white; |
| padding: 60px 0 20px; |
| } |
| |
| .footer-grid { |
| display: grid; |
| grid-template-columns: 2fr 1fr 1fr 1fr; |
| gap: 50px; |
| margin-bottom: 40px; |
| } |
| |
| .footer-logo { |
| margin-bottom: 20px; |
| display: flex; |
| align-items: center; |
| } |
| |
| .footer-logo img { |
| height: 40px; |
| margin-right: 10px; |
| } |
| |
| .footer-logo-text h3 { |
| color: white; |
| font-size: 20px; |
| margin-bottom: 5px; |
| } |
| |
| .footer-logo-text p { |
| color: var(--gray); |
| font-size: 12px; |
| font-style: italic; |
| } |
| |
| .footer-about p { |
| margin-bottom: 20px; |
| color: var(--gray); |
| } |
| |
| .social-links { |
| display: flex; |
| } |
| |
| .social-links a { |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| width: 40px; |
| height: 40px; |
| background-color: rgba(255,255,255,0.1); |
| border-radius: 50%; |
| margin-right: 15px; |
| color: white; |
| transition: background-color 0.3s; |
| } |
| |
| .social-links a:hover { |
| background-color: var(--yellow); |
| color: var(--dark-green); |
| } |
| |
| .footer-title { |
| color: white; |
| font-size: 18px; |
| margin-bottom: 20px; |
| position: relative; |
| padding-bottom: 10px; |
| } |
| |
| .footer-title::after { |
| content: ''; |
| position: absolute; |
| width: 50px; |
| height: 2px; |
| background-color: var(--yellow); |
| bottom: 0; |
| left: 0; |
| } |
| |
| .footer-links ul { |
| list-style: none; |
| } |
| |
| .footer-links ul li { |
| margin-bottom: 10px; |
| } |
| |
| .footer-links ul li a { |
| color: var(--gray); |
| text-decoration: none; |
| transition: color 0.3s; |
| } |
| |
| .footer-links ul li a:hover { |
| color: var(--yellow); |
| } |
| |
| .contact-info { |
| display: flex; |
| align-items: flex-start; |
| margin-bottom: 15px; |
| } |
| |
| .contact-info i { |
| color: var(--yellow); |
| margin-right: 15px; |
| font-size: 18px; |
| margin-top: 3px; |
| } |
| |
| .footer-bottom { |
| text-align: center; |
| padding-top: 20px; |
| border-top: 1px solid rgba(255,255,255,0.1); |
| color: var(--gray); |
| font-size: 14px; |
| } |
| |
| |
| @media (max-width: 992px) { |
| .features-grid, .testimonials-grid { |
| grid-template-columns: repeat(2, 1fr); |
| } |
| |
| .products-grid { |
| grid-template-columns: repeat(3, 1fr); |
| } |
| |
| .footer-grid { |
| grid-template-columns: repeat(2, 1fr); |
| gap: 30px; |
| } |
| |
| .smart-kitchen-content { |
| grid-template-columns: 1fr; |
| } |
| |
| .smart-kitchen-text { |
| padding-right: 0; |
| margin-top: 30px; |
| } |
| } |
| |
| @media (max-width: 768px) { |
| .header-container { |
| flex-direction: column; |
| padding: 15px 0; |
| } |
| |
| nav ul { |
| margin-top: 20px; |
| flex-wrap: wrap; |
| justify-content: center; |
| } |
| |
| nav ul li { |
| margin: 0 10px 10px; |
| } |
| |
| .cart-icon { |
| margin-left: 0; |
| margin-top: 20px; |
| } |
| |
| .hero h2 { |
| font-size: 36px; |
| } |
| |
| .hero p { |
| font-size: 16px; |
| } |
| |
| .btn { |
| padding: 10px 20px; |
| } |
| |
| .products-grid { |
| grid-template-columns: repeat(2, 1fr); |
| } |
| } |
| |
| @media (max-width: 576px) { |
| .features-grid, .products-grid, .testimonials-grid { |
| grid-template-columns: 1fr; |
| } |
| |
| .footer-grid { |
| grid-template-columns: 1fr; |
| } |
| |
| .newsletter-form { |
| flex-direction: column; |
| } |
| |
| .newsletter-form input { |
| border-radius: 30px; |
| margin-bottom: 10px; |
| } |
| |
| .newsletter-form button { |
| border-radius: 30px; |
| } |
| |
| .tab-btn { |
| padding: 8px 15px; |
| font-size: 14px; |
| } |
| } |
| </style> |
| </head> |
| <body> |
| |
| <header> |
| <div class="container header-container"> |
| <div class="logo"> |
| <img src="https://via.placeholder.com/50x50/1a3e2e/ffffff?text=B4.0" alt="BẾP 4.0 Logo"> |
| <div class="logo-text"> |
| <h1>BẾP 4.0</h1> |
| <p>Giữ bếp trong tâm - Trăm năm chăm sóc</p> |
| </div> |
| </div> |
| <nav> |
| <ul> |
| <li><a href="#home">Trang chủ</a></li> |
| <li><a href="#products">Sản phẩm</a></li> |
| <li><a href="#smart-kitchen">Tủ bếp thông minh</a></li> |
| <li><a href="#about">Về chúng tôi</a></li> |
| <li><a href="#contact">Liên hệ</a></li> |
| </ul> |
| </nav> |
| <div class="cart-icon"> |
| <i class="fas fa-shopping-cart fa-lg"></i> |
| <span class="cart-count">3</span> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <section class="hero" id="home"> |
| <div class="hero-content"> |
| <h2>Không gian bếp hoàn hảo cho căn nhà của bạn</h2> |
| <p>BẾP 4.0 cung cấp giải pháp nhà bếp thông minh, cao cấp với công nghệ tiên tiến và thiết kế tinh tế</p> |
| <a href="#products" class="btn">Khám phá ngay</a> |
| <a href="#smart-kitchen" class="btn btn-outline">Tủ bếp thông minh</a> |
| </div> |
| </section> |
|
|
| |
| <section class="features"> |
| <div class="container"> |
| <div class="section-title"> |
| <h2>Vì sao chọn BẾP 4.0</h2> |
| <p>Chúng tôi mang đến không gian bếp hoàn hảo với chất lượng vượt trội và dịch vụ tận tâm</p> |
| </div> |
| <div class="features-grid"> |
| <div class="feature-card"> |
| <div class="feature-icon"> |
| <i class="fas fa-medal"></i> |
| </div> |
| <h3>Chất lượng cao cấp</h3> |
| <p>Sản phẩm được sản xuất từ nguyên liệu cao cấp, đảm bảo độ bền vượt trội và an toàn tuyệt đối</p> |
| </div> |
| <div class="feature-card"> |
| <div class="feature-icon"> |
| <i class="fas fa-lightbulb"></i> |
| </div> |
| <h3>Công nghệ thông minh</h3> |
| <p>Tích hợp công nghệ 4.0 giúp căn bếp của bạn trở nên thông minh và tiện nghi hơn bao giờ hết</p> |
| </div> |
| <div class="feature-card"> |
| <div class="feature-icon"> |
| <i class="fas fa-paint-roller"></i> |
| </div> |
| <h3>Thiết kế tinh tế</h3> |
| <p>Đội ngũ thiết kế chuyên nghiệp mang đến không gian bếp sang trọng, đẳng cấp cho ngôi nhà bạn</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="products" id="products"> |
| <div class="container"> |
| <div class="section-title"> |
| <h2>Sản phẩm nổi bật</h2> |
| <p>Khám phá bộ sưu tập phụ kiện và thiết bị nhà bếp cao cấp của chúng tôi</p> |
| </div> |
| <div class="product-tabs"> |
| <button class="tab-btn active">Tất cả</button> |
| <button class="tab-btn">Thiết bị</button> |
| <button class="tab-btn">Phụ kiện</button> |
| <button class="tab-btn">Đồ dùng</button> |
| </div> |
| <div class="products-grid"> |
| <div class="product-card"> |
| <div class="product-img"> |
| <img src="https://images.unsplash.com/photo-1583772264489-8c8160a5818e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Bếp từ"> |
| <span class="product-badge">Mới</span> |
| </div> |
| <div class="product-content"> |
| <span class="product-category">Thiết bị nấu</span> |
| <h3 class="product-title">Bếp từ đôi cao cấp</h3> |
| <div class="product-price"> |
| <span class="current-price">12.990.000đ</span> |
| <span class="old-price">15.990.000đ</span> |
| </div> |
| <div class="product-rating"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star-half-alt"></i> |
| <span>(24 đánh giá)</span> |
| </div> |
| <button class="add-to-cart">Thêm vào giỏ</button> |
| </div> |
| </div> |
| <div class="product-card"> |
| <div class="product-img"> |
| <img src="https://images.unsplash.com/photo-1611250282006-4484dd3fba6b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Máy hút mùi"> |
| </div> |
| <div class="product-content"> |
| <span class="product-category">Thiết bị bếp</span> |
| <h3 class="product-title">Máy hút mùi cảm ứng</h3> |
| <div class="product-price"> |
| <span class="current-price">8.490.000đ</span> |
| </div> |
| <div class="product-rating"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="far fa-star"></i> |
| <span>(18 đánh giá)</span> |
| </div> |
| <button class="add-to-cart">Thêm vào giỏ</button> |
| </div> |
| </div> |
| <div class="product-card"> |
| <div class="product-img"> |
| <img src="https://images.unsplash.com/photo-1545173168-9f1947eebb7f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Bộ dao"> |
| <span class="product-badge">Bán chạy</span> |
| </div> |
| <div class="product-content"> |
| <span class="product-category">Đồ dùng nhà bếp</span> |
| <h3 class="product-title">Bộ 6 dao cao cấp</h3> |
| <div class="product-price"> |
| <span class="current-price">3.290.000đ</span> |
| <span class="old-price">4.500.000đ</span> |
| </div> |
| <div class="product-rating"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <span>(42 đánh giá)</span> |
| </div> |
| <button class="add-to-cart">Thêm vào giỏ</button> |
| </div> |
| </div> |
| <div class="product-card"> |
| <div class="product-img"> |
| <img src="https://images.unsplash.com/photo-1515934751635-c81c6bc9a2d8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Tủ bếp"> |
| <span class="product-badge">Giảm giá</span> |
| </div> |
| <div class="product-content"> |
| <span class="product-category">Tủ bếp</span> |
| <h3 class="product-title">Tủ bếp gỗ công nghiệp</h3> |
| <div class="product-price"> |
| <span class="current-price">25.990.000đ</span> |
| <span class="old-price">32.990.000đ</span> |
| </div> |
| <div class="product-rating"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star-half-alt"></i> |
| <span>(36 đánh giá)</span> |
| </div> |
| <button class="add-to-cart">Thêm vào giỏ</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="smart-kitchen" id="smart-kitchen"> |
| <div class="container"> |
| <div class="section-title"> |
| <h2>Tủ bếp thông minh</h2> |
| <p>Giải pháp tủ bếp thông minh trọn gói cho mọi không gian nhà bạn</p> |
| </div> |
| <div class="smart-kitchen-content"> |
| <div class="smart-kitchen-img"> |
| <img src="https://images.unsplash.com/photo-1556911220-bff31c812dba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2068&q=80" alt="Tủ bếp thông minh"> |
| </div> |
| <div class="smart-kitchen-text"> |
| <h3>Không gian bếp hoàn hảo theo cách của bạn</h3> |
| <p>BẾP 4.0 mang đến giải pháp tủ bếp thông minh trọn gói với thiết kế tối ưu không gian và tích hợp công nghệ hiện đại, giúp bạn tận hưởng trọn vẹn niềm vui nấu nướng.</p> |
| <div class="feature-list"> |
| <div class="feature-item"> |
| <i class="fas fa-check"></i> |
| <p>Thiết kế tối ưu theo không gian và phong cách sống của bạn</p> |
| </div> |
| <div class="feature-item"> |
| <i class="fas fa-check"></i> |
| <p>Tích hợp hệ thống chiếu sáng thông minh, cảm ứng chạm</p> |
| </div> |
| <div class="feature-item"> |
| <i class="fas fa-check"></i> |
| <p>Chất liệu cao cấp, bền vững với thời gian</p> |
| </div> |
| <div class="feature-item"> |
| <i class="fas fa-check"></i> |
| <p>Tủ bếp thông minh với ngăn kéo tự động</p> |
| </div> |
| </div> |
| <a href="#contact" class="btn btn-outline">Tư vấn thiết kế</a> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="testimonials"> |
| <div class="container"> |
| <div class="section-title"> |
| <h2>Khách hàng nói gì về chúng tôi</h2> |
| <p>Những phản hồi chân thành từ khách hàng đã tin tưởng và sử dụng sản phẩm của BẾP 4.0</p> |
| </div> |
| <div class="testimonials-grid"> |
| <div class="testimonial-card"> |
| <div class="quote-icon"> |
| <i class="fas fa-quote-right"></i> |
| </div> |
| <p class="testimonial-text"> |
| "Tôi vô cùng hài lòng với tủ bếp thông minh của BẾP 4.0. Thiết kế tinh tế nhưng rất tiện dụng, chất lượng vượt trội so với nhiều hãng khác. Dịch vụ tư vấn và lắp đặt rất chuyên nghiệp." |
| </p> |
| <div class="testimonial-author"> |
| <div class="author-img"> |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Chị Ngọc"> |
| </div> |
| <div class="author-info"> |
| <h4>Chị Ngọc</h4> |
| <p>Biên Hòa, Đồng Nai</p> |
| </div> |
| </div> |
| </div> |
| <div class="testimonial-card"> |
| <div class="quote-icon"> |
| <i class="fas fa-quote-right"></i> |
| </div> |
| <p class="testimonial-text"> |
| "Bếp từ của BẾP 4.0 nấu ăn rất nhanh và tiết kiệm điện. Đặc biệt thích tính năng hẹn giờ và khóa an toàn cho trẻ nhỏ. Nhân viên tư vấn rất nhiệt tình, giao hàng đúng hẹn." |
| </p> |
| <div class="testimonial-author"> |
| <div class="author-img"> |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Anh Tuấn"> |
| </div> |
| <div class="author-info"> |
| <h4>Anh Tuấn</h4> |
| <p>Quận 7, TP.HCM</p> |
| </div> |
| </div> |
| </div> |
| <div class="testimonial-card"> |
| <div class="quote-icon"> |
| <i class="fas fa-quote-right"></i> |
| </div> |
| <p class="testimonial-text"> |
| "Sau 3 năm sử dụng tủ bếp gỗ công nghiệp của BẾP 4.0, tôi hoàn toàn yên tâm về chất lượng. Bề mặt vẫn như mới, hệ thống ngăn kéo hoạt động trơn tru. Sẽ tiếp tục ủng hộ khi có nhu cầu." |
| </p> |
| <div class="testimonial-author"> |
| <div class="author-img"> |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Chị Mai"> |
| </div> |
| <div class="author-info"> |
| <h4>Chị Mai</h4> |
| <p>Quận 3, TP.HCM</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="newsletter"> |
| <div class="container newsletter-container"> |
| <h3>Đăng ký nhận ưu đãi</h3> |
| <p>Đăng ký email để nhận thông tin khuyến mãi mới nhất từ BẾP 4.0 và quà tặng voucher giảm giá 10% cho đơn hàng đầu tiên</p> |
| <form class="newsletter-form"> |
| <input type="email" placeholder="Nhập email của bạn..." required> |
| <button type="submit">Đăng ký</button> |
| </form> |
| </div> |
| </section> |
|
|
| |
| <footer id="contact"> |
| <div class="container"> |
| <div class="footer-grid"> |
| <div class="footer-about"> |
| <div class="footer-logo"> |
| <img src="https://via.placeholder.com/40x40/1a3e2e/ffffff?text=B4.0" alt="BẾP 4.0 Logo"> |
| <div class="footer-logo-text"> |
| <h3>BẾP 4.0</h3> |
| <p>Giữ bếp trong tâm - Trăm năm chăm sóc</p> |
| </div> |
| </div> |
| <p>Công ty chuyên cung cấp thiết bị và phụ kiện nhà bếp cao cấp, giải pháp tủ bếp thông minh trọn gói cho mọi gia đình Việt.</p> |
| <div class="social-links"> |
| <a href="#"><i class="fab fa-facebook-f"></i></a> |
| <a href="#"><i class="fab fa-instagram"></i></a> |
| <a href="#"><i class="fab fa-youtube"></i></a> |
| <a href="#"><i class="fab fa-zalo"></i></a> |
| </div> |
| </div> |
| <div class="footer-links"> |
| <h4 class="footer-title">Liên kết nhanh</h4> |
| <ul> |
| <li><a href="#home">Trang chủ</a></li> |
| <li><a href="#products">Sản phẩm</a></li> |
| <li><a href="#smart-kitchen">Tủ bếp thông minh</a></li> |
| <li><a href="#about">Giới thiệu</a></li> |
| <li><a href="#contact">Liên hệ</a></li> |
| </ul> |
| </div> |
| <div class="footer-links"> |
| <h4 class="footer-title">Hỗ trợ</h4> |
| <ul> |
| <li><a href="#">Chính sách bảo hành</a></li> |
| <li><a href="#">Hướng dẫn mua hàng</a></li> |
| <li><a href="#">Câu hỏi thường gặp</a></li> |
| <li><a href="#">Chính sách thanh toán</a></li> |
| <li><a href="#">Chính sách vận chuyển</a></li> |
| </ul> |
| </div> |
| <div class="footer-contact"> |
| <h4 class="footer-title">Liên hệ</h4> |
| <div class="contact-info"> |
| <i class="fas fa-map-marker-alt"></i> |
| <p>Số 123 Đường 30/4, P.9, Quận 3, TP.HCM</p> |
| </div> |
| <div class="contact-info"> |
| <i class="fas fa-phone-alt"></i> |
| <p>0909 123 456 - 028 3923 4567</p> |
| </div> |
| <div class="contact-info"> |
| <i class="fas fa-envelope"></i> |
| <p>info@bep40.vn</p> |
| </div> |
| <div class="contact-info"> |
| <i class="fas fa-clock"></i> |
| <p>Thứ 2 - Thứ 7: 8:00 - 18:00<br>Chủ nhật: 8:00 - 12:00</p> |
| </div> |
| </div> |
| </div> |
| <div class="footer-bottom"> |
| <p>© 2023 BẾP 4.0. All Rights Reserved. Designed by Bếp 4.0 Team</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| const tabBtns = document.querySelectorAll('.tab-btn'); |
| const allProducts = document.querySelectorAll('.product-card'); |
| |
| tabBtns.forEach(btn => { |
| btn.addEventListener('click', () => { |
| |
| tabBtns.forEach(b => b.classList.remove('active')); |
| |
| btn.classList.add('active'); |
| |
| |
| |
| allProducts.forEach(product => { |
| product.style.display = 'block'; |
| }); |
| }); |
| }); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function(e) { |
| e.preventDefault(); |
| |
| const targetId = this.getAttribute('href'); |
| if(targetId === '#') return; |
| |
| const targetElement = document.querySelector(targetId); |
| if(targetElement) { |
| window.scrollTo({ |
| top: targetElement.offsetTop - 80, |
| behavior: 'smooth' |
| }); |
| } |
| }); |
| }); |
| |
| |
| const addToCartBtns = document.querySelectorAll('.add-to-cart'); |
| const cartCount = document.querySelector('.cart-count'); |
| let count = parseInt(cartCount.textContent); |
| |
| addToCartBtns.forEach(btn => { |
| btn.addEventListener('click', () => { |
| count++; |
| cartCount.textContent = count; |
| |
| |
| cartCount.style.transform = 'scale(1.5)'; |
| setTimeout(() => { |
| cartCount.style.transform = 'scale(1)'; |
| }, 300); |
| |
| |
| alert('Sản phẩm đã được thêm vào giỏ hàng!'); |
| }); |
| }); |
| |
| |
| const newsletterForm = document.querySelector('.newsletter-form'); |
| newsletterForm.addEventListener('submit', (e) => { |
| e.preventDefault(); |
| const email = newsletterForm.querySelector('input').value; |
| alert(`Cảm ơn bạn đã đăng ký nhận ưu đãi với email ${email}. Chúng tôi sẽ liên hệ với bạn sớm!`); |
| newsletterForm.reset(); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body> |
| </html> |
