-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
165 lines (149 loc) · 10.3 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
<!DOCTYPE html>
<html>
<head>
<title>CASBT - Acceuil</title>
<meta name="description" content="description">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/index.css">
<script src="https://kit.fontawesome.com/ea6355d6e4.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/script.js" ></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<section class="bg-image"></section>
<header class="d-flex flex-column flex-lg-row justify-content-center align-items-center">
<nav class="navbar d-flex flex-column flex-lg-row justify-content-center align-items-center bg-header shadow p-2 pb-3">
<a class="p-3 pt-0 d-block d-xl-none text-center" href="index.html"><img src="media/img/logo-little.png" alt="Logo CASBT"></a>
<a class="nav-link text-center" href="actu.html">Actualités</a>
<div id="menu-deroulant" class="d-flex flex-column align-items-center nav-link">
<a class="mb-auto" href="demarches.html">Vos Démarches</a>
<div class="d-flex flex-row sm-flex-column sous-menu justify-content-center p-0">
<ul class="d-flex flex-column align-items-center p-0 m-2">
<a href="demarches.html"><li>Demande de branchement ou contrôle</li></a>
</ul>
<ul class="d-flex flex-column align-items-center p-0 m-2">
<a href="démarches-page/coordonnées.html"><li>Modifier mes coordonnées</li></a>
</ul>
</div>
</div>
<a class="nav-link p-3 pt-0 d-none d-xl-block text-center" href="index.html">
<img src="media/img/logo.png" alt="Logo CASBT">
</a>
<div id="menu-deroulant" class="d-flex flex-column align-items-center nav-link">
<a href="infos-pratiques.html">Infos Pratiques</a>
<div class="d-flex flex-row sm-flex-column sous-menu justify-content-center p-0">
<ul class="d-flex flex-column align-items-center p-0 m-2">
<a href="infos-pratiques-pages/tarifs_et_reglements.html"><li>Tarifs et réglements</li></a>
<a href="infos-pratiques-pages/lire_compteur.html"><li>Lire son compteur</li></a>
</ul>
<ul class="d-flex flex-column align-items-center p-0 m-2">
<a href="infos-pratiques-pages/conseil_exploitation.html"><li>Conseil d'exploitation</li></a>
<a href="infos-pratiques-pages/faq.html"><li>FAQ</li></a>
</ul>
</div>
</div>
<a class="nav-link text-center" href="contact.html">Nous contacter</a>
</nav>
</header>
<div class="welcome-title d-flex flex-column justify-content-around align-items-center">
<h1 class="display-3 d-none d-xl-block p-4 shadow">Bienvenue sur le site de la communauté d'Agglomération GRAND SUD CARAIBE</h1>
<h1 class="display-6 d-xl-none p-4 shadow">Bienvenue sur le site de la communauté d'Agglomération GRAND SUD CARAIBE</h1>
<a href="#map" class="btn-display-carrousel mt-6">
<img class="" src="media/img/arrow-down-sm.png" alt="arrow-down">
</a>
</div>
<div class="content">
<div id="carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
<li data-target="#carousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<a href="actu.html" title="Aller vers la page actualités">
<img class="d-block w-100" src="media/img/slide1.jpg" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>Actualités</h5>
<p>Découvrez les différentes actualités de votre région</p>
</div>
</a>
</div>
<div class="carousel-item">
<a href="demarches.html" title="Aller vers la page vos démarches">
<img class="d-block w-100" src="media/img/slide2.jpg" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h5>Vos démarches</h5>
<p>Le point d'ancre pour effectuer toutes vos démarches administratives</p>
</div>
</a>
</div>
<div class="carousel-item">
<a href="demarches.html" title="Aller vers la page infos pratiques">
<img class="d-block w-100" src="media/img/slide3.jpg" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h5>Infos pratiques</h5>
<p>Toutes les informations de votre région à porter de main</p>
</div>
</a>
</div>
<div class="carousel-item">
<a href="contact.html" title="Aller vers la page contact">
<img class="d-block w-100" src="media/img/slide4.jpg" alt="Fourth slide">
<div class="carousel-caption d-none d-md-block">
<h5>Nous contacter</h5>
<p>Pour pouvoir rentrer en contact simplement et efficacement avec nos équipes</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<iframe id="map" frameborder="0" allowfullscreen src="https://umap.openstreetmap.fr/fr/map/liste-des-communes-membres_827644#11/16.0376/-61.6512"></iframe>
</div>
<footer class="d-flex flex-column justify-content-center flex-md-row align-items-stretch">
<div class="d-flex justify-content-around align-items-center text-center adress-footer pt-3 pr-3 pb-3">
<a class="nav-link text-center d-none d-md-block " href="index.html">
<img src="media/img/logo.png" alt="Logo CASBT">
</a>
<div class="d-flex flex-column">
<h2 class="d-none d-lg-block">Communauté d'Agglomération GRAND SUD CARAIBE</h2>
<h6 class="d-block d-lg-none">Communauté d'Agglomération GRAND SUD CARAIBE</h6>
<span>Rue Bébian - 97100 Basse Terre</span>
<span>Horaires d'ouverture : Du lundi au vendredi, de 7h30 à 13h00 et de 14h30 à 17h</span>
</div>
</div>
<div class="d-flex flex-column justify-content-between text-center p-3 newsletter-footer">
<span class="mb-3">Recevez chaque semaine l'actualité de votre communauté d'agglomération :</span>
<div class="input-group">
<input type="text" class="form-control" placeholder="Rentrer votre email" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-success" type="button">S'abonner</button>
</div>
</div>
</div>
</footer>
</body>
<script>
document.querySelector(".btn-display-carrousel").addEventListener('click',function(){
document.getElementById("carousel").classList.add("carousel-anim");
document.getElementById("map").classList.add("map-anim");
});
</script>
</html>