S P A C E

Nice little space infographic I made. Quite a bit of work went into this, it was fun!

by Giorgio Malvone

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<script src="http://www.thomasjwpayne.com/tjwp/wp-content/themes/tjwp_v2/js/scrollto/jquery-1.6.1.min.js&quot;"></script>
<title>S P A C E</title>
<div id="container"> 
    <div id="contact"><a target="_blank"href="http://hexapodscorner.blogspot.co.uk">Giorgio Malvone</a> </div>
    <div class="info" id="zeroth">SPACE
        <div class="otherText"><span class="small"><em>"Man must rise above the Earth – to the top of the atmosphere and beyond – for only thus 
            will he fully understand the world in which he lives."</em><br/> - Socrates
</span></div>
        <div id="music">Listen to some music while you read the facts?<iframe width="400" height="23" src="//www.youtube.com/embed/axsXT1Dp7T4?theme=light&loop=1&allowfullscreen=false" frameborder="0" allowfullscreen></iframe></div>
    
    </div>
    <div class="info" id="first">There are currently ≈7,200,000,000<br/>people living on Earth.<img id="secondimg" draggable="false" src="http://frpic.com/vectors/earth-vector/earth-vector-3.png" /> </div>
    <div class="info" id="second">Only 536 humans have ever left Earth.<br/> <span class="small">That's only 0.00000744444% of the entire world population.</span></div>
    <div class="info" id="third">Only 3 human beings have ever died outside Earth.<br/><div class="icon"> <i class="fa fa-male"></i><i class="fa fa-male"></i><i class="fa fa-male"></i></div><span class="small">In just 2 seconds, more people die on Earth than have ever died in space.</span></div>
    <div id="fourth" class="info"> A NASA spacesuit costs a total of $12,000,000.<br/>
        <div class="icon" id="dollar"> <i class="fa fa-usd"></i><i class="fa fa-usd"></i><i class="fa fa-usd"></i></div><span class="small">That's enough for 432900 Big Macs.</span>
    </div>
    <div class="info" id="fifth">It took 76 hours for the Apollo 11 astronauts to reach the Moon.<br/>
                <div...

CSS

body{
    background-color:#000000;
}
#contact{
    position:fixed;
    bottom:0;
    right:0;
    letter-spacing:normal;
    line-height:25px;
    z-index:3;
    color:#FFFFFF;
    font-family: 'Open Sans Condensed', sans-serif;
    text-decoration:none;
}
.otherText{
    margin:2% auto 0 auto;
    width:60%;
    line-height:22.5%;
    opacity:0.7;
     text-shadow: 1px 1px 1px #000, 3px 3px 5px #7f8c8d;
}
a{
    color:#FFFFFF;
}
::selection {
  color: white;
  background: grey;
  text-shadow: 1px 2px 3px rgba(0,0,0,0.2);
}
::-moz-selection {
  color: white;
  background: grey;
  text-shadow: 1px 2px 3px rgba(0,0,0,0.2);
}
body{
    overflow-y: auto
}
#container{
     position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    display:table-cell;
    vertical-align:middle;
}
#container:hover{
    cursor:pointer;
}
iframe:hover{
    cursor:default;
}
#zeroth{
    background-color:#000000;
    background-repeat:no-repeat;
background-attachment:fixed;
background-position:center; 
    letter-spacing:15px;
    background-image:url(http://upload.wikimedia.org/wikipedia/commons/7/71/Earth_from_Apollo_8_-_GPN-2000-001489.jpg);
    background-size:100%;
}
iframe{
    display:block;
}
#music{
    position:absolute;
    bottom:0;
    left:0;
    letter-spacing:normal;
    line-height:25px;
    font-size:20%;
}
#first{
    background-color:#3498db;
    position:relative; 
    
}
#second{
    background-color:#2c3e50;
    background-image:
        radial-gradient(white, rgba(255,255,255,.2) 2px,
        transparent 40px),
        radial-gradient(white, rgba(255,255,255,.15) 1px,
        transparent 30px),
        radial-gradient(white, rgba(255,255,255,.1) 2px,
        transparent 40px),
        radial-gradient(rgba(255,255,255,.4),
        rgba(255,255,255,.1) 2px, transparent 30px);
background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px; 
background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
    z-index:1;
    position:relative;
}
#secondimg{
   ...

JavaScript

WebFontConfig = {
    google: { families: [ 'Open+Sans+Condensed:300:latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();
$(document).ready(function() {


    
    
// get initial nav height
		var $window = $(window);
		var wst = $window.scrollTop();
		var th = $('div.top').height();
		var images_top = 0;
		
		$('div.scroll_images').css({ height: 'auto', overflow: 'visible', top: 0 });
		$('div.scroll_images div.inner').css({ position: 'absolute', top: 0 });
		$('div.intro').each(function() {
				$(this).css('padding',function() {
				return (($(window).height()-$(this).height())/2)+'px 0'
			});
		});


					
			// scrollto for click on slide
			jQuery.fn.scrollTo = function(hash) {
				$this = $(this);
				st = $this.offset().top - th; // subtract nav height
				$('html, body').animate({ scrollTop: st }, 550
				);
			}
		
			$('div.info').click(function(e){
				e.preventDefault();
				$this = $(this);
				$next = $this.next('div.info');
				if($next.length) {
					$next.scrollTo($next.attr('id'));
				} else {
					$('div.slide:first').scrollTo($('div.info:first').attr('id'));
				}
				$(".info a").click(function(e) {
        		e.stopPropagation();
   				});
			})
			
			

});
function hideURLbar() {
	if (window.location.hash.indexOf('#') == -1) {
		window.scrollTo(0, 1);
	}
}

if (navigator.userAgent.indexOf('iPhone') != -1 || navigator.userAgent.indexOf('Android') != -1) {
    addEventListener("load", function() {
            setTimeout(hideURLbar, 0);
    }, false);
}