Hugging Face's logo

Spaces:
BackGohan
/
deepsite-project
Running

App Files Community
deepsite-project / index.html
BackGohan's picture
BackGohan
Create a single landing page called Sublime Design, it will begin selling only 5 products and this will be on the front page, will contain a cart and shop of the prodcuts, each product will have it's on description of data and separate landing page if required
3675eac verified
Raw History Blame Contribute Delete
17.6 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sublime Design - Premium Home Decor</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Top Bar -->
<div class="top-bar">
<div class="container d-flex justify-content-between">
<div class="contacts">
<span><i class="fas fa-phone"></i> +1 (555) 123-4567</span>
<span><i class="fas fa-envelope"></i> contact@sublimedesign.com</span>
</div>
<div class="account">
<a href="#"><i class="fas fa-user"></i> My Account</a>
<a href="#"><i class="fas fa-heart"></i> Wishlist</a>
<a href="#"><i class="fas fa-shopping-cart"></i> Cart</a>
</div>
</div>
</div>
<!-- Header -->
<header class="header">
<div class="container">
<div class="row align-items-center">
<div class="col-md-3 col-6">
<div class="logo">
<h1>Sublime Design</h1>
</div>
</div>
<div class="col-md-6 d-none d-md-block">
<div class="search-box">
<input type="text" placeholder="Search products...">
<button><i class="fas fa-search"></i></button>
</div>
</div>
<div class="col-md-3 col-6 text-end">
<div class="cart-icon">
<i class="fas fa-shopping-cart"></i>
<span class="cart-count">0</span>
</div>
</div>
</div>
</div>
</header>
<!-- Navigation -->
<nav class="main-nav">
<div class="container">
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Furniture</a></li>
<li><a href="#">Lighting</a></li>
<li><a href="#">Decor</a></li>
<li><a href="#">Textiles</a></li>
<li><a href="#">Sale</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<!-- Hero Banner -->
<section class="hero-banner">
<div class="container">
<div class="hero-content">
<h2>Elevate Your Space</h2>
<p>Discover premium home decor for every style</p>
<a href="#" class="btn btn-primary">Shop Now</a>
</div>
</div>
</section>
<!-- Featured Categories -->
<section class="featured-categories">
<div class="container">
<h2 class="section-title">Shop by Category</h2>
<div class="row">
<div class="col-md-3 col-6">
<a href="#" class="category-card">
<img src="http://static.photos/home/640x360/1" alt="Living Room">
<h3>Living Room</h3>
</a>
</div>
<div class="col-md-3 col-6">
<a href="#" class="category-card">
<img src="http://static.photos/home/640x360/2" alt="Bedroom">
<h3>Bedroom</h3>
</a>
</div>
<div class="col-md-3 col-6">
<a href="#" class="category-card">
<img src="http://static.photos/home/640x360/3" alt="Dining">
<h3>Dining</h3>
</a>
</div>
<div class="col-md-3 col-6">
<a href="#" class="category-card">
<img src="http://static.photos/home/640x360/4" alt="Office">
<h3>Office</h3>
</a>
</div>
</div>
</div>
</section>
<!-- Featured Products -->
<section class="featured-products">
<div class="container">
<h2 class="section-title">Our Premium Collection</h2>
<div class="row">
<!-- Product 1 -->
<div class="col-md-3 col-6">
<div class="product-card">
<div class="product-badge">Best Seller</div>
<div class="product-img">
<img src="http://static.photos/furniture/640x360/11" alt="Minimalist Sofa">
</div>
<div class="product-info">
<h3>Minimalist Sofa</h3>
<p class="product-desc">Premium fabric with solid wood frame</p>
<div class="price">$799.99</div>
<button class="btn btn-add-to-cart">Add to Cart</button>
</div>
</div>
</div>
<!-- Product 2 -->
<div class="col-md-3 col-6">
<div class="product-card">
<div class="product-badge">New Arrival</div>
<div class="product-img">
<img src="http://static.photos/furniture/640x360/22" alt="Marble Coffee Table">
</div>
<div class="product-info">
<h3>Marble Coffee Table</h3>
<p class="product-desc">Italian marble top with brass legs</p>
<div class="price">$499.99</div>
<button class="btn btn-add-to-cart">Add to Cart</button>
</div>
</div>
</div>
<!-- Product 3 -->
<div class="col-md-3 col-6">
<div class="product-card">
<div class="product-img">
<img src="http://static.photos/decor/640x360/33" alt="Ceramic Vase Set">
</div>
<div class="product-info">
<h3>Ceramic Vase Set</h3>
<p class="product-desc">Handcrafted set of 3 ceramic vases</p>
<div class="price">$129.99</div>
<button class="btn btn-add-to-cart">Add to Cart</button>
</div>
</div>
</div>
<!-- Product 4 -->
<div class="col-md-3 col-6">
<div class="product-card">
<div class="product-img">
<img src="http://static.photos/lighting/640x360/44" alt="Brass Floor Lamp">
</div>
<div class="product-info">
<h3>Brass Floor Lamp</h3>
<p class="product-desc">Adjustable height with dimmable LED</p>
<div class="price">$299.99</div>
<button class="btn btn-add-to-cart">Add to Cart</button>
</div>
</div>
</div>
<!-- Product 5 -->
<div class="col-md-3 col-6">
<div class="product-card">
<div class="product-badge">Limited Edition</div>
<div class="product-img">
<img src="http://static.photos/textiles/640x360/55" alt="Luxury Throw Blanket">
</div>
<div class="product-info">
<h3>Luxury Throw Blanket</h3>
<p class="product-desc">100% cashmere, handwoven</p>
<div class="price">$179.99</div>
<button class="btn btn-add-to-cart">Add to Cart</button>
</div>
</div>
</div>
</div>
<div class="product-details-section mt-5">
<div class="container">
<h3>Product Details</h3>
<div class="details-content">
<p>All our products come with a 2-year warranty and free shipping on orders over $200. Click on any product image to view full specifications and customization options.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Shopping Cart Modal -->
<div class="modal fade" id="cartModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Your Shopping Cart</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="cart-items">
<!-- Cart items will be dynamically added here -->
<div class="empty-cart text-center py-5">
<i class="fas fa-shopping-cart fa-4x mb-3"></i>
<h4>Your cart is empty</h4>
<p>Start shopping to add items to your cart</p>
</div>
</div>
</div>
<div class="modal-footer">
<div class="cart-total w-100">
<div class="d-flex justify-content-between">
<strong>Total:</strong>
<strong>$0.00</strong>
</div>
</div>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Continue Shopping</button>
<button type="button" class="btn btn-primary">Checkout</button>
</div>
</div>
</div>
</div>
<!-- Product Quick View -->
<div class="modal fade" id="quickViewModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="quickViewTitle">Product Details</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<img src="" id="quickViewImage" class="img-fluid" alt="Product Image">
</div>
<div class="col-md-6">
<h3 id="quickViewName"></h3>
<div class="price mb-3" id="quickViewPrice"></div>
<p id="quickViewDescription"></p>
<div class="quantity-selector mb-3">
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" value="1" min="1">
</div>
<button class="btn btn-primary w-100 mb-3">Add to Cart</button>
<div class="product-meta">
<span><i class="fas fa-truck"></i> Free shipping on orders over $200</span>
<span><i class="fas fa-shield-alt"></i> 2-year warranty included</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Special Offer -->
<section class="testimonials">
<div class="container">
<h2 class="section-title">What Our Customers Say</h2>
<div class="row">
<div class="col-md-4">
<div class="testimonial-card">
<div class="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>
</div>
<p>"The quality of the furniture exceeded my expectations. Will definitely shop here again!"</p>
<div class="customer">
<img src="http://static.photos/people/100x100/1" alt="Sarah J.">
<span>Sarah J.</span>
</div>
</div>
</div>
<div class="col-md-4">
<div class="testimonial-card">
<div class="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>
</div>
<p>"Fast shipping and excellent customer service. My new coffee table looks amazing!"</p>
<div class="customer">
<img src="http://static.photos/people/100x100/2" alt="Michael T.">
<span>Michael T.</span>
</div>
</div>
</div>
<div class="col-md-4">
<div class="testimonial-card">
<div class="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>
</div>
<p>"Beautiful products at reasonable prices. The wall art completed my living room perfectly."</p>
<div class="customer">
<img src="http://static.photos/people/100x100/3" alt="Emma R.">
<span>Emma R.</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Newsletter -->
<section class="newsletter">
<div class="container">
<div class="newsletter-content">
<h2>Subscribe to Our Newsletter</h2>
<p>Get the latest updates on new products and special offers</p>
<form>
<input type="email" placeholder="Your email address">
<button type="submit" class="btn btn-primary">Subscribe</button>
</form>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-md-3">
<h3>Sublime Design</h3>
<p>Premium home decor and furniture for modern living spaces.</p>
<div class="social-icons">
<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-pinterest-p"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
</div>
</div>
<div class="col-md-3">
<h3>Quick Links</h3>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="col-md-3">
<h3>Customer Service</h3>
<ul>
<li><a href="#">My Account</a></li>
<li><a href="#">Order Tracking</a></li>
<li><a href="#">Shipping Policy</a></li>
<li><a href="#">Returns & Exchanges</a></li>
</ul>
</div>
<div class="col-md-3">
<h3>Contact Us</h3>
<ul>
<li><i class="fas fa-map-marker-alt"></i> 123 Design Street, New York</li>
<li><i class="fas fa-phone"></i> +1 (555) 123-4567</li>
<li><i class="fas fa-envelope"></i> contact@sublimedesign.com</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>&copy; 2023 Sublime Design. All Rights Reserved.</p>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="script.js"></script>
</body>
</html>