Solar Scroller

index.html

<div align="center" class="sol">
  <div class="tit-pl">
    <h3><a class="tit-h3" href="#">The Solar Scroller</a></h3>
    <p>Planet Diameter 1 pixel = 1.000 km</p>
    <p>Planet Distance to Sun : 1 pixel = 10.000 km</p>
    <div class="planet" id="sun"></div>
  </div>

  <!-- Planets -->
  <div class="planet" id="mercury" title="Mercury | 57.91 Million Km"></div>
  <div class="planet" id="venus" title="Venus | 108.2 Million Km"></div>
  <div class="planet" id="earth" title="Earth | 149.6 Million Km"></div>
  <div class="planet" id="mars" title="Mars | 227.9 Million Km"></div>
  <div class="planet" id="jupiter" title="Jupiter | 778.5 Million Km"></div>
  <div class="planet" id="saturn" title="Saturn | 1.433 Billion Km"></div>
  <div class="planet" id="uranus" title="Uranus | 2.871 Billion Km"></div>
  <div class="planet" id="neptune" title="Neptune | 4.495 Billion Km"></div>

</div>

<!--
HTML To Do :
 - To create Orbits and Satelites
-->

script.js

//To Be Added

/*
Javascript To Do :
  - Create Planet Dynamics and Look
*/

solar-scroller.markdown

Solar Scroller

Scroll through the solar system!

A Pen by Abhishta on CodePen.

License.

style.css

html,
body {
  margin: 0;
  padding: 0;
  background-color: black;
}

.sol {
  opacity: 0.8;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
  width: auto;
  height: auto;
}

.tit-pl {
  margin-top: 10px;
  margin-bottom: 100px;
}

h3 .tit-h3 {
  font-family: Roboto, Helvetica;
  font-size: 50px;
  font-weight: 600;
  text-decoration: none;
  color: rgba(250, 250, 250, 1);
  margin-bottom: 0;
  padding: 0;
}

h5 {
  font-family: Roboto, Helvetica;
  text-decoration: none;
  color: rgba(250, 250, 250, 1);
  margin-bottom: 0;
  padding: 0;
}

p {
  color: white;
  margin-top: 0;
  font-family: Roboto, sans;
}

h3 .tit-h3:hover {
  opacity: 0.8;
}

.planet {
  border: 1px solid rgba(100, 100, 100, 1);
  width: 20px;
  height: 20px;
  position: relative;
  margin: 20px 10px;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1);
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1);
  transition: all 200ms ease-in;
  transform: scale(1);
  border-radius: 50%;
  opacity: 0.8;
  margin-bottom: 100px;
}

.planet:hover {
  box-shadow: 0px 0px 150px #000000;
  z-index: 2;
  border-radius: 50%;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1.5);
  -ms-transition: all 100ms ease-in;
  -ms-transform: scale(1);
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1.5);
  transition: all 200ms ease-in;
  transform: scale(1.5);
  opacity: 1;
}

#sun {
  width: 1000px;
  height: 1000px;
  margin-top: 100px;
  background-color: #fdb813;
}

#mercury {
  width: 4.879px;
  height: 4.879px;
  margin-top: 5800px;
  background-color: #e6e6e6;
}

#venus {
  width: 24px;
  height: 24px;
  margin-top: 5000px;
  background-color: #a57c1b;
}

#earth {
  width: 26px;
  height: 26px;
  margin-top: 4200px;
  background-color: #28726e;
}

#mars {
  width: 12px;
  height: 12px;
  margin-top: 7800px;
  background-color: #c41f0d;
}

#jupiter {
  width: 286px;
  height: 286px;
  margin-top: 55000px;
  background-color: #d8ca9d;
}

#saturn {
  width: 240px;
  height: 240px;
  margin-top: 66500px;
  background-color: #e3e0c0;
}

#uranus {
  width: 100px;
  height: 100px;
  margin-top: 143800px;
  background-color: #d1e7e7;
}

#neptune {
  width: 98px;
  height: 98px;
  margin-top: 162400px;
  background-color: #44667f;
}

/*
CSS To Do :
  - Create class 'orbit'
  - Fixed CSS Animation
  - Create Planet and Orbit Animation
*/