291 lines
12 KiB
HTML
291 lines
12 KiB
HTML
|
<!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, user-scalable=no" />
|
||
|
|
<link rel="stylesheet" href="assets/css/main.css" />
|
||
|
|
</head>
|
||
|
|
<body class="right-sidebar is-preload">
|
||
|
|
<div id="page-wrapper">
|
||
|
|
|
||
|
|
<!-- Header -->
|
||
|
|
<section 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>
|
||
|
|
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Main -->
|
||
|
|
<section id="main">
|
||
|
|
<div class="container">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-8 col-12-medium">
|
||
|
|
|
||
|
|
<!-- 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="col-4 col-12-medium">
|
||
|
|
|
||
|
|
<!-- 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>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Footer -->
|
||
|
|
<section id="footer">
|
||
|
|
<div class="container">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-8 col-12-medium">
|
||
|
|
<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="col-4 col-12-medium">
|
||
|
|
<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 – just don't forget to credit us!
|
||
|
|
</p>
|
||
|
|
<footer>
|
||
|
|
<ul class="actions">
|
||
|
|
<li><a href="#" class="button">Find out more</a></li>
|
||
|
|
</ul>
|
||
|
|
</footer>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
<div class="col-4 col-6-medium col-12-small">
|
||
|
|
<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="col-4 col-6-medium col-12-small">
|
||
|
|
<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="col-4 col-12-medium">
|
||
|
|
<section>
|
||
|
|
<header>
|
||
|
|
<h2>Vitae tempor lorem</h2>
|
||
|
|
</header>
|
||
|
|
<ul class="social">
|
||
|
|
<li><a class="icon brands fa-facebook-f" href="#"><span class="label">Facebook</span></a></li>
|
||
|
|
<li><a class="icon brands fa-twitter" href="#"><span class="label">Twitter</span></a></li>
|
||
|
|
<li><a class="icon brands fa-dribbble" href="#"><span class="label">Dribbble</span></a></li>
|
||
|
|
<li><a class="icon brands fa-tumblr" href="#"><span class="label">Tumblr</span></a></li>
|
||
|
|
<li><a class="icon brands fa-linkedin-in" href="#"><span class="label">LinkedIn</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 class="col-12">
|
||
|
|
|
||
|
|
<!-- Copyright -->
|
||
|
|
<div id="copyright">
|
||
|
|
<ul class="links">
|
||
|
|
<li>© Untitled. All rights reserved.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Scripts -->
|
||
|
|
<script src="assets/js/jquery.min.js"></script>
|
||
|
|
<script src="assets/js/jquery.dropotron.min.js"></script>
|
||
|
|
<script src="assets/js/browser.min.js"></script>
|
||
|
|
<script src="assets/js/breakpoints.min.js"></script>
|
||
|
|
<script src="assets/js/util.js"></script>
|
||
|
|
<script src="assets/js/main.js"></script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|