-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
125 lines (119 loc) · 5.26 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
<!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>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
</head>
<body>
<section id="first-section">
<header>
Rocketeer
<nav>
<a href="#first-section">Home</a>
<a href="#second-section">About us</a>
<a href="#third-section">View Product</a>
<a href="#fifth-section">Pricing</a>
</nav>
</header>
<main>
<h1>The future <br> is <b>now</b></h1>
<p>Rocketeer helmets is a visionary enterprise that is trying to <br> improve your health by building modern
and comfortable <br> helmets for you.</p>
<label for="#">Enter your Email to get the latest news</label>
<form action="#">
<input type="email" id="mail" placeholder="Enter your email here">
<input type="submit" id="submit" value="Submit">
</form>
</main>
</section>
<section id="second-section">
<div class="second-wrapper">
<div class="text-block">
<h1>About us</h1>
<h2>Our mission is change the way you explore the space</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Justo eget magna fermentum iaculis eu non diam phasellus. Sagittis orci a
scelerisque purus semper eget. Auctor neque vitae tempus quam pellentesque nec nam aliquam. Non
curabitur gravida arcu ac tortor. Penatibus et magnis dis parturient montes. Aliquam sem fringilla
ut morbi tincidunt augue. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.
Nunc sed id semper risus in hendrerit gravida rutrum. Senectus et netus et malesuada. Ornare arcu
dui vivamus arcu felis. Purus semper eget duis at.</p>
</div>
</div>
</section>
<section id="third-section">
<div class="third-section-wrapper">
<img src="img/astro1.png" alt="">
<div class="third-text-block">
<h1>Advanced communications system</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Justo eget magna fermentum iaculis eu non diam phasellus. </p>
<button>Buy now -></button>
</div>
</div>
</section>
<section id="fourth-section">
<div class="fourth-section-wrapper">
<div class="fourth-text-block">
<h1>Improved ventilation system</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Justo eget magna fermentum iaculis eu non diam phasellus. </p>
<button>Buy now -></button>
</div>
<img src="img/astro2.png" alt="">
</div>
</section>
<section id="fifth-section">
<div class="fifth-section-wrapper">
<div class="price-block">
<h1>Basic</h1>
<ul>
<li>faucibus interdum posuere lorem</li>
<li>vitae auctor eu augue</li>
<li>ultricies integer quis</li>
<li>semper risus in hendrerit</li>
<li>diam maecenas ultricies mi</li>
</ul>
<p>$230</p>
</div>
<div class="price-block">
<h1>Premium</h1>
<ul>
<li>faucibus interdum posuere lorem</li>
<li>vitae auctor eu augue</li>
<li>ultricies integer quis</li>
<li>semper risus in hendrerit</li>
<li>diam maecenas ultricies mi</li>
</ul>
<p>500$</p>
</div>
<div class="price-block">
<h1>Pro</h1>
<ul>
<li>faucibus interdum posuere lorem</li>
<li>vitae auctor eu augue</li>
<li>ultricies integer quis</li>
<li>semper risus in hendrerit</li>
<li>diam maecenas ultricies mi</li>
</ul>
<p>860$</p>
</div>
</div>
<footer>
<p>© 2021 · Rocketeer</p>
<div class="footer-img-block">
<img src="img/twitter.png" alt="">
<img src="img/facebook.png" alt="">
<img src="img/instagram.png" alt="">
</div>
</footer>
</section>
</body>
</html>