11 lines
4.0 KiB
HTML
11 lines
4.0 KiB
HTML
<!doctype html><html lang="es"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="theme-color" content="#ff3f7f"><meta name="description" content="Ari Shopping, productos seleccionados y compras fáciles desde Colombia."><title>Ari Shopping</title><link rel="icon" href="assets/img/brand/favicon.svg"><link rel="stylesheet" href="assets/css/styles.css"><script defer src="assets/js/app.js"></script></head><body>
|
||
<div class="announcement">Envíos nacionales · Atención personalizada · Precios en COP</div>
|
||
<header><div class="shell head"><a href="#inicio"><img src="assets/img/brand/logo.svg" alt="Ari Shopping"></a><label class="search"><span>⌕</span><input id="search" type="search" placeholder="Busca productos o categorías"></label><a class="ig" href="https://www.instagram.com/ari_shopping1/" target="_blank" rel="noopener">Instagram</a><button id="cartOpen" class="cart">Carrito <b id="cartCount">0</b></button></div></header>
|
||
<main id="inicio"><section class="hero shell"><div><span class="eyebrow">Ari Shopping · Colección destacada</span><h1>Detalles que hacen tu día más especial.</h1><p>Una experiencia de compra moderna, cercana y rápida. Descubre novedades, favoritos y productos seleccionados para ti.</p><div class="heroActions"><a class="btn primary" href="#catalogo">Ver productos</a><a class="btn ghost" href="https://www.instagram.com/ari_shopping1/" target="_blank" rel="noopener">Seguir en Instagram</a></div></div><div class="art"><div><small>Nuevos favoritos</small><strong>Estilo para cada momento</strong><span>Desde $59.900</span></div></div></section>
|
||
<section class="benefits shell"><article><b>01</b><span><strong>Compra simple</strong><small>Agrega y envía tu pedido.</small></span></article><article><b>02</b><span><strong>Catálogo dinámico</strong><small>Productos desde una fuente central.</small></span></article><article><b>03</b><span><strong>Atención directa</strong><small>Confirma disponibilidad antes de pagar.</small></span></article></section>
|
||
<section id="catalogo" class="catalog shell"><div class="sectionTitle"><div><span class="eyebrow">Catálogo dinámico</span><h2>Productos para descubrir</h2><p id="summary">Cargando catálogo...</p></div><select id="sort"><option value="featured">Destacados</option><option value="new">Nuevos</option><option value="asc">Precio: menor</option><option value="desc">Precio: mayor</option></select></div><div id="categories" class="categories"></div><div id="grid" class="grid"></div><div id="empty" class="empty" hidden>No encontramos productos.</div></section>
|
||
<section class="instagram"><div class="shell"><div><span class="eyebrow">Comunidad Ari Shopping</span><h2>Novedades y promociones en Instagram.</h2></div><a class="btn light" href="https://www.instagram.com/ari_shopping1/" target="_blank" rel="noopener">@ari_shopping1</a></div></section></main>
|
||
<footer><div class="shell foot"><img src="assets/img/brand/logo.svg" alt="Ari Shopping"><p>Detalles que enamoran, compras que disfrutas.</p><span>Frontend v2.0.0</span></div></footer>
|
||
<div id="overlay" class="overlay" hidden></div><aside id="drawer" class="drawer" aria-hidden="true"><div class="drawerHead"><div><small>Tu selección</small><h2>Carrito</h2></div><button id="cartClose">×</button></div><div id="cartItems" class="drawerBody"></div><div class="drawerFoot"><div><span>Total estimado</span><strong id="cartTotal">$0</strong></div><button id="checkout" class="btn primary full">Enviar pedido</button><button id="clearCart" class="link">Vaciar carrito</button><small>Precio y disponibilidad se confirman antes del pago.</small></div></aside><div id="toast" class="toast" hidden></div>
|
||
<template id="card"><article class="card"><div class="media"><div class="badges"></div><button class="wish" aria-label="Favorito">♡</button><img loading="lazy"></div><div class="body"><small class="category"></small><h3></h3><div class="price"><strong></strong><del></del></div><p></p><button class="btn primary add">Agregar</button></div></article></template>
|
||
</body></html> |