File: /home/vmasmheia229/www/_html2012/videocase.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<title>Ikaros</title>
<link rel="shortcut icon" type="image/x-icon" href="style/images/favicon.png" />
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<link rel="stylesheet" type="text/css" href="style/css/media-queries.css" media="all" />
<link rel="stylesheet" type="text/css" href="style/js/fancybox/jquery.fancybox.css" media="all" />
<link rel="stylesheet" type="text/css" href="style/js/fancybox/helpers/jquery.fancybox-buttons.css?v=1.0.2" />
<link rel="stylesheet" type="text/css" href="style/js/fancybox/helpers/jquery.fancybox-thumbs.css?v=1.0.2" />
<link href='http://fonts.googleapis.com/css?family=Ubuntu:700,700italic,300italic,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400italic' rel='stylesheet' type='text/css'>
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="style/css/ie8.css" media="all" />
<![endif]-->
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="style/css/ie9.css" media="all" />
<![endif]-->
<script type="text/javascript" src="style/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="style/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="style/js/jquery.themepunch.revolution.min.js"></script>
<script type="text/javascript" src="style/js/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="style/js/fancybox/helpers/jquery.fancybox-buttons.js?v=1.0.2"></script>
<script type="text/javascript" src="style/js/fancybox/helpers/jquery.fancybox-thumbs.js?v=1.0.2"></script>
<script type="text/javascript" src="style/js/fancybox/helpers/jquery.fancybox-media.js?v=1.0.0"></script>
<script type="text/javascript" src="style/js/ddsmoothmenu.js"></script>
<script type="text/javascript" src="style/js/selectnav.js"></script>
<script type="text/javascript" src="style/js/jquery.easing.1.3.min.js"></script>
<script type="text/javascript" src="style/js/jquery.easytabs.js"></script>
<script type="text/javascript" src="style/js/jquery.isotope.min.js"></script>
<script type="text/javascript" src="style/js/jquery.slickforms.js"></script>
<script type="text/javascript" src="style/js/twitter.min.js"></script>
<script type="text/javascript" src="style/js/jquery.fitvids.js"></script>
<script type="text/javascript" src="style/js/jquery.address-1.4.min.js"></script>
</head>
<body>
<!-- Begin Header -->
<div class="header-wrapper">
<div class="header">
<!-- Begin Logo -->
<div class="logo"> <a href="index.html"><img src="style/images/logo.png" alt="" /></a> </div>
<!-- End Logo -->
<!-- Begin Menu -->
<div id="menu" class="menu">
<ul id="tiny">
<li><a href="index.html">Home</a>
<ul>
<li><a href="index.html">Home Layout 1</a></li>
<li><a href="home2.html">Home Layout 2</a></li>
<li><a href="home3.html">Home Layout 3</a></li>
<li><a href="home4.html">Home Layout 4</a></li>
<li><a href="home5.html">Home Layout 5</a></li>
<li><a href="home6.html">Home Layout 6</a></li>
</ul>
</li>
<li><a href="blog1.html">Blog</a>
<ul>
<li><a href="blog1.html">Grid Layout</a></li>
<li><a href="blog2.html">Classic Layout</a></li>
<li><a href="blog-post.html">Blog Post</a></li>
</ul>
</li>
<li><a href="portfolio1.html">Portfolio</a>
<ul>
<li><a href="portfolio1.html">Classic Portfolio</a></li>
<li><a href="portfolio2.html">Lightbox Portfolio</a></li>
<li><a href="portfolio-post.html">Portfolio Post</a></li>
</ul>
</li>
<li class="active"><a href="videocase.html">Videocase</a></li>
<li><a href="#">Features</a>
<ul>
<li><a href="index.html">Fullwidth Slider</a></li>
<li><a href="slider2.html">Fitwidth Slider</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="icons.html">Icons</a></li>
<li><a href="pricing-table.html">Pricing Table</a></li>
<li><a href="tab-toggle.html">Tabs & Toggle</a></li>
<li><a href="button-box.html">Buttons & Boxes</a></li>
<li><a href="typography.html">Typography</a></li>
<li><a href="columns.html">Columns</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div class="clear"></div>
<!-- End Menu -->
</div>
<div class="header-light"></div>
</div>
<!-- End Header -->
<!-- Begin Wrapper -->
<div class="wrapper">
<!-- Begin Portfolio -->
<h1 class="center">Our Projects</h1>
<div class="intro center">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit.</div>
<!-- The Video Section -->
<div id="videocontainer">
<div class="video">
<iframe src="http://player.vimeo.com/video/24573328?portrait=0" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<h2>Bela: L'Homme Chat</h2>
<p>Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper. Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
</div>
<div class="video">
<iframe src="http://player.vimeo.com/video/24030911?portrait=0" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<h2>Origins</h2>
<p>Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
</div>
<div class="video">
<iframe src="http://player.vimeo.com/video/22589529?portrait=0" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<h2>Sayanora</h2>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod.</p>
</div>
<div class="video">
<iframe src="http://player.vimeo.com/video/6757600?portrait=0" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<h2>Old Fangs</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
</div>
<div class="video">
<iframe src="http://player.vimeo.com/video/25518056?portrait=0" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<h2>Last Know Surroundings</h2>
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor. Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
</div>
<div class="video">
<iframe src="http://player.vimeo.com/video/24243147?portrait=0" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<h2>Beet Cake</h2>
<p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
</div>
<div class="video">
<iframe src="http://player.vimeo.com/video/25019666?portrait=0" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<h2>Cutters</h2>
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<div class="video">
<iframe src="http://player.vimeo.com/video/24496773?portrait=0" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<h2>Seasons</h2>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
<div class="video">
<iframe width="560" height="315" src="http://www.youtube.com/embed/ROipDjNYK4k?rel=0" frameborder="0" allowfullscreen></iframe>
<h2>Alarm</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod.</p>
</div>
</div>
<!-- End The Video Section -->
<!-- Begin Videocase Items -->
<div id="videocase">
<ul class="filter">
<li><a class="active" href="#" data-filter="*">All</a></li>
<li><a href="#" data-filter=".animation">Animation</a></li>
<li><a href="#" data-filter=".cartoon">Cartoon</a></li>
<li><a href="#" data-filter=".independent">Independent</a></li>
</ul>
<ul class="items">
<li class="item independent" data-address="id1">
<a href="#">
<div class="caption">
<h3>Bela: L'Homme Chat</h3>
<span class="meta">Independent</span>
</div>
<img src="style/images/art/v1.jpg" alt="" />
</a>
</li>
<li class="item animation" data-address="id2">
<a href="#">
<div class="caption">
<h3>Origins</h3>
<span class="meta">Animation</span>
</div>
<img src="style/images/art/v2.jpg" alt="" />
</a>
</li>
<li class="item cartoon" data-address="id3">
<a href="#">
<div class="caption">
<h3>Sayanora</h3>
<span class="meta">Cartoon</span>
</div>
<img src="style/images/art/v3.jpg" alt="" />
</a>
</li>
<li class="item cartoon" data-address="id4">
<a href="#">
<div class="caption">
<h3>Old Fangs</h3>
<span class="meta">Cartoon</span>
</div>
<img src="style/images/art/v4.jpg" alt="" />
</a>
</li>
<li class="item cartoon" data-address="id5">
<a href="#">
<div class="caption">
<h3>Last Known Surroundings</h3>
<span class="meta">Cartoon</span>
</div>
<img src="style/images/art/v5.jpg" alt="" />
</a>
</li>
<li class="item independent" data-address="id6">
<a href="#">
<div class="caption">
<h3>Beet Cake</h3>
<span class="meta">Independent</span>
</div>
<img src="style/images/art/v6.jpg" alt="" />
</a>
</li>
<li class="item animation" data-address="id7">
<a href="#">
<div class="caption">
<h3>Cutters</h3>
<span class="meta">Animation</span>
</div>
<img src="style/images/art/v7.jpg" alt="" />
</a>
</li>
<li class="item cartoon" data-address="id8">
<a href="#">
<div class="caption">
<h3>Seasons</h3>
<span class="meta">Cartoon</span>
</div>
<img src="style/images/art/v8.jpg" alt="" />
</a>
</li>
<li class="item animation" data-address="id9">
<a href="#">
<div class="caption">
<h3>Alarm</h3>
<span class="meta">Animation</span>
</div>
<img src="style/images/art/v9.jpg" alt="" />
</a>
</li>
</ul>
</div>
<!-- End Videocase Items -->
</div>
<!-- End Wrapper -->
<!-- Begin Footer -->
<div class="footer-wrapper">
<div class="footer-light"></div>
<div class="footer">
<div class="one-fourth">
<h3>Popular Posts</h3>
<ul class="post-list">
<li>
<h4><a href="#">Vivamus sagittis lacus vel augue laoreet rutrum dolor auctor.</a></h4>
<div class="meta">14 Jun, 2012</div>
</li>
<li>
<h4><a href="#">Scelerisque nisl consectetur et.</a></h4>
<div class="meta">22 May, 2012</div>
</li>
<li>
<h4><a href="#">Pellentesque ornare sem lacinia quam venenatis vestibulum.</a></h4>
<div class="meta">13 Apr, 2012</div>
</li>
</ul>
</div>
<div class="one-fourth">
<h3>Twitter</h3>
<div id="twitter-wrapper">
<div id="twitter"></div>
<span class="username"><a href="http://twitter.com/elemisdesign">→ Follow @elemisdesign</a></span> </div>
</div>
<div class="one-fourth">
<h3>A Little About Me</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
<p>Donec id elit non porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel.</p>
</div>
<div class="one-fourth last">
<h3>Contact Form</h3>
<!-- Begin Form -->
<div class="form-container">
<div class="response"></div>
<form class="forms" action="contact/form-handler.php" method="post">
<fieldset>
<ol>
<li class="form-row text-input-row">
<input type="text" name="name" class="text-input required defaultText" title="Name*"/>
</li>
<li class="form-row text-input-row">
<input type="text" name="email" class="text-input required email defaultText" title="Email*"/>
</li>
<li class="form-row text-area-row">
<textarea name="message" class="text-area required defaultText"></textarea>
</li>
<li class="form-row hidden-row">
<input type="hidden" name="hidden" value="" />
</li>
<li class="button-row">
<input type="submit" value="Submit" name="submit" class="btn-submit" />
</li>
</ol>
<input type="hidden" name="v_error" id="v-error" value="Required" />
<input type="hidden" name="v_email" id="v-email" value="Enter a valid email" />
</fieldset>
</form>
</div>
<!-- End Form -->
</div>
<div class="clear"></div>
</div>
</div>
<!-- End Footer -->
<!-- Begin Site Generator -->
<div class="site-generator-wrapper">
<div class="site-generator">
<div class="copyright">
<p>© 2012 Ikaros. Theme by elemis</p>
</div>
<ul class="social">
<li><a class="rss" href="#"></a></li>
<li><a class="facebook" href="#"></a></li>
<li><a class="twitter" href="#"></a></li>
<li><a class="dribbble" href="#"></a></li>
<li><a class="pinterest" href="#"></a></li>
<li><a class="linkedin" href="#"></a></li>
</ul>
<div class="clear"></div>
</div>
</div>
<!-- End Site Generator -->
<script type="text/javascript" src="style/js/scripts.js"></script>
</body>
</html>