# Secciones
Las secciones están en el mismo orden en los que se encuentra en la página de referencia. Los textos también son los que se encuentran en dicha página, por lo que si copias el código veréis la misma sección.
El color de fondo de las secciones, "bg-gray-light" está colocado únicamente con fines de presentación, la decisión de usarlo en cada sección dependerá de la página como tal.
# Menu outline
<section>
<div class="cms-container">
<div class="menu">
<a class="btn">Nuestro compromiso</a>
<a class="btn">Nuestro compromiso</a>
<a class="btn">nuestro compromiso</a>
</div>
</div>
</section>
# Menú fill
La única diferencia es que los enlaces llevan una clase extra btn-fill
<section class="bg-gray-light">
<div class="cms-container">
<div class="menu">
<a class="btn btn-fill">Nuestro compromiso</a>
<a class="btn btn-fill">Nuestro compromiso</a>
<a class="btn btn-fill">Nuestro compromiso</a>
</div>
</div>
</section>
# Texto a una columna centrado
<section>
<div class="cms-container">
<div class="grid-1 text-center">
<span class="tagline">Lorem ipsum dolor sit</span>
<h1>Lorem ipsum dolor sit</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At autem beatae cumque debitis distinctio
doloribus, eum minima nam odit officia optio placeat porro, provident quas reiciendis, sint sit
tempora voluptatibus?</p>
</div>
</div>
</section>
# Texto a una columna con titular h2
<section class="bg-gray-light">
<div class="cms-container">
<div class="grid-1">
<h2>Lorem ipsum dolor sit</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non, optio! A aspernatur
consequatur dignissimos hic iure magni maiores quos, ut? Asperiores atque corporis cupiditate
eligendi eum illo quis sequi.</p>
</div>
</div>
</section>
# Texto a una columna con titular h3
<section>
<div class="cms-container">
<div class="grid-1">
<h3>Lorem ipsum dolor sit</h3>
<p class="small">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non, optio! A
aspernatur
consequatur dignissimos hic iure magni maiores quos, ut? Asperiores atque corporis cupiditate
eligendi eum illo quis sequi.</p>
</div>
</div>
</section>
# Texto a dos columnas
<section class="bg-gray-light">
<div class="cms-container">
<div class="grid-2">
<div>
<span class="tagline">Lorem ipsum dolor sit</span>
<h2>Lorem ipsum dolor sit</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet commodi labore maxime non quaerat
recusandae repellat sequi vitae. Animi excepturi maxime praesentium temporibus unde! A beatae
dolore
eligendi illum perspiciatis!</p>
</div>
<div>
<span class="tagline">Lorem ipsum dolor sit</span>
<h2>Lorem ipsum dolor sit</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet commodi labore maxime non quaerat
recusandae repellat sequi vitae. Animi excepturi maxime praesentium temporibus unde! A beatae
dolore
eligendi illum perspiciatis!</p>
</div>
</div>
</div>
</section>
# Texto a tres columnas
<section>
<div class="cms-container">
<div class="grid-3">
<div>
<h3>Lorem ipsum dolor sit</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet commodi labore maxime non quaerat
recusandae repellat sequi vitae. Animi excepturi maxime praesentium temporibus unde! A beatae
dolore
eligendi illum perspiciatis!</p>
</div>
<div>
<h3>Lorem ipsum dolor sit</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet commodi labore maxime non quaerat
recusandae repellat sequi vitae. Animi excepturi maxime praesentium temporibus unde! A beatae
dolore
eligendi illum perspiciatis!</p>
</div>
<div>
<h3>Lorem ipsum dolor sit</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet commodi labore maxime non quaerat
recusandae repellat sequi vitae. Animi excepturi maxime praesentium temporibus unde! A beatae
dolore
eligendi illum perspiciatis!</p>
</div>
</div>
</div>
</section>
# Texto a cuatro columnas
<section class="bg-gray-light">
<div class="cms-container">
<div class="grid-4">
<div>
<h3>Lorem ipsum dolor sit</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet commodi labore maxime non quaerat
recusandae repellat sequi vitae. Animi excepturi maxime praesentium temporibus unde! A beatae
dolore
eligendi illum perspiciatis!</p>
</div>
<div>
<h3>Lorem ipsum dolor sit</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet commodi labore maxime non quaerat
recusandae repellat sequi vitae. Animi excepturi maxime praesentium temporibus unde! A beatae
dolore
eligendi illum perspiciatis!</p>
</div>
<div>
<h3>Lorem ipsum dolor sit</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet commodi labore maxime non quaerat
recusandae repellat sequi vitae. Animi excepturi maxime praesentium temporibus unde! A beatae
dolore
eligendi illum perspiciatis!</p>
</div>
<div>
<h3>Lorem ipsum dolor sit</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet commodi labore maxime non quaerat
recusandae repellat sequi vitae. Animi excepturi maxime praesentium temporibus unde! A beatae
dolore
eligendi illum perspiciatis!</p>
</div>
</div>
</div>
</section>
# Dos columnas: Texto + Imagen con márgen
<section>
<div class="cms-container">
<div class="grid-2 align-center">
<div>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, vero!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit laborum libero maiores neque
omnis
quod rem repellendus unde voluptatem voluptatum. Alias incidunt laborum non praesentium qui sint
totam veritatis voluptatum.</p>
</div>
<div class="text-center">
<img src="https://source.unsplash.com/400x500/?people" class="img-padding">
</div>
</div>
</div>
</section>
# Dos columnas: Imagen + texto
<section class="bg-gray-light">
<div class="cms-container grid-2 align-center">
<img src="https://source.unsplash.com/800x500/?nature">
<div class="text-center">
<span class="tagline">Lorem ipsum dolor sit</span>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, vero!</h2>
<p class="small">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit laborum libero maiores
neque omnis
quod rem repellendus unde voluptatem voluptatum. Alias incidunt laborum non praesentium qui sint
totam veritatis voluptatum.</p>
<a href="Leer más" class="btn btn-big">Leer más</a>
</div>
</div>
</section>
# Tres columnas: Texto + Texto + Imagen
<section>
<div class="cms-container">
<div class="grid-3 align-center">
<div>
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, vero!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit laborum libero maiores neque
omnis
quod rem repellendus unde voluptatem voluptatum. Alias incidunt laborum non praesentium qui sint
totam veritatis voluptatum.</p>
</div>
<div>
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, vero!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit laborum libero maiores neque
omnis
quod rem repellendus unde voluptatem voluptatum. Alias incidunt laborum non praesentium qui sint
totam veritatis voluptatum.</p>
</div>
<img src="https://source.unsplash.com/800x500/?nature">
</div>
</div>
</section>
# Cuatro columnas: Texto + Imagen + Texto + Imagen
<section class="bg-gray-light">
<div class="cms-container">
<div class="grid-4 align-center">
<div>
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, vero!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit laborum libero maiores neque
omnis
quod rem repellendus unde voluptatem voluptatum. Alias incidunt laborum non praesentium qui sint
totam veritatis voluptatum.</p>
</div>
<img src="https://source.unsplash.com/800x800/?nature">
<div>
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, vero!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit laborum libero maiores neque
omnis
quod rem repellendus unde voluptatem voluptatum. Alias incidunt laborum non praesentium qui sint
totam veritatis voluptatum.</p>
</div>
<img src="https://source.unsplash.com/800x800/?nature">
</div>
</div>
</section>
# Dos columnas con espacio extra
<section>
<div class="cms-container">
<div class="grid-2 align-center extra-padding">
<div class="text-center text-center">
<span class="tagline">Lorem ipsum dolor sit</span>
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, vero!</h3>
<p class="small">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit laborum libero
maiores
neque omnis
quod rem repellendus unde voluptatem voluptatum. Alias incidunt laborum non praesentium qui sint
totam veritatis voluptatum.</p>
<img src="https://source.unsplash.com/800x500/?nature">
<a href="Leer más" class="btn btn-big">Leer más</a>
</div>
<div class="text-center text-center">
<span class="tagline">Lorem ipsum dolor sit</span>
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, vero!</h3>
<p class="small">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit laborum libero
maiores
neque omnis
quod rem repellendus unde voluptatem voluptatum. Alias incidunt laborum non praesentium qui sint
totam veritatis voluptatum.</p>
<img src="https://source.unsplash.com/800x500/?nature">
<a href="Leer más" class="btn btn-big">Leer más</a>
</div>
</div>
</div>
</section>
# Dos columnas con cards
<section class="bg-gray-light">
<div class="cms-container">
<div class="grid-2">
<div class="card">
<img src="https://source.unsplash.com/800x500/?nature">
<div class="card-content">
<span class="tagline">Lorem ipsum dolor sit</span>
<h3>Lorem ipsum dolor sit amet, consectetur</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, dolores ipsa ipsum numquam porro
possimus quas quidem repellendus. Assumenda ea eveniet, explicabo molestiae nam officiis
perspiciatis quo sed sint velit.</p>
<a href="" class="arrow-link">Leer más</a>
</div>
</div>
<div class="card">
<img src="https://source.unsplash.com/800x500/?nature">
<div class="card-content">
<span class="tagline">Lorem ipsum dolor sit</span>
<h3>Lorem ipsum dolor sit amet, consectetur</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, dolores ipsa ipsum numquam porro
possimus quas quidem repellendus. Assumenda ea eveniet, explicabo molestiae nam officiis
perspiciatis quo sed sint velit.</p>
<a href="" class="arrow-link">Leer más</a>
</div>
</div>
</div>
</div>
</section>
# Tres columnas con cards
<section>
<div class="cms-container">
<div class="grid-3">
<div class="card">
<img src="https://source.unsplash.com/800x500/?nature">
<div class="card-content">
<span class="tagline">Lorem ipsum dolor sit</span>
<h3>Lorem ipsum dolor sit amet, consectetur</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, dolores ipsa ipsum numquam porro
possimus quas quidem repellendus. Assumenda ea eveniet, explicabo molestiae nam officiis
perspiciatis quo sed sint velit.</p>
<a href="" class="arrow-link">Leer más</a>
</div>
</div>
<div class="card">
<img src="https://source.unsplash.com/800x500/?nature">
<div class="card-content">
<span class="tagline">Lorem ipsum dolor sit</span>
<h3>Lorem ipsum dolor sit amet, consectetur</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, dolores ipsa ipsum numquam porro
possimus quas quidem repellendus. Assumenda ea eveniet, explicabo molestiae nam officiis
perspiciatis quo sed sint velit.</p>
<a href="" class="arrow-link">Leer más</a>
</div>
</div>
<div class="card">
<img src="https://source.unsplash.com/800x500/?nature">
<div class="card-content">
<span class="tagline">Lorem ipsum dolor sit</span>
<h3>Lorem ipsum dolor sit amet, consectetur</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, dolores ipsa ipsum numquam porro
possimus quas quidem repellendus. Assumenda ea eveniet, explicabo molestiae nam officiis
perspiciatis quo sed sint velit.</p>
<a href="" class="arrow-link">Leer más</a>
</div>
</div>
</div>
</div>
</section>
# Cuatro columnas con cards
<section class="bg-gray-light">
<div class="cms-container">
<div class="grid-4">
<div class="card">
<img src="https://source.unsplash.com/800x500/?nature">
<div class="card-content">
<span class="tagline">Lorem ipsum dolor sit</span>
<h3>Lorem ipsum dolor sit amet, consectetur</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, dolores ipsa ipsum numquam porro
possimus quas quidem repellendus. Assumenda ea eveniet, explicabo molestiae nam officiis
perspiciatis quo sed sint velit.</p>
<a href="" class="arrow-link">Leer más</a>
</div>
</div>
<div class="card">
<img src="https://source.unsplash.com/800x500/?nature">
<div class="card-content">
<span class="tagline">Lorem ipsum dolor sit</span>
<h3>Lorem ipsum dolor sit amet, consectetur</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, dolores ipsa ipsum numquam porro
possimus quas quidem repellendus. Assumenda ea eveniet, explicabo molestiae nam officiis
perspiciatis quo sed sint velit.</p>
<a href="" class="arrow-link">Leer más</a>
</div>
</div>
<div class="card">
<img src="https://source.unsplash.com/800x500/?nature">
<div class="card-content">
<span class="tagline">Lorem ipsum dolor sit</span>
<h3>Lorem ipsum dolor sit amet, consectetur</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, dolores ipsa ipsum numquam porro
possimus quas quidem repellendus. Assumenda ea eveniet, explicabo molestiae nam officiis
perspiciatis quo sed sint velit.</p>
<a href="" class="arrow-link">Leer más</a>
</div>
</div>
<div class="card">
<img src="https://source.unsplash.com/800x500/?nature">
<div class="card-content">
<span class="tagline">Lorem ipsum dolor sit</span>
<h3>Lorem ipsum dolor sit amet, consectetur</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, dolores ipsa ipsum numquam porro
possimus quas quidem repellendus. Assumenda ea eveniet, explicabo molestiae nam officiis
perspiciatis quo sed sint velit.</p>
<a href="" class="arrow-link">Leer más</a>
</div>
</div>
</div>
</div>
</section>
# Productos x5
<section>
<div class="cms-container">
<div class="product-grid-5">
<div class="product-card">
<img src="https://source.unsplash.com/300x300/?building">
<a href="">Link</a>
</div>
<div class="product-card">
<img src="https://source.unsplash.com/300x300/?building">
<a href="">Link</a>
</div>
<div class="product-card">
<img src="https://source.unsplash.com/300x300/?building">
<a href="">Link</a>
</div>
<div class="product-card">
<img src="https://source.unsplash.com/300x300/?building">
<a href="">Link</a>
</div>
<div class="product-card">
<img src="https://source.unsplash.com/300x300/?building">
<a href="">Link</a>
</div>
</div>
</div>
</section>
# Productos x6
<section class="bg-gray-light">
<div class="cms-container">
<div class="product-grid-6">
<div class="product-card">
<img src="https://source.unsplash.com/300x300/?building">
<a href="">Link</a>
</div>
<div class="product-card">
<img src="https://source.unsplash.com/300x300/?building">
<a href="">Link</a>
</div>
<div class="product-card">
<img src="https://source.unsplash.com/300x300/?building">
<a href="">Link</a>
</div>
<div class="product-card">
<img src="https://source.unsplash.com/300x300/?building">
<a href="">Link</a>
</div>
<div class="product-card">
<img src="https://source.unsplash.com/300x300/?building">
<a href="">Link</a>
</div>
<div class="product-card">
<img src="https://source.unsplash.com/300x300/?building">
<a href="">Link</a>
</div>
</div>
</div>
</section>
# Productos x7
<section>
<div class="cms-container">
<div class="product-grid-7">
<div class="product-card">
<img src="https://source.unsplash.com/300x300/?building">
<a href="">Link</a>
</div>
<div class="product-card">
<img src="https://source.unsplash.com/300x300/?building">
<a href="">Link</a>
</div>
<div class="product-card">
<img src="https://source.unsplash.com/300x300/?building">
<a href="">Link</a>
</div>
<div class="product-card">
<img src="https://source.unsplash.com/300x300/?building">
<a href="">Link</a>
</div>
<div class="product-card">
<img src="https://source.unsplash.com/300x300/?building">
<a href="">Link</a>
</div>
<div class="product-card">
<img src="https://source.unsplash.com/300x300/?building">
<a href="">Link</a>
</div>
<div class="product-card">
<img src="https://source.unsplash.com/300x300/?building">
<a href="">Link</a>
</div>
</div>
</div>
</section>
# Productos x8
<section class="bg-gray-light">
<div class="cms-container">
<div class="product-grid-8">
<div class="product-card">
<img src="https://source.unsplash.com/300x300/?building">
<a href="">Link</a>
</div>
<div class="product-card">
<img src="https://source.unsplash.com/300x300/?building">
<a href="">Link</a>
</div>
<div class="product-card">
<img src="https://source.unsplash.com/300x300/?building">
<a href="">Link</a>
</div>
<div class="product-card">
<img src="https://source.unsplash.com/300x300/?building">
<a href="">Link</a>
</div>
<div class="product-card">
<img src="https://source.unsplash.com/300x300/?building">
<a href="">Link</a>
</div>
<div class="product-card">
<img src="https://source.unsplash.com/300x300/?building">
<a href="">Link</a>
</div>
<div class="product-card">
<img src="https://source.unsplash.com/300x300/?building">
<a href="">Link</a>
</div>
<div class="product-card">
<img src="https://source.unsplash.com/300x300/?building">
<a href="">Link</a>
</div>
</div>
</div>
</section>
# Producto destacado
<section>
<a class="cms-container card product-card-2-cols" href="#">
<div class="text-center">
<span class="tagline">Lorem ipsum dolor sit</span>
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia.</h3>
</div>
<div class="grid-2 align-center">
<div>
<span class="label label-green">En stock</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus
distinctio ducimus nisi, qui reprehenderit voluptatem.</p>
<p class="small">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur at deserunt
doloremque ducimus, laborum laudantium maiores nostrum porro quae quas quia quidem temporibus
tenetur velit.</p>
<p class="price">99,00 €</p>
</div>
<div class="text-center">
<img src="https://source.unsplash.com/300x300/?window" class="img-padding">
</div>
</div>
</a>
</section>
# Tabs simples
Si existe más de una sección con tabs en una misma página hay que revisar que los id de los input no se repitan. Si esto sucede no funcionará. Además, el for de la etiqueta label tiene que tener el mismo nombre que el id del input que este justo antes.
<section class="bg-gray-light">
<div class="cms-container">
<div class="tabs">
<div class="tab">
<input type="checkbox" id="chck1">
<label for="chck1">Item 1</label>
<div class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur culpa cum est, in ipsa
ipsum iste natus nemo nisi officia officiis qui quo quod repellat reprehenderit rerum saepe
tenetur totam!</p>
</div>
</div>
<div class="tab">
<input type="checkbox" id="chck2">
<label for="chck2">Item 2</label>
<div class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur culpa cum est, in ipsa
ipsum iste natus nemo nisi officia officiis qui quo quod repellat reprehenderit rerum saepe
tenetur totam!</p>
</div>
</div>
</div>
</div>
</section>
# Tabs en grid
En el ejemplo está dentro de un grid de de columnas (grid-2) pero podría colocarse dentro de grid-3 o grid-4
<section>
<div class="cms-container">
<div class="grid-2">
<div class="tabs">
<div class="tab">
<input type="checkbox" id="chck3">
<label for="chck3">Item 1</label>
<div class="tab-content">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur culpa cum est,
in
ipsa
ipsum iste natus nemo nisi officia officiis qui quo quod repellat reprehenderit
rerum
saepe
tenetur totam!</p>
</div>
</div>
</div>
<div class="tab">
<input type="checkbox" id="chck4">
<label for="chck4">Item 2</label>
<div class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur culpa cum est, in
ipsa
ipsum iste natus nemo nisi officia officiis qui quo quod repellat reprehenderit rerum
saepe
tenetur totam!</p>
</div>
</div>
</div>
<div>
<h3>Lorem ipsum dolor sit</h3>
<p class="small">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis dolores expedita
fugit
tempore. Distinctio, esse laborum libero magni perspiciatis praesentium ratione reiciendis rerum
saepe ullam!</p>
</div>
</div>
</div>
</section>
# Cards categoría
En el ejemplo se usa un grid-5, pero puede colocarse en otro grid distinto.
<section class="bg-gray-light">
<div class="cms-container">
<div class="grid-5">
<div class="card">
<img src="https://source.unsplash.com/800x500/?tech">
<div class="card-content">
<p class="text-primary">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p><a
href="#"
class="arrow-link"> 75
ideas</a></div>
</div>
<div class="card">
<img src="https://source.unsplash.com/800x500/?tech">
<div class="card-content">
<p class="text-primary">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p><a
href="#"
class="arrow-link"> 75
ideas</a></div>
</div>
<div class="card">
<img src="https://source.unsplash.com/800x500/?tech">
<div class="card-content">
<p class=" text-primary">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p><a
href="#"
class="arrow-link"> 75
ideas</a></div>
</div>
<div class="card">
<img src="https://source.unsplash.com/800x500/?tech">
<div class="card-content">
<p class="text-primary">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p><a
href="#"
class="arrow-link"> 75
ideas</a></div>
</div>
<div class="card">
<img src="https://source.unsplash.com/800x500/?tech">
<div class="card-content">
<p class="text-primary">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p><a
href="#"
class="arrow-link"> 75
ideas</a></div>
</div>
</div>
</div>
</section>
# Cards productos
En el ejemplo se usa un grid-5, pero puede colocarse en otro grid distinto. El enlace de Ver más productos destacados se puede suprimir sin ningún tipo de problema.
<section>
<div class="cms-container">
<div class="grid-5">
<a class="card" href="#">
<img src="https://source.unsplash.com/800x500/?tech">
<div class="card-content">
<span class="label label-green">Stock</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
<p class="price"> 78,00 €</p>
</div>
</a>
<a class="card" href="#">
<img src="https://source.unsplash.com/800x500/?tech">
<div class="card-content">
<span class="label label-red">Oferta</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
<p class="price"> 78,00 €</p>
</div>
</a>
<a class="card" href="#">
<img src="https://source.unsplash.com/800x500/?tech">
<div class="card-content">
<span class="label label-red">Oferta</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
<p class="price"> 78,00 €</p>
</div>
</a>
<a class="card" href="#">
<img src="https://source.unsplash.com/800x500/?tech">
<div class="card-content">
<span class="label label-red">Oferta</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
<p class="price"> 78,00 €</p>
</div>
</a>
<a class="card" href="#">
<img src="https://source.unsplash.com/800x500/?tech">
<div class="card-content">
<span class="label label-yellow">Oferta</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
<p class="price"> 78,00 €</p>
</div>
</a>
</div>
<p class="link-alone">
<a href="#" class="arrow-link">Ver más productos destacados</a>
</p>
</div>
</section>
# Banner
Al banner hay que introducirle tres imágenes diferentes. La primera es la que se mostrará en dispositivos pequeños cómo móviles. La segunda es para dispositivos medianos y la última es para el resto.
<section class="banner-full">
<a href="#">
<picture>
<source media="(max-width:576px)" srcset="https://source.unsplash.com/300x300/?ads">
<source media="(max-width:768px)" srcset="https://source.unsplash.com/600x300/?ads">
<img src="https://source.unsplash.com/1920x300/?ads" alt="">
</picture>
</a>
</section>
En el caso de solo contar con una imagen el código puede simplificarse de la siguiente manera.
<section class="banner-full">
<a href="#">
<img src="https://source.unsplash.com/1920x300/?ads" alt="">
</a>
</section>
# Sección con imagen de fondo y texto centrado
La imagen de fondo hay que meterla dentro del parámetro style de la sección tal cual está en el código de ejemplo. La imagen se recortará si es más grande o se ampliará si es más pequeña para cubrir todo el espacio.
<section class="bg-image bg-image-center"
style="background-image: url('https://source.unsplash.com/1920x800/?construction');">
<div>
<span class="tagline">Lorem ipsum dolor sit</span>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est eveniet incidunt magni minus provident
quisquam.</p>
<a href="" class="btn btn-fill">Leer más</a>
</div>
</section>
# Sección con imagen de fondo y texto a la izquierda
<section class="bg-image"
style="background-image: url('https://source.unsplash.com/1920x800/?cars');">
<div class="cms-container">
<div>
<span class="tagline">Lorem ipsum dolor sit</span>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est eveniet incidunt magni minus
provident
quisquam.</p>
<a href="" class="btn btn-fill">Leer más</a>
</div>
</div>
</section>
# Mapa a ancho completo
Al pegar el mapa hay que asegurarse de que el width está en 100%, por defecto cuando se copia de google está en 600.
<section class="no-padding">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2982.183838044798!2d-4.707693584260974!3d41.63015758887213!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd4712e0c92ab0ef%3A0xd6a0d853e756908b!2sBricomart%20Valladolid%20Construcci%C3%B3n%20y%20Reforma!5e0!3m2!1ses!2ses!4v1626782506233!5m2!1ses!2ses"
width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</section>
# Vídeo responsive
Al pegar el código del iframe hay que eliminar el height y el width del elemento. El código debe quedar similar al mostrado.
Este código está preparado para hacer vídeos responsive en formato 16:9. Si se mete un vídeo de otro tipo se verá raro.
<section>
<div class="cms-container grid-1">
<div class="embed-16-9">
<iframe src="https://www.youtube.com/embed/4sZ2_aGsLKU"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</div>
</section>
# Mapa + bloque de texto
Al pegar el código del iframe hay que eliminar el height y el width del elemento. El código debe quedar similar al mostrado.
Este código está preparado para hacer vídeos responsive en formato 16:9. Si se mete un vídeo de otro tipo se verá raro.
<section class="bg-gray-light">
<div class="cms-container map-text-section">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2982.183838044798!2d-4.707693584260974!3d41.63015758887213!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd4712e0c92ab0ef%3A0xd6a0d853e756908b!2sBricomart%20Valladolid%20Construcci%C3%B3n%20y%20Reforma!5e0!3m2!1ses!2ses!4v1626782506233!5m2!1ses!2ses"
width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
<div>
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam magni obcaecati similique!</h3>
<p class="small">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda atque dolorem
enim
ipsum modi pariatur quam reprehenderit vero. Consectetur nemo nihil nostrum, quaerat quibusdam
veritatis.</p>
<a href="" class="btn btn-big">Pide presupuesto</a>
</div>
</div>
</section>
# Footer
Las imágenes mostradas están en vuestro propio servidor, se pueden sustituir.
<section>
<div class="cms-container footer-images">
<img src="https://www.bricomart.es/pub/media/wysiwyg/precio.png" alt="">
<img src="https://www.bricomart.es/pub/media/wysiwyg/stock.png" alt=""><img
src="https://www.bricomart.es/pub/media/wysiwyg/rapidez-compra.png" alt=""><img
src="https://www.bricomart.es/pub/media/wysiwyg/calidad.png" alt=""><img
src="https://www.bricomart.es/pub/media/wysiwyg/entorno-seguro.png" alt="">
</div>
</section>
← CSS Usando codepen.io →