Our Solar System Facts By HTML, CSS, JavaScript
HTML
<!DOCTYPE html>
<html>
<head>
<title>Solar Facts</title>
</head>
<body style="background:linear-gradient(to right,#005AA7,#FFFDE4 );">
<header><font size="7">Our Solar Facts</font></header>
<div class=planetclass id="planetlist">
<font size="6"><a class=planetbutton id=s onclick="changepage(event,'sun')"><b>Sun</b></a>
<a class=planetbutton id=m onclick="changepage(event,'mercury')"><b>Mercury</b></a>
<a class=planetbutton id=v onclick="changepage(event,'venus')"><b>Venus</b></a>
<a class=planetbutton id=e onclick="changepage(event,'earth')"><b>Earth</b></a>
<a class=planetbutton id=ma onclick="changepage(event,'mars')"><b>Mars</b></a>
<a class=planetbutton id=j onclick="changepage(event,'jupiter')"><b>Jupiter</b></a>
<a class=planetbutton id=sa onclick="changepage(event,'saturn')"><b>Saturn</b></a>
<a class=planetbutton id=u onclick="changepage(event,'uranus')"><b>Uranus</b></a>
<a class=planetbutton id=n onclick="changepage(event,'neptune')"><b>Neptune</b></a></font>
</div>
<div id="sun" class="planetinfo" style=display:block>
<img src="http://pngimg.com/uploads/sun/sun_PNG13448.png" width="200" height="200" alt="Sun">
<ul style="text-align:left">
<font size="5"><li>Sun was born 4.6 billion years ago.</li><br />
<li>
Diameter of Sun is 1,392,684 km long.</li><br />
<li>The mass of Sun is 1.99×10<sup>30</sup> kg.</li><br />
<li>At its center Sun reaches temprature of 15 million℃.</li><br />
<li>The Sun is all the colours mixed together, this appears white to our eyes. </li><br />
<li>The Sun is an almost perfect sphere.</li><br />
<li>The Sun is 109 times wider than earth and 330,000 times as massive</li><br />
<li>The Sun contains 99.86% of the mass in the Solar System.</li>
</ul></font>
</div>
<div id="mercury" class="planetinfo">
<img src="http://www.pngmart.com/files/5/Mercury-Transparent-PNG.png" width="200" height="200" alt="Mercury">
<ul style="text-align:left">
<font size="5"><li>Mercury does not have any moons or rings.</li><br />
<li>Your weight on Mercury would be 38% of your weight on Earth.</li><br />
<li>A year on Mercury takes 88 Earth days.</li><br />
<li>Mercury has a diameter of 4,879 km, making it the smallest planet.</li><br />
<li>Mercury is the closest planet to the Sun, but it is the second hotest planet after Venus</li><br />
<li>Mercury is named for the Roman messenger to the gods.</li><br />
</ul></font>
</div>
<div id="venus" class="planetinfo">
<img src="https://freepngimg.com/thumb/universe/28713-6-venus.png" width="200" height="200" alt="Venus">
<ul style="text-align:left">
<font size="5"><li>Venus does not have any moons or rings.</li><br />
<li>Venus is nearly as big as the Earth with a diameter of 12,104 km.</li><br />
<li>A year on Venus takes 225 Earth days.</li><br />
<li>The surface temperature on Venus can reach 471 °C, making it the hotest planet of our solar system</li><br />
<li>Venus takes 243 earth days to rotate once on its axis and it takes 225 earth days to revolve around Sun, which means a day on Venus lasts longer than a year.</li><br />
<li>Venus rotates in the opposite direction to most other planets.</li>
</ul></font>
</div>
<div id="earth" class="planetinfo">
<img src="http://pngimg.com/uploads/earth/earth_PNG37.png" width="200" heigth="200" alt="Earth">
<ul style="text-align:left">
<font size="5"><li>Diameter of Earth is 12,742 km.</li><br />
<li>Earth's' mass is 5.97×10<sup>24</sup> kg.</li><br />
<li>The Earth was once believed to be the centre of the universe.</li><br />
<li>Earth has a powerful magnetic field, which protect it form the effect solar winds.</li><br />
<li>Earth is the only planet not named after a god.</li><br />
<li>The Earth is the densest planet in the Solar System.</li>
</ul></font>
</div>
<div id="mars" class="planetinfo">
<img src="http://pngimg.com/uploads/mars_planet/mars_planet_PNG32.png" width="200" height="200" alt="Mars">
<ul style="text-align:left">
<font size="5"><li>Diameter of Mars is 6,792 km.</li><br />
<li>Mars have 2 moons, Phobos & Deimos.</li><br />
<li>Mars and Earth have approximately the same landmass.</li><br />
<li>Mars is home to the tallest mountain in the solar system.</li><br />
<li>On Mars the Sun appears about half the size as it does on Earth.</li><br />
<li>Mars takes its name from the Roman god of war.</li><br />
<li>There are signs of liquid water on Mars.</li>
</ul>
</font>
</div>
<div id="jupiter" class="planetinfo">
<img src="http://www.pngmart.com/files/4/Jupiter-PNG-Photos.png" width="200" height="200" alt="Jupiter">
<ul style="text-align:left">
<font size="5"><li>Diameter of Jupiter is 142,984 km, making it the largest planet of our solar system.</li><br />
<li>Jupiter have 4 rings and 79 moons.</li><br />
<li>Its mass is 1.9×10<sup>27</sup> kg.</li><br />
<li>Jupiter has the shortest day of all the planets.</li><br />
<li>Jupiter orbits the Sun once every 11.8 Earth years.</li><br />
<li>Jupiter have a Great Red Spot which is a huge storm on it.</li><br />
<li>Jupiter’s moon Ganymede is the largest moon in the solar system.</li>
</ul>
</font>
</div>
<div id="saturn" class="planetinfo">
<img src="https://www.pngfind.com/pngs/m/312-3124100_saturn-is-the-sixth-planet-from-the-sun.png" width="200" height="200" alt="Saturn">
<ul style="text-align:left">
<font size="5"><li>Diameter of Saturn is 120,536 km.</li><br />
<li>Saturn have 30 rings and 62 moons.</li><br />
<li>Its mass is 5.68×10<sup>26</sup> kg.</li><br />
<li>Saturn can be seen with the naked eye from earth.</li><br />
<li>Saturn orbits the Sun once every 29.4 Earth years.</li><br />
<li>Saturn has oval-shaped storms similar to Jupiter’s.</li><br />
<li>Saturn has the most extensive rings in the solar system.</li><br />
<li>Titan is a moon of Sautrn with complex and dense nitrogen-rich atmosphere.</li>
</ul></font>
</div>
<div id="uranus" class="planetinfo">
<img src="https://img.pngio.com/blue-planet-png-uranus-planet-png-transparent-png-590267-uranus-planet-png-840_680.png" width="200" height="200" alt="Uranus">
<ul style="text-align:left">
<font size="5"><li>Diameter of Uranus is 51,118 km.</li><br />
<li>Uranus have 13 rings and 27 moons.</li><br />
<li>Its mass is 8.68×10<sup>25</sup> kg.</li><br />
<li>Uranus turns on its axis once every 17 hours, 14 minutes.</li><br />
<li>Uranus makes one trip around the Sun every 84 Earth years.</li><br />
<li>Uranus is often referred to as an “ice giant” planet because it hits the coldest temperatures of any planet.</li><br />
<li>Uranus’ moons are named after characters created by William Shakespeare and Alexander Pope.</li>
</ul></font>
</div>
<div id="neptune" class="planetinfo">
<img src="https://cdn.picpng.com/neptune/neptune-solar-system-planet-89584.png" width="200" height="200" alt="Neptune">
<ul style="text-align:left">
<font size="5"><li>Diameter of Neptune is 49,528 km.</li><br />
<li>Neptune have 5 rings and 14 moons.</li><br />
<li>Its mass is 1.02×10<sup>26</sup> kg</li><br />
<li>Neptune spins on its axis very rapidly.</li><br />
<li>Neptune is the smallest of the ice giants.</li><br />
<li>The atmosphere of Neptune is made of hydrogen and helium, with some methane.</li>
</ul></font>
</div>
</body>
</html>
CSS
header{
font-size:40px;
color:red;
text-align:center;
height:70px;
margin-top:10px;
}
#planetlist{
height:40px;
background-color:grey;
overflow-x:scroll;
overflow-y:hidden;
white-space:nowrap ;
}
#planetlist::-webkit-scrollbar{
display:none;
}
#h{
display:inline-block;
height:100%;
color:white;
}
#s{
display:inline-block ;
height:100%;
color:#f9d71c;
}
#m{
display:inline-block;
height:100%;
color:#f4a460;
}
#v{
display:inline-block;
height:100%;
color:orange;
}
#e{
display:inline-block;
height:100%;
color:#00bfff;
}
#ma{
display:inline-block;
height:100%;
color:#cd853f;
}
#j{
display:inline-block;
height:100%;
color:#f4a460;
}
#sa{
display:inline-block;
height:100%;
color:#f5deb3;
}
#u{
display:inline-block;
height:100%;
color:#afeeee;
}
#n{
display:inline-block;
height:100%;
color:#6495ed;
}
.planetclass a {
text-decoration: bold;
padding : 10px 20px;
font-size : 18px;
}
#home{
color:white;
}
#sun{
color:#f9d71c;
}
#mercury{
color:#f4a460;
}
#venus{
color:orange
}
#earth{
color:#00bfff;
}
#mars{
color:#cd853f;
}
#jupiter{
color:#f4a460;
}
#saturn{
color:#f5deb3;
}
#uranus{
color:#afeeee;
}
#neptune{
color:#6495ed;
}
.planetclass a:hover {
background-color :#fffafa;
}
.planetinfo {
display: none;
text-align:center;
margin-top:15px;
}
Javascript
function changepage(evt, eventName) {
var i, planetinfo, planetbutton;
planetinfo = document.getElementsByClassName("planetinfo");
for (i = 0; i < planetinfo.length; i++) {
planetinfo[i].style.display = "none";
}
planetbutton = document.getElementsByClassName("planetbutton");
for (i = 0; i < planetbutton.length; i++) {
planetbutton[i].className = planetbutton[i].className.replace(" active", "");
}
document.getElementById(eventName).style.display = "block";
evt.currentTarget.className += " active";
}
OUTPUT
Posts
48 Comments
Wow wonderful post
ReplyDeleteVery good
ReplyDeleteKallu
ReplyDeleteBeautiful
Super
ReplyDeleteInteresting 😝😝😝😝
ReplyDeleteNice facts
ReplyDeleteInteresting
ReplyDeleteSuperb
ReplyDeletePerfect
ReplyDeleteFANTASTIC
ReplyDeletePerfect 👌
ReplyDeleteInteresting
ReplyDeleteExcellent
ReplyDeleteNice Job
ReplyDeleteGood
ReplyDeleteLovely
ReplyDeleteexcellent
ReplyDeleteWonderful
ReplyDeleteVery Nice
ReplyDeleteInteresting Work
ReplyDeleteVery nice
ReplyDeleteAwesome
ReplyDeleteAwesome Work
ReplyDeleteAttractive
ReplyDeletegreat
ReplyDeleteAwesome
ReplyDeletePerfect
ReplyDeleteSuperb
ReplyDeleteSuperb quality
ReplyDeleteVery Good Job
ReplyDeleteExcellent
ReplyDeleteGreat
ReplyDeleteFantastic
ReplyDeletePerfect Facts
ReplyDeleteAmazing 😄😄😄😄😄
ReplyDeleteGood Work
ReplyDeleteSuperb
ReplyDeleteAwesome
ReplyDeleteAmazing Facts
ReplyDeleteVery nice
ReplyDeleteMind blowing
ReplyDeleteKnowledgeable
ReplyDeleteWonderful
ReplyDeletewow
ReplyDeleteWonderful
ReplyDeleteGreat Job
ReplyDeleteAmazing creation
ReplyDeleteWow Great
ReplyDelete