SpaceTour/technology.html at main · VictorManzanilla/SpaceTour · 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
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <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="icon" type="image/png" sizes="32x32" href="./assets/favicon-32x32.png">
  <link rel="stylesheet" href="./css/styles.css">

  <script src="nav.js" defer>  </script>
  <script src="tabs.js" defer></script>

  <title>🪐Space tourism website</title>
</head>

<body class="tech" >

  <a class="skip-to-content" href="#main"> Skip to Content</a>
  <header class="primary-header flex">
    <div>
      <img src="./assets/shared/logo.svg" alt="space tourism logo" class="logo">
    </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><a class="ff-sans-cond uppercase text-white letter-spacing-2" href="index.html"><span aria-hidden="true">00</span>Home</a>
          <li><a class="ff-sans-cond uppercase text-white letter-spacing-2" href="destination.html"><span aria-hidden="true">01</span>Destination</a>
          <li><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"><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--tech flow">

    <h1 class="numbered-title"><span aria-hidden="true">03</span>Space launch 101</h1>
            <!-- the sr-only will make the title of the crew invisible and tell ppl what they are -->
        <div class="circle-indicators flex" role="tablist" aria-label="technology list">
          <button class=" uppercase text-white ff-serif" aria-selected="true" role="tab" aria-controls="vehicle-tab" tabindex="0" data-image="vehicle-image"><span class="sr-only">Launch Vehicle</span> 1</button>
          <button  class=" uppercase text-white ff-serif" aria-selected="false" role="tab" aria-controls="spaceport-tab" tabindex="-1" data-image="spaceport-image"><span class="sr-only">Spaceport</span> 2</button>
          <button class=" uppercase text-white ff-serif"  aria-selected="false" role="tab" aria-controls="capsule-tab" tabindex="-1" data-image="capsule-image"><span class="sr-only">Space Capsule</span> 3</button>
        </div>

        <!--------------------------------- vehicle ---------------------------------------------------------------->
      <article  class="tech-info flow" tabindex="0" id="vehicle-tab" role="tabpanel">
        <header class="flow flow--space-small">
        <h2 class="fs-200 uppercase ff-sans-normal">The terminology...</h2>
         <h1 class="fs-700 uppercase ff-serif">Launch vehicle</h1>
      </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 pad!
        </p>
      </article>
        <!--------------------------------- spaceport ---------------------------------------------------------------->

      <article hidden class="tech-info flow" tabindex="0" id="spaceport-tab" role="tabpanel">
        <header class="flow flow--space-small">
        <h2 class="fs-500 uppercase ff-serif">The terminology...</h2>
         <h1 class="fs-700 uppercase ff-serif">Spaceport</h1>
      </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>

        <!--------------------------------- Capsule ---------------------------------------------------------------->

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


      <picture  id="vehicle-image">
        <source srcset="./assets/technology/image-launch-vehicle-landscape.jpg" type="image/webp">
          <!-- the image is by itself because depending on the screen, the image is positioned differently -->
          <img  src="./assets/technology/image-launch-vehicle-landscape.jpg" alt="rocket vehicle">
      </picture>

      <picture hidden id="spaceport-image" >
        <source  srcset="./assets/technology/image-spaceport-landscape.jpg" type="image/webp" >
          <img src="./assets/technology/image-spaceport-landscape.jpg" alt="spaceport" >
      </picture>

      <picture  hidden id="capsule-image">
        <source srcset="./assets/technology/image-space-capsule-landscape.jpg" type="image/webp">
          <img  src="./assets/technology/image-space-capsule-landscape.jpg" alt="space capsule">
      </picture>
  </main>

</body>

</html>