219 lines
8.8 KiB
HTML
219 lines
8.8 KiB
HTML
|
<!DOCTYPE HTML>
|
||
|
|
<!--
|
||
|
|
Halcyonic by HTML5 UP
|
||
|
|
html5up.net | @ajlkn
|
||
|
|
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||
|
|
-->
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Two Column 1 - Halcyonic 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="subpage">
|
||
|
|
<div id="page-wrapper">
|
||
|
|
|
||
|
|
<!-- Header -->
|
||
|
|
<section id="header">
|
||
|
|
<div class="container">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-12">
|
||
|
|
|
||
|
|
<!-- Logo -->
|
||
|
|
<h1><a href="index.html" id="logo">Halcyonic</a></h1>
|
||
|
|
|
||
|
|
<!-- Nav -->
|
||
|
|
<nav id="nav">
|
||
|
|
<a href="index.html">Homepage</a>
|
||
|
|
<a href="threecolumn.html">Three Column</a>
|
||
|
|
<a href="twocolumn1.html">Two Column #1</a>
|
||
|
|
<a href="twocolumn2.html">Two Column #2</a>
|
||
|
|
<a href="onecolumn.html">One Column</a>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Content -->
|
||
|
|
<section id="content">
|
||
|
|
<div class="container">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-9 col-12-medium">
|
||
|
|
|
||
|
|
<!-- Main Content -->
|
||
|
|
<section>
|
||
|
|
<header>
|
||
|
|
<h2>Two Column #1</h2>
|
||
|
|
<h3>A generic two column layout</h3>
|
||
|
|
</header>
|
||
|
|
<p>
|
||
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quam metus, congue
|
||
|
|
vel suscipit ut, dignissim non risus. Vestibulum ante est, fringilla nec placerat
|
||
|
|
eu, vestibulum vitae diam. Integer eget egestas eros. Duis enim erat, mollis quis
|
||
|
|
lacinia eget, blandit nec ipsum. Donec vitae turpis ipsum. Aliquam mauris libero,
|
||
|
|
sagittis in eleifend at, mattis imperdiet velit. Donec urna risus, rutrum molestie
|
||
|
|
varius ac, lacinia sit amet augue. Nam ultrices elementum eros.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Sed faucibus viverra ligula, non varius magna semper vitae. Donec eu justo ut ipsum
|
||
|
|
hendrerit congue nec eu risus. Cum sociis natoque penatibus et magnis dis parturient
|
||
|
|
montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing
|
||
|
|
egestas tempus. Cras convallis odio sit amet risus convallis porttitor. Integer
|
||
|
|
vehicula fermentum ligula at pretium. Suspendisse semper iaculis eros, eu aliquam
|
||
|
|
justo imperdiet vel. Proin nec dictum mi. Duis commodo enim non tellus interdum
|
||
|
|
elit. Suspendisse fermentum adipiscing nisi, a tempor libero malesuada at. Morbi
|
||
|
|
lacinia dui adipiscing risus eleifend tincidunt. Proin eu mauris eu tellus eleifend
|
||
|
|
hendrerit.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Mauris sit amet tellus urna. In facilisis, tortor vitae ultricies egestas, odio
|
||
|
|
mi rhoncus arcu, quis euismod felis felis et velit. Mauris varius consectetur erat
|
||
|
|
egestas tempus. Cras convallis odio sit amet risus convallis porttitor. Integer
|
||
|
|
vehicula fermentum ligula at pretium. Suspendisse semper iaculis eros, eu aliquam
|
||
|
|
justo imperdiet vel. Proin nec dictum mi. Duis commodo enim non tellus interdum
|
||
|
|
iaculis. Phasellus ultrices diam sit amet orci lacinia sed consequat dui auctor.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Sed faucibus viverra ligula, non varius magna semper vitae. Donec eu justo ut ipsum
|
||
|
|
hendrerit congue nec eu risus. Cum sociis natoque penatibus et magnis dis parturient
|
||
|
|
montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing
|
||
|
|
egestas tempus. Cras convallis odio sit amet risus convallis porttitor. Integer
|
||
|
|
vehicula fermentum ligula at pretium. Suspendisse semper iaculis eros, eu aliquam
|
||
|
|
justo imperdiet vel. Proin nec dictum mi. Duis commodo enim non tellus interdum
|
||
|
|
elit. Suspendisse fermentum adipiscing nisi, a tempor libero malesuada at. Morbi
|
||
|
|
lacinia dui adipiscing risus eleifend tincidunt. Proin eu mauris eu tellus eleifend
|
||
|
|
hendrerit.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Mauris sit amet tellus urna. In facilisis, tortor vitae ultricies egestas, odio
|
||
|
|
mi rhoncus arcu, quis euismod felis felis et velit. Mauris varius consectetur erat
|
||
|
|
egestas tempus. Cras convallis odio sit amet risus convallis porttitor. Integer
|
||
|
|
vehicula fermentum ligula at pretium. Suspendisse semper iaculis eros, eu aliquam
|
||
|
|
justo imperdiet vel. Proin nec dictum mi. Duis commodo enim non tellus interdum
|
||
|
|
iaculis. Phasellus ultrices diam sit amet orci lacinia sed consequat dui auctor.
|
||
|
|
</p>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="col-3 col-12-medium">
|
||
|
|
|
||
|
|
<!-- Sidebar -->
|
||
|
|
<section>
|
||
|
|
<header>
|
||
|
|
<h2>Magna Phasellus</h2>
|
||
|
|
</header>
|
||
|
|
<ul class="link-list">
|
||
|
|
<li><a href="#">Sed dolore viverra</a></li>
|
||
|
|
<li><a href="#">Ligula non varius</a></li>
|
||
|
|
<li><a href="#">Nec sociis natoque</a></li>
|
||
|
|
<li><a href="#">Penatibus et magnis</a></li>
|
||
|
|
<li><a href="#">Dis parturient montes</a></li>
|
||
|
|
<li><a href="#">Nascetur ridiculus</a></li>
|
||
|
|
</ul>
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<header>
|
||
|
|
<h2>Ipsum Dolor</h2>
|
||
|
|
</header>
|
||
|
|
<p>
|
||
|
|
Vehicula fermentum ligula at pretium. Suspendisse semper iaculis eros, eu aliquam
|
||
|
|
iaculis. Phasellus ultrices diam sit amet orci lacinia sed consequat.
|
||
|
|
</p>
|
||
|
|
<ul class="link-list">
|
||
|
|
<li><a href="#">Sed dolore viverra</a></li>
|
||
|
|
<li><a href="#">Ligula non varius</a></li>
|
||
|
|
<li><a href="#">Dis parturient montes</a></li>
|
||
|
|
<li><a href="#">Nascetur ridiculus</a></li>
|
||
|
|
</ul>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Footer -->
|
||
|
|
<section id="footer">
|
||
|
|
<div class="container">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-8 col-12-medium">
|
||
|
|
|
||
|
|
<!-- Links -->
|
||
|
|
<section>
|
||
|
|
<h2>Links to Important Stuff</h2>
|
||
|
|
<div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-3 col-12-small">
|
||
|
|
<ul class="link-list last-child">
|
||
|
|
<li><a href="#">Neque amet dapibus</a></li>
|
||
|
|
<li><a href="#">Sed mattis quis rutrum</a></li>
|
||
|
|
<li><a href="#">Accumsan suspendisse</a></li>
|
||
|
|
<li><a href="#">Eu varius vitae magna</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="col-3 col-12-small">
|
||
|
|
<ul class="link-list last-child">
|
||
|
|
<li><a href="#">Neque amet dapibus</a></li>
|
||
|
|
<li><a href="#">Sed mattis quis rutrum</a></li>
|
||
|
|
<li><a href="#">Accumsan suspendisse</a></li>
|
||
|
|
<li><a href="#">Eu varius vitae magna</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="col-3 col-12-small">
|
||
|
|
<ul class="link-list last-child">
|
||
|
|
<li><a href="#">Neque amet dapibus</a></li>
|
||
|
|
<li><a href="#">Sed mattis quis rutrum</a></li>
|
||
|
|
<li><a href="#">Accumsan suspendisse</a></li>
|
||
|
|
<li><a href="#">Eu varius vitae magna</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="col-3 col-12-small">
|
||
|
|
<ul class="link-list last-child">
|
||
|
|
<li><a href="#">Neque amet dapibus</a></li>
|
||
|
|
<li><a href="#">Sed mattis quis rutrum</a></li>
|
||
|
|
<li><a href="#">Accumsan suspendisse</a></li>
|
||
|
|
<li><a href="#">Eu varius vitae magna</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="col-4 col-12-medium imp-medium">
|
||
|
|
|
||
|
|
<!-- Blurb -->
|
||
|
|
<section>
|
||
|
|
<h2>An Informative Text Blurb</h2>
|
||
|
|
<p>
|
||
|
|
Duis neque nisi, dapibus sed mattis quis, rutrum accumsan sed. Suspendisse eu
|
||
|
|
varius nibh. Suspendisse vitae magna eget odio amet mollis. Duis neque nisi,
|
||
|
|
dapibus sed mattis quis, sed rutrum accumsan sed. Suspendisse eu varius nibh
|
||
|
|
lorem ipsum amet dolor sit amet lorem ipsum consequat gravida justo mollis.
|
||
|
|
</p>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Copyright -->
|
||
|
|
<div id="copyright">
|
||
|
|
© Untitled. All rights reserved. | Design: <a href="http://html5up.net">HTML5 UP</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Scripts -->
|
||
|
|
<script src="assets/js/jquery.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>
|