|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<title>Clazorra | Tienda Online de Cerveza Artesanal</title> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, viewport-fit=cover" /> |
|
|
<meta charset="utf-8"> |
|
|
<meta name="description" content="Compra online cerveza artesanal premium. Envíos a todo Chile. Variedad de estilos cerveceros y packs especiales."> |
|
|
<meta name="keywords" content="cerveza artesanal, comprar cerveza online, tienda craft beer, clazorra, cerveza premium, delivery cerveza"> |
|
|
<meta property="og:title" content="Cerveza Artesanal Clazorra"> |
|
|
<meta property="og:description" content="Cerveza artesanal premium elaborada con los mejores ingredientes."> |
|
|
<meta property="og:type" content="product"> |
|
|
<meta name="robots" content="index, follow"> |
|
|
<link rel="canonical" href="https://clazorra.cl/"> |
|
|
<meta property="og:url" content="https://clazorra.cl/"> |
|
|
<meta name="theme-color" content="#f8b500"> |
|
|
<style> |
|
|
:root { |
|
|
--primary-color: #f8b500; |
|
|
--secondary-color: #2c3e50; |
|
|
--text-color: #333; |
|
|
--light-bg: #f9f9f9; |
|
|
--font-main: 'Montserrat', sans-serif; |
|
|
--font-secondary: 'Open Sans', sans-serif; |
|
|
} |
|
|
|
|
|
* { |
|
|
box-sizing: border-box; |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: var(--font-main); |
|
|
color: var(--text-color); |
|
|
line-height: 1.6; |
|
|
background-color: var(--light-bg); |
|
|
} |
|
|
|
|
|
h1, h2, h3 { |
|
|
font-weight: 700; |
|
|
line-height: 1.2; |
|
|
} |
|
|
|
|
|
a { |
|
|
text-decoration: none; |
|
|
color: inherit; |
|
|
} |
|
|
|
|
|
img { |
|
|
max-width: 100%; |
|
|
height: auto; |
|
|
} |
|
|
|
|
|
.hero { |
|
|
min-height: 100vh; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
text-align: center; |
|
|
padding: 2rem; |
|
|
background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('images/hero-bg.jpg') no-repeat center/cover; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.hero h1 { |
|
|
font-size: clamp(2.5rem, 5vw, 4rem); |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.hero h1 span { |
|
|
color: var(--primary-color); |
|
|
} |
|
|
|
|
|
.hero-subtitle { |
|
|
font-size: 1.25rem; |
|
|
margin-bottom: 2rem; |
|
|
max-width: 600px; |
|
|
} |
|
|
|
|
|
.cta-button { |
|
|
display: inline-block; |
|
|
padding: 0.8rem 2rem; |
|
|
background-color: var(--primary-color); |
|
|
color: var(--secondary-color); |
|
|
border-radius: 50px; |
|
|
font-weight: 600; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.cta-button:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 10px 20px rgba(0,0,0,0.1); |
|
|
} |
|
|
|
|
|
.product-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); |
|
|
gap: 2rem; |
|
|
padding: 2rem; |
|
|
} |
|
|
|
|
|
.product-card { |
|
|
background: white; |
|
|
border-radius: 8px; |
|
|
overflow: hidden; |
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1); |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
|
|
|
.product-card:hover { |
|
|
transform: translateY(-5px); |
|
|
} |
|
|
|
|
|
.product-card img { |
|
|
width: 100%; |
|
|
height: 300px; |
|
|
object-fit: cover; |
|
|
} |
|
|
|
|
|
.product-card h3 { |
|
|
padding: 1rem 1rem 0; |
|
|
} |
|
|
|
|
|
.price { |
|
|
font-weight: bold; |
|
|
color: var(--primary-color); |
|
|
padding: 0 1rem; |
|
|
} |
|
|
|
|
|
.add-to-cart { |
|
|
display: block; |
|
|
width: 100%; |
|
|
padding: 0.75rem; |
|
|
background: var(--secondary-color); |
|
|
color: white; |
|
|
border: none; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.cart-sidebar { |
|
|
position: fixed; |
|
|
right: 0; |
|
|
top: 0; |
|
|
width: 350px; |
|
|
height: 100vh; |
|
|
background: white; |
|
|
box-shadow: -2px 0 10px rgba(0,0,0,0.1); |
|
|
padding: 1.5rem; |
|
|
transform: translateX(100%); |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
|
|
|
.cart-sidebar.active { |
|
|
transform: translateX(0); |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.hero { |
|
|
padding: 1rem; |
|
|
} |
|
|
.product-grid { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
.cart-sidebar { |
|
|
width: 100%; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Open+Sans&display=swap" rel="stylesheet"> |
|
|
</head> |
|
|
<body> |
|
|
<header role="banner" class="site-header"> |
|
|
<nav role="navigation" aria-label="Main navigation"> |
|
|
|
|
|
</nav> |
|
|
</header> |
|
|
|
|
|
<main role="main"> |
|
|
<section class="hero" aria-labelledby="hero-heading"> |
|
|
<h1 id="hero-heading">Cerveza Artesanal <span>Clazorra</span></h1> |
|
|
<p class="hero-subtitle">Compra online y recibe en tu casa. Envíos a todo Chile</p> |
|
|
<div class="hero-cta"> |
|
|
<a href="#nuestras-cervezas" class="cta-button">Ver Catálogo</a> |
|
|
<a href="#ofertas" class="cta-button secondary">Ofertas Especiales</a> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section id="nuestras-cervezas" class="products" aria-labelledby="products-heading"> |
|
|
<h2 id="products-heading">Nuestras Cervezas</h2> |
|
|
<div class="product-grid"> |
|
|
<article class="product-card" itemscope itemtype="http://schema.org/Product"> |
|
|
<img src="images/ipa.jpg" alt="IPA Clazorra" itemprop="image"> |
|
|
<h3 itemprop="name">IPA Artesanal</h3> |
|
|
<p class="price" itemprop="offers" itemscope itemtype="http://schema.org/Offer"> |
|
|
<span itemprop="priceCurrency" content="CLP">$</span> |
|
|
<span itemprop="price" content="6990">6.990</span> |
|
|
</p> |
|
|
<button class="add-to-cart" aria-label="Añadir IPA al carrito">Añadir al Carrito</button> |
|
|
</article> |
|
|
|
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="about" aria-labelledby="about-heading"> |
|
|
<h2 id="about-heading">Nuestra Historia</h2> |
|
|
|
|
|
</section> |
|
|
</main> |
|
|
|
|
|
<aside class="cart-sidebar" aria-label="Carrito de compras"> |
|
|
<h3>Tu Carrito</h3> |
|
|
<div class="cart-items"> |
|
|
|
|
|
</div> |
|
|
<div class="cart-total"> |
|
|
<p>Total: <span>$0</span></p> |
|
|
</div> |
|
|
<a href="/checkout" class="checkout-button">Proceder al Pago</a> |
|
|
</aside> |
|
|
|
|
|
<footer role="contentinfo" class="site-footer"> |
|
|
<div class="footer-sections"> |
|
|
<section aria-labelledby="footer-shop"> |
|
|
<h4 id="footer-shop">Comprar</h4> |
|
|
<ul> |
|
|
<li><a href="/cervezas">Todas las Cervezas</a></li> |
|
|
<li><a href="/ofertas">Ofertas</a></li> |
|
|
<li><a href="/packs">Packs Especiales</a></li> |
|
|
</ul> |
|
|
</section> |
|
|
<section aria-labelledby="footer-info"> |
|
|
<h4 id="footer-info">Información</h4> |
|
|
<ul> |
|
|
<li><a href="/envios">Envíos y Despachos</a></li> |
|
|
<li><a href="/pagos">Métodos de Pago</a></li> |
|
|
<li><a href="/preguntas">Preguntas Frecuentes</a></li> |
|
|
</ul> |
|
|
</section> |
|
|
</div> |
|
|
<div class="copyright"> |
|
|
<p>© 2023 Clazorra Cerveza Artesanal. Todos los derechos reservados.</p> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script src="js/main.js" defer></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 <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=vimar212/lazorra" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
|
|
|
