moonlight-stream.github.io/left-sidebar.html
2014-08-28 00:45:36 -07:00

353 lines
14 KiB
HTML

<!DOCTYPE HTML>
<!--
Escape Velocity by HTML5 UP
html5up.net | @n33co
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Left Sidebar - >Escape Velocity by HTML5 UP</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.dropotron.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-layers.min.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel.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/ie/v8.css" /><![endif]-->
</head>
<body class="left-sidebar">
<!-- Header -->
<div id="header-wrapper" class="wrapper">
<div id="header">
<!-- Logo -->
<div id="logo">
<h1><a href="index.html">Escape Velocity</a></h1>
<p>A free responsive site template by HTML5 UP</p>
</div>
<!-- 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</a></li>
<li><a href="#">Magna veroeros</a></li>
<li><a href="#">Etiam nisl</a></li>
<li>
<a href="">Sed consequat</a>
<ul>
<li><a href="#">Lorem dolor</a></li>
<li><a href="#">Amet consequat</a></li>
<li><a href="#">Magna phasellus</a></li>
<li><a href="#">Etiam nisl</a></li>
<li><a href="#">Sed feugiat</a></li>
</ul>
</li>
<li><a href="#">Nisl tempus</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>
</div>
</div>
<!-- Main -->
<div class="wrapper style2">
<div class="title">Left Sidebar</div>
<div id="main" class="container">
<div class="row oneandhalf">
<div class="4u">
<!-- Sidebar -->
<div id="sidebar">
<section class="box">
<header>
<h2>Ipsum nullam luctus</h2>
</header>
<p>Malesuada quis eget eros. Nullam sodales cursus sapien, id consequat
leo suscipit ut. Praesent id turpis vitae turpis pretium ultricies. Vestibulum sit
amet risus elit.</p>
<a href="#" class="button style1">Learn More</a>
</section>
<section class="box">
<header>
<h2>Vitae turpis consequat</h2>
</header>
<ul class="style2">
<li>
<article class="box post-excerpt">
<a href="#" class="image left"><img src="images/pic08.jpg" alt="" /></a>
<h3><a href="#">Diam odio lorem</a></h3>
<p>Duis odio diam, luctus et vulputate vitae, vehicula ac dolor. Pellentesque at urna eget tellus sed etiam.</p>
</article>
</li>
<li>
<article class="box post-excerpt">
<a href="#" class="image left"><img src="images/pic09.jpg" alt="" /></a>
<h3><a href="#">Sed duis consequat</a></h3>
<p>Duis odio diam, luctus et vulputate vitae, vehicula ac dolor. Pellentesque at urna eget tellus sed etiam.</p>
</article>
</li>
<li>
<article class="box post-excerpt">
<a href="#" class="image left"><img src="images/pic10.jpg" alt="" /></a>
<h3><a href="#">Tellus nulla volutpat</a></h3>
<p>Duis odio diam, luctus et vulputate vitae, vehicula ac dolor. Pellentesque at urna eget tellus sed etiam.</p>
</article>
</li>
</ul>
<a href="#" class="button style1">Archives</a>
</section>
<section class="box">
<header>
<h2>Magna diam vehicula</h2>
</header>
<ul class="style3">
<li><a href="#">Nulla iaculis egestas varius</a></li>
<li><a href="#">Augue massa feugiat quam pretium</a></li>
<li><a href="#">Orci sem vel libero cras nisi odio</a></li>
<li><a href="#">Sed hendrerit massa nam mattis</a></li>
<li><a href="#">Turpis vel leo accumsan aliquet</a></li>
<li><a href="#">Dapibus mi fermentum fusce non</a></li>
<li><a href="#">Arcu laoreet sapien tempus</a></li>
<li><a href="#">Nulla iaculis egestas varius</a></li>
<li><a href="#">Augue massa feugiat quam pretium</a></li>
<li><a href="#">Orci sem vel libero cras nisi odio</a></li>
<li><a href="#">Sed hendrerit massa nam mattis</a></li>
</ul>
</section>
</div>
</div>
<div class="8u skel-cell-important">
<!-- Content -->
<div id="content">
<article class="box post">
<header class="style1">
<h2>Lorem ipsum dolor sit amet magna egestas morbi bibendum sed malesuada</h2>
<p>Tempus feugiat veroeros sed nullam dolore</p>
</header>
<a href="#" class="image featured">
<img src="images/pic01.jpg" alt="" />
</a>
<p>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget.
odio eleifend. Duis commodo fringilla commodo. Aliquam erat volutpat. Vestibulum
facilisis leo magna. Cras sit amet urna eros, id egestas urna. Quisque aliquam
tempus euismod. Vestibulum ante ipsum primis in faucibus.</p>
<p>Phasellus nisl nisl, varius id porttitor sed, pellentesque ac orci. Pellentesque
habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi
bibendum justo sed mauris vehicula malesuada aliquam elit imperdiet. Aliquam eu nibh
lorem, eget gravida mi. Duis odio diam, luctus et vulputate vitae, vehicula ac dolor.
Pellentesque at urna eget tellus lobortis ultrices sed non erat. Donec eget erat non
magna volutpat malesuada quis eget eros. Nullam sodales cursus sapien, id consequat
leo suscipit ut. Praesent id turpis vitae turpis pretium ultricies. Vestibulum sit
amet risus elit.</p>
<p>Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis enim, at viverra
ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel. Praesent nec orci
eget quam rutrum bibendum. Proin pellentesque diam non ligula commodo tempor. Vivamus
eget urna nibh. Curabitur non fringilla nisl. Donec accumsan interdum nisi, quis
tincidunt felis sagittis eget. Donec elementum ligula dignissim sem pulvinar non semper
odio eleifend. Duis commodo fringilla commodo. Aliquam erat volutpat. Vestibulum
facilisis leo magna. Cras sit amet urna eros, id egestas urna. Quisque aliquam
tempus euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia.</p>
<p>Phasellus nisl nisl, varius id porttitor sed, pellentesque ac orci. Pellentesque
habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi
bibendum justo sed mauris vehicula malesuada aliquam elit imperdiet. Aliquam eu nibh
lorem, eget gravida mi. Duis odio diam, luctus et vulputate vitae, vehicula ac dolor.
Pellentesque at urna eget tellus lobortis ultrices sed non erat. Donec eget erat non
magna volutpat malesuada quis eget eros. Nullam sodales cursus sapien, id consequat
leo suscipit ut. Praesent id turpis vitae turpis pretium ultricies. Vestibulum sit
amet risus elit.</p>
</article>
<div class="row oneandhalf">
<div class="6u">
<section class="box">
<header>
<h2>Magna pulvinar tempus</h2>
</header>
<a href="#" class="image featured"><img src="images/pic05.jpg" alt="" /></a>
<p>Rutrum bibendum. Proin pellentesque diam non ligula commodo tempor. Vivamus
eget urna nibh. Curabitur non fringilla nisl. Donec accumsan interdum nisi, quis
tempus.</p>
<a href="#" class="button style1">More</a>
</section>
</div>
<div class="6u">
<section class="box">
<header>
<h2>Magna pulvinar tempus</h2>
</header>
<a href="#" class="image featured"><img src="images/pic06.jpg" alt="" /></a>
<p>Rutrum bibendum. Proin pellentesque diam non ligula commodo tempor. Vivamus
eget urna nibh. Curabitur non fringilla nisl. Donec accumsan interdum nisi, quis
tempus.</p>
<a href="#" class="button style1">More</a>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Highlights -->
<div class="wrapper style3">
<div class="title">The Endorsements</div>
<div id="highlights" class="container">
<div class="row oneandhalf">
<div class="4u">
<section class="highlight">
<a href="#" class="image featured"><img src="images/pic02.jpg" alt="" /></a>
<h3><a href="#">Aliquam diam consequat</a></h3>
<p>Eget mattis at, laoreet vel amet sed velit aliquam diam ante, dolor aliquet sit amet vulputate mattis amet laoreet lorem.</p>
<ul class="actions">
<li><a href="#" class="button style1">Learn More</a></li>
</ul>
</section>
</div>
<div class="4u">
<section class="highlight">
<a href="#" class="image featured"><img src="images/pic03.jpg" alt="" /></a>
<h3><a href="#">Nisl adipiscing sed lorem</a></h3>
<p>Eget mattis at, laoreet vel amet sed velit aliquam diam ante, dolor aliquet sit amet vulputate mattis amet laoreet lorem.</p>
<ul class="actions">
<li><a href="#" class="button style1">Learn More</a></li>
</ul>
</section>
</div>
<div class="4u">
<section class="highlight">
<a href="#" class="image featured"><img src="images/pic04.jpg" alt="" /></a>
<h3><a href="#">Mattis tempus lorem</a></h3>
<p>Eget mattis at, laoreet vel amet sed velit aliquam diam ante, dolor aliquet sit amet vulputate mattis amet laoreet lorem.</p>
<ul class="actions">
<li><a href="#" class="button style1">Learn More</a></li>
</ul>
</section>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div id="footer-wrapper" class="wrapper">
<div class="title">The Rest Of It</div>
<div id="footer" class="container">
<header class="style1">
<h2>Ipsum sapien elementum portitor?</h2>
<p>
Sed turpis tortor, tincidunt sed ornare in metus porttitor mollis nunc in aliquet.<br />
Nam pharetra laoreet imperdiet volutpat etiam consequat feugiat.
</p>
</header>
<hr />
<div class="row oneandhalf">
<div class="6u">
<!-- Contact Form -->
<section>
<form method="post" action="#">
<div class="row half">
<div class="6u">
<input type="text" name="name" id="contact-name" placeholder="Name" />
</div>
<div class="6u">
<input type="text" name="email" id="contact-email" placeholder="Email" />
</div>
</div>
<div class="row half">
<div class="12u">
<textarea name="message" id="contact-message" placeholder="Message" rows="4"></textarea>
</div>
</div>
<div class="row">
<div class="12u">
<ul class="actions">
<li><input type="submit" class="style1" value="Send" /></li>
<li><input type="reset" class="style2" value="Reset" /></li>
</ul>
</div>
</div>
</form>
</section>
</div>
<div class="6u">
<!-- Contact -->
<section class="feature-list small">
<div class="row">
<div class="6u">
<section>
<h3 class="icon fa-home">Mailing Address</h3>
<p>
Untitled Corporation<br />
1234 Somewhere Rd #987<br />
Nashville, TN 00000-0000
</p>
</section>
</div>
<div class="6u">
<section>
<h3 class="icon fa-comment">Social</h3>
<p>
<a href="#">@untitled-corp</a><br />
<a href="#">linkedin.com/untitled</a><br />
<a href="#">facebook.com/untitled</a>
</p>
</section>
</div>
</div>
<div class="row">
<div class="6u">
<section>
<h3 class="icon fa-envelope">Email</h3>
<p>
<a href="#">info@untitled.tld</a>
</p>
</section>
</div>
<div class="6u">
<section>
<h3 class="icon fa-phone">Phone</h3>
<p>
(000) 555-0000
</p>
</section>
</div>
</div>
</section>
</div>
</div>
<hr />
</div>
<div id="copyright">
<ul>
<li>&copy; Untitled.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
</div>
</div>
</body>
</html>