<!DOCTYPE HTML>
<!--
Dopetrope 1.0
-->
<html>
<head>
<title>Dopetrope </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,900,300italic" rel="stylesheet" />
<script src="js/jquery-1.8.3.min.js"></script>
<script src="css/5grid/init.js?use=mobile,desktop,1000px&mobileUI=1&mobileUI.theme=none&mobileUI.titleBarOverlaid=1&viewport_is1000px=1060"></script>
<script src="js/jquery.dropotron-1.2.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/5grid/core.css" />
<link rel="stylesheet" href="css/5grid/core-desktop.css" />
<link rel="stylesheet" href="css/5grid/core-1200px.css" />
<link rel="stylesheet" href="css/5grid/core-noscript.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-desktop.css" />
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie8.css" /><![endif]-->
</head>
<body class="homepage">
<!-- Header Wrapper -->
<div id="header-wrapper">
<div class="5grid-layout">
<div class="row">
<div class="12u">
<!-- Header -->
<section id="header">
<!-- Logo -->
<h1><a href="#">Dopetrope</a></h1>
<!-- Nav -->
<nav id="nav" class="mobileUI-site-nav">
<ul>
<li class="current_page_item"><a href="index.html">Home</a></li>
<li>
<a href="">Dropdown</a>
<ul>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Magna phasellus</a></li>
<li><a href="#">Etiam dolore nisl</a></li>
<li>
<span>Phasellus consequat</span>
<ul>
<li><a href="#">Magna phasellus</a></li>
<li><a href="#">Etiam dolore nisl</a></li>
<li><a href="#">Veroeros feugiat</a></li>
</ul>
</li>
<li><a href="#">Veroeros feugiat</a></li>
</ul>
</li>
<li><a href="right-sidebar.html">Right Sidebar</a></li>
<li><a href="left-sidebar.html">Left Sidebar</a></li>
<li><a href="no-sidebar.html">No Sidebar</a></li>
</ul>
</nav>
</section>
</div>
</div>
<div class="row">
<div class="12u">
<!-- Banner -->
<section id="banner">
<a href="http://facebook.com/DreametryDoodle">
<span class="image image-full"><img src="images/pic01.jpg" alt="" /></span>
<header>
<h2>Howdy. This is Dopetrope.</h2>
<span class="byline">A responsive site template </span>
</header>
</a>
</section>
</div>
</div>
<div class="row">
<div class="12u">
<!-- Intro -->
<section id="intro">
<div class="5grid">
<div class="row">
<div class="4u">
<section class="first">
<span class="pennant"><span class="icon64 icon64-1"></span></span>
<header>
<h2>Ipsum consequat</h2>
</header>
<p>Nisl amet dolor sit ipsum veroeros sed blandit consequat veroeros et magna tempus.</p>
</section>
</div>
<div class="4u">
<section class="middle">
<span class="pennant pennant-alt"><span class="icon64 icon64-2"></span></span>
<header>
<h2>Magna etiam dolor</h2>
</header>
<p>Nisl amet dolor sit ipsum veroeros sed blandit consequat veroeros et magna tempus.</p>
</section>
</div>
<div class="4u">
<section class="last">
<span class="pennant pennant-alt2"><span class="icon64 icon64-3"></span></span>
<header>
<h2>Tempus adipiscing</h2>
</header>
<p>Nisl amet dolor sit ipsum veroeros sed blandit consequat veroeros et magna tempus.</p>
</section>
</div>
</div>
</div>
<div class="actions">
<a href="#" class="button button-big">Get Started</a>
<a href="#" class="button button-alt button-big">Learn More</a>
</div>
</section>
</div>
</div>
</div>
</div>
<!-- Main Wrapper -->
<div id="main-wrapper">
<div class="5grid-layout">
<div class="row">
<div class="12u">
<!-- Portfolio -->
<section>
<header class="major">
<h2>My Portfolio</h2>
</header>
<div class="5grid">
<div class="row">
<div class="4u">
<section class="box">
<a href="http://facebook.com/DreametryDoodle" class="image image-full"><img src="images/pic02.jpg" alt="" /></a>
<header>
<h3>Ipsum feugiat et dolor</h3>
</header>
<p>Lorem ipsum dolor sit amet sit veroeros sed amet blandit consequat veroeros lorem blandit adipiscing et feugiat phasellus tempus dolore ipsum lorem dolore.</p>
<footer>
<a href="#" class="button button-alt">Find out more</a>
</footer>
</section>
</div>
<div class="4u">
<section class="box">
<a href="http://facebook.com/DreametryDoodle" class="image image-full"><img src="images/pic03.jpg" alt="" /></a>
<header>
<h3>Sed etiam lorem nulla</h3>
</header>
<p>Lorem ipsum dolor sit amet sit veroeros sed amet blandit consequat veroeros lorem blandit adipiscing et feugiat phasellus tempus dolore ipsum lorem dolore.</p>
<footer>
<a href="#" class="button button-alt">Find out more</a>
</footer>
</section>
</div>
<div class="4u">
<section class="box">
<a href="http://facebook.com/DreametryDoodle" class="image image-full"><img src="images/pic04.jpg" alt="" /></a>
<header>
<h3>Consequat et tempus</h3>
</header>
<p>Lorem ipsum dolor sit amet sit veroeros sed amet blandit consequat veroeros lorem blandit adipiscing et feugiat phasellus tempus dolore ipsum lorem dolore.</p>
<footer>
<a href="#" class="button button-alt">Find out more</a>
</footer>
</section>
</div>
</div>
<div class="row">
<div class="4u">
<section class="box">
<a href="http://facebook.com/DreametryDoodle" class="image image-full"><img src="images/pic05.jpg" alt="" /></a>
<header>
<h3>Blandit sed adipiscing</h3>
</header>
<p>Lorem ipsum dolor sit amet sit veroeros sed amet blandit consequat veroeros lorem blandit adipiscing et feugiat phasellus tempus dolore ipsum lorem dolore.</p>
<footer>
<a href="#" class="button button-alt">Find out more</a>
</footer>
</section>
</div>
<div class="4u">
<section class="box">
<a href="http://facebook.com/DreametryDoodle" class="image image-full"><img src="images/pic06.jpg" alt="" /></a>
<header>
<h3>Etiam nisl consequat</h3>
</header>
<p>Lorem ipsum dolor sit amet sit veroeros sed amet blandit consequat veroeros lorem blandit adipiscing et feugiat pha