space-tourism/destination-titan.html at main · Islandstone89/space-tourism · 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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Islandstone89's solution for the Space Tourism Website challenge on Frontend Mentor.">
    <title>Frontend Mentor | Space tourism website</title>

    <link rel="preload" href="/assets/fonts/barlow-condensed-v12-latin-700.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="/assets/fonts/barlow-condensed-v12-latin-regular.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="/assets/fonts/barlow-v12-latin-regular.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="/assets/fonts/bellefair-v14-latin-regular.woff2" as="font" type="font/woff2" crossorigin>


    <link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon-32x32.png">
    <link rel="stylesheet" href="/dist/style.css">
    <script defer src="/app/js/script.js"></script>

    <meta property="og:url" content="https://willowy-crisp-6d3fa1.netlify.app">
    <meta property="og:type" content="website">
    <meta property="og:title" content="Frontend Mentor | Space tourism website">
    <meta property="og:description" content="">
    <meta property="og:image" content="https://opengraph.b-cdn.net/production/images/c6dca275-ac69-4e75-9fd8-975054a94f4d.png?token=oNEH83dSgTWISMJvGS08pxVyxCzVSUr_a4MbGVgfkEg&height=516&width=1200&expires=33267535460">
  </head>
  <body data-category="destination">
    <header class="primary-header">

      <a href="#mainContent" class="skip-to-content visually-hidden">Skip to main content</a>

      <div class="logo-wrapper">
        <img src="assets/shared/logo.svg" alt="Space Tourism - Home" class="logo" width="48" height="48">
      </div><!-- end logo-wrapper -->

      <nav class="primary-nav">

        <button class="menu-btn menu-btn-open" aria-expanded="false" aria-controls="primaryNavList">
          <span class="visually-hidden">Open menu</span>
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="21" aria-hidden="true" focusable="false">
            <g fill="#D0D6F9" fill-rule="evenodd">
              <path d="M0 0h24v3H0zM0 9h24v3H0zM0 18h24v3H0z"/>
            </g>
          </svg>
        </button><!-- end menu-btn-open -->

        <button class="menu-btn menu-btn-close">
          <span class="visually-hidden">Close menu</span>
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" aria-hidden="true" focusable="false">
            <g fill="#D0D6F9" fill-rule="evenodd">
              <path d="M2.575.954l16.97 16.97-2.12 2.122L.455 3.076z"/>
              <path d="M.454 17.925L17.424.955l2.122 2.12-16.97 16.97z"/>
            </g>
          </svg>
        </button><!-- end menu-btn-close -->

        <ul class="primary-nav__list" id="primaryNavList">

          <li class="primary__nav__item">
            <a href="/" class="primary__nav__link"><span class="primary__nav__number" aria-hidden="true">00</span> Home</a>
          </li><!-- end primary__nav__item -->

          <li class="primary__nav__item">
            <a href="destination-moon.html" class="primary__nav__link"  aria-current="page"><span class="primary__nav__number" aria-hidden="true">01</span> Destination</a>
          </li><!-- end primary__nav__item -->

          <li class="primary__nav__item">
            <a href="crew-commander.html" class="primary__nav__link"><span class="primary__nav__number" aria-hidden="true">02</span> Crew</a>
          </li><!-- end primary__nav__item -->

          <li class="primary__nav__item">
            <a href="technology-vehicle.html" class="primary__nav__link"><span class="primary__nav__number" aria-hidden="true">03</span> Technology</a>
          </li><!-- end primary__nav__item -->

        </ul><!-- end primary-nav__list -->
      </nav><!-- end primary-nav -->
    </header><!-- end primary-header -->

    <main class="main main__destination flow" id="mainContent">

      <h1 class="site__heading destination__heading"><span class="site__heading-number destination__heading-number" aria-hidden="true">01</span> Pick your destination</h1>

      <div class="destination__content">

        <div class="destination__image-wrapper">
          <img src="/assets/destination/image-titan.png" alt="The moon seen from space" class="destination__image" width="445" height="445">
        </div><!-- end destination__image-wrapper -->

        <div class="destination__text">

          <nav class="destination__nav">
            <ul class="destination__nav__list">

              <li class="destination__nav__item">
                <a href="/destination-moon.html" class="destination__nav__link">Moon</a>
              </li><!-- end destination__nav__item -->

              <li class="destination__nav__item">
                <a href="/destination-mars.html" class="destination__nav__link">Mars</a>
              </li><!-- end destination__nav__item -->

              <li class="destination__nav__item">
                <a href="/destination-europa.html" class="destination__nav__link">Europa</a>
              </li><!-- end destination__nav__item -->

              <li class="destination__nav__item">
                <a href="/destination-titan.html" class="destination__nav__link" aria-current="page">Titan</a>
              </li><!-- end destination__nav__item -->

            </ul><!-- end destination__nav-list -->
          </nav><!-- end destination__nav -->

          <div class="destination__info">
            <h2 class="destination__info__heading">Titan</h2>
            <p class="tagline tagline__destination">The only moon known to have a dense atmosphere other than Earth, Titan is a home away from home (just a few hundred degrees colder!). As a bonus, you get striking views of the Rings of Saturn.</p>
          </div><!-- end destination__info  -->

          <div class="destination__travel">

            <div class="destination__distance">
              <h3 class="destination__distance__heading">Avg. distance</h3>
              <p class="destination__travel__text destination__distance__text">1.6 bil. km</p>
            </div><!-- end destination__distance -->

            <div class="destination__time">
              <h3 class="destination__time__heading">Est. travel time</h3>
              <p class="destination__travel__text destination__time__text">7 years</p>
            </div><!-- end destination__time -->

          </div><!-- end destination__travel -->

        </div><!--end destination__text -->

      </div><!-- end destination__content -->
    </main><!-- end main -->
  </body>
</html>