-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathinspiration.html
380 lines (328 loc) · 14.1 KB
/
inspiration.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
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
---
layout: default
title: What Inspires Us
permalink: /inspiration/
header-title: "What Inspires Us"
header-desc: "Ideas are like whispers in the air, each one inspiring the next.<br>Here are some that motivate us to strive for better."
header-image: /assets/images/inspiration.webp
header-image-height: 500
header-image-width: 1400
scroll-link: "#learn-more"
first-button: "<a href='/apply/' class='btn btn--primary'>Join The Team</a>"
second-button: "<a href='#learn-more' class='smoothscroll btn btn--stroke'>Learn More</a>"
---
<style>
@media only screen and (min-width: 1000px) {
.container {
width: 60%;
margin: 0 auto;
}
}
.pioneer-section {
margin: 40px 0;
padding: 30px;
background-color: #333;
border-radius: 10px;
display: flex;
align-items: center;
}
.pioneer-section:nth-child(even) {
flex-direction: row-reverse;
}
h1,
.tektur,
.home-content__buttons {
text-align: center;
}
h1,
h2 {
color: #730ea2;
}
h3 {
font-size: 20px;
}
.content {
flex: 1;
padding: 0 20px;
}
.pioneer-image {
width: 300px;
height: 300px;
object-fit: cover;
border-radius: 50%; /* This creates a circular shape */
cursor: pointer;
background-color: #444;
background-size: cover;
background-position: center;
}
@media only screen and (max-width: 768px) {
.pioneer-image {
width: 200px;
height: 200px;
}
}
@media only screen and (max-width: 480px) {
.pioneer-image {
width: 150px;
height: 150px;
}
}
.main-quote-container {
display: flex;
justify-content: center;
align-items: center;
margin: 40px 0;
}
.main-quote-wrapper {
max-width: 1000px;
text-align: center;
position: relative;
padding: 30px;
background: rgba(115, 14, 162, 0.1);
border-radius: 15px;
border-left: 5px solid #730ea2;
}
.quote-icon {
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 100px;
opacity: 0.2;
}
.main-quote {
font-size: 1.4em;
font-style: italic;
color: #ddd;
position: relative;
z-index: 1;
}
.quote-author {
margin-top: 15px;
color: #999;
font-size: 1em;
}
.quote {
font-style: italic;
margin-top: 20px;
color: #aaa;
}
.button {
display: inline-block;
padding: 10px 20px;
background-color: #730ea2;
color: #fff;
text-decoration: none;
border-radius: 5px;
margin-top: 20px;
}
</style>
<div class="container" id="learn-more">
<h1>Our Vision</h1>
<div class="main-quote-container">
<div class="main-quote-wrapper">
<svg class="quote-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 75 75">
<text x="50%" y="50%" text-anchor="middle" fill="#730ea2" font-size="100">"</text>
</svg>
<p class="main-quote">
"Beyond the boundaries of gravity and other people's doubt, we launch not just a rocket, but humanity's unbridled potential. With love for engineering, collective passion, and audacious dreams, we will redefine the impossible and etch our names in the celestial chronicles of human achievement."
</p>
<div class="quote-author">- <a target="_blank" href="https://suriyaasundararuban.com/">Suriyaa R. Sundararuban</a></div>
</div>
</div>
<h1>Space Pioneers Who Inspired Us</h1>
<div class="pioneer-section">
<img class="pioneer-image" src="/assets/images/inspiration/Wernher_von_Braun.jpg" alt="Wernher von Braun" />
<div class="content">
<h2>Wernher von Braun</h2>
<h3>What we like about him:</h3>
<p>
Wernher M. M. Freiherr von Braun (1912-1977) was a German-born rocket scientist who played a pivotal role in the development of rocket technology, particularly during World War II. He was instrumental in the creation of the V-2 rocket for
Nazi Germany.
</p>
<p>
After World War II, von Braun, along with many other German scientists, was brought to the United States as part of Operation Paperclip. He continued his work on rocketry and became a key figure in the development of the
Redstone, Jupiter-C, and Saturn rockets for the U.S. Army and later NASA.
</p>
<p>Von Braun’s work on the Saturn V rocket was critical to the success of the Apollo program, enabling the United States to send astronauts to the Moon.</p>
<h3>Why we love him:</h3>
<p class="quote">"I have learned to use the word 'impossible' with the greatest caution." - Wernher von Braun</p>
<a href="https://en.wikipedia.org/wiki/Wernher_von_Braun" class="btn btn--primary">Learn More</a>
</div>
</div>
<div class="pioneer-section">
<img class="pioneer-image" src="/assets/images/inspiration/Dr._Robert_H._Goddard_-_GPN-2002-000131.jpg" alt="Robert H. Goddard" />
<div class="content">
<h2>Robert H. Goddard</h2>
<h3>What we like about him:</h3>
<p>While Robert Goddard (1882-1945) predates the establishment of NASA, he is often regarded as one of the pioneers of modern rocketry and is a key figure in the history of space exploration.</p>
<p>Goddard conducted extensive research on rocket propulsion and held numerous patents related to rocket technology. In 1926, he successfully launched the world’s first liquid-fueled rocket.</p>
<p>
His work laid the foundation for the development of rocket technology that would eventually lead to space exploration. NASA’s Goddard Space Flight Center in Greenbelt, Maryland, is named in his honor, recognizing his
contributions to the field.
</p>
<h3>Why we love him:</h3>
<p class="quote">"The dreams of yesterday are the hopes of today and the reality of tomorrow." - Robert H. Goddard</p>
<a href="https://en.wikipedia.org/wiki/Robert_Goddard" class="btn btn--primary">Learn More</a>
</div>
</div>
<div class="pioneer-section">
<img class="pioneer-image" src="/assets/images/inspiration/NASA_human_computers_-_Katherine_Coleman_Goble_Johnson.jpg" alt="Katherine Johnson" />
<div class="content">
<h2>C. Katherine Johnson</h2>
<h3>What we like about her:</h3>
<p>C. Katherine Johnson (1918-2020) was a brilliant African-American mathematician who made significant contributions to NASA’s early space programs.</p>
<p>
She was known for her precise calculations of orbital mechanics, which were essential for the success of the Mercury and Apollo missions. Her work helped ensure the safety of astronauts and the accuracy of their
trajectories.
</p>
<p>
Johnson’s story gained wider recognition through the book and movie “Hidden Figures”, which highlighted the contributions of African-American women like her to NASA’s space program. Her dedication and talent paved the way
for future generations of minority scientists and engineers.
</p>
<h3>Why we love her:</h3>
<p class="quote">"I like to learn. That's an art and a science." - Katherine Johnson</p>
<a href="https://en.wikipedia.org/wiki/Katherine_Johnson" class="btn btn--primary">Learn More</a>
</div>
</div>
<div class="pioneer-section">
<img class="pioneer-image" src="/assets/images/inspiration/Neil_Armstrong_pose.jpg" alt="Neil Armstrong" />
<div class="content">
<h2>Neil A. Armstrong</h2>
<h3>What we like about him:</h3>
<p>Neil A. Armstrong (1930 - 2012) is a very well-known figure in the history of aerospace engineering. He was an American astronaut and aeronautical engineer who also happened to be the first person to walk on the moon.</p>
<h3>Why we love him:</h3>
<p class="quote">"That’s one small step for man, one giant leap for mankind." - Neil Armstrong</p>
<a href="https://en.wikipedia.org/wiki/Neil_Armstrong" class="btn btn--primary">Learn More</a>
</div>
</div>
<div class="pioneer-section">
<img class="pioneer-image" src="/assets/images/inspiration/A._P._J._Abdul_Kalam.jpg" alt="A. P. J. Abdul Kalam" />
<div class="content">
<h2>A. P. J. Abdul Kalam</h2>
<h3>What we like about him:</h3>
<p>
Dr. A. P. J. Abdul Kalam (1931 - 2015), often referred to as the “Missile Man of India”, was an aerospace engineer and scientist who played a pivotal role in India’s civilian space program and military missile development.
He was instrumental in the development of India’s first satellite launch vehicle (SLV-III) and the Agni and Prithvi missiles.
</p>
<p>Kalam served as the President of India from 2002 to 2007 and was widely admired for his contributions to science and technology education, particularly among the youth.</p>
<p>He is remembered for his dedication to India’s space and defense programs and for his inspirational leadership. His legacy continues to inspire future generations of scientists and engineers in India and around the globe.</p>
<h3>Why we love him:</h3>
<p class="quote">
"If you FAIL, never give up because F.A.I.L. means "First Attempt in Learning". END is not the end; in fact E.N.D. means "Effort Never Dies". If you get NO as an answer, remember N.O. means "Next Opportunity." - A. P. J.
Abdul Kalam
</p>
<a href="https://en.wikipedia.org/wiki/A._P._J._Abdul_Kalam" class="btn btn--primary">Learn More</a>
</div>
</div>
<div class="pioneer-section">
<img class="pioneer-image" src="/assets/images/inspiration/Elon_Musk_Colorado_2022_(cropped2).jpg" alt="Elon Musk" />
<div class="content">
<h2>Elon R. Musk</h2>
<h3>What we like about him:</h3>
<p>
Elon R. Musk is an entrepreneur, investor and engineer. He founded SpaceX, an aerospace manufacturer and space transport company of which he is CEO and lead designer. He has stated his commitment to reducing the risk of human
extinction by establishing a human colony on mars.
</p>
<h3>Why we love him:</h3>
<p class="quote">"Rockets are the only form of transportation on Earth where the vehicle is built anew for each journey. What if you had to build a new plane for every flight?" - Elon R. Musk</p>
<a href="https://en.wikipedia.org/wiki/Elon_Musk" class="btn btn--primary">Learn More</a>
</div>
</div>
</div>
<br /><br /><br /><br />
<!-- contact
================================================== -->
<style>
.contact-section {
background-color: #f9f9f9;
padding: 20px;
border: 1px solid #ddd;
max-width: 800px;
margin: 20px auto;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.contact-header {
text-align: center;
margin-bottom: 20px;
}
.contact-header h2 {
margin: 0;
color: #333;
}
.contact-people {
display: flex;
justify-content: space-between;
gap: 20px;
}
.contact-person {
background-color: #fff;
border-radius: 8px;
padding: 15px;
flex: 1;
text-align: center; /* Center-align content */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.contact-image img {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
}
.contact-info {
margin-top: 10px; /* Space between image and text */
}
.contact-info h3 {
margin: 5px 0;
font-size: 1.2em;
color: #444;
}
.contact-info a {
color: #007BFF;
text-decoration: none;
}
.contact-info a:hover {
text-decoration: underline;
}
@media (max-width: 768px) {
.contact-people {
flex-direction: column; /* Stack contacts vertically on smaller screens */
gap: 15px;
}
}
</style>
<section id="contact" class="s-contact">
<div class="overlay"></div>
<div class="contact__line"></div>
<div class="row section-header" data-aos="fade-up">
<div class="col-full">
<h3 class="subhead">Contact Us</h3>
<h1 class="display-2 display-2--light">Ask us why we do, what we do</h1>
</div>
</div>
<div class="row contact-content" data-aos="fade-up">
<div class="contact-section">
<div class="contact-header">
<h2>Inquiries Regarding Our Motivation</h2>
</div>
<div class="contact-people">
<!-- Contact Person #1 -->
<div class="contact-person">
<div class="contact-image">
<img src="/assets/images/team/suriyaa-sundararuban.png" alt="Suriyaa Sundararuban">
</div>
<div class="contact-info">
<h3>Suriyaa Sundararuban</h3>
<p><a href="mailto:[email protected]">[email protected]</a></p>
</div>
</div>
</div>
</div>
</div>
<!-- end contact-primary -->
</div>
<!-- end contact-content -->
</section>
<!-- end s-contact -->