bisco/gianca-s-event
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit. all the code has been initialized by Codex

Browse Source
This commit is contained in:
bisco
2026-03-25 18:57:16 +01:00
parent 6c36825a93
commit 8f580745d8
5 changed files with 971 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

185
index.html Normal file
View File

@ -0,0 +1,185 @@
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hey, ci sono i 40 anni del Gianca!</title>
<meta name="description" content="Landing RSVP per i 40 anni del Gianca - 25 aprile 2026, Lost Paradise Beach Club, Bacoli." />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Martel+Sans:wght@400;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body class="theme-icon">
<div class="page-shell">
<header class="hero">
<img class="hero__image" src="assets/gianca-photo.jpg" alt="Giancarlo in posa sulla spiaggia" />
<div class="hero__overlay"></div>
<div class="hero__content container">
<!-- <p class="eyebrow">Save the date</p> -->
<h1 class="hero__title">Hey, ci sono i 40 anni del Gianca!</h1>
<div class="hero__underline" aria-hidden="true"></div>
<br />
<div class="event-tag__date">Save the date</div>
<!-- <div class="event-tag event-tag--icon" aria-label="Informazioni evento">
<div class="event-tag__icon">
<span class="party-popper" aria-hidden="true"></span>
</div>
<div class="event-tag__content">
<div class="event-tag__date">25 aprile 2026</div>
<div class="event-tag__place">Lost Paradise Beach Club</div>
<div class="event-tag__divider"></div>
<div class="event-tag__meta">Bacoli • ore 12.00</div>
</div>
</div> -->
</div>
</header>
<main>
<section class="section intro">
<div class="container intro__grid">
<div class="intro__text">
<p class="section-kicker">Un pranzo vista mare</p>
<h2>Una giornata semplice, bella, piena di affetto.</h2>
<p>
Il Gianca festeggia i suoi 40 anni e ha bisogno di sapere chi ci sarà, così da organizzare al meglio tavoli, spazi e tutto il resto.
</p>
<p>
Compila il modulo qui sotto: bastano pochi secondi per confermare la presenza, indicare l'eventuale partner e il numero di bambini.
</p>
</div>
<div class="details-card">
<div class="details-card__item">
<span class="details-card__label">Quando</span>
<strong>Sabato 25 aprile 2026</strong>
</div>
<div class="details-card__item">
<span class="details-card__label">Dove</span>
<strong>Lost Paradise Beach Club</strong>
<span>Bacoli</span>
</div>
<div class="details-card__item">
<span class="details-card__label">Orario</span>
<strong>Dalle ore 12.00</strong>
</div>
</div>
</div>
</section>
<section class="section rsvp" id="rsvp">
<div class="container rsvp__grid">
<div class="rsvp__copy">
<p class="section-kicker">RSVP</p>
<h2>Conferma la tua presenza</h2>
<p>
Grazie: la tua risposta ci aiuta davvero a organizzare tutto al meglio.
</p>
<ul class="rsvp__notes">
<li>Se non puoi esserci, seleziona semplicemente “No”.</li>
<li>Se vieni, indica se sarai con partner.</li>
<li>Se ci sono bambini, scrivi quanti.</li>
</ul>
</div>
<div class="form-card">
<form
name="rsvp-gianca-40"
method="POST"
data-netlify="true"
netlify-honeypot="bot-field"
action="/grazie/"
id="rsvp-form"
novalidate
>
<input type="hidden" name="form-name" value="rsvp-gianca-40" />
<p class="hidden-field">
<label>Non compilare questo campo se sei umano: <input name="bot-field" /></label>
</p>
<div class="form-row">
<label for="fullName">Nome e cognome</label>
<input id="fullName" name="name" type="text" autocomplete="name" required />
</div>
<div class="form-row">
<span class="form-label">Confermi la tua presenza?</span>
<div class="choice-group" role="radiogroup">
<label class="choice">
<input type="radio" name="attendance" value="si" required checked />
<span>Sì, ci sarò</span>
</label>
<label class="choice">
<input type="radio" name="attendance" value="no" required />
<span>No, non riesco</span>
</label>
</div>
</div>
<div id="attendance-fields">
<div class="form-row">
<span class="form-label">Verrai con partner?</span>
<div class="choice-group">
<label class="choice">
<input type="radio" name="partner" value="si" checked />
<span>Sì</span>
</label>
<label class="choice">
<input type="radio" name="partner" value="no" />
<span>No</span>
</label>
</div>
</div>
<div class="form-row">
<label for="childrenCount">Quanti bambini verranno con te?</label>
<select id="childrenCount" name="childrenCount">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4+">4 o più</option>
</select>
</div>
<div class="form-row">
<label for="notes">Note utili</label>
<textarea id="notes" name="notes" rows="4" placeholder="Allergie, esigenze particolari, eventuali dettagli utili"></textarea>
</div>
</div>
<button class="button" type="submit">Invia conferma</button>
<p class="form-status" id="form-status" aria-live="polite"></p>
</form>
</div>
</div>
</section>
</main>
<div class="success-modal" id="success-modal" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="success-title">
<div class="success-modal__backdrop" data-close-modal></div>
<div class="success-modal__dialog" role="document">
<div class="success-tag" aria-live="polite">
<!-- <div class="success-tag__line" aria-hidden="true"></div> -->
<div class="success-tag__content">
<p class="success-tag__kicker">Risposta inviata</p>
<h3 class="success-tag__title" id="success-title">Grazie per la tua risposta</h3>
<p class="success-tag__text">La conferma è stata registrata correttamente. A presto!</p>
<button class="button success-tag__button" type="button" id="success-ok">OK</button>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container footer__inner">
<p>Ci vediamo a Bacoli.</p>
</div>
</footer>
</div>
<script src="script.js"></script>
</body>
</html>