-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathvegan.html
124 lines (114 loc) · 5.72 KB
/
vegan.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recipe Website</title>
<link rel="stylesheet" href="styles/styles.css" />
<link rel="stylesheet" href="styles/media.css" />
<link rel="stylesheet" href="styles/meals.css" />
<link rel="icon" href="images/recipe.png" type="image/x-icon"/>
</head>
<body>
<div id="container">
<div id="navbar">
<h1>Recipes</h1>
<div id="hamburger">
<div class="ham"></div>
<div class="ham"></div>
<div class="ham"></div>
</div>
<div class="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="category.html">Recipe Menu</a></li>
<li><a href="about.html">About us</a></li>
</ul>
</div>
</div>
<div class="sub-menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="category.html">Recipe Menu</a></li>
<li><a href="about.html">About us</a></li>
</ul>
</div>
<div class="content-part">
<div id="content">
<div id="sidebar-1">
<h4 class="heading">Meals</h4>
<ul class="side-content">
<li><a href="category.html" id="sub-category" class="sub-content">Category</a>
<ul class="sub-category">
<li><a href="breakfast.html">Breakfast</a></li>
<li><a href="chicken.html">Chicken</a></li>
<li><a href="dessert.html">Dessert</a></li>
<li><a href="lamb.html">Lamb</a></li>
<li><a href="pasta.html">Pasta</a></li>
<li><a href="vegan.html">Vegan Foods</a></li>
<li><a href="seafood.html">Seafood</a></li>
<li><a href="side.html">Side Dish</a></li>
<li><a href="vegetarian.html">Vegetarian</a></li>
<li><a href="miscellaneous.html">Miscellanoeous</a></li>
</ul>
</li>
</ul>
<h4 class="heading">Other Recipes</h4>
<ul class="side-content">
<li><a href="soup.html">Soup recipes</a></li>
<li><a href="starter.html" target="_blank">Starter recipes</a></li>
<li><a href="maincourse.html">Main course</a></li>
<li><a href="dessert.html">Desserts</a></li>
</ul>
</div>
<div class="main-content" onload="mainContent()">
<h2 class="text-primary text-center p-2">VEGAN RECIPE</h2>
<p>
Was someone looking for vegan foods? Were you vegan diet and wan to follow stick vegan diet?
Then you are on right site. Check out our choosen list of vegan recipes here.
</p>
<label for="select-1" class="text-center m-3">Choose your salmon recipe!</label><br/>
<select id="select-1" style="width: 70%" class="container p-1">
<option>Roast fennel and aubergine paella</option>
<option>Vegan Chocolate Cake</option>
<option>Vegan Lasagna</option>
<option>Moroccan Carrot Soup</option>
<option>Kidney Bean Curry</option>
<option>Spanish Tortilla</option>
</select>
<button type="submit" class="btn btn-primary">Click here</button>
<div class="container mt-3 border p-5 meal-section">
<img src="" alt="soup image"class="meal-img"/>
<p id="meal-title"></p>
<p class="meal-ingredients"></p>
<h4 class="meal-style">Making:</h4>
<div class="meal-process">
<p></p>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<p>For more details email us at <a href="mailto:recipe@example.com" style="text-decoration: none;color: rgb(243, 236, 40); font-weight: 500;word-spacing: 1.5px;">recipe@example.com</a> </p>
<p>© All copywrites are reserved</p>
</div>
</div>
<script type="module" src="javascript/breakfast.js"></script>
<script type="module" src="javascript/app.js"></script>
<script>
function mainContent(){
const mealTitle = document.getElementById("meal-title");
const mealIngredient = document.querySelector(".meal-ingredients");
const mealProcess = document.querySelector(".meal-process");
const mealImage = document.querySelector(".meal-img");
meaTitle.innerHTML = "";
mealIngredient.innerHTML ='';
mealProcess.innerHTML ='';
mealImage.setAttribute('src', '');
}
</script>
</body>
</html>