Proyecto 06 / 06 · sitio web
TAGLIO Soho
Web conceptual de una pizzería al taglio romana ficticia en Soho, Londres. TAGLIO no es una pizzería real; es un concepto, no un trabajo para un cliente.
Resumen
Capturas de pantalla
Nivel de prueba: Prueba existente
Ver la prueba
Afirmación
TAGLIO Soho: web conceptual de una pizzería al taglio romana ficticia en Soho, Londres. TAGLIO no es una pizzería real; es un concepto, no un trabajo para un cliente.
Declarado por Danilo
Pruebas
- Capturas de la página conceptual de TAGLIO Soho (escritorio y móvil) · manual · comprobado el 29 de septiembre de 2026Tomadas el 29/09/2026 del propio archivo fuente de la página, porque no está en línea.
- Captura de la página conceptual de TAGLIO Soho en ancho de tableta (768 px) · manual · comprobado el 29 de septiembre de 2026Tomada el 29/09/2026 del propio archivo fuente de la página.
- Código fuente de TAGLIO: el punto de corte móvil (CSS) (index.html, líneas 298–315) · manual · comprobado el 29 de septiembre de 2026Copiado literalmente del archivo fuente real el 29/09/2026 (finales de línea normalizados).
- Código fuente de TAGLIO: las cuadrículas de escritorio (CSS) (index.html, líneas 189–207) · manual · comprobado el 29 de septiembre de 2026Copiado literalmente del archivo fuente real el 29/09/2026 (finales de línea normalizados).
Resultado
Capturas reales de la página, tomadas de su archivo fuente el 29/09/2026. Que lo construyera Danilo es una declaración suya.
En esta página
- 02 Responsive: la página capturada a 1440, 768 y 375 px
- 03 Código: el CSS que cambia la maquetación entre anchos
No está en esta página
- En línea: TAGLIO es un concepto para un negocio ficticio y no está en línea.
Responsive
La misma página en tres anchos, dibujada a la misma escala: cada marco es una captura de la página, y la regla de encima es el ancho de su ventana.
Nivel de prueba: Prueba existente
Código
Cuadrículas de tres y dos columnas en pantallas anchas; un único punto de corte a 768 px las pliega en una columna.
/* HOW IT WORKS */
#how { background: var(--surface); border-radius: 0; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.step {
padding: 32px; background: var(--surface-2); border-radius: var(--radius);
border: 1px solid var(--border); position: relative;
}
.step-num {
font-family: var(--font-display); font-size: 2.5rem; color: var(--accent);
opacity: 0.3; position: absolute; top: 20px; right: 24px;
}
.step h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 8px; }
.step p { font-size: 0.85rem; color: var(--text-muted); }
/* MENU */
#menu { background: var(--bg); }
.menu-grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
}
Nivel de prueba: Prueba existente
/* MOBILE */
@media (max-width: 768px) {
.nav-links { display: none; }
.nav-ham { display: flex; }
.nav-links.open {
display: flex; flex-direction: column; position: absolute;
top: 60px; left: 0; right: 0; background: var(--bg);
padding: 20px 24px; border-bottom: 1px solid var(--border); gap: 16px;
}
.hero h1 { font-size: 2.4rem; }
.hero-stats { gap: 24px; flex-wrap: wrap; }
.steps { grid-template-columns: 1fr; }
.menu-grid { grid-template-columns: 1fr; }
.gallery-grid { grid-template-columns: 1fr; }
.gallery-grid img:first-child { grid-row: span 1; height: 280px; }
.reviews-row { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
Nivel de prueba: Prueba existente