CodePen Embed - Sun, earth and code

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

<body>  
  <div class="container-fluid text-center">
       
    <div class="row"> <!-- for title
      <h1>  Title goes here </h1>
      -->
    </div> <!-- end title -->
    
    
    
    <!-- MAIN -->
    <div class="row"> <!-- for main -->
      <!-- Right below is an image of the sun -->
        <img class="responsive-img" id="sun" src="http://orig02.deviantart.net/5786/f/2013/025/7/1/free_sun_stock_image_by_lyra_elante-d5spggh.png" alt="this is a sun">
        
        <!-- Insert the 'earth' on the next line -->
        <div id='earth-orbit'>
            <img id="earth" src="http://img11.deviantart.net/8762/i/2014/247/3/2/earth___europe_by_mystica_264-d7xwrs5.png" alt="this is the earth">
        </div> 
      
      <!-- Insert 'jupiter' on the next line -->
      <div id='jupiter-orbit'>
        <img id="jupiter"
        src="https://2.bp.blogspot.com/-grGCMQsVb5U/UJurAJLCJhI/AAAAAAAAABc/iXmLFh-PVdw/s1600/planet-jupiter-large.gif" alt="this is the jupiter planet">
      </div>
      
      <!-- -->
      <div id='mars-orbit'>
        <img id="mars"   src="http://img3.wikia.nocookie.net/__cb20130916161813/factfinder/images/c/c5/Mars-1-.png">
      </div>


      
        
    
      <!-- Look α spacecraft!-->
      <div id=''>
        <img id="spacecraft"            src="https://upload.wikimedia.org/wikipedia/commons/9/94/Rosetta_spacecraft_(transparent_bg).png" alt="this is α spacecraft">
      </div>
     
          
      <!--The astronaut is moving -->
      <div id="container">
        <div class='a'><img class="random-astro"
             src="http://www.immediateentourage.com/ie/wp-content/uploads/2011/10/Astronaut+by+NASA+cropped+by+Immediate+Entourage2.png" alt="this is an astronaut-1"></div>
        <div class='b'><img class="random-astro"
             src="http://www.clipartqueen.com/image-files/astronaut.png" alt="this is an astronaut-2"></div>
        <div class='c'><img class="random-astro"
             src="http://www.clipartqueen.com/image-files/astronaut.png" alt="this is an astronaut-3"></div>
      </div>
      
      
    </div> <!-- end main -->
    
    
    
    <!-- FOOTER -->
    <div class="row text-center"> <!-- for footer -->
      <h5><a href="http://www.eleftheriabatsou.com" target="_blank">Eleftheria </a> | <a href="https://codepen.io/EleftheriaBatsou" target="_blank">Projects</a> | <a href="https://www.youtube.com/channel/UCC-WwYv3DEW7Nkm_IP6VeQQ" target="_blank"> Coding videos </a></h5>
    </div> <!-- end footer -->
  
  </div> <!-- end class container-fluid --> 
</body>


a:link    {color:#B24900;  text-decoration:none}
a:visited {color:#B24900; text-decoration:none}
a:hover   {color:#FF8633; text-decoration:underline} /* Yellow */

/* ----------------------------- */
html, body {
    /* The universe takes up all available space */
    width: 100%;
    height: 100%;
    
    background-image: url("https://static.pexels.com/photos/110854/pexels-photo-110854-medium.jpeg");
  
   /* image in the container */
   background-size: contain;
   background-attachment: fixed;
    /* The universe is black */
    background-color: black;  
}

#sun {
    position: absolute;
    /* Positions the top-left corner of the image to be *
    /* in the middle of the box */
    top: 50%;
    left: 50%;
    
    /* Play with these numbers to see what it does */
    height: 400px;
    width: 400px;
    margin-top: -230px; 
    margin-left: -200px;
    
  
}

#earth {
    /* Style my earth */
    position: absolute;
    top: 0;
    left: 50%;

    height: 40px;
    width: 40px;
    margin-left: -25px;
    margin-top: -25px;
}

#earth-orbit {
    position: absolute;
    /* make a centered circle*/
    top: 50%;
    left: 50%;
    
    /* how small/big the movement is going to be*/
    width: 320px;
    height: 320px;
    margin-top: -180px;
    margin-left: -160px;

    /* draw a circle 
    border-width: 2px;   
    border-style: dotted;
    border-color: red; 
    border-radius: 50%;
    */
    
    /* It will rotate my orbit 360 degrees continuously. */
     -webkit-animation: spin-right 10s linear infinite;
     -moz-animation: spin-right 10s linear infinite;
      -ms-animation: spin-right 10s linear infinite;
       -o-animation: spin-right 10s linear infinite;
          animation: spin-right 10s linear infinite;

}


/* ******************* | jupiter | ********************* */

#jupiter{
  width: 70px;
  height: 70px;  
}

#jupiter-orbit{
  position: absolute;
    /* make a centered circle*/
    top: 50%;
    left: 50%;
    
    /* how small/big the movement is going to be*/
    width: 600px;
    height: 600px;
    margin-top: -300px;
    margin-left: -290px;

    /* draw a circle 
    border-width: 2px;   
    border-style: dotted;
    border-color: red; 
    border-radius: 50%;
    */
    
    /* It will rotate my orbit 360 degrees continuously. */
     -webkit-animation: spin-right 12s linear infinite;
     -moz-animation: spin-right 12s linear infinite;
      -ms-animation: spin-right 12s linear infinite;
       -o-animation: spin-right 12s linear infinite;
          animation: spin-right 12s linear infinite;
  
}

/* ******************* | mars | ********************* */

#mars{
  width: 25px;
  height: 25px;  
}

#mars-orbit{
  position: absolute;
    /* make a centered circle*/
    top: 50%;
    left: 50%;
    
    /* how small/big the movement is going to be*/
    width: 450px;
    height: 450px;
    margin-top: -230px;
    margin-left: -230px;

    /* draw a circle 
    border-width: 2px;   
    border-style: dotted;
    border-color: green; 
    border-radius: 50%;
    */
    
    /* It will rotate my orbit 360 degrees continuously. */
     -webkit-animation: spin-right 8s linear infinite;
     -moz-animation: spin-right 8s linear infinite;
      -ms-animation: spin-right 8s linear infinite;
       -o-animation: spin-right 8s linear infinite;
          animation: spin-right 8s linear infinite;
  
}

/* ******************** | spinning | ********************** */
/*custom css animation for spinning */
@-webkit-keyframes spin-right {
  100% {
    -webkit-transform: rotate(360deg);
       -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
         -o-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spin-right {
  100% {
    -webkit-transform: rotate(360deg);
       -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
         -o-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

/* ************* | spacecraft | **************** */
#spacecraft{
  width: 420px;
  height: 200px;
  
  margin-top: -60px;
  margin-left: 40%;
  
  /*in order to bounce */ 
  -webkit-animation: bounce 2s infinite ease-in-out;  
}

/* spacecraft bouncing*/
@-webkit-keyframes bounce {
  0%, 20%, 60%, 100%  { -webkit-transform: translateY(0); }
  40%  { -webkit-transform: translateY(-20px); }
  80% { -webkit-transform: translateY(-10px); }
  }


/* **************** | astronaut | **************** */
.random-astro{
  width: 30px;
  height: 50px;
}

div#container {height:500px;width:100%;}

div.a , .b, .c{
  position:fixed;    
}

/* 
js code for the astronauts inspired by: http://jsfiddle.net/j2PAb/
*/

$(document).ready(function() {
    animateDiv($('.a'));
    animateDiv($('.b'));
    animateDiv($('.c'));
});

function makeNewPosition($container) {

    // Get viewport dimensions (remove the dimension of the div)
    var h = $container.height() - 20;
    var w = $container.width() - 20;

    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);

    return [nh, nw];

}

function animateDiv($target) {
    var newq = makeNewPosition($target.parent());
    var oldq = $target.offset();
    var speed = calcSpeed([oldq.top, oldq.left], newq);

    $target.animate({
        top: newq[0],
        left: newq[1]
    }, speed, function() {
        animateDiv($target);
    });
};

function calcSpeed(prev, next) {
    var x = Math.abs(prev[1] - next[1]);
    var y = Math.abs(prev[0] - next[0]);

    var greatest = x > y ? x : y;
    var speedModifier = 0.1;
    var speed = Math.ceil(greatest / speedModifier);

    return speed;
}

This Pen is owned by Eleftheria Batsou on CodePen.

See more by @EleftheriaBatsou on CodePen

External CSS

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css

External JavaScript

//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js