-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
118 lines (112 loc) · 5.02 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rocketeer Helmets</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav class="container">
<h1 class="logo">Rocketeer</h1>
<ul class="nav__links">
<li><a href="#">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#product">Products</a></li>
<li><a href="#pricing">Pricing</a></li>
</ul>
</nav>
<section class="home__page container">
<div class="home__flexbox">
<div class="home__text">
<p class="big__text">The future is now</p>
<p class="small__text">Rocketeer Helmets is a visionary enterprise that is trying to improve your health by building modern and comfortable helmets for you.</p>
</div>
<form action="home__form">
<p>Enter your email to get the latest news</p>
<div class="form__controls">
<input type="email" placeholder="Enter your email here" class="email">
<input type="submit">
</div>
</form>
</div>
</section>
<section class="about-us__page section__layout" id="about">
<div class="about-us section__container">
<hgroup>
<h1>About us</h1>
<h2>Our mission is to change the way you explore the space</h2>
</hgroup>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum, quibusdam dolorem unde dolor enim assumenda, cum repellendus architecto, officiis nihil voluptas dicta hic ducimus et ab! Veritatis expedita obcaecati modi? Non, ab officia eaque, blanditiis, repudiandae modi sapiente architecto laborum pariatur animi quidem consequatur exercitationem! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestiae alias dolorem fugit fugiat. Possimus, asperiores?</p>
</div>
</section>
<section class="product__page section__layout product__page1" id="product">
<div class="product section__container">
<div class="product__image product__image1">
</div>
<div class="product__text">
<h1>Advanced communication</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus quia in beatae voluptatem nam, non aut eaque modi accusamus recusandae, ratione, ex blanditiis.</p>
<button><a href="#">Buy now</a></button>
</div>
</div>
</section>
<section class="second__ellipse">
<section class="product__page section__layout product__page2" id="product">
<div class="product section__container">
<div class="product__text">
<h1>Improved ventilation system</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus quia in beatae voluptatem nam, non aut eaque modi accusamus recusandae, ratione, ex blanditiis.</p>
<button><a href="#">Buy now</a></button>
</div>
<div class="product__image product__image2">
</div>
</div>
</section>
</section>
<section class="pricing__page section__layout" id="pricing">
<div class="pricing section__container">
<article>
<div>
<h1>basic</h1>
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
<span>$230</span>
</div>
</article>
<article>
<div>
<h1>pro</h1>
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
<span>$500</span>
</div>
</article>
<article>
<div>
<h1>premium</h1>
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
<span>$860</span>
</div>
</article>
</div>
</section>
</body>
</html>