-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
102 lines (99 loc) · 6.2 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Food Recipes | Odin Project</title>
<link rel="stylesheet" href="stylesheet.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;700&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav>
<img src="images/logos/logo.png" alt="company logo" id="logo">
<ul>
<li> <a href="./recipes/credits.html" style="color: black;">Credits</a></li>
<li><button class="button">Contribute a Recipe</button></li>
</ul>
</nav>
<div class="herosection">
<div class="left">
<h1>From <span style="color: #F2AF5C;">Pantry</span> to <span style="color: #D90404;">Palate</span></h1>
<h3>Discover Culinary Bliss at</h3>
<h2><span style="color: #D90404;">YUMSCRAFT.com</span></h2>
<button class="button" id="browse">
<a href="#recommendation">Browse Now</a>
<svg id="arrow" xmlns="http://www.w3.org/2000/svg" height="24" width="20" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#ffffff" d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>
</button>
</div>
<div class="right">
<img src="./images/headerimg.png" alt="headerimage" id="herosandwich">
</div>
</div>
</header>
<section id="recommendation">
<h1><span id="top">Top</span> <span style="color: #D90404;">Picks</span></h1>
<div class="toppicks">
<div class="item" id="one">
<img src="./images/redvelvetcake.png" alt="Red Velvet Cake Image">
<div class="right">
<div class="description">
<h2><span style="color: #D90404;">Red Velvet Cake</span></h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nam, dolorum nihil. Dolores cum sit laudantium dolor fugit? Tempore nesciunt animi nisi eveniet perferendis quae inventore et distinctio, maxime cupiditate numquam!laudantium Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum praesentium eligendi accusantium accusamus eaque, obcaecati voluptas ea quia maiores ipsa, quos omnis vero quis corporis animi libero architecto iure deleniti!</p>
</div>
<div class="time_btn">
<p style="display: inline-flex; width: auto;">90 min</p>
<button class="button"><a href="./recipes/red-velvet.html"></a>Check Now</button>
</div>
</div>
</div>
<div class="item" id="one">
<img src="./images/sandwich.png" alt="Sandwich Image">
<div class="right">
<div class="description">
<h2><span style="color: #D90404;">Grilled Cheese Sandwich</span></h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nam, dolorum nihil. Dolores cum sit laudantium dolor fugit? Tempore nesciunt animi nisi eveniet perferendis quae inventore et distinctio, maxime cupiditate numquam!laudantium Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum praesentium eligendi accusantium accusamus eaque, obcaecati voluptas ea quia maiores ipsa, quos omnis vero quis corporis animi libero architecto iure deleniti!</p>
</div>
<div class="time_btn">
<p style="display: inline-flex; width: auto;">90 min</p>
<button class="button"><a href="./recipes/cheese-sandwich.html"></a>Check Now</button>
</div>
</div>
</div>
<div class="item" id="one">
<img src="./images/coffee.png" alt="Coffee Image">
<div class="right">
<div class="description">
<h2><span style="color: #D90404;">Dalgona Coffee</span></h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nam, dolorum nihil. Dolores cum sit laudantium dolor fugit? Tempore nesciunt animi nisi eveniet perferendis quae inventore et distinctio, maxime cupiditate numquam!laudantium Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum praesentium eligendi accusantium accusamus eaque, obcaecati voluptas ea quia maiores ipsa, quos omnis vero quis corporis animi libero architecto iure deleniti!</p>
</div>
<div class="time_btn">
<p style="display: inline-flex; width: auto;">90 min</p>
<button class="button"><a href="./recipes/dalgona-coffee.html"></a>Check Now</button>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="footer-left">
<img src="images/logos/logo.png" alt="company logo" id="logo">
<div class="footer-data">
<h2><span style="color: #D90404;">YUMSCRAFT.com</span></h2>
<div class="socials">
<img src="./images/logos/githuhb.png" alt="">
<img src="./images/logos/insta.png" alt="">
<img src="./images/logos/discord.png" alt="">
<img src="./images/logos/telegram.png" alt="">
<img src="./images/logos/x.png" alt="">
</div>
</div>
</div>
<div class="footer-right">
<p>©Design by <a href="https://github.com/harshcsrivastava/" style="color: black;">Harsh Srivastava.</a></p>
</div>
</footer>
</body>
</html>