-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
322 lines (240 loc) · 12.5 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
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
<!DOCTYPE HTML>
<!--
Ethereal by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://ogp.me/ns/fb#">
<head>
<title>Mariage de Jessi et Arnaud</title>
<meta property="og:image" content="images/preview.png" />
<meta property="og:site_name" content="Mariage de Jessi et Arnaud">
<meta property="og:title" content="Mariage de Jessi et Arnaud" />
<meta property="og:description" content="Mariage de Jessi et Arnaud" />
<meta property="og:type" content="website" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
<meta name="robots" content="noindex">
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
</head>
<body class="is-preload">
<style>
@font-face {
font-family: "Aston-Script";
src: url("fonts/Aston-Script.ttf");
}
.Aston-Script {
font-family: "Aston-Script";
font-size: 3.5rem;
font-weight:100;
}
@font-face {
font-family: "Source";
src: url("fonts/Source.ttf");
}
.Source{
font-family: "Source";
}
</style>
<!-- Page Wrapper -->
<div id="page-wrapper">
<!-- Wrapper -->
<div id="wrapper">
<!-- Panel (Banner alternative) -->
<section class="panel " >
<div class="image span-3-75" data-position="bottom left">
<img src="images/pic01-tier.jpg" alt="" />
</div>
</section>
<section class="panel color0 spotlight medium left" >
<div class="content span-8">
<h2 class=" "><span class="Aston-Script">Arnaud <span class="">et</span> Jessi</span></h2>
<p></p>
<p></p>
<h2 class="major Source">se disent oui!</h2>
<h3 class=" Source span-5 span-small-exception">Et sont heureux de vous convier aux célébrations !</h3>
<ul class="actions">
<li><a href="it.html" class="button primary color1 large icon solid fa-angle-right">Italiano</a></li>
</ul>
</div>
<div class="image" data-position="bottom left">
<!-- <img src="images/lysGinkgoBlue-corner2.png" alt="" /> -->
<picture>
<source media="(min-width: 501px) and (max-height: 450px)" srcset="images/lysGinkgoBlue-shorter.png">
<source media="(min-width: 501px)" srcset="images/lysGinkgoBlue-corner3.png">
<source media="(max-width: 500px)" srcset="images/lysGinkgoBlue-small3.png">
<img src="images/lysGinkgoBlue-corner3.png" alt="IfItDoesntMatchAnyMedia">
</picture>
</div>
</section>
<!-- Panel (Où et quand?) -->
<section class="panel color2">
<div class="intro color4">
<h2 class="major ">Où et quand?</h2>
<blockquote>
<p>A l'hôtel "Les Sorbiers"</p>
<p>Rue des Sorbiers 241</p>
<p>5543 Hastière Belgique</p>
<p>Le 5 Octobre 2024</p>
</blockquote>
</div>
</section>
<section class="panel spotlight left" id="first">
<div class="content span-1-75">
</div>
<div class="image" data-position="bottom left">
<img src="images/campagne3-2.jpg" alt="" />
</div>
</section>
<!-- Panel (Confirmation) -->
<section class="panel color2">
<div class="intro color0-reverse-diag " >
<h2 class="major ">Votre réponse</h2>
<p></p>
<a href="https://forms.office.com/pages/responsepage.aspx?id=KtqS3xJC8UGk9qFba89R9TaZF361vYpGpFf4MqCA8IdUOFQyREw4WEkyMklJSTFPQlhHTzNHRjZLUS4u" class="primary button medium color1 " >Confirmer sa présence</a>
<p></p>
<p class="align-left"><b><i class="material-symbols-outlined">error</i> Merci de confirmer votre présence avant le 16 Août</b></p>
</div>
</section>
<!-- Panel (Transition + Concept) -->
<section class="panel spotlight small right" >
<div class="content span-7" >
<!-- <div>
<h1>Concept</h1>
<a href="#first" class="button primary color1 circle icon solid fa-angle-right">Next</a>
</div> -->
</ul>
</div>
<div class="image" data-position="top left">
<img src="images/Tana4-2.jpg" alt="" />
</div>
</section>
<!-- Panel Concept -->
<section class="panel medium color2">
<div class="inner color1">
<p>Notre couple nous bouscule dans nos convictions, nous interroge et nous émerveille chaque jour. Nous vous proposons de passer une journée dans notre monde le temps de cette célébration. La journée sera répartie en quatre parties: </p>
<ol>
<li>Une cérémonie à notre image : émouvante, intimiste, riche en symboles et fédératrice. </li>
<li>Une tea party où Jane Austin et Sibylle Trelawney pourraient se croiser </li>
<li>Une réception endiablée et flamboyante </li>
<li>Une fin de soirée tout en douceur pour les piliers de comptoir et les amateurs de jeux de société </li>
</ol>
<p><b>Quand se présenter?</b> Famille, collègues ou amis vous êtes les bienvenus au moment de la journée que vous préférez. En remplissant le questionnaire à gauche, vous nous aidez pour l'organisation.</p>
<p><b>Comment s’habiller ?</b> Vous êtes beaux et belles comme vous êtes, alors sentez-vous à l'aise. Et si, pour vous, "se sentir à l'aise" signifie respecter un dress code, <a href="https://coolors.co/c23d2a-fabf53-fff8eb-134080" onclick="window.open(this.href,'targetWindow', 'width=500, height=500'); return false;">cliquez ici </a>pour consulter les couleurs thématiques de notre mariage. </p>
</div>
</section>
<!-- Panel (Timeline) -->
<section id="timeline" class="panel inner large">
<div class="tl-item" tabindex="0">
<div class="tl-bg" style="background-image: url(images/ceremony.jpg)"></div>
<div class="tl-name">
<p class="f2 heading--sanSerif"><span class="Source">Cérémonie</span></p>
</div>
<div class="tl-content">
<h1>14h - 15h30</h1>
<p>
Le Vodiondry est la cérémonie de mariage traditionnelle malgache, elle consiste en une joute verbale entre les deux familles, représentées respectivement par un rhéteur maitre des traditions malgaches. L’union se joue à la qualité des plaidoiries. Nous avons voulu adapter cette cérémonie traditionnelle pour qu’elle nous ressemble.
</p>
</div>
</div>
<div class="tl-item" tabindex="0">
<div class="tl-bg" style="background-image: url(images/teaparty.jpg)"></div>
<div class="tl-name">
<p class="f2 heading--sanSerif "><span class="Source">Tea Party</span></p>
</div>
<div class="tl-content">
<h1 class="f3 text--accent ttu">15h30 - 18h</h1>
<p>
Discours, découpe du gâteau, nous démarrons les célébrations en douceur, alors servez-vous une tasse de thé et prenez part au goûter mystique spécialement demandé par le marié. De quoi s’agit-il ? Nous ne savons pas encore nous-mêmes…
</p>
</div>
</div>
<div class="tl-item" tabindex="0">
<div class="tl-bg" style="background-image: url(images/fireworks.jpg)"></div>
<div class="tl-name">
<p class="f2 heading--sanSerif"><span class="Source">Réception</span></p>
</div>
<div class="tl-content">
<h1 class="f3 text--accent ttu">18h - 22h</h1>
<p>
Cocktail dinatoire, épreuves de fortitude, cracheurs de feu…préparez-vous à avoir chaud : « Tout feu tout flamme » sera le thème de la réception. Sentez-vous libres d’enflammer la piste de danse et de vous emparer du micro pour une performance karaoke de légende !
</p>
</div>
</div>
<div class="tl-item" tabindex="0">
<div class="tl-bg" style="background-image: url(images/x.jpg)"></div>
<div class="tl-name">
<p class="f2 heading--sanSerif"><span class="Source">Soirée</span></p>
</div>
<div class="tl-content">
<h1 class="f3 text--accent ttu">22h - 24h</h1>
<p>
(Réservé aux plus de 14 ans) Octobre 2015, on ne saura jamais si le coup de foudre ou l’ambiance sulfureuse des 24h vélo auront le plus consolidé notre union. En bons trentenaires, nous préférons maintenant les soirées ludiques en bonne compagnie et avec une bonne bouteille. On se retrouve dans la salle principale pour une fin de soirée…mortelle…
</p>
</div>
</div>
</section>
<!-- Panel (Gallerie) -->
<section class="panel">
<div class="intro color0">
<h2 class="major">Les Sorbiers</h2>
<p>Nous sommes tombés sous le charme de ce domaine en bord de Meuse. Il est possible de <a href="http://www.lessorbiers.com/views/FR/sorbiers/hotel.html">loger sur place</a> mais également dans les environs, notamment à Dinant qui se trouve à 20 minutes en voiture. </p>
</div>
<div class="gallery">
<div class="group span-3">
<a href="images/gallery/fulls/01.jpg" class="image span-3" data-position="bottom"><img src="images/gallery/thumbs/01.jpg" alt="" /></a>
<a href="images/gallery/fulls/02.jpg" class="image span-1-5" data-position="center"><img src="images/gallery/thumbs/02.jpg" alt="" /></a>
<a href="images/gallery/fulls/03.jpg" class="image span-1-5" data-position="center"><img src="images/gallery/thumbs/03.jpg" alt="" /></a>
</div>
<a href="images/gallery/fulls/04.jpg" class="image span-2-5" data-position="top"><img src="images/gallery/thumbs/04.jpg" alt="" /></a>
</div>
</section>
<!-- Panel (Contribution) -->
<section class="panel ">
<div class="intro color4">
<h2 class="major">Un cadeau?</h2>
<p>Sachez que nous sommes déjà très heureux de vous compter parmi nous. Si vous y tenez, vous pouvez nous aider à transformer notre nouvelle maison en foyer chaleureux. </p>
<p>Une urne sera présente le jour du mariage mais si vous préférez un virement, voici notre numéro de compte: BE28 1030 9065 1420 (BIC: NICABEBBXXX)
</p>
</div>
</section>
<section class="panel spotlight left" id="first">
<div class="content span-1-75">
</div>
<div class="image" data-position="bottom left">
<img src="images/sketch-house2.png" alt="" />
</div>
</section>
<!-- Panel (help) -->
<section class="panel ">
<div class="intro color0-reverse-diag " >
<h2 class="major ">Un coup de pouce?</h2>
<p></p>
<p>Plutôt que de faire un cadeau, vous souhaitez nous donner un coup de main le jour du mariage? Vous pouvez vous signaler via le formulaire ci-dessous.</p>
<p></p>
<a href="https://forms.office.com/pages/responsepage.aspx?id=KtqS3xJC8UGk9qFba89R9TaZF361vYpGpFf4MqCA8IdUMDlCSzQ2SFcxTzhFN1UyUjIyOVlHV05RNC4u" class="primary button medium color1 " >Offrir de l'aide</a>
</div>
</section>
<!-- Panel (End image) -->
<section class="panel spotlight large left">
<div class="content span-5">
<iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/4XJHrx8WR34ypSi59QFyZa?utm_source=generator" width="75%" height="352" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
</div>
<div class="image " data-position="top right">
<img src="images/picSea.jpg" alt="" />
</div>
</section>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>
<style>
</style>