700 lines
26 KiB
HTML
700 lines
26 KiB
HTML
<!DOCTYPE html>
|
|
<!--[if lt IE 8 ]><html class="no-js ie ie7" lang="en"> <![endif]-->
|
|
<!--[if IE 8 ]><html class="no-js ie ie8" lang="en"> <![endif]-->
|
|
<!--[if IE 9 ]><html class="no-js ie ie9" lang="en"> <![endif]-->
|
|
<!--[if (gte IE 9)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
|
|
<head>
|
|
|
|
<!--- Basic Page Needs
|
|
================================================== -->
|
|
<meta charset="utf-8">
|
|
<title>Blog - Puremedia</title>
|
|
<meta name="description" content="">
|
|
<meta name="author" content="">
|
|
|
|
<!-- Mobile Specific Metas
|
|
================================================== -->
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
|
|
<!-- CSS
|
|
================================================== -->
|
|
<link rel="stylesheet" href="css/base.css">
|
|
<link rel="stylesheet" href="css/main.css">
|
|
<link rel="stylesheet" href="css/media-queries.css">
|
|
|
|
<!-- Script
|
|
=================================================== -->
|
|
<script src="js/modernizr.js"></script>
|
|
|
|
<!-- Favicons
|
|
=================================================== -->
|
|
<link rel="shortcut icon" href="favicon.png" >
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="top"></div>
|
|
<div id="preloader">
|
|
<div id="status">
|
|
<img src="images/loader.gif" height="60" width="60" alt="">
|
|
<div class="loader">Loading...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Header
|
|
=================================================== -->
|
|
<header id="main-header">
|
|
|
|
<div class="row header-inner">
|
|
|
|
<div class="logo">
|
|
<a href="index.html">Puremedia.</a>
|
|
</div>
|
|
|
|
<nav id="nav-wrap">
|
|
|
|
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">
|
|
<span class='menu-text'>Show Menu</span>
|
|
<span class="menu-icon"></span>
|
|
</a>
|
|
<a class="mobile-btn" href="#" title="Hide navigation">
|
|
<span class='menu-text'>Hide Menu</span>
|
|
<span class="menu-icon"></span>
|
|
</a>
|
|
|
|
<ul id="nav" class="nav">
|
|
<li class="current"><a href="index.html#hero">Home.</a></li>
|
|
<li><a href="index.html#portfolio">Works.</a></li>
|
|
<li><a href="index.html#services">Services.</a></li>
|
|
<li><a href="index.html#about">About.</a></li>
|
|
<li><a href="index.html#journal">Blog.</a></li>
|
|
<li><a href="index.html#contact">Contact.</a></li>
|
|
</ul>
|
|
|
|
</nav> <!-- /nav-wrap -->
|
|
|
|
</div> <!-- /header-inner -->
|
|
|
|
</header>
|
|
|
|
|
|
<!-- Page Title
|
|
================================================== -->
|
|
<section id="page-title">
|
|
|
|
<div class="row">
|
|
|
|
<div class="twelve columns">
|
|
|
|
<h1>Style Guide<span>.</span></h1>
|
|
<p>Aenean condimentum lacus sit amet luctus lobortis.</p>
|
|
|
|
</div>
|
|
|
|
</div> <!-- /row -->
|
|
|
|
</section> <!-- /page-title -->
|
|
|
|
|
|
<!-- Content
|
|
================================================== -->
|
|
<section id="content">
|
|
|
|
<div class="row">
|
|
|
|
<div class="twelve columns">
|
|
|
|
<div class="row">
|
|
|
|
<div class="tab-whole six columns">
|
|
|
|
<h3>Paragraph and Image</h3>
|
|
|
|
<p><a href="#"><img width="120" height="120" class="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 condimentum
|
|
odio, 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="tab-whole six columns">
|
|
|
|
<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, 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.
|
|
</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> <!-- /row -->
|
|
|
|
<div class="row">
|
|
|
|
<div class="tab-whole six columns">
|
|
|
|
<h3>Pull Quotes</h3>
|
|
|
|
<aside class="pull-quote">
|
|
<blockquote>
|
|
<p>It is a paradisematic country, in which roasted parts of
|
|
sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind
|
|
texts it is an almost unorthographic life One day however a small line of blind text by the name
|
|
of Lorem Ipsum decided to leave for the far World of Grammar.</p>
|
|
</blockquote>
|
|
</aside>
|
|
|
|
</div>
|
|
|
|
<div class="tab-whole six columns">
|
|
|
|
<h3>Block Quotes</h3>
|
|
|
|
<blockquote cite="http://where-i-got-my-info-from.com">
|
|
<p>Your work is going to fill a large part of your life, and the only way to be truly satisfied is
|
|
to do what you believe is great work. And the only way to do great work is to love what you do.
|
|
If you haven't found it yet, keep looking. Don't settle. As with all matters of the heart, you'll know when you find it.
|
|
</p>
|
|
<cite>
|
|
<a href="#">Steve Jobs</a>
|
|
</cite>
|
|
</blockquote>
|
|
|
|
<blockquote>
|
|
<p>Good design is as little design as possible.</p>
|
|
<cite>Dieter Rams</cite>
|
|
</blockquote>
|
|
|
|
</div>
|
|
|
|
</div> <!-- /row -->
|
|
|
|
<div class="row">
|
|
|
|
<div class="tab-whole eight columns">
|
|
|
|
<h3>Definition Lists</h3>
|
|
|
|
<h6>a) Multi-line Definitions (default)</h6>
|
|
|
|
<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>
|
|
|
|
<h6>b) Inline Definitions</h6>
|
|
|
|
<dl class="lining">
|
|
<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 class="micro">And it gets a definition too, which is this line</dd>
|
|
<dd class="micro"> this is a 2<sup>nd</sup> definition for a single term.</dd>
|
|
<dt><strong>Term</strong></dt>
|
|
<dt><strong>Other Defined Term</strong></dt>
|
|
<dd><code>dt</code> terms may stand on their own without an accompanying <code>dd</code>, but in that case they <em>share</em> descriptions with the next available <code>dt</code>. You may not have a <code>dd</code> without a parent <code>dt</code>.</dd>
|
|
</dl>
|
|
|
|
<h6>c) Dictionary-style Definition</h6>
|
|
|
|
<dl class="dictionary-style">
|
|
<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.</dd>
|
|
<dt><strong>Term</strong></dt>
|
|
<dt><strong>Other Defined Term</strong></dt>
|
|
<dd><code>dt</code> terms may stand on their own without an accompanying <code>dd</code>, but in that case they <em>share</em> descriptions with the next available <code>dt</code>. You may not have a <code>dd</code> without a parent <code>dt</code>.</dd>
|
|
</dl>
|
|
|
|
</div>
|
|
|
|
<div class="tab-whole four columns">
|
|
|
|
<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>Headers</h3>
|
|
|
|
<h1>H1 Heading</h1>
|
|
<h2>H2 Heading</h2>
|
|
<h3>H3 Heading</h3>
|
|
<h4>H4 Heading</h4>
|
|
<h5>H5 Heading</h5>
|
|
<h6>H6 Heading</h6>
|
|
|
|
</div>
|
|
|
|
</div> <!-- /row -->
|
|
|
|
<div class="row">
|
|
|
|
<div class="twelve columns">
|
|
|
|
<h3>Stats Tabs</h3>
|
|
|
|
<ul class="stats-tabs">
|
|
<li><a href="#">1,234 <em>Sasuke</em></a></li>
|
|
<li><a href="#">567 <em>Hinata</em></a></li>
|
|
<li><a href="#">23,456 <em>Naruto</em></a></li>
|
|
<li><a href="#">3,456 <em>Kiba</em></a></li>
|
|
<li><a href="#">456 <em>Shikamaru</em></a></li>
|
|
<li><a href="#">26 <em>Sakura</em></a></li>
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</div> <!-- /row -->
|
|
|
|
<div class="row">
|
|
|
|
<div class="tab-whole six columns">
|
|
|
|
<h3>Buttons</h3>
|
|
|
|
<p>
|
|
<a class="button primary full-width" href="#">Primary Button</a>
|
|
<a class="button full-width" href="#">Default Button</a>
|
|
</p>
|
|
|
|
<p>
|
|
<a href="#" class="button purple">Button</a>
|
|
<a href="#" class="button green">Button</a>
|
|
<a href="#" class="button blue">Button</a>
|
|
<a href="#" class="button red">Button</a>
|
|
<a href="#" class="button orange">Button</a>
|
|
<a href="#" class="button yellow">Button</a>
|
|
<a href="#" class="button pink">Button</a>
|
|
<a href="#" class="button grey">Button</a>
|
|
</p>
|
|
|
|
<p>
|
|
<a href="#" class="button medium purple">Button</a>
|
|
<a href="#" class="button medium green">Button</a>
|
|
<a href="#" class="button medium blue">Button</a>
|
|
<a href="#" class="button medium red">Button</a>
|
|
<a href="#" class="button medium orange">Button</a>
|
|
<a href="#" class="button medium yellow">Button</a>
|
|
<a href="#" class="button medium pink">Button</a>
|
|
<a href="#" class="button medium grey">Button</a>
|
|
</p>
|
|
|
|
<p>
|
|
<a href="#" class="button large purple">Button</a>
|
|
<a href="#" class="button large green">Button</a>
|
|
<a href="#" class="button large blue">Button</a>
|
|
<a href="#" class="button large red">Button</a>
|
|
<a href="#" class="button large orange">Button</a>
|
|
<a href="#" class="button large yellow">Button</a>
|
|
<a href="#" class="button large pink">Button</a>
|
|
<a href="#" class="button large grey">Button</a>
|
|
</p>
|
|
|
|
<p>
|
|
<a href="#" class="button round purple">Button</a>
|
|
<a href="#" class="button round green">Button</a>
|
|
<a href="#" class="button round blue">Button</a>
|
|
<a href="#" class="button round red">Button</a>
|
|
<a href="#" class="button round orange">Button</a>
|
|
<a href="#" class="button round yellow">Button</a>
|
|
<a href="#" class="button round pink">Button</a>
|
|
<a href="#" class="button round grey">Button</a>
|
|
</p>
|
|
|
|
<p>
|
|
<a href="#" class="button stroke purple">Button</a>
|
|
<a href="#" class="button stroke green">Button</a>
|
|
<a href="#" class="button stroke blue">Button</a>
|
|
<a href="#" class="button stroke red">Button</a>
|
|
<a href="#" class="button stroke orange">Button</a>
|
|
<a href="#" class="button stroke yellow">Button</a>
|
|
<a href="#" class="button stroke pink">Button</a>
|
|
<a href="#" class="button stroke grey">Button</a>
|
|
</p>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="tab-whole six columns">
|
|
|
|
<h3>Alert Boxes</h3>
|
|
|
|
<div class="alert-box error hideit">
|
|
<p>Error Message. Your Message Goes Here.</p>
|
|
<i class="fa fa-times close"></i>
|
|
</div><!-- /error -->
|
|
|
|
<div class="alert-box success hideit">
|
|
<p>Success Message. Your Message Goes Here.</p>
|
|
<i class="fa fa-times close"></i>
|
|
</div><!-- /success -->
|
|
|
|
<div class="alert-box info hideit">
|
|
<p>Info Message. Your Message Goes Here.</p>
|
|
<i class="fa fa-times close"></i>
|
|
</div><!-- /info -->
|
|
|
|
<div class="alert-box notice hideit">
|
|
<p>Notice Message. Your Message Goes Here.</p>
|
|
<i class="fa fa-times close"></i>
|
|
</div><!-- /notice -->
|
|
|
|
</div>
|
|
|
|
</div> <!-- /row -->
|
|
|
|
|
|
<div class="row">
|
|
|
|
<div class="twelve columns">
|
|
|
|
<h3>Pagination</h3>
|
|
|
|
<nav class="pagination">
|
|
|
|
<span class="page-numbers prev inactive">Prev</span>
|
|
<span class="page-numbers current">1</span>
|
|
<a href="#" class="page-numbers">2</a>
|
|
<a href="#" class="page-numbers">3</a>
|
|
<a href="#" class="page-numbers">4</a>
|
|
<a href="#" class="page-numbers">5</a>
|
|
<a href="#" class="page-numbers">6</a>
|
|
<a href="#" class="page-numbers">7</a>
|
|
<a href="#" class="page-numbers">8</a>
|
|
<a href="#" class="page-numbers">9</a>
|
|
<a href="#" class="page-numbers next">Next</a>
|
|
|
|
</nav>
|
|
|
|
</div>
|
|
|
|
</div> <!-- /row -->
|
|
|
|
<div class="row add-bottom">
|
|
|
|
<div class="twelve columns add-half-bottom">
|
|
|
|
<h3>Form Styles</h3>
|
|
|
|
<form>
|
|
<fieldset>
|
|
|
|
<label for="regularInput">Regular Input</label>
|
|
<input type="text" id="regularInput">
|
|
|
|
<label for="regularTextarea">Regular Textarea</label>
|
|
<textarea id="regularTextarea"></textarea>
|
|
|
|
<label for="selectList">Select List</label>
|
|
<select id="selectList">
|
|
<option value="Option 1">Option 1</option>
|
|
<option value="Option 2">Option 2</option>
|
|
<option value="Option 3">Option 3</option>
|
|
<option value="Option 4">Option 4</option>
|
|
</select>
|
|
|
|
<fieldset>
|
|
<legend>Checkboxes</legend>
|
|
|
|
<label for="regularCheckbox">
|
|
<input type="checkbox" value="checkbox 1" id="regularCheckbox">
|
|
<span>Regular Checkbox</span>
|
|
</label>
|
|
|
|
<label for="secondRegularCheckbox">
|
|
<input type="checkbox" value="checkbox 2" id="secondRegularCheckbox">
|
|
<span>Regular Checkbox</span>
|
|
</label>
|
|
</fieldset>
|
|
|
|
<fieldset>
|
|
<legend>Radio Buttons</legend>
|
|
|
|
<label for="regularRadio">
|
|
<input type="radio" value="radio 1" id="regularRadio" name="radios">
|
|
<span>Regular Radio</span>
|
|
</label>
|
|
|
|
<label for="secondRegularRadio">
|
|
<input type="radio" value="radio 2" id="secondRegularRadio" name="radios">
|
|
<span>Regular Radio</span>
|
|
</label>
|
|
</fieldset>
|
|
|
|
<button type="submit">Submit Form</button>
|
|
|
|
</fieldset>
|
|
</form>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="row">
|
|
|
|
<div class="twelve columns">
|
|
<h3>Columns</h3>
|
|
</div>
|
|
|
|
</div> <!-- /row -->
|
|
|
|
<!--<h4>1/3 Columns</h4> -->
|
|
|
|
<div class="row add-bottom">
|
|
|
|
<div class="tab-whole four columns">
|
|
<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="tab-whole four columns">
|
|
<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="tab-whole four columns">
|
|
<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 add-bottom">
|
|
|
|
<div class="tab-whole three columns">
|
|
<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. Ut dui lectus, ultrices ut, sodales tincidunt,
|
|
viverra sed, nisl. </p>
|
|
</div>
|
|
|
|
<div class="tab-whole three columns">
|
|
<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. Ut dui lectus, ultrices ut, sodales tincidunt,
|
|
viverra sed, nisl. </p>
|
|
</div>
|
|
|
|
<div class="tab-whole three columns">
|
|
<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. Ut dui lectus, ultrices ut, sodales tincidunt,
|
|
viverra sed, nisl. </p>
|
|
</div>
|
|
|
|
<div class="tab-whole three columns">
|
|
<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. Ut dui lectus, ultrices ut, sodales tincidunt,
|
|
viverra sed, nisl. </p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!--<h4>1/2 Columns</h4> -->
|
|
|
|
<div class="row add-bottom">
|
|
|
|
<div class="tab-whole six columns">
|
|
<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="tab-whole six columns">
|
|
<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 add-bottom">
|
|
|
|
<div class="tab-whole eight columns">
|
|
<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="tab-whole four columns">
|
|
<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="tab-whole three columns">
|
|
<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="tab-whole nine columns">
|
|
<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> <!-- /twelve -->
|
|
|
|
</div> <!-- /row -->
|
|
|
|
</section> <!-- /content -->
|
|
|
|
|
|
<!-- Footer
|
|
================================================== -->
|
|
<footer>
|
|
|
|
<div class="row">
|
|
|
|
<div class="six columns tab-whole footer-about">
|
|
|
|
<h3>About Puremedia</h3>
|
|
|
|
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet.
|
|
Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem
|
|
nibh id elit.
|
|
</p>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
|
incididunt ut labore et dolore magna aliqua.</p>
|
|
|
|
</div> <!-- /footer-about -->
|
|
|
|
<div class="six columns tab-whole right-cols">
|
|
|
|
<div class="row">
|
|
|
|
<div class="columns">
|
|
<h3 class="address">Contact Us</h3>
|
|
<p>
|
|
1600 Amphitheatre Parkway<br>
|
|
Mountain View, CA<br>
|
|
94043 US
|
|
</p>
|
|
|
|
<ul>
|
|
<li><a href="tel:6473438234">647.343.8234</a></li>
|
|
<li><a href="tel:1234567890">123.456.7890</a></li>
|
|
<li><a href="mailto:someone@puremedia.com">someone@puremedia.com</a></li>
|
|
</ul>
|
|
</div> <!-- /columns -->
|
|
|
|
<div class="columns last">
|
|
<h3 class="contact">Follow Us</h3>
|
|
|
|
<ul>
|
|
<li><a href="#">Facebook</a></li>
|
|
<li><a href="#">Twitter</a></li>
|
|
<li><a href="#">GooglePlus</a></li>
|
|
<li><a href="#">Instagram</a></li>
|
|
<li><a href="#">Flickr</a></li>
|
|
<li><a href="#">Skype</a></li>
|
|
</ul>
|
|
|
|
</div> <!-- /columns -->
|
|
|
|
</div> <!-- /Row(nested) -->
|
|
|
|
</div>
|
|
|
|
<p class="copyright">© Copyright 2014 Puremedia. Design by <a href="http://www.styleshout.com/">Styleshout.</a></p>
|
|
|
|
<div id="go-top">
|
|
<a class="smoothscroll" title="Back to Top" href="#top"><span>Top</span><i class="fa fa-long-arrow-up"></i></a>
|
|
</div>
|
|
|
|
</div> <!-- /row -->
|
|
|
|
</footer> <!-- /footer -->
|
|
|
|
|
|
<!-- Java Script
|
|
================================================== -->
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
|
<script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js"><\/script>')</script>
|
|
<script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script>
|
|
<script src="js/jquery.flexslider.js"></script>
|
|
<script src="js/jquery.fittext.js"></script>
|
|
<script src="js/backstretch.js"></script>
|
|
<script src="js/waypoints.js"></script>
|
|
<script src="js/main.js"></script>
|
|
|
|
</body>
|
|
|
|
</html> |