<div id="footaura">
<style>
#footaura {
--lime: #c9ff00;
--black: #101110;
--cream: #f7f7f2;
font-family: Arial, Helvetica, sans-serif;
color: var(--black);
background: var(--cream);
margin: -20px;
}
#footaura * { box-sizing: border-box; }
#footaura a { color: inherit; text-decoration: none; }
#footaura button, #footaura input, #footaura select { font: inherit; }
#footaura .fa-top {
background: var(--lime); text-align: center;
padding: 10px; font-size: 11px; font-weight: 900;
letter-spacing: 1px;
}
#footaura .fa-nav {
display: flex; align-items: center; justify-content: space-between;
gap: 18px; padding: 18px 5%; background: white;
border-bottom: 1px solid #ddd;
}
#footaura .fa-logo {
font-size: 27px; font-weight: 1000; letter-spacing: -1.5px;
}
#footaura .fa-logo span { color: #849900; }
#footaura .fa-links { display: flex; gap: 20px; font-size: 12px; font-weight: 900; }
#footaura .fa-links a:hover { text-decoration: underline; }
#footaura .fa-cart {
border: 2px solid var(--black); background: var(--lime);
padding: 10px 14px; font-weight: 900; cursor: pointer;
}
#footaura .fa-hero {
display: grid; grid-template-columns: 1fr 1fr;
gap: 30px; align-items: center; padding: 65px 7%;
}
#footaura .fa-kicker {
font-size: 11px; font-weight: 900; letter-spacing: 2px;
text-transform: uppercase;
}
#footaura h1 {
font-size: clamp(48px, 7vw, 88px); line-height: .9;
letter-spacing: -5px; margin: 24px 0; font-weight: 1000;
}
#footaura h1 span {
background: var(--lime); padding: 0 5px;
}
#footaura .fa-copy { line-height: 1.8; color: #62645d; font-size: 15px; }
#footaura .fa-btn {
display: inline-block; border: 2px solid var(--black);
background: var(--black); color: white !important;
padding: 14px 20px; font-size: 11px; font-weight: 900;
text-transform: uppercase; cursor: pointer; margin-top: 15px;
}
#footaura .fa-btn:hover { background: var(--lime); color: var(--black) !important; }
#footaura .fa-hero-art {
min-height: 350px; background: var(--lime);
display: flex; justify-content: center; align-items: center;
border-radius: 45% 45% 5px 5px; position: relative;
}
#footaura .fa-big-shoe {
font-size: clamp(110px, 18vw, 200px);
transform: rotate(-20deg);
filter: drop-shadow(0 18px 8px #0002);
}
#footaura .fa-sticker {
position: absolute; right: 15px; top: 20px;
border-radius: 50%; background: var(--black); color: white;
width: 82px; height: 82px; display: grid; place-items: center;
text-align: center; font-size: 11px; font-weight: 900;
}
#footaura .fa-strip {
padding: 15px; text-align: center; background: var(--black);
color: var(--lime); font-size: 12px; font-weight: 900;
letter-spacing: 2px;
}
#footaura .fa-section { padding: 55px 6%; }
#footaura h2 {
font-size: clamp(30px, 4vw, 48px); letter-spacing: -2px;
text-transform: uppercase; line-height: 1; margin: 10px 0 25px;
}
#footaura .fa-categories {
display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
}
#footaura .fa-category {
padding: 20px 8px; border: 1px solid #ddd; background: white;
cursor: pointer; text-align: center; font-size: 11px; font-weight: 900;
}
#footaura .fa-category:hover, #footaura .fa-category.active {
background: var(--lime); border-color: var(--black);
}
#footaura .fa-category b { display: block; font-size: 30px; margin-bottom: 10px; }
#footaura .fa-shop { background: #edeee6; padding: 55px 6%; }
#footaura .fa-tools { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
#footaura .fa-tools input, #footaura .fa-tools select {
background: white; border: 1px solid #ccc; padding: 13px;
}
#footaura .fa-tools input { flex: 1; min-width: 180px; }
#footaura .fa-filters { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 22px; }
#footaura .fa-filter {
background: transparent; border: 1px solid #bbb;
padding: 9px 12px; font-size: 10px; font-weight: 900; cursor: pointer;
}
#footaura .fa-filter.active { background: var(--black); color: white; }
#footaura .fa-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
#footaura .fa-product { background: white; border: 1px solid #ddd; min-width: 0; }
#footaura .fa-product-art {
height: 175px; background: var(--tone, #e7f4b0);
display: grid; place-items: center; position: relative;
}
#footaura .fa-product-art span { font-size: 75px; transform: rotate(-15deg); }
#footaura .fa-tag {
position: absolute; top: 10px; left: 10px;
background: var(--lime); padding: 5px; font-size: 9px; font-weight: 900;
}
#footaura .fa-product-info { padding: 13px; }
#footaura .fa-product-info small { color: #666; text-transform: uppercase; }
#footaura .fa-product-info h3 { font-size: 14px; margin: 7px 0; }
#footaura .fa-product-bottom {
display: flex; align-items: center; justify-content: space-between;
gap: 6px; margin-top: 12px;
}
#footaura .fa-add {
background: var(--black); color: white; border: 0;
width: 34px; height: 34px; font-size: 22px; cursor: pointer;
}
#footaura .fa-add:hover { background: var(--lime); color: var(--black); }
#footaura .fa-promo {
background: var(--black); color: white; padding: 45px 7%;
display: flex; justify-content: space-between; align-items: center; gap: 25px;
}
#footaura .fa-promo h2 { font-size: clamp(36px, 5vw, 60px); }
#footaura .fa-promo p { color: #ccc; line-height: 1.7; }
#footaura .fa-benefits {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 12px; padding: 35px 5%; text-align: center;
}
#footaura .fa-benefits b { display: block; margin: 8px; font-size: 12px; }
#footaura .fa-benefits small { color: #666; }
#footaura .fa-newsletter { background: var(--lime); text-align: center; padding: 45px 5%; }
#footaura .fa-newsletter input { padding: 13px; max-width: 280px; width: 65%; border: 2px solid var(--black); }
#footaura .fa-newsletter button {
padding: 13px; border: 2px solid var(--black);
background: var(--black); color: white; font-weight: 900; cursor: pointer;
}
#footaura .fa-footer { background: var(--black); color: white; padding: 30px 6%; }
#footaura .fa-footer p { color: #bbb; font-size: 12px; line-height: 1.7; }
#footaura .fa-cart-box {
background: white; border: 2px solid var(--black); padding: 18px;
margin: 15px 0; display: none;
}
#footaura .fa-cart-box.open { display: block; }
#footaura .fa-cart-row { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid #ddd; font-size: 12px; }
#footaura .fa-clear { background: none; border: 0; cursor: pointer; font-weight: 900; }
#footaura .fa-notice { font-size: 12px; margin-top: 10px; }
@media(max-width: 800px) {
#footaura .fa-hero { grid-template-columns: 1fr; padding: 40px 6%; }
#footaura .fa-categories { grid-template-columns: repeat(3, 1fr); }
#footaura .fa-products { grid-template-columns: repeat(2, 1fr); }
#footaura .fa-links { gap: 10px; flex-wrap: wrap; }
}
@media(max-width: 520px) {
#footaura { margin: -10px; }
#footaura .fa-nav { flex-wrap: wrap; }
#footaura .fa-links { width: 100%; justify-content: space-between; }
#footaura .fa-categories { grid-template-columns: repeat(2, 1fr); }
#footaura .fa-product-art { height: 135px; }
#footaura .fa-product-art span { font-size: 60px; }
#footaura .fa-benefits { grid-template-columns: repeat(2, 1fr); }
#footaura .fa-promo { flex-direction: column; align-items: flex-start; }
}
</style>
<div class="fa-top">FRESH KICKS. BIG ENERGY. ✳ FOOTWEAR FOR EVERY MOOD.</div>
<nav class="fa-nav">
<a href="#fa-home" class="fa-logo">foot<span>aura.</span></a>
<div class="fa-links">
<a href="#fa-home">Home</a>
<a href="#fa-categories">Categories</a>
<a href="#fa-shop">Shop all</a>
<a href="#fa-story">Our vibe</a>
</div>
<button class="fa-cart" id="fa-cart-toggle">BAG (<span id="fa-count">0</span>)</button>
</nav>
<section class="fa-hero" id="fa-home">
<div>
<div class="fa-kicker">✳ Your style. Your stride.</div>
<h1>MAKE<br>MOVES.<br><span>MAKE WAVES.</span></h1>
<p class="fa-copy">From everyday essentials to statement sneakers — find the pair that matches your mood. All kinds of shoes, all in one place.</p>
<a href="#fa-shop" class="fa-btn">SHOP THE DROP ↗</a>
</div>
<div class="fa-hero-art">
<div class="fa-sticker">STEP INTO<br>YOUR VIBE ✳</div>
<div class="fa-big-shoe">👟</div>
</div>
</section>
<div class="fa-strip">FIND YOUR FIT ✳ OWN YOUR WALK ✳ STAY IN MOTION ✳</div>
<section class="fa-section" id="fa-categories">
<div class="fa-kicker">ONE DESTINATION. EVERY OCCASION.</div>
<h2>Pick your personality.</h2>
<div class="fa-categories">
<button class="fa-category active" data-fa-cat="All"><b>✨</b>All Kicks</button>
<button class="fa-category" data-fa-cat="Sneakers"><b>👟</b>Sneakers</button>
<button class="fa-category" data-fa-cat="Sports"><b>🏃</b>Sports Shoes</button>
<button class="fa-category" data-fa-cat="Casual"><b>🛹</b>Casual</button>
<button class="fa-category" data-fa-cat="Formal"><b>👞</b>Formal</button>
<button class="fa-category" data-fa-cat="Sandals"><b>🩴</b>Sandals & Slides</button>
</div>
</section>
<section class="fa-shop" id="fa-shop">
<div class="fa-kicker">THE CURRENT ROTATION</div>
<h2>Fresh picks<span style="color:#8ba900">.</span></h2>
<div class="fa-tools">
<input id="fa-search" type="search" placeholder="Search shoes..." aria-label="Search shoes">
<select id="fa-sort" aria-label="Sort products">
<option value="featured">Featured</option>
<option value="low">Price: Low to high</option>
<option value="high">Price: High to low</option>
</select>
</div>
<div class="fa-filters">
<button class="fa-filter active" data-fa-cat="All">All</button>
<button class="fa-filter" data-fa-cat="Sneakers">Sneakers</button>
<button class="fa-filter" data-fa-cat="Sports">Sports</button>
<button class="fa-filter" data-fa-cat="Casual">Casual</button>
<button class="fa-filter" data-fa-cat="Formal">Formal</button>
<button class="fa-filter" data-fa-cat="Boots">Boots</button>
<button class="fa-filter" data-fa-cat="Sandals">Sandals</button>
</div>
<div class="fa-products" id="fa-products"></div>
<div class="fa-cart-box" id="fa-cart-box">
<h3>YOUR BAG 🛍️</h3>
<div id="fa-cart-items"></div>
<p><b>Subtotal: <span id="fa-total">₹0</span></b></p>
<p class="fa-notice">Demo cart only. Connect a real checkout system to accept orders and payments.</p>
</div>
</section>
<section class="fa-promo" id="fa-story">
<div>
<div class="fa-kicker" style="color:#c9ff00">NOT JUST FOOTWEAR. A WHOLE MOOD.</div>
<h2>WALK IN.<br>STAND OUT.</h2>
<p>Keep it classic, go loud or switch it up.<br>Your feet, your expression.</p>
<a href="#fa-shop" class="fa-btn" style="background:#c9ff00;color:#101110!important">FIND YOUR PAIR ↗</a>
</div>
<div style="font-size:100px">👟💥</div>
</section>
<section class="fa-benefits">
<div>🚚<b>Easy Delivery</b><small>Shipping at checkout</small></div>
<div>🔒<b>Secure Checkout</b><small>Shop with confidence</small></div>
<div>↩️<b>Easy Returns</b><small>Policy applies</small></div>
<div>💬<b>Customer Support</b><small>We're here to help</small></div>
</section>
<section class="fa-newsletter">
<div class="fa-kicker">GET IN THE LOOP</div>
<h2>GOOD SHOES. GREAT NEWS.</h2>
<p>Get new-drop alerts and style inspiration.</p>
<form id="fa-news-form">
<input type="email" placeholder="Your email address" required>
<button type="submit">COUNT ME IN ↗</button>
</form>
<p id="fa-news-message" class="fa-notice"></p>
</section>
<footer class="fa-footer">
<div class="fa-logo" style="color:white">foot<span>aura.</span></div>
<p>A one-stop shoe destination for every fit, every plan and every personality.<br>Find your stride. Own your vibe.</p>
<p>Shop · Sneakers · Sports · Casual · Formal · Boots · Sandals</p>
<hr style="border-color:#444">
<small>© <span id="fa-year"></span> FootAura. All rights reserved.</small>
</footer>
<script>
(function () {
const root = document.getElementById("footaura");
if (!root || root.dataset.started) return;
root.dataset.started = "yes";
const items = [
{id:1,name:"Street Pulse Low",cat:"Sneakers",price:2499,icon:"👟",tone:"#e8f6a9",tag:"Bestseller"},
{id:2,name:"Velocity Runner",cat:"Sports",price:3199,icon:"🏃",tone:"#dce8ff",tag:"Performance"},
{id:3,name:"Daily Drift Canvas",cat:"Casual",price:1299,icon:"👟",tone:"#f8dfc9",tag:"Everyday"},
{id:4,name:"Boardwalk Classic",cat:"Sneakers",price:2799,icon:"🛹",tone:"#e9ddff",tag:"Trending"},
{id:5,name:"Office Mode Oxford",cat:"Formal",price:2899,icon:"👞",tone:"#e6e2dc",tag:"Smart pick"},
{id:6,name:"Trailblazer Boots",cat:"Boots",price:3999,icon:"🥾",tone:"#f2d8b7",tag:"Built tough"},
{id:7,name:"Cloud Nine Slides",cat:"Sandals",price:899,icon:"🩴",tone:"#d8f2ef",tag:"Easy wear"},
{id:8,name:"Court Vision Pro",cat:"Sports",price:3599,icon:"👟",tone:"#f6dce5",tag:"New drop"},
{id:9,name:"Campus Flex Loafer",cat:"Formal",price:2199,icon:"👞",tone:"#e4e9d5",tag:"Versatile"},
{id:10,name:"Weekend Wanderer",cat:"Casual",price:1699,icon:"🥾",tone:"#dfe7f0",tag:"Comfy pick"},
{id:11,name:"Slide Theory",cat:"Sandals",price:699,icon:"🩴",tone:"#e8e0ff",tag:"Under ₹1k"},
{id:12,name:"Midnight Street Boot",cat:"Boots",price:4299,icon:"🥾",tone:"#e3e3e3",tag:"Statement"}
];
let category = "All";
let bag = [];
const fmt = n => "₹" + n.toLocaleString("en-IN");
const grid = root.querySelector("#fa-products");
function render() {
let list = items.filter(p =>
(category === "All" || p.cat === category) &&
(p.name + " " + p.cat).toLowerCase().includes(root.querySelector("#fa-search").value.toLowerCase())
);
const sort = root.querySelector("#fa-sort").value;
if (sort === "low") list.sort((a,b) => a.price-b.price);
if (sort === "high") list.sort((a,b) => b.price-a.price);
grid.innerHTML = list.length ? list.map(p => `
<article class="fa-product">
<div class="fa-product-art" style="--tone:${p.tone}">
<small class="fa-tag">${p.tag}</small><span>${p.icon}</span>
</div>
<div class="fa-product-info">
<small>${p.cat}</small><h3>${p.name}</h3>
<div class="fa-product-bottom"><b>${fmt(p.price)}</b>
<button class="fa-add" data-fa-add="${p.id}" aria-label="Add ${p.name} to bag">+</button>
</div>
</div>
</article>`).join("") : "<p>No products found. Try another search.</p>";
}
function renderBag() {
root.querySelector("#fa-count").textContent = bag.reduce((s,x) => s+x.qty,0);
root.querySelector("#fa-cart-items").innerHTML = bag.length ? bag.map(x => {
const p = items.find(y => y.id === x.id);
return `<div class="fa-cart-row"><span>${p.icon} ${p.name} × ${x.qty}</span><b>${fmt(p.price*x.qty)} <button class="fa-clear" data-fa-remove="${p.id}">×</button></b></div>`;
}).join("") : "<p>Your bag is empty. Find your next favourite pair!</p>";
root.querySelector("#fa-total").textContent = fmt(bag.reduce((s,x) => s+items.find(y => y.id===x.id).price*x.qty,0));
}
root.addEventListener("click", e => {
const add = e.target.closest("[data-fa-add]");
const remove = e.target.closest("[data-fa-remove]");
const cat = e.target.closest("[data-fa-cat]");
if (add) {
const id = Number(add.dataset.faAdd);
const existing = bag.find(x => x.id === id);
existing ? existing.qty++ : bag.push({id,qty:1});
renderBag();
}
if (remove) {
bag = bag.filter(x => x.id !== Number(remove.dataset.faRemove));
renderBag();
}
if (cat) {
category = cat.dataset.faCat;
root.querySelectorAll("[data-fa-cat]").forEach(b => b.classList.toggle("active", b.dataset.faCat === category));
render();
if (cat.classList.contains("fa-category")) root.querySelector("#fa-shop").scrollIntoView({behavior:"smooth"});
}
});
root.querySelector("#fa-search").addEventListener("input", render);
root.querySelector("#fa-sort").addEventListener("change", render);
root.querySelector("#fa-cart-toggle").addEventListener("click", () => {
const box = root.querySelector("#fa-cart-box");
box.classList.toggle("open");
if (box.classList.contains("open")) box.scrollIntoView({behavior:"smooth",block:"nearest"});
});
root.querySelector("#fa-news-form").addEventListener("submit", e => {
e.preventDefault();
root.querySelector("#fa-news-message").textContent = "Thanks for your interest! Connect an email service to collect subscriptions.";
e.target.reset();
});
root.querySelector("#fa-year").textContent = new Date().getFullYear();
render();
renderBag();
})();
</script>
</div>
