Skip to content

Instantly share code, notes, and snippets.

@anniedebry

anniedebry/index.html

Last active October 26, 2023 22:27
Show Gist options
  • Save anniedebry/ae776da64620206c89c98b7cb226d848 to your computer and use it in GitHub Desktop.
Save anniedebry/ae776da64620206c89c98b7cb226d848 to your computer and use it in GitHub Desktop.
Download ZIP
SolarSystem
Raw
index.html
<!--
Website that displays the Solar System
with fun facts about each planet and star!
Created in CodePen using HTML, CSS, and JavaScript
-->
<p class="title">
<font color="white">The Solar System
</p>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.sun {
cursor: pointer;
}
</style>
<script>
$(document).ready(function() {
//general variables
const vw = window.innerHeight;
// sun redirect
$("#sun").click(function() {
// Calculate the number of pixels to scroll
const pixels = vw * 2.3
// Scroll the document by the specified number of pixels
$(document).scrollTop(pixels);
});
//mercury redirect
$("#mercury").click(function() {
const pixels = vw * 3.9
$(document).scrollTop(pixels);
});
//venus redirect
$("#venus").click(function() {
const pixels = vw * 5.8
$(document).scrollTop(pixels);
});
//earth redirect
$("#earth").click(function() {
const pixels = vw * 7.7
$(document).scrollTop(pixels);
});
//mars redirect
$("#mars").click(function() {
const pixels = vw * 9.62
$(document).scrollTop(pixels);
});
//jupiter redirect
$("#jupiter").click(function() {
const pixels = vw * 11.7
$(document).scrollTop(pixels);
});
// saturn redirect
$("#saturn").click(function() {
const pixels = vw * 13.58
$(document).scrollTop(pixels);
});
// uranus redirect
$("#uranus").click(function() {
const pixels = vw * 15.3
$(document).scrollTop(pixels);
});
// neptune redirect
$("#neptune").click(function() {
const pixels = vw * 17.4
$(document).scrollTop(pixels);
});
});
</script>
</head>
<body>
<div id="star-container">
<div id="shooting-star">
<div class="planets">
<div id="sun" class="sun">
</div>
<div id="mercury" class="mercury">
</div>
<div id="venus" class="venus">
</div>
<div id="earth" class="earth">
</div>
<div id="mars" class="mars">
</div>
<div id="jupiter" class="jupiter">
</div>
<div id="saturn" class="saturn">
</div>
<div id="uranus" class ="uranus">
</div>
<div id="neptune" class ="neptune">
</div>
</div>
</body>
</html>
<div class="space">
</div>
<div class="sun-desc">
<img src="https://i.imgur.com/mvlnf9p.png" id="sun-desc-img" alt="Sun Image">
<div class="sun-text-container">
<p class="size-sun"> • The Sun is 864,000 miles in diameter </p>
<p class="elements-sun"> • It's made up of Hydrogen and Helium </p>
<p class="earth-ratio-sun"> • It would take 1.3 million earths to fill it</p>
<p class="temperature-sun"> • temperatures top 27 million degrees Fahrenheit</p>
<p class="sun-mass"> • The Sun accounts for 99.8% of the solar system's mass</p>
<p class="sun-rotation"> • It rotates once every 35 days</p>
<p class="sun-age"> • Our Sun is a 4.5 billion-year-old star</p>
<p class="sun-type-star"> • Considered a medium-sized star</p>
<p class="sun-rotation-direction"> • Rotates the opposite direction to Earth</p>
<p class="sun-spots"> • The Sun's surface has dark sunspots</p>
</div>
<p class="sun-title"> The Sun is the center of our solar system</p>
</div>
<div class="space">
</div>
<div class= "mercury-desc">
<img src="https://i.imgur.com/BIhLySP.png" id="mercury-desc-image" alt="Mercury Image">
<div class= mercury-text-container>
<div class="class-mercury"> Known as a terrestrial planet •
</div>
<div class="size-mercury"> The smallest planet in our solar system •
</div>
<div class="fast-mercury"> It's the fastest planet in the solar system •
</div>
<div class="rotation-mercury"> Mercury takes 59 Earth days to make one full rotation •
</div>
<div class="atmosphere-mercury">
Mercury's atmosphere is extremely thin •
</div>
<div class="sun-mercury"> The Sun appears 3 times larger on Mercury than on Earth •
</div>
<div class="revolution-mercury"> One revolution around the sun takes 88 Earth Days •
</div>
<div class="speed-mercury"> Mercury travels at nearly 29 miles per second •
</div>
<div class="moon-mercury-comparison"> It's slightly larger than Earth's moon •
</div>
<div class="rings-moons-mercury"> Mercury has no rings or moons •
</div>
</div>
<p class="mercury-title"> Mercury is the first planet in our solar system</p>
</div>
</div>
<div class="space">
</div>
<div class="venus-desc">
<img src="https://i.imgur.com/EO158VM.png" id="venus-desc-image" alt="Venus Image">
<div class="venus-text-container">
<p class="hottest-venus"> • Venus is the hottest planet in our Solar System
</p>
<p class="clouds-venus"> • Has clouds made of sulfuric acid
</p>
<p class="twin-venus"> • Considered the sister planet of Earth
</p>
<p class="size-venus"> • Similar in size compared to Earth
</p>
<p class="rotation-venus"> • Venus spins clockwise on its axis
</p>
<p class="day-venus"> • A day on Venus is longer than a year
</p>
<p class="night-venus"> • The second brightest object in the sky on Earth
</p>
<p class="venus-moons"> • Venus has zero rings and moons
</p>
<p class="type-venus"> • Considered one of the four terrestrial planets
</p>
<p class="atmosphere-venus"> • Atmosphere is 96% Carbon Dioxide
</p>
</div>
<div class="venus-title"> Venus is the second planet in our solar system
</div>
</div>
<div class="space">
</div>
<div class="earth-desc">
<img src="https://i.imgur.com/1jcgvrP.png" id="earth-desc-image" alt="Earth Image">
<div class="earth-text-container">
<div class="liquid-earth"> The only world in our solar system with liquid •
</div>
<div class="size-earth"> The largest terrestrial planet out of the four •
</div>
<div class="venus-earth"> Slightly larger than its sister planet Venus •
</div>
<div class="atmosphere-earth"> The most abundent element in our atmosphere is nitrogen •
</div>
<div class="shield-earth"> Atmosphere breaks up most meteroids •
</div>
<div class="water-earth"> Water covers 70% of Earth's surface •
</div>
<div class="grav-earth"> Earth has an uneven gravitational field •
</div>
<div class="ice-earth"> The Antarctic Ice Cap contains 70% of Earth's freshwater •
</div>
<div class="au-earth"> An AU is the distance between the Earth and Sun •
</div>
<div class="light-earth"> It takes 8 minutes and 19 seconds for sunlight to reach us •
</div>
</div>
<div class="earth-title"> Earth is the third planet in our solar system
</div>
</div>
<div class="space">
</div>
<div class="mars-desc">
<img src="https://i.imgur.com/StRG8Vz.png" id="mars-desc-img" alt="Mars Image">
<div class="mars-text-container">
<p class="atmosphere-mars">• Has an extremely thin atmosphere
</p>
<p class="rovers-mars"> • Only planet we've sent rovers to
</p>
<p class="moons-mars"> • Has two moons named Phobos and Deimos
</p>
<p class="name-mars"> • Known as the red planet
</p>
<p class="size-mars"> • Mars is half the size of Earth
</p>
<p class="mars-floods"> • There are signs of ancient floods on Mars
</p>
<p class="seasons-mars"> • Mars has seasons, polar ice caps, volcanoes, etc..
</p>
<p class="mars-dust"> • Mars has huge dust storms that last months
</p>
<p class="frozen-mars"> • Mars currently has frozen water at its poles
</p>
<p class="day-mars"> • A day on Mars is 37 minutes longer than on Earth
</div>
<p class="mars-title"> Mars is the fourth planet in our Solar System
</p>
</div>
<div class="space">
</div>
<div class="jupiter-desc">
<img src="https://i.imgur.com/bPkKZJF.png" id="jupiter-desc-img" alt="Jupiter Image">
<div class="jupiter-text-container">
<div class="jupiter-size"> The largest planet in our solar system •
</div>
<div class="spot-jupiter"> Jupiter's red spot is a giant storm •
</div>
<div class="spot-size-jupiter"> The red spot is larger than Earth •
</div>
<div class="type-jupiter"> Considered one of the four gas giants •
</div>
<div class="moons-jupiter"> Jupiter has more than 75 moons •
</div>
<div class="spacecraft-jupiter"> Nine spacecrafts have visited Jupiter •
</div>
<div class="rotation-jupiter"> Rotates once every 10 hours •
</div>
<div class="rings-jupiter"> Jupiter has faint rings around it •
</div>
<div class="life-jupiter"> Some of its moons might support life •
</div>
<div class="core-jupiter"> Jupiter doesn't have a solid surface •
</div>
</div>
<div class="jupiter-title"> Jupiter is the fifth planet in our solar system
</div>
</div>
<div class="space">
</div>
<div class="saturn-desc">
<img src="https://i.imgur.com/jQuwipg.png" id="saturn-desc-img" alt="Saturn Image">
<div class="saturn-text-container">
<div class="type-saturn"> • Considered one of the four Gas Giants
</div>
<div class="moons-saturn"> • Saturn has a total of 82 moons
</div>
<div class="rings-saturn"> • Saturn has seven rings and several gaps between them
</div>
<div class="life-saturn"> • Saturn's moon may support life
</div>
<div class="elements-rings-saturn"> • Rings are made of ice and rocks
</div>
<div class="elements-saturn"> • Mostly a ball of hydrogen and helium
</div>
<div class="float-saturn"> • Its so light it could float in a bathtub
</div>
<div class="rings-two-saturn"> • Saturn's rings are very thin
</div>
<div class="core-saturn"> • Has a dense nickel and iron core
</div>
<div class="winds-saturn"> • Has some of the fastest winds in the solar system
</div>
</div>
<div class="saturn-title"> Saturn is the sixth planet in our solar system
</div>
</div>
<div class="space">
<div class="uranus-desc">
<img src="https://i.imgur.com/AfyDJBE.png" id="uranus-desc-img" alt="Uranus Image">
<div class="uranus-text-container">
<div class="earth-uranus"> About four times larger than Earth •
</div>
<div class="rotation-uranus"> Takes 17 hours to rotate once •
</div>
<div class="type-uranus"> Uranus is considered an ice giant •
</div>
<div class="moons-uranus"> Uranus has 27 known moons •
</div>
<div class="rings-uranus"> Has 13 known set of rings •
</div>
<div class="rotation-side-uranus"> Rotates east to west on its side •
</div>
<div class="voyager-uranus"> Voyager 2 is the only spacecraft to fly by Uranus •
</div>
<div class="life-uranus"> Uranus cannot support life •
</div>
<div class="gas-uranus"> Contains methane gas which makes it appear blue •
</div>
<div class="telescope-uranus"> First planet discovered through a telescope •
</div>
</div>
<div class="uranus-title"> Uranus is the seventh planet in our solar system
</div>
</div>
<div class="space">
</div>
<div class="neptune-desc">
<img src="https://i.imgur.com/yULRPWO.png" id="neptune-desc-img" alt="Neptune Image">
<div class="neptune-text-container">
<div class="rotation-neptune">
• Takes 16 hours to rotate once
</div>
<div class="type-neptune"> • Considered an ice giant
</div>
<div class="moons-neptune"> • Neptune has 14 known moons
</div>
<div class="rings-neptune"> • has atleast five faint main rings
</div>
<div class="voyager-neptune"> • Voyager 2 is the only spacecraft to fly by Neptune
</div>
<div class="life-neptune"> • Neptune cannot support life
</div>
<div class="winds-neptune"> • has average supersonic winds near 700 mph
</div>
<div class="elements-neptune"> • contains methane which gives it its blue color
</div>
<div class="highest-wind-neptune"> • had the highest wind speed recorded in the solar system
</div>
<div class="located"> • First planet located through math calculations
</div>
</div>
<div class="neptune-title"> Neptune is the eighth planet in our solar system
</div>
</div>
<head>
<style>
body {
background-color: #070514
}
</style>
</head>
Raw
script.js
const starContainer = document.getElementById("star-container");
let stars = ["✦", "✧", "★", "✬", "✯", "✴", "✵", "✶", "✷", "✹", "✸"];
for (let i = 0; i < 200; i++) {
const element = document.createElement("div");
element.style.top = `${Math.random() * 2010}%`;
element.style.left = `${Math.random() * 100}%`;
let sizeX = Math.random() * 7 + 1;
let sizeY = ~~(Math.random() * 3) + 1;
element.innerHTML = stars[~~(Math.random() * stars.length)];
element.style.fontSize = sizeX + "px";
element.style.animation = `${
7000 / sizeX + Math.random() * (7000 / sizeX)
}ms linear ${Math.random() * 5000}ms alternate infinite twinkle`;
starContainer.appendChild(element);
element.setAttribute("class", "star");
}
let shootingStars = document.querySelectorAll(".shootingstar");
function shoot(star) {
star.style.left = ~~(Math.random() * window.innerWidth) + "px";
star.classList.toggle("shoot");
setTimeout(function () {
shoot(star);
}, ~~(Math.random() * 10000) + 5000);
}
if (shootingStars.length > 0) {
shootingStars.forEach(star => {
shoot(star);
});
}
//timing for sun description test animation :)
const sunTextContainer = document.querySelector('.sun-text-container');
const sunContainer = document.querySelector('.sun-desc');
//variable for animation played check
let hasSunAnimationPlayed = false;
//checks if the user has reached the specified intersection for the animation to start running
const sunObserver = new IntersectionObserver(function(entries, sunObserver) {
entries.forEach(entry => {
if (entry.isIntersecting && !hasSunAnimationPlayed) {
//adds animate sunTextContainer to the class list -- animates
sunTextContainer.classList.add('animate');
//checks if animation has played yet
hasSunAnimationPlayed = true;
}
});
}, { threshold: 0.5 });
sunObserver.observe(sunContainer);
//timing for mercury description test animation :)
const mercuryTextContainer = document.querySelector('.mercury-text-container');
const mercuryContainer = document.querySelector('.mercury-desc');
//variable for animation played check
let hasMercuryAnimationPlayed = false;
//checks if the user has reached the specified intersection for the animation to start running
const mercuryObserver = new IntersectionObserver(function(entries, mercuryObserver) {
entries.forEach(entry => {
if (entry.isIntersecting && !hasMercuryAnimationPlayed) {
//adds animate sunTextContainer to the class list -- animates
mercuryTextContainer.classList.add('animate');
//checks if animation has played yet
hasMercuryAnimationPlayed = true;
}
});
}, { threshold: 0.5 });
mercuryObserver.observe(mercuryContainer);
//timing for sun description test animation :)
const venusTextContainer = document.querySelector('.venus-text-container');
const venusContainer = document.querySelector('.venus-desc');
//variable for animation played check
let hasVenusAnimationPlayed = false;
//checks if the user has reached the specified intersection for the animation to start running
const venusObserver = new IntersectionObserver(function(entries, venusObserver) {
entries.forEach(entry => {
if (entry.isIntersecting && !hasVenusAnimationPlayed) {
//adds animate sunTextContainer to the class list -- animates
venusTextContainer.classList.add('animate');
//checks if animation has played yet
venusSunAnimationPlayed = true;
}
});
}, { threshold: 0.5 });
venusObserver.observe(venusContainer);
//timing for sun description test animation :)
const earthTextContainer = document.querySelector('.earth-text-container');
const earthContainer = document.querySelector('.earth-desc');
//variable for animation played check
let hasEarthAnimationPlayed = false;
//checks if the user has reached the specified intersection for the animation to start running
const earthObserver = new IntersectionObserver(function(entries, earthObserver) {
entries.forEach(entry => {
if (entry.isIntersecting && !hasEarthAnimationPlayed) {
//adds animate sunTextContainer to the class list -- animates
earthTextContainer.classList.add('animate');
//checks if animation has played yet
earthSunAnimationPlayed = true;
}
});
}, { threshold: 0.5 });
earthObserver.observe(earthContainer);
//timing for sun description test animation :)
const marsTextContainer = document.querySelector('.mars-text-container');
const marsContainer = document.querySelector('.mars-desc');
//variable for animation played check
let hasMarsAnimationPlayed = false;
//checks if the user has reached the specified intersection for the animation to start running
const marsObserver = new IntersectionObserver(function(entries, marsObserver) {
entries.forEach(entry => {
if (entry.isIntersecting && !hasMarsAnimationPlayed) {
//adds animate sunTextContainer to the class list -- animates
marsTextContainer.classList.add('animate');
//checks if animation has played yet
hasMarsAnimationPlayed = true;
}
});
}, { threshold: 0.5 });
marsObserver.observe(marsContainer);
//timing for sun description test animation :)
const jupiterTextContainer = document.querySelector('.jupiter-text-container');
const jupiterContainer = document.querySelector('.jupiter-desc');
//variable for animation played check
let hasJupiterAnimationPlayed = false;
//checks if the user has reached the specified intersection for the animation to start running
const jupiterObserver = new IntersectionObserver(function(entries, jupiterObserver) {
entries.forEach(entry => {
if (entry.isIntersecting && !hasJupiterAnimationPlayed) {
//adds animate sunTextContainer to the class list -- animates
jupiterTextContainer.classList.add('animate');
//checks if animation has played yet
hasJupiterAnimationPlayed = true;
}
});
}, { threshold: 0.5 });
jupiterObserver.observe(jupiterContainer);
//timing for sun description test animation :)
const saturnTextContainer = document.querySelector('.saturn-text-container');
const saturnContainer = document.querySelector('.saturn-desc');
//variable for animation played check
let hasSaturnAnimationPlayed = false;
//checks if the user has reached the specified intersection for the animation to start running
const saturnObserver = new IntersectionObserver(function(entries, saturnObserver) {
entries.forEach(entry => {
if (entry.isIntersecting && !hasSaturnAnimationPlayed) {
//adds animate sunTextContainer to the class list -- animates
saturnTextContainer.classList.add('animate');
//checks if animation has played yet
hasSaturnAnimationPlayed = true;
}
});
}, { threshold: 0.5 });
saturnObserver.observe(saturnContainer);
//timing for sun description test animation :)
const uranusTextContainer = document.querySelector('.uranus-text-container');
const uranusContainer = document.querySelector('.uranus-desc');
//variable for animation played check
let hasUranusAnimationPlayed = false;
//checks if the user has reached the specified intersection for the animation to start running
const uranusObserver = new IntersectionObserver(function(entries, uranusObserver) {
entries.forEach(entry => {
if (entry.isIntersecting && !hasUranusAnimationPlayed) {
//adds animate sunTextContainer to the class list -- animates
uranusTextContainer.classList.add('animate');
//checks if animation has played yet
hasUranusAnimationPlayed = true;
}
});
}, { threshold: 0.5 });
uranusObserver.observe(uranusContainer);
//timing for sun description test animation :)
const neptuneTextContainer = document.querySelector('.neptune-text-container');
const neptuneContainer = document.querySelector('.neptune-desc');
//variable for animation played check
let hasNeptuneAnimationPlayed = false;
//checks if the user has reached the specified intersection for the animation to start running
const neptuneObserver = new IntersectionObserver(function(entries, neptuneObserver) {
entries.forEach(entry => {
if (entry.isIntersecting && !hasNeptuneAnimationPlayed) {
//adds animate sunTextContainer to the class list -- animates
neptuneTextContainer.classList.add('animate');
//checks if animation has played yet
hasNeptuneAnimationPlayed = true;
}
});
}, { threshold: 0.5 });
neptuneObserver.observe(neptuneContainer);
Raw
style.css
@import url(https://fonts.googleapis.com/css?family=Bungee);
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab);
/**Solar System Title**/
.title {text-align: center;}
.title {
font-size: 50px;
font-family: 'Bungee';
padding-bottom: 100px;
}
/* sun description CSS code **/
.sun-title {
position: absolute;
padding-top: 10%;
right: 30vw;
text-align: justify;
width: 100%;
font-size: 2vw;
text-align: center;
color:#ffebc2;
z-index: 2;
font-family: 'Bungee';
}
.sun-spots {
padding-left: 1vw;
padding-top: 180%;
position: absolute;
transform: translateY(-50%);
width: 150%;
margin: 0;
}
.sun-rotation-direction {
padding-left: 3vw;
padding-top: 162%;
position: absolute;
transform: translateY(-50%);
width: 150%;
margin: 0;
}
.sun-type-star {
padding-left: 4vw;
padding-top: 144%;
position: absolute;
transform: translateY(-50%);
width: 150%;
margin: 0;
}
.sun-age {
padding-left: 5vw;
padding-top: 126%;
position: absolute;
transform: translateY(-50%);
width: 150%;
margin: 0;
}
.sun-rotation {
padding-left: 5.5vw;
padding-top: 108%;
position: absolute;
transform: translateY(-50%);
width: 150%;
margin: 0;
}
.sun-mass {
padding-left: 5.5vw;
padding-top: 90%;
position: absolute;
transform: translateY(-50%);
width: 150%;
margin: 0;
}
.temperature-sun {
padding-left: 5vw;
padding-top: 72%;
position: absolute;
transform: translateY(-50%);
width: 150%;
margin: 0;
}
.earth-ratio-sun {
padding-left: 4.1vw;
padding-top: 54%;
position: absolute;
transform: translateY(-50%);
width: 150%;
margin: 0;
}
.elements-sun {
padding-left: 2.9vw;
padding-top: 36%;
position: absolute;
transform: translateY(-50%);
width: 100%;
margin: 0;
font-family: 'Bungee';
}
.size-sun {
padding-left: 1.2vw;
padding-top: 18%;
position: absolute;
transform: translateY(-50%);
width: 100%;
margin: 0;
}
.sun-text-container {
color: #ffebc2;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 25vw;
max-width: 100%;
z-index: 2;
font-family: 'Bungee';
font-size: 1vw;
white-space: nowrap;
left: 60vw; /* start off-screen from the left */
}
.sun-text-container.animate {
animation-name: sun-des-move-right;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: linear;
left: 19.5vw; /* move to 19.5vw from the left */
}
@keyframes sun-des-move-right {
0% {
left: 60vw;/* start off-screen from the left */
}
100% {
left: 19.5vw; /* move to 19.5vw from the left */
}
}
.sun-desc {
bottom: 0;
right: 0;
left: 0;
height: auto;
max-width: 25%;
margin: auto;
position: relative;
z-index: 1;
}
#sun-desc-img {
float:left;
max-width: 100%;
width: 100%;
height:auto;
}
.space {
padding-top: 125vh;
}
/* Mercury description CSS code */
.mercury-desc {
bottom: 0;
right: 0;
left: 0;
height: auto;
max-width: 25%;
margin: auto;
position: relative;
z-index: 1;
}
.mercury-text-container {
color: #b0b0b0;
position: absolute;
top: 50%;
transform: translate(-100%, -50%);
width: 20vw; /* adjust to fit text content */
max-width: 100%;
z-index: 2;
font-family: 'Bungee';
font-size: 1vw;
white-space: nowrap;
left: -15vw;
}
.mercury-title {
top: 15vw;
position: absolute;
left: 30vw;
text-align: justify;
width: 100%;
font-size: 2vw;
text-align: center;
color:#b0b0b0;
z-index: 2;
font-family: 'Bungee';
}
#mercury-desc-image {
padding-top: 25vw;
max-width: 5%; /* set the maximum width of the image */
display: block; /* set the display property to block */
margin: 0 auto; /* center the image horizontally */
}
.mercury-text-container.animate {
animation-name: mercury-des-move-right;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: linear;
right: 19.5; /* move to 19.5vw from the left */
}
@keyframes mercury-des-move-right {
0% {
left: -60vw;/* start off-screen from the left */
}
100% {
right: 19.5vw; /* move to 19.5vw from the left */
}
}
.rings-moons-mercury {
left: 19.5vw;
padding-top: 100%;
position: absolute;
width: 150%;
margin: 0;
}
.moon-mercury-comparison {
left: 12.5vw;
padding-top: 90%;
position: absolute;
width: 150%;
margin: 0;
}
.speed-mercury {
left: 7vw;
padding-top: 80%;
position: absolute;
width: 150%;
margin: 0;
}
.revolution-mercury {
left: 3.5vw;
padding-top: 70%;
position: absolute;
width: 150%;
margin: 0;
}
.sun-mercury{
left: 0vw;
padding-top: 60%;
position: absolute;
width: 150%;
margin: 0;
}
.atmosphere-mercury {
left: 9.7vw;
padding-top: 50%;
position: absolute;
width: 150%;
margin: 0;
}
.rotation-mercury {
left: 1.5vw;
padding-top: 40%;
position: absolute;
width: 150%;
margin: 0;
}
.fast-mercury {
left: 9.3vw;
padding-top: 30%;
position: absolute;
width: 150%;
margin: 0;
}
.size-mercury {
left: 11.5vw;
padding-top: 20%;
position: absolute;
width: 100%;
margin: 0;
font-family: 'Bungee';
}
.class-mercury {
left: 19.5vw;
padding-top: 10%;
position: absolute;
width: 100%;
margin: 0;
}
/* Venus description CSS code */
.atmosphere-venus {
padding-left: 1vw;
padding-top: 180%;
position: absolute;
transform: translateY(-50%);
width: 150%;
margin: 0;
}
.type-venus {
padding-left: 3vw;
padding-top: 162%;
position: absolute;
transform: translateY(-50%);
width: 150%;
margin: 0;
}
.venus-moons {
padding-left: 4vw;
padding-top: 144%;
position: absolute;
transform: translateY(-50%);
width: 150%;
margin: 0;
}
.night-venus {
padding-left: 5vw;
padding-top: 126%;
position: absolute;
transform: translateY(-50%);
width: 150%;
margin: 0;
}
.day-venus {
padding-left: 5.5vw;
padding-top: 108%;
position: absolute;
transform: translateY(-50%);
width: 150%;
margin: 0;
}
.rotation-venus {
padding-left: 5.5vw;
padding-top: 90%;
position: absolute;
transform: translateY(-50%);
width: 150%;
margin: 0;
}
.size-venus {
padding-left: 5vw;
padding-top: 72%;
position: absolute;
transform: translateY(-50%);
width: 150%;
margin: 0;
}
.twin-venus {
padding-left: 4.1vw;
padding-top: 54%;
position: absolute;
transform: translateY(-50%);
width: 150%;
margin: 0;
}
.clouds-venus {
padding-left: 2.9vw;
padding-top: 36%;
position: absolute;
transform: translateY(-50%);
width: 100%;
margin: 0;
font-family: 'Bungee';
}
.hottest-venus {
padding-left: 1.2vw;
padding-top: 18%;
position: absolute;
transform: translateY(-50%);
width: 100%;
margin: 0;
}
.venus-text-container {
color: #ffc387;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 25vw;
max-width: 100%;
z-index: 2;
font-family: 'Bungee';
font-size: 1vw;
white-space: nowrap;
left: 60vw; /* start off-screen from the left */
}
.venus-desc {
bottom: 0;
right: 0;
left: 0;
height: auto;
max-width: 25%;
margin: auto;
position: relative;
z-index: 1;
}
.venus-text-container.animate {
animation-name: sun-des-move-right;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: linear;
left: 19.5vw; /* move to 19.5vw from the left */
}
@keyframes venus-des-move-right {
0% {
left: 60vw;/* start off-screen from the left */
}
100% {
left: 19.5vw; /* move to 19.5vw from the left */
}
}
#venus-desc-image {
padding-top: 23vw;
max-width: 15%; /* set the maximum width of the image */
display: block; /* set the display property to block */
margin: 0 auto; /* center the image horizontally */
}
.venus-title {
position: absolute;
top: 18vw;
right: 30vw;
text-align: justify;
width: 100%;
font-size: 2vw;
text-align: center;
color:#ffc387;
z-index: 2;
font-family: 'Bungee';
}
/* Earth description CSS code */
.earth-desc {
bottom: 0;
right: 0;
left: 0;
height: auto;
max-width: 25%;
margin: auto;
position: relative;
z-index: 1;
}
.earth-text-container {
color: #a6e1ff;
position: absolute;
top: 50%;
transform: translate(-100%, -50%);
width: 20vw; /* adjust to fit text content */
max-width: 100%;
z-index: 2;
font-family: 'Bungee';
font-size: 1vw;
white-space: nowrap;
left: -32.5vw;
}
.earth-title {
top: 18vw;
position: absolute;
left: 30vw;
text-align: justify;
width: 100%;
font-size: 2vw;
text-align: center;
color:#a6e1ff;
z-index: 2;
font-family: 'Bungee';
}
#earth-desc-image {
padding-top: 23vw;
max-width: 15%; /* set the maximum width of the image */
display: block; /* set the display property to block */
margin: 0 auto; /* center the image horizontally */
}
.earth-text-container.animate {
animation-name: earth-des-move-right;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: linear;
left: -32.5; /* move to 19.5vw from the left */
}
@keyframes earth-des-move-right {
0% {
left: -60vw;/* start off-screen from the left */
}
100% {
right: 19.5vw; /* move to 19.5vw from the left */
}
}
.light-earth {
left: 20vw;
padding-top: 100%;
position: absolute;
width: 150%;
margin: 0;
}
.au-earth {
left: 25vw;
padding-top: 90%;
position: absolute;
width: 150%;
margin: 0;
}
.ice-earth {
left: 18vw;
padding-top: 80%;
position: absolute;
width: 150%;
margin: 0;
}
.grav-earth {
left: 27vw;
padding-top: 70%;
position: absolute;
width: 150%;
margin: 0;
}
.water-earth{
left: 29.5vw;
padding-top: 60%;
position: absolute;
width: 150%;
margin: 0;
}
.shield-earth{
left: 28.5vw;
padding-top: 50%;
position: absolute;
width: 150%;
margin: 0;
}
.atmosphere-earth {
left: 16.8vw;
padding-top: 40%;
position: absolute;
width: 150%;
margin: 0;
}
.venus-earth {
left: 25vw;
padding-top: 30%;
position: absolute;
width: 150%;
margin: 0;
}
.size-earth {
left: 25vw;
padding-top: 20%;
position: absolute;
width: 100%;
margin: 0;
font-family: 'Bungee';
}
.liquid-earth{
left: 26.5vw;
padding-top: 10%;
position: absolute;
width: 100%;
margin: 0;
}
/* Mars description CSS code */
.mars-title {
position: absolute;
top: 16vw;
right: 30vw;
text-align: justify;
width: 100%;
font-size: 2vw;
text-align: center;
color:#ff7f4d;
z-index: 2;
font-family: 'Bungee';
}
.day-mars {
padding-left: 1vw;
padding-top: 180%;
position: absolute;
transform: translateY(-50%);
width: 150%;
margin: 0;
}
.frozen-mars {
padding-left: 3vw;
padding-top: 162%;
position: absolute;
transform: translateY(-50%);
width: 150%;
margin: 0;
}
.mars-dust{
padding-left: 4vw;
padding-top: 144%;
position: absolute;
transform: translateY(-50%);
width: 150%;
margin: 0;
}
.seasons-mars {
padding-left: 5vw;
padding-top: 126%;
position: absolute;
transform: translateY(-50%);
width: 150%;
margin: 0;
}
.mars-floods {
padding-left: 5.5vw;
padding-top: 108%;
position: absolute;
transform: translateY(-50%);
width: 150%;
margin: 0;
}
.size-mars {
padding-left: 5.5vw;
padding-top: 90%;
position: absolute;
transform: translateY(-50%);
width: 150%;
margin: 0;
}
.name-mars {
padding-left: 5vw;
padding-top: 72%;
position: absolute;
transform: translateY(-50%);
width: 150%;
margin: 0;
}
.moons-mars {
padding-left: 4.1vw;
padding-top: 54%;
position: absolute;
transform: translateY(-50%);
width: 150%;
margin: 0;
}
.rovers-mars{
padding-left: 2.9vw;
padding-top: 36%;
position: absolute;
transform: translateY(-50%);
width: 100%;
margin: 0;
font-family: 'Bungee';
}
.atmosphere-mars {
padding-left: 1.2vw;
padding-top: 18%;
position: absolute;
transform: translateY(-50%);
width: 100%;
margin: 0;
}
.mars-text-container {
color: #ff7f4d;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 25vw;
max-width: 100%;
z-index: 2;
font-family: 'Bungee';
font-size: 1vw;
white-space: nowrap;
left: 60vw; /* start off-screen from the left */
}
.mars-text-container.animate {
animation-name: mars-des-move-right;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: linear;
left: 19.5vw; /* move to 19.5vw from the left */
}
@keyframes mars-des-move-right {
0% {
left: 60vw;/* start off-screen from the left */
}
100% {
left: 19.5vw; /* move to 19.5vw from the left */
}
}
.mars-desc {
bottom: 0;
right: 0;
left: 0;
height: auto;
max-width: 25%;
margin: auto;
position: relative;
z-index: 1;
}
#mars-desc-img {
padding-top: 25vw;
max-width: 5%; /* set the maximum width of the image */
display: block; /* set the display property to block */
margin: 0 auto; /* center the image horizontally */
}
/* CSS jupiter code **/
.jupiter-desc {
bottom: 0;
right: 0;
left: 0;
height: auto;
max-width: 25%;
margin: auto;
position: relative;
z-index: 1;
}
.jupiter-text-container {
color: #ffdfbd;
position: absolute;
top: 50%;
transform: translate(-100%, -50%);
width: 20vw; /* adjust to fit text content */
max-width: 100%;
z-index: 2;
font-family: 'Bungee';
font-size: 1vw;
white-space: nowrap;
left: -32.5vw;
}
.jupiter-title {
top: 23vw;
position: absolute;
left: 30vw;
text-align: justify;
width: 100%;
font-size: 2vw;
text-align: center;
color:#ffdfbd;
z-index: 2;
font-family: 'Bungee';
}
.jupiter-text-container.animate {
animation-name: jupiter-des-move-right;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: linear;
left: -32.5; /* move to 19.5vw from the left */
}
@keyframes jupiter-des-move-right {
0% {
left: -60vw;/* start off-screen from the left */
}
100% {
right: 19.5vw; /* move to 19.5vw from the left */
}
}
#jupiter-desc-img {
padding-top: 23vw;
max-width: 85%; /* set the maximum width of the image */
display: block; /* set the display property to block */
margin: 0 auto; /* center the image horizontally */
}
.core-jupiter {
left: 33vw;
padding-top: 100%;
position: absolute;
width: 150%;
margin: 0;
}
.life-jupiter {
left: 31.2vw;
padding-top: 90%;
position: absolute;
width: 150%;
margin: 0;
}
.rings-jupiter {
left: 32vw;
padding-top: 80%;
position: absolute;
width: 150%;
margin: 0;
}
.rotation-jupiter {
left: 35vw;
padding-top: 70%;
position: absolute;
width: 150%;
margin: 0;
}
.spacecraft-jupiter{
left: 28.1vw;
padding-top: 60%;
position: absolute;
width: 150%;
margin: 0;
}
.moons-jupiter {
left: 32.5vw;
padding-top: 50%;
position: absolute;
width: 150%;
margin: 0;
}
.type-jupiter {
left: 29vw;
padding-top: 40%;
position: absolute;
width: 150%;
margin: 0;
}
.spot-size-jupiter {
left: 32.2vw;
padding-top: 30%;
position: absolute;
width: 150%;
margin: 0;
}
.spot-jupiter {
left: 32.2vw;
padding-top: 20%;
position: absolute;
width: 100%;
margin: 0;
font-family: 'Bungee';
}
.jupiter-size{
left: 31vw;
padding-top: 10%;
position: absolute;
width: 100%;
margin: 0;
}
/* Saturn description CSS code */
.saturn-title {
position: absolute;
padding-top: 20%;
right: 30vw;
text-align: justify;
width: 100%;
font-size: 2vw;
text-align: center;
color:#ffebc2;
z-index: 2;
font-family: 'Bungee';
}
.winds-saturn {
padding-left: 1vw;
padding-top: 180%;
position: absolute;
transform: translateY(-50%);
width: 150%;
margin: 0;
}
.core-saturn {
padding-left: 3vw;
padding-top: 162%;
position: absolute;
transform: translateY(-50%);
width: 150%;
margin: 0;
}
.rings-two-saturn {
padding-left: 4vw;
padding-top: 144%;
position: absolute;
transform: translateY(-50%);
width: 150%;
margin: 0;
}
.float-saturn {
padding-left: 5vw;
padding-top: 126%;
position: absolute;
transform: translateY(-50%);
width: 150%;
margin: 0;
}
.elements-saturn {
padding-left: 5.5vw;
padding-top: 108%;
position: absolute;
transform: translateY(-50%);
width: 150%;
margin: 0;
}
.elements-rings-saturn {
padding-left: 5.5vw;
padding-top: 90%;
position: absolute;
transform: translateY(-50%);
width: 150%;
margin: 0;
}
.life-saturn {
padding-left: 5vw;
padding-top: 72%;
position: absolute;
transform: translateY(-50%);
width: 150%;
margin: 0;
}
.rings-saturn {
padding-left: 4.1vw;
padding-top: 54%;
position: absolute;
transform: translateY(-50%);
width: 150%;
margin: 0;
}
.moons-saturn {
padding-left: 2.9vw;
padding-top: 36%;
position: absolute;
transform: translateY(-50%);
width: 100%;
margin: 0;
font-family: 'Bungee';
}
.type-saturn {
padding-left: 1.2vw;
padding-top: 18%;
position: absolute;
transform: translateY(-50%);
width: 100%;
margin: 0;
}
.saturn-text-container {
color: #ffebc2;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 25vw;
max-width: 100%;
z-index: 2;
font-family: 'Bungee';
font-size: 1vw;
white-space: nowrap;
left: 60vw; /* start off-screen from the left */
}
.saturn-text-container.animate {
animation-name: saturn-des-move-right;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: linear;
left: 19.5vw; /* move to 19.5vw from the left */
}
@keyframes saturn-des-move-right {
0% {
left: 60vw;/* start off-screen from the left */
}
100% {
left: 19.5vw; /* move to 19.5vw from the left */
}
}
.saturn-desc {
bottom: 0;
right: 0;
left: 0;
height: auto;
max-width: 25%;
margin: auto;
position: relative;
z-index: 1;
}
#saturn-desc-img {
padding-top: 2vw;
float:left;
max-width: 100%;
width: 80%;
height:auto;
}
/* Uranus description CSS code */
.uranus-desc {
bottom: 0;
right: 0;
left: 0;
height: auto;
max-width: 25%;
margin: auto;
position: relative;
z-index: 1;
}
.uranus-text-container {
color: #b5faff;
position: absolute;
top: 50%;
transform: translate(-100%, -50%);
width: 20vw; /* adjust to fit text content */
max-width: 100%;
z-index: 2;
font-family: 'Bungee';
font-size: 1vw;
white-space: nowrap;
left: -15vw;
}
.uranus-title {
top: 23.5vw;
position: absolute;
left: 30vw;
text-align: justify;
width: 100%;
font-size: 2vw;
text-align: center;
color:#b5faff;
z-index: 2;
font-family: 'Bungee';
}
.uranus-text-container.animate {
animation-name: uranus-des-move-right;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: linear;
right: 19.5; /* move to 19.5vw from the left */
}
@keyframes uranus-des-move-right {
0% {
left: -60vw;/* start off-screen from the left */
}
100% {
right: 19.5vw; /* move to 19.5vw from the left */
}
}
#uranus-desc-img {
padding-top: 25vw;
max-width: 40%; /* set the maximum width of the image */
display: block; /* set the display property to block */
margin: 0 auto; /* center the image horizontally */
}
.telescope-uranus {
left: 10vw;
padding-top: 100%;
position: absolute;
width: 150%;
margin: 0;
}
.gas-uranus{
left: 6vw;
padding-top: 90%;
position: absolute;
width: 150%;
margin: 0;
}
.life-uranus {
left: 18vw;
padding-top: 80%;
position: absolute;
width: 150%;
margin: 0;
}
.voyager-uranus {
left: 4.7vw;
padding-top: 70%;
position: absolute;
width: 150%;
margin: 0;
}
.rotation-side-uranus{
left: 15vw;
padding-top: 60%;
position: absolute;
width: 150%;
margin: 0;
}
.rings-uranus {
left: 19vw;
padding-top: 50%;
position: absolute;
width: 150%;
margin: 0;
}
.moons-uranus {
left: 18vw;
padding-top: 40%;
position: absolute;
width: 150%;
margin: 0;
}
.type-uranus {
left: 14.5vw;
padding-top: 30%;
position: absolute;
width: 150%;
margin: 0;
}
.rotation-uranus {
left: 18.3vw;
padding-top: 20%;
position: absolute;
width: 100%;
margin: 0;
font-family: 'Bungee';
}
.earth-uranus {
left: 16vw;
padding-top: 10%;
position: absolute;
width: 100%;
margin: 0;
}
/* Neptune description CSS code */
.neptune-title {
position: absolute;
top: 23vw;
right: 30vw;
text-align: justify;
width: 100%;
font-size: 2vw;
text-align: center;
color:#70a7ff;
z-index: 2;
font-family: 'Bungee';
}
.located {
padding-left: 1vw;
padding-top: 180%;
position: absolute;
transform: translateY(-50%);
width: 150%;
margin: 0;
}
.highest-wind-neptune {
padding-left: 3vw;
padding-top: 162%;
position: absolute;
transform: translateY(-50%);
width: 150%;
margin: 0;
}
.elements-neptune {
padding-left: 4vw;
padding-top: 144%;
position: absolute;
transform: translateY(-50%);
width: 150%;
margin: 0;
}
.winds-neptune {
padding-left: 5vw;
padding-top: 126%;
position: absolute;
transform: translateY(-50%);
width: 150%;
margin: 0;
}
.life-neptune {
padding-left: 5.5vw;
padding-top: 108%;
position: absolute;
transform: translateY(-50%);
width: 150%;
margin: 0;
}
.voyager-neptune {
padding-left: 5.5vw;
padding-top: 90%;
position: absolute;
transform: translateY(-50%);
width: 150%;
margin: 0;
}
.rings-neptune {
padding-left: 5vw;
padding-top: 72%;
position: absolute;
transform: translateY(-50%);
width: 150%;
margin: 0;
}
.moons-neptune {
padding-left: 4.1vw;
padding-top: 54%;
position: absolute;
transform: translateY(-50%);
width: 150%;
margin: 0;
}
.type-neptune {
padding-left: 2.9vw;
padding-top: 36%;
position: absolute;
transform: translateY(-50%);
width: 100%;
margin: 0;
font-family: 'Bungee';
}
.rotation-neptune{
padding-left: 1.2vw;
padding-top: 18%;
position: absolute;
transform: translateY(-50%);
width: 100%;
margin: 0;
}
.neptune-text-container {
color: #70a7ff;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 25vw;
max-width: 100%;
z-index: 2;
font-family: 'Bungee';
font-size: 1vw;
white-space: nowrap;
left: 60vw; /* start off-screen from the left */
}
.neptune-text-container.animate {
animation-name: neptune-des-move-right;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: linear;
left: 19.5vw; /* move to 19.5vw from the left */
}
@keyframes neptune-des-move-right {
0% {
left: 60vw;/* start off-screen from the left */
}
100% {
left: 19.5vw; /* move to 19.5vw from the left */
}
}
.neptune-desc {
bottom: 0;
right: 0;
left: 0;
height: auto;
max-width: 25%;
margin: auto;
position: relative;
z-index: 1;
}
#neptune-desc-img {
padding-top: 25vw;
max-width: 40%; /* set the maximum width of the image */
display: block; /* set the display property to block */
margin: 0 auto; /* center the image horizontally */
}
/* CSS main planet code **/
.planets{
display:flex;
align-items:center;
flex-wrap:wrap;
justify-content:space-between;
gap:5px;
/*z-index allows you to reformat layers*/
z-index: 1;
position:relative;
}
.planets div {
display: flex;
justify-content:center;
border-radius:50%;
background-repeat:no-repeat;
background-size:cover;
background-position:center;
}
.planets div:hover{
padding:0.4%
}
.sun {
/* flex:4 0 auto; */
background-image:url('https://i.imgur.com/mvlnf9p.png');
width:300px;
height:300px;
}
.sun:hover {
}
.mercury {
background-image:url('https://i.imgur.com/BIhLySP.png');
width:20px;
height:20px;
}
.mercury:hover {
}
.venus {
/* flex:3 0 auto; */
background-image:url('https://i.imgur.com/EO158VM.png');
width:50px;
height:50px;
}
.venus:hover {
}
.earth {
display: block;
background-image:url('https://i.imgur.com/1jcgvrP.png');
width:50px;
height:50px;
}
.mars {
background-image:url('https://i.imgur.com/StRG8Vz.png');
width:20px;
height:20px;
}
.jupiter {
background-image:url('https://i.imgur.com/bPkKZJF.png');
width:200px;
height:200px;
}
.saturn {
background-image:url('https://i.imgur.com/jQuwipg.png');
border-radius:0!important;
background-size:contain;
width:290px;
height:250px;
}
.uranus {
background-image:url('https://i.imgur.com/AfyDJBE.png');
border-radius:0!important;
background-size:contain;
width:105px;
height:140px;
}
.neptune {
background-image:url('https://i.imgur.com/yULRPWO.png');
border-radius:0!important;
background-size:contain;
width:105px;
height:105px;
}
/* star CSS code **/
#star-container {
background-color:transparent;
height: 730vw;
margin: 0px;
}
#shootingstar {
position: absolute;
left: 20%;
width: 100px;
height: 100px;
background-image: url("https://cdr2.com/shootingstar2.png");
background-repeat: no-repeat;
background-size: 100% 100%;
transform: scale(0);
filter: drop-shadow(5px 5px 5px #fff6);
}
.shoot {
animation: 2500ms linear 1 shoot;
}
@keyfromes shootstar {
0% {
transform: scale(0);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
.star {
position: absolute;
background-color: transparent;
color: #fff;
transform-origin: center;
text-align: center;
border-radius: 50%;
}
.star:before {
content: "";
background-color: transparent;
width: 100%;
height: 100%;
display: inline-block;
border-radius: 50%;
position: absolute;
top: -1px;
left: -1px;
}
.star:after {
content: "";
width: 100%;
height: 100%;
display: inline-block;
border-radius: 50%;
position: absolute;
top: 1px;
left: 1px;
}
/*star animations*/
@keyframes shoot {
0% {
transform: translate(0px, 0px) scale(0);
}
50% {
transform: translate(250px, 250px) scale(2);
}
100% {
transform: translate(500px, 500px) scale(0);
}
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(1440deg);
}
}
@keyframes rotate2 {
0% {
transform: rotate(1440deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes twinkle {
0% {
opacity: 0.8;
transform: rotate(-15deg) scale(1);
}
50% {
opacity: 0.6;
transform: rotate(0deg) scale(0.95);
}
100% {
transform: rotate(15deg) scale(1);
opacity: 0.9;
}
}
.full-bleed {
box-shadow: 0 0 0 100vmax #070514;
clip-path: inset(0 -100vmax);
}
@anniedebry
Copy link
Author

anniedebry commented Oct 26, 2023 •
edited
Loading

Solar System project built in HTML, CSS, and JavaScript. Shows fun facts about each planet and our star in the Solar System.
Was programmed on CodePen

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment