FILMS TABLE 2013

<!DOCTYPE html>

<!---------------

        FILMS TABLE 2013 by CREMATA

        Rules and Regulations:
        #1: Please DO NOT commit thievery and steal this theme/page. I've  worked hard on in so I'd appreciate if you didn't.

        #2: DO NOT redistribute this theme/page,

        #3: You can customize to your liking, just make sure that your theme/page is readable and credible for your viewers.

        CREDITS: Majority of the code (including the transitions) goes to Tympanus.net! They are so awesome for giving out free coding resources for web designers!

        ---------------->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>{Title}</title>

    <meta charset="utf-8">

    <meta name="description" content="{MetaDescription}" />

    <link rel="shortcut icon" href="{Favicon}" />
    <link rel="alternate" type="application/rss+xml" href="{RSS}"/>

<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>

<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>

<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>

<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Loading Effects for Grid Items | Link 2</title>
		<meta name="description" content="Loading Effects for Grid Items with CSS Animations" />
		<meta name="keywords" content="css animation, loading effect, google plus, grid items, masonry" />
		<meta name="author" content="Codrops" />
		<link rel="shortcut icon" href="../favicon.ico">
		<link rel="stylesheet" type="text/css" href="css/default.css" />
		<link rel="stylesheet" type="text/css" href="css/component.css" />
		<script src="http://static.tumblr.com/kamm2qy/sOjmqe6pq/modernizr.custom.js"></script>
		<script src="http://static.tumblr.com/kamm2qy/9Eomqe6ow/masonry.pkgd.min.js"></script>
		<script src="http://static.tumblr.com/kamm2qy/rfBmqe6o7/imagesloaded.js"></script>
		<script src="http://static.tumblr.com/kamm2qy/1nVmqe6ns/classie.js"></script>
		<script src="http://static.tumblr.com/kamm2qy/T9qmqe6mj/animonscroll.js"></script>
		<script>
			new AnimOnScroll( document.getElementById( 'grid' ), {
				minDuration : 0.4,
				maxDuration : 0.7,
				viewportFactor : 0.2
			} );
		</script>


</head>
<style type="text/css">

/* General Link Style */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

@font-face {
	font-family: 'codropsicons';
	src:url('../fonts/codropsicons/codropsicons.eot');
	src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
		url('../fonts/codropsicons/codropsicons.woff') format('woff'),
		url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
		url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
	font-weight: normal;
	font-style: normal;
}

::-webkit-scrollbar-thumb:vertical {
    height:10px;
    background-color: #EEE; }

::-webkit-scrollbar-thumb:horizontal {
    height:30px;
    background-color: #EEE; }

::-webkit-scrollbar {
    height: 10px;
    width: 7px;
    border-radius: 7px;
    background-color: transparent; }

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { font-size: 100%; padding: 0; margin: 0;}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

body {
	font-family: 'Lato', Calibri, Arial, sans-serif;
	color: #6b7381;
	background: #f2f2f2; <!-- BACKGROUND COLOR -->
}

a {
	color: #aaa; <!-- LINKS COLOR -->
	text-decoration: none;
}

a:hover,
a:active {
	color: #333; <!-- LINKS HOVER -->
}

.container > header {
	margin: 0 auto;
	padding: 2em;
}

.container > header {
	text-align: center;
	background: #202020; <!-- HEADER BACKGROUND -->
}

.container > header h1 {
	font-size: 2.625em;
	line-height: 1.3;
	margin: 0;
	font-family: Montserrat;
	font-weight: 300;
	color: #0195ab; <!-- TITLE COLOR -->
}

.container > header span {
	display: block;
	font-size: 60%;
	opacity: 0.8;
	font-family: lato;
	padding: 0 0 0.6em 0.1em;
}

.grid {
	max-width: 69em;
	list-style: none;
	margin: 30px auto;
	padding: 0;
	margin-top: 100px;
}

.grid li {
	display: block;
	float: left;
	padding: 7px;
	width: 33%;
	opacity: 0;
}

.grid li.shown,
.no-js .grid li,
.no-cssanimations .grid li {
	opacity: 1;
}

.grid li a,
.grid li img {
	outline: none;
	border: none;
	display: block;
	width: 350px;
	height: 350px;

}

.grid.effect-3 li.animate {
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	transform: scale(0.6);
	-webkit-animation: scaleUp 0.65s ease-in-out forwards;
	-moz-animation: scaleUp 0.65s ease-in-out forwards;
	animation: scaleUp 0.65s ease-in-out forwards;
}

@-webkit-keyframes scaleUp {
	to { -webkit-transform: scale(1); opacity: 1; }
}

@-moz-keyframes scaleUp {
	to { -moz-transform: scale(1); opacity: 1; }
}

@keyframes scaleUp {
	to { transform: scale(1); opacity: 1; }
}

	/* START INFO CODE */

.box {
	position: absolute;
	width: 350px;
	height: 350px;
	overflow: auto;
	background-color: #202020;
	opacity: 0;
	display: table;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

.box:hover {
	opacity:0.7;
	height: 350px;
}

.box:hover .desc {
	opacity: 1;
}


.title {
	vertical-align: middle;
	display: table;
	text-align:center;
	font-family: Montserrat;
	font-size: 16px;
	color: #FFF;
	text-transform: uppercase;
	font-style: underline;
	width: 330px;
	padding: 5px 10px;
	padding-top: 20px;
	max-height: 65px;
	margin: auto;
	border-bottom: 2px solid #AAA;

}

.desc {
	display: table;
	width: 310px;
	padding: 0px 20px;
	display: block;
	color: #EEEEEE;
	font-family: cambria;
	font-size: 10px;
	text-align: center;
	vertical-align: middle;
	margin: auto;
	height: 200px;
	overflow: auto;
	text-align: justify;
	font-style: italic;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

.rating {
	margin-top: -50px;
	display: block;
	margin: auto;
	height: 10px;
	margin-bottom: 10px;
	color: #FFF;
	text-align: center;
	margin-bottom: 25px;
	font-family: cambria;
	font-size: 12px;
	font-style: italic;
}

#header {
	width: 100%;
	position: fixed;
	padding: 40px;
	background-color: #202020;
	display: inline-block;
	position: absolute;
}

.links a {
	margin: 10px;
	font-family: Montserrat;
	font-size: 14px;
	text-transform: uppercase;
}


</style>
<body>
<div class="container">
<header>
				<h1>Films Table 2013 <span>combined with Grid Animation</span></h1>
				<div class="links">
					<a href="/">Back</a>
					<a href="http://tumblr.com/dashboard">Home</a>
					<a href="http://cremata.tumblr.com">Credit</a>
				</div>
			</header>

	<ul class="grid effect-3" id="grid">

	<!-- START BOX -->
		<li>
		<div class="box">
			<div class="title">Insidious (2010)</div><br>
			<div class="rating">date watched: january 3rd<br>
				<!-- STARS & HALF -->&#x2606;&#x2606;&#x2606;&#x2606;&#xbd;
			</div>
				<div class="desc">
				Saw franchise veterans James Wan and Leigh Whannell team with Paranormal Activity writer/director Oren Peli to give the familiar haunted house story an exciting new twist with this tale of a family that moves into an old house and begins to suspect they are under siege from otherworldly forces when their young son inexplicably falls into a deep coma. As devoted parents Josh (Patrick Wilson) and Renai (Rose Byrne) struggle in vain to uncover the root cause of their son's condition, the stress of the situation gradually begins to take its toll on their once-strong relationship. Later, when darkness falls and specters appear to reach out for them from the shadows, the frightened parents realize they're dealing with powers beyond human comprehension. Josh (Patrick Wilson) and Renai (Rose Byrne) struggle in vain to uncover the root cause of their son's condition, the stress of the situation gradually begins to take its toll on their once-strong relationship. Later, when darkness falls and specters appear to reach out for them from the shadows, the frightened parents realize they're dealing with powers beyond human comprehension.
				</div>
			</div>
				<!-- MOVIE IMG --><img src="http://static.tumblr.com/kamm2qy/duHmqectx/insidious_01.jpg">
		</li>

	<!-- END BOX -->

	<!-- START BOX -->
		<li>
		<div class="box">
			<div class="title">Pacific Rim (2013)</div><br>
			<div class="rating">date watched: january 8th<br>
				<!-- STARS & HALF -->&#x2606;&#x2606;&#x2606;
			</div>
				<div class="desc">
				When legions of monstrous creatures, known as Kaiju, started rising from the sea, a war began that would take millions of lives and consume humanity's resources for years on end. To combat the giant Kaiju, a special type of weapon was devised: massive robots, called Jaegers, which are controlled simultaneously by two pilots whose minds are locked in a neural bridge. But even the Jaegers are proving nearly defenseless in the face of the relentless Kaiju. On the verge of defeat, the forces defending mankind have no choice but to turn to two unlikely heroes - a washed up former pilot (Charlie Hunnam) and an untested trainee (Rinko Kikuchi) - who are teamed to drive a legendary but seemingly obsolete Jaeger from the past. Together, they stand as mankind's last hope against the mounting apocalypse.
				</div>
			</div>
				<!-- MOVIE IMG --><img src="http://static.tumblr.com/kamm2qy/a9Fmqecv4/pacific-rim-2013-movie-scene-pictures-hd-1024x576.jpg">
		</li>

	<!-- END BOX -->

<!-- START BOX -->
		<li>
		<div class="box">
			<div class="title">The Hunger Games (2012)</div><br>
			<div class="rating">date watched: january 13th<br>
				<!-- STARS & HALF -->&#x2606;&#x2606;&#x2606;&#x2606;&#xbd;
			</div>
				<div class="desc">
				In a dystopian future, the totalitarian nation of Panem is divided between 12 districts and the Capitol. Each year two young representatives from each district are selected by lottery to participate in The Hunger Games. Part entertainment, part brutal retribution for a past rebellion, the televised games are broadcast throughout Panem. The 24 participants are forced to eliminate their competitors while the citizens of Panem are required to watch. When 16-year-old Katniss's young sister, Prim, is selected as District 12's female representative, Katniss volunteers to take her place. She and her male counterpart Peeta, are pitted against bigger, stronger representatives, some of whom have trained for this their whole lives.
				</div>
			</div>
				<!-- MOVIE IMG --><img src="http://static.tumblr.com/kamm2qy/sj8mqecwd/hungergames1.jpg">
		</li>

	<!-- END BOX -->

	<!-- START BOX -->
		<li>
		<div class="box">
			<div class="title">Alice In Wonderland (2010)</div><br>
			<div class="rating">date watched: january 15th<br>
				<!-- STARS & HALF -->&#x2606;&#x2606;&#x2606;&#x2606;&#xbd;
			</div>
				<div class="desc">
				Alice, an unpretentious and individual 19-year-old, is betrothed to a dunce of an English nobleman. At her engagement party, she escapes the crowd to consider whether to go through with the marriage and falls down a hole in the garden after spotting an unusual rabbit. Arriving in a strange and surreal place called "Underland," she finds herself in a world that resembles the nightmares she had as a child, filled with talking animals, villainous queens and knights, and frumious bandersnatches. Alice realizes that she is there for a reason--to conquer the horrific Jabberwocky and restore the rightful queen to her throne.
				</div>
			</div>
				<!-- MOVIE IMG --><img src="http://static.tumblr.com/kamm2qy/mV8mqecxd/flowers-scene-alice-in-wonderland-2010.jpg">
		</li>

	<!-- END BOX -->

	<!-- START BOX -->
		<li>
		<div class="box">
			<div class="title">MOVIE TITLE HERE</div><br>
			<div class="rating">DATE WATCHED HERE<br>
				<!-- STARS & HALF -->&#x2606;&#x2606;&#x2606;&#x2606;&#xbd; // RATING HERE
			</div>
				<div class="desc">
				DESCRIPTION HERE
				</div>
			</div>
				<!-- MOVIE IMG --><img src="IMAGEURL-350X350">
		</li>

	<!-- END BOX -->

	<!-- START BOX -->
		<li>
		<div class="box">
			<div class="title">MOVIE TITLE HERE</div><br>
			<div class="rating">DATE WATCHED HERE<br>
				<!-- STARS & HALF -->&#x2606;&#x2606;&#x2606;&#x2606;&#xbd; // RATING HERE
			</div>
				<div class="desc">
				DESCRIPTION HERE
				</div>
			</div>
				<!-- MOVIE IMG --><img src="IMAGEURL-350X350">
		</li>

	<!-- END BOX -->


	<!---- PASTE ADDITIONAL BOXES ON THIS SPACE STARTING FROM "START BOX" TO "END BOX" ---->


			</ul>

		<script src="js/masonry.pkgd.min.js"></script>
		<script src="js/imagesloaded.js"></script>
		<script src="js/classie.js"></script>
		<script src="js/AnimOnScroll.js"></script>
		<script>
			new AnimOnScroll( document.getElementById( 'grid' ), {
				minDuration : 0.4,
				maxDuration : 0.7,
				viewportFactor : 0.2
			} );
		</script>
	</body>
</html>