Space-webpage/technology.html at Scrimba · AtlasKaplan/Space-webpage · GitHub

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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <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+Condensed:wght@400;700&family=Bellefair&family=Barlow:wght@400;700&display=swap"
    rel="stylesheet">

  <link rel="stylesheet" href="style.css">
  <title>Frontend Mentor | Space tourism website</title>
  <script src="navigation.js" defer></script>
  <script src="tabs.js" defer></script>
</head>


<body class="technology">

  <header class="primary-header flex">
    <div>
      <a href="index.html"><img src="assets/shared/logo.svg" alt="space tourism logo" class="logo"></a>
    </div>
    <button class="mobile-nav-toggle" aria-controls="primary-navigation"><span class="sr-only"
        aria-expanded="false">Menu</span></button>
    <nav>
      <ul id="primary-navigation" data-visible="false" class="primary-navigation underline-indicators flex">
        <li class="underline-indicators-hover"><a class="ff-sans-cond uppercase text-white letter-spacing-2"
            href="index.html"><span aria-hidden="true">00</span>Home</a>
        <li class="underline-indicators-hover"><a class="ff-sans-cond uppercase text-white letter-spacing-2"
            href="destination.html"><span aria-hidden="true">01</span>Destination</a>
        <li class="underline-indicators-hover"><a class="ff-sans-cond uppercase text-white letter-spacing-2"
            href="crew.html"><span aria-hidden="true">02</span>Crew</a>
        <li class="active underline-indicators-hover"><a class="ff-sans-cond uppercase text-white letter-spacing-2"
            href="technology.html"><span aria-hidden="true">03</span>Technology</a>
      </ul>
    </nav>
  </header>

  <main id="main" class="grid-container grid-container--technology flow">
    <h1 class="numbered-title"><span aria-hidden="true">03</span> Space launch 101</h1>

    <picture id="launch-image">
      <source srcset="assets/technology/image-launch-vehicle-portrait.jpg" media="(min-width: 74.0625rem)" />
      <img src="assets/technology/image-launch-vehicle-landscape.jpg" alt="launch">
    </picture>

    <picture hidden id="port-image">
      <source srcset="assets/technology/image-spaceport-portrait.jpg" media="(min-width: 74.0625rem)" />
      <img src="assets/technology/image-spaceport-landscape.jpg" alt="port">
    </picture>

    <picture hidden id="capsule-image">
      <source srcset="assets/technology/image-space-capsule-portrait.jpg" media="(min-width: 74.0625rem)" />
      <img src="assets/technology/image-space-capsule-landscape.jpg" alt="capsule">
    </picture>

  <div class="dot-indicators flex" role="tablist" aria-label="technology list">
    <button aria-selected="true" aria-controls="launch-tab" role="tab" data-image="launch-image" tabindex="0"><span
        class="sr-only">Launch</span>1</button>
    <button aria-selected="false" aria-controls="port-tab" role="tab" data-image="port-image" tabindex="-1"><span
        class="sr-only">Space port</span>2</button>
    <button aria-selected="false" aria-controls="capsule-tab" role="tab" data-image="capsule-image" tabindex="-1"><span
        class="sr-only">Space Capsule</span>3</button>
  </div>

<article class="technology-details flow" id="launch-tab" role="tabpanel" tabindex="0">
  <header class="flow flow--space-small">
    <h2 class="fs-600 ff-serif uppercase">The terminology...</h2>
    <p class="fs-700 uppercase ff-serif">Launch Vehicle</p>
  </header>
  <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</p>
</article>

<article hidden class="technology-details flow" id="port-tab" role="tabpanel" tabindex="0">
  <header class="flow flow--space-small">
    <h2 class="fs-600 ff-serif uppercase">The terminology...</h2>
    <p class="fs-700 uppercase ff-serif">Spaceport</p>
  </header>
  <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>
</article>

<article hidden class="technology-details flow" id="capsule-tab" role="tabpanel" tabindex="0">
  <header class="flow flow--space-small">
    <h2 class="fs-600 ff-serif uppercase">The terminology...</h2>
    <p class="fs-700 uppercase ff-serif">Space capsule</p>
  </header>
  <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>
</article>

</main>
</body>
</html>