A CodePen by Fakhrizal. Exercise Comming Soon With CSS3 - Thats it!

index.html

<div id="gnfDemoHolder">
  <a href="/" id="gnfLogo">goodnews</a>
  <div id="spinmov"></div>
</div>
 <div class="film">
 	<span style="font-size: 80px">a</span><span style="font-size: 200px; color: #353230">film</span> <span style="font-size: 80px">production</span>
 	<span style="display:block; margin-top:5px; font-size: 140px">coming soon</span>
 </div>

style.css

@font-face {
    font-family: 'sf_movie_poster_condensedRg';
    src: url('http://goodnewsfilm.net/font/sf_movie_poster_condensed.eot');
    src: url('http://goodnewsfilm.net/font/sf_movie_poster_condensed.eot?#iefix') format('embedded-opentype'),
         url('http://goodnewsfilm.net/font/sf_movie_poster_condensed.woff') format('woff'),
         url('http://goodnewsfilm.net/font/sf_movie_poster_condensed.ttf') format('truetype'),
         url('http://goodnewsfilm.net/font/sf_movie_poster_condensed.svg#sf_movie_poster_condensedRg') format('svg');
    font-weight: normal;
    font-style: normal;

}
	
		@-webkit-keyframes spin {
			from {
				-webkit-transform: rotate(0deg);
			}
			to {
				-webkit-transform: rotate(360deg);
			}
		}
		
		@-moz-keyframes spin {
			from {
				-moz-transform: rotate(0deg);
			}
			to {
				-moz-transform: rotate(360deg);
			}
		}
		
		@-ms-keyframes spin {
			from {
				-ms-transform: rotate(0deg);
			}
			to {
				-ms-transform: rotate(360deg);
			}
		}

		body {
			background: #457be8;
			font-family: 'sf_movie_poster_condensedRg';
		}
		
		#gnfDemoHolder	{ 
			position: relative; 
			width: 1000px; 
			height: 235px; 
			margin: 100px auto 0; 
		}
		#gnfLogo { 
			width: 1000px; 
			height: 233px; 
			text-indent: -3000px; 
			background: url(http://goodnewsfilm.net/Goodnews-banner1.jpg) 0 0 no-repeat; 
			display: block; 
			position: absolute; 
			top: 0; 
			left: 0; 
			z-index: 1; 
		}
		#spinmov	{ 
			background: url(http://goodnewsfilm.net/spin.png) 0 0 no-repeat; 
			position: absolute; 
			top: 79px; 
			left: 171px; 
			width: 116px; 
			height: 116px; 
			z-index: 2;
			-webkit-animation-name: spin; 
			-webkit-animation-duration: 40000ms; /* 40 seconds */
			-webkit-animation-iteration-count: infinite; 
			-webkit-animation-timing-function: linear;
			
			-moz-animation-name: spin; 
			-moz-animation-duration: 40000ms; /* 40 seconds */
			-moz-animation-iteration-count: infinite; 
			-moz-animation-timing-function: linear;
			
			-ms-animation-name: spin; 
			-ms-animation-duration: 40000ms; /* 40 seconds */
			-ms-animation-iteration-count: infinite; 
			-ms-animation-timing-function: linear;
			
			/* boooo opera */
			-o-transition: rotate(3600deg); /* works */
		}
		
		#spinmov:hover {
			/* -webkit-animation-duration: 10000ms; 10 seconds - speed it up on hover! */
		}

		div.film {
			color: #91b4fb;
			
			width: 1000px;
			margin: 0 auto;
			padding: 0px 175px 0 0;
			text-align: right;
			font-weight: 400;
			z-index: 3;

		}