-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
124 lines (123 loc) · 4.76 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
<!DOCTYPE html>
<html prefix="og: https://ogp.me/ns/article#" class="no-js" lang="en">
<head>
<title>To The Moon</title>
<meta charset="utf-8">
<meta property="og:title" content="To The Moon">
<meta property="og:type" content="Website">
<meta property="og:url" content="https://medieinstitutet.github.io/inl-1-to-the-moon-FredrikCarlssn/">
<meta
property="og:image"
content="src(/photos/mi.png)"
>
<link rel="icon" href="/assets/photos/mi.png" type="image/x-icon">
<link rel="stylesheet" href="./css/normalize.css" type="text/css">
<link rel="stylesheet" href="./css/main.css" type="text/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=Rubik:ital,wght@0,300;0,500;0,700;1,300&display=swap"
rel="stylesheet"
>
</head>
<body>
<nav class="menu-wrap">
<input type="checkbox" class="toggler">
<div class="hamburger"><div></div></div>
<div class="menu">
<div>
<div>
<ul>
<li class="menu-item1"><a href="#">our story</a></li>
<li class="menu-item2"><a href="#">space ventures</a></li>
<li class="menu-item2">
<a href="#"
>about<br>
major tom</a
>
</li>
</ul>
</div>
</div>
</div>
</nav>
<main>
<section class="full-height astronaut">
<div class="heading-box">
<h1 class="text">To The Moon</h1>
<div class="link">
Read our story
<span>➜</span>
</div>
</div>
</section>
<section class="full-height text-page">
<article class="info">
<div class="box left">
<div class="shadow">
<div class="box special-text">
<h2 class="space">Space</h2>
<h2 class="ventures">Ventures</h2>
</div>
</div>
<h2 class="rubik-h2">Ground Control to Major Tom</h2>
<p>
Ground Control to Major Tom. Take your protein pills and put your
helmet on. Ground Control to Major Tom (ten, nine, eight, seven,
six). Commencing countdown, engines on (five, four, three). Check
ignition and may God's love be with you (two, one, liftoff). This
is Ground Control to Major Tom.
</p>
<p class="margin-top">
You've really made the grade. And the papers want to know whose
shirts you wear. Now it's time to leave the capsule if you dare.
This is Major Tom to Ground Control. I'm stepping through the
door.
</p>
<p class="cite">
And I'm floating in a most peculiar way. And the stars look very
different today. For here.
</p>
</div>
<div class="box right">
<div class="quote">
Persistence is very<br>important. You<br>should not give up<br>unless you are<br>forced to give up.
</div>
<div class="padding-left">
Am I sitting in a tin can. Far above the world. Planet Earth is blue.
And there's nothing I can do. Though I'm past one hundred thousand
miles.<br><img
class="major"
src="./assets/photos/major_tom.jpg"
alt="Girl in a jacket"
width="100"
height="150"
>
I'm feeling very still. And I think my spaceship. knows which way
to go. Tell my wife I love her very much she knows.
<p class="margin-top">
Ground Control to Major Tom. Your circuit's dead, there's
something wrong. Can you hear me, Major Tom? Can you hear me,
Major Tom? Can you hear me, Major Tom? Can you “Here am I
floating 'round my tin can. Far above the moon
</p>
<p class="margin-top">Planet Earth is blue.</p>
<p class="margin-top">And there's nothing I can do.</p>
<p class="margin-top">
<a class="major-link">Read more about Major Tom</a
><span class="major-arrow">➜</span>
</p>
</div>
</div>
</article>
<footer class="cookies">
<p class="text-width">
I don't know where I'm going from here, but I promise it won't be
boring. You should accept cookies.
</p>
<button class="accept">accept</button>
</footer>
</section>
</main>
</body>
</html>