-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
137 lines (133 loc) · 5.53 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>CookBook</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="shortcut icon" href="icon.ico" />
</head>
<body>
<header>
<!-- Title and nav bar included -->
<h1 class="logo">CookBook</h1>
<nav>
<input type="checkbox" id="nav-toggle" class="nav-toggle">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Cuisines</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Contribute</a></li>
</ul>
</nav>
<label for="nav-toggle" class="nav-toggle-label">
<span></span>
</label>
</header>
<section class="hero-container">
<!-- Hero image and text displaying important information about website -->
<div class="hero-text">
<h4 class="hero-caption">Learn the Art of Cooking!</h4>
<button>Explore</button>
</div>
</section>
<div class="info-container">
<!-- Conatains main features avaiable for the users -->
<section class="info-box">
<!-- To access recipes -->
<img src="images/rev3.jpg" alt="Recipes" class="info-fig"/>
<div class="content">
<h3><a href="#">Recipes</a></h3>
<p class="info-caption"> Crisp and clear recipes with video tutorials and written instructions.Browse all Recipes filtering with your favorite cuisine/ingredients.</p>
</div>
</section>
<section class="info-box">
<!-- Customised plan with nutritionist guidance -->
<img src="images/healthy.jpg" alt="Diet cooking" class="info-fig"/>
<div class="content">
<h3><a href="#">Diet Cooking</a></h3>
<p class="info-caption">Make calorie driven meals, focusing on weight loss plan. Customized plans are also available on subscription.</p>
</div>
</section>
<section class="info-box">
<!-- To view customer reviews -->
<img src="images/cookbook2.jpg" alt="Reviews" class="info-fig"/>
<div class="content">
<h3><a href="#">Reviews</a></h3>
<p class="info-caption"">CookBook has always provided me easy recipes. I would definetly recommend it to my peers.<br>-Sara</p>
</div>
</section>
</div>
<h3 class="quote">Food is essential to life. Therefore make it good.</h3>
<h2>Essential Spices</h2>
<div class="spices-container">
<!-- Articles about important spices needed for most of the recipes. -->
<section class="spices-box">
<div class="spices-box-content">
<img src="images/spice1.jpeg" alt="Cassia bark" class="spices-fig"/>
<h3><a href="#">Cassia bark</a></h3>
<p class="info-caption"> Cassia bark is an interesting spice. Also known as Chinese cinnamon..</p>
</div>
<a href="#" class="readM">Read more</a>
</section>
<section class="spices-box">
<div class="spices-box-content">
<img src="images/spice2.jpeg" alt="Turmeric" class="spices-fig"/>
<h3><a href="#">Turmeric</a></h3>
<p class="info-caption"">Turmeric is another common Indian spice. Grown as a rhizome... </p>
</div>
<a href="#" class="readM">Read more</a>
</section>
<section class="spices-box">
<div class="spices-box-content">
<img src="images/spice3.jpeg" alt="Saffron" class="spices-fig"/>
<h3><a href="#">Saffron</a></h3>
<p class="info-caption"">The best saffron is dark-red in color and comes from Kashmir, Iran, or Spain... </p>
</div>
<a href="#" class="readM">Read more</a>
</section>
<section class="spices-box">
<div class="spices-box-content">
<img src="images/spice4.jpeg" alt="Cardamon" class="spices-fig"/>
<h3><a href="#">Cardamom</a></h3>
<p class="info-caption"">There are two kinds of cardamom used in Indian cooking: green and black... </p>
</div>
<a href="#" class="readM">Read more</a>
</section>
</div>
<div class="recipe-container">
<!-- A sample recipe contributed by one of the user. Describes perks of contribution. -->
<div class="recipe">
<section class="recipe_text">
<h3><a href="#">Cinnamon-sugar sticks Recipe:</a></h3>
<ul>
<li>Beat 1/2 cup softened cream cheese with 1 tablespoon cinnamon sugar until smooth.</li>
<li>Spread onto strips of refrigerated breadstick dough.</li>
<li>Twist and stretch into 12-inch sticks and bake as the dough label directs. Brush with melted butter.</li>
</ul>
<p>-By Mahesh</p>
</section>
</div>
<div class="contribute">
<p>Got any great and easy recipes?</p>
<p>Write to us, our team reviews and your recipe can be up on our page. You can also be a part of 'Meet&Cook' event with our partnered master chef's!</p>
<button>Email</button>
</div>
</div>
<footer>
<!-- Footer containing important links of website and social media links to follow. -->
<ul class="links">
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Customer support</a></li>
</ul>
<ul class="media">
<li><a href="#" class="fab fa-facebook-f"></a></li>
<li><a href="#" class="fab fa-instagram"></a></li>
<li><a href="#" class="fab fa-twitter"></a></li>
</ul>
</footer>
</body>
</html>