-
Notifications
You must be signed in to change notification settings - Fork 0
/
Restoration.html
161 lines (152 loc) · 7.24 KB
/
Restoration.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Restoration</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://kit.fontawesome.com/75daf6b927.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="footer.css">
<link rel="stylesheet" href="index.css">
<script src="main.js"></script>
<script src='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css' rel='stylesheet' />
<link rel="stylesheet" href="styles.css">
<script type="module" src="script.js"></script>
</head>
<body class="bg-white">
<header class="bg-white bg-scroll font-medium ">
<nav class=" flex justify-between items-center w-[92%] mx-auto">
<div>
<img class="w-[120px]" src="Ressources/PNGs and SVGs/Logo.png" alt="logo Nomad">
</div>
<div
class="navLinks duration-500 md:static absolute bg-white md:min-h-fit min-h-[60vh] left-0 top-[-100%] md:w-auto w-full flex items-center px-5 z-[15] ">
<!--{-100 to be hidden }-->
<ul class="flex md:flex-row flex-col flex md:items-center md:gap-[4vw] gap-8 text-slate-600">
<!--gap for view port-->
<li><a class="nav-Links" href="#">Home</a></li>
<li><a class="nav-Links" href="destination2.html">Destination</a></li>
<li><a class=" nav-Links " href="guide.html">Guide</a></li>
<li><a class="nav-Links" href="#">Carpooling</a></li>
<li><button class="nav-Links relative text-black" id="menu-btn"> Leisure</button>
<div class=" absolute bg-slate-100 hidden flex-col rounded mt-1 p-2 text-sm w-32 z-10"
id="dropdown">
<a href="#" class="px-2 py-1 text-slate-600 rounded hover:bg-slate-200">Hotel</a>
<a href="#" class="px-2 py-1 text-slate-600 rounded hover:bg-slate-200">Restoration</a>
</div>
</li>
</div>
<div class="flex items-center gap-6">
<a href="login.html"> <button
class="bg-blue-500 text-white px-5 py-2 rounded-full shadow-xl hover:bg-blue-700 duration-500 ">Sign
in </button> </a>
<ion-icon onclick="onToggleMenu(this)" name="menu"
class=" text-3xl cursor-pointer hover:shadow rounded-full md:hidden "> </ion-icon>
<!--pour qu'il soit cliquable -->
</div>
</nav>
<script>
const navLinks = document.querySelector('.navLinks') // selectioner la navbar
function onToggleMenu(e) //event argument qui va pointer vers mon element menu
{
e.name === 'menu' ? (e.name = "close", navLinks.classList.add('top-[80px]'), navLinks.classList.add('opacity-100')) : (e.name = "menu", navLinks.classList.remove('top-[80px]'), navLinks.classList.remove('opacity-100'))
/*e.name=e.name==='menu' ? 'close' : 'menu' // pour changer l'icone de menu -> a fermer
navLinks.classList.toggle('top-[9%]')*/
}
</script>
</header>
<!--Header image-->
<div style="background-image: url(https://i.imgur.com/yRKZnA8.jpg);" class="header-image h-[650px]">
<div class="px-14 pt-14 pb-8">
<h1 class="font-bold text-4xl text-white mt-96">Explore Algeria's finest Restaurants</h1>
</div>
<div class="relative px-14 pb-8">
<img style="transform: scaleX(-1);" class="h-[48px] w-[48px]"
src="Ressources/PNGs and SVGs/quote-white.png">
<p class="text-white font-semibold text-2xl">
Plan your journey and savor the authentic flavors of Algeria in every bite, from our wide selection of
restaurants.</p>
<img class="absolute right-12 h-[48px] w-[48px]"
src="Ressources/PNGs and SVGs/quote-white.png">
</div>
</div>
<div class="px-14 pt-8">
<h1 class="block font-bold text-5xl pb-8">Explore Restaurants in Algeria</h1>
<div class="inline-block select-box mb-8">
<img style="transform: translate(0,-45%)" class="absolute inline-block top-1/2 right-4 h-[16px] w-[16px]"
src="Ressources/PNGs and SVGs/down-arrow.png">
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row">
<div class="footer-col">
<h4>company</h4>
<ul>
<li><a href="#">about us</a></li>
<li><a href="#">our services</a></li>
<li><a href="#">privacy policy</a></li>
</ul>
</div>
<div class="footer-col">
<h4>get help</h4>
<ul>
<li><a href="#">FAQ</a></li>
<li><a href="#">payment options</a></li>
</ul>
</div>
<div class="footer-col">
<h4>our services</h4>
<ul>
<li><a href="#">Destination</a></li>
<li><a href="#">Hotel</a></li>
<li><a href="#">covoiturage</a></li>
<li><a href="#">guide</a></li>
<li><a href="#">Restaurant</a></li>
</ul>
</div>
<div class="footer-col">
<h4>follow us</h4>
<div class="social-links">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
</div>
</footer>
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoid2FkaWUtYm91bWVkaWVuZTAzIiwiYSI6ImNsZjViaHJqeTA1am80NHBjcnA0YzM0azMifQ.ytG1PtMg_qIfyYn6_tLR4A';
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/wadie-boumediene03/clfyf84mp000y01o3kvchq8z9',
center: [35.720, -0.634],
zoom: 6,
})
;
var marker = new mapboxgl.Marker()
.setLngLat([35.6915, -0.5968])
.addTo(map);
var marker = new mapboxgl.Marker()
.setLngLat([35.6975, -0.6306])
.addTo(map);
var marker = new mapboxgl.Marker()
.setLngLat([35.6911, -0.6412])
.addTo(map);
var marker = new mapboxgl.Marker()
.setLngLat([35.6941, -0.6284])
.addTo(map);
var marker = new mapboxgl.Marker()
.setLngLat([35.7057, -0.6338])
.addTo(map);
</script>
</body>
<style>
.header-image {
background-size: cover;
}
</style>