-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·185 lines (157 loc) · 7.81 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="author" content="Benoit Regamey">
<title>Le Vandrouilleur | A Life on the Road for climbing, Skiing and Surfing</title>
<meta name="description" content="Valentine and Ben exploring Europe in a self-built Campervan for Climbing, Skiing and Surfing.">
<link rel="shortcut icon" type="image/png" href="/favicon.png">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- Custom fonts for this template -->
<link href="https://fonts.cdnfonts.com/css/dosis" rel="stylesheet">
<script src="https://kit.fontawesome.com/460a6dede4.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js"></script>
<script src="https://cdn.maptiler.com/mapbox-gl-js/v0.53.0/mapbox-gl.js"></script>
<script src="https://cdn.maptiler.com/mapbox-gl-leaflet/latest/leaflet-mapbox-gl.js"></script>
<!-- Custom styles for this template -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css">
<link rel="stylesheet" href="https://cdn.maptiler.com/mapbox-gl-js/v0.53.0/mapbox-gl.css">
<link rel="stylesheet" href="css/leaflet-gesture-handling.min.css" type="text/css">
<link rel="stylesheet" href="css/MarkerCluster.css" type="text/css">
<link rel="stylesheet" href="css/MarkerCluster.Default.css" type="text/css">
<link href="css/landing.css" rel="stylesheet" type="text/css">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-158702287-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-158702287-1');
</script>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-light">
<div class="container-fluid">
<button class="navbar-toggler ml-auto collapsed" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#about">A propos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://levandrouilleur.com/map">Carte</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#book">Book</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#follow">Suivez-nous</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Header -->
<div id="header" class="container-fluid height-100">
<div class="row h-100 justify-content-center align-items-center">
<div class="col-10">
<picture>
<source media="(min-width: 768px)" srcset="icon/home_logo.png">
<img class = "img-fluid mx-auto d-block" src="icon/home_logo_xs.png" style="max-height: 50vh">
</picture>
</div>
</div>
</div>
<!-- About -->
<div id="about" class="container-fluid">
<div class="row align-items-center">
<div class="col-sm-4 my-5 my-sm-0 py-1">
<img class="img-fluid mx-auto d-block max-width-50-xs max-width-30-sm max-height-30" src="icon/about-icon.png">
</div>
<div class="col-sm-8 bg-orange height-40">
<div class="row h-100 align-items-center mx-0">
<div class="col">
<h5 class="text-white mx-3 pt-3 font-weight-light">Embarquez pour un voyage en van aménagé à travers l'Europe pour grimper, skier et surfer ! Découvrez nos aventures sur la carte !</h5>
<h5 class="text-center text-white"><a href="#map" class="text-white"><i class="fa-solid fa-angles-down fa-lg"></i></a></h5>
</div>
</div>
</div>
</div>
</div>
<!-- Map -->
<div id="map" class="container-fluid height-90"></div>
<!-- Book -->
<div id="book" class="container-fluid">
<div class="row">
<div class="col-md-4 bg-teal">
<div class="row h-100 align-items-center mx-0">
<div class="col">
<h5 class="text-white text-md-left text-lg-center text-center mx-3 mt-3 pt-2 mb-2 font-weight-light">Tout frais sorti de l'imprimerie, découvrez notre nouveau book :</h5>
<h5 class="text-white text-md-left text-lg-center text-center mx-3 font-weight-light">53° Aventures en van aménagé pour grimper, skier & surfer</h5>
<h5 class="text-white text-md-left text-lg-center text-center mx-3 font-weight-light">-</h5>
<h5 class="text-md-left text-lg-center text-center mx-3 mb-3 pb-2 font-weight-light">
<a class="text-white" href="https://www.blurb.fr/b/11283151-53-aventures-en-van-am-nag-pour-grimper-skier-et">J'en veux un <i class="fa-solid fa-cart-shopping"></i></a>
</h5>
</div>
</div>
</div>
<div class="col-md-8 px-0">
<div id="carousel" class="carousel slide" data-ride="carousel" data-touch="true">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="icon/carrousel-1.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="icon/carrousel-2.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="icon/carrousel-3.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="icon/carrousel-4.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="icon/carrousel-5.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="icon/carrousel-6.jpg">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Follow -->
<div id="follow" class="container-fluid px-0">
<div class="row justify-content-center align-items-center mx-0">
<div class="col-sm-4 my-3">
<h3 class="text-center mt-4 orange" onclick="window.location='https://www.instagram.com/le.vandrouilleur';">Suivez-nous <i class="fab fa-instagram fa-lg"></i><h3>
<img src="icon/insta-icon.png" class="mx-auto d-block mt-3 mb-4 orange" style="max-width:45%;" width="125px" onclick="window.location='https://www.instagram.com/le.vandrouilleur';">
</div>
<div id="insta-feed" class="col-sm-8 px-0">
</div>
</div>
</div>
<div id="footer" class="container-fluid px-0">
<div class="row justify-content-center align-items-center h-100 mx-0">
<h6 class="text-muted"></h6>
</div>
</div>
<!-- Bootstrap core JavaScript -->
<script src="https://snapwidget.com/js/snapwidget.js"></script>
<script src="js/landing.js"></script>
<script src="js/leaflet-gesture-handling.min.js"></script>
<script src="js/leaflet.markercluster.js"></script>
<script src="js/map-landing.js"></script>
</body>
</html>