-
Notifications
You must be signed in to change notification settings - Fork 0
/
ohmyfood.html
167 lines (152 loc) · 14 KB
/
ohmyfood.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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>oh my food</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- LOADER -->
<div class="loader-page">
<span class="loader loader-quart"></span>
<p class="chargement">Bienvenue chez ohmyfood</p>
</div>
<header>
<a href="/index.html"><img src="Assets/Images/logo/ohmyfood.png" alt="Logo du restaurant oh my food"></a>
</header>
<main>
<!-- SEARCH-BAR -->
<div class="search-bar">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="17" viewBox="0 0 12 17" fill="none">
<path d="M5.38337 16.1772C0.842812 9.59472 0 8.91915 0 6.5C0 3.18628 2.68628 0.5 6 0.5C9.31372 0.5 12 3.18628 12 6.5C12 8.91915 11.1572 9.59472 6.61662 16.1772C6.31865 16.6076 5.68131 16.6076 5.38337 16.1772ZM6 9C7.38072 9 8.5 7.88072 8.5 6.5C8.5 5.11928 7.38072 4 6 4C4.61928 4 3.5 5.11928 3.5 6.5C3.5 7.88072 4.61928 9 6 9Z" fill="#353535"/>
</svg>
<input type="search" placeholder="Paris, Belleville">
</div>
<!-- PRESENTATION CONCEPT -->
<div class="presentation">
<p class="h2">Réservez le menu qui vous convient</p>
<p class="paragraphe">Découvrez des restaurants d'exception, sélectionnés par nos soins</p>
<a class="purple-button" href = '#restaurant'>Explorer nos restaurants</a>
</div>
<!-- FONCTIONNEMENT SITE -->
<div class="fonctionnement">
<p class="fonctionnement-title">Fonctionnement</p>
<div class="position-card">
<div class="small-card">
<div class="purple-number">1</div>
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="21" viewBox="0 0 14 21" fill="none">
<path d="M12.0487 0.543091H2.9356C1.85748 0.543091 0.982788 1.37885 0.982788 2.40898V18.58C0.982788 19.6101 1.85748 20.4459 2.9356 20.4459H12.0487C13.1268 20.4459 14.0015 19.6101 14.0015 18.58V2.40898C14.0015 1.37885 13.1268 0.543091 12.0487 0.543091ZM7.49216 19.202C6.77206 19.202 6.19028 18.6461 6.19028 17.958C6.19028 17.27 6.77206 16.7141 7.49216 16.7141C8.21226 16.7141 8.79403 17.27 8.79403 17.958C8.79403 18.6461 8.21226 19.202 7.49216 19.202ZM12.0487 15.0037C12.0487 15.2603 11.829 15.4702 11.5605 15.4702H3.4238C3.15529 15.4702 2.9356 15.2603 2.9356 15.0037V2.87545C2.9356 2.61889 3.15529 2.40898 3.4238 2.40898H11.5605C11.829 2.40898 12.0487 2.61889 12.0487 2.87545V15.0037Z" fill="#7E7E7E"/>
</svg>
<p class="small-card-txt">Choisissez un restaurant</h2>
</div>
<div class="small-card">
<div class="purple-number">2</div>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
<path d="M1.5 0.209595C1.20333 0.209595 0.913319 0.317343 0.666645 0.519215C0.419972 0.721087 0.227713 1.00802 0.114181 1.34372C0.000649929 1.67942 -0.0290551 2.04881 0.0288228 2.40519C0.0867006 2.76157 0.229562 3.08892 0.439341 3.34586C0.649119 3.60279 0.916394 3.77777 1.20737 3.84865C1.49834 3.91954 1.79994 3.88316 2.07403 3.74411C2.34811 3.60506 2.58238 3.36958 2.74721 3.06746C2.91203 2.76533 3 2.41013 3 2.04677C3 1.55952 2.84197 1.09223 2.56066 0.747692C2.27936 0.403154 1.89783 0.209595 1.5 0.209595ZM1.5 6.33353C1.20333 6.33353 0.913319 6.44128 0.666645 6.64315C0.419972 6.84502 0.227713 7.13195 0.114181 7.46765C0.000649929 7.80335 -0.0290551 8.17275 0.0288228 8.52912C0.0867006 8.8855 0.229562 9.21286 0.439341 9.46979C0.649119 9.72672 0.916394 9.9017 1.20737 9.97259C1.49834 10.0435 1.79994 10.0071 2.07403 9.86804C2.34811 9.72899 2.58238 9.49351 2.74721 9.19139C2.91203 8.88927 3 8.53407 3 8.17071C3 7.68346 2.84197 7.21616 2.56066 6.87163C2.27936 6.52709 1.89783 6.33353 1.5 6.33353ZM1.5 12.4575C1.20333 12.4575 0.913319 12.5652 0.666645 12.7671C0.419972 12.969 0.227713 13.2559 0.114181 13.5916C0.000649929 13.9273 -0.0290551 14.2967 0.0288228 14.6531C0.0867006 15.0094 0.229562 15.3368 0.439341 15.5937C0.649119 15.8507 0.916394 16.0256 1.20737 16.0965C1.49834 16.1674 1.79994 16.131 2.07403 15.992C2.34811 15.8529 2.58238 15.6174 2.74721 15.3153C2.91203 15.0132 3 14.658 3 14.2946C3 13.8074 2.84197 13.3401 2.56066 12.9956C2.27936 12.651 1.89783 12.4575 1.5 12.4575ZM15.5 13.0699H5.5C5.36739 13.0699 5.24022 13.1344 5.14645 13.2492C5.05268 13.3641 5 13.5198 5 13.6822V14.907C5 15.0695 5.05268 15.2252 5.14645 15.3401C5.24022 15.4549 5.36739 15.5194 5.5 15.5194H15.5C15.6326 15.5194 15.7598 15.4549 15.8536 15.3401C15.9473 15.2252 16 15.0695 16 14.907V13.6822C16 13.5198 15.9473 13.3641 15.8536 13.2492C15.7598 13.1344 15.6326 13.0699 15.5 13.0699ZM15.5 0.821988H5.5C5.36739 0.821988 5.24022 0.886508 5.14645 1.00135C5.05268 1.1162 5 1.27196 5 1.43438V2.65917C5 2.82158 5.05268 2.97735 5.14645 3.0922C5.24022 3.20704 5.36739 3.27156 5.5 3.27156H15.5C15.6326 3.27156 15.7598 3.20704 15.8536 3.0922C15.9473 2.97735 16 2.82158 16 2.65917V1.43438C16 1.27196 15.9473 1.1162 15.8536 1.00135C15.7598 0.886508 15.6326 0.821988 15.5 0.821988ZM15.5 6.94592H5.5C5.36739 6.94592 5.24022 7.01044 5.14645 7.12529C5.05268 7.24013 5 7.3959 5 7.55831V8.7831C5 8.94552 5.05268 9.10128 5.14645 9.21613C5.24022 9.33098 5.36739 9.39549 5.5 9.39549H15.5C15.6326 9.39549 15.7598 9.33098 15.8536 9.21613C15.9473 9.10128 16 8.94552 16 8.7831V7.55831C16 7.3959 15.9473 7.24013 15.8536 7.12529C15.7598 7.01044 15.6326 6.94592 15.5 6.94592Z" fill="#7E7E7E"/>
</svg>
<p class="small-card-txt">Composé votre menu</p>
</div>
<div class="small-card">
<div class="purple-number">3</div>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
<path d="M17.5914 4.43686L15.6947 0.812378C15.5252 0.487014 15.2242 0.287598 14.9027 0.287598H3.09613C2.77466 0.287598 2.47365 0.487014 2.30415 0.812378L0.407495 4.43686C-0.571518 6.30858 0.296443 8.91149 2.12588 9.20887C2.25739 9.22986 2.39182 9.24035 2.52625 9.24035C3.39129 9.24035 4.15697 8.78554 4.683 8.08234C5.20904 8.78554 5.97764 9.24035 6.83976 9.24035C7.70479 9.24035 8.47047 8.78554 8.99651 8.08234C9.52254 8.78554 10.2911 9.24035 11.1533 9.24035C12.0183 9.24035 12.784 8.78554 13.31 8.08234C13.839 8.78554 14.6046 9.24035 15.4668 9.24035C15.6041 9.24035 15.7356 9.22986 15.8671 9.20887C17.7024 8.91499 18.5733 6.31208 17.5914 4.43686ZM15.4726 10.3634C15.1804 10.3634 14.891 10.3109 14.6105 10.2304V13.722H3.38837V10.2304C3.10782 10.3074 2.8185 10.3634 2.52625 10.3634C2.35091 10.3634 2.17264 10.3494 2.00022 10.3214C1.83656 10.2934 1.67583 10.2479 1.52094 10.1955V17.0806C1.52094 17.6998 1.93885 18.2001 2.45612 18.2001H15.5486C16.0659 18.2001 16.4838 17.6998 16.4838 17.0806V10.1955C16.326 10.2514 16.1681 10.2969 16.0045 10.3214C15.8262 10.3494 15.6509 10.3634 15.4726 10.3634Z" fill="#9356DC"/>
</svg>
<p class="small-card-txt">Dégustez au restaurant</p>
</div>
</div>
</div>
<!-- RESTAURANTS -->
<div class="restaurants" id="restaurant">
<p class="restaurants-title">Restaurants</p>
<div class="restaurants-position">
<div class="card-restaurant">
<a href="/restaurants/lapalettedugout.html" class="big-card">
<img src="/Assets/Images/jay-wennington-N_Y88TWmGwA-unsplash.jpg" alt="Table de restaurant garnis avec un des meilleurs plats que propose La palette du goût">
<div class="new-restaurant">Nouveau</div>
<div class="card-content">
<div>
<p class="big-card-title">La palette du goût</p>
<p>Ménilmontant</p>
</div>
<div class="like-container">
<input class="like-element" type="checkbox" name="likeORdislike" id="liked">
<label for="liked"></label>
</div>
</div>
</a>
</div>
<div class="card-restaurant">
<a href="/restaurants/lanoteenchantee.html" class="big-card">
<img src="/Assets/Images/stil-u2Lp8tXIcjw-unsplash.jpg" alt="Assiette d'une spécialité du restaurant La note enchantée">
<div class="new-restaurant">Nouveau</div>
<div class="card-content">
<div>
<p class="big-card-title">La note enchantée</p>
<p>Charonne</p>
</div>
<div class="like-container">
<input class="like-element" type="checkbox" name="likeORdislike" id="liked-1">
<label for="liked-1"></label>
</div>
</div>
</a>
</div>
</div>
<div class="restaurants-position">
<div class="card-restaurant">
<a href="/restaurants/alafrancaise.html" class="big-card">
<img src="/Assets/Images/toa-heftiba-DQKerTsQwi0-unsplash.jpg" alt="Une belle assiette de la spécialité du restaurant À la française">
<div class="card-content">
<div>
<p class="big-card-title">À la française</p>
<p>Cité Rouge</p>
</div>
<div class="like-container">
<input class="like-element" type="checkbox" name="likeORdislike" id="liked-2">
<label for="liked-2"></label>
</div>
</div>
</a>
</div>
<div class="card-restaurant">
<a href="/restaurants/ledelicedessens.html" class="big-card">
<img src="Assets/Images/louis-hansel-shotsoflouis-qNBGVyOCY8Q-unsplash.jpg" alt="Une belle assiette de la spécialité du restaurant Le délice des sens">
<div class="card-content">
<div>
<p class="big-card-title">Le délice des sens</p>
<p>Folie-Méricourt</p>
</div>
<div class="like-container">
<input class="like-element" type="checkbox" name="likeORdislike" id="liked-3">
<label for="liked-3"></label>
</div>
</div>
</a>
</div>
</div>
</div>
</main>
<footer>
<div class="footer-content">
<h1>ohmyfood</h1>
<div class="footer-desktop-reverse">
<div class="footer-link">
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="13" viewBox="0 0 12 13" fill="none">
<path d="M5.99736 0.385973C6.01851 0.505308 6.42308 2.78538 6.42308 3.65628C6.42308 4.9842 5.68798 5.93127 4.6012 6.31213L4.94231 12.3576C4.96082 12.7055 4.6726 13 4.30769 13H2.61538C2.25313 13 1.96226 12.708 1.98077 12.3576L2.32188 6.31213C1.23245 5.93127 0.5 4.98166 0.5 3.65628C0.5 2.78284 0.904567 0.505308 0.925721 0.385973C1.01034 -0.129456 2.12356 -0.137073 2.19231 0.413902V3.99905C2.22668 4.08538 2.59159 4.0803 2.61538 3.99905C2.6524 3.35667 2.82428 0.464683 2.82692 0.398668C2.91418 -0.129456 4.00889 -0.129456 4.09351 0.398668C4.0988 0.467223 4.26803 3.35667 4.30505 3.99905C4.32885 4.0803 4.69639 4.08538 4.72813 3.99905V0.413902C4.79688 -0.134534 5.91274 -0.129456 5.99736 0.385973ZM9.14928 7.64005L8.75264 12.3398C8.72091 12.6953 9.01442 13 9.38462 13H10.8654C11.2171 13 11.5 12.7283 11.5 12.3906V0.60941C11.5 0.274254 11.2171 3.62896e-05 10.8654 3.62896e-05C8.68389 3.62896e-05 5.01106 4.53225 9.14928 7.64005Z" fill="white"/>
</svg>Proposer un restaurant
</a>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="13" viewBox="0 0 12 13" fill="none">
<path d="M9.08765 4.87486H6.2572V6.29686C6.2572 7.30495 5.65573 8.12514 4.91646 8.12514C4.1772 8.12514 3.57573 7.30495 3.57573 6.29686V3.2091L2.3672 4.19941C2.00781 4.49143 1.78808 5.02214 1.78808 5.59094V6.79202L0.298367 7.96516C0.0134597 8.18862 -0.0852336 8.68632 0.0804966 9.07483L1.57021 12.5943C1.73407 12.9828 2.09905 13.1148 2.38396 12.8914L4.30941 11.3754H6.85309C7.51042 11.3754 8.04485 10.6466 8.04485 9.75027H8.3428C8.67239 9.75027 8.93868 9.38716 8.93868 8.93771V7.31257H9.08765C9.33531 7.31257 9.53456 7.04087 9.53456 6.70314V5.48429C9.53456 5.14656 9.33531 4.87486 9.08765 4.87486ZM11.838 3.92517L10.3483 0.405735C10.1844 0.0172256 9.81947 -0.114817 9.53456 0.10864L7.60911 1.62459H5.70601C5.48255 1.62459 5.26468 1.71092 5.07475 1.8709L4.45093 2.40161C4.27589 2.54888 4.17161 2.81043 4.17161 3.08975V6.29686C4.17161 6.85804 4.50493 7.31257 4.91646 7.31257C5.328 7.31257 5.66132 6.85804 5.66132 6.29686V4.06229H9.08765C9.66305 4.06229 10.1304 4.69965 10.1304 5.48429V6.20798L11.6202 5.03484C11.9051 4.80884 12.0019 4.31368 11.838 3.92517Z" fill="white"/>
</svg>Devenir partenaire
</a>
</div>
<div class="footer-link">
<a href="#">Mentions Légales</a>
<a href="#">Contact</a>
</div>
</div>
</div>
</footer>
</body>