-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
187 lines (187 loc) · 9.16 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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700|Work+Sans:300,400,700|Lato:300,400,700">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
</head>
<body>
<div id="wrapper">
<header id="header" class="p jus-ctr ali-ctr">
<div class="f40">
<img id="header-img" src="images/logo.png">
</div>
<div class="p jus-end ali-ctr f60">
<nav id="nav-bar">
<a class="nav-link active" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Plans</a>
<a class="nav-link" href="#">Downloads</a>
<a class="nav-link" href="#">Contact</a>
</nav>
</div>
</header>
<div id="content" class="p jus-ctr ali-ctr">
<div id="hero" class="f100 p jus-ctr ali-ctr">
<div class="f80">
<h1>Anytime, anywhere.<br>Pretty neat, huh?</h1>
<p>This thing is so cool, your head will probably explode.
<br>
<input type="button" value="Download Now">
</p>
</div>
</div>
<div class="f40 section">
<h2>What's in the box?</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac rhoncus mi. Aliquam erat volutpat. Morbi est nibh, rutrum ac volutpat vitae, luctus sit amet justo. Aenean faucibus vehicula finibus. Morbi mi lorem, accumsan ut condimentum sed, consequat vel lacus. Ut vel laoreet arcu. Suspendisse potenti.</p>
<p>Aliquam a felis gravida metus molestie iaculis quis id dolor. Vestibulum ut ante posuere, tempor ex eget, placerat tellus. Aliquam erat volutpat. Donec a nisl vitae tellus feugiat faucibus.
<br>
<input type="button" value="See All Features">
</p>
</div>
<div class="f40 item">
<img src="images/illustration-1.png">
</div>
<div id="video" class="f40 item">
<img src="images/illustration-2.png">
</div>
<div class="f40 section">
<h2>Do the thing, on all your devices</h2>
<p>Donec pretium ligula sed elit fermentum, ac tempor nisi blandit. Duis cursus dui a felis imperdiet lacinia. Nullam felis est, tristique id ex quis, bibendum lobortis purus. Morbi vitae maximus sapien, ultricies sodales libero.</p>
<p>Duis in lacus ante. Vestibulum felis nibh, facilisis quis egestas a, viverra eu ipsum. Suspendisse tincidunt faucibus tempus.
<br>
<i class="fab fa-apple"></i>
<i class="fab fa-windows"></i>
<i class="fas fa-mobile-alt"></i>
</p>
</div>
<div id="features" class="f100">
<h2>What makes it so great</h2>
<div class="p jus-ctr ali-ctr">
<ul class="f20">
<li>All the things, nothing less</li>
<li>Makes it easy</li>
</ul>
<ul class="f20">
<li>It's relatively inexpensive</li>
<li>Easy on resources</li>
</ul>
<ul class="f20">
<li>It does the thing you want</li>
<li>Available on any device</li>
</ul>
</div>
</div>
<div id="plan" class="f100">
<h2>Choose a plan</h2>
<p>30-day guarantee, or your money back. Cancel anytime.</p>
<div class="p jus-ctr ali-ctr">
<div class="f45 card large">
<h3>Single License</h3>
<h1><sup>$</sup>4.99</h1>
<p>per month</p>
<input type="button" value="Get Single License">
</div>
</div>
<div class="p jus-ctr ali-ctr">
<div class="f15 card small" >
<h3>Student License</h3>
<h1><sup>$</sup>2.49</h1>
<p>per month</p>
<input class="alt" type="button" value="Get Student License">
</div>
<div class="f15 card small">
<h3>5 Seat License</h3>
<h1><sup>$</sup>19.99</h1>
<p>per month</p>
<input class="alt" type="button" value="Get 5 Seat License">
</div>
<div class="f15 card small">
<h3>10 Seat License</h3>
<h1><sup>$</sup>34.99</h1>
<p>per month</p>
<input class="alt" type="button" value="Get 10 Seat License">
</div>
</div>
</div>
<div id="testimonials" class="f100">
<h2>People just love elk!</h2>
<div class="p jus-ctr ali-ctr">
<p>"I absolutely love it! It makes things so easy!"
<br><i>- Clarke Mercer, Company</i>
</p>
<p>"It's simple, intuitive and improves my work flow."
<br><i>- Kia Weiss, Business</i>
</p>
<p>"I couldn't image working without Elk. Most useful thing ever."
<br><i>- Mylie Ewing, Organisation</i>
</p>
<p>"We've made the move to Elk, and it's great!"
<br><i>- Terry Chester, Charity</i>
</p>
</div>
</div>
<div id="business" class="f100">
<img src="images/business/1.png">
<img src="images/business/2.png">
<img src="images/business/3.png">
<img src="images/business/4.png">
<img src="images/business/5.png">
<img src="images/business/6.png">
</div>
<div id="footer" class="f100">
<div class="p jus-ctr">
<div class="f20">
<h3>Elk</h3>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Plans</a>
<a class="nav-link" href="#">Compatability</a>
<a class="nav-link" href="#">Extensions</a>
<a class="nav-link" href="#">Guarantee</a>
<a class="nav-link" href="#">Testimonials</a>
</div>
<div class="f20">
<h3>Learn More</h3>
<a class="nav-link" href="#">Why Elk?</a>
<a class="nav-link" href="#">Ethical Use</a>
<a class="nav-link" href="#">FAQ</a>
</div>
<div class="f20">
<h3>Support</h3>
<a class="nav-link" href="#">Using Elk</a>
<a class="nav-link" href="#">Discussions</a>
<a class="nav-link" href="#">Contact Us</a>
</div>
<div class="f20">
<h3>Newsletter</h3>
<p>Sign-up for our monthly newsletter.</p>
<form id="form">
<input id="email" type="text" name="email" placeholder="Enter your e-mail address" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
<br>
<input id="submit" type="submit" value="Submit" formaction="https://www.freecodecamp.com/email-submit">
</form>
</div>
<hr class="f80">
<div class="f40">
<div id="copyright">
<p>© Elk 2019. All rights reserved.</p>
</div>
</div>
<div class="f40">
<div id="social">
<p>
<a><i class="far fa-envelope"></i></a>
<a><i class="fab fa-facebook-f"></i></a>
<a><i class="fab fa-instagram"></i></a>
<a><i class="fab fa-linkedin-in"></i></a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>