-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
176 lines (173 loc) · 7.47 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
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
168
169
170
171
172
173
174
175
176
<!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">
<!-- CSS Stylesheets -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
<!-- Javascripts -->
<script src="./javascript/data.js"></script>
<script defer src="./build/cooking.js"></script> <!--Citation: https://github.com/lbebber/HeatDistortionEffect-->
<script defer src="./javascript/script.js"></script>
<!-- Title -->
<title>QuickBites</title>
</head>
<body>
<!-- Cooking Section -->
<section class="webGL">
<header>
<nav class="header_nav">
<div class="header_logo">
<h4>QuickBites</h4>
<div class="header_logo-overlay"></div>
</div>
</nav>
</header>
<div class="stage">
<div class="wrap">
<div class="Background">
<canvas class="Background-canvas"></canvas>
</div>
</div>
<div class="intro">
<h2 class="intro_title">Elevate your kitchen game with hassle-free recipes</h2>
<p class="intro_subtitle">Recipes that turn you into a culinary rockstar in minutes!</p>
<button onclick="window.location.hash='recipes';" class="intro_button">View Recipes</button>
</div>
</div>
</section>
<!-- Masterclass Section -->
<section class="masterclass">
<div class="masterclass_image">
<img src="assets/hero_plate.png" alt="food plate" />
<div class="masterclass_image_overlay"></div>
</div>
<div class="masterclass_content">
<div class="masterclass_content_info">
<h1>Green Cuisine: Verde Harmony Pasta Bowl</h1>
<p>Masterclass by Michelin Star Chef Becky Adams.</p>
<div class="masterclass_content_buttons">
<button onclick="window.location.href='https://forms.gle/kY3MJ3h8XDk629wb6';" class="masterclass_content_register_button">Register Now</button>
</div>
</div>
</div>
</section>
<!-- Menu Section -->
<section class="menu" id="recipes">
<h2 class="menu_title">Recipes</h2>
<div class="menu_catalogue">
<a href="./recipe_page.html?recipe=chicken_bacon_brocoli_alfredo">
<article class="menu_card">
<img class="menu_card-image" src="./assets/chicken_bacon_alfredo.svg" alt="Chicken Bacon Broccoli Alfredo" />
<h3 class="menu_card-title">Chicken Bacon Broccoli Alfredo</h3>
<div class="menu_card-details">
<div class="menu_card-rating">
<img src="assets/star.svg" alt="star" />
<p>4.9</p>
</div>
</div>
</article>
</a>
<a href="./recipe_page.html?recipe=garlic_mashed_sweet_potatoes">
<article class="menu_card">
<img class="menu_card-image" src="./assets/garlic_mashed_sw_potatoes.png"
alt="Garlic Mashed Sweet Potatoes" />
<h3 class="menu_card-title">Garlic Mashed Sweet Potatoes</h3>
<div class="menu_card-details">
<div class="menu_card-rating">
<img src="assets/star.svg" alt="star" />
<p>5.0</p>
</div>
</div>
</article>
</a>
<a href="./recipe_page.html?recipe=easy_mac_n_cheese">
<article class="menu_card">
<img class="menu_card-image" src="./assets/mac_n_cheese.png" alt="Easy Mac n Cheese" />
<h3 class="menu_card-title">Easy Mac n Cheese</h3>
<div class="menu_card-details">
<div class="menu_card-rating">
<img src="assets/star.svg" alt="star" />
<p>4.7</p>
</div>
</div>
</article>
</a>
</div>
</section>
<!-- Card Slider Horizontal -->
<section class="deck">
<div class="container">
<div id="slide">
<div class="item" style="background-image: url(./assets/slider/slider_recipe_2.jpg);">
<div class="content">
<div class="name">Grilled Chicken</div>
<div class="des">Savor the simplicity of perfection with our Grilled Chicken recipe, a culinary masterpiece
where tender and flavorful chicken meets the enticing smokiness of the grill.</div>
<h3>Recipe coming soon</h3>
</div>
</div>
<div class="item" style="background-image: url(./assets/slider/slider_recipe_3.jpg);">
<div class="content">
<div class="name">Beef Steak</div>
<div class="des">Delight in the exquisite taste of our Beef Steak recipe, showcasing premium cuts expertly
seasoned and seared to perfection for a culinary journey of savory bliss.</div>
<h3>Recipe coming soon</h3>
</div>
</div>
<div class="item" style="background-image: url(./assets/slider/slider_recipe_4.jpg);">
<div class="content">
<div class="name">Asparagus & Fish</div>
<div class="des">Embark on a culinary adventure with our Asparagus and Fish recipe, where delicate fish
meets vibrant asparagus, creating a symphony of flavors and textures in every exquisite bite.</div>
<h3>Recipe coming soon</h3>
</div>
</div>
<div class="item" style="background-image: url(./assets/slider/slider_recipe_5.jpg);">
<div class="content">
<div class="name">Chicken Fried Rice</div>
<div class="des">Discover the art of wok-tossed perfection with our Chicken Fried Rice recipe, where tender
chicken and flavorful rice unite in a delectable harmony of Asian-inspired delight.</div>
<h3>Recipe coming soon</h3>
</div>
</div>
<div class="item" style="background-image: url(./assets/slider/slider_recipe_6.jpg);">
<div class="content">
<div class="name">Pesto Basil Pasta</div>
<div class="des">Indulge in the aromatic perfection of our Pesto Basil Pasta recipe, a symphony of fresh
flavors that will transport your taste buds to Italy with every bite.</div>
<h3>Recipe coming soon</h3>
</div>
</div>
</div>
<div class="buttons">
<button id="prev">Previous<i class="fa-solid fa-angle-left"></i></button>
<button id="next">Next<i class="fa-solid fa-angle-right"></i></button>
</div>
</div>
</section>
<!-- Find Recipe Section -->
<section class="findrecipe flex-center" id="services">
<h2>Can’t decide what recipe to make today?</h2>
<p>We can recommend a random recipe to you</p>
<button class="findrecipe__button">Surprise Me!</button>
</section>
<!-- Footer Section -->
<footer class="footer flex-between">
<h3 class="footer_logo"><span>Quick</span>Bites</h3>
<ul class="footer_social">
<li class="flex-center">
<img src="assets/facebook.svg" alt="facebook" />
</li>
<li class="flex-center">
<img src="assets/instagram.svg" alt="instagram" />
</li>
<li class="flex-center">
<img src="assets/twitter.svg" alt="twitter" />
</li>
</ul>
</footer>
</body>
</html>