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

Compare commits

base: bisco:ae311104f23686974c4b3ce65724b58251c73696
Branches Tags
bisco:main
..
compare: bisco:main
Branches Tags
bisco:main

7 Commits
ae311104f2 ... main

Author SHA1 Message Date
Alfredo Di Stasio
f57d659d74 fixed form response 2026-04-22 10:55:27 +02:00
Alfredo Di Stasio
842f786db6 fixed issue 2026-04-22 10:45:28 +02:00
Alfredo Di Stasio
d458a38513 hidden gift section 2026-04-22 10:34:46 +02:00
bisco
96a00cefce changed the gift box details 2026-03-27 17:48:45 +01:00
bisco
8c1bf35b5e added responsiveness on title 2026-03-27 17:48:23 +01:00
bisco
3174966132 changed title sentence; changed some text; swapped gift section with RSVP one 2026-03-27 17:07:35 +01:00
bisco
ce9ef58461 changed .hero_title max-width from 14ch to 18ch 2026-03-27 17:06:36 +01:00
3 changed files with 75 additions and 54 deletions
Expand all files Collapse all files

101
index.html
View File

@ -17,7 +17,7 @@
<div class="hero__overlay"></div>
<div class="hero__content container">
<h1 class="hero__title">Hey, ci sono i 40 anni del Gianca!</h1>
<h1 class="hero__title">Hey, vieni al GIANQUARANTESIMO ?</h1>
<div class="hero__underline" aria-hidden="true"></div>
</div>
</header>
@ -29,7 +29,10 @@
<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.
<strong>Il 25 Aprile festeggerò 40 anni.</strong>
</p>
<p>
Fammi sapere se ci sarai in modo 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.
@ -71,52 +74,6 @@
</div>
</section>
<section class="section gift" id="regalo">
<div class="container gift__shell">
<div class="gift__layout" aria-labelledby="gift-title">
<h3 class="gift__title" id="gift-title">Dettagli regalo</h3>
<div class="gift__col gift__col--left">
<p class="section-kicker gift__kicker">Regalo / quota viaggio</p>
<h2 class="gift__heading">Un piccolo gesto, con il sorriso.</h2>
<p class="gift__lead">
Se ti fa piacere contribuire al regalo o alla quota viaggio, qui trovi i riferimenti.
</p>
<p class="gift__note" id="gift-note">Nota facoltativa: un pensiero semplice è più che sufficiente.</p>
</div>
<div class="gift__col gift__col--right">
<span class="gift__accent" aria-hidden="true"></span>
<!-- Dati contributo: modifica rapidamente intestatario, IBAN, causale e nota in script.js (costante GIFT_DETAILS). -->
<dl class="gift__details">
<div class="gift__row">
<dt>Intestatario</dt>
<dd id="gift-holder">Giancarlo ...</dd>
</div>
<div class="gift__row gift__row--iban">
<dt>IBAN</dt>
<dd id="gift-iban">IT00X0000000000000000000000</dd>
<div class="gift__iban-actions">
<button
class="button button--secondary button--compact gift__copy"
type="button"
id="copy-iban"
data-copy-target="gift-iban"
>
Copia IBAN
</button>
<p class="gift__feedback" id="iban-feedback" aria-live="polite"></p>
</div>
</div>
<div class="gift__row">
<dt>Causale consigliata</dt>
<dd id="gift-causal">Regalo 40 anni Gianca</dd>
</div>
</dl>
</div>
</div>
</div>
</section>
<section class="section rsvp" id="rsvp">
<div class="container rsvp__grid">
<div class="rsvp__copy">
@ -134,7 +91,7 @@
<div class="form-card">
<form
name="rsvp-gianca-40"
name="rsvp-gianca-40-1"
method="POST"
data-netlify="true"
netlify-honeypot="bot-field"
@ -205,6 +162,52 @@
</div>
</div>
</section>
<!-- <section class="section gift" id="regalo">
<div class="container gift__shell">
<div class="gift__layout" aria-labelledby="gift-title">
<h3 class="gift__title" id="gift-title">Dettagli regalo</h3>
<div class="gift__col gift__col--left">
<p class="section-kicker gift__kicker">Regalo / quota viaggio</p>
<h2 class="gift__heading">Un piccolo gesto, con il sorriso.</h2>
<p class="gift__lead">
Se ti fa piacere contribuire al regalo o alla quota viaggio, qui trovi i riferimenti.
</p> -->
<!-- <p class="gift__note" id="gift-note">Nota facoltativa: un pensiero semplice è più che sufficiente.</p> -->
<!-- </div>
<div class="gift__col gift__col--right">
<span class="gift__accent" aria-hidden="true"></span> -->
<!-- Dati contributo: modifica rapidamente intestatario, IBAN, causale e nota in script.js (costante GIFT_DETAILS). -->
<!-- <dl class="gift__details">
<div class="gift__row">
<dt>Intestatario</dt>
<dd id="gift-holder">Flygo S.r.l</dd>
</div>
<div class="gift__row gift__row--iban">
<dt>IBAN</dt>
<dd id="gift-iban">IT 34 O 02008 03450 000011029239</dd>
<div class="gift__iban-actions">
<button
class="button button--secondary button--compact gift__copy"
type="button"
id="copy-iban"
data-copy-target="gift-iban"
>
Copia IBAN
</button>
<p class="gift__feedback" id="iban-feedback" aria-live="polite"></p>
</div>
</div>
<div class="gift__row">
<dt>Causale consigliata</dt>
<dd id="gift-causal">Lista Compleanno Giancarlo Esposito da parte di ...</dd>
</div>
</dl>
</div>
</div>
</div>
</section> -->
</main>
<div class="success-modal" id="success-modal" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="success-title">

8
script.js
View File

@ -16,7 +16,7 @@ const giftNote = document.getElementById('gift-note');
// Modifica qui i dati del calendario evento.
const EVENT_CALENDAR = {
title: 'I 40 anni del Gianca',
title: 'Il Gianquarantesimo',
location: 'Lost Paradise Beach Club, Bacoli',
description: 'Conferma la tua presenza per i 40 anni del Gianca.',
date: '2026-04-25',
@ -27,9 +27,9 @@ const EVENT_CALENDAR = {
// Modifica qui i dati regalo / quota viaggio.
const GIFT_DETAILS = {
holder: 'Giancarlo ...',
iban: 'IT00X0000000000000000000000',
causal: 'Regalo 40 anni Gianca',
holder: 'Flygo S.r.l',
iban: 'IT 34 O 02008 03450 000011029239',
causal: 'Lista Compleanno Giancarlo Esposito da parte di ...',
note: 'Nota facoltativa: un pensiero semplice e sempre gradito.'
};

20
style.css
View File

@ -98,7 +98,7 @@ img {
.hero__title {
margin: 0;
max-width: 14ch;
max-width: 18ch;
text-align: center;
color: #fff;
font-size: clamp(2.8rem, 6vw, 6.6rem);
@ -931,3 +931,21 @@ body.modal-open {
width: 100%;
}
}
@media (max-width: 768px) {
.hero__title {
max-width: 18ch;
font-size: clamp(2.1rem, 8vw, 4rem);
-webkit-text-stroke: 7px var(--sea-dark);
line-height: 1;
}
}
@media (max-width: 480px) {
.hero__title {
max-width: 19ch;
font-size: clamp(1.85rem, 8.2vw, 3rem);
-webkit-text-stroke: 5px var(--sea-dark);
letter-spacing: -0.02em;
}
}