-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
141 lines (131 loc) · 5.1 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Avocadoland</title>
</head>
<body>
<div id="main">
<!--- Start of Navigation Bar --->
<header id="header">
<div id="header-img">
<h1 class="logo">Avocadoland</h1>
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#features">Features</a></li>
<li><a class="nav-link" href="#how-it-works">How It Works</a></li>
<li><a class="nav-link" href="#pricing">Pricing</a></li>
</a>
</ul>
</nav>
</div>
</header>
<!--- End of Navigation Bar --->
<!--- Start of Banner Photo --->
<div>
<img class="banner" alt="Avocado Banner" src="img/banner_green.jpg">
</div>
<!--- End of Banner Photo --->
<!--- Start of E-mail Form --->
<div>
<form id="form">
<label class="titleSection"> Don't miss a thing!</label>
<input id="email" type="email" placeholder="Enter your e-mail here" required>
<button type="submit" id="submit" class="btn">Get started</button>
</form>
</div>
<!--- End of E-Mail Form --->
<!--- Start of Features Section --->
<div id="features">
<div id="premiumMaterials">
<div id="featIcon">
<img class="icon" alt="Avocado" src="img/icon1.png">
</div>
<div id="featType">
<h2 class="featTitle">Diverse Product</h2>
<p class="featDescription">Avocados make just about anything better, from salads to veggie-packed salsas to smoothies.</p>
</div>
</div>
<div id="fastShipping">
<div id="featIcon">
<img class="icon" alt="Shipping" src="img/icon2.png">
</div>
<div id="featType">
<h2 class="featTitle">Fast Shipping</h2>
<p class="featDescription">We make sure you receive your avocados as soon as we have finished harvesting it.</p>
</div>
</div>
<div id="qualityAssurance">
<div id="featIcon">
<img class="icon" alt="Quality" src="img/icon3.png">
</div>
<div id="featType">
<h2 class="featTitle">Quality Assurance</h2>
<p class="featDescription">For every purchase you make, we will ensure there are no damages and we will test them to make sure they're perfectly ripe</p>
</div>
</div>
</div>
<!--- End of Features Section --->
<!--- Start of Video Section --->
<div id="how-it-works">
<h1 class="titleSection">How it works?</h1>
<iframe id="video" src="https://www.youtube.com/embed/tnT78O8wBxk" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!--- End of Video Section --->
<!--- Start of Price Section --->
<div id="pricing">
<div class="product">
<div class="type">
<h1 class="avocadoSize">
Small Avocado
</h1>
</div>
<div class="card-body">
<h2 class="price">$1</h2>
<p class="description">This Avocado is cultivated in Mediterranean climates throughout the world.
It's green-skinned, with a fleshy spherical body.</p>
</div>
<div class="card-footer">
<button class="btn">Select</button>
</div>
</div>
<div class="product">
<div class="type">
<h1 class="avocadoSize">
Medium Avocado
</h1>
</div>
<div class="card-body">
<h2 class="price">$3</h2>
<p class="description">This Avocado is cultivated in Mediterranean climates throughout the world.
It's green-skinned, with a fleshy egg-shaped body.</p>
</div>
<div class="card-footer">
<button class="btn">Select</button>
</div>
</div>
<div class="product">
<div class="type">
<h1 class="avocadoSize">
Big Avocado
</h1>
</div>
<div class="card-body">
<h2 class="price">$5</h2>
<p class="description">This Avocado is cultivated in Mediterranean climates throughout the world.
It's green-skinned, with a fleshy pear-shaped body.</p>
</div>
<div class="card-footer">
<button class="btn">Select</button>
</div>
</div>
</div>
<!--- End of Price Section --->
</div>
</body>
</html>