Compare commits
31 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
e8b584c6ee | ||
|
|
6bf893ab0f | ||
|
|
827213bc5b | ||
|
|
506675f70f | ||
|
|
245912e771 | ||
|
|
9f28f7aa31 | ||
|
|
61cffd745a | ||
|
|
c65029852d | ||
|
|
d62ec12266 | ||
|
|
e583ae6e5f | ||
|
|
fc10fd3189 | ||
|
|
f07a15753a | ||
|
|
5227d910e5 | ||
|
|
ff06d08a02 | ||
|
|
b9205b94b8 | ||
|
|
1c86165399 | ||
|
|
1d45834bfa | ||
|
|
dd728e77b7 | ||
|
|
cef791dc39 | ||
|
|
819d3b271e | ||
|
|
b24e3cace1 | ||
|
|
7101af2f10 | ||
|
|
cfa865af8e | ||
|
|
dad9d88882 | ||
|
|
05c5196320 | ||
|
|
aca9bc179b | ||
|
|
6b1993f61e | ||
|
|
5d32920619 | ||
|
|
52462fd253 | ||
|
|
4c3d99e26a | ||
|
|
d5731c6302 |
1
.gitignore
vendored
Normal file
@@ -0,0 +1 @@
|
||||
.DS_Store
|
||||
@@ -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
|
After Width: | Height: | Size: 54 KiB |
BIN
images/architecture.png
Normal file
|
After Width: | Height: | Size: 25 KiB |
BIN
images/arduino_irmc.png
Normal file
|
After Width: | Height: | Size: 6.1 MiB |
BIN
images/begali_key.jpg
Normal file
|
After Width: | Height: | Size: 89 KiB |
BIN
images/interface_bluetooth.jpg
Normal file
|
After Width: | Height: | Size: 1.4 MiB |
BIN
images/interface_serial.jpg
Normal file
|
After Width: | Height: | Size: 48 KiB |
BIN
images/interface_tunkey.png
Normal file
|
After Width: | Height: | Size: 763 KiB |
BIN
images/ios_irmc.jpg
Normal file
|
After Width: | Height: | Size: 1.4 MiB |
BIN
images/java_morsekob.png
Normal file
|
After Width: | Height: | Size: 33 KiB |
BIN
images/key.jpg
Normal file
|
After Width: | Height: | Size: 91 KiB |
BIN
images/keying.jpg
Normal file
|
After Width: | Height: | Size: 81 KiB |
|
Before Width: | Height: | Size: 189 KiB After Width: | Height: | Size: 189 KiB |
BIN
images/osx_irmc.png
Normal file
|
After Width: | Height: | Size: 33 KiB |
BIN
images/windows_cwcom.png
Normal file
|
After Width: | Height: | Size: 38 KiB |
BIN
images/windows_morsekob.png
Normal file
|
After Width: | Height: | Size: 23 KiB |
317
index.html
@@ -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,223 +27,224 @@
|
||||
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
|
||||
</head>
|
||||
<body class="homepage">
|
||||
|
||||
<!-- Header -->
|
||||
<div id="header">
|
||||
|
||||
<!-- Inner -->
|
||||
<div class="inner">
|
||||
<header>
|
||||
<h1><a href="index.html" id="logo">Helios</a></h1>
|
||||
<h1><a href="index.html" id="logo">MoIP - Morse Code over IP</a></h1>
|
||||
<hr />
|
||||
<p>Another fine freebie by HTML5 UP</p>
|
||||
<p>Morse Code over IP</p>
|
||||
</header>
|
||||
<footer>
|
||||
<a href="#banner" class="button circled scrolly">Start</a>
|
||||
<a href="#gettingstarted">Getting Started</a>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<!-- Nav -->
|
||||
<nav id="nav">
|
||||
<ul>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li>
|
||||
<a href="">Dropdown</a>
|
||||
<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="#">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 …</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>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<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>
|
||||
|
||||
<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 -->
|
||||
<!-- Why Morse Code? -->
|
||||
<a name="whymorsecode"></a>
|
||||
<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>
|
||||
<h2><a href="#">Why Morse Code?</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.
|
||||
We believe the cultural legacy morse code shall live on in the information age.
|
||||
</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.
|
||||
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>
|
||||
<footer>
|
||||
<a href="#" class="button">Continue Reading</a>
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Features -->
|
||||
<div class="wrapper style1">
|
||||
<!-- 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>
|
||||
|
||||
|
||||
|
||||
<!-- Software -->
|
||||
<a name=software></a>
|
||||
<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>
|
||||
<h2><a href=#>Software Clients</a></h2>
|
||||
<p>Arduino, Linux, iOS, OSX, Windows</p>
|
||||
</header>
|
||||
<div class="row">
|
||||
<article class="4u special">
|
||||
<a href="#" class="image featured"><img src="images/pic07.jpg" alt="" /></a>
|
||||
<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="#">Gravida aliquam penatibus</a></h3>
|
||||
<h3><a href="#">Arduino</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.
|
||||
<a href="https://github.com/8cH9azbsFifZ/irmc-avr" target=_new>irmc-avr</a> on duemilanove & 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="#" class="image featured"><img src="images/pic08.jpg" alt="" /></a>
|
||||
<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="#">Sed quis rhoncus placerat</a></h3>
|
||||
<h3><a href="#">Windows</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.
|
||||
<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="#" class="image featured"><img src="images/pic09.jpg" alt="" /></a>
|
||||
<a href="https://github.com/8cH9azbsFifZ/irmc" target=_new class="image featured"><img src="images/osx_irmc.png" alt="" /></a>
|
||||
<header>
|
||||
<h3><a href="#">Magna laoreet et aliquam</a></h3>
|
||||
<h3><a href="#">Linux / OSX</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.
|
||||
<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 & 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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- 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>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Footer -->
|
||||
<div id="footer">
|
||||
<div class="container">
|
||||
|
||||
@@ -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 …</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>© Untitled. All rights reserved.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
302
no-sidebar.html
@@ -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 …</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>© Untitled. All rights reserved.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -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 …</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>© Untitled. All rights reserved.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||