31 Commits
v0.2 ... v0.3

Author SHA1 Message Date
Gerolf Ziegenhain
e8b584c6ee img adjust 2015-04-30 00:35:14 +02:00
Gerolf Ziegenhain
6bf893ab0f roughly done 2015-04-30 00:30:20 +02:00
Gerolf Ziegenhain
827213bc5b prototype 2015-04-30 00:20:13 +02:00
Gerolf Ziegenhain
506675f70f wip 2015-04-30 00:16:18 +02:00
Gerolf Ziegenhain
245912e771 wip 2015-04-29 23:43:08 +02:00
Gerolf Ziegenhain
9f28f7aa31 wip 2015-04-29 22:53:54 +02:00
Gerolf Ziegenhain
61cffd745a cleanup 2015-04-29 22:42:52 +02:00
Gerolf Ziegenhain
c65029852d https://03a7a917-a-62cb3a1a-s-sites.googlegroups.com/site/morsekob/interface/Interface-View-A_IGP5360.gif?attachauth=ANoY7cqdHOQ94I5hmeDcJ4mM04G5J-vUCnB0wqcqDsoc7MtH0_iP8QVOn6zWN_sjBUPP3uJ5rcl6STjkoxQ0lQZr48M6xj3yHC340NyUEMKtqoMyk6yFTIA5Q9pCCqRC9cf0smCZrXmutIzFzYUoN6z89jDC-0zxo2NB8XWCWG6x_bRLy8ozX37d_Wo_0aJtERY9nVsIr3QXjq91gPQ4put-YDVG9YQNaSp5r_s1VJohqYYYXQTm8TM%3D&attredirects=0 2015-04-29 22:42:43 +02:00
Gerolf Ziegenhain
d62ec12266 https://sites.google.com/site/morsekob/_/rsrc/1372921828835/server/Block%20diagram.png 2015-04-29 22:32:18 +02:00
Gerolf Ziegenhain
e583ae6e5f http://kob.sdf.org/morsekob/morsekob25/images/bug.jpg 2015-04-29 22:31:28 +02:00
Gerolf Ziegenhain
fc10fd3189 cleanup 2015-04-29 22:27:28 +02:00
Gerolf Ziegenhain
f07a15753a wip 2015-04-29 22:27:01 +02:00
Gerolf Ziegenhain
5227d910e5 https://sites.google.com/site/morsekob/_/rsrc/1388304228879/morsekob25/screenshot.gif?height=300&width=400 2015-04-29 21:58:35 +02:00
Gerolf Ziegenhain
ff06d08a02 https://sites.google.com/site/morsekob/_/rsrc/1388304228879/morsekob25/screenshot.gif?height=300&width=400 2015-04-29 21:58:01 +02:00
Gerolf Ziegenhain
b9205b94b8 cwcom wine 2015-04-29 21:54:40 +02:00
Gerolf Ziegenhain
1c86165399 java client 2015-04-29 21:51:10 +02:00
Gerolf Ziegenhain
1d45834bfa prototype 2015-04-29 21:47:27 +02:00
Gerolf Ziegenhain
dd728e77b7 prototype 2015-04-29 21:43:30 +02:00
Gerolf Ziegenhain
cef791dc39 screenshot 2015-04-29 21:38:48 +02:00
Gerolf Ziegenhain
819d3b271e wip 2015-04-29 21:30:08 +02:00
Gerolf Ziegenhain
b24e3cace1 http://www.i2rtf.com/assets/images/Intrepid01.jpg 2015-04-29 21:00:08 +02:00
Gerolf Ziegenhain
7101af2f10 cleanup 2015-04-29 20:43:10 +02:00
Gerolf Ziegenhain
cfa865af8e geyed out 2015-04-29 20:42:50 +02:00
Gerolf Ziegenhain
dad9d88882 bg img 2015-04-29 20:33:56 +02:00
Gerolf Ziegenhain
05c5196320 https://www.q-files.com/images/pages/galleries/456/historyoftelecommunications-telegraph.jpg?517 2015-04-29 20:30:00 +02:00
Gerolf Ziegenhain
aca9bc179b https://upload.wikimedia.org/wikipedia/commons/a/a5/PSM_V03_D424_Morse_key.jpg?uselang=de 2015-04-29 20:25:26 +02:00
Gerolf Ziegenhain
6b1993f61e https://commons.wikimedia.org/wiki/File:Morse_learner%27s_key_and_automatic_sender_(Rankin_Kennedy,_Electrical_Installations,_Vol_V,_1903).jpg 2015-04-29 20:25:15 +02:00
Gerolf Ziegenhain
5d32920619 wip 2015-04-28 22:55:49 +02:00
Gerolf Ziegenhain
52462fd253 new linux file 2015-04-23 20:26:31 +02:00
Gerolf Ziegenhain
4c3d99e26a new linux file 2015-04-23 20:23:40 +02:00
Gerolf Ziegenhain
d5731c6302 rm sidebars 2015-04-23 20:20:42 +02:00
21 changed files with 211 additions and 1289 deletions

1
.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
.DS_Store

View File

@@ -689,7 +689,7 @@
#header
{
position: relative;
background-image: url('../images/header.jpg');
background-image: url('../images/keying.jpg');
background-size: cover;
background-position: center center;
background-attachment: fixed;

BIN
images/KOB.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

BIN
images/architecture.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

BIN
images/arduino_irmc.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.1 MiB

BIN
images/begali_key.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 89 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
images/interface_serial.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

BIN
images/interface_tunkey.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 763 KiB

BIN
images/ios_irmc.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
images/java_morsekob.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

BIN
images/key.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 91 KiB

BIN
images/keying.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 81 KiB

View File

Before

Width:  |  Height:  |  Size: 189 KiB

After

Width:  |  Height:  |  Size: 189 KiB

BIN
images/osx_irmc.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

BIN
images/windows_cwcom.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

BIN
images/windows_morsekob.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

View File

@@ -6,7 +6,7 @@
-->
<html>
<head>
<title>Helios by HTML5 UP</title>
<title>Morse Code over IP</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
@@ -27,222 +27,223 @@
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
</head>
<body class="homepage">
<!-- Header -->
<div id="header">
<!-- Header -->
<div id="header">
<!-- Inner -->
<div class="inner">
<header>
<h1><a href="index.html" id="logo">MoIP - Morse Code over IP</a></h1>
<hr />
<p>Morse Code over IP</p>
</header>
<footer>
<a href="#gettingstarted">Getting Started</a>
</footer>
</div>
<!-- Inner -->
<div class="inner">
<header>
<h1><a href="index.html" id="logo">Helios</a></h1>
<hr />
<p>Another fine freebie by HTML5 UP</p>
</header>
<footer>
<a href="#banner" class="button circled scrolly">Start</a>
</footer>
</div>
<!-- Nav -->
<nav id="nav">
<ul>
<li><a href="#whymorsecode">Why Morse Code?</a></li>
<li><a href="#whatismoip">What is MoIP?</a> </li>
<li><a href="#software">Download Software</a> </li>
<li><a href="#hardware">Hardware Interfaces</a> </li>
<li><a href="#">Servers</a>
<ul>
<li><a href="http://mtc-kob.dyndns.org" target=_new>MorseKOB</a></li>
<li><a href="http://morsecode.dyndns.org" target=_new>CWCom</a></li>
<li><a href="http://morsecode.dc3.com:7890" target=_new>Relay Server</a></li>
</ul>
</li>
</ul>
</nav>
</div>
<!-- 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="">And a submenu &hellip;</a>
<ul>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Phasellus consequat</a></li>
<li><a href="#">Magna phasellus</a></li>
<li><a href="#">Etiam dolore nisl</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>
<!-- Why Morse Code? -->
<a name="whymorsecode"></a>
<div class="wrapper style2">
<article id="main" class="container special">
<header>
<h2><a href="#">Why Morse Code?</a></h2>
<p>
We believe the cultural legacy morse code shall live on in the information age.
</p>
</header>
<p>
For a period of ca. seventy years telecommunication was only possible by way of transmission methods using the Morse code.
The Morse alphabet, in the form still officially and globally widespread to this day, was invented a good 150 years ago by
the German Clemens Gerke. This art of broadcasting messages by way of Morse telegraphy was and still is only possible if one
has specialist knowledge and skills. It is a type of intercultural form of culture and communication that overcomes the
barriers of time and space
(<a href="http://www.unesco.de/en/kultur/immaterielles-kulturerbe/german-inventory/inscription/morse-telegraphy.html" target=_new>
Morse Code as UNESCO Intangible Cultural Heritage</a>).
The transmission of messages by way of the Morse code is nowadays no longer necessary for technological,
economic and military reasons.
Morse code is fun to learn (<a href="http://www.lcwo.net" target=_new>lcwo</a>, <a href="http://www.tasrt.ca/TASRTVersions/TASRT.pdf" target=_new>N0HFF</a>) and due to its simplicity wide range of experiments with communication
technologies can done with little cost.
</p>
</article>
</div>
</div>
<!-- What is MoIP? -->
<a name="whatismoip"></a>
<div class="wrapper style2">
<article id="main" class="container special">
<header>
<h2><a href="#">What is MoIP?</a></h2>
<p>
<s>Voice</s> Morse over IP.
</p>
</header>
<p>
<a name="history"></a>
For morse code over IP we use the well-establised
<a href="https://github.com/8cH9azbsFifZ/moip/blob/master/doc/cwcom.pdf" target=_new>CWCom protocol</a> (since 1998) invented by
John Samin (VK1EME). Its efficient method to transmit only the elapsed times between
state changes of the morse key with UDP saves our bandwidth. Shortly after the launch of the original CWCom software
Les Kerr released the open source software MorseKOB. He also extended the CWCom protocol for landline telegraphy
by implementing closed circuits (latching).
Compatibility between the original CWCom server and the MorseKOB server is guaranteed by a relay server
written by Bob Denny.
Today we have software clients for Windows, Linux, iOS and even Arduino.
Any client can connect to any of the servers.
Hardware interfaces for morse keys and telegraph sounders are available for serial port, USB, Raspi GPIO or bluetooth.
</p>
<p>
<a name="architecture"></a>
<a href="#" class="image featured"><img src="images/architecture.png" alt="" /></a>
</p>
</article>
</div>
<!-- Banner -->
<section id="banner">
<header>
<h2>Hi. You're looking at <strong>Helios</strong>.</h2>
<p>
A (free) responsive site template by <a href="http://html5up.net">HTML5 UP</a>.
Built on <strong>skel</strong> and released under the <a href="http://html5up.net/license">CCA</a> license.
</p>
</header>
</section>
<!-- Carousel -->
<section class="carousel">
<div class="reel">
<article>
<a href="#" class="image featured"><img src="images/pic01.jpg" alt="" /></a>
<header>
<h3><a href="#">Pulvinar sagittis congue</a></h3>
</header>
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
</article>
<!-- Software -->
<a name=software></a>
<div class="wrapper style1">
<section id="features" class="container special">
<header>
<h2><a href=#>Software Clients</a></h2>
<p>Arduino, Linux, iOS, OSX, Windows</p>
</header>
<div class="row">
<article class="4u special">
<a name="arduino"></>
<a href="https://github.com/8cH9azbsFifZ/irmc-avr" target=_new class="image featured"><img src="images/arduino_irmc.png" alt="" /></a>
<header>
<h3><a href="#">Arduino</a></h3>
</header>
<p>
<a href="https://github.com/8cH9azbsFifZ/irmc-avr" target=_new>irmc-avr</a> on duemilanove &amp; W5100.
Arduino: <a href="https://github.com/8cH9azbsFifZ/irmc-avr" target=_new>irmc-avr</a> is an arduiono implementation under GPL.
</p>
</article>
<article class="4u special">
<a href="http://kob.sdf.org/morsekob/morsekob25/index.htm" target=_new class="image featured"><img src="images/windows_morsekob.png" alt="" /></a>
<header>
<h3><a href="#">Windows</a></h3>
</header>
<p>
<a href="http://kob.sdf.org/morsekob/morsekob25/index.htm" target=_new>MorseKOB 2.5</a> on Windows.
Windows: <a href="http://kob.sdf.org/morsekob/morsekob25/index.htm" target=_new>MorseKOB 2.5</a> is the original MorseKOB Software by Les Kerr. The source code is hosted officially on <a href="https://sites.google.com/site/morsekob/morsekob25" target=_new>google</a>.
Linux, OSX: <a href="https://sites.google.com/site/morsekob/morsekob40" target=_new>MorseKOB 4.0</a> is a Python implementation including Raspi support by Les Kerr. This version is currently in alpha state.
</p>
</article>
<article class="4u special">
<a href="https://github.com/8cH9azbsFifZ/irmc" target=_new class="image featured"><img src="images/osx_irmc.png" alt="" /></a>
<header>
<h3><a href="#">Linux / OSX</a></h3>
</header>
<p>
<a href="https://github.com/8cH9azbsFifZ/irmc" target=_new>irmc</a> with serial key.
Linux, OSX and BSD: <a href="https://github.com/8cH9azbsFifZ/irmc" target=_new>irmc</a> is a GPL licensed C implementation of morsekob.
</p>
</article>
</div>
<div class="row">
<article class="4u special">
<a name="ios"></a>
<a href="https://github.com/8cH9azbsFifZ/irmc-ios" target=_new class="image featured"><img src="images/ios_irmc.jpg" alt="" /></a>
<header>
<h3><a href="#">iOS</a></h3>
</header>
<p>
<a href="https://github.com/8cH9azbsFifZ/irmc-ios" target=_new>irmc-ios</a> on iPhone 5s &amp; bt key.
iOS: <a href="https://github.com/8cH9azbsFifZ/irmc-ios" target=_new>irmc-ios</a> is a iOS port with support for external key using bluetooth <a href="https://github.com/8cH9azbsFifZ/ble-morse" target=_new>ble-morse</a> under GPL.
</p>
</article>
<article class="4u special">
<a href="http://www.mrx.com.au/d_cwcom.htm" target=_new class="image featured"><img src="images/windows_cwcom.png" alt="" /></a>
<header>
<h3><a href="#">Windows</a></h3>
</header>
<p>
<a href="http://www.mrx.com.au/d_cwcom.htm" target=_new>CW Communicator</a> Wine on OSX.
Windows: <a href="http://www.mrx.com.au/d_cwcom.htm" target=_new>CWCom</a> is the closed source original cwcom software by John Samin.
</p>
</article>
<article class="4u special">
<a name="java"></a>
<a href="http://kob.sdf.org/morsekob/morsekob30/index.htm" target=_new class="image featured"><img src="images/java_morsekob.png" alt="" /></a>
<header>
<h3><a href="#">Java</a></h3>
</header>
<p>
<a href="http://kob.sdf.org/morsekob/morsekob30/index.htm" target=_new>MorseKOB 3.0</a> running in browser.
Java (Browser): <a href="http://kob.sdf.org/morsekob/morsekob30/index.htm" target=_new>MorseKOB 3.0</a> is a Java implementation of MorseKOB by Les Kerr.
</p>
</article>
</div>
</section>
</div>
<article>
<a href="#" class="image featured"><img src="images/pic02.jpg" alt="" /></a>
<header>
<h3><a href="#">Fermentum sagittis proin</a></h3>
</header>
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
</article>
<article>
<a href="#" class="image featured"><img src="images/pic03.jpg" alt="" /></a>
<header>
<h3><a href="#">Sed quis rhoncus placerat</a></h3>
</header>
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
</article>
<article>
<a href="#" class="image featured"><img src="images/pic04.jpg" alt="" /></a>
<header>
<h3><a href="#">Ultrices urna sit lobortis</a></h3>
</header>
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
</article>
<article>
<a href="#" class="image featured"><img src="images/pic05.jpg" alt="" /></a>
<header>
<h3><a href="#">Varius magnis sollicitudin</a></h3>
</header>
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
</article>
<article>
<a href="#" class="image featured"><img src="images/pic01.jpg" alt="" /></a>
<header>
<h3><a href="#">Pulvinar sagittis congue</a></h3>
</header>
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
</article>
<!-- Hardware -->
<a name=hardware></a>
<div class="wrapper style1">
<section id="features" class="container special">
<header>
<h2><a href=#>Hardware Interfaces</a></h2>
<p>Bluetooth, USB and serial Port.</p>
</header>
<div class="row">
<article class="4u special">
<a href="http://kob.sdf.org/morsekob/interface.htm" target=_new class="image featured"><img src="images/interface_serial.jpg" alt="" /></a>
<header>
<h3><a href="#">Serial / USB</a></h3>
</header>
<p>
Interface cirucuit description for key (and optional sounder) for serial port interfaces. USB-to-serial adapters are covered.
</p>
</article>
<article class="4u special">
<a href="https://sites.google.com/site/morsekob/interface" target=_new class="image featured"><img src="images/interface_tunkey.png" alt="" /></a>
<header>
<h3><a href="#">USB / Serial</a></h3>
</header>
<p>
A manufactured PCB with interface for key (and optional sounder) for both USB and serial ports.
</p>
</article>
<article class="4u special">
<a href="https://github.com/8cH9azbsFifZ/ble-morse" target=_new class="image featured"><img src="images/interface_bluetooth.jpg" alt="" /></a>
<header>
<h3><a href="#">Bluetooth</a></h3>
</header>
<p>
An interface using bluetooth low energy for key only. Supports iOS app so far.
</p>
</article>
</div>
</section>
</div>
<article>
<a href="#" class="image featured"><img src="images/pic02.jpg" alt="" /></a>
<header>
<h3><a href="#">Fermentum sagittis proin</a></h3>
</header>
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
</article>
<article>
<a href="#" class="image featured"><img src="images/pic03.jpg" alt="" /></a>
<header>
<h3><a href="#">Sed quis rhoncus placerat</a></h3>
</header>
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
</article>
<article>
<a href="#" class="image featured"><img src="images/pic04.jpg" alt="" /></a>
<header>
<h3><a href="#">Ultrices urna sit lobortis</a></h3>
</header>
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
</article>
<article>
<a href="#" class="image featured"><img src="images/pic05.jpg" alt="" /></a>
<header>
<h3><a href="#">Varius magnis sollicitudin</a></h3>
</header>
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
</article>
</div>
</section>
<!-- Main -->
<div class="wrapper style2">
<article id="main" class="container special">
<a href="#" class="image featured"><img src="images/pic06.jpg" alt="" /></a>
<header>
<h2><a href="#">Sed massa imperdiet magnis</a></h2>
<p>
Sociis aenean eu aenean mollis mollis facilisis primis ornare penatibus aenean. Cursus ac enim
pulvinar curabitur morbi convallis. Lectus malesuada sed fermentum dolore amet.
</p>
</header>
<p>
Commodo id natoque malesuada sollicitudin elit suscipit. Curae suspendisse mauris posuere accumsan massa
posuere lacus convallis tellus interdum. Amet nullam fringilla nibh nulla convallis ut venenatis purus
sit arcu sociis. Nunc fermentum adipiscing tempor cursus nascetur adipiscing adipiscing. Primis aliquam
mus lacinia lobortis phasellus suscipit. Fermentum lobortis non tristique ante proin sociis accumsan
lobortis. Auctor etiam porttitor phasellus tempus cubilia ultrices tempor sagittis. Nisl fermentum
consequat integer interdum integer purus sapien. Nibh eleifend nulla nascetur pharetra commodo mi augue
interdum tellus. Ornare cursus augue feugiat sodales velit lorem. Semper elementum ullamcorper lacinia
natoque aenean scelerisque.
</p>
<footer>
<a href="#" class="button">Continue Reading</a>
</footer>
</article>
</div>
<!-- Features -->
<div class="wrapper style1">
<section id="features" class="container special">
<header>
<h2>Morbi ullamcorper et varius leo lacus</h2>
<p>Ipsum volutpat consectetur orci metus consequat imperdiet duis integer semper magna.</p>
</header>
<div class="row">
<article class="4u special">
<a href="#" class="image featured"><img src="images/pic07.jpg" alt="" /></a>
<header>
<h3><a href="#">Gravida aliquam penatibus</a></h3>
</header>
<p>
Amet nullam fringilla nibh nulla convallis tique ante proin sociis accumsan lobortis. Auctor etiam
porttitor phasellus tempus cubilia ultrices tempor sagittis. Nisl fermentum consequat integer interdum.
</p>
</article>
<article class="4u special">
<a href="#" class="image featured"><img src="images/pic08.jpg" alt="" /></a>
<header>
<h3><a href="#">Sed quis rhoncus placerat</a></h3>
</header>
<p>
Amet nullam fringilla nibh nulla convallis tique ante proin sociis accumsan lobortis. Auctor etiam
porttitor phasellus tempus cubilia ultrices tempor sagittis. Nisl fermentum consequat integer interdum.
</p>
</article>
<article class="4u special">
<a href="#" class="image featured"><img src="images/pic09.jpg" alt="" /></a>
<header>
<h3><a href="#">Magna laoreet et aliquam</a></h3>
</header>
<p>
Amet nullam fringilla nibh nulla convallis tique ante proin sociis accumsan lobortis. Auctor etiam
porttitor phasellus tempus cubilia ultrices tempor sagittis. Nisl fermentum consequat integer interdum.
</p>
</article>
</div>
</section>
</div>
<!-- Footer -->
<div id="footer">

View File

@@ -1,389 +0,0 @@
<!DOCTYPE HTML>
<!--
Helios 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 - Helios 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/jquery.scrolly.min.js"></script>
<script src="js/jquery.onvisible.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" />
<link rel="stylesheet" href="css/style-noscript.css" />
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
</head>
<body class="left-sidebar">
<!-- Header -->
<div id="header">
<!-- Inner -->
<div class="inner">
<header>
<h1><a href="index.html" id="logo">Helios</a></h1>
</header>
</div>
<!-- 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="">And a submenu &hellip;</a>
<ul>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Phasellus consequat</a></li>
<li><a href="#">Magna phasellus</a></li>
<li><a href="#">Etiam dolore nisl</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>
</div>
<!-- Main -->
<div class="wrapper style1">
<div class="container">
<div class="row 200%">
<div class="4u" id="sidebar">
<hr class="first" />
<section>
<header>
<h3><a href="#">Accumsan sed penatibus</a></h3>
</header>
<p>
Dolor sed fringilla nibh nulla convallis tique ante proin sociis accumsan lobortis. Auctor etiam
porttitor phasellus tempus cubilia ultrices tempor sagittis tellus ante diam nec penatibus dolor cras
magna tempus feugiat veroeros.
</p>
<footer>
<a href="#" class="button">Learn More</a>
</footer>
</section>
<hr />
<section>
<header>
<h3><a href="#">Sed lorem etiam consequat</a></h3>
</header>
<p>
Tempus cubilia ultrices tempor sagittis. Nisl fermentum consequat integer interdum.
</p>
<div class="row 50% no-collapse">
<div class="4u">
<a href="#" class="image fit"><img src="images/pic10.jpg" alt="" /></a>
</div>
<div class="8u">
<h4>Nibh sed cubilia</h4>
<p>
Amet nullam fringilla nibh nulla convallis tique ante proin.
</p>
</div>
</div>
<div class="row 50% no-collapse">
<div class="4u">
<a href="#" class="image fit"><img src="images/pic11.jpg" alt="" /></a>
</div>
<div class="8u">
<h4>Proin sed adipiscing</h4>
<p>
Amet nullam fringilla nibh nulla convallis tique ante proin.
</p>
</div>
</div>
<div class="row 50% no-collapse">
<div class="4u">
<a href="#" class="image fit"><img src="images/pic12.jpg" alt="" /></a>
</div>
<div class="8u">
<h4>Lorem feugiat magna</h4>
<p>
Amet nullam fringilla nibh nulla convallis tique ante proin.
</p>
</div>
</div>
<div class="row 50% no-collapse">
<div class="4u">
<a href="#" class="image fit"><img src="images/pic13.jpg" alt="" /></a>
</div>
<div class="8u">
<h4>Sed tempus fringilla</h4>
<p>
Amet nullam fringilla nibh nulla convallis tique ante proin.
</p>
</div>
</div>
<div class="row 50% no-collapse">
<div class="4u">
<a href="#" class="image fit"><img src="images/pic14.jpg" alt="" /></a>
</div>
<div class="8u">
<h4>Malesuada fermentum</h4>
<p>
Amet nullam fringilla nibh nulla convallis tique ante proin.
</p>
</div>
</div>
<footer>
<a href="#" class="button">Magna Adipiscing</a>
</footer>
</section>
</div>
<div class="8u important(collapse)" id="content">
<article id="main">
<header>
<h2><a href="#">Left Sidebar</a></h2>
<p>
Morbi convallis lectus malesuada sed fermentum dolore amet
</p>
</header>
<a href="#" class="image featured"><img src="images/pic06.jpg" alt="" /></a>
<p>
Commodo id natoque malesuada sollicitudin elit suscipit. Curae suspendisse mauris posuere accumsan massa
posuere lacus convallis tellus interdum. Amet nullam fringilla nibh nulla convallis ut venenatis purus
lobortis. Auctor etiam porttitor phasellus tempus cubilia ultrices tempor sagittis. Nisl fermentum
consequat integer interdum integer purus sapien. Nibh eleifend nulla nascetur pharetra commodo mi augue
interdum tellus. Ornare cursus augue feugiat sodales velit lorem. Semper elementum ullamcorper lacinia
natoque aenean scelerisque vel lacinia mollis quam sodales congue.
</p>
<section>
<header>
<h3>Ultrices tempor sagittis nisl</h3>
</header>
<p>
Nascetur volutpat nibh ullamcorper vivamus at purus. Cursus ultrices porttitor sollicitudin imperdiet
at pretium tellus in euismod a integer sodales neque. Nibh quis dui quis mattis eget imperdiet venenatis
feugiat. Neque primis ligula cum erat aenean tristique luctus risus ipsum praesent iaculis. Fermentum elit
fringilla consequat dis arcu. Pellentesque mus tempor vitae pretium sodales porttitor lacus. Phasellus
egestas odio nisl duis sociis purus faucibus morbi. Eget massa mus etiam sociis pharetra magna.
</p>
<p>
Eleifend auctor turpis magnis sed porta nisl pretium. Aenean suspendisse nulla eget sed etiam parturient
orci cursus nibh. Quisque eu nec neque felis laoreet diam morbi egestas. Dignissim cras rutrum consectetur
ut penatibus fermentum nibh erat malesuada varius.
</p>
</section>
<section>
<header>
<h3>Augue euismod feugiat tempus</h3>
</header>
<p>
Pretium tellus in euismod a integer sodales neque. Nibh quis dui quis mattis eget imperdiet venenatis
feugiat. Neque primis ligula cum erat aenean tristique luctus risus ipsum praesent iaculis. Fermentum elit
ut nunc urna volutpat donec cubilia commodo risus morbi. Lobortis vestibulum velit malesuada ante
egestas odio nisl duis sociis purus faucibus morbi. Eget massa mus etiam sociis pharetra magna.
</p>
</section>
</article>
</div>
</div>
<hr />
<div class="row">
<article class="4u special">
<a href="#" class="image featured"><img src="images/pic07.jpg" alt="" /></a>
<header>
<h3><a href="#">Gravida aliquam penatibus</a></h3>
</header>
<p>
Amet nullam fringilla nibh nulla convallis tique ante proin sociis accumsan lobortis. Auctor etiam
porttitor phasellus tempus cubilia ultrices tempor sagittis. Nisl fermentum consequat integer interdum.
</p>
</article>
<article class="4u special">
<a href="#" class="image featured"><img src="images/pic08.jpg" alt="" /></a>
<header>
<h3><a href="#">Sed quis rhoncus placerat</a></h3>
</header>
<p>
Amet nullam fringilla nibh nulla convallis tique ante proin sociis accumsan lobortis. Auctor etiam
porttitor phasellus tempus cubilia ultrices tempor sagittis. Nisl fermentum consequat integer interdum.
</p>
</article>
<article class="4u special">
<a href="#" class="image featured"><img src="images/pic09.jpg" alt="" /></a>
<header>
<h3><a href="#">Magna laoreet et aliquam</a></h3>
</header>
<p>
Amet nullam fringilla nibh nulla convallis tique ante proin sociis accumsan lobortis. Auctor etiam
porttitor phasellus tempus cubilia ultrices tempor sagittis. Nisl fermentum consequat integer interdum.
</p>
</article>
</div>
</div>
</div>
<!-- Footer -->
<div id="footer">
<div class="container">
<div class="row">
<!-- Tweets -->
<section class="4u">
<header>
<h2 class="icon fa-twitter circled"><span class="label">Tweets</span></h2>
</header>
<ul class="divided">
<li>
<article class="tweet">
Amet nullam fringilla nibh nulla convallis tique ante sociis accumsan.
<span class="timestamp">5 minutes ago</span>
</article>
</li>
<li>
<article class="tweet">
Hendrerit rutrum quisque.
<span class="timestamp">30 minutes ago</span>
</article>
</li>
<li>
<article class="tweet">
Curabitur donec nulla massa laoreet nibh. Lorem praesent montes.
<span class="timestamp">3 hours ago</span>
</article>
</li>
<li>
<article class="tweet">
Lacus natoque cras rhoncus curae dignissim ultricies. Convallis orci aliquet.
<span class="timestamp">5 hours ago</span>
</article>
</li>
</ul>
</section>
<!-- Posts -->
<section class="4u">
<header>
<h2 class="icon fa-file circled"><span class="label">Posts</span></h2>
</header>
<ul class="divided">
<li>
<article class="post stub">
<header>
<h3><a href="#">Nisl fermentum integer</a></h3>
</header>
<span class="timestamp">3 hours ago</span>
</article>
</li>
<li>
<article class="post stub">
<header>
<h3><a href="#">Phasellus portitor lorem</a></h3>
</header>
<span class="timestamp">6 hours ago</span>
</article>
</li>
<li>
<article class="post stub">
<header>
<h3><a href="#">Magna tempus consequat</a></h3>
</header>
<span class="timestamp">Yesterday</span>
</article>
</li>
<li>
<article class="post stub">
<header>
<h3><a href="#">Feugiat lorem ipsum</a></h3>
</header>
<span class="timestamp">2 days ago</span>
</article>
</li>
</ul>
</section>
<!-- Photos -->
<section class="4u">
<header>
<h2 class="icon fa-camera circled"><span class="label">Photos</span></h2>
</header>
<div class="row 25% no-collapse">
<div class="6u">
<a href="#" class="image fit"><img src="images/pic10.jpg" alt="" /></a>
</div>
<div class="6u">
<a href="#" class="image fit"><img src="images/pic11.jpg" alt="" /></a>
</div>
</div>
<div class="row 25% no-collapse">
<div class="6u">
<a href="#" class="image fit"><img src="images/pic12.jpg" alt="" /></a>
</div>
<div class="6u">
<a href="#" class="image fit"><img src="images/pic13.jpg" alt="" /></a>
</div>
</div>
<div class="row 25% no-collapse">
<div class="6u">
<a href="#" class="image fit"><img src="images/pic14.jpg" alt="" /></a>
</div>
<div class="6u">
<a href="#" class="image fit"><img src="images/pic15.jpg" alt="" /></a>
</div>
</div>
</section>
</div>
<hr />
<div class="row">
<div class="12u">
<!-- Contact -->
<section class="contact">
<header>
<h3>Nisl turpis nascetur interdum?</h3>
</header>
<p>Urna nisl non quis interdum mus ornare ridiculus egestas ridiculus lobortis vivamus tempor aliquet.</p>
<ul class="icons">
<li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
<li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
<li><a href="#" class="icon fa-pinterest"><span class="label">Pinterest</span></a></li>
<li><a href="#" class="icon fa-dribbble"><span class="label">Dribbble</span></a></li>
<li><a href="#" class="icon fa-linkedin"><span class="label">Linkedin</span></a></li>
</ul>
</section>
<!-- Copyright -->
<div class="copyright">
<ul class="menu">
<li>&copy; Untitled. All rights reserved.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@@ -1,302 +0,0 @@
<!DOCTYPE HTML>
<!--
Helios by HTML5 UP
html5up.net | @n33co
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>No Sidebar - Helios 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/jquery.scrolly.min.js"></script>
<script src="js/jquery.onvisible.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" />
<link rel="stylesheet" href="css/style-noscript.css" />
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
</head>
<body class="no-sidebar">
<!-- Header -->
<div id="header">
<!-- Inner -->
<div class="inner">
<header>
<h1><a href="index.html" id="logo">Helios</a></h1>
</header>
</div>
<!-- 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="">And a submenu &hellip;</a>
<ul>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Phasellus consequat</a></li>
<li><a href="#">Magna phasellus</a></li>
<li><a href="#">Etiam dolore nisl</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>
</div>
<!-- Main -->
<div class="wrapper style1">
<div class="container">
<article id="main" class="special">
<header>
<h2><a href="#">No Sidebar</a></h2>
<p>
Morbi convallis lectus malesuada sed fermentum dolore amet
</p>
</header>
<a href="#" class="image featured"><img src="images/pic06.jpg" alt="" /></a>
<p>
Commodo id natoque malesuada sollicitudin elit suscipit. Curae suspendisse mauris posuere accumsan massa
posuere lacus convallis tellus interdum. Amet nullam fringilla nibh nulla convallis ut venenatis purus
lobortis. Auctor etiam porttitor phasellus tempus cubilia ultrices tempor sagittis. Nisl fermentum
consequat integer interdum integer purus sapien. Nibh eleifend nulla nascetur pharetra commodo mi augue
interdum tellus. Ornare cursus augue feugiat sodales velit lorem. Semper elementum ullamcorper lacinia
natoque aenean scelerisque vel lacinia mollis quam sodales congue.
</p>
<section>
<header>
<h3>Ultrices tempor sagittis nisl</h3>
</header>
<p>
Nascetur volutpat nibh ullamcorper vivamus at purus. Cursus ultrices porttitor sollicitudin imperdiet
at pretium tellus in euismod a integer sodales neque. Nibh quis dui quis mattis eget imperdiet venenatis
feugiat. Neque primis ligula cum erat aenean tristique luctus risus ipsum praesent iaculis. Fermentum elit
fringilla consequat dis arcu. Pellentesque mus tempor vitae pretium sodales porttitor lacus. Phasellus
egestas odio nisl duis sociis purus faucibus morbi. Eget massa mus etiam sociis pharetra magna.
</p>
<p>
Eleifend auctor turpis magnis sed porta nisl pretium. Aenean suspendisse nulla eget sed etiam parturient
orci cursus nibh. Quisque eu nec neque felis laoreet diam morbi egestas. Dignissim cras rutrum consectetur
ut penatibus fermentum nibh erat malesuada varius.
</p>
</section>
<section>
<header>
<h3>Augue euismod feugiat tempus</h3>
</header>
<p>
Pretium tellus in euismod a integer sodales neque. Nibh quis dui quis mattis eget imperdiet venenatis
feugiat. Neque primis ligula cum erat aenean tristique luctus risus ipsum praesent iaculis. Fermentum elit
ut nunc urna volutpat donec cubilia commodo risus morbi. Lobortis vestibulum velit malesuada ante
egestas odio nisl duis sociis purus faucibus morbi. Eget massa mus etiam sociis pharetra magna.
</p>
</section>
</article>
<hr />
<div class="row">
<article class="4u special">
<a href="#" class="image featured"><img src="images/pic07.jpg" alt="" /></a>
<header>
<h3><a href="#">Gravida aliquam penatibus</a></h3>
</header>
<p>
Amet nullam fringilla nibh nulla convallis tique ante proin sociis accumsan lobortis. Auctor etiam
porttitor phasellus tempus cubilia ultrices tempor sagittis. Nisl fermentum consequat integer interdum.
</p>
</article>
<article class="4u special">
<a href="#" class="image featured"><img src="images/pic08.jpg" alt="" /></a>
<header>
<h3><a href="#">Sed quis rhoncus placerat</a></h3>
</header>
<p>
Amet nullam fringilla nibh nulla convallis tique ante proin sociis accumsan lobortis. Auctor etiam
porttitor phasellus tempus cubilia ultrices tempor sagittis. Nisl fermentum consequat integer interdum.
</p>
</article>
<article class="4u special">
<a href="#" class="image featured"><img src="images/pic09.jpg" alt="" /></a>
<header>
<h3><a href="#">Magna laoreet et aliquam</a></h3>
</header>
<p>
Amet nullam fringilla nibh nulla convallis tique ante proin sociis accumsan lobortis. Auctor etiam
porttitor phasellus tempus cubilia ultrices tempor sagittis. Nisl fermentum consequat integer interdum.
</p>
</article>
</div>
</div>
</div>
<!-- Footer -->
<div id="footer">
<div class="container">
<div class="row">
<!-- Tweets -->
<section class="4u">
<header>
<h2 class="icon fa-twitter circled"><span class="label">Tweets</span></h2>
</header>
<ul class="divided">
<li>
<article class="tweet">
Amet nullam fringilla nibh nulla convallis tique ante sociis accumsan.
<span class="timestamp">5 minutes ago</span>
</article>
</li>
<li>
<article class="tweet">
Hendrerit rutrum quisque.
<span class="timestamp">30 minutes ago</span>
</article>
</li>
<li>
<article class="tweet">
Curabitur donec nulla massa laoreet nibh. Lorem praesent montes.
<span class="timestamp">3 hours ago</span>
</article>
</li>
<li>
<article class="tweet">
Lacus natoque cras rhoncus curae dignissim ultricies. Convallis orci aliquet.
<span class="timestamp">5 hours ago</span>
</article>
</li>
</ul>
</section>
<!-- Posts -->
<section class="4u">
<header>
<h2 class="icon fa-file circled"><span class="label">Posts</span></h2>
</header>
<ul class="divided">
<li>
<article class="post stub">
<header>
<h3><a href="#">Nisl fermentum integer</a></h3>
</header>
<span class="timestamp">3 hours ago</span>
</article>
</li>
<li>
<article class="post stub">
<header>
<h3><a href="#">Phasellus portitor lorem</a></h3>
</header>
<span class="timestamp">6 hours ago</span>
</article>
</li>
<li>
<article class="post stub">
<header>
<h3><a href="#">Magna tempus consequat</a></h3>
</header>
<span class="timestamp">Yesterday</span>
</article>
</li>
<li>
<article class="post stub">
<header>
<h3><a href="#">Feugiat lorem ipsum</a></h3>
</header>
<span class="timestamp">2 days ago</span>
</article>
</li>
</ul>
</section>
<!-- Photos -->
<section class="4u">
<header>
<h2 class="icon fa-camera circled"><span class="label">Photos</span></h2>
</header>
<div class="row 25% no-collapse">
<div class="6u">
<a href="#" class="image fit"><img src="images/pic10.jpg" alt="" /></a>
</div>
<div class="6u">
<a href="#" class="image fit"><img src="images/pic11.jpg" alt="" /></a>
</div>
</div>
<div class="row 25% no-collapse">
<div class="6u">
<a href="#" class="image fit"><img src="images/pic12.jpg" alt="" /></a>
</div>
<div class="6u">
<a href="#" class="image fit"><img src="images/pic13.jpg" alt="" /></a>
</div>
</div>
<div class="row 25% no-collapse">
<div class="6u">
<a href="#" class="image fit"><img src="images/pic14.jpg" alt="" /></a>
</div>
<div class="6u">
<a href="#" class="image fit"><img src="images/pic15.jpg" alt="" /></a>
</div>
</div>
</section>
</div>
<hr />
<div class="row">
<div class="12u">
<!-- Contact -->
<section class="contact">
<header>
<h3>Nisl turpis nascetur interdum?</h3>
</header>
<p>Urna nisl non quis interdum mus ornare ridiculus egestas ridiculus lobortis vivamus tempor aliquet.</p>
<ul class="icons">
<li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
<li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
<li><a href="#" class="icon fa-pinterest"><span class="label">Pinterest</span></a></li>
<li><a href="#" class="icon fa-dribbble"><span class="label">Dribbble</span></a></li>
<li><a href="#" class="icon fa-linkedin"><span class="label">Linkedin</span></a></li>
</ul>
</section>
<!-- Copyright -->
<div class="copyright">
<ul class="menu">
<li>&copy; Untitled. All rights reserved.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@@ -1,389 +0,0 @@
<!DOCTYPE HTML>
<!--
Helios by HTML5 UP
html5up.net | @n33co
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Right Sidebar - Helios 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/jquery.scrolly.min.js"></script>
<script src="js/jquery.onvisible.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" />
<link rel="stylesheet" href="css/style-noscript.css" />
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
</head>
<body class="right-sidebar">
<!-- Header -->
<div id="header">
<!-- Inner -->
<div class="inner">
<header>
<h1><a href="index.html" id="logo">Helios</a></h1>
</header>
</div>
<!-- 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="">And a submenu &hellip;</a>
<ul>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Phasellus consequat</a></li>
<li><a href="#">Magna phasellus</a></li>
<li><a href="#">Etiam dolore nisl</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>
</div>
<!-- Main -->
<div class="wrapper style1">
<div class="container">
<div class="row 200%">
<div class="8u" id="content">
<article id="main">
<header>
<h2><a href="#">Right Sidebar</a></h2>
<p>
Morbi convallis lectus malesuada sed fermentum dolore amet
</p>
</header>
<a href="#" class="image featured"><img src="images/pic06.jpg" alt="" /></a>
<p>
Commodo id natoque malesuada sollicitudin elit suscipit. Curae suspendisse mauris posuere accumsan massa
posuere lacus convallis tellus interdum. Amet nullam fringilla nibh nulla convallis ut venenatis purus
lobortis. Auctor etiam porttitor phasellus tempus cubilia ultrices tempor sagittis. Nisl fermentum
consequat integer interdum integer purus sapien. Nibh eleifend nulla nascetur pharetra commodo mi augue
interdum tellus. Ornare cursus augue feugiat sodales velit lorem. Semper elementum ullamcorper lacinia
natoque aenean scelerisque vel lacinia mollis quam sodales congue.
</p>
<section>
<header>
<h3>Ultrices tempor sagittis nisl</h3>
</header>
<p>
Nascetur volutpat nibh ullamcorper vivamus at purus. Cursus ultrices porttitor sollicitudin imperdiet
at pretium tellus in euismod a integer sodales neque. Nibh quis dui quis mattis eget imperdiet venenatis
feugiat. Neque primis ligula cum erat aenean tristique luctus risus ipsum praesent iaculis. Fermentum elit
fringilla consequat dis arcu. Pellentesque mus tempor vitae pretium sodales porttitor lacus. Phasellus
egestas odio nisl duis sociis purus faucibus morbi. Eget massa mus etiam sociis pharetra magna.
</p>
<p>
Eleifend auctor turpis magnis sed porta nisl pretium. Aenean suspendisse nulla eget sed etiam parturient
orci cursus nibh. Quisque eu nec neque felis laoreet diam morbi egestas. Dignissim cras rutrum consectetur
ut penatibus fermentum nibh erat malesuada varius.
</p>
</section>
<section>
<header>
<h3>Augue euismod feugiat tempus</h3>
</header>
<p>
Pretium tellus in euismod a integer sodales neque. Nibh quis dui quis mattis eget imperdiet venenatis
feugiat. Neque primis ligula cum erat aenean tristique luctus risus ipsum praesent iaculis. Fermentum elit
ut nunc urna volutpat donec cubilia commodo risus morbi. Lobortis vestibulum velit malesuada ante
egestas odio nisl duis sociis purus faucibus morbi. Eget massa mus etiam sociis pharetra magna.
</p>
</section>
</article>
</div>
<div class="4u" id="sidebar">
<hr class="first" />
<section>
<header>
<h3><a href="#">Accumsan sed penatibus</a></h3>
</header>
<p>
Dolor sed fringilla nibh nulla convallis tique ante proin sociis accumsan lobortis. Auctor etiam
porttitor phasellus tempus cubilia ultrices tempor sagittis tellus ante diam nec penatibus dolor cras
magna tempus feugiat veroeros.
</p>
<footer>
<a href="#" class="button">Learn More</a>
</footer>
</section>
<hr />
<section>
<header>
<h3><a href="#">Sed lorem etiam consequat</a></h3>
</header>
<p>
Tempus cubilia ultrices tempor sagittis. Nisl fermentum consequat integer interdum.
</p>
<div class="row 50% no-collapse">
<div class="4u">
<a href="#" class="image fit"><img src="images/pic10.jpg" alt="" /></a>
</div>
<div class="8u">
<h4>Nibh sed cubilia</h4>
<p>
Amet nullam fringilla nibh nulla convallis tique ante proin.
</p>
</div>
</div>
<div class="row 50% no-collapse">
<div class="4u">
<a href="#" class="image fit"><img src="images/pic11.jpg" alt="" /></a>
</div>
<div class="8u">
<h4>Proin sed adipiscing</h4>
<p>
Amet nullam fringilla nibh nulla convallis tique ante proin.
</p>
</div>
</div>
<div class="row 50% no-collapse">
<div class="4u">
<a href="#" class="image fit"><img src="images/pic12.jpg" alt="" /></a>
</div>
<div class="8u">
<h4>Lorem feugiat magna</h4>
<p>
Amet nullam fringilla nibh nulla convallis tique ante proin.
</p>
</div>
</div>
<div class="row 50% no-collapse">
<div class="4u">
<a href="#" class="image fit"><img src="images/pic13.jpg" alt="" /></a>
</div>
<div class="8u">
<h4>Sed tempus fringilla</h4>
<p>
Amet nullam fringilla nibh nulla convallis tique ante proin.
</p>
</div>
</div>
<div class="row 50% no-collapse">
<div class="4u">
<a href="#" class="image fit"><img src="images/pic14.jpg" alt="" /></a>
</div>
<div class="8u">
<h4>Malesuada fermentum</h4>
<p>
Amet nullam fringilla nibh nulla convallis tique ante proin.
</p>
</div>
</div>
<footer>
<a href="#" class="button">Magna Adipiscing</a>
</footer>
</section>
</div>
</div>
<hr />
<div class="row">
<article class="4u special">
<a href="#" class="image featured"><img src="images/pic07.jpg" alt="" /></a>
<header>
<h3><a href="#">Gravida aliquam penatibus</a></h3>
</header>
<p>
Amet nullam fringilla nibh nulla convallis tique ante proin sociis accumsan lobortis. Auctor etiam
porttitor phasellus tempus cubilia ultrices tempor sagittis. Nisl fermentum consequat integer interdum.
</p>
</article>
<article class="4u special">
<a href="#" class="image featured"><img src="images/pic08.jpg" alt="" /></a>
<header>
<h3><a href="#">Sed quis rhoncus placerat</a></h3>
</header>
<p>
Amet nullam fringilla nibh nulla convallis tique ante proin sociis accumsan lobortis. Auctor etiam
porttitor phasellus tempus cubilia ultrices tempor sagittis. Nisl fermentum consequat integer interdum.
</p>
</article>
<article class="4u special">
<a href="#" class="image featured"><img src="images/pic09.jpg" alt="" /></a>
<header>
<h3><a href="#">Magna laoreet et aliquam</a></h3>
</header>
<p>
Amet nullam fringilla nibh nulla convallis tique ante proin sociis accumsan lobortis. Auctor etiam
porttitor phasellus tempus cubilia ultrices tempor sagittis. Nisl fermentum consequat integer interdum.
</p>
</article>
</div>
</div>
</div>
<!-- Footer -->
<div id="footer">
<div class="container">
<div class="row">
<!-- Tweets -->
<section class="4u">
<header>
<h2 class="icon fa-twitter circled"><span class="label">Tweets</span></h2>
</header>
<ul class="divided">
<li>
<article class="tweet">
Amet nullam fringilla nibh nulla convallis tique ante sociis accumsan.
<span class="timestamp">5 minutes ago</span>
</article>
</li>
<li>
<article class="tweet">
Hendrerit rutrum quisque.
<span class="timestamp">30 minutes ago</span>
</article>
</li>
<li>
<article class="tweet">
Curabitur donec nulla massa laoreet nibh. Lorem praesent montes.
<span class="timestamp">3 hours ago</span>
</article>
</li>
<li>
<article class="tweet">
Lacus natoque cras rhoncus curae dignissim ultricies. Convallis orci aliquet.
<span class="timestamp">5 hours ago</span>
</article>
</li>
</ul>
</section>
<!-- Posts -->
<section class="4u">
<header>
<h2 class="icon fa-file circled"><span class="label">Posts</span></h2>
</header>
<ul class="divided">
<li>
<article class="post stub">
<header>
<h3><a href="#">Nisl fermentum integer</a></h3>
</header>
<span class="timestamp">3 hours ago</span>
</article>
</li>
<li>
<article class="post stub">
<header>
<h3><a href="#">Phasellus portitor lorem</a></h3>
</header>
<span class="timestamp">6 hours ago</span>
</article>
</li>
<li>
<article class="post stub">
<header>
<h3><a href="#">Magna tempus consequat</a></h3>
</header>
<span class="timestamp">Yesterday</span>
</article>
</li>
<li>
<article class="post stub">
<header>
<h3><a href="#">Feugiat lorem ipsum</a></h3>
</header>
<span class="timestamp">2 days ago</span>
</article>
</li>
</ul>
</section>
<!-- Photos -->
<section class="4u">
<header>
<h2 class="icon fa-camera circled"><span class="label">Photos</span></h2>
</header>
<div class="row 25% no-collapse">
<div class="6u">
<a href="#" class="image fit"><img src="images/pic10.jpg" alt="" /></a>
</div>
<div class="6u">
<a href="#" class="image fit"><img src="images/pic11.jpg" alt="" /></a>
</div>
</div>
<div class="row 25% no-collapse">
<div class="6u">
<a href="#" class="image fit"><img src="images/pic12.jpg" alt="" /></a>
</div>
<div class="6u">
<a href="#" class="image fit"><img src="images/pic13.jpg" alt="" /></a>
</div>
</div>
<div class="row 25% no-collapse">
<div class="6u">
<a href="#" class="image fit"><img src="images/pic14.jpg" alt="" /></a>
</div>
<div class="6u">
<a href="#" class="image fit"><img src="images/pic15.jpg" alt="" /></a>
</div>
</div>
</section>
</div>
<hr />
<div class="row">
<div class="12u">
<!-- Contact -->
<section class="contact">
<header>
<h3>Nisl turpis nascetur interdum?</h3>
</header>
<p>Urna nisl non quis interdum mus ornare ridiculus egestas ridiculus lobortis vivamus tempor aliquet.</p>
<ul class="icons">
<li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
<li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
<li><a href="#" class="icon fa-pinterest"><span class="label">Pinterest</span></a></li>
<li><a href="#" class="icon fa-dribbble"><span class="label">Dribbble</span></a></li>
<li><a href="#" class="icon fa-linkedin"><span class="label">Linkedin</span></a></li>
</ul>
</section>
<!-- Copyright -->
<div class="copyright">
<ul class="menu">
<li>&copy; Untitled. All rights reserved.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>