-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.html
55 lines (54 loc) · 2.65 KB
/
main.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recipe</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/imagehover.min.css">
<script src="main.js" defer></script>
</head>
<body>
<header class="header">
<h1 class="logo"><a class="link" href="main.html"></a>SKRAPZ</a></h1>
<nav>
<ul class="nav">
<li><a class="link" href="index.html">Home</a></li>
<li ><a class="link" href="main.html">Explore</a></li>
<li><a class="link" href="todo.html">Saved</a></li>
<li><a class="link" href="contact.html">Contact</a></li>
<li><svg class='darkMode' viewBox="0 0 24 24">
<path fill="currentColor" d="M12,18V6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,15.31L23.31,12L20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31Z" />
</svg></li>
</ul>
</nav>
<svg class="menu" viewBox="0 0 24 24">
<path fill="currentColor" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
</svg>
</header>
<div class="searchDiv">
<input class="search" type="text" placeholder="Search...">
<svg class="searchImg" viewBox="0 0 24 24">
<path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
</svg>
</div>
<div class="result" id="meals">
<h1 id="noti">Search a recipe to recieve results...</h1>
</div>
<div class="popup-container hidden" id="meal-popup">
<div class="popup">
<button id="close-popup" class="close-popup">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
</svg>
</button>
<button class="save">
<svg viewBox="0 0 24 24">
<path d="M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z" />
</svg>
</button>
<div class="meal-info" id="meal-info"></div>
</div>
</div>
</body>
</html>