708 lines
No EOL
30 KiB
HTML
708 lines
No EOL
30 KiB
HTML
<!DOCTYPE html>
|
||
<html class="no-js" lang="en">
|
||
<head>
|
||
|
||
<!--- basic page needs
|
||
================================================== -->
|
||
<meta charset="utf-8">
|
||
<title>Style Guide - Keep It Simple</title>
|
||
<meta name="description" content="">
|
||
<meta name="author" content="">
|
||
|
||
<!-- mobile specific metas
|
||
================================================== -->
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
||
<!-- CSS
|
||
================================================== -->
|
||
<link rel="stylesheet" href="css/base.css">
|
||
<link rel="stylesheet" href="css/main.css">
|
||
|
||
<!-- script
|
||
================================================== -->
|
||
<script src="js/modernizr.js"></script>
|
||
<script defer src="js/fontawesome/all.min.js"></script>
|
||
|
||
<!-- favicons
|
||
================================================== -->
|
||
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
|
||
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
|
||
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
|
||
<link rel="manifest" href="site.webmanifest">
|
||
|
||
</head>
|
||
|
||
<body id="top">
|
||
|
||
<!-- preloader
|
||
================================================== -->
|
||
<div id="preloader">
|
||
<div id="loader" class="dots-fade">
|
||
<div></div>
|
||
<div></div>
|
||
<div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Header
|
||
================================================== -->
|
||
<header class="s-header">
|
||
|
||
<div class="row">
|
||
|
||
<div class="s-header__content column">
|
||
<h1 class="s-header__logotext">
|
||
<a href="index.html" title="">Keep It Simple.</a>
|
||
</h1>
|
||
<p class="s-header__tagline">Mind Body Soul Healing</p>
|
||
</div>
|
||
|
||
</div> <!-- end row -->
|
||
|
||
<nav class="s-header__nav-wrap">
|
||
|
||
<div class="row">
|
||
|
||
<ul class="s-header__nav">
|
||
<li><a href="index.html">Home</a></li>
|
||
<li class="has-children"><a href="#0">Dropdown</a>
|
||
<ul>
|
||
<li><a href="#0">Submenu 01</a></li>
|
||
<li><a href="#0">Past life And Regression Theraphy</a></li>
|
||
<li><a href="#0">Submenu 03</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="current"><a href="demo.html">Demo</a></li>
|
||
<li><a href="archives.html">Archives</a></li>
|
||
<li class="has-children"><a href="#0">Blog</a>
|
||
<ul>
|
||
<li><a href="blog.html">Blog Entries</a></li>
|
||
<li><a href="single.html">Single Blog</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="page.html">Page</a></li>
|
||
</ul> <!-- end #nav -->
|
||
|
||
</div>
|
||
|
||
</nav> <!-- end #nav-wrap -->
|
||
|
||
<a class="header-menu-toggle" href="#0" title="Menu"><span>Menu</span></a>
|
||
|
||
</header> <!-- Header End -->
|
||
|
||
|
||
|
||
<!-- Content
|
||
================================================== -->
|
||
<div class="s-content">
|
||
|
||
<div class="row add-bottom">
|
||
|
||
<div class="column large-full">
|
||
|
||
<h1 class="h-remove-top">Style Guide.</h1>
|
||
|
||
<p class="lead">Lorem ipsum Officia elit ad tempor dolore est ex incididunt incididunt occaecat culpa deserunt
|
||
sunt labore in cillum ullamco magna in Excepteur consequat in reprehenderit proident mollit incididunt officia commodo.
|
||
Duis ea officia sed dolor pariatur enim dolore dolore quis incididunt nulla exercitation commodo veniam et ea incididunt.
|
||
</p>
|
||
|
||
</div>
|
||
|
||
</div> <!-- end row -->
|
||
|
||
<div class="row">
|
||
|
||
<div class="column large-6 tab-full">
|
||
|
||
<h3>Paragraph and Image</h3>
|
||
|
||
<p><a href="#"><img width="120" height="120" class="h-pull-left" alt="sample-image" src="images/sample-image.jpg"></a>
|
||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum.Cras id urna. Morbi
|
||
tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. Donec mattis,
|
||
purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam. Cras fringilla magna.
|
||
Phasellus suscipit, leo a pharetra condimentum, lorem tellus eleifend magna, eget fringilla velit magna id
|
||
neque posuere nunc justo tempus leo. </p>
|
||
|
||
<p>
|
||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna.
|
||
Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo.
|
||
Donec mattis, purus nec placerat bibendum, dui pede condimentumodio, ac blandit ante orci ut diam.
|
||
</p>
|
||
|
||
<p>A <a href="#">link</a>,
|
||
<abbr title="this really isn't a very good description">abbrebation</abbr>,
|
||
<strong>strong text</strong>,
|
||
<em>em text</em>,
|
||
<del>deleted text</del>, and
|
||
<mark>this is a mark text.</mark>
|
||
<code>.code</code>
|
||
</p>
|
||
|
||
</div>
|
||
|
||
<div class="column large-6 tab-full">
|
||
|
||
<h3>Drop Caps</h3>
|
||
|
||
<p class="drop-cap">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia,
|
||
there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the
|
||
Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the
|
||
necessary regelialia. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem,
|
||
euposuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio,
|
||
ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra condimentum,
|
||
lorem tellus eleifend magna, eget fringilla velit magna id neque.
|
||
</p>
|
||
|
||
<h3>Small Print</h3>
|
||
|
||
<p>Buy one widget, get one free!
|
||
<small>(While supplies last. Offer expires on the vernal equinox. Not valid in Ohio.)</small>
|
||
</p>
|
||
|
||
</div>
|
||
|
||
</div> <!-- end row -->
|
||
|
||
<div class="row">
|
||
|
||
<div class="column large-6 tab-full">
|
||
|
||
<h3>Pull Quotes</h3>
|
||
|
||
<aside class="pull-quote">
|
||
<blockquote>
|
||
<p>
|
||
When you look in the eyes of grace, when you meet grace,
|
||
when you embrace grace, when you see the nail prints in
|
||
grace’s hands and the fire in his eyes, when you feel his
|
||
relentless love for you - it will not motivate you to sin.
|
||
It will motivate you to righteousness.
|
||
</p>
|
||
</blockquote>
|
||
</aside>
|
||
|
||
</div>
|
||
|
||
<div class="column large-6 tab-full">
|
||
|
||
<h3>Block Quotes</h3>
|
||
|
||
<blockquote cite="http://where-i-got-my-info-from.com">
|
||
<p>
|
||
For God so loved the world, that he gave his only Son, that whoever believes in
|
||
him should not perish but have eternal life. For God did not send his Son into
|
||
the world to condemn the world, but in order that the world might be
|
||
saved through him.
|
||
</p>
|
||
<cite>
|
||
<a href="#0">John 3:16-17 ESV</a>
|
||
</cite>
|
||
</blockquote>
|
||
|
||
<blockquote>
|
||
<p>There is a God-shaped vacuum in the heart of each man which cannot be satisfied
|
||
by any created thing but only by God the Creator.</p>
|
||
<cite>Blaise Pascal</cite>
|
||
</blockquote>
|
||
|
||
</div>
|
||
|
||
</div> <!-- end row -->
|
||
|
||
<div class="row half-bottom">
|
||
|
||
<div class="column large-6 tab-full">
|
||
|
||
<h3>Example Lists</h3>
|
||
|
||
<ol>
|
||
<li>Here is an example</li>
|
||
<li>of an ordered list.</li>
|
||
<li>A parent list item.
|
||
<ul>
|
||
<li>one</li>
|
||
<li>two</li>
|
||
<li>three</li>
|
||
</ul>
|
||
</li>
|
||
<li>A list item.</li>
|
||
</ol>
|
||
|
||
<ul class="disc">
|
||
<li>Here is an example</li>
|
||
<li>of an unordered list.</li>
|
||
</ul>
|
||
|
||
<h3>Definition Lists</h3>
|
||
|
||
<h5>a) Multi-line Definitions (default) </h5>
|
||
|
||
<dl>
|
||
<dt><strong>This is a term</strong></dt>
|
||
<dd>this is the definition of that term, which both live in a <code>dl</code>.</dd>
|
||
<dt><strong>Another Term</strong></dt>
|
||
<dd>And it gets a definition too, which is this line</dd>
|
||
<dd>This is a 2<sup>nd</sup> definition for a single term. A <code>dt</code> may be followed by multiple <code>dd</code>s.</dd>
|
||
</dl>
|
||
|
||
</div>
|
||
|
||
<div class="column large-6 tab-full">
|
||
|
||
<h3>Buttons</h3>
|
||
|
||
<p>
|
||
<a class="btn btn--primary h-full-width" href="#0">Primary Button</a>
|
||
<a class="btn h-full-width" href="#0">Default Button</a>
|
||
<a class="btn btn--stroke h-full-width" href="#0">Stroke Button</a>
|
||
</p>
|
||
|
||
<h3>Stats Tabs</h3>
|
||
|
||
<ul class="stats-tabs">
|
||
<li><a href="#0">1,234 <em>Peter</em></a></li>
|
||
<li><a href="#0">567 <em>James</em></a></li>
|
||
<li><a href="#0">23,456 <em>John</em></a></li>
|
||
<li><a href="#0">3,456 <em>Andrew</em></a></li>
|
||
<li><a href="#0">456 <em>Philip</em></a></li>
|
||
<li><a href="#0">26 <em>Matthew</em></a></li>
|
||
</ul>
|
||
|
||
</div>
|
||
|
||
</div> <!-- end row -->
|
||
|
||
<div class="row half-bottom">
|
||
|
||
<div class="column large-6 tab-full">
|
||
|
||
<h1>H1 Heading</h1>
|
||
<p>Doloremque dolor voluptas est sequi omnis. Pariatur ut aut. Sed enim tempora qui veniam qui cum vel.
|
||
Voluptas odit at vitae minima. In assumenda ut. Voluptatem totam impedit accusantium reiciendis excepturi aut qui accusamus praesentium.</p>
|
||
|
||
<h2>H2 Heading</h2>
|
||
<p>Doloremque dolor voluptas est sequi omnis. Pariatur ut aut. Sed enim tempora qui veniam qui cum vel.
|
||
Voluptas odit at vitae minima. In assumenda ut. Voluptatem totam impedit accusantium reiciendis excepturi aut qui accusamus praesentium.</p>
|
||
|
||
<h3>H3 Heading</h3>
|
||
<p>Doloremque dolor voluptas est sequi omnis. Pariatur ut aut. Sed enim tempora qui veniam qui cum vel.
|
||
Voluptas odit at vitae minima. In assumenda ut. Voluptatem totam impedit accusantium reiciendis excepturi aut qui accusamus praesentium.</p>
|
||
|
||
</div>
|
||
|
||
<div class="column large-6 tab-full">
|
||
|
||
<h4>H4 Heading</h4>
|
||
<p>Doloremque dolor voluptas est sequi omnis. Pariatur ut aut. Sed enim tempora qui veniam qui cum vel.
|
||
Voluptas odit at vitae minima. In assumenda ut. Voluptatem totam impedit accusantium reiciendis excepturi aut qui accusamus praesentium.</p>
|
||
|
||
<h5>H5 Heading</h5>
|
||
<p>Doloremque dolor voluptas est sequi omnis. Pariatur ut aut. Sed enim tempora qui veniam qui cum vel.
|
||
Voluptas odit at vitae minima. In assumenda ut. Voluptatem totam impedit accusantium reiciendis excepturi aut qui accusamus praesentium.</p>
|
||
|
||
<h6>H6 Heading</h6>
|
||
<p>Doloremque dolor voluptas est sequi omnis. Pariatur ut aut. Sed enim tempora qui veniam qui cum vel.
|
||
Voluptas odit at vitae minima. In assumenda ut. Voluptatem totam impedit accusantium reiciendis excepturi aut qui accusamus praesentium.</p>
|
||
|
||
</div>
|
||
|
||
</div> <!-- end row -->
|
||
|
||
<div class="row half-bottom">
|
||
|
||
<div class="column large-6 tab-full">
|
||
|
||
<h3>Responsive Image</h3>
|
||
<p><img src="images/wheel-500.jpg"
|
||
srcset="images/wheel-1000.jpg 1000w,
|
||
images/wheel-500.jpg 500w"
|
||
sizes="(max-width: 1000px) 100vw, 1000px" alt="">
|
||
</p>
|
||
|
||
</div>
|
||
|
||
<div class="column large-6 tab-full">
|
||
|
||
<h3>Responsive video</h3>
|
||
|
||
<div class="video-container">
|
||
<iframe src="https://player.vimeo.com/video/14592941?color=00a650&title=0&byline=0&portrait=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div> <!-- end row -->
|
||
|
||
<div class="row add-bottom">
|
||
|
||
<div class="column large-full">
|
||
|
||
<h3>Tables</h3>
|
||
<p>Be sure to use properly formed table markup with <code><thead></code> and <code><tbody></code> when building a <code>table</code>.</p>
|
||
|
||
<div class="table-responsive">
|
||
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Name</th>
|
||
<th>Age</th>
|
||
<th>Sex</th>
|
||
<th>Location</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>William J. Seymour</td>
|
||
<td>34</td>
|
||
<td>Male</td>
|
||
<td>Azusa Street</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Jennie Evans Moore</td>
|
||
<td>30</td>
|
||
<td>Female</td>
|
||
<td>Azusa Street</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div> <!-- end row -->
|
||
|
||
<div class="row">
|
||
|
||
<div class="column large-full">
|
||
<h3>Pagination</h3>
|
||
|
||
<nav class="pgn">
|
||
<ul>
|
||
<li><a class="pgn__prev" href="#0">Prev</a></li>
|
||
<li><a class="pgn__num" href="#0">1</a></li>
|
||
<li><span class="pgn__num current">2</span></li>
|
||
<li><a class="pgn__num" href="#0">3</a></li>
|
||
<li><a class="pgn__num" href="#0">4</a></li>
|
||
<li><a class="pgn__num" href="#0">5</a></li>
|
||
<li><span class="pgn__num dots">…</span></li>
|
||
<li><a class="pgn__num" href="#0">8</a></li>
|
||
<li><a class="pgn__next" href="#0">Next</a></li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
|
||
</div> <!-- end row -->
|
||
|
||
<div class="row">
|
||
|
||
<div class="column large-6 tab-full">
|
||
|
||
<h3>Form Styles</h3>
|
||
|
||
<form>
|
||
<div>
|
||
<label for="sampleInput">Your email</label>
|
||
<input class="h-full-width" type="email" placeholder="test@mailbox.com" id="sampleInput">
|
||
</div>
|
||
<div>
|
||
<label for="sampleRecipientInput">Reason for contacting</label>
|
||
<div class="ss-custom-select">
|
||
<select class="h-full-width" id="sampleRecipientInput">
|
||
<option value="Option 1">Questions</option>
|
||
<option value="Option 2">Report</option>
|
||
<option value="Option 3">Others</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<label for="exampleMessage">Message</label>
|
||
<textarea class="h-full-width" placeholder="Your message" id="exampleMessage"></textarea>
|
||
|
||
<label class="h-add-bottom">
|
||
<input type="checkbox">
|
||
<span class="label-text">Send a copy to yourself</span>
|
||
</label>
|
||
|
||
<input class="btn--primary h-full-width" type="submit" value="Submit">
|
||
</form>
|
||
|
||
</div>
|
||
|
||
<div class="column large-6 tab-full">
|
||
|
||
<h3>Alert Boxes</h3>
|
||
|
||
<br>
|
||
|
||
<div class="alert-box alert-box--error hideit">
|
||
<p>Error Message. Your Message Goes Here.</p>
|
||
<i class="fa fa-times alert-box__close" aria-hidden="true"></i>
|
||
</div><!-- end error -->
|
||
|
||
<div class="alert-box alert-box--success hideit">
|
||
<p>Success Message. Your Message Goes Here.</p>
|
||
<i class="fa fa-times alert-box__close" aria-hidden="true"></i>
|
||
</div><!-- end success -->
|
||
|
||
<div class="alert-box alert-box--info hideit">
|
||
<p>Info Message. Your Message Goes Here.</p>
|
||
<i class="fa fa-times alert-box__close" aria-hidden="true"></i>
|
||
</div><!-- end info -->
|
||
|
||
<div class="alert-box alert-box--notice hideit">
|
||
<p>Notice Message. Your Message Goes Here.</p>
|
||
<i class="fa fa-times alert-box__close" aria-hidden="true"></i>
|
||
</div><!-- end notice -->
|
||
|
||
</div>
|
||
|
||
</div> <!-- end row -->
|
||
|
||
<div class="row">
|
||
|
||
<div class="large-12 column">
|
||
<h3 class="half-bottom">Grid Columns</h3>
|
||
</div>
|
||
|
||
</div> <!-- Row End-->
|
||
|
||
<!--<h4>1/3 Columns</h4> -->
|
||
|
||
<div class="row">
|
||
|
||
<div class="large-4 mob-12 column">
|
||
<p>
|
||
Cras aliquet. Integer faucibus, eros ac molestie placerat, enim tellus varius lacus,
|
||
nec dictum nunc tortor id urna. Suspendisse dapibus ullamcorper pede. Vivamus ligula ipsum,
|
||
faucibus at, tincidunt eget, porttitor non, dolor.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="large-4 mob-12 column">
|
||
<p>
|
||
Cras aliquet. Integer faucibus, eros ac molestie placerat, enim tellus varius lacus,
|
||
nec dictum nunc tortor id urna. Suspendisse dapibus ullamcorper pede. Vivamus ligula ipsum,
|
||
faucibus at, tincidunt eget, porttitor non, dolor.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="large-4 mob-12 column">
|
||
<p>
|
||
Cras aliquet. Integer faucibus, eros ac molestie placerat, enim tellus varius lacus,
|
||
nec dictum nunc tortor id urna. Suspendisse dapibus ullamcorper pede. Vivamus ligula ipsum,
|
||
faucibus at, tincidunt eget, porttitor non, dolor.
|
||
</p>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!--<h4>1/4 Columns</h4> -->
|
||
|
||
<div class="row">
|
||
|
||
<div class="large-3 tab-6 mob-12 column">
|
||
<p>
|
||
Cras aliquet. Integer faucibus, eros ac molestie placerat, enim tellus varius lacus,
|
||
nec dictum nunc tortor id urna. Suspendisse dapibus ullamcorper pede. Vivamus ligula ipsum,
|
||
faucibus at, tincidunt eget, porttitor non, dolor.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="large-3 tab-6 mob-12 column">
|
||
<p>
|
||
Cras aliquet. Integer faucibus, eros ac molestie placerat, enim tellus varius lacus,
|
||
nec dictum nunc tortor id urna. Suspendisse dapibus ullamcorper pede. Vivamus ligula ipsum,
|
||
faucibus at, tincidunt eget, porttitor non, dolor.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="large-3 tab-6 mob-12 column">
|
||
<p>
|
||
Cras aliquet. Integer faucibus, eros ac molestie placerat, enim tellus varius lacus,
|
||
nec dictum nunc tortor id urna. Suspendisse dapibus ullamcorper pede. Vivamus ligula ipsum,
|
||
faucibus at, tincidunt eget, porttitor non, dolor.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="large-3 tab-6 mob-12 column">
|
||
<p>
|
||
Cras aliquet. Integer faucibus, eros ac molestie placerat, enim tellus varius lacus,
|
||
nec dictum nunc tortor id urna. Suspendisse dapibus ullamcorper pede. Vivamus ligula ipsum,
|
||
faucibus at, tincidunt eget, porttitor non, dolor.
|
||
</p>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!--<h4>1/2 Columns</h4> -->
|
||
|
||
<div class="row">
|
||
|
||
<div class="large-6 mob-12 column">
|
||
<p>
|
||
Cras aliquet. Integer faucibus, eros ac molestie placerat, enim tellus varius lacus,
|
||
nec dictum nunc tortor id urna. Suspendisse dapibus ullamcorper pede. Vivamus ligula ipsum,
|
||
faucibus at, tincidunt eget, porttitor non, dolor.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="large-6 mob-12 column">
|
||
<p>
|
||
Cras aliquet. Integer faucibus, eros ac molestie placerat, enim tellus varius lacus,
|
||
nec dictum nunc tortor id urna. Suspendisse dapibus ullamcorper pede. Vivamus ligula ipsum,
|
||
faucibus at, tincidunt eget, porttitor non, dolor.
|
||
</p>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!--<h4>2/3 Columns</h4> -->
|
||
|
||
<div class="row">
|
||
|
||
<div class="large-8 tab-7 mob-12 column">
|
||
<p>
|
||
Cras aliquet. Integer faucibus, eros ac molestie placerat, enim tellus varius lacus,
|
||
nec dictum nunc tortor id urna. Suspendisse dapibus ullamcorper pede. Vivamus ligula ipsum,
|
||
faucibus at, tincidunt eget, porttitor non, dolor. Integer faucibus, eros ac molestie placerat, enim tellus varius lacus,
|
||
nec dictum nunc tortor id urna. Suspendisse dapibus ullamcorper pede. Vivamus ligula ipsum,
|
||
faucibus at, tincidunt eget, porttitor non, dolor.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="large-4 tab-5 mob-12 column">
|
||
<p>
|
||
Cras aliquet. Integer faucibus, eros ac molestie placerat, enim tellus varius lacus,
|
||
nec dictum nunc tortor id urna. Suspendisse dapibus ullamcorper pede. Vivamus ligula ipsum,
|
||
faucibus at, tincidunt eget, porttitor non, dolor.
|
||
</p>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!--<h4>3/4 Columns</h4> -->
|
||
|
||
<div class="row">
|
||
|
||
<div class="large-3 tab-5 mob-12 column">
|
||
<p>
|
||
Cras aliquet. Integer faucibus, eros ac molestie placerat, enim tellus varius lacus,
|
||
nec dictum nunc tortor id urna. Suspendisse dapibus ullamcorper pede. Vivamus ligula ipsum,
|
||
faucibus at.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="large-9 tab-7 mob-12 column">
|
||
<p>
|
||
Cras aliquet. Integer faucibus, eros ac molestie placerat, enim tellus varius lacus,
|
||
nec dictum nunc tortor id urna. Suspendisse dapibus ullamcorper pede. Vivamus ligula ipsum,
|
||
faucibus at, tincidunt eget, porttitor non, dolor.Integer faucibus, eros ac molestie placerat, enim tellus varius lacus,
|
||
nec dictum nunc tortor id urna. Suspendisse dapibus ullamcorper pede. Vivamus ligula ipsum,
|
||
faucibus at, tincidunt eget, porttitor non, dolor. Integer faucibus, eros ac molestie placerat, enim tellus varius lacus,
|
||
nec dictum nunc tortor id urna. Suspendisse dapibus ullamcorper pede. Vivamus ligula ipsum,
|
||
faucibus at, tincidunt eget, porttitor non, dolor.
|
||
</p>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div> <!-- end content-wrap -->
|
||
|
||
|
||
<!-- Footer
|
||
================================================== -->
|
||
<footer class="s-footer">
|
||
|
||
<div class="row s-footer__top">
|
||
<div class="column">
|
||
<ul class="s-footer__social">
|
||
<li><a href="#"><i class="fab fa-facebook-f" aria-hidden="true"></i></a></li>
|
||
<li><a href="#"><i class="fab fa-twitter" aria-hidden="true"></i></a></li>
|
||
<li><a href="#"><i class="fab fa-youtube" aria-hidden="true"></i></a></li>
|
||
<li><a href="#"><i class="fab fa-vimeo-v" aria-hidden="true"></i></a></li>
|
||
<li><a href="#"><i class="fab fa-instagram" aria-hidden="true"></i></a></li>
|
||
<li><a href="#"><i class="fab fa-linkedin" aria-hidden="true"></i></a></li>
|
||
<li><a href="#"><i class="fab fa-skype" aria-hidden="true"></i></a></li>
|
||
</ul>
|
||
</div>
|
||
</div> <!-- end footer__top -->
|
||
|
||
<div class="row s-footer__bottom">
|
||
|
||
<div class="large-6 tab-full column s-footer__info">
|
||
<h3 class="h6">About Keep It Simple</h3>
|
||
|
||
<p>
|
||
Lorem ipsum Ullamco commodo laboris sit dolore commodo aliquip incididunt fugiat esse dolor
|
||
aute fugiat minim eiusmod do velit labore fugiat officia ad sit culpa labore in consectetur
|
||
sint cillum sint consectetur voluptate adipisicing Duis
|
||
</p>
|
||
|
||
<p>
|
||
Lorem ipsum Sed nulla deserunt voluptate elit occaecat culpa cupidatat sit irure sint
|
||
sint incididunt cupidatat esse in Ut sed commodo tempor consequat culpa fugiat incididunt.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="large-6 tab-full column">
|
||
<div class="row">
|
||
<div class="large-8 tab-full column">
|
||
|
||
<h3 class="h6">Photostream</h3>
|
||
|
||
<ul class="photostream group">
|
||
<li><a href="#0"><img alt="thumbnail" src="images/thumb.jpg"></a></li>
|
||
<li><a href="#0"><img alt="thumbnail" src="images/thumb.jpg"></a></li>
|
||
<li><a href="#0"><img alt="thumbnail" src="images/thumb.jpg"></a></li>
|
||
<li><a href="#0"><img alt="thumbnail" src="images/thumb.jpg"></a></li>
|
||
<li><a href="#0"><img alt="thumbnail" src="images/thumb.jpg"></a></li>
|
||
<li><a href="#0"><img alt="thumbnail" src="images/thumb.jpg"></a></li>
|
||
<li><a href="#0"><img alt="thumbnail" src="images/thumb.jpg"></a></li>
|
||
<li><a href="#0"><img alt="thumbnail" src="images/thumb.jpg"></a></li>
|
||
</ul>
|
||
|
||
</div>
|
||
|
||
<div class="large-4 tab-full column">
|
||
<h3 class="h6">Navigate</h3>
|
||
|
||
<ul class="s-footer__list s-footer-list--nav group">
|
||
<li><a href="#0">Home</a></li>
|
||
<li><a href="#0">Blog</a></li>
|
||
<li><a href="#0">Demo</a></li>
|
||
<li><a href="#0">Archives</a></li>
|
||
<li><a href="#0">About</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ss-copyright">
|
||
<span>© Copyright Keep It Simple 2019</span>
|
||
<span>Design by <a href="https://www.styleshout.com/">StyleShout</a></span>
|
||
</div>
|
||
|
||
</div> <!-- end footer__bottom -->
|
||
|
||
|
||
<div class="ss-go-top">
|
||
<a class="smoothscroll" title="Back to Top" href="#top">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0l8 9h-6v15h-4v-15h-6z"/></svg>
|
||
</a>
|
||
</div> <!-- end ss-go-top -->
|
||
|
||
</footer> <!-- end Footer-->
|
||
|
||
|
||
<!-- Java Script
|
||
================================================== -->
|
||
<script src="js/jquery-3.2.1.min.js"></script>
|
||
<script src="js/main.js"></script>
|
||
|
||
</body>
|
||
|
||
</html> |