-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
166 lines (149 loc) · 10.9 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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Quest</title>
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/tachyons.min.css"/>
</head>
<body class="sans-serif dark-red-bg">
<header>
<div class="lh7 cover bg-left p5-ns p3 bg-center-l" style="background-image: url(img/bg.png)">
<img src="./img/logo.svg" class="db center pt6" />
<div class="">
<div class="mt0 pt5 pa3 pa0-l pb5 pb6-m pb6-l mw7-ns center">
<h1 class="f3 f1-l ddc hot-red dark-text-shadow-lg tc">The sky is not the limit.</h1>
<p class="menlo hot-red b dark-text-shadow">
Quest for Space is a one-of-a-kind program for students to
create and run experiments aboard the International Space Station (ISS).
</p>
<p class="menlo white dark-text-shadow o-90">
This allows them to collect data and analyze findings with the mentorship of top scientists and engineers from around the world.
Quest for Space is offered through The Quest Institute for Quality Education, located in San Jose, California. This is a non-profit organization 501(3)(c) with a mission to “provide enriching programs for schools around the world in the fields of academics, arts and athletics via a personal quest for excellence.”
</p>
</div>
</div>
</div>
</header>
<div class="m0 bb-red">
<div class="center cf mw8">
<div class="fl-ns w-50-m w-third-l w-100">
<div id="canvas00" class="spaceship-container center">
<svg id="rocket-flames" width="11px" height="38px" viewBox="0 0 11 38">
<g id="flames">
<polygon id="rocket-flame-light" fill="#9D0000" opacity="0.642266757" points="5.5 0.71875 11 38 0 38"></polygon>
<polygon id="rocket-flame-dark" class="pulse pulse-delay" fill="#FF2020" opacity="0.813462409" points="5.5 0.71875 9 38 2 38"></polygon>
</g>
</svg>
<svg id="rocket-container" width="11px" height="55px" viewBox="0 0 11 55">
<g id="rocket">
<polygon class="flame-move" id="Path-2" fill="#FFB914" points="4.33113325 30.9988397 5.52162438 54.7288392 6.61158311 30.9988397"></polygon>
<polygon id="Rectangle-8" fill="#86240C" points="3 29 8 29 7.66344736 31 3.38228707 31"></polygon>
<path d="M3.29538202,24.0004897 C3.29538202,24.0004897 0.724655534,25.40952 0.222970933,26.512686 C-0.278713667,27.6158519 0.222970933,30.756486 0.222970933,30.756486 C0.222970933,30.756486 1.07942895,29.7177413 1.64769101,29.2611171 C2.21595307,28.8044929 3.29538202,28.287665 3.29538202,28.287665 L3.29538202,24.0004897 Z" id="Path-2-Copy-3" fill="#546B7C"></path>
<path d="M10.9475559,24.0004897 C10.9475559,24.0004897 8.37682945,25.40952 7.87514485,26.512686 C7.37346025,27.6158519 7.87514485,30.756486 7.87514485,30.756486 C7.87514485,30.756486 8.73160286,29.7177413 9.29986492,29.2611171 C9.86812698,28.8044929 10.9475559,28.287665 10.9475559,28.287665 L10.9475559,24.0004897 Z" id="Path-2-Copy-4" fill="#546B7C" transform="translate(9.299865, 27.378488) scale(-1, 1) translate(-9.299865, -27.378488) "></path>
<path d="M3.04746713,29.546875 C2.3947312,26.5484437 1.98939014,22.2246713 1.98939014,17.0412693 C1.98939014,6.84589693 5.49202694,0.232183562 5.49202694,0.232183562 C5.49202694,0.232183562 8.99466373,6.84589693 8.99466373,17.0412693 C8.99466373,22.2246713 8.58932267,26.5484437 7.93658674,29.546875 L3.04746713,29.546875 Z" id="Combined-Shape-Copy" fill="#FFFFFF"></path>
</g>
</svg>
</div>
</div>
<div class="fl-ns w-50-m w-two-thirds-l w-100 pa3 pa0-ns dt bt-red bn-ns">
<div class="dtc v-mid white" style="height: 496px;">
<div class="f4 f2-l ddc white">Team Ratchet</div>
<div class="menlo hot-red hot-red-text-glow b">12% Completed</div>
<p class="lh7 menlo white o-80">These STEM learning tubs will give students the opportunity to recreate bridges, houses and vehicles. They will apply all of their knowledge about counting, shapes, measurement; to create a master piece.</p>
<button class="btn btn-red b pointer pull-right mt4">Give</button>
</div>
</div>
</div>
</div>
<div class="m0 bb-red">
<div class="center cf mw8">
<div class="fl-ns w-50-m w-third-l w-100">
<div id="canvas01" class="spaceship-container center">
<svg id="rocket-flames" width="11px" height="38px" viewBox="0 0 11 38">
<g id="flames">
<polygon id="rocket-flame-light" fill="#9D0000" opacity="0.642266757" points="5.5 0.71875 11 38 0 38"></polygon>
<polygon id="rocket-flame-dark" class="pulse pulse-delay" fill="#FF2020" opacity="0.813462409" points="5.5 0.71875 9 38 2 38"></polygon>
</g>
</svg>
<svg id="rocket-container" width="11px" height="55px" viewBox="0 0 11 55">
<g id="rocket">
<polygon class="flame-move" id="Path-2" fill="#FFB914" points="4.33113325 30.9988397 5.52162438 54.7288392 6.61158311 30.9988397"></polygon>
<polygon id="Rectangle-8" fill="#86240C" points="3 29 8 29 7.66344736 31 3.38228707 31"></polygon>
<path d="M3.29538202,24.0004897 C3.29538202,24.0004897 0.724655534,25.40952 0.222970933,26.512686 C-0.278713667,27.6158519 0.222970933,30.756486 0.222970933,30.756486 C0.222970933,30.756486 1.07942895,29.7177413 1.64769101,29.2611171 C2.21595307,28.8044929 3.29538202,28.287665 3.29538202,28.287665 L3.29538202,24.0004897 Z" id="Path-2-Copy-3" fill="#546B7C"></path>
<path d="M10.9475559,24.0004897 C10.9475559,24.0004897 8.37682945,25.40952 7.87514485,26.512686 C7.37346025,27.6158519 7.87514485,30.756486 7.87514485,30.756486 C7.87514485,30.756486 8.73160286,29.7177413 9.29986492,29.2611171 C9.86812698,28.8044929 10.9475559,28.287665 10.9475559,28.287665 L10.9475559,24.0004897 Z" id="Path-2-Copy-4" fill="#546B7C" transform="translate(9.299865, 27.378488) scale(-1, 1) translate(-9.299865, -27.378488) "></path>
<path d="M3.04746713,29.546875 C2.3947312,26.5484437 1.98939014,22.2246713 1.98939014,17.0412693 C1.98939014,6.84589693 5.49202694,0.232183562 5.49202694,0.232183562 C5.49202694,0.232183562 8.99466373,6.84589693 8.99466373,17.0412693 C8.99466373,22.2246713 8.58932267,26.5484437 7.93658674,29.546875 L3.04746713,29.546875 Z" id="Combined-Shape-Copy" fill="#FFFFFF"></path>
</g>
</svg>
</div>
</div>
<div class="fl-ns w-50-m w-two-thirds-l w-100 pa3 pa0-ns dt bt-red bn-ns">
<div class="dtc v-mid white" style="height: 496px;">
<div class="f4 f2-l ddc white">Team Ratchet</div>
<div class="menlo hot-red hot-red-text-glow b">12% Completed</div>
<p class="lh7 menlo white o-80">These STEM learning tubs will give students the opportunity to recreate bridges, houses and vehicles. They will apply all of their knowledge about counting, shapes, measurement; to create a master piece.</p>
<button class="btn btn-red b pointer pull-right mt4">Give</button>
</div>
</div>
</div>
</div>
<div class="m0 bb-red">
<div class="center cf mw8">
<div class="fl-ns w-50-m w-third-l w-100">
<div id="canvas02" class="spaceship-container center">
<svg id="rocket-flames" width="11px" height="38px" viewBox="0 0 11 38">
<g id="flames">
<polygon id="rocket-flame-light" fill="#9D0000" opacity="0.642266757" points="5.5 0.71875 11 38 0 38"></polygon>
<polygon id="rocket-flame-dark" class="pulse pulse-delay" fill="#FF2020" opacity="0.813462409" points="5.5 0.71875 9 38 2 38"></polygon>
</g>
</svg>
<svg id="rocket-container" width="11px" height="55px" viewBox="0 0 11 55">
<g id="rocket">
<polygon class="flame-move" id="Path-2" fill="#FFB914" points="4.33113325 30.9988397 5.52162438 54.7288392 6.61158311 30.9988397"></polygon>
<polygon id="Rectangle-8" fill="#86240C" points="3 29 8 29 7.66344736 31 3.38228707 31"></polygon>
<path d="M3.29538202,24.0004897 C3.29538202,24.0004897 0.724655534,25.40952 0.222970933,26.512686 C-0.278713667,27.6158519 0.222970933,30.756486 0.222970933,30.756486 C0.222970933,30.756486 1.07942895,29.7177413 1.64769101,29.2611171 C2.21595307,28.8044929 3.29538202,28.287665 3.29538202,28.287665 L3.29538202,24.0004897 Z" id="Path-2-Copy-3" fill="#546B7C"></path>
<path d="M10.9475559,24.0004897 C10.9475559,24.0004897 8.37682945,25.40952 7.87514485,26.512686 C7.37346025,27.6158519 7.87514485,30.756486 7.87514485,30.756486 C7.87514485,30.756486 8.73160286,29.7177413 9.29986492,29.2611171 C9.86812698,28.8044929 10.9475559,28.287665 10.9475559,28.287665 L10.9475559,24.0004897 Z" id="Path-2-Copy-4" fill="#546B7C" transform="translate(9.299865, 27.378488) scale(-1, 1) translate(-9.299865, -27.378488) "></path>
<path d="M3.04746713,29.546875 C2.3947312,26.5484437 1.98939014,22.2246713 1.98939014,17.0412693 C1.98939014,6.84589693 5.49202694,0.232183562 5.49202694,0.232183562 C5.49202694,0.232183562 8.99466373,6.84589693 8.99466373,17.0412693 C8.99466373,22.2246713 8.58932267,26.5484437 7.93658674,29.546875 L3.04746713,29.546875 Z" id="Combined-Shape-Copy" fill="#FFFFFF"></path>
</g>
</svg>
</div>
</div>
<div class="fl-ns w-50-m w-two-thirds-l w-100 pa3 pa0-ns dt bt-red bn-ns">
<div class="dtc v-mid white" style="height: 496px;">
<div class="f4 f2-l ddc white">Team Ratchet</div>
<div class="menlo hot-red hot-red-text-glow b">12% Completed</div>
<p class="lh7 menlo white o-80">These STEM learning tubs will give students the opportunity to recreate bridges, houses and vehicles. They will apply all of their knowledge about counting, shapes, measurement; to create a master piece.</p>
<button class="btn btn-red b pointer pull-right mt4">Give</button>
</div>
</div>
</div>
</div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="spaceship.js"></script>
<script src="stars.js"></script>
<script>
var height = 400;
var width = 200;
var padding = {top: 40, bottom: 55, right: 20, left: 20 };
var selector = "#canvas";
liftOff("00");
liftOff("01");
liftOff("02");
function liftOff(id) {
generateStars({
height: height * 2,
width: width * 2,
padding: padding,
selector: selector + id
});
generateSpaceship({
height: height,
width: width,
padding: padding,
selector: selector + id
});
}
</script>
</body>
</html>