High-Level Project Summary
we tried to develop an interactive website target for children and adults alike to teach them what stars undergo to be born and what main phases they pass through before they finally die to give us something new
Link to Final Project
Link to Project "Demo"
Detailed Project Description
we tried to develop an interactive website target for children and adults alike to teach them what stars undergo to be born and what main phases they pass through before they finally die to give us something new
Space Agency Data
https://www.nasa.gov
https://www.space.com
Hackathon Journey
throughout this amazing journey we learned so mush from so many people tin order to try and create our website unfortunately we weren't able to do mush since it was our first experience with web development but we hope to be better prepared for the next year
References
nasa.gov
space.com
<!DOCTYPE html>
<html>
<head>
<title>StarLife</title>
<link rel='stylesheet' type='text/css' href='style.css'>
<script src="script.js"></script>
</head>
<body>
<h1>StarLife</h1>
<div class="box-timeline">
<Button onclick="Nx()">Next<br>page</Button>
<Button onclick="Pr()">Previous<br>page</Button>
<div id="one">
<center>
<strong>
<font size="6"><p1>
A star is born when atoms of light elements are squeezed under enough pressure for their nuclei to undergo fusion.<br>
All stars are the result of a balance of forces.<br>
The force of gravity compresses atoms in interstellar gas until the fusion reactions begin.
</p1></font>
</strong>
</center>
</div>
<div id="two">
<button onclick="Ms()">
<div class="rond r1" data-anim="1"><img src="images/download.jpg" style="border-radius: 50%;" width="80px" height="80px"></div>
</button>
<div class="rond r1" data-anim="1"><img src="images/download.jpg" style="border-radius: 50%;" width="80px" height="80px"></div>
<div class="rond r2" data-anim="2"><img src="images/images.jpg" style="border-radius: 50%;" width="80px" height="80px"></div>
<div class="box b1" data-anim="1">
<h2>Main Seqence</h2>
<p>
Main sequence stars fuse hydrogen atoms to form helium atoms in their cores. About 90 percent of the stars in the universe, including the sun, are main sequence stars. These stars can range from about a tenth of the mass of the sun to up to 200 times as massive. Stars start their lives as clouds of dust and gas
</p>
<a href="https://www.space.com/22437-main-sequence-star.html" class="btn" target="_blank">More Info</a>
</div>
<div class="box b2" data-anim="2">
<h2>Brown dwarfs</h2>
<p>
Brown dwarfs are objects which have a size between that of a giant planet like Jupiter and that of a small star. In fact, most astronomers would classify any object with between 15 times the mass of Jupiter and 75 times the mass of Jupiter to be a brown dwarf. Given that range of masses, the object would not have been able to sustain the fusion of hydrogen like a regular star; thus, many scientists have dubbed brown dwarfs as "failed stars"
</p>
<a href="https://starchild.gsfc.nasa.gov/docs/StarChild/questions/question62.html" class="btn" target="_blank">More Info</a>
</div>
<div id="three">
</div>
</div>
</div>
</body>
</html>
*, ::before, ::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-family: 'Jost', sans-serif;
}
body {
background: #333;
}
h1 {
text-align: center;
padding: 240px 0;
color: #f1f1f1;
}
.box-timeline {
width: 100%;
height: 1500px;
background: #f1f1f1;
position: relative;
padding: 80px 0 250px 0;
margin-bottom: 100px;
}
.rond {
width: 80px;
height: 80px;
border-radius: 50%;
background: #333;
position: absolute;
border: 1px solid #000;
left: 50%;
transform: translate(-50%);
display: flex;
justify-content: center;
align-items: center;
font-size: 40px;
}
/* 1000 - 160 + 80 / 3 =~ 306 */
.r1{top: 80px;}
.r2{top: 386px;}
.box {
color: #333;
width: 400px;
min-height: 200px;
padding: 20px;
border-radius: 3px;
height: auto;
background: #f1f1f1;
box-shadow: 0 10px 15px rgba(0,0,0,0.5);
position: absolute;
left: 50%;
transform: translate(-50%);
}
.b1 {
top: 80px;
left: calc(50% - 270px);
}
.b2 {
top: 386px;
left: calc(50% + 270px);
}
.box p {
line-height: 20px;
font-size: 18px;
margin: 10px 0 20px 0;
}
.btn {
display: block;
background: midnightblue;
padding: 10px;
width: 120px;
text-align: center;
color: #f1f1f1;
text-decoration: none;
border-radius: 3px;
margin-top: 10px;
}
@media screen and (max-width: 1000px) {
.rond {
left: calc(50% + 200px);
}
.box {
left: calc(50% - 50px)
}
}
function Nx() {
var x = document.getElementById("two");
var y = document.getElementById("one");
x.style.display = "block";
y.style.display = "none";
}
function Pr() {
var x = document.getElementById("two");
var y = document.getElementById("one");
x.style.display = "none";
y.style.display = "block";
}
function Ms() {
var x = document.getElementById("two");
var y = document.getElementById("one");
x.style.display = "none";
y.style.display = "none";
}