-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
243 lines (226 loc) · 11.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="maximum-scale=1.0, initial-scale=1.0, width=device-width" />
<meta name="description"
content="A simple website made with HTML and CSS (yes, with no JS because it wasn't needed) for my wedding with Chiara on September 18, 2022" />
<meta name="author" content="Lorenzo Tabasso" />
<title>Chiara e Lorenzo</title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/img/handsWithWeddingRings.png" />
<!-- Font Awesome 6.1 icons (free version)-->
<script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700" rel="stylesheet" type="text/css" />
<!-- CSS -->
<!-- Bootstrap5.2 - CSS via CDN -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link href="css/styles.css" rel="stylesheet" />
<!-- SCRIPTS -->
<!-- Bootstrap5.2 - JavaScript Bundle with Popper via CDN -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous">
</script>
</head>
<body id="">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg bg-light sticky-top">
<div class="container">
<a class="navbar-brand" href="#">
Chiara e Lorenzo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#reception">Ricevimento</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#honeymoon">Viaggio di nozze</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#sermig">Sermig</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#ceremony">Cerimonia</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<!-- Caricature and announcement -->
<div class="row mb-4">
<div class="col-md-6 col-xs-12 text-center">
<img id="ourCaricature" src="./assets/img/chiaraAndMe.jpg"
alt="Una caricatura in cui Chiara e Lorenzo vestiti da sposi si abbracciano." />
</div>
<div class="col-md-6 col-xs-12 d-flex align-items-center flex-column">
<div class="mt-auto mb-auto">
<h1 class="text-center">Ci sposiamo!</p>
<h1 class="text-center">Chiara & Lorenzo</p>
<h5 class="text-center">18 settembre 2022</p>
</div>
</div>
</div>
<!-- Reception -->
<div id="reception" class="row mb-4">
<div class="text-center mb-2">
<h2 class="section-heading text-uppercase">Ricevimento</h2>
</div>
<div class="col-md-6">
<div class="row align-items-center mb-2">
<div class="col-3 fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x custom-light-red"></i>
<i class="fas fa-solid fa-calendar-day fa-stack-1x fa-inverse"></i>
</div>
<div class="col-9">
<h4>Quando?</h4>
<p><b>18 settembre 2022</b>, <b>dopo la cerimonia</b></p>
</div>
</div>
<div class="row align-items-center mb-2">
<div class="col-3 fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x custom-light-red"></i>
<i class="fas fa-solid fa-map-location-dot fa-stack-1x fa-inverse"></i>
</div>
<div class="col-9">
<h4>Dove?</h4>
<p><b>Sermig Arsenale della Pace</b></p>
<p>Piazza Borgo Dora, 61, 10152 Torino TO</p>
<p>Il ricevimento sarà allestito presso il "<b>prato dei popoli</b>" e il salone del "<b>l'università del dialogo</b>" <b>all'interno del Sermig</b>.</p>
<p>La <b>strada</b> dalla chiesa al prato e al salone <b>sarà segnalata</b>.</p>
</div>
</div>
<div class="row align-items-center mb-2">
<div class="col-3 fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x custom-light-red"></i>
<i class="fa-solid fa-circle-exclamation fa-stack-1x fa-inverse"></i>
</div>
<div class="col-9">
<h4>Conferma della presenza</h4>
<p>È gradita la <b>conferma</b> della vostra presenza a cena insieme alla <b>lista delle allergie e/o
intolleranze</b>, <b>entro il 1 settembre</b>. Per comunicarcele, vi preghiamo di usare il seguente <a
href="https://docs.google.com/forms/d/e/1FAIpQLSdCYyJI80ZNpkLXARXBOXXJVraqbr69qdsweYc0wUilF9TuMw/viewform?usp=sf_link">form</a>. Grazie!
</p>
<h5>Nota</h5>
<p>Il <b>form</b> è <b>compilabile da una persona alla volta</b>. Chiediamo in particolare alle <b>coppie</b> e alle <b>famiglie</b>, di far <b>compilare il form a ogni loro membro</b>. Grazie!
</p>
</div>
</div>
</div>
<div class="col-md-6">
<div id="map-container" class="z-depth-1-half map-container" style="height: 500px">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3908.1522313611285!2d7.681821002173022!3d45.08163956307274!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47886d9e9e9ff201%3A0x74e685efbd2823c2!2sSermig%20Arsenale%20della%20Pace!5e0!3m2!1sit!2sit!4v1659560632537!5m2!1sit!2sit"
frameborder="0" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
</div>
<!-- Honeymoon -->
<div id="honeymoon" class="row mb-4">
<div class="text-center mb-2">
<h2 class="section-heading text-uppercase">Viaggio di nozze</h2>
</div>
<div class="col-md-12">
<p><b>La vostra presenza sarà per noi il miglior regalo</b>. Ma, se volete, potete aiutarci cotribuendo al nostro <b>viaggio di
nozze in Brasile</b>.</p>
<p>Potete contribuire in due modi:
<ul>
<li>tramite <b>bonifico al nostro IBAN</b> (contattateci per averlo),</li>
<li>tramite una <b>busta</b>, che potrete lasciarci al sicuro nel luogo del ricevimento</li>
</ul>
</p>
</div>
</div>
<!-- Sermig -->
<div id="sermig" class="row mb-4">
<div class="text-center mb-2">
<h2 class="section-heading text-uppercase">Sermig</h2>
</div>
<div class="col-md-6 col-xs-12">
<img id="sermigCaricature" src="assets/img/weAtSermig.jpg"
alt="Un'illustrazione di Chiara e Lorenzo davanti al Sermig">
</div>
<div class="col-md-6 col-xs-12">
<p>Abbiamo deciso di sposarci al <b>Sermig</b> poiché condividiamo un <b>profondo legame con questa casa</b>.
Sia con le persone che la abitano che con lo spirito che li guida.</p>
<p>Descrivere il Sermig (Servizio Missionario Giovani) e l'Arsenale della Pace in poche righe non è un compito
facile. Ma in sitesi potremo dirvi che:</p>
<ul>
<li>Nasce il 14 maggio 1964 da Ernesto Olivero, sua moglie Maria e un gruppo di giovani uniti da un sogno:
<b>cancellare la fame nel mondo</b>.
</li>
<li>Ad oggi, è un "laboratorio" di convivenza, di dialogo, di formazione dei giovani, di accoglienza dei più
sfortunati, un monastero metropolitano, aperto 24 ore su 24.</li>
<li>Vi trovano rifugio uomini e donne che cercano un aiuto per cambiare vita.</li>
<li>E' luogo d'incontro per migliaia di giovani che da tutta Italia e dall'estero si danno appuntamento per
confrontarsi, dialogare e crescere.</li>
<li>E' base di partenza per la solidarietà che raggiunge i cinque continenti.</li>
<li>E' luogo di preghiera e di silenzio, di cultura e di formazione.</li>
</ul>
<p>Il Sermig è <b>sostenuto al 93% dalla gente comune</b>. Amici e volontari che scelgono di donare, o meglio di
"restituire" le loro risorse, come il tempo, la professionalità, il denaro, i beni materiali e spirituali
per chiunque ne abbia bisogno.</p>
<p>Per saperne di più sul Sermig e sull'Arsenale della Pace, vi consigliamo di visitare l'arsenale, leggere i
loro libri, visitare il loro <a href="https://www.sermig.org">sito web</a> e le loro pagine social di
<a href="https://www.facebook.com/arsenaledellapace/">Facebook</a>,
<a href="https://www.instagram.com/sermig_arsenaledellapace/">Instagram</a>,
<a href="https://www.youtube.com/user/SermigTorino">Youtube</a>, e
<a href="https://twitter.com/SermigTorino">Twitter</a>.
</p>
</div>
</div>
<!-- Ceremony -->
<div id="ceremony" class="row mb-4">
<div class="text-center mb-2">
<h2 class="section-heading text-uppercase">Cerimonia</h2>
</div>
<div class="col-md-6">
<div class="row align-items-center mb-2">
<div class="col-3 fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x custom-light-red"></i>
<i class="fas fa-solid fa-calendar-day fa-stack-1x fa-inverse"></i>
</div>
<div class="col-9">
<h4>Quando?</h4>
<p><b>18 settembre 2022</b>, alle <b>15:30</b></p>
</div>
</div>
<div class="row align-items-center mb-2">
<div class="col-3 fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x custom-light-red"></i>
<i class="fas fa-solid fa-map-location-dot fa-stack-1x fa-inverse"></i>
</div>
<div class="col-9">
<h4>Dove?</h4>
<p><b>Sermig Arsenale della Pace</b></p>
<p>Piazza Borgo Dora, 61, 10152 Torino TO</p>
<p>Chiedere all'ingresso principale le indicazioni per la Chiesa "Maria Madre dei Giovani"</p>
</div>
</div>
</div>
<div class="col-md-6">
<div id="map-container" class="z-depth-1-half map-container" style="height: 500px">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3908.1522313611285!2d7.681821002173022!3d45.08163956307274!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47886d9e9e9ff201%3A0x74e685efbd2823c2!2sSermig%20Arsenale%20della%20Pace!5e0!3m2!1sit!2sit!4v1659560632537!5m2!1sit!2sit"
frameborder="0" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
</div>
<!-- Footer -->
<footer class="row">
<p class="text-center">Fatto con ❤️ da Lorenzo Tabasso, con le illustrazioni di
<a href="https://www.francescatabasso.com/">Francesca Tabasso</a>
</p>
</footer>
</div>
</body>
</html>