ashlynnpai/Hubble-Telescope-Orbits-Earth.markdown

## Hubble-Telescope-Orbits-Earth.markdown

      
    Raw
  

              Hubble-Telescope-Orbits-Earth.markdown
            
          
    Hubble Telescope Orbits Earth

Uses CSS3.
The earth photo GPN-2000-001097 and Hubble 1990-037B are property of NASA and are in the public domain.
A Pen by Ashlynn Pai on CodePen.
License.

  
## index.html
<html>
<head>
	<title>Hubble Telescope Orbits Earth</title>

</head>
<body>
    <div id="hub">
    <img src="http://imageshack.com/a/img843/585/u4nm.png" alt="NASA hubble telescope 1990-037B">
    </div>
     </body>
</html>

## style.css
html {
 background: url("http://imageshack.com/a/img845/7937/lhl3.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#hub {

position: relative;
    -webkit-animation: fly 30s  normal linear;
     -moz-animation: fly 30s  normal linear;
    -o-animation: fly 30s  normal linear;
    animation: fly 30s  normal linear;
}


@-webkit-keyframes fly {
    0% {
        top: 10px; left: 10px;
    }
    100% {
        top: 500px; left: 1980px;
    }
}

@-moz-keyframes fly {
      0% {
        top: 10px; left: 10px;
    }
    100% {
        top: 500px; left: 1980px;
    }
}

@-o-keyframes fly  {
      0% {
        top: 10px; left: 10px;
    }
    100% {
        top: 500px; left: 1980px;
    }
}
@keyframes fly{
  0% {
        top: 10px; left: 10px;
    }
    100% {
        top: 500px; left: 1980px;
    }
}
	<html>
	<head>
	<title>Hubble Telescope Orbits Earth</title>

	</head>
	<body>
	<div id="hub">
	<img src="http://imageshack.com/a/img843/585/u4nm.png" alt="NASA hubble telescope 1990-037B">
	</div>
	</body>
	</html>
	html {
	background: url("http://imageshack.com/a/img845/7937/lhl3.jpg") no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	}

	#hub {

	position: relative;
	-webkit-animation: fly 30s normal linear;
	-moz-animation: fly 30s normal linear;
	-o-animation: fly 30s normal linear;
	animation: fly 30s normal linear;
	}




	@-webkit-keyframes fly {
	0% {
	top: 10px; left: 10px;
	}
	100% {
	top: 500px; left: 1980px;
	}
	}

	@-moz-keyframes fly {
	0% {
	top: 10px; left: 10px;
	}
	100% {
	top: 500px; left: 1980px;
	}
	}

	@-o-keyframes fly {
	0% {
	top: 10px; left: 10px;
	}
	100% {
	top: 500px; left: 1980px;
	}
	}
	@keyframes fly{
	0% {
	top: 10px; left: 10px;
	}
	100% {
	top: 500px; left: 1980px;
	}
	}