Progetto 06 / 06 · sito web
TAGLIO Soho
Un sito concept per una pizzeria al taglio romana fittizia a Soho, Londra. TAGLIO non è una vera pizzeria; è un concept, non un lavoro per un cliente.
Panoramica
Screenshot
Livello di prova: Prova esistente
Vedi la prova
Affermazione
TAGLIO Soho: un sito concept per una pizzeria al taglio romana fittizia a Soho, Londra. TAGLIO non è una vera pizzeria; è un concept, non un lavoro per un cliente.
Dichiarato da Danilo
Prove
- Screenshot della pagina concept di TAGLIO Soho (desktop e mobile) · manual · verificato il 29 settembre 2026Presi il 29/09/2026 dal file sorgente della pagina stessa, perché non è online.
- Screenshot della pagina concept di TAGLIO Soho a larghezza tablet (768 px) · manual · verificato il 29 settembre 2026Preso il 29/09/2026 dal file sorgente della pagina stessa.
- Sorgente di TAGLIO: il breakpoint mobile (CSS) (index.html, righe 298–315) · manual · verificato il 29 settembre 2026Copiato testualmente dal file sorgente reale il 29/09/2026 (fine riga normalizzati).
- Sorgente di TAGLIO: le griglie desktop (CSS) (index.html, righe 189–207) · manual · verificato il 29 settembre 2026Copiato testualmente dal file sorgente reale il 29/09/2026 (fine riga normalizzati).
Risultato
Screenshot reali della pagina, presi dal suo file sorgente il 29/09/2026. Che l’abbia costruito Danilo è una sua dichiarazione.
In questa pagina
- 02 Responsive: la pagina acquisita a 1440, 768 e 375 px
- 03 Codice: il CSS che cambia il layout tra le larghezze
Non in questa pagina
- Online: TAGLIO è un concept per un’attività fittizia e non è online.
Responsive
La stessa pagina a tre larghezze, disegnata alla stessa scala: ogni cornice è un’acquisizione della pagina, e il righello sopra indica la larghezza della sua finestra.
Livello di prova: Prova esistente
Codice
Griglie a tre e a due colonne sugli schermi larghi; un unico breakpoint a 768 px le riduce a una colonna.
/* 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;
}
Livello di prova: Prova esistente
/* 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; }
}
Livello di prova: Prova esistente