-
Notifications
You must be signed in to change notification settings - Fork 0
/
technology-capsule.html
100 lines (100 loc) · 4.4 KB
/
technology-capsule.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="technology-capsule.css">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon-32x32.png">
<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=Barlow&family=Barlow+Condensed&family=Bellefair&display=swap"
rel="stylesheet">
<title>Frontend Mentor | Space tourism website</title>
</head>
<body>
<section id="technology">
<nav class="header">
<a href="index.html"><img src="assets/shared/logo.svg"></a>
<div class="navLinks">
<hr class="simpleLine">
<!-- <div> -->
<ul>
<li class="home"><a href="index.html">00 Home</a></li>
<li class="dest"><a href="destination-moon.html">01 Destination</a></li>
<li class="crew"><a href="crew-commander.html">02 Crew</a></li>
<li class="tech"><a href="technology-capsule.html">03 Technology</a></li>
</ul>
<!-- </div> -->
<hr class="effectLineHome">
<hr class="effectLineDest">
<hr class="effectLineCrew">
<hr class="effectLineTech">
</div>
</nav>
<div class="mainTechnology">
<h3><span>03</span> Space launch 101</h3>
<div id="vehicleTech">
<div class="vehicleTechInfo">
<div class="techNo">
<div class="circle" id="i1"><span>1</span></div>
<div class="circle" id="i2"><span>2</span></div>
<div class="circle" id="i3"><span>3</span></div>
</div>
<div class="vechicleTechInfoText">
<h4>The terminology...</h4>
<h1>Launch vehicle</h1>
<p>A launch vehicle or carrier rocket is a rocket-propelled vehicle used to carry a
payload from Earth's surface to space, usually to Earth orbit or beyond. Our
WEB-X carrier rocket is the most powerful in operation. Standing 150 metres tall,
it's quite an awe-inspiring sight on the launch pad!</p>
</div>
</div>
<div class="vehicleTechimg">
<img src="assets/technology/image-launch-vehicle-portrait.jpg">
</div>
</div>
<div id="spaceportTech">
<div class="spaceportTechInfo">
<div class="techNo">
<div class="circle" id="i1"><span>1</span></div>
<div class="circle" id="i2"><span>2</span></div>
<div class="circle" id="i3"><span>3</span></div>
</div>
<div class="spaceportTechInfoText">
<h4>The terminology...</h4>
<h1>Spaceport</h1>
<p>A spaceport or cosmodrome is a site for launching (or receiving) spacecraft,
by analogy to the seaport for ships or airport for aircraft. Based in the
famous Cape Canaveral, our spaceport is ideally situated to take advantage
of the Earth’s rotation for launch.</p>
</div>
</div>
<div class="spaceportTechimg">
<img src="assets/technology/image-spaceport-portrait.jpg">
</div>
</div>
<div id="capsuleTech">
<div class="capsuleTechInfo">
<div class="techNo">
<div class="circle" id="i1"><span>1</span></div>
<div class="circle" id="i2"><span>2</span></div>
<div class="circle" id="i3"><span>3</span></div>
</div>
<div class="capsuleTechInfoText">
<h4>The terminology...</h4>
<h1>Space capsule</h1>
<p>A space capsule is an often-crewed spacecraft that uses a blunt-body reentry
capsule to reenter the Earth's atmosphere without wings. Our capsule is where
you'll spend your time during the flight. It includes a space gym, cinema,
and plenty of other activities to keep you entertained.</p>
</div>
</div>
<div class="capsuleTechimg">
<img src="assets/technology/image-space-capsule-portrait.jpg">
</div>
</div>
</div>
</section>
<script src="technology-capsule.js"></script>
</body>
</html>