10 – Codice completo di un sito internet
Ecco un file unico HTML + CSS + (poco) JavaScript pronto da copiare nell’editor e pubblicare. È un sito single-page per un artista di arti figurative: responsive, accessibile, con galleria a griglia, filtro per categorie, lightbox per visualizzare le opere, menu mobile e form contatti (mailto fallback). Le immagini sono segnaposto — sostituisci i percorsi in <img src="img/..." con i tuoi file.
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Nome Artista — Arti Figurative</title>
<meta name="description" content="Sito ufficiale dell'artista Nome Artista. Biografia, galleria opere, mostre ed eventi, contatti." />
<!-- Font (sistema) e reset minimale -->
<style>
:root{
--bg:#faf9f7;
--card:#ffffff;
--muted:#6b6b6b;
--accent:#b85b3b; /* cambiare secondo tavolozza artista */
--accent-2:#2b2b2b;
--maxw:1100px;
--radius:12px;
--gap:1.2rem;
--shadow: 0 6px 20px rgba(10,10,10,0.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
background:linear-gradient(180deg,var(--bg),#f6f5f3);
color:var(--accent-2);
line-height:1.45;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
a{color:var(--accent); text-decoration:none}
.container{max-width:var(--maxw); margin:0 auto; padding:2rem;}
header.site-header{
background:transparent;
position:sticky;
top:0;
z-index:50;
backdrop-filter: blur(6px);
padding:1rem 0;
}
.nav-inner{display:flex;align-items:center;gap:1rem;justify-content:space-between;}
.brand{display:flex;align-items:center;gap:.75rem}
.brand .logo{
width:56px;height:56px;border-radius:12px;display:inline-grid;place-items:center;
background:linear-gradient(135deg,var(--accent),#f3b08a);color:white;font-weight:700;font-size:1.05rem;
box-shadow:var(--shadow);
}
.brand .title{font-weight:700;font-size:1rem}
nav.main-nav{display:flex;gap:1rem;align-items:center}
nav.main-nav a{padding:.5rem .6rem;border-radius:8px;color:var(--accent-2);font-weight:600}
nav.main-nav a:hover{background:rgba(0,0,0,0.04)}
.btn-primary{
background:var(--accent); color:white; padding:.5rem .8rem;border-radius:10px;font-weight:700;
box-shadow:0 6px 18px rgba(184,91,59,0.18);
}
/* Hero */
.hero{
margin-top:1rem;
display:grid;
grid-template-columns: 1fr 420px;
gap:var(--gap);
align-items:center;
}
.hero .lead{
background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.8));
padding:2rem;border-radius:var(--radius);box-shadow:var(--shadow);
}
.hero h1{margin:0 0 .5rem;font-size:2rem}
.hero p{margin:0 0 1rem;color:var(--muted)}
.hero-visual{
border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
background:#111; min-height:320px; display:grid; place-items:center;
}
.hero-visual img{width:100%;height:100%;object-fit:cover;display:block}
/* Sections */
section{margin:2.2rem 0}
h2.section-title{font-size:1.25rem;margin:0 0 .6rem}
.lead-small{color:var(--muted);margin-bottom:1rem}
/* Gallery grid */
.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
.filters button{
background:transparent;border:1px solid rgba(0,0,0,0.06);padding:.45rem .7rem;border-radius:999px;font-weight:600;
}
.filters button.active{background:var(--accent);color:white;border-color:transparent}
.gallery-grid{
display:grid;
grid-template-columns: repeat(3, 1fr);
gap: .9rem;
}
.card{
background:var(--card);border-radius:10px;overflow:hidden;position:relative;box-shadow:var(--shadow);
}
.card img{width:100%;height:260px;object-fit:cover;display:block;transition:transform .32s ease}
.card:hover img{transform:scale(1.03)}
.card .meta{padding:.7rem .9rem}
.meta h3{margin:0;font-size:1rem}
.meta p{margin:.35rem 0 0;color:var(--muted);font-size:.9rem}
/* Lightbox modal */
.modal{
position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.65);
z-index:1000;padding:2rem;
}
.modal.open{display:flex}
.modal .sheet{background:linear-gradient(180deg,#fff,#fafafa);max-width:1100px;border-radius:12px;overflow:hidden;display:grid;grid-template-columns:1fr 350px;gap:1rem}
.modal img{width:100%;height:100%;object-fit:contain;display:block;background:#111}
.modal .info{padding:1.2rem}
.modal .info h3{margin:0 0 .4rem}
.modal .close{position:absolute;top:1rem;right:1rem;background:transparent;border:0;color:white;font-size:1.6rem}
/* Events list */
.events-list{display:grid;gap:.8rem}
.event{display:flex;gap:1rem;align-items:flex-start;background:var(--card);padding:.8rem;border-radius:10px;box-shadow:var(--shadow)}
.event .date{min-width:96px;color:var(--accent);font-weight:700}
/* Contact */
form.contact-form{display:grid;gap:.6rem;max-width:700px}
label{font-size:.9rem;color:var(--muted)}
input[type="text"], input[type="email"], textarea{
padding:.6rem .7rem;border-radius:8px;border:1px solid rgba(0,0,0,0.08);
font-size:1rem;background:white;
}
textarea{min-height:140px;resize:vertical}
.form-actions{display:flex;gap:.6rem;align-items:center}
footer.site-footer{margin-top:2rem;padding:2rem 0;background:transparent;border-top:1px solid rgba(0,0,0,0.04)}
footer .foot-inner{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;color:var(--muted)}
/* Responsive */
@media (max-width:980px){
.hero{grid-template-columns:1fr; }
.gallery-grid{grid-template-columns:repeat(2,1fr)}
.modal .sheet{grid-template-columns:1fr}
}
@media (max-width:620px){
nav.main-nav{display:none}
.menu-toggle{display:inline-block}
.gallery-grid{grid-template-columns:1fr}
header .nav-inner{gap:.5rem}
}
/* Mobile menu overlay */
.mobile-nav{
position:fixed;inset:0;display:none;z-index:80;background:rgba(0,0,0,0.4);
align-items:flex-start;padding-top:6rem;
}
.mobile-nav.open{display:flex}
.mobile-nav .panel{background:var(--card);width:100%;padding:1.2rem;border-radius:12px 12px 0 0}
.mobile-nav a{display:block;padding:.8rem 0;border-bottom:1px solid rgba(0,0,0,0.04)}
</style>
</head>
<body>
<header class="site-header">
<div class="container nav-inner">
<div class="brand">
<div class="logo" aria-hidden="true">NA</div>
<div>
<div class="title">Nome Artista</div>
<div style="font-size:.85rem;color:var(--muted)">Arti figurative — pittura & scultura</div>
</div>
</div>
<nav class="main-nav" role="navigation" aria-label="Menu principale">
<a href="#home">Home</a>
<a href="#bio">Biografia</a>
<a href="#gallery">Opere</a>
<a href="#events">Mostre</a>
<a href="#contact">Contatti</a>
<a class="btn-primary" href="#gallery">Visita la galleria</a>
</nav>
<button class="menu-toggle" aria-label="Apri menu" style="display:none" onclick="toggleMobile()">
☰
</button>
</div>
</header>
<!-- Mobile nav -->
<div id="mobileNav" class="mobile-nav" role="dialog" aria-modal="true" aria-hidden="true">
<div class="panel container" role="navigation">
<a href="#home" onclick="toggleMobile()">Home</a>
<a href="#bio" onclick="toggleMobile()">Biografia</a>
<a href="#gallery" onclick="toggleMobile()">Opere</a>
<a href="#events" onclick="toggleMobile()">Mostre</a>
<a href="#contact" onclick="toggleMobile()">Contatti</a>
</div>
</div>
<main id="home" class="container">
<!-- HERO -->
<div class="hero" aria-labelledby="heroTitle">
<div class="lead">
<h1 id="heroTitle">Nome Artista</h1>
<p class="lead-small">Opere recenti — sperimentazione tra colore, matericità e spazio. Studio a [Città]. Disponibile per esposizioni e commissioni.</p>
<p style="margin-top:1rem"><a class="btn-primary" href="#gallery">Visita la Galleria</a> <a style="margin-left:1rem" href="#contact">Contattami</a></p>
<hr style="margin:1.2rem 0; border:none; border-top:1px solid rgba(0,0,0,0.04)" />
<h2 style="font-size:1rem;margin:0 0 .6rem">Ultima mostra</h2>
<p style="color:var(--muted)">"Materia sospesa" — Galleria XYZ, 2025. Una serie di dipinti che interrogano la superficie come luogo di memoria e traccia.</p>
</div>
<div class="hero-visual" aria-hidden="true">
<!-- sostituire con immagine reale -->
<img src="img/hero-placeholder.jpg" alt="Opera in evidenza di Nome Artista" />
</div>
</div>
<!-- BIOGRAFIA -->
<section id="bio" aria-labelledby="bioTitle">
<h2 class="section-title" id="bioTitle">Biografia & Statement</h2>
<div style="display:grid;grid-template-columns:220px 1fr;gap:1rem;align-items:start">
<img src="img/ritratto.jpg" alt="Ritratto dell'artista" style="width:220px;border-radius:10px;object-fit:cover" />
<div>
<p class="lead-small">Nome Artista (Città, 19XX) vive e lavora tra [Città]. La pratica artistica esplora la relazione tra materia e memoria attraverso pittura e installazione.</p>
<p>Il lavoro nasce dall'attenzione al gesto e alla stratificazione. L'artista utilizza pigmenti naturali, materiali riciclati e tecniche miste per creare superfici che ricordano paesaggi interiori. Tra le mostre personali e collettive: Galleria A (2023), Festival B (2022), Museo C (2021).</p>
<h3 style="margin-top:.8rem">Statement</h3>
<p style="color:var(--muted)">"Cerco un equilibrio tra controllo e accidente: le superfici raccolgono tracce di processi, segni di tempo e presenza umana." — Nome Artista</p>
</div>
</div>
</section>
<!-- GALLERY -->
<section id="gallery" aria-labelledby="galleryTitle">
<h2 class="section-title" id="galleryTitle">Galleria Opere</h2>
<p class="lead-small">Clicca su un'immagine per ingrandirla e leggere i dettagli. Usa i filtri per navigare per categorie.</p>
<div class="filters" role="tablist" aria-label="Filtri galleria">
<button class="filter-btn active" data-filter="all" aria-pressed="true">Tutte</button>
<button class="filter-btn" data-filter="pittura">Pittura</button>
<button class="filter-btn" data-filter="scultura">Scultura</button>
<button class="filter-btn" data-filter="installazione">Installazione</button>
</div>
<div class="gallery-grid" id="grid">
<!-- card (duplicare / sostituire immagini e dati reali) -->
<article class="card" data-category="pittura">
<a href="#!" class="open" data-src="img/opera1.jpg" data-title="Senza Titolo (2024)" data-desc="Olio su tela — 80x100 cm">
<img src="img/opera1-thumb.jpg" alt="Senza Titolo, olio su tela" />
</a>
<div class="meta">
<h3>Senza Titolo</h3>
<p>Olio su tela — 2024</p>
</div>
</article>
<article class="card" data-category="pittura">
<a href="#!" class="open" data-src="img/opera2.jpg" data-title="Linea e Polvere (2023)" data-desc="Tecnica mista — 60x80 cm">
<img src="img/opera2-thumb.jpg" alt="Linea e Polvere, tecnica mista" />
</a>
<div class="meta"><h3>Linea e Polvere</h3><p>Tecnica mista — 2023</p></div>
</article>
<article class="card" data-category="scultura">
<a href="#!" class="open" data-src="img/scultura1.jpg" data-title="Corpo di Guardia (2022)" data-desc="Ferro e cera — 120x40x40 cm">
<img src="img/scultura1-thumb.jpg" alt="Corpo di Guardia, scultura" />
</a>
<div class="meta"><h3>Corpo di Guardia</h3><p>Ferro e cera — 2022</p></div>
</article>
<article class="card" data-category="installazione">
<a href="#!" class="open" data-src="img/install1.jpg" data-title="Campo (2019)" data-desc="Installazione site-specific">
<img src="img/install1-thumb.jpg" alt="Installazione Campo" />
</a>
<div class="meta"><h3>Campo</h3><p>Installazione — 2019</p></div>
</article>
<article class="card" data-category="pittura">
<a href="#!" class="open" data-src="img/opera3.jpg" data-title="Segno sopito (2020)" data-desc="Acrilico su tela — 70x90 cm">
<img src="img/opera3-thumb.jpg" alt="Segno sopito, acrilico" />
</a>
<div class="meta"><h3>Segno sopito</h3><p>Acrilico — 2020</p></div>
</article>
<article class="card" data-category="scultura">
<a href="#!" class="open" data-src="img/scultura2.jpg" data-title="Bastione (2021)" data-desc="Legno, pigmento">
<img src="img/scultura2-thumb.jpg" alt="Bastione, scultura legno" />
</a>
<div class="meta"><h3>Bastione</h3><p>Legno & pigmento — 2021</p></div>
</article>
</div>
</section>
<!-- Lightbox modal -->
<div id="modal" class="modal" role="dialog" aria-hidden="true" aria-labelledby="modalTitle">
<div class="sheet" role="document">
<img id="modalImg" src="" alt="" />
<div class="info">
<h3 id="modalTitle">Titolo opera</h3>
<p id="modalDesc" style="color:var(--muted);margin-top:.4rem"></p>
<p style="margin-top:1rem"><strong>Tecnica:</strong> <span id="modalTech"></span></p>
<p style="margin-top:1rem"><em>Contattami per disponibilità e dimensioni originali.</em></p>
<p style="margin-top:1rem"><a id="downloadBtn" href="#" target="_blank">Scarica immagine</a></p>
</div>
<button class="close" aria-label="Chiudi" onclick="closeModal()">✕</button>
</div>
</div>
<!-- EVENTS -->
<section id="events" aria-labelledby="eventsTitle">
<h2 class="section-title" id="eventsTitle">Mostre ed Eventi</h2>
<div class="events-list">
<article class="event">
<div class="date">Set 2025</div>
<div>
<strong>"Materia sospesa"</strong> — Galleria XYZ, Città. Catalogo e apertura al pubblico dal 12 settembre.
</div>
</article>
<article class="event">
<div class="date">Mar 2024</div>
<div>
<strong>Residenza artistica</strong> — Centro Arte Locale. Progetto di sperimentazione con materiali naturali.
</div>
</article>
</div>
</section>
<!-- CONTACT -->
<section id="contact" aria-labelledby="contactTitle">
<h2 class="section-title" id="contactTitle">Contatti</h2>
<p class="lead-small">Per richieste di esposizione, vendita o commissioni puoi compilare il form oppure scrivere a <a href="mailto:artista@esempio.com">artista@esempio.com</a></p>
<form class="contact-form" id="contactForm" onsubmit="submitForm(event)" novalidate>
<label for="name">Nome</label>
<input id="name" name="name" type="text" required />
<label for="email">Email</label>
<input id="email" name="email" type="email" required />
<label for="message">Messaggio</label>
<textarea id="message" name="message" required></textarea>
<div class="form-actions">
<button type="submit" class="btn-primary">Invia messaggio</button>
<small style="color:var(--muted)">Oppure scrivi a <a href="mailto:artista@esempio.com">artista@esempio.com</a></small>
</div>
</form>
</section>
<footer class="site-footer">
<div class="foot-inner">
<div>© <strong>Nome Artista</strong> — Tutti i diritti riservati</div>
<div style="display:flex;gap:.6rem;align-items:center">
<a href="#" aria-label="Instagram">IG</a>
<a href="#" aria-label="Facebook">FB</a>
<a href="#" aria-label="LinkedIn">LN</a>
</div>
</div>
</footer>
</main>
<!-- JavaScript minimo: menu mobile, filtri, lightbox, form -->
<script>
// Mobile menu toggling
const mobileNav = document.getElementById('mobileNav');
function toggleMobile(){
const isOpen = mobileNav.classList.toggle('open');
mobileNav.setAttribute('aria-hidden', !isOpen);
document.body.style.overflow = isOpen ? 'hidden' : '';
}
// Gallery filtering
const filterBtns = Array.from(document.querySelectorAll('.filter-btn'));
const cards = Array.from(document.querySelectorAll('.gallery-grid .card'));
filterBtns.forEach(btn=>{
btn.addEventListener('click', ()=> {
filterBtns.forEach(b=> { b.classList.remove('active'); b.setAttribute('aria-pressed','false')});
btn.classList.add('active'); btn.setAttribute('aria-pressed','true');
const f = btn.dataset.filter;
cards.forEach(c=>{
if(f==='all'){ c.style.display='block'; }
else { c.style.display = (c.dataset.category===f) ? 'block' : 'none'; }
});
});
});
// Lightbox (modal)
const modal = document.getElementById('modal');
const modalImg = document.getElementById('modalImg');
const modalTitle = document.getElementById('modalTitle');
const modalDesc = document.getElementById('modalDesc');
const downloadBtn = document.getElementById('downloadBtn');
const openLinks = Array.from(document.querySelectorAll('.card .open'));
openLinks.forEach(link=>{
link.addEventListener('click', (e)=>{
e.preventDefault();
const src = link.dataset.src || link.querySelector('img').src;
const title = link.dataset.title || link.querySelector('.meta h3')?.innerText || 'Opera';
const desc = link.dataset.desc || link.querySelector('.meta p')?.innerText || '';
openModal(src,title,desc);
});
});
function openModal(src,title,desc){
modalImg.src = src;
modalImg.alt = title;
modalTitle.textContent = title;
modalDesc.textContent = desc;
downloadBtn.href = src;
modal.classList.add('open');
modal.setAttribute('aria-hidden','false');
document.body.style.overflow='hidden';
}
function closeModal(){
modal.classList.remove('open');
modal.setAttribute('aria-hidden','true');
modalImg.src = '';
document.body.style.overflow='';
}
modal.addEventListener('click', (e)=>{ if(e.target===modal) closeModal(); });
// Basic contact form handler (mailto fallback) - demo only
function submitForm(e){
e.preventDefault();
const name = document.getElementById('name').value.trim();
const email = document.getElementById('email').value.trim();
const message = document.getElementById('message').value.trim();
if(!name || !email || !message){
alert('Compila tutti i campi prima di inviare.');
return;
}
// mailto fallback
const subject = encodeURIComponent('Richiesta da sito — ' + name);
const body = encodeURIComponent('Da: ' + name + ' ('+email+')\n\n' + message);
window.location.href = 'mailto:artista@esempio.com?subject='+subject+'&body='+body;
}
// Accessibility helper: focus first link in modal when opened (optional)
modal.addEventListener('transitionend', ()=> {
if(modal.classList.contains('open')) modal.querySelector('.sheet').focus();
});
</script>
</body>
</html>
Note d’uso e personalizzazione
-
Immagini: sostituisci tutti i file
img/...con le tue immagini reali (miniature e versioni grandi per il lightbox). Mantieni dimensioni ottimali per web (es. 1200px lato lungo per immagini principali). -
Colori & tipografia: varia le variabili CSS
--accent,--bg, ecc. per adattarle all’identità artistica. -
Accessibilità: il markup include
alt, ruoli ARIA e focus basics; puoi estenderlo aggiungendo keyboard trapping nella modal per migliori standard. -
Form: il form usa
mailto:come fallback; per ricevere i messaggi davvero, integra un endpoint server (es. formspree, Netlify forms o tuo backend). -
SEO / performance: aggiungi meta tags social (Open Graph), minifica CSS/JS in produzione e usa immagini ottimizzate (WebP).
Nessun commento:
Posta un commento