Biblioteca de bloques — coordinador web

Grandes

hero

Beat House

Frase corta de apoyo, debajo del botón.

Facultad de Café

Frase corta de apoyo, debajo del botón.

Hyperjump

Frase corta de apoyo, debajo del botón.

Código fuente (bloque.html / bloque.css)

bloque.html

<div class="hero-banner-wrap">
  <img class="hero-banner" src="foto-portada.jpg" alt="Nombre del Negocio" width="1600" height="514">
</div>

<div class="hero-cta-envoltura">
  <button class="btn-principal" type="button">Llamada a la acción</button>
  <p class="hero-epigrafe">Frase corta de apoyo, debajo del botón.</p>
</div>

bloque.css

.hero-banner-wrap { position: relative; line-height: 0; overflow: hidden; aspect-ratio: 1600 / 514; }
.hero-banner { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-cta-envoltura { display: flex; flex-direction: column; align-items: center; gap: .875rem; padding: 1.25rem 1.5rem 1.5rem; text-align: center; background: var(--color-fondo); }
.hero-epigrafe { margin: 0; max-width: 20rem; font-family: var(--fuente-cuerpo); font-weight: 300; font-size: .9375rem; line-height: 1.4; color: var(--color-texto); }

menú de navegación

Beat House

Facultad de Café

Hyperjump

Código fuente (bloque.html / bloque.css)

bloque.html

<header class="menu-nav">
  <span class="menu-nav-marca">Nombre del Negocio</span>
  <nav>
    <a href="#seccion-1">Sección 1</a>
    <a href="#seccion-2">Sección 2</a>
    <a href="#seccion-3">Sección 3</a>
  </nav>
</header>

bloque.css

.menu-nav { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .875rem 1.5rem; background: var(--color-fondo); border-bottom: 1px solid var(--color-secundario); }
.menu-nav-marca { font-family: var(--fuente-titulos); font-size: 1.25rem; font-weight: 600; color: var(--color-principal); letter-spacing: .02em; white-space: nowrap; }
.menu-nav nav { display: flex; flex-wrap: wrap; gap: .5rem 1.125rem; }
.menu-nav nav a { font-family: var(--fuente-cuerpo); font-size: .8125rem; font-weight: 500; color: var(--color-principal); text-decoration: none; padding: .25rem 0; border-bottom: 1px solid transparent; transition: border-color .2s; }
.menu-nav nav a:hover { border-bottom-color: var(--color-acento); }

galería

Beat House

Galería

Texto corto de apoyo bajo la galería.

Facultad de Café

Galería

Texto corto de apoyo bajo la galería.

Hyperjump

Galería

Texto corto de apoyo bajo la galería.

Código fuente (bloque.html / bloque.css)

bloque.html

<section class="galeria">
  <h3 class="galeria-titulo">Galería</h3>
  <div class="galeria-grid">
    <div class="galeria-item">
      <img src="foto-1.jpg" alt="Foto 1 del local" loading="lazy" width="506" height="506">
    </div>
    <div class="galeria-item">
      <img src="foto-2.jpg" alt="Foto 2 del local" loading="lazy" width="506" height="506">
    </div>
    <div class="galeria-item">
      <img src="foto-3.jpg" alt="Foto 3 del local" loading="lazy" width="506" height="506">
    </div>
  </div>
  <p class="galeria-nota">Texto corto de apoyo bajo la galería.</p>
</section>

bloque.css

.galeria { padding: 2.5rem 1.5rem; background: var(--color-fondo); }
.galeria-titulo { font-family: var(--fuente-titulos); color: var(--color-principal); margin: 0 0 1rem; }
.galeria-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-bottom: 1rem; }
.galeria-item { border-radius: 4px; overflow: hidden; }
.galeria-item img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 4px; box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.14); transition: box-shadow .25s ease; }
.galeria-item:hover img { box-shadow: 0 .875rem 1.75rem rgba(0,0,0,.2); }
.galeria-nota { font-family: var(--fuente-cuerpo); font-size: .75rem; line-height: 1.6; color: var(--color-texto); margin: 0; }

footer

Beat House

Facultad de Café

Hyperjump

Código fuente (bloque.html / bloque.css)

bloque.html

<footer class="pie">
  <p class="pie-marca">Nombre del Negocio</p>
  <p class="pie-nota">Frase corta de cierre, ciudad o slogan.</p>
</footer>

bloque.css

.pie { background-color: var(--color-principal); color: var(--color-secundario); text-align: center; padding: 3rem 1.5rem; }
.pie-marca { font-family: var(--fuente-titulos); font-size: 1.125rem; color: var(--color-fondo); margin: 0 0 .5rem; letter-spacing: .04em; }
.pie-nota { font-family: var(--fuente-cuerpo); font-size: .6875rem; margin: 0; letter-spacing: .04em; }

Piezas

botón

Beat House

Facultad de Café

Hyperjump

Código fuente (bloque.html / bloque.css)

bloque.html

<button class="btn-principal" type="button">Llamada a la acción</button>

bloque.css

.btn-principal { display: inline-flex; align-items: center; gap: .5rem; background: var(--color-principal); color: var(--color-fondo); border: 0; border-radius: 100px; padding: .625rem 1.375rem; font-family: var(--fuente-cuerpo); font-size: .8125rem; font-weight: 600; letter-spacing: .02em; cursor: pointer; box-shadow: 0 .375rem 1rem rgba(0,0,0,.2); transition: transform .2s ease, box-shadow .2s ease; }
.btn-principal:hover { transform: translateY(-2px); box-shadow: 0 .625rem 1.5rem rgba(0,0,0,.26); }

tarjeta de producto

Beat House

Facultad de Café

Hyperjump

Código fuente (bloque.html / bloque.css)

bloque.html

<figure class="tarjeta-producto">
  <img src="producto.jpg" alt="Nombre del producto" loading="lazy" width="506" height="506">
  <figcaption>
    <span class="tarjeta-producto-item">Nombre del producto</span>
    <span class="tarjeta-producto-desc">Descripción corta del producto</span>
  </figcaption>
  <div class="tarjeta-producto-pie">
    <span class="badge-precio"><small>por unidad</small>$99</span>
    <button class="btn-secundario" type="button">Agregar</button>
  </div>
</figure>

bloque.css

.tarjeta-producto { margin: 0; background: var(--color-fondo); border-radius: 8px; overflow: hidden; }
.tarjeta-producto img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.14); }
.tarjeta-producto figcaption { margin-top: .625rem; padding: 0 .625rem; display: flex; flex-direction: column; gap: .125rem; }
.tarjeta-producto-item { font-family: var(--fuente-titulos); font-size: 1.125rem; color: var(--color-texto); }
.tarjeta-producto-desc { font-family: var(--fuente-cuerpo); font-size: .8125rem; color: var(--color-texto); opacity: .7; }
.tarjeta-producto-pie { margin-top: .75rem; padding: .75rem .625rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; border-top: 1px solid var(--color-secundario); }
.btn-secundario { font-family: var(--fuente-cuerpo); font-weight: 600; font-size: .8125rem; background: transparent; color: var(--color-principal); border: 1.5px solid var(--color-principal); border-radius: 100px; padding: .5rem 1rem; cursor: pointer; transition: background-color .2s ease; }
.btn-secundario:hover { background: color-mix(in srgb, var(--color-principal) 10%, transparent); }

badge de precio

Beat Housepor unidad$99

Facultad de Cafépor unidad$99

Hyperjumppor unidad$99

Código fuente (bloque.html / bloque.css)

bloque.html

<span class="badge-precio"><small>por unidad</small>$99</span>

bloque.css

.badge-precio { font-family: var(--fuente-cuerpo); font-size: .8125rem; font-weight: 600; color: var(--color-acento); }
.badge-precio small { display: block; font-size: .6875rem; font-weight: 500; color: var(--color-texto); text-transform: uppercase; letter-spacing: .04em; }