-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
138 lines (119 loc) · 4.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
134
135
136
137
138
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="zerozero_username" />
<meta name="description" content="freecodecamp project" />
<meta name="content" content="product landing page" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Product Landing Page</title>
<link rel="stylesheet" href="scss/grid.css" />
<link rel="stylesheet" href="scss/style.css" />
</head>
<body>
<div class="container">
<div class="cell-header">
<header id="header">
<nav id="nav-bar" class="nav-bar">
<ul>
<li>
<a class="nav-link" href="#product-features">why you can trust us</a>
</li>
<li>
<a class="nav-link" href="#product-info">our product</a>
</li>
<li>
<a class="nav-link" href="#product-newsletter">get our newsletter!</a>
</li>
</ul>
</nav>
<img src="logo/logo.png" id="header-img" class="brand"/>
<h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. </h4>
<div class="video-overlay">
<video autoplay loop muted="video-bg" id="video-bg" class="video-bg">
<source src="videos/Transition - 23324.mp4" />
</video>
</div>
</header>
</div>
<div class="cell-post-1">
<article class="post">
<h2 id="product-info">Why you should use our products:</h2>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis ullamcorper felis ut tempus.
Mauris tincidunt lectus a tortor ultricies, vel malesuada mi finibus. Proin et ligula ac ligula aliquet dapibus.
Duis sed purus a diam molestie finibus sed eu orci.
Suspendisse in augue commodo est iaculis tempus.
In eu tempor felis, vitae euismod nisl. Sed finibus laoreet odio sed mattis.
Pellentesque porttitor odio in est ornare, et consequat ligula varius.
</p>
<p>
<video id="video" class="video-product" autoplay muted loop>
<source src="videos/Chocolate - 12669.mp4" />
</video>
</p>
</section>
</article>
</div>
<div class="cell-post-2">
<article class="post">
<section>
<h2 id="product-features">Why you can trust us</h2>
<h3>
Lorem ipsum dolor sit.
</h3>
<p>
Curabitur condimentum ultrices malesuada. Fusce euismod lorem vitae dignissim tempus. Pellentesque mattis
sapien.
<br>
<img src="img/egg-944495_1920.jpg">
<img src="img/kettle-2178442_1920.jpg">
<img src="img/walnuts-3844990_1920.jpg">
<br>
</p>
</section>
<section>
<ul>
<li>
<h3>All our products are natural</h3>
<p>Nulla facilisi. Quisque malesuada consectetur diam ac mollis. Etiam interdum metus non facilisis eleifend.
Quisque hendrerit faucibus accumsan. Nulla ut nisi. </p>
</li>
<li>
<h3>Home made</h3>
<p>Suspendisse sit amet gravida quam. Curabitur porttitor a magna eu viverra. Phasellus mattis pharetra quam,
tincidunt fermentum est blandit non. In. </p>
</li>
<li>
<h3>Fresh and healthy</h3>
<p>Suspendisse molestie felis sit amet lacus ultrices, nec faucibus metus suscipit. Suspendisse tincidunt
iaculis diam pulvinar condimentum. Etiam eleifend euismod feugiat. </p>
</li>
</ul>
</section>
</article>
</div>
<div class="cell-post-3">
<article class="post">
<h2 id="product-newsletter">
Want to know more? <br>Sign up and get recipes, tips and much more!
</h2>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input type="email" name="email" id="email" placeholder="Insert your email here!" />
<input type="submit" name="submit" id="submit" value="Sign Up!" />
</form>
</article>
</div>
<div class="cell-footer">
<footer>
<p>created by <a href="https://twitter.com/zerozero_user">zerozero_username</a></p>
</footer>
</div>
</div>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<script src="js/video-control.js"></script>
</body>
</html>