-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
132 lines (126 loc) · 4.83 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Recipe website</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="https://kit.fontawesome.com/25da3f1030.js" crossorigin="anonymous">
</script>
<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=Lato&family=Poppins:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<!---Hero Section start--->
<section class="hero-section">
<!---Navigation bar start--->
<header>
<nav>
<a><img class="logo" src="images/logo-white.svg"></a>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Popular recipes</a></li>
<li><a href="#">Kitchen Tips</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="search-container">
<form action="/action_page.php">
<input class="search-bar-input" type="text" placeholder="Search.." name="search">
<button class="search-bar-button" type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</nav>
</header>
<!---Navigation bar end--->
<h2 class="headline-hero">Find Your Next Favorite Meal Here!</h2>
<p>Delicious Recipes for Every Occasion</p>
<button class="hero-button">Start cooking!</button>
</section>
<!---Hero Section end--->
<!---Blog list section start--->
<div id="blog-section">
<div class="container">
<h2 class="sub-title">Popular Recipies</h2>
<div class="blog-list">
<div>
<a href=#><img src="images/image-1.png" alt="">
<h3>Easy Chicken Vegan Hamburger</h3>
<p>Lorem ipsum dolor sit amet consectetur. Tellus leo praesent et commodo. Vitae nibh lectus eget dictum netus dolor facilisis tellus. Arcu.</p>
<div class="blog-list-details">
<div class="cooking-time"><i class="fa-regular fa-clock"></i>
<p>20 min</p>
</div>
<div class="read-more-button">
<p>Read More</p><i class="fa-solid fa-arrow-right"></i>
</div>
</div>
</a>
</div>
<div>
<a href=#><img src="images/image-1.png" alt="">
<h3>Easy Chicken Vegan Hamburger</h3>
<p>Lorem ipsum dolor sit amet consectetur. Tellus leo praesent et commodo. Vitae nibh lectus eget dictum netus dolor facilisis tellus. Arcu.</p>
<div class="blog-list-details">
<div class="cooking-time"><i class="fa-regular fa-clock"></i>
<p>20 min</p>
</div>
<div class="read-more-button">
<p>Read More</p><i class="fa-solid fa-arrow-right"></i>
</div>
</div>
</a>
</div>
<div>
<a href=#><img src="images/image-1.png" alt="">
<h3>Easy Chicken Vegan Hamburger</h3>
<p>Lorem ipsum dolor sit amet consectetur. Tellus leo praesent et commodo. Vitae nibh lectus eget dictum netus dolor facilisis tellus. Arcu.</p>
<div class="blog-list-details">
<div class="cooking-time"><i class="fa-regular fa-clock"></i>
<p>20 min</p>
</div>
<div class="read-more-button">
<p>Read More</p><i class="fa-solid fa-arrow-right"></i>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<!---Blog list section end--->
<!---Newsletter form start--->
<section class="newsletter-section">
<div class="newsletter-elements">
<h2 class="newsletter-section-headline">Sign up to receive Nutritional information per serving</h2>
<div class="newsletter-container">
<form>
<input class="newsletter-bar-input" placeholder="Enter your email" type="email" id="email" name="user" />
<button class="newsletter-bar-button" type="submit">Submit</button>
</form>
</form>
</div>
</div>
</section>
<!---Newsletter form end>
<!---Footer section start--->
<footer>
<h2>Feel free to contact us</h2>
<div class="social-media-icons">
<a href="#"><i class="fa-brands fa-instagram fa-2x"></i></a>
<a href="#"><i class="fa-brands fa-facebook fa-2x"></i></a>
<a href="#"><i class="fa-brands fa-twitter fa-2x"></i></a>
</div>
<ul class="footer-menu">
<li><a href="#">Home</a></li>
<li><a href="#">Popular recipes</a></li>
<li><a href="#">Kitchen Tips</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
<span>Copyright @2023 Lush. All rights reserved.</span>
</footer>
<!---Footer section end--->
</body>
</html>