This repository has been archived by the owner on Aug 16, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
324 lines (324 loc) · 25.2 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
323
324
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Alejandra Bahamón</title>
<link href="https://fonts.googleapis.com/css?family=Spinnaker" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/noelboss/featherlight/1.7.13/release/featherlight.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/noelboss/featherlight/1.7.13/release/featherlight.gallery.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
<div class="header__container flex no-wrap-flex justify-content-space-between align-items-center">
<h2 class="off-screen">Alejandra Bahamón</h2>
<div class="header__social">
<a class="header__social-btn" title="Instagram" href="https://www.instagram.com/alebahamon/" target="_blank">
<svg viewBox="0 0 24 24" class="header__social-svg">
<path d="M12,7.92A4.08,4.08,0,1,0,16.09,12,4.08,4.08,0,0,0,12,7.92Zm0,6.73A2.65,2.65,0,1,1,14.66,12,2.66,2.66,0,0,1,12,14.65Z"/>
<path d="M19.92,8.72a5.59,5.59,0,0,0-.37-1.93,4,4,0,0,0-2.33-2.32,5.54,5.54,0,0,0-1.93-.37c-.85,0-1.12,0-3.29,0s-2.44,0-3.29,0a5.54,5.54,0,0,0-1.93.37,3.79,3.79,0,0,0-1.41.91,3.78,3.78,0,0,0-.92,1.41,5.59,5.59,0,0,0-.37,1.93C4,9.57,4,9.84,4,12s0,2.43,0,3.28a5.54,5.54,0,0,0,.37,1.93,3.78,3.78,0,0,0,.92,1.41,3.79,3.79,0,0,0,1.41.91,5.54,5.54,0,0,0,1.93.37c.85,0,1.12.05,3.29.05s2.44,0,3.29-.05a5.54,5.54,0,0,0,1.93-.37,4,4,0,0,0,2.33-2.32,5.54,5.54,0,0,0,.37-1.93c0-.85,0-1.12,0-3.28S20,9.57,19.92,8.72Zm-1.43,6.49a4.44,4.44,0,0,1-.28,1.48,2.31,2.31,0,0,1-.59.91,2.57,2.57,0,0,1-.92.6,4.26,4.26,0,0,1-1.48.27c-.84,0-1.09.05-3.22.05s-2.38,0-3.22-.05A4.26,4.26,0,0,1,7.3,18.2a2.57,2.57,0,0,1-.92-.6,2.31,2.31,0,0,1-.59-.91,4.44,4.44,0,0,1-.28-1.48c0-.84,0-1.09,0-3.21s0-2.37,0-3.21a4.44,4.44,0,0,1,.28-1.48,2.31,2.31,0,0,1,.59-.91,2.57,2.57,0,0,1,.92-.6,4.26,4.26,0,0,1,1.48-.27c.84,0,1.09,0,3.22,0s2.38,0,3.22,0a4.26,4.26,0,0,1,1.48.27,2.57,2.57,0,0,1,.92.6,2.31,2.31,0,0,1,.59.91,4.44,4.44,0,0,1,.28,1.48c0,.84.05,1.09.05,3.21S18.53,14.37,18.49,15.21Z"/>
<path d="M16.26,6.8a1,1,0,1,0,.95,1A1,1,0,0,0,16.26,6.8Z"/>
</svg>
</a>
<a class="header__social-btn" title="Facebook" href="https://www.facebook.com/Alebahamon" target="_blank">
<svg viewBox="0 0 24 24" class="header__social-svg">
<path d="M13.28,20.23V12.72h2.53l.37-2.93h-2.9V7.93c0-.85.23-1.43,1.45-1.43h1.56V3.88c-.27,0-1.19-.11-2.27-.11a3.53,3.53,0,0,0-3.77,3.87V9.79H7.71v2.93h2.54v7.51h3"/>
</svg>
</a>
<a class="header__social-btn" title="Twitter" href="https://twitter.com/Alebahamon" target="_blank">
<svg viewBox="0 0 24 24" class="header__social-svg">
<path d="M20,7.05a6.61,6.61,0,0,1-1.89.52,3.32,3.32,0,0,0,1.45-1.82,6.62,6.62,0,0,1-2.09.8,3.28,3.28,0,0,0-5.68,2.24,3.08,3.08,0,0,0,.09.75A9.32,9.32,0,0,1,5.11,6.11a3.29,3.29,0,0,0,1,4.38,3.42,3.42,0,0,1-1.49-.41v0a3.28,3.28,0,0,0,2.64,3.21,3.58,3.58,0,0,1-.87.11,3.18,3.18,0,0,1-.62-.06,3.3,3.3,0,0,0,3.07,2.28,6.58,6.58,0,0,1-4.08,1.4A6.81,6.81,0,0,1,4,17,9.33,9.33,0,0,0,18.37,9.17c0-.14,0-.28,0-.42A6.79,6.79,0,0,0,20,7.05Z"/>
</svg>
</a>
</div>
<a class="header__logo" href="index.html">
<img src="svg/ab-logo.svg" alt="Alejandra Bahamón">
</a>
<a class="js-anchor-animated btn btn_outline btn_green header__btn" href="#comprar">Comprar</a>
</div>
</header>
<main>
<section class="hero">
<div class="container flex align-items-center">
<figure class="hero__figure">
<picture>
<source srcset="img/hero-mobile-min.jpg" media="(max-width: 767px)">
<source srcset="img/hero-tablet-min.jpg" media="(max-width: 1199px)">
<img class="hero__img" srcset="img/hero-desktop-min.jpg" alt="Estos anillos son piezas para hacer conciencia de los procesos de cambio">
</picture>
</figure>
<header class="hero__header">
<h1 class="hero__title">Estos anillos son piezas para hacer conciencia de los procesos de cambio</h1>
<p class="hero__text">Con el tiempo el baño en oro entrará en un desgaste natural que revelará los acabados en que están elaborados, la idea es seguir encontrando belleza una vez pierdan su brillo.</p>
<a class="js-anchor-animated btn btn_green btn_max-width-270" href="#coleccion">Ver colección</a>
</header>
</div>
</section>
<section class="transform">
<div class="container">
<div class="columns columns_no-gutter columns_centered columns_multiline">
<div class="col col_8 col_6-desktop">
<div class="dots">
<span class="dots__item"></span>
<span class="dots__item"></span>
<span class="dots__item"></span>
</div>
<p class="transform__text text-center">Haciendo asesorías me di cuenta que de alguna manera necesitaba materializar lo que pienso sobre mi profesión, pero sobre todo lo que pienso como persona. De cómo he logrado entender, ayudando a los demás, a encontrar la belleza en los procesos de cambio porque muchas veces no nos damos cuenta que con el tiempo no perdemos el brillo, sino que conocemos los colores y matices de los que realmente estamos hechos.</p>
</div>
<div class="transform__title-container">
<h2 class="transform__title">Transforma</h2>
</div>
<div class="transform__img-container">
<figure class="transform__img">
<img class="js-transform-img fit-image transform__img-item transform__img-item_active" src="img/rings-1-min.png" alt="Transformación 1" data-object-fit="cover">
<img class="js-transform-img fit-image transform__img-item" src="img/rings-2-min.png" alt="Transformación 2" data-object-fit="cover">
<img class="js-transform-img fit-image transform__img-item" src="img/rings-3-min.png" alt="Transformación 3" data-object-fit="cover">
</figure>
</div>
<div class="col col_11 col_10-desktop">
<div class="js-ring-item ring-item">
<figure class="ring-item__img-container">
<img class="ring-item__img" src="img/transformation-1-min.jpg" alt="Transformación 1">
</figure>
<div class="columns columns_no-gutter justify-content-flex-end">
<div class="col col_4 col_3-desktop">
<p class="ring-item__text">Estos anillos son piezas para hacer conciencia de la magia que sentimos al experimentar transformación, con el tiempo el baño de oro o plata entrará en un desgaste natural que empezará a revelar los acabados de la porcelana en que están elaborados.</p>
</div>
</div>
</div>
<div class="js-ring-item ring-item">
<figure class="ring-item__img-container">
<img class="ring-item__img" src="img/transformation-2-min.jpg" alt="Transformación 2">
</figure>
<div class="columns columns_no-gutter">
<div class="col col_4 col_3-desktop">
<p class="ring-item__text">En la medida en que entramos en contacto con nosotros mismos, entendemos realmente nuestra esencia, revelamos nuestra identidad, nuestras texturas, nuestros colores. Cada anillo cuenta con un acabado diferente, el desgaste será único y dependerá del contacto que tengas con la pieza.</p>
</div>
</div>
</div>
<div class="js-ring-item ring-item">
<figure class="ring-item__img-container">
<img class="ring-item__img" src="img/transformation-3-min.jpg" alt="Transformación 3">
</figure>
<div class="columns columns_no-gutter justify-content-flex-end">
<div class="col col_4 col_3-desktop">
<p class="ring-item__text">Las personas experimentan algo similiar, lo primero que muestran a los demás es todo aquello que resalta, que llama la ateción, que sobresale: el reto siempre está en seguir encontrando valor en ellas una vez ese espejismo haya desaparecido. Permite que tu imagen sea el reflejo de tus sueños.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="coleccion" class="collection section-gray">
<div class="container">
<div class="columns columns_no-gutter columns_centered">
<div class="col col_7">
<p>Piezas limitadas</p>
<h2 class="collection__title">Colección de lanzamiento</h2>
<a class="js-anchor-animated btn btn_green btn_max-width-170" href="#comprar">Comprar</a>
</div>
</div>
</div>
<div class="collection__gallery flex no-wrap-flex">
<figure class="collection__gallery-item">
<figcaption class="collection__gallery-text">Wash</figcaption>
<img class="collection__gallery-img" src="img/collections-1-min.png" alt="Fotografía del anillo Wash">
</figure>
<figure class="collection__gallery-item">
<figcaption class="collection__gallery-text">Solido</figcaption>
<img class="collection__gallery-img" src="img/collections-2-min.png" alt="Fotografía del anillo Solido">
</figure>
<figure class="collection__gallery-item">
<figcaption class="collection__gallery-text">Sweet</figcaption>
<img class="collection__gallery-img" src="img/collections-3-min.png" alt="Fotografía del anillo Sweet">
</figure>
<figure class="collection__gallery-item">
<figcaption class="collection__gallery-text">Peltre</figcaption>
<img class="collection__gallery-img" src="img/collections-4-min.png" alt="Fotografía del anillo Peltre">
</figure>
</div>
</section>
<section class="gallery">
<h2 class="off-screen">Galería</h2>
<div class="columns columns_multiline">
<div class="col col_4">
<a class="js-gallery gallery__item gallery__item_margin-bottom-30" href="img/gallery-1-full-size-min.jpg">
<span class="gallery__icon"></span>
<img class="gallery__img" src="img/gallery-1-min.jpg" alt="Galeria anillos transformación 1">
</a>
<a class="js-gallery gallery__item" href="img/gallery-2-full-size-min.jpg">
<span class="gallery__icon"></span>
<img class="gallery__img" src="img/gallery-2-min.jpg" alt="Galeria anillos transformación 2">
</a>
</div>
<div class="col col_4">
<a class="js-gallery gallery__item gallery__item_full-height" href="img/gallery-6-full-size-min.jpg">
<span class="gallery__icon"></span>
<img class="gallery__img fit-image" src="img/gallery-6-min.jpg" alt="Galeria anillos transformación 6" data-object-fit="cover">
</a>
</div>
<div class="col col_4">
<a class="js-gallery gallery__item gallery__item_margin-bottom-30" href="img/gallery-4-full-size-min.jpg">
<span class="gallery__icon"></span>
<img class="gallery__img" src="img/gallery-4-min.jpg" alt="Galeria anillos transformación 4">
</a>
<a class="js-gallery gallery__item" href="img/gallery-5-full-size-min.jpg">
<span class="gallery__icon"></span>
<img class="gallery__img" src="img/gallery-5-min.jpg" alt="Galeria anillos transformación 5">
</a>
</div>
</div>
</section>
<section id="comprar" class="buy section-gray">
<div class="container">
<h2 class="off-screen">Comprar</h2>
<div class="columns columns_no-gutter columns_centered">
<div class="col col_7 col_6-desktop">
<p class="buy__small-text text-center">Precio especial de lanzamiento</p>
<p class="buy__price text-center">$65.000 COP</p>
<p class="buy__text text-center">¿Quieres tener uno de nuestros anillos? Inscríbete en nuestra lista de espera para ser seleccionada y nos pondremos en contacto contigo.</p>
</div>
</div>
<div class="columns columns_no-gutter columns_centered">
<div class="col col_5 col_4-desktop">
<!-- Begin Mailchimp Signup Form -->
<style type="text/css">
#mc_embed_signup input.mce_inline_error {
border-color: #E22929;
}
#mc_embed_signup div.mce_inline_error {
background-color: transparent;
color: #E22929;
font-weight: 600;
margin: 3px 0 0;
padding: 0;
}
#mce-error-response {
color: #E22929;
margin-bottom: 20px;
}
#mce-success-response {
font-weight: 700;
margin-bottom: 20px;
}
</style>
<div id="mc_embed_signup">
<form action="https://alejandrabahamon.us19.list-manage.com/subscribe/post?u=10b730264df75712066404b0c&id=fb37ec7536&SIGNUP=RingsLanding" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group field">
<label class="field__label" for="mce-FNAME">Nombres</label>
<input type="text" value="" name="FNAME" class="required" id="mce-FNAME">
</div>
<div class="mc-field-group field">
<label class="field__label" for="mce-LNAME">Apellidos</label>
<input type="text" value="" name="LNAME" class="required" id="mce-LNAME">
</div>
<div class="mc-field-group field">
<label class="field__label" for="mce-EMAIL">Correo electrónico</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group field size1of2">
<label class="field__label" for="mce-PHONE">Número de celular</label>
<input type="text" name="PHONE" class="required" value="" id="mce-PHONE">
</div>
<div id="mce-responses" class="clear text-center">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true">
<input type="text" name="b_10b730264df75712066404b0c_fb37ec7536" tabindex="-1" value="">
</div>
<div class="clear text-center">
<input type="submit" value="Enviar" name="subscribe" id="mc-embedded-subscribe" class="btn btn_green btn_max-width-270 buy__btn">
</div>
</div>
</form>
</div>
<script type='text/javascript' src='https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>
<script type='text/javascript'>
(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[0]='EMAIL';ftypes[0]='email';fnames[4]='PHONE';ftypes[4]='phone';fnames[3]='SIGNUP';ftypes[3]='text';fnames[5]='TAGS';ftypes[5]='text';
/*
* Translated default messages for the $ validation plugin.
* Locale: ES
*/
$.extend($.validator.messages, {
required: "Este campo es obligatorio.",
remote: "Por favor, rellena este campo.",
email: "Por favor, escribe una dirección de correo válida",
url: "Por favor, escribe una URL válida.",
date: "Por favor, escribe una fecha válida.",
dateISO: "Por favor, escribe una fecha (ISO) válida.",
number: "Por favor, escribe un número entero válido.",
digits: "Por favor, escribe sólo dígitos.",
creditcard: "Por favor, escribe un número de tarjeta válido.",
equalTo: "Por favor, escribe el mismo valor de nuevo.",
accept: "Por favor, escribe un valor con una extensión aceptada.",
maxlength: $.validator.format("Por favor, no escribas más de {0} caracteres."),
minlength: $.validator.format("Por favor, no escribas menos de {0} caracteres."),
rangelength: $.validator.format("Por favor, escribe un valor entre {0} y {1} caracteres."),
range: $.validator.format("Por favor, escribe un valor entre {0} y {1}."),
max: $.validator.format("Por favor, escribe un valor menor o igual a {0}."),
min: $.validator.format("Por favor, escribe un valor mayor o igual a {0}.")
});}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->
</div>
</div>
</div>
</section>
<section class="about">
<div class="container">
<div class="columns columns_no-gutter columns_align-items-center">
<div class="col col_3 col_offset-1">
<figure class="about__img-container">
<img class="about__img" src="img/ale-bahamon-min.jpg" alt="Alejandra Bahamón">
</figure>
</div>
<div class="col col_6 col_offset-1">
<h2 class="about__title">Alejandra Bahamón</h2>
<p>Comunicadora social y periodista de la Universidad de La Sabana, con énfasis en mercadeo y comunicación estratégica. Primera y única asesora de imágen certificada por <i>Colour Me Beautiful Londres</i> en Colombia. <br><br>“Para mí asesoría de imagen siempre ha sido reinventarse, ir más allá, es tener siempre algo que contar, jamás perder la vigencia, dejar una marca, es permitirnos ser recordados logrando un impacto en los otros partiendo de conocer la magia que llevamos dentro”</p>
</div>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="footer__container">
<div class="footer__social flex justify-content-center">
<a class="btn btn_icon btn_green footer__social-btn" title="Instagram" href="https://www.instagram.com/alebahamon/" target="_blank">
<svg viewBox="0 0 24 24" class="btn__svg">
<path d="M12,7.92A4.08,4.08,0,1,0,16.09,12,4.08,4.08,0,0,0,12,7.92Zm0,6.73A2.65,2.65,0,1,1,14.66,12,2.66,2.66,0,0,1,12,14.65Z"/>
<path d="M19.92,8.72a5.59,5.59,0,0,0-.37-1.93,4,4,0,0,0-2.33-2.32,5.54,5.54,0,0,0-1.93-.37c-.85,0-1.12,0-3.29,0s-2.44,0-3.29,0a5.54,5.54,0,0,0-1.93.37,3.79,3.79,0,0,0-1.41.91,3.78,3.78,0,0,0-.92,1.41,5.59,5.59,0,0,0-.37,1.93C4,9.57,4,9.84,4,12s0,2.43,0,3.28a5.54,5.54,0,0,0,.37,1.93,3.78,3.78,0,0,0,.92,1.41,3.79,3.79,0,0,0,1.41.91,5.54,5.54,0,0,0,1.93.37c.85,0,1.12.05,3.29.05s2.44,0,3.29-.05a5.54,5.54,0,0,0,1.93-.37,4,4,0,0,0,2.33-2.32,5.54,5.54,0,0,0,.37-1.93c0-.85,0-1.12,0-3.28S20,9.57,19.92,8.72Zm-1.43,6.49a4.44,4.44,0,0,1-.28,1.48,2.31,2.31,0,0,1-.59.91,2.57,2.57,0,0,1-.92.6,4.26,4.26,0,0,1-1.48.27c-.84,0-1.09.05-3.22.05s-2.38,0-3.22-.05A4.26,4.26,0,0,1,7.3,18.2a2.57,2.57,0,0,1-.92-.6,2.31,2.31,0,0,1-.59-.91,4.44,4.44,0,0,1-.28-1.48c0-.84,0-1.09,0-3.21s0-2.37,0-3.21a4.44,4.44,0,0,1,.28-1.48,2.31,2.31,0,0,1,.59-.91,2.57,2.57,0,0,1,.92-.6,4.26,4.26,0,0,1,1.48-.27c.84,0,1.09,0,3.22,0s2.38,0,3.22,0a4.26,4.26,0,0,1,1.48.27,2.57,2.57,0,0,1,.92.6,2.31,2.31,0,0,1,.59.91,4.44,4.44,0,0,1,.28,1.48c0,.84.05,1.09.05,3.21S18.53,14.37,18.49,15.21Z"/>
<path d="M16.26,6.8a1,1,0,1,0,.95,1A1,1,0,0,0,16.26,6.8Z"/>
</svg>
</a>
<a class="btn btn_icon btn_green footer__social-btn" title="Facebook" href="https://www.facebook.com/Alebahamon" target="_blank">
<svg viewBox="0 0 24 24" class="btn__svg">
<path d="M13.28,20.23V12.72h2.53l.37-2.93h-2.9V7.93c0-.85.23-1.43,1.45-1.43h1.56V3.88c-.27,0-1.19-.11-2.27-.11a3.53,3.53,0,0,0-3.77,3.87V9.79H7.71v2.93h2.54v7.51h3"/>
</svg>
</a>
<a class="btn btn_icon btn_green footer__social-btn" title="Twitter" href="https://twitter.com/Alebahamon" target="_blank">
<svg viewBox="0 0 24 24" class="btn__svg">
<path d="M20,7.05a6.61,6.61,0,0,1-1.89.52,3.32,3.32,0,0,0,1.45-1.82,6.62,6.62,0,0,1-2.09.8,3.28,3.28,0,0,0-5.68,2.24,3.08,3.08,0,0,0,.09.75A9.32,9.32,0,0,1,5.11,6.11a3.29,3.29,0,0,0,1,4.38,3.42,3.42,0,0,1-1.49-.41v0a3.28,3.28,0,0,0,2.64,3.21,3.58,3.58,0,0,1-.87.11,3.18,3.18,0,0,1-.62-.06,3.3,3.3,0,0,0,3.07,2.28,6.58,6.58,0,0,1-4.08,1.4A6.81,6.81,0,0,1,4,17,9.33,9.33,0,0,0,18.37,9.17c0-.14,0-.28,0-.42A6.79,6.79,0,0,0,20,7.05Z"/>
</svg>
</a>
</div>
<p class="footer__text"><a class="link" href="tel:+573113163990">(+57) 311 316 3990</a> · Cra 18 # 84 – 24, Estudio 201</p>
<p class="footer__text">
<a class="link" href="terminos-condiciones.html">Términos y condiciones</a>
</p>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.3/picturefill.min.js"></script>
<script src="https://cdn.rawgit.com/noelboss/featherlight/1.7.13/release/featherlight.min.js"></script>
<script src="https://cdn.rawgit.com/noelboss/featherlight/1.7.13/release/featherlight.gallery.min.js"></script>
<script src="js/intersection-observer.js"></script>
<script src="js/objectFitPolyfill.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>