first pass layout/include theme - TODO: fix #current menu, fix landing page header in header.html

This commit is contained in:
Dan Ballard 2018-02-14 23:26:25 -08:00
parent 69484eab3d
commit eda5d1cb91
13 changed files with 667 additions and 1257 deletions

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
_site/*

133
_includes/footer.html Normal file
View File

@ -0,0 +1,133 @@
<!-- Footer -->
<div id="footer-wrapper">
<section id="footer" class="container">
<div class="row">
<div class="8u 12u(mobile)">
<section>
<header>
<h2>Blandit nisl adipiscing</h2>
</header>
<ul class="dates">
<li>
<span class="date">Jan <strong>27</strong></span>
<h3><a href="#">Lorem dolor sit amet veroeros</a></h3>
<p>Ipsum dolor sit amet veroeros consequat blandit ipsum phasellus lorem consequat etiam.</p>
</li>
<li>
<span class="date">Jan <strong>23</strong></span>
<h3><a href="#">Ipsum sed blandit nisl consequat</a></h3>
<p>Blandit phasellus lorem ipsum dolor tempor sapien tortor hendrerit adipiscing feugiat lorem.</p>
</li>
<li>
<span class="date">Jan <strong>15</strong></span>
<h3><a href="#">Magna tempus lorem feugiat</a></h3>
<p>Dolore consequat sed phasellus lorem sed etiam nullam dolor etiam sed amet sit consequat.</p>
</li>
<li>
<span class="date">Jan <strong>12</strong></span>
<h3><a href="#">Dolore tempus ipsum feugiat nulla</a></h3>
<p>Feugiat lorem dolor sed nullam tempus lorem ipsum dolor sit amet nullam consequat.</p>
</li>
<li>
<span class="date">Jan <strong>10</strong></span>
<h3><a href="#">Blandit tempus aliquam?</a></h3>
<p>Feugiat sed tempus blandit tempus adipiscing nisl lorem ipsum dolor sit amet dolore.</p>
</li>
</ul>
</section>
</div>
<div class="4u 12u(mobile)">
<section>
<header>
<h2>What's this all about?</h2>
</header>
<a href="#" class="image featured"><img src="images/pic10.jpg" alt="" /></a>
<p>
This is <strong>Dopetrope</strong> a free, fully responsive HTML5 site template by
<a href="http://twitter.com/ajlkn">AJ</a> for <a href="http://html5up.net/">HTML5 UP</a> It's released for free under
the <a href="http://html5up.net/license/">Creative Commons Attribution</a> license so feel free to use it for any personal or commercial project &ndash; just don't forget to credit us!
</p>
<footer>
<a href="#" class="button">Find out more</a>
</footer>
</section>
</div>
</div>
<div class="row">
<div class="4u 12u(mobile)">
<section>
<header>
<h2>Tempus consequat</h2>
</header>
<ul class="divided">
<li><a href="#">Lorem ipsum dolor sit amet sit veroeros</a></li>
<li><a href="#">Sed et blandit consequat sed tlorem blandit</a></li>
<li><a href="#">Adipiscing feugiat phasellus sed tempus</a></li>
<li><a href="#">Hendrerit tortor vitae mattis tempor sapien</a></li>
<li><a href="#">Sem feugiat sapien id suscipit magna felis nec</a></li>
<li><a href="#">Elit class aptent taciti sociosqu ad litora</a></li>
</ul>
</section>
</div>
<div class="4u 12u(mobile)">
<section>
<header>
<h2>Ipsum et phasellus</h2>
</header>
<ul class="divided">
<li><a href="#">Lorem ipsum dolor sit amet sit veroeros</a></li>
<li><a href="#">Sed et blandit consequat sed tlorem blandit</a></li>
<li><a href="#">Adipiscing feugiat phasellus sed tempus</a></li>
<li><a href="#">Hendrerit tortor vitae mattis tempor sapien</a></li>
<li><a href="#">Sem feugiat sapien id suscipit magna felis nec</a></li>
<li><a href="#">Elit class aptent taciti sociosqu ad litora</a></li>
</ul>
</section>
</div>
<div class="4u 12u(mobile)">
<section>
<header>
<h2>Vitae tempor lorem</h2>
</header>
<ul class="social">
<li><a class="icon fa-facebook" href="#"><span class="label">Facebook</span></a></li>
<li><a class="icon fa-twitter" href="#"><span class="label">Twitter</span></a></li>
<li><a class="icon fa-dribbble" href="#"><span class="label">Dribbble</span></a></li>
<li><a class="icon fa-linkedin" href="#"><span class="label">LinkedIn</span></a></li>
<li><a class="icon fa-google-plus" href="#"><span class="label">Google+</span></a></li>
</ul>
<ul class="contact">
<li>
<h3>Address</h3>
<p>
Untitled Incorporated<br />
1234 Somewhere Road Suite<br />
Nashville, TN 00000-0000
</p>
</li>
<li>
<h3>Mail</h3>
<p><a href="#">someone@untitled.tld</a></p>
</li>
<li>
<h3>Phone</h3>
<p>(800) 000-0000</p>
</li>
</ul>
</section>
</div>
</div>
<div class="row">
<div class="12u">
<!-- Copyright -->
<div id="copyright">
<ul class="links">
<li>&copy; Untitled. All rights reserved.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
</div>
</div>
</div>
</section>
</div>

8
_includes/head.html Normal file
View File

@ -0,0 +1,8 @@
<head>
<title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="assets/css/main.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
</head>

85
_includes/header.html Normal file
View File

@ -0,0 +1,85 @@
<!-- Header -->
<div id="header-wrapper">
<div id="header">
<!-- Logo -->
<h1><a href="index.html">Dopetrope</a></h1>
<!-- Nav -->
<nav id="nav">
<ul>
<li class="current"><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>
<a href="#">Phasellus consequat</a>
<ul>
<li><a href="#">Magna phasellus</a></li>
<li><a href="#">Etiam dolore nisl</a></li>
<li><a href="#">Veroeros feugiat</a></li>
<li><a href="#">Nisl sed aliquam</a></li>
<li><a href="#">Dolore adipiscing</a></li>
</ul>
</li>
<li><a href="#">Veroeros feugiat</a></li>
</ul>
</li>
<li><a href="left-sidebar.html">Left Sidebar</a></li>
<li><a href="right-sidebar.html">Right Sidebar</a></li>
<li><a href="no-sidebar.html">No Sidebar</a></li>
</ul>
</nav>
<!-- Banner -->
<section id="banner">
<header>
<h2>Howdy. This is Dopetrope.</h2>
<p>A responsive template by HTML5 UP</p>
</header>
</section>
<!-- Intro -->
<section id="intro" class="container">
<div class="row">
<div class="4u 12u(mobile)">
<section class="first">
<i class="icon featured fa-cog"></i>
<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 12u(mobile)">
<section class="middle">
<i class="icon featured alt fa-flash"></i>
<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 12u(mobile)">
<section class="last">
<i class="icon featured alt2 fa-star"></i>
<header>
<h2>Tempus adipiscing</h2>
</header>
<p>Nisl amet dolor sit ipsum veroeros sed blandit consequat veroeros et magna tempus.</p>
</section>
</div>
</div>
<footer>
<ul class="actions">
<li><a href="#" class="button big">Get Started</a></li>
<li><a href="#" class="button alt big">Learn More</a></li>
</ul>
</footer>
</section>
</div>
</div>

26
_layouts/dopetrope.html Normal file
View File

@ -0,0 +1,26 @@
<!DOCTYPE HTML>
<!--
Dopetrope by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
{% include head.html %}
<body class="homepage">
<div id="page-wrapper">
{% include header.html %}
{{ content }}
{% include footer.html %}
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.dropotron.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/skel-viewport.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="assets/js/main.js"></script>
</body>
</html>

142
_layouts/landing.html Normal file
View File

@ -0,0 +1,142 @@
---
layout: dopetrope
---
<!-- Main -->
<div id="main-wrapper">
<div class="container">
<div class="row">
<div class="12u">
<!-- Portfolio -->
<section>
<header class="major">
<h2>My Portfolio</h2>
</header>
<div class="row">
<div class="4u 12u(mobile)">
<section class="box">
<a href="#" class="image featured"><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 alt">Find out more</a>
</footer>
</section>
</div>
<div class="4u 12u(mobile)">
<section class="box">
<a href="#" class="image featured"><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 alt">Find out more</a>
</footer>
</section>
</div>
<div class="4u 12u(mobile)">
<section class="box">
<a href="#" class="image featured"><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 alt">Find out more</a>
</footer>
</section>
</div>
</div>
<div class="row">
<div class="4u 12u(mobile)">
<section class="box">
<a href="#" class="image featured"><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 alt">Find out more</a>
</footer>
</section>
</div>
<div class="4u 12u(mobile)">
<section class="box">
<a href="#" class="image featured"><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 phasellus tempus dolore ipsum lorem dolore.</p>
<footer>
<a href="#" class="button alt">Find out more</a>
</footer>
</section>
</div>
<div class="4u 12u(mobile)">
<section class="box">
<a href="#" class="image featured"><img src="images/pic07.jpg" alt="" /></a>
<header>
<h3>Dolore nisl feugiat</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 alt">Find out more</a>
</footer>
</section>
</div>
</div>
</section>
</div>
</div>
<div class="row">
<div class="12u">
<!-- Blog -->
<section>
<header class="major">
<h2>The Blog</h2>
</header>
<div class="row">
<div class="6u 12u(mobile)">
<section class="box">
<a href="#" class="image featured"><img src="images/pic08.jpg" alt="" /></a>
<header>
<h3>Magna tempus consequat lorem</h3>
<p>Posted 45 minutes ago</p>
</header>
<p>Lorem ipsum dolor sit amet sit veroeros sed et blandit consequat sed veroeros lorem et blandit adipiscing feugiat phasellus tempus hendrerit, tortor vitae mattis tempor, sapien sem feugiat sapien, id suscipit magna felis nec elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos lorem ipsum dolor sit amet.</p>
<footer>
<ul class="actions">
<li><a href="#" class="button icon fa-file-text">Continue Reading</a></li>
<li><a href="#" class="button alt icon fa-comment">33 comments</a></li>
</ul>
</footer>
</section>
</div>
<div class="6u 12u(mobile)">
<section class="box">
<a href="#" class="image featured"><img src="images/pic09.jpg" alt="" /></a>
<header>
<h3>Aptent veroeros et aliquam</h3>
<p>Posted 45 minutes ago</p>
</header>
<p>Lorem ipsum dolor sit amet sit veroeros sed et blandit consequat sed veroeros lorem et blandit adipiscing feugiat phasellus tempus hendrerit, tortor vitae mattis tempor, sapien sem feugiat sapien, id suscipit magna felis nec elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos lorem ipsum dolor sit amet.</p>
<footer>
<ul class="actions">
<li><a href="#" class="button icon fa-file-text">Continue Reading</a></li>
<li><a href="#" class="button alt icon fa-comment">33 comments</a></li>
</ul>
</footer>
</section>
</div>
</div>
</section>
</div>
</div>
</div>
</div>

View File

@ -0,0 +1,96 @@
---
layout: dopetrope
---
<!-- Main -->
<div id="main-wrapper">
<div class="container">
<div class="row">
<div class="4u 12u(mobile)">
<!-- Sidebar -->
<section class="box">
<a href="#" class="image featured"><img src="images/pic09.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 alt">Magna sed taciti</a>
</footer>
</section>
<section class="box">
<header>
<h3>Feugiat consequat</h3>
</header>
<p>Veroeros sed amet blandit consequat veroeros lorem blandit adipiscing et feugiat sed lorem consequat feugiat lorem dolore.</p>
<ul class="divided">
<li><a href="#">Sed et blandit consequat sed</a></li>
<li><a href="#">Hendrerit tortor vitae sapien dolore</a></li>
<li><a href="#">Sapien id suscipit magna sed felis</a></li>
<li><a href="#">Aptent taciti sociosqu ad litora</a></li>
</ul>
<footer>
<a href="#" class="button alt">Ipsum consequat</a>
</footer>
</section>
</div>
<div class="8u 12u(mobile) important(mobile)">
<!-- Content -->
<article class="box post">
<a href="#" class="image featured"><img src="images/pic01.jpg" alt="" /></a>
<header>
<h2>Left Sidebar</h2>
<p>Lorem ipsum dolor sit amet feugiat</p>
</header>
<p>
Vestibulum scelerisque ultricies libero id hendrerit. Vivamus malesuada quam faucibus ante dignissim auctor
hendrerit libero placerat. Nulla facilisi. Proin aliquam felis non arcu molestie at accumsan turpis commodo.
Proin elementum, nibh non egestas sodales, augue quam aliquet est, id egestas diam justo adipiscing ante.
Pellentesque tempus nulla non urna eleifend ut ultrices nisi faucibus.
</p>
<p>
Praesent a dolor leo. Duis in felis in tortor lobortis volutpat et pretium tellus. Vestibulum ac ante nisl,
a elementum odio. Duis semper risus et lectus commodo fringilla. Maecenas sagittis convallis justo vel mattis.
placerat, nunc diam iaculis massa, et aliquet nibh leo non nisl vitae porta lobortis, enim neque fringilla nunc,
eget faucibus lacus sem quis nunc suspendisse nec lectus sit amet augue rutrum vulputate ut ut mi. Aenean
elementum, mi sit amet porttitor lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor
sit amet nullam consequat feugiat dolore tempus.
</p>
<section>
<header>
<h3>Something else</h3>
</header>
<p>
Elementum odio duis semper risus et lectus commodo fringilla. Maecenas sagittis convallis justo vel mattis.
placerat, nunc diam iaculis massa, et aliquet nibh leo non nisl vitae porta lobortis, enim neque fringilla nunc,
eget faucibus lacus sem quis nunc suspendisse nec lectus sit amet augue rutrum vulputate ut ut mi. Aenean
elementum, mi sit amet porttitor lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor
sit amet nullam consequat feugiat dolore tempus.
</p>
<p>
Nunc diam iaculis massa, et aliquet nibh leo non nisl vitae porta lobortis, enim neque fringilla nunc,
eget faucibus lacus sem quis nunc suspendisse nec lectus sit amet augue rutrum vulputate ut ut mi. Aenean
elementum, mi sit amet porttitor lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor
sit amet nullam consequat feugiat dolore tempus.
</p>
</section>
<section>
<header>
<h3>So in conclusion ...</h3>
</header>
<p>
Nunc diam iaculis massa, et aliquet nibh leo non nisl vitae porta lobortis, enim neque fringilla nunc,
eget faucibus lacus sem quis nunc suspendisse nec lectus sit amet augue rutrum vulputate ut ut mi. Aenean
elementum, mi sit amet porttitor lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor
sit amet nullam consequat feugiat dolore tempus. Elementum odio duis semper risus et lectus commodo fringilla.
Maecenas sagittis convallis justo vel mattis.
</p>
</section>
</article>
</div>
</div>
</div>
</div>

68
_layouts/no-sidebar.html Normal file
View File

@ -0,0 +1,68 @@
---
layout: dopetrope
---
<!-- Main -->
<div id="main-wrapper">
<div class="container">
<!-- Content -->
<article class="box post">
<a href="#" class="image featured"><img src="images/pic01.jpg" alt="" /></a>
<header>
<h2>No Sidebar</h2>
<p>Lorem ipsum dolor sit amet feugiat</p>
</header>
<p>
Vestibulum scelerisque ultricies libero id hendrerit. Vivamus malesuada quam faucibus ante dignissim auctor
hendrerit libero placerat. Nulla facilisi. Proin aliquam felis non arcu molestie at accumsan turpis commodo.
Proin elementum, nibh non egestas sodales, augue quam aliquet est, id egestas diam justo adipiscing ante.
Pellentesque tempus nulla non urna eleifend ut ultrices nisi faucibus.
Vestibulum scelerisque ultricies libero id hendrerit. Vivamus malesuada quam faucibus ante dignissim auctor
hendrerit libero placerat. Nulla facilisi. Proin aliquam felis non arcu molestie at accumsan turpis commodo.
Proin elementum, nibh non egestas sodales, augue quam aliquet est, id egestas diam justo adipiscing ante.
</p>
<p>
Praesent a dolor leo. Duis in felis in tortor lobortis volutpat et pretium tellus. Vestibulum ac ante nisl,
a elementum odio. Duis semper risus et lectus commodo fringilla. Maecenas sagittis convallis justo vel mattis.
placerat, nunc diam iaculis massa, et aliquet nibh leo non nisl vitae porta lobortis, enim neque fringilla nunc,
eget faucibus lacus sem quis nunc suspendisse nec lectus sit amet augue rutrum vulputate ut ut mi. Aenean
elementum, mi sit amet porttitor lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor.
</p>
<section>
<header>
<h3>Something else</h3>
</header>
<p>
Elementum odio duis semper risus et lectus commodo fringilla. Maecenas sagittis convallis justo vel mattis.
placerat, nunc diam iaculis massa, et aliquet nibh leo non nisl vitae porta lobortis, enim neque fringilla nunc,
eget faucibus lacus sem quis nunc suspendisse nec lectus sit amet augue rutrum vulputate ut ut mi. Aenean
elementum, mi sit amet porttitor lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor
sit amet nullam consequat feugiat dolore tempus.
Elementum odio duis semper risus et lectus commodo fringilla. Maecenas sagittis convallis justo vel mattis.
placerat, nunc diam iaculis massa, et aliquet nibh leo non nisl vitae porta lobortis, enim neque fringilla nunc,
eget faucibus lacus sem quis nunc suspendisse nec lectus sit amet augue rutrum vulputate ut ut mi. Aenean
elementum, mi sit amet porttitor lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor.
</p>
<p>
Nunc diam iaculis massa, et aliquet nibh leo non nisl vitae porta lobortis, enim neque fringilla nunc,
eget faucibus lacus sem quis nunc suspendisse nec lectus sit amet augue rutrum vulputate ut ut mi. Aenean
elementum, mi sit amet porttitor lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor
sit amet nullam consequat feugiat dolore tempus.
</p>
</section>
<section>
<header>
<h3>So in conclusion ...</h3>
</header>
<p>
Nunc diam iaculis massa, et aliquet nibh leo non nisl vitae porta lobortis, enim neque fringilla nunc,
eget faucibus lacus sem quis nunc suspendisse nec lectus sit amet augue rutrum vulputate ut ut mi. Aenean
elementum, mi sit amet porttitor lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor
sit amet nullam consequat feugiat dolore tempus. Elementum odio duis semper risus et lectus commodo fringilla.
Maecenas sagittis convallis justo vel mattis.
</p>
</section>
</article>
</div>
</div>

View File

@ -0,0 +1,96 @@
---
layout: dopetrope
---
<!-- Main -->
<div id="main-wrapper">
<div class="container">
<div class="row">
<div class="8u 12u(mobile)">
<!-- Content -->
<article class="box post">
<a href="#" class="image featured"><img src="images/pic01.jpg" alt="" /></a>
<header>
<h2>Right sidebar</h2>
<p>Lorem ipsum dolor sit amet feugiat</p>
</header>
<p>
Vestibulum scelerisque ultricies libero id hendrerit. Vivamus malesuada quam faucibus ante dignissim auctor
hendrerit libero placerat. Nulla facilisi. Proin aliquam felis non arcu molestie at accumsan turpis commodo.
Proin elementum, nibh non egestas sodales, augue quam aliquet est, id egestas diam justo adipiscing ante.
Pellentesque tempus nulla non urna eleifend ut ultrices nisi faucibus.
</p>
<p>
Praesent a dolor leo. Duis in felis in tortor lobortis volutpat et pretium tellus. Vestibulum ac ante nisl,
a elementum odio. Duis semper risus et lectus commodo fringilla. Maecenas sagittis convallis justo vel mattis.
placerat, nunc diam iaculis massa, et aliquet nibh leo non nisl vitae porta lobortis, enim neque fringilla nunc,
eget faucibus lacus sem quis nunc suspendisse nec lectus sit amet augue rutrum vulputate ut ut mi. Aenean
elementum, mi sit amet porttitor lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor
sit amet nullam consequat feugiat dolore tempus.
</p>
<section>
<header>
<h3>Something else</h3>
</header>
<p>
Elementum odio duis semper risus et lectus commodo fringilla. Maecenas sagittis convallis justo vel mattis.
placerat, nunc diam iaculis massa, et aliquet nibh leo non nisl vitae porta lobortis, enim neque fringilla nunc,
eget faucibus lacus sem quis nunc suspendisse nec lectus sit amet augue rutrum vulputate ut ut mi. Aenean
elementum, mi sit amet porttitor lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor
sit amet nullam consequat feugiat dolore tempus.
</p>
<p>
Nunc diam iaculis massa, et aliquet nibh leo non nisl vitae porta lobortis, enim neque fringilla nunc,
eget faucibus lacus sem quis nunc suspendisse nec lectus sit amet augue rutrum vulputate ut ut mi. Aenean
elementum, mi sit amet porttitor lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor
sit amet nullam consequat feugiat dolore tempus.
</p>
</section>
<section>
<header>
<h3>So in conclusion ...</h3>
</header>
<p>
Nunc diam iaculis massa, et aliquet nibh leo non nisl vitae porta lobortis, enim neque fringilla nunc,
eget faucibus lacus sem quis nunc suspendisse nec lectus sit amet augue rutrum vulputate ut ut mi. Aenean
elementum, mi sit amet porttitor lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor
sit amet nullam consequat feugiat dolore tempus. Elementum odio duis semper risus et lectus commodo fringilla.
Maecenas sagittis convallis justo vel mattis.
</p>
</section>
</article>
</div>
<div class="4u 12u(mobile)">
<!-- Sidebar -->
<section class="box">
<a href="#" class="image featured"><img src="images/pic09.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 alt">Magna sed taciti</a>
</footer>
</section>
<section class="box">
<header>
<h3>Feugiat consequat</h3>
</header>
<p>Veroeros sed amet blandit consequat veroeros lorem blandit adipiscing et feugiat sed lorem consequat feugiat lorem dolore.</p>
<ul class="divided">
<li><a href="#">Sed et blandit consequat sed</a></li>
<li><a href="#">Hendrerit tortor vitae sapien dolore</a></li>
<li><a href="#">Sapien id suscipit magna sed felis</a></li>
<li><a href="#">Aptent taciti sociosqu ad litora</a></li>
</ul>
<footer>
<a href="#" class="button alt">Ipsum consequat</a>
</footer>
</section>
</div>
</div>
</div>
</div>

View File

@ -1,391 +1,3 @@
<!DOCTYPE HTML>
<!--
Dopetrope by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Dopetrope by HTML5 UP</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="assets/css/main.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
</head>
<body class="homepage">
<div id="page-wrapper">
<!-- Header -->
<div id="header-wrapper">
<div id="header">
<!-- Logo -->
<h1><a href="index.html">Dopetrope</a></h1>
<!-- Nav -->
<nav id="nav">
<ul>
<li class="current"><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>
<a href="#">Phasellus consequat</a>
<ul>
<li><a href="#">Magna phasellus</a></li>
<li><a href="#">Etiam dolore nisl</a></li>
<li><a href="#">Veroeros feugiat</a></li>
<li><a href="#">Nisl sed aliquam</a></li>
<li><a href="#">Dolore adipiscing</a></li>
</ul>
</li>
<li><a href="#">Veroeros feugiat</a></li>
</ul>
</li>
<li><a href="left-sidebar.html">Left Sidebar</a></li>
<li><a href="right-sidebar.html">Right Sidebar</a></li>
<li><a href="no-sidebar.html">No Sidebar</a></li>
</ul>
</nav>
<!-- Banner -->
<section id="banner">
<header>
<h2>Howdy. This is Dopetrope.</h2>
<p>A responsive template by HTML5 UP</p>
</header>
</section>
<!-- Intro -->
<section id="intro" class="container">
<div class="row">
<div class="4u 12u(mobile)">
<section class="first">
<i class="icon featured fa-cog"></i>
<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 12u(mobile)">
<section class="middle">
<i class="icon featured alt fa-flash"></i>
<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 12u(mobile)">
<section class="last">
<i class="icon featured alt2 fa-star"></i>
<header>
<h2>Tempus adipiscing</h2>
</header>
<p>Nisl amet dolor sit ipsum veroeros sed blandit consequat veroeros et magna tempus.</p>
</section>
</div>
</div>
<footer>
<ul class="actions">
<li><a href="#" class="button big">Get Started</a></li>
<li><a href="#" class="button alt big">Learn More</a></li>
</ul>
</footer>
</section>
</div>
</div>
<!-- Main -->
<div id="main-wrapper">
<div class="container">
<div class="row">
<div class="12u">
<!-- Portfolio -->
<section>
<header class="major">
<h2>My Portfolio</h2>
</header>
<div class="row">
<div class="4u 12u(mobile)">
<section class="box">
<a href="#" class="image featured"><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 alt">Find out more</a>
</footer>
</section>
</div>
<div class="4u 12u(mobile)">
<section class="box">
<a href="#" class="image featured"><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 alt">Find out more</a>
</footer>
</section>
</div>
<div class="4u 12u(mobile)">
<section class="box">
<a href="#" class="image featured"><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 alt">Find out more</a>
</footer>
</section>
</div>
</div>
<div class="row">
<div class="4u 12u(mobile)">
<section class="box">
<a href="#" class="image featured"><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 alt">Find out more</a>
</footer>
</section>
</div>
<div class="4u 12u(mobile)">
<section class="box">
<a href="#" class="image featured"><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 phasellus tempus dolore ipsum lorem dolore.</p>
<footer>
<a href="#" class="button alt">Find out more</a>
</footer>
</section>
</div>
<div class="4u 12u(mobile)">
<section class="box">
<a href="#" class="image featured"><img src="images/pic07.jpg" alt="" /></a>
<header>
<h3>Dolore nisl feugiat</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 alt">Find out more</a>
</footer>
</section>
</div>
</div>
</section>
</div>
</div>
<div class="row">
<div class="12u">
<!-- Blog -->
<section>
<header class="major">
<h2>The Blog</h2>
</header>
<div class="row">
<div class="6u 12u(mobile)">
<section class="box">
<a href="#" class="image featured"><img src="images/pic08.jpg" alt="" /></a>
<header>
<h3>Magna tempus consequat lorem</h3>
<p>Posted 45 minutes ago</p>
</header>
<p>Lorem ipsum dolor sit amet sit veroeros sed et blandit consequat sed veroeros lorem et blandit adipiscing feugiat phasellus tempus hendrerit, tortor vitae mattis tempor, sapien sem feugiat sapien, id suscipit magna felis nec elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos lorem ipsum dolor sit amet.</p>
<footer>
<ul class="actions">
<li><a href="#" class="button icon fa-file-text">Continue Reading</a></li>
<li><a href="#" class="button alt icon fa-comment">33 comments</a></li>
</ul>
</footer>
</section>
</div>
<div class="6u 12u(mobile)">
<section class="box">
<a href="#" class="image featured"><img src="images/pic09.jpg" alt="" /></a>
<header>
<h3>Aptent veroeros et aliquam</h3>
<p>Posted 45 minutes ago</p>
</header>
<p>Lorem ipsum dolor sit amet sit veroeros sed et blandit consequat sed veroeros lorem et blandit adipiscing feugiat phasellus tempus hendrerit, tortor vitae mattis tempor, sapien sem feugiat sapien, id suscipit magna felis nec elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos lorem ipsum dolor sit amet.</p>
<footer>
<ul class="actions">
<li><a href="#" class="button icon fa-file-text">Continue Reading</a></li>
<li><a href="#" class="button alt icon fa-comment">33 comments</a></li>
</ul>
</footer>
</section>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div id="footer-wrapper">
<section id="footer" class="container">
<div class="row">
<div class="8u 12u(mobile)">
<section>
<header>
<h2>Blandit nisl adipiscing</h2>
</header>
<ul class="dates">
<li>
<span class="date">Jan <strong>27</strong></span>
<h3><a href="#">Lorem dolor sit amet veroeros</a></h3>
<p>Ipsum dolor sit amet veroeros consequat blandit ipsum phasellus lorem consequat etiam.</p>
</li>
<li>
<span class="date">Jan <strong>23</strong></span>
<h3><a href="#">Ipsum sed blandit nisl consequat</a></h3>
<p>Blandit phasellus lorem ipsum dolor tempor sapien tortor hendrerit adipiscing feugiat lorem.</p>
</li>
<li>
<span class="date">Jan <strong>15</strong></span>
<h3><a href="#">Magna tempus lorem feugiat</a></h3>
<p>Dolore consequat sed phasellus lorem sed etiam nullam dolor etiam sed amet sit consequat.</p>
</li>
<li>
<span class="date">Jan <strong>12</strong></span>
<h3><a href="#">Dolore tempus ipsum feugiat nulla</a></h3>
<p>Feugiat lorem dolor sed nullam tempus lorem ipsum dolor sit amet nullam consequat.</p>
</li>
<li>
<span class="date">Jan <strong>10</strong></span>
<h3><a href="#">Blandit tempus aliquam?</a></h3>
<p>Feugiat sed tempus blandit tempus adipiscing nisl lorem ipsum dolor sit amet dolore.</p>
</li>
</ul>
</section>
</div>
<div class="4u 12u(mobile)">
<section>
<header>
<h2>What's this all about?</h2>
</header>
<a href="#" class="image featured"><img src="images/pic10.jpg" alt="" /></a>
<p>
This is <strong>Dopetrope</strong> a free, fully responsive HTML5 site template by
<a href="http://twitter.com/ajlkn">AJ</a> for <a href="http://html5up.net/">HTML5 UP</a> It's released for free under
the <a href="http://html5up.net/license/">Creative Commons Attribution</a> license so feel free to use it for any personal or commercial project &ndash; just don't forget to credit us!
</p>
<footer>
<a href="#" class="button">Find out more</a>
</footer>
</section>
</div>
</div>
<div class="row">
<div class="4u 12u(mobile)">
<section>
<header>
<h2>Tempus consequat</h2>
</header>
<ul class="divided">
<li><a href="#">Lorem ipsum dolor sit amet sit veroeros</a></li>
<li><a href="#">Sed et blandit consequat sed tlorem blandit</a></li>
<li><a href="#">Adipiscing feugiat phasellus sed tempus</a></li>
<li><a href="#">Hendrerit tortor vitae mattis tempor sapien</a></li>
<li><a href="#">Sem feugiat sapien id suscipit magna felis nec</a></li>
<li><a href="#">Elit class aptent taciti sociosqu ad litora</a></li>
</ul>
</section>
</div>
<div class="4u 12u(mobile)">
<section>
<header>
<h2>Ipsum et phasellus</h2>
</header>
<ul class="divided">
<li><a href="#">Lorem ipsum dolor sit amet sit veroeros</a></li>
<li><a href="#">Sed et blandit consequat sed tlorem blandit</a></li>
<li><a href="#">Adipiscing feugiat phasellus sed tempus</a></li>
<li><a href="#">Hendrerit tortor vitae mattis tempor sapien</a></li>
<li><a href="#">Sem feugiat sapien id suscipit magna felis nec</a></li>
<li><a href="#">Elit class aptent taciti sociosqu ad litora</a></li>
</ul>
</section>
</div>
<div class="4u 12u(mobile)">
<section>
<header>
<h2>Vitae tempor lorem</h2>
</header>
<ul class="social">
<li><a class="icon fa-facebook" href="#"><span class="label">Facebook</span></a></li>
<li><a class="icon fa-twitter" href="#"><span class="label">Twitter</span></a></li>
<li><a class="icon fa-dribbble" href="#"><span class="label">Dribbble</span></a></li>
<li><a class="icon fa-linkedin" href="#"><span class="label">LinkedIn</span></a></li>
<li><a class="icon fa-google-plus" href="#"><span class="label">Google+</span></a></li>
</ul>
<ul class="contact">
<li>
<h3>Address</h3>
<p>
Untitled Incorporated<br />
1234 Somewhere Road Suite<br />
Nashville, TN 00000-0000
</p>
</li>
<li>
<h3>Mail</h3>
<p><a href="#">someone@untitled.tld</a></p>
</li>
<li>
<h3>Phone</h3>
<p>(800) 000-0000</p>
</li>
</ul>
</section>
</div>
</div>
<div class="row">
<div class="12u">
<!-- Copyright -->
<div id="copyright">
<ul class="links">
<li>&copy; Untitled. All rights reserved.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
</div>
</div>
</div>
</section>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.dropotron.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/skel-viewport.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="assets/js/main.js"></script>
</body>
</html>
---
layout: landing
---

View File

@ -1,298 +1,3 @@
<!DOCTYPE HTML>
<!--
Dopetrope by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Dopetrope by HTML5 UP</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="assets/css/main.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
</head>
<body class="left-sidebar">
<div id="page-wrapper">
<!-- Header -->
<div id="header-wrapper">
<div id="header">
<!-- Logo -->
<h1><a href="index.html">Dopetrope</a></h1>
<!-- Nav -->
<nav id="nav">
<ul>
<li><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>
<a href="#">Phasellus consequat</a>
<ul>
<li><a href="#">Magna phasellus</a></li>
<li><a href="#">Etiam dolore nisl</a></li>
<li><a href="#">Veroeros feugiat</a></li>
<li><a href="#">Nisl sed aliquam</a></li>
<li><a href="#">Dolore adipiscing</a></li>
</ul>
</li>
<li><a href="#">Veroeros feugiat</a></li>
</ul>
</li>
<li class="current"><a href="left-sidebar.html">Left Sidebar</a></li>
<li><a href="right-sidebar.html">Right Sidebar</a></li>
<li><a href="no-sidebar.html">No Sidebar</a></li>
</ul>
</nav>
</div>
</div>
<!-- Main -->
<div id="main-wrapper">
<div class="container">
<div class="row">
<div class="4u 12u(mobile)">
<!-- Sidebar -->
<section class="box">
<a href="#" class="image featured"><img src="images/pic09.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 alt">Magna sed taciti</a>
</footer>
</section>
<section class="box">
<header>
<h3>Feugiat consequat</h3>
</header>
<p>Veroeros sed amet blandit consequat veroeros lorem blandit adipiscing et feugiat sed lorem consequat feugiat lorem dolore.</p>
<ul class="divided">
<li><a href="#">Sed et blandit consequat sed</a></li>
<li><a href="#">Hendrerit tortor vitae sapien dolore</a></li>
<li><a href="#">Sapien id suscipit magna sed felis</a></li>
<li><a href="#">Aptent taciti sociosqu ad litora</a></li>
</ul>
<footer>
<a href="#" class="button alt">Ipsum consequat</a>
</footer>
</section>
</div>
<div class="8u 12u(mobile) important(mobile)">
<!-- Content -->
<article class="box post">
<a href="#" class="image featured"><img src="images/pic01.jpg" alt="" /></a>
<header>
<h2>Left Sidebar</h2>
<p>Lorem ipsum dolor sit amet feugiat</p>
</header>
<p>
Vestibulum scelerisque ultricies libero id hendrerit. Vivamus malesuada quam faucibus ante dignissim auctor
hendrerit libero placerat. Nulla facilisi. Proin aliquam felis non arcu molestie at accumsan turpis commodo.
Proin elementum, nibh non egestas sodales, augue quam aliquet est, id egestas diam justo adipiscing ante.
Pellentesque tempus nulla non urna eleifend ut ultrices nisi faucibus.
</p>
<p>
Praesent a dolor leo. Duis in felis in tortor lobortis volutpat et pretium tellus. Vestibulum ac ante nisl,
a elementum odio. Duis semper risus et lectus commodo fringilla. Maecenas sagittis convallis justo vel mattis.
placerat, nunc diam iaculis massa, et aliquet nibh leo non nisl vitae porta lobortis, enim neque fringilla nunc,
eget faucibus lacus sem quis nunc suspendisse nec lectus sit amet augue rutrum vulputate ut ut mi. Aenean
elementum, mi sit amet porttitor lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor
sit amet nullam consequat feugiat dolore tempus.
</p>
<section>
<header>
<h3>Something else</h3>
</header>
<p>
Elementum odio duis semper risus et lectus commodo fringilla. Maecenas sagittis convallis justo vel mattis.
placerat, nunc diam iaculis massa, et aliquet nibh leo non nisl vitae porta lobortis, enim neque fringilla nunc,
eget faucibus lacus sem quis nunc suspendisse nec lectus sit amet augue rutrum vulputate ut ut mi. Aenean
elementum, mi sit amet porttitor lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor
sit amet nullam consequat feugiat dolore tempus.
</p>
<p>
Nunc diam iaculis massa, et aliquet nibh leo non nisl vitae porta lobortis, enim neque fringilla nunc,
eget faucibus lacus sem quis nunc suspendisse nec lectus sit amet augue rutrum vulputate ut ut mi. Aenean
elementum, mi sit amet porttitor lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor
sit amet nullam consequat feugiat dolore tempus.
</p>
</section>
<section>
<header>
<h3>So in conclusion ...</h3>
</header>
<p>
Nunc diam iaculis massa, et aliquet nibh leo non nisl vitae porta lobortis, enim neque fringilla nunc,
eget faucibus lacus sem quis nunc suspendisse nec lectus sit amet augue rutrum vulputate ut ut mi. Aenean
elementum, mi sit amet porttitor lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor
sit amet nullam consequat feugiat dolore tempus. Elementum odio duis semper risus et lectus commodo fringilla.
Maecenas sagittis convallis justo vel mattis.
</p>
</section>
</article>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div id="footer-wrapper">
<section id="footer" class="container">
<div class="row">
<div class="8u 12u(mobile)">
<section>
<header>
<h2>Blandit nisl adipiscing</h2>
</header>
<ul class="dates">
<li>
<span class="date">Jan <strong>27</strong></span>
<h3><a href="#">Lorem dolor sit amet veroeros</a></h3>
<p>Ipsum dolor sit amet veroeros consequat blandit ipsum phasellus lorem consequat etiam.</p>
</li>
<li>
<span class="date">Jan <strong>23</strong></span>
<h3><a href="#">Ipsum sed blandit nisl consequat</a></h3>
<p>Blandit phasellus lorem ipsum dolor tempor sapien tortor hendrerit adipiscing feugiat lorem.</p>
</li>
<li>
<span class="date">Jan <strong>15</strong></span>
<h3><a href="#">Magna tempus lorem feugiat</a></h3>
<p>Dolore consequat sed phasellus lorem sed etiam nullam dolor etiam sed amet sit consequat.</p>
</li>
<li>
<span class="date">Jan <strong>12</strong></span>
<h3><a href="#">Dolore tempus ipsum feugiat nulla</a></h3>
<p>Feugiat lorem dolor sed nullam tempus lorem ipsum dolor sit amet nullam consequat.</p>
</li>
<li>
<span class="date">Jan <strong>10</strong></span>
<h3><a href="#">Blandit tempus aliquam?</a></h3>
<p>Feugiat sed tempus blandit tempus adipiscing nisl lorem ipsum dolor sit amet dolore.</p>
</li>
</ul>
</section>
</div>
<div class="4u 12u(mobile)">
<section>
<header>
<h2>What's this all about?</h2>
</header>
<a href="#" class="image featured"><img src="images/pic10.jpg" alt="" /></a>
<p>
This is <strong>Dopetrope</strong> a free, fully responsive HTML5 site template by
<a href="http://twitter.com/ajlkn">AJ</a> for <a href="http://html5up.net/">HTML5 UP</a> It's released for free under
the <a href="http://html5up.net/license/">Creative Commons Attribution</a> license so feel free to use it for any personal or commercial project &ndash; just don't forget to credit us!
</p>
<footer>
<a href="#" class="button">Find out more</a>
</footer>
</section>
</div>
</div>
<div class="row">
<div class="4u 12u(mobile)">
<section>
<header>
<h2>Tempus consequat</h2>
</header>
<ul class="divided">
<li><a href="#">Lorem ipsum dolor sit amet sit veroeros</a></li>
<li><a href="#">Sed et blandit consequat sed tlorem blandit</a></li>
<li><a href="#">Adipiscing feugiat phasellus sed tempus</a></li>
<li><a href="#">Hendrerit tortor vitae mattis tempor sapien</a></li>
<li><a href="#">Sem feugiat sapien id suscipit magna felis nec</a></li>
<li><a href="#">Elit class aptent taciti sociosqu ad litora</a></li>
</ul>
</section>
</div>
<div class="4u 12u(mobile)">
<section>
<header>
<h2>Ipsum et phasellus</h2>
</header>
<ul class="divided">
<li><a href="#">Lorem ipsum dolor sit amet sit veroeros</a></li>
<li><a href="#">Sed et blandit consequat sed tlorem blandit</a></li>
<li><a href="#">Adipiscing feugiat phasellus sed tempus</a></li>
<li><a href="#">Hendrerit tortor vitae mattis tempor sapien</a></li>
<li><a href="#">Sem feugiat sapien id suscipit magna felis nec</a></li>
<li><a href="#">Elit class aptent taciti sociosqu ad litora</a></li>
</ul>
</section>
</div>
<div class="4u 12u(mobile)">
<section>
<header>
<h2>Vitae tempor lorem</h2>
</header>
<ul class="social">
<li><a class="icon fa-facebook" href="#"><span class="label">Facebook</span></a></li>
<li><a class="icon fa-twitter" href="#"><span class="label">Twitter</span></a></li>
<li><a class="icon fa-dribbble" href="#"><span class="label">Dribbble</span></a></li>
<li><a class="icon fa-linkedin" href="#"><span class="label">LinkedIn</span></a></li>
<li><a class="icon fa-google-plus" href="#"><span class="label">Google+</span></a></li>
</ul>
<ul class="contact">
<li>
<h3>Address</h3>
<p>
Untitled Incorporated<br />
1234 Somewhere Road Suite<br />
Nashville, TN 00000-0000
</p>
</li>
<li>
<h3>Mail</h3>
<p><a href="#">someone@untitled.tld</a></p>
</li>
<li>
<h3>Phone</h3>
<p>(800) 000-0000</p>
</li>
</ul>
</section>
</div>
</div>
<div class="row">
<div class="12u">
<!-- Copyright -->
<div id="copyright">
<ul class="links">
<li>&copy; Untitled. All rights reserved.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
</div>
</div>
</div>
</section>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.dropotron.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/skel-viewport.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="assets/js/main.js"></script>
</body>
</html>
---
layout: left-sidebar
---

View File

@ -1,270 +1,3 @@
<!DOCTYPE HTML>
<!--
Dopetrope by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Dopetrope by HTML5 UP</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="assets/css/main.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
</head>
<body class="no-sidebar">
<div id="page-wrapper">
<!-- Header -->
<div id="header-wrapper">
<div id="header">
<!-- Logo -->
<h1><a href="index.html">Dopetrope</a></h1>
<!-- Nav -->
<nav id="nav">
<ul>
<li><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>
<a href="#">Phasellus consequat</a>
<ul>
<li><a href="#">Magna phasellus</a></li>
<li><a href="#">Etiam dolore nisl</a></li>
<li><a href="#">Veroeros feugiat</a></li>
<li><a href="#">Nisl sed aliquam</a></li>
<li><a href="#">Dolore adipiscing</a></li>
</ul>
</li>
<li><a href="#">Veroeros feugiat</a></li>
</ul>
</li>
<li><a href="left-sidebar.html">Left Sidebar</a></li>
<li><a href="right-sidebar.html">Right Sidebar</a></li>
<li class="current"><a href="no-sidebar.html">No Sidebar</a></li>
</ul>
</nav>
</div>
</div>
<!-- Main -->
<div id="main-wrapper">
<div class="container">
<!-- Content -->
<article class="box post">
<a href="#" class="image featured"><img src="images/pic01.jpg" alt="" /></a>
<header>
<h2>No Sidebar</h2>
<p>Lorem ipsum dolor sit amet feugiat</p>
</header>
<p>
Vestibulum scelerisque ultricies libero id hendrerit. Vivamus malesuada quam faucibus ante dignissim auctor
hendrerit libero placerat. Nulla facilisi. Proin aliquam felis non arcu molestie at accumsan turpis commodo.
Proin elementum, nibh non egestas sodales, augue quam aliquet est, id egestas diam justo adipiscing ante.
Pellentesque tempus nulla non urna eleifend ut ultrices nisi faucibus.
Vestibulum scelerisque ultricies libero id hendrerit. Vivamus malesuada quam faucibus ante dignissim auctor
hendrerit libero placerat. Nulla facilisi. Proin aliquam felis non arcu molestie at accumsan turpis commodo.
Proin elementum, nibh non egestas sodales, augue quam aliquet est, id egestas diam justo adipiscing ante.
</p>
<p>
Praesent a dolor leo. Duis in felis in tortor lobortis volutpat et pretium tellus. Vestibulum ac ante nisl,
a elementum odio. Duis semper risus et lectus commodo fringilla. Maecenas sagittis convallis justo vel mattis.
placerat, nunc diam iaculis massa, et aliquet nibh leo non nisl vitae porta lobortis, enim neque fringilla nunc,
eget faucibus lacus sem quis nunc suspendisse nec lectus sit amet augue rutrum vulputate ut ut mi. Aenean
elementum, mi sit amet porttitor lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor.
</p>
<section>
<header>
<h3>Something else</h3>
</header>
<p>
Elementum odio duis semper risus et lectus commodo fringilla. Maecenas sagittis convallis justo vel mattis.
placerat, nunc diam iaculis massa, et aliquet nibh leo non nisl vitae porta lobortis, enim neque fringilla nunc,
eget faucibus lacus sem quis nunc suspendisse nec lectus sit amet augue rutrum vulputate ut ut mi. Aenean
elementum, mi sit amet porttitor lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor
sit amet nullam consequat feugiat dolore tempus.
Elementum odio duis semper risus et lectus commodo fringilla. Maecenas sagittis convallis justo vel mattis.
placerat, nunc diam iaculis massa, et aliquet nibh leo non nisl vitae porta lobortis, enim neque fringilla nunc,
eget faucibus lacus sem quis nunc suspendisse nec lectus sit amet augue rutrum vulputate ut ut mi. Aenean
elementum, mi sit amet porttitor lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor.
</p>
<p>
Nunc diam iaculis massa, et aliquet nibh leo non nisl vitae porta lobortis, enim neque fringilla nunc,
eget faucibus lacus sem quis nunc suspendisse nec lectus sit amet augue rutrum vulputate ut ut mi. Aenean
elementum, mi sit amet porttitor lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor
sit amet nullam consequat feugiat dolore tempus.
</p>
</section>
<section>
<header>
<h3>So in conclusion ...</h3>
</header>
<p>
Nunc diam iaculis massa, et aliquet nibh leo non nisl vitae porta lobortis, enim neque fringilla nunc,
eget faucibus lacus sem quis nunc suspendisse nec lectus sit amet augue rutrum vulputate ut ut mi. Aenean
elementum, mi sit amet porttitor lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor
sit amet nullam consequat feugiat dolore tempus. Elementum odio duis semper risus et lectus commodo fringilla.
Maecenas sagittis convallis justo vel mattis.
</p>
</section>
</article>
</div>
</div>
<!-- Footer -->
<div id="footer-wrapper">
<section id="footer" class="container">
<div class="row">
<div class="8u 12u(mobile)">
<section>
<header>
<h2>Blandit nisl adipiscing</h2>
</header>
<ul class="dates">
<li>
<span class="date">Jan <strong>27</strong></span>
<h3><a href="#">Lorem dolor sit amet veroeros</a></h3>
<p>Ipsum dolor sit amet veroeros consequat blandit ipsum phasellus lorem consequat etiam.</p>
</li>
<li>
<span class="date">Jan <strong>23</strong></span>
<h3><a href="#">Ipsum sed blandit nisl consequat</a></h3>
<p>Blandit phasellus lorem ipsum dolor tempor sapien tortor hendrerit adipiscing feugiat lorem.</p>
</li>
<li>
<span class="date">Jan <strong>15</strong></span>
<h3><a href="#">Magna tempus lorem feugiat</a></h3>
<p>Dolore consequat sed phasellus lorem sed etiam nullam dolor etiam sed amet sit consequat.</p>
</li>
<li>
<span class="date">Jan <strong>12</strong></span>
<h3><a href="#">Dolore tempus ipsum feugiat nulla</a></h3>
<p>Feugiat lorem dolor sed nullam tempus lorem ipsum dolor sit amet nullam consequat.</p>
</li>
<li>
<span class="date">Jan <strong>10</strong></span>
<h3><a href="#">Blandit tempus aliquam?</a></h3>
<p>Feugiat sed tempus blandit tempus adipiscing nisl lorem ipsum dolor sit amet dolore.</p>
</li>
</ul>
</section>
</div>
<div class="4u 12u(mobile)">
<section>
<header>
<h2>What's this all about?</h2>
</header>
<a href="#" class="image featured"><img src="images/pic10.jpg" alt="" /></a>
<p>
This is <strong>Dopetrope</strong> a free, fully responsive HTML5 site template by
<a href="http://twitter.com/ajlkn">AJ</a> for <a href="http://html5up.net/">HTML5 UP</a> It's released for free under
the <a href="http://html5up.net/license/">Creative Commons Attribution</a> license so feel free to use it for any personal or commercial project &ndash; just don't forget to credit us!
</p>
<footer>
<a href="#" class="button">Find out more</a>
</footer>
</section>
</div>
</div>
<div class="row">
<div class="4u 12u(mobile)">
<section>
<header>
<h2>Tempus consequat</h2>
</header>
<ul class="divided">
<li><a href="#">Lorem ipsum dolor sit amet sit veroeros</a></li>
<li><a href="#">Sed et blandit consequat sed tlorem blandit</a></li>
<li><a href="#">Adipiscing feugiat phasellus sed tempus</a></li>
<li><a href="#">Hendrerit tortor vitae mattis tempor sapien</a></li>
<li><a href="#">Sem feugiat sapien id suscipit magna felis nec</a></li>
<li><a href="#">Elit class aptent taciti sociosqu ad litora</a></li>
</ul>
</section>
</div>
<div class="4u 12u(mobile)">
<section>
<header>
<h2>Ipsum et phasellus</h2>
</header>
<ul class="divided">
<li><a href="#">Lorem ipsum dolor sit amet sit veroeros</a></li>
<li><a href="#">Sed et blandit consequat sed tlorem blandit</a></li>
<li><a href="#">Adipiscing feugiat phasellus sed tempus</a></li>
<li><a href="#">Hendrerit tortor vitae mattis tempor sapien</a></li>
<li><a href="#">Sem feugiat sapien id suscipit magna felis nec</a></li>
<li><a href="#">Elit class aptent taciti sociosqu ad litora</a></li>
</ul>
</section>
</div>
<div class="4u 12u(mobile)">
<section>
<header>
<h2>Vitae tempor lorem</h2>
</header>
<ul class="social">
<li><a class="icon fa-facebook" href="#"><span class="label">Facebook</span></a></li>
<li><a class="icon fa-twitter" href="#"><span class="label">Twitter</span></a></li>
<li><a class="icon fa-dribbble" href="#"><span class="label">Dribbble</span></a></li>
<li><a class="icon fa-linkedin" href="#"><span class="label">LinkedIn</span></a></li>
<li><a class="icon fa-google-plus" href="#"><span class="label">Google+</span></a></li>
</ul>
<ul class="contact">
<li>
<h3>Address</h3>
<p>
Untitled Incorporated<br />
1234 Somewhere Road Suite<br />
Nashville, TN 00000-0000
</p>
</li>
<li>
<h3>Mail</h3>
<p><a href="#">someone@untitled.tld</a></p>
</li>
<li>
<h3>Phone</h3>
<p>(800) 000-0000</p>
</li>
</ul>
</section>
</div>
</div>
<div class="row">
<div class="12u">
<!-- Copyright -->
<div id="copyright">
<ul class="links">
<li>&copy; Untitled. All rights reserved.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
</div>
</div>
</div>
</section>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.dropotron.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/skel-viewport.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="assets/js/main.js"></script>
</body>
</html>
---
layout: no-sidebar
---

View File

@ -1,298 +1,3 @@
<!DOCTYPE HTML>
<!--
Dopetrope by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Dopetrope by HTML5 UP</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="assets/css/main.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
</head>
<body class="right-sidebar">
<div id="page-wrapper">
<!-- Header -->
<div id="header-wrapper">
<div id="header">
<!-- Logo -->
<h1><a href="index.html">Dopetrope</a></h1>
<!-- Nav -->
<nav id="nav">
<ul>
<li><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>
<a href="#">Phasellus consequat</a>
<ul>
<li><a href="#">Magna phasellus</a></li>
<li><a href="#">Etiam dolore nisl</a></li>
<li><a href="#">Veroeros feugiat</a></li>
<li><a href="#">Nisl sed aliquam</a></li>
<li><a href="#">Dolore adipiscing</a></li>
</ul>
</li>
<li><a href="#">Veroeros feugiat</a></li>
</ul>
</li>
<li><a href="left-sidebar.html">Left Sidebar</a></li>
<li class="current"><a href="right-sidebar.html">Right Sidebar</a></li>
<li><a href="no-sidebar.html">No Sidebar</a></li>
</ul>
</nav>
</div>
</div>
<!-- Main -->
<div id="main-wrapper">
<div class="container">
<div class="row">
<div class="8u 12u(mobile)">
<!-- Content -->
<article class="box post">
<a href="#" class="image featured"><img src="images/pic01.jpg" alt="" /></a>
<header>
<h2>Right sidebar</h2>
<p>Lorem ipsum dolor sit amet feugiat</p>
</header>
<p>
Vestibulum scelerisque ultricies libero id hendrerit. Vivamus malesuada quam faucibus ante dignissim auctor
hendrerit libero placerat. Nulla facilisi. Proin aliquam felis non arcu molestie at accumsan turpis commodo.
Proin elementum, nibh non egestas sodales, augue quam aliquet est, id egestas diam justo adipiscing ante.
Pellentesque tempus nulla non urna eleifend ut ultrices nisi faucibus.
</p>
<p>
Praesent a dolor leo. Duis in felis in tortor lobortis volutpat et pretium tellus. Vestibulum ac ante nisl,
a elementum odio. Duis semper risus et lectus commodo fringilla. Maecenas sagittis convallis justo vel mattis.
placerat, nunc diam iaculis massa, et aliquet nibh leo non nisl vitae porta lobortis, enim neque fringilla nunc,
eget faucibus lacus sem quis nunc suspendisse nec lectus sit amet augue rutrum vulputate ut ut mi. Aenean
elementum, mi sit amet porttitor lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor
sit amet nullam consequat feugiat dolore tempus.
</p>
<section>
<header>
<h3>Something else</h3>
</header>
<p>
Elementum odio duis semper risus et lectus commodo fringilla. Maecenas sagittis convallis justo vel mattis.
placerat, nunc diam iaculis massa, et aliquet nibh leo non nisl vitae porta lobortis, enim neque fringilla nunc,
eget faucibus lacus sem quis nunc suspendisse nec lectus sit amet augue rutrum vulputate ut ut mi. Aenean
elementum, mi sit amet porttitor lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor
sit amet nullam consequat feugiat dolore tempus.
</p>
<p>
Nunc diam iaculis massa, et aliquet nibh leo non nisl vitae porta lobortis, enim neque fringilla nunc,
eget faucibus lacus sem quis nunc suspendisse nec lectus sit amet augue rutrum vulputate ut ut mi. Aenean
elementum, mi sit amet porttitor lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor
sit amet nullam consequat feugiat dolore tempus.
</p>
</section>
<section>
<header>
<h3>So in conclusion ...</h3>
</header>
<p>
Nunc diam iaculis massa, et aliquet nibh leo non nisl vitae porta lobortis, enim neque fringilla nunc,
eget faucibus lacus sem quis nunc suspendisse nec lectus sit amet augue rutrum vulputate ut ut mi. Aenean
elementum, mi sit amet porttitor lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor
sit amet nullam consequat feugiat dolore tempus. Elementum odio duis semper risus et lectus commodo fringilla.
Maecenas sagittis convallis justo vel mattis.
</p>
</section>
</article>
</div>
<div class="4u 12u(mobile)">
<!-- Sidebar -->
<section class="box">
<a href="#" class="image featured"><img src="images/pic09.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 alt">Magna sed taciti</a>
</footer>
</section>
<section class="box">
<header>
<h3>Feugiat consequat</h3>
</header>
<p>Veroeros sed amet blandit consequat veroeros lorem blandit adipiscing et feugiat sed lorem consequat feugiat lorem dolore.</p>
<ul class="divided">
<li><a href="#">Sed et blandit consequat sed</a></li>
<li><a href="#">Hendrerit tortor vitae sapien dolore</a></li>
<li><a href="#">Sapien id suscipit magna sed felis</a></li>
<li><a href="#">Aptent taciti sociosqu ad litora</a></li>
</ul>
<footer>
<a href="#" class="button alt">Ipsum consequat</a>
</footer>
</section>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div id="footer-wrapper">
<section id="footer" class="container">
<div class="row">
<div class="8u 12u(mobile)">
<section>
<header>
<h2>Blandit nisl adipiscing</h2>
</header>
<ul class="dates">
<li>
<span class="date">Jan <strong>27</strong></span>
<h3><a href="#">Lorem dolor sit amet veroeros</a></h3>
<p>Ipsum dolor sit amet veroeros consequat blandit ipsum phasellus lorem consequat etiam.</p>
</li>
<li>
<span class="date">Jan <strong>23</strong></span>
<h3><a href="#">Ipsum sed blandit nisl consequat</a></h3>
<p>Blandit phasellus lorem ipsum dolor tempor sapien tortor hendrerit adipiscing feugiat lorem.</p>
</li>
<li>
<span class="date">Jan <strong>15</strong></span>
<h3><a href="#">Magna tempus lorem feugiat</a></h3>
<p>Dolore consequat sed phasellus lorem sed etiam nullam dolor etiam sed amet sit consequat.</p>
</li>
<li>
<span class="date">Jan <strong>12</strong></span>
<h3><a href="#">Dolore tempus ipsum feugiat nulla</a></h3>
<p>Feugiat lorem dolor sed nullam tempus lorem ipsum dolor sit amet nullam consequat.</p>
</li>
<li>
<span class="date">Jan <strong>10</strong></span>
<h3><a href="#">Blandit tempus aliquam?</a></h3>
<p>Feugiat sed tempus blandit tempus adipiscing nisl lorem ipsum dolor sit amet dolore.</p>
</li>
</ul>
</section>
</div>
<div class="4u 12u(mobile)">
<section>
<header>
<h2>What's this all about?</h2>
</header>
<a href="#" class="image featured"><img src="images/pic10.jpg" alt="" /></a>
<p>
This is <strong>Dopetrope</strong> a free, fully responsive HTML5 site template by
<a href="http://twitter.com/ajlkn">AJ</a> for <a href="http://html5up.net/">HTML5 UP</a> It's released for free under
the <a href="http://html5up.net/license/">Creative Commons Attribution</a> license so feel free to use it for any personal or commercial project &ndash; just don't forget to credit us!
</p>
<footer>
<a href="#" class="button">Find out more</a>
</footer>
</section>
</div>
</div>
<div class="row">
<div class="4u 12u(mobile)">
<section>
<header>
<h2>Tempus consequat</h2>
</header>
<ul class="divided">
<li><a href="#">Lorem ipsum dolor sit amet sit veroeros</a></li>
<li><a href="#">Sed et blandit consequat sed tlorem blandit</a></li>
<li><a href="#">Adipiscing feugiat phasellus sed tempus</a></li>
<li><a href="#">Hendrerit tortor vitae mattis tempor sapien</a></li>
<li><a href="#">Sem feugiat sapien id suscipit magna felis nec</a></li>
<li><a href="#">Elit class aptent taciti sociosqu ad litora</a></li>
</ul>
</section>
</div>
<div class="4u 12u(mobile)">
<section>
<header>
<h2>Ipsum et phasellus</h2>
</header>
<ul class="divided">
<li><a href="#">Lorem ipsum dolor sit amet sit veroeros</a></li>
<li><a href="#">Sed et blandit consequat sed tlorem blandit</a></li>
<li><a href="#">Adipiscing feugiat phasellus sed tempus</a></li>
<li><a href="#">Hendrerit tortor vitae mattis tempor sapien</a></li>
<li><a href="#">Sem feugiat sapien id suscipit magna felis nec</a></li>
<li><a href="#">Elit class aptent taciti sociosqu ad litora</a></li>
</ul>
</section>
</div>
<div class="4u 12u(mobile)">
<section>
<header>
<h2>Vitae tempor lorem</h2>
</header>
<ul class="social">
<li><a class="icon fa-facebook" href="#"><span class="label">Facebook</span></a></li>
<li><a class="icon fa-twitter" href="#"><span class="label">Twitter</span></a></li>
<li><a class="icon fa-dribbble" href="#"><span class="label">Dribbble</span></a></li>
<li><a class="icon fa-linkedin" href="#"><span class="label">LinkedIn</span></a></li>
<li><a class="icon fa-google-plus" href="#"><span class="label">Google+</span></a></li>
</ul>
<ul class="contact">
<li>
<h3>Address</h3>
<p>
Untitled Incorporated<br />
1234 Somewhere Road Suite<br />
Nashville, TN 00000-0000
</p>
</li>
<li>
<h3>Mail</h3>
<p><a href="#">someone@untitled.tld</a></p>
</li>
<li>
<h3>Phone</h3>
<p>(800) 000-0000</p>
</li>
</ul>
</section>
</div>
</div>
<div class="row">
<div class="12u">
<!-- Copyright -->
<div id="copyright">
<ul class="links">
<li>&copy; Untitled. All rights reserved.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
</div>
</div>
</div>
</section>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.dropotron.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/skel-viewport.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="assets/js/main.js"></script>
</body>
</html>
---
layout: right-sidebar
---