-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
116 lines (110 loc) · 3.21 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
<!DOCTYPE html>
<html lang="fr">
<head>
<link href="./style.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8" />
<link rel="icon" type="image/png" href="assets/favicon.png" />
<script
src="https://kit.fontawesome.com/36959caba5.js"
crossorigin="anonymous"
></script>
<link
href="https://fonts.googleapis.com/css?family=DM+Sans&display=swap"
rel="stylesheet"
/>
<title>Les petits plats</title>
</head>
<body>
<header>
<img src="assets/logo.png" alt="logo" class="logo" />
</header>
<!-- Barre de recherche -->
<main class="main">
<div class="search-bar">
<div class="field-input">
<input
class="search-input"
id="search-input"
type="text"
placeholder="Rechercher une recette"
/>
<img src="assets/search.png" alt="search" class="search" />
</div>
</div>
<!-- Tags -->
<div class="tag-section">
<div id="tags">
<div id="span-tag"></div>
</div>
</div>
<!-- Filtre par catégorie -->
<div class="filter-section">
<div class="ingredient-block">
<div class="Ingredients">
<input
class="ingredients-input"
type="text"
placeholder="Ingrédients"
/>
<img
src="assets/arrowDown.svg"
alt="angle-down"
class="angle-down-ing"
/>
<img src="assets/arrowUp.svg" alt="angle-up" class="angle-up-ing" />
</div>
<div class="list-ingredient">
<ul class="ul-ingredient"></ul>
</div>
</div>
<div class="appareil-block">
<div class="Appareils">
<input
class="appareils-input"
type="text"
placeholder="Appareils"
/>
<img
src="assets/arrowDown.svg"
alt="angle-down"
class="angle-down-app"
/>
<img src="assets/arrowUp.svg" alt="angle-up" class="angle-up-app" />
</div>
<div class="list-appareil">
<ul class="ul-appareil"></ul>
</div>
</div>
<div class="ustensile-block">
<div class="Ustensiles">
<input
class="ustensiles-input"
type="text"
placeholder="Ustensiles"
/>
<img
src="assets/arrowDown.svg"
alt="angle-down"
class="angle-down-us"
/>
<img src="assets/arrowUp.svg" alt="angle-up" class="angle-up-us" />
</div>
<div class="list-ustensile">
<ul class="ul-ustensile"></ul>
</div>
</div>
</div>
<!-- Recettes -->
<div class="recipes-cards"></div>
<div id="not-found-div">
<p>
Aucune recette ne correspond à votre critère… vous pouvez chercher «
tarte aux pommes », « poisson », etc.
</p>
</div>
</main>
<!-- JS Files -->
<script src="data/recipes.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>