-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
110 lines (85 loc) · 4.46 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
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container-fluid">
<header id="header">
<div id="header-logo">
<img src="https://s8.postimg.cc/5o9bl7sk5/logo.jpg" alt="#" id="header-img" />
</div>
<nav id="nav-bar">
<ul id="navigation">
<li><a class="nav-link" href="#how-it-works">How It Works</a></li>
<li><a class="nav-link" href="#risks">Risks & Dangers</a></li>
<li><a class="nav-link" href="#pros">Pros & Cons</a></li>
</ul>
</nav>
</header>
<h1 id="title">Participate And Save</h1>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input name="email" id="email" type="email" placeholder=" Enter your email address" required/>
<input id="submit" type="submit" value="Let's Go" class="btn"></input>
</form>
<div class="icon">
<i class="fa fa-3x fa-bell" aria-hidden="true"></i>
</div>
<div id="how-it-works-div">
<h1 id="how-it-works">How It Works
<h1>
<p id="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at erat lorem. Donec ornare vel lectus a aliquet. Nulla sit amet turpis a tortor aliquet varius in eu urna. Fusce quis dolor leo. Ut commodo erat ex. Suspendisse feugiat orci tellus,
a dictum mauris luctus a. Morbi ac urna lobortis, aliquam lacus semper, auctor dolor. Mauris nec leo metus. Integer at gravida erat.</p>
</div>
<div id="risks-dangers">
<h1 id="risks">Risks & Dangers
<h2>
<p>Quisque maximus tellus mi, id auctor nisl semper eleifend. Fusce fringilla lorem a nisl suscipit, in accumsan eros hendrerit. Duis ac ipsum et massa pretium viverra. Aenean in luctus tellus. Aenean vel convallis dolor, vitae auctor dui.
Quisque ullamcorper sit amet sem nec bibendum. Praesent eget pulvinar libero. Vestibulum suscipit, erat eget mattis vehicula, ante metus auctor neque, et fermentum diam felis nec elit. Aenean sed augue dapibus, condimentum eros ac, mollis
ipsum.</p>
</div>
<div id="pros-cons">
<h1 id="pros">Pros & Cons</h1>
<p>Morbi efficitur nisl eget elit gravida viverra. Nunc est leo, ullamcorper ac iaculis at, condimentum eu eros. Fusce libero turpis, aliquet eget justo a, volutpat vestibulum dui. Etiam id venenatis risus, nec dignissim eros. Ut non tellus
orci. Etiam ullamcorper, eros fermentum scelerisque convallis, est diam mollis nisi, sed convallis lorem eros non elit. Duis commodo arcu id sem aliquam pulvinar. Aenean sed lorem dignissim, consequat dui eleifend, vestibulum lorem. Etiam
et justo pulvinar, aliquet erat non, efficitur nulla. Mauris finibus sed neque nec vestibulum. Phasellus odio tellus, scelerisque a ligula in, gravida scelerisque magna.</p>
</div>
</div>
<div class="thevideo">
<iframe id="video" width="650" height="300" src="//www.youtube.com/embed/H7jtC8vjXw8" frameborder="0" allowfullscreen></iframe>
</div>
<section id="choose">
<div id="all-plans">
<div id="live">
<div class="plans">live A Little</div>
<p class="plans-specs">Fast</p>
<p class="plans-specs">Convenient</p>
<p class="plans-specs">Reliable</p>
<p class="plans-specs">Comfortable</p>
<button class="choose-plan">$35/mo</button>
</div>
<div id="just-right">
<div class="plans">Just Right</div>
<p class="plans-specs">Faster</p>
<p class="plans-specs"> More Convenient</p>
<p class="plans-specs">More Reliable</p>
<p class="plans-specs">More Comfortable</p>
<button class="choose-plan">$45/mo</button>
</div>
<div id="have-it-all">
<div class="plans">Gotta Have It All</div>
<p class="plans-specs">Fastest</p>
<p class="plans-specs">Most Convenient</p>
<p class="plans-specs">Most Reliable</p>
<p class="plans-specs">Most Comfortable</p>
<button class="choose-plan">$55/mo</button>
</div>
</div>
</section>
</div>
<footer>© Designed and coded by Karkan Alzwayed</footer>
</body>
</html>