-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
288 lines (271 loc) · 18.6 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Taianny & Gabriel</title>
<link rel="stylesheet" href="assets/css/swiper-bundle.min.css" type="text/css">
<link rel="stylesheet" href="assets/css/select2.min.css" type="text/css">
<link rel="stylesheet" href="assets/css/main.min.css" type="text/css">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-174937771-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-174937771-1');
</script>
</head>
<body>
<section id="header">
<div class="bg-wrapper">
<div class="bg"></div>
</div>
<div class="hero">
<div class="names">Taianny & Gabriel</div>
<div class="buttons">
<a href="#lista-de-presentes" class="button button-gift">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M502 138.905h-57.746c.857-21.953-1.063-41.671-5.729-58.738-6.916-25.296-22.334-42.768-43.461-49.21-.688-.207-17.118-4.993-40.522-.168-19.971 4.117-49.264 16.268-77.777 50.449A54.718 54.718 0 00255.596 77h-1.202a54.742 54.742 0 00-19.997 3.762c-28.458-33.905-57.653-45.94-77.549-50.009-23.315-4.766-39.669-.003-40.4.217-21.079 6.428-36.498 23.899-43.415 49.197-4.666 17.071-6.585 36.788-5.728 58.738H10c-5.522 0-10 4.477-10 10v80.061c0 5.523 4.478 10 10 10h18.111V447.88c0 19.563 15.916 35.479 35.479 35.479h384.82c19.563 0 35.479-15.916 35.479-35.479V238.965H502c5.522 0 10-4.477 10-10v-80.061c0-5.522-4.478-9.999-10-9.999zM357.447 50.618c18.345-4.03 31.217-.681 31.912-.492 19.205 5.902 26.959 24.653 29.874 35.315 4.118 15.063 5.82 33.395 4.998 53.464H310.627c.153-1.395.254-2.798.302-4.209l40.694-20.542c4.931-2.489 6.91-8.503 4.421-13.434-2.488-4.929-8.502-6.909-13.433-4.421l-34.903 17.619a55.955 55.955 0 00-14.09-21.652c19.269-22.57 40.708-36.567 63.829-41.648zm-39.449 168.347H194.002v-60.061h123.996zM255.596 97c19.502 0 35.367 16.043 35.367 35.762a36 36 0 01-.525 6.142h-70.886a35.898 35.898 0 01-.525-6.142c0-19.719 15.865-35.762 35.367-35.762zM92.324 85.441c2.916-10.662 10.671-29.414 29.875-35.315.701-.19 13.51-3.521 31.772.461 22.889 4.992 44.139 18.726 63.269 40.867a55.976 55.976 0 00-14.716 21.796L168.947 96.3c-4.93-2.488-10.945-.51-13.434 4.421-2.489 4.93-.51 10.945 4.42 13.434l39.105 19.74c.033 1.68.142 3.352.324 5.011H87.327c-.823-20.066.879-38.4 4.997-53.465zM20 158.905h154.002v60.061H20zM48.111 447.88V238.965H198.09v224.394H63.59c-8.535 0-15.479-6.944-15.479-15.479zm415.778 0c0 8.535-6.943 15.479-15.479 15.479h-134.5V363.25c0-5.523-4.478-10-10-10s-10 4.477-10 10v100.108h-75.82V238.965h75.82v33.873c0 5.523 4.478 10 10 10s10-4.477 10-10v-33.873h149.979zM492 218.965H337.998v-60.061H492z"/><path d="M303.91 327.863c-4.193 0-7.983-2.712-9.407-6.636-1.403-3.867-.19-8.327 2.938-10.987 3.271-2.782 8.097-3.141 11.746-.873 3.501 2.176 5.323 6.409 4.523 10.446-.914 4.614-5.092 8.05-9.8 8.05z"/></svg>
<span>
Presentear <br/>o casal
</span>
</a>
<a href="#confirmar-presenca" class="button button-rsvp">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M456.628 184.26c20.077-13.937 33.258-37.226 33.258-63.551 0-42.559-34.449-77.183-76.792-77.183-42.344 0-76.792 34.624-76.792 77.183 0 26.326 13.181 49.615 33.258 63.551-17.94 7.236-32.978 20.201-42.833 36.617a70.52 70.52 0 00-32.732-31.923c14.146-11.28 23.233-28.701 23.233-48.215 0-33.926-27.467-61.527-61.228-61.527s-61.227 27.601-61.227 61.527c0 19.514 9.087 36.935 23.233 48.215a70.52 70.52 0 00-32.732 31.923c-9.856-16.415-24.893-29.38-42.833-36.617 20.077-13.937 33.258-37.226 33.258-63.551 0-42.559-34.449-77.183-76.792-77.183S22.115 78.15 22.115 120.709c0 26.326 13.181 49.615 33.258 63.551C22.944 197.34 0 229.138 0 266.194v49.418c0 5.523 4.477 10 10 10h130.393a85.16 85.16 0 00-.506 9.296c0 78.172 107.233 130.401 111.798 132.586a10.008 10.008 0 004.617.976l.472-.014a10.005 10.005 0 004.033-.983c4.545-2.185 111.305-54.403 111.305-132.564a85.16 85.16 0 00-.506-9.296h2.894c5.523 0 10-4.477 10-10s-4.477-10-10-10h-7.701c-6.314-16.521-17.874-29.982-32.611-38.192v-1.226c0-37.662 30.641-68.303 68.303-68.303h21.207c37.662 0 68.303 30.641 68.303 68.303v39.418h-27.087c-5.523 0-10 4.477-10 10s4.477 10 10 10H502c5.523 0 10-4.477 10-10v-49.418c0-37.057-22.944-68.855-55.372-81.935zM256 99.211c22.733 0 41.228 18.629 41.228 41.527S278.733 182.265 256 182.265s-41.227-18.629-41.227-41.527S233.267 99.211 256 99.211zm-8.132 103.054h16.265c27.601 0 50.056 22.455 50.056 50.056v7.717a70.905 70.905 0 00-14.032-1.39c-16.683 0-31.773 5.609-44.157 16.322-9.911-8.556-24.36-16.322-44.154-16.322-4.815 0-9.505.477-14.032 1.39v-7.717c-.002-27.601 22.453-50.056 50.054-50.056zM42.114 120.709c0-31.531 25.477-57.183 56.792-57.183s56.792 25.652 56.792 57.183-25.477 57.183-56.792 57.183c-31.316 0-56.792-25.653-56.792-57.183zM20 305.612v-39.418c0-37.662 30.641-68.303 68.303-68.303h21.207c37.662 0 68.303 30.641 68.303 68.303v1.226c-14.737 8.21-26.297 21.671-32.611 38.192zm332.113 29.296c0 57.896-77.126 102.457-95.896 112.44-18.888-10.004-96.329-54.57-96.329-112.44 0-31.548 22.822-56.26 51.957-56.26 18.051 0 29.875 9.234 36.614 16.982 1.925 2.212 4.726 3.409 7.671 3.418a10.053 10.053 0 007.556-3.58c.092-.096.182-.193.271-.292 9.729-10.966 21.909-16.527 36.2-16.527 29.133-.001 51.956 24.711 51.956 56.259zm4.189-214.199c0-31.531 25.477-57.183 56.792-57.183s56.792 25.652 56.792 57.183-25.477 57.183-56.792 57.183-56.792-25.653-56.792-57.183z"/><path d="M429.12 311.79c-1.611-3.933-5.702-6.456-9.941-6.148-4.154.302-7.747 3.224-8.894 7.225-1.151 4.015.391 8.436 3.784 10.874 3.34 2.4 7.952 2.47 11.372.189 3.92-2.615 5.49-7.795 3.679-12.14z"/></svg>
<span>
Confirmar <br/> presença
</span>
</a>
</div>
</div>
</section>
<section id="countdown">
<div class="title">Faltam</div>
<div id="countdown-timer"></div>
</section>
<section id="party">
<div class="left">
<div class="title">Cerimônia e festa</div>
<div class="subtitle">Venha estar conosco celebrando nossa união</div>
<p>A cerimônia e festa serão realizadas no Sollar Macembu <br/>Estrada Macembu, 93 - Taquara / RJ.</p>
<p>No dia 4 de outubro de 2020, às 17h30.</p>
<p>A entrada será permitida a partir das 17h, não se atrase, <br/> para não perder nenhum detalhe desse momento <br/>tão especial para nós.</p>
</div>
<div class="right">
<div class="col-1">
<div class="box-1">
<div class="day">4 de Outubro</div>
<div class="hour">17h30</div>
</div>
<div class="box-2">
<img src="assets/img/party-2.jpg">
</div>
</div>
<div class="col-2">
<div class="box-1">
<img src="assets/img/party-1.png">
</div>
<div class="box-2">
<a href="#confirmar-presenca" class="btn-primary"><span>Confirmar presença</span></a>
<a href="https://bit.ly/rotas-casamento-annyebiel" target="_blank" class="btn-secondary"><span>Saiba como chegar</span></a>
</div>
</div>
</div>
</section>
<section id="testimonials">
<div class="bg-element-1">
<img src="assets/img/testimonials-bg-element-left.svg">
</div>
<div class="bg-element-2">
<img src="assets/img/testimonials-bg-element-right.svg">
</div>
<div class="title">Mensagens</div>
<div class="swiper-container animate">
<div class="swiper-wrapper"></div>
<div class="swiper-scrollbar"></div>
</div>
<div class="wrapper">
<div class="navigation">
<div class="photo"><img src="assets/img/testimonials-photo.jpg"></div>
<div class="arrows">
<div class="arrow arrow-left"><img src="assets/img/arrow.svg" width="45"></div>
<div class="heart"><img src="assets/img/testimonials-icon.svg" width="25"></div>
<div class="arrow arrow-right"><img src="assets/img/arrow.svg" width="45"></div>
</div>
</div>
<button class="reply">Deixe uma mensagem de carinho também</button>
<div class="heart-animation">
<div class="heart">
<svg width="40" height="40" viewBox="0 0 800 700" xmlns="http://www.w3.org/2000/svg">
<path d="m263.42 235.15c-66.24 0-120 53.76-120 120 0 134.76 135.93 170.09 228.56 303.31 87.574-132.4 228.56-172.86 228.56-303.31 0-66.24-53.76-120-120-120-48.048 0-89.402 28.37-108.56 69.188-19.161-40.817-60.514-69.188-108.56-69.188z" />
</svg>
</div>
<div class="heart">
<svg width="40" height="40" viewBox="0 0 800 700" xmlns="http://www.w3.org/2000/svg">
<path d="m263.42 235.15c-66.24 0-120 53.76-120 120 0 134.76 135.93 170.09 228.56 303.31 87.574-132.4 228.56-172.86 228.56-303.31 0-66.24-53.76-120-120-120-48.048 0-89.402 28.37-108.56 69.188-19.161-40.817-60.514-69.188-108.56-69.188z" />
</svg>
</div>
<div class="heart">
<svg width="40" height="40" viewBox="0 0 800 700" xmlns="http://www.w3.org/2000/svg">
<path d="m263.42 235.15c-66.24 0-120 53.76-120 120 0 134.76 135.93 170.09 228.56 303.31 87.574-132.4 228.56-172.86 228.56-303.31 0-66.24-53.76-120-120-120-48.048 0-89.402 28.37-108.56 69.188-19.161-40.817-60.514-69.188-108.56-69.188z" />
</svg>
</div>
</div>
</div>
</section>
<div id="lista-de-presentes"></div>
<section id="gifts">
<div class="left">
<div class="confetti">
<img src="assets/img/confetti.png" alt="">
</div>
<a class="btn-gift" href="https://sites.icasei.com.br/gabrieletaianny/pt_br/store/9/1/1" target="_blank">
<div class="icon"></div>
<div class="text">
<div class="title">Presentear</div>
<div class="subtitle">acessando nossa loja online</div>
</div>
</a>
<div class="others">
<p>ou presentear através</p>
<a href="https://casamento.casasbahia.com.br/" target="_blank" class="other"><img src="assets/img/casas-bahia.svg" width="85" alt="Casas Bahia"></a>
</div>
</div>
<div class="right">
<div class="title">Lista de presentes</div>
<div class="subtitle">Ajude os noivos nessa nova etapa da vida deles</div>
<p>Quer nos ajudar com um presente para equipar nossa casa? <br/>Fizemos uma lojinha para você comprar online, ou se preferir <br/>nossa lista está disponível também no site ao lado.</p>
</div>
</section>
<section id="rsvp">
<div class="photos">
<div class="photo photo-1">
<img src="assets/img/rsvp-img-1.jpg" alt="">
</div>
<div class="photo photo-2">
<img src="assets/img/rsvp-img-2.jpg" alt="">
</div>
<div class="photo photo-3">
<img src="assets/img/rsvp-img-3.jpg" alt="">
</div>
</div>
<div class="box">
<div class="left">
<div class="title">Confirmar presença</div>
<div class="subtitle">Momentos inesquecíveis devem ser <br/>compartilhados com pessoas especiais</div>
<p>Faça parte da nossa história de amor, <br/>preencha o formulário <span class="desktop">ao lado</span><span class="mobile">abaixo</span> e confirme sua presença.</p>
</div>
<div class="separator"></div>
<div class="right" id="confirmar-presenca">
<form id="form-rsvp">
<div class="input-group etapa-1">
<label for="codigo_convidado">Digite o código de confirmação *</label>
<input type="text" name="codigo_convidado" id="codigo_convidado" required>
</div>
<div class="input-group etapa-2">
<label for="evento">Você irá ao evento?</label>
<select name="evento" id="evento" required>
<option value="" hidden>Selecione</option>
<option value="Sim">Sim</option>
<option value="Não">Não</option>
</select>
</div>
<div class="input-group etapa-2 adultos">
<label for="qtd_pessoas">Quantos Adultos?</label>
<select name="qtd_pessoas" id="qtd_pessoas" required>
<option value="" hidden>Selecione</option>
<option value="1" disabled>1</option>
<option value="2" disabled>2</option>
<option value="3" disabled>3</option>
<option value="4" disabled>4</option>
<option value="5" disabled>5</option>
<option value="6" disabled>6</option>
<option value="7" disabled>7</option>
<option value="8" disabled>8</option>
<option value="9" disabled>9</option>
<option value="10" disabled>10</option>
</select>
<div class="acompanhantes"></div>
</div>
<div class="input-group etapa-2 criancas">
<label for="criancas">Quantas crianças? <small>(até 10 anos)</small></label>
<select name="criancas" id="criancas" required>
<option value="0">Nenhuma</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div class="input-group etapa-2">
<label for="email_convidado">E-mail</label>
<input type="email" name="email" id="email_convidado" required>
</div>
<div class="input-group etapa-2">
<label for="ddd">Celular</label>
<input type="tel" name="telefone" id="telefone" minlength="14" required>
</div>
<button>Continuar <span class="arrow-right"></span></button>
<div class="error-list"></div>
</form>
</div>
</div>
</section>
<div class="modal modal-testimonials">
<div class="modal-container">
<div class="modal-title"><span>Deixe uma mensagem</span><span class="modal-close">×</span></div>
<div class="modal-content">
<form id="form-testimonials">
<input type="text" name="nome" placeholder="Nome completo" required>
<input type="email" name="email" placeholder="E-mail" required>
<textarea name="mensagem" cols="30" rows="10" placeholder="Mensagem"></textarea>
<img id="captcha">
<input type="text" name="captcha" placeholder="Digite o código acima" required>
<input type="hidden" name="captcha_key" id="captcha_key">
<input type="hidden" name="id_noivo" value="688183">
<button>Enviar</button>
<div class="error-list"></div>
</form>
</div>
</div>
</div>
<div class="modal modal-testimonials-thank">
<div class="modal-container">
<div class="modal-title"><span>Mensagem enviada com sucesso!</span><span class="modal-close">×</span></div>
<div class="modal-content">
<p>A mensagem ficará visível assim que for aprovada. 😊</p>
</div>
</div>
</div>
<div class="modal modal-rsvp-sent">
<div class="modal-container">
<div class="modal-title"><span>Enviado com sucesso!</span><span class="modal-close">×</span></div>
<div class="modal-content confirmed">
<p>Obrigado por confirmar presença! Ficaremos muito felizes com sua presença. 😊</p><br/>
<p>Não se esqueça: será no dia 4 de Outubro às 17h30 no Sollar Macembu (Estrada Macembu, 93 - Taquara / RJ).</p>
</div>
<div class="modal-content declined">
<p>Poxa, entendemos que você não poderá estar conosco...</p>
</div>
</div>
</div>
<script src="assets/js/jquery-3.5.1.min.js"></script>
<script src="assets/js/gsap.min.js"></script>
<script src="assets/js/ScrollMagic.min.js"></script>
<script src="assets/js/debug.addIndicators.min.js"></script>
<script src="assets/js/animation.gsap.min.js"></script>
<script src="assets/js/SmoothScroll.min.js"></script>
<script src="assets/js/jquery.countdown.js"></script>
<script src="assets/js/swiper-bundle.min.js"></script>
<script src="assets/js/jquery.validate.js"></script>
<script src="assets/js/jquery.mask.min.js"></script>
<script src="assets/js/select2.min.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>