Luxury Redefined

Discover timeless fashion crafted for modern elegance.

Shop Now

Featured Collection

Watch

Luxury Watch

$299

Shoes

Premium Shoes

$189

Bag

Elegant Bag

$249

/* css/style.css */ *{ margin:0; padding:0; box-sizing:border-box; font-family:'Poppins',sans-serif; } html{ scroll-behavior:smooth; } body{ background:#0d0d0d; color:#fff; } a{ text-decoration:none; color:#fff; } ul{ list-style:none; } /* Navbar */ .navbar{ position:fixed; top:0; left:0; width:100%; display:flex; justify-content:space-between; align-items:center; padding:20px 8%; background:#000; border-bottom:1px solid rgba(255,215,0,.2); z-index:1000; } .logo{ font-size:32px; font-weight:700; color:#FFD700; letter-spacing:4px; } .nav-links{ display:flex; gap:35px; } .nav-links a{ transition:.3s; } .nav-links a:hover{ color:#FFD700; } .icons{ display:flex; gap:20px; } .icons i{ font-size:20px; cursor:pointer; transition:.3s; } .icons i:hover{ color:#FFD700; } /* Hero */ .hero{ height:100vh; background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)), url("../assets/images/hero.jpg"); background-size:cover; background-position:center; display:flex; justify-content:center; align-items:center; text-align:center; } .hero-content h1{ font-size:70px; color:#FFD700; } .hero-content p{ margin:25px 0; font-size:20px; color:#ddd; } .btn{ display:inline-block; padding:15px 45px; background:#FFD700; color:#000; border-radius:40px; font-weight:600; transition:.4s; } .btn:hover{ background:#fff; transform:translateY(-5px); } /* Featured */ .featured{ padding:100px 8%; } .featured h2{ text-align:center; color:#FFD700; font-size:42px; margin-bottom:60px; } .products{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:30px; } .card{ background:#181818; border-radius:20px; overflow:hidden; transition:.4s; border:1px solid rgba(255,215,0,.15); } .card:hover{ transform:translateY(-10px); box-shadow:0 0 25px rgba(255,215,0,.25); } .card img{ width:100%; height:320px; object-fit:cover; } .card h3{ padding:20px; } .card p{ padding:0 20px; color:#FFD700; font-size:22px; } .card button{ width:calc(100% - 40px); margin:20px; padding:14px; border:none; border-radius:30px; background:#FFD700; color:#000; cursor:pointer; font-size:16px; font-weight:600; transition:.3s; } .card button:hover{ background:#fff; } /* Banner */ .banner{ text-align:center; padding:120px 20px; background:#111; } .banner h2{ font-size:50px; color:#FFD700; } .banner p{ margin:20px 0 35px; font-size:20px; } /* Footer */ footer{ background:#000; padding:60px 20px; text-align:center; } footer h2{ color:#FFD700; margin-bottom:15px; } .social{ margin:25px 0; } .social a{ margin:0 10px; } .social i{ font-size:22px; transition:.3s; } .social i:hover{ color:#FFD700; } .copy{ color:#888; margin-top:20px; } /* css/responsive.css */ @media (max-width: 992px){ .navbar{ flex-direction:column; gap:20px; padding:20px; } .nav-links{ flex-wrap:wrap; justify-content:center; } .hero-content h1{ font-size:55px; } .featured h2{ font-size:36px; } .banner h2{ font-size:40px; } } @media (max-width:768px){ .hero{ padding:20px; } .hero-content h1{ font-size:42px; } .hero-content p{ font-size:17px; } .products{ grid-template-columns:1fr; } .card img{ height:280px; } .btn{ padding:14px 35px; } footer{ padding:40px 15px; } } @media (max-width:480px){ .logo{ font-size:26px; } .nav-links{ gap:15px; } .nav-links a{ font-size:15px; } .icons{ gap:15px; } .hero-content h1{ font-size:32px; } .hero-content p{ font-size:15px; } .featured{ padding:70px 20px; } .featured h2{ font-size:28px; } .banner{ padding:80px 20px; } .banner h2{ font-size:30px; } .banner p{ font-size:16px; } .card img{ height:240px; } } // js/app.js // Navbar Shadow const navbar = document.querySelector(".navbar"); window.addEventListener("scroll", () => { if (window.scrollY > 50) { navbar.style.boxShadow = "0 10px 30px rgba(0,0,0,.5)"; } else { navbar.style.boxShadow = "none"; } }); // Add To Cart Button const buttons = document.querySelectorAll(".card button"); buttons.forEach(button => { button.addEventListener("click", () => { button.innerHTML = "✔ Added"; button.style.background = "#16a34a"; setTimeout(() => { button.innerHTML = "Add To Cart"; button.style.background = "#FFD700"; }, 1500); }); }); // Reveal Animation const cards = document.querySelectorAll(".card"); const reveal = () => { const trigger = window.innerHeight * 0.85; cards.forEach(card => { const top = card.getBoundingClientRect().top; if(top < trigger){ card.style.opacity = "1"; card.style.transform = "translateY(0)"; } }); }; cards.forEach(card=>{ card.style.opacity="0"; card.style.transform="translateY(50px)"; card.style.transition=".6s"; }); window.addEventListener("scroll", reveal); window.addEventListener("load", reveal); // Hero Fade window.addEventListener("load", () => { document.querySelector(".hero-content").style.opacity = "1"; document.querySelector(".hero-content").style.transform = "translateY(0)"; }); const hero = document.querySelector(".hero-content"); hero.style.opacity = "0"; hero.style.transform = "translateY(40px)"; hero.style.transition = "1s"; // Console console.log("BIOTTUS Luxury Store Loaded"); BIOTTUS | Products

Luxury Collection

Luxury Watch

$299

Premium Shoes

$189

Elegant Bag

$249

Classic Watch

$399

Luxury Sneakers

$210

Leather Bag

$330

BIOTTUS | Shopping Cart

Shopping Cart

Luxury Watch

$299

Premium Shoes

$189

Total : $488


Proceed To Checkout
BIOTTUS | Login

Login

Don't have an account? Create One

BIOTTUS | Sign Up

Create Account

Already have an account? Login

BIOTTUS | Checkout

Checkout

Total: $488
BIOTTUS | Contact

Contact Us

Kolkata, India

+91 9876543210

support@biottus.com

BIOTTUS | About

About BIOTTUS

BIOTTUS is a premium luxury fashion brand designed for modern lifestyle. We believe luxury should be elegant, timeless, and accessible. Our collection includes premium watches, shoes, bags, and exclusive accessories crafted with exceptional quality and style.

Premium Quality

Luxury products made with premium materials.

Fast Delivery

Worldwide shipping with secure packaging.

Secure Payment

100% safe and encrypted payment system.

24/7 Support

Dedicated customer support whenever you need help.

# README.md # BIOTTUS Luxury E-Commerce Website built using HTML, CSS and JavaScript. ## Features - Luxury Black & Gold Design - Responsive Layout - Home Page - Products Page - Shopping Cart - Checkout Page - Login & Signup - About Page - Contact Page - Smooth Animations - Mobile Friendly ## Technologies - HTML5 - CSS3 - JavaScript - Google Fonts - Font Awesome ## Folder Structure BIOTTUS/ │ ├── index.html ├── products.html ├── cart.html ├── checkout.html ├── login.html ├── signup.html ├── contact.html ├── about.html │ ├── css/ │ ├── style.css │ └── responsive.css │ ├── js/ │ └── app.js │ └── assets/ └── images/ ## Installation 1. Download or Clone the repository. 2. Open the BIOTTUS folder. 3. Open index.html in your browser. ## License MIT License © 2026 BIOTTUS