1
0
Fork 0
This repository has been archived on 2021-01-06. You can view files and clone it, but cannot push or open issues or pull requests.
dennogumi.org-archive/layout/post-left-sidebar/index.html
2014-08-17 14:04:12 +02:00

417 lines
No EOL
11 KiB
HTML

<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Post With Left Sidebar</title>
<link rel="stylesheet" href="http://phlow.github.io/feeling-responsive/assets/css/style.min.css">
<script src="http://phlow.github.io/feeling-responsive/assets/js/modernizr.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,400italic%7cVolkhov:400,700' rel='stylesheet' type='text/css'>
<meta name="google-site-verification" content="xP2HDqwZ_-ElcHVrOgy66izmcyyVmmeBC6oY1uAw5ok" />
<link rel="author" href="https://plus.google.com/u/0/118311555303973066167"/>
<link rel="shortcut icon" href="http://images.phlow.de/phlow/phlow-favicon-32x.png" type="image/png" />
<link rel="icon" href="http://images.phlow.de/phlow/phlow-favicon-32x.png" type="image/png" />
</head>
<body>
<div id="masthead">
<div class="row">
<div class="small-12 columns">
<a id="logo" href="http://phlow.github.io/feeling-responsive" title="Feeling Responsive">
<img src="http://phlow.github.io/feeling-responsive/assets/img/logo.png" alt="Feeling Responsive">
</a>
</div><!-- /.small-12.columns -->
</div><!-- /.row -->
</div><!-- /#masthead -->
<div id="navigation" class="contain-to-grid sticky">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name"></li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><a href="#"><span>Navigation</span></a></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li class="divider"></li>
<li><a href="http://phlow.github.io/feeling-responsive/contact/">Contact</a></li>
</ul>
<ul class="left">
<li><a href="http://phlow.github.io/feeling-responsive/index.html">Start</a></li>
<li class="divider"></li>
<li class="has-dropdown">
<a href="http://phlow.github.io/feeling-responsive/layout/">Layouts</a>
<ul class="dropdown">
<li><a href="http://phlow.github.io/feeling-responsive/layout/grid/">The Grid</a></li>
<li><a href="http://phlow.github.io/feeling-responsive/blog-page/">Blog-Page</a></li>
<li><a href="http://phlow.github.io/feeling-responsive/layout/post/">Post-Layout</a></li>
<li><a href="http://phlow.github.io/feeling-responsive/layout/post-left-sidebar/">Post-Left-Sidebar</a></li>
<li><a href="http://phlow.github.io/feeling-responsive/layout/post-right-sidebar/">Post-Right-Sidebar</a></li>
<li><a href="http://phlow.github.io/feeling-responsive/layout/full-width/">Fullwidth Layout</a></li>
</ul>
</li>
<li class="divider"></li>
<li><a href="http://phlow.github.io/feeling-responsive/portfolio/">Portfolio</a></li>
<li class="divider"></li>
<li><a href="http://phlow.github.io/feeling-responsive/blog/">Blog</a></li>
<li class="divider"></li>
<li><a href="http://phlow.github.io/feeling-responsive/typography/">Typography</a></li>
<li class="divider"></li>
<li><a href="http://phlow.github.io/feeling-responsive/changelog/">Changelog</a></li>
<li class="divider"></li>
</ul>
</section>
</nav>
</div><!-- /#navigation -->
<div class="row top-60">
<div class="medium-4 columns">
<aside>
<div class="panel radius">
<h3>Sidebar</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</aside>
</div><!-- /.medium-4.columns -->
<div class="medium-8 columns">
<article>
<header>
<img src="http://phlow.github.io/feeling-responsive/assets/img/unsplash_1-970x546-b70c12.jpg" width="970" height="546" alt="Post With Left Sidebar" >
<h1>Post With Left Sidebar</h1>
</header>
<p class="teaser">
This is a example of Post with a Sidebar on the left.
</p>
<h2 id="have-a-look-at-the-sidebar">Have a look at the sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="page-meta">
<ul class="side-nav">
<li class="subheader">Date: 28.03.2014</li>
<li class="subheader">Archived in LAYOUT</li>
<li class="divider"></li>
</ul>
</div>
</article>
</div><!-- /.medium-8.columns -->
</div><!-- /.row -->
<footer id="footer-content" class="bg-grau">
<div id="footer">
<div class="row">
<div class="medium-6 large-5 columns">
<h5 class="black-shadow">About this Website</h5>
<p class="black-shadow">
»Feeling Responsive« is a responsive theme based on the fantastic foundation framework with beautiful typography and a bright color palette.
</p>
</div><!-- /.large-6.columns -->
<div class="small-6 medium-3 large-3 large-offset-1 columns">
<aside>
<div class="textwidget">
<h5 class="black-shadow">Services</h5>
<ul class="no-bullet black-shadow">
<li><a href="contact.html">Contact</a></li>
<li class="rss-link"><a href="http://phlow.github.io/feeling-responsive/feed.xml">RSS</a></li>
<li class="sitemap-link"><a href="http://phlow.github.io/feeling-responsive/sitemap.xml">Sitemap.xml</a></li>
</ul>
</div>
</aside>
</div><!-- /.large-4.columns -->
<div class="small-6 medium-3 large-3 columns">
<h5 class="black-shadow">Thank You!</h5>
<ul class="no-bullet black-shadow">
<li><a href="http://entypo.com/">Icons by Daniel Bruce</a></li>
<li><a href="http://foundation.zurb.com/">Built on Foundation</a></li>
<li><a href="http://unsplash.com/">Images by Unsplash</a></li>
<li><a href="http://srobbin.com/jquery-plugins/backstretch/">Using Backstretch by Scott Robbin</a></li>
</ul>
</div><!-- /.large-3.columns -->
</div><!-- /.row -->
<div class="row">
<div class="small-12 columns" style="text-align: right;">
<a class="entypo entypo-48" href="#masthead">&#59231;</a>
</div><!-- /.small-12.columns -->
</div><!-- /.row -->
</div><!-- /#footer -->
<div id="subfooter">
<nav class="row">
<section id="subfooter-left" class="bottom-30 small-12 medium-7 columns">
<ul class="inline-list">
<li><a href="http://phlow.github.io/feeling-responsive/about/">About</a></li>
<li><a href="http://phlow.de/webdesign/">Theme by Phlow</a></li>
</ul>
</section>
<section id="subfooter-right" class="small-12 medium-5 columns social-icons">
<ul class="inline-list">
<li><a href="http://www.youtube.com/PhlowMedia" target="_blank" id="social-youtube" class="entypo" title="Videos, Video-Anleitungen und Filme von Phlow auf YouTube">&#9654;</a></li>
<li><a href="http://twitter.com/phlow" target="_blank" id="social-twitter" class="entypo-social" title="Immer das Neuste von Phlow gibt es auf Twitter">&#62217;</a></li>
<li><a href="http://www.facebook.com/phlow.media" target="_blank" id="social-facebook" class="entypo-social" title="Lass uns Freunde sein!">&#62220;</a></li>
<li><a href="http://soundcloud.com/phlow" target="_blank" id="social-soundcloud" class="entypo-social" title="Sounds und Downloads und mehr">&#62280;</a></li>
<li><a href="http://github.com/phlow" target="_blank" id="social-github" class="entypo-social" title="Code und mehr...">&#62208;</a></li>
<li><a href="http://instagram.com/phlowmedia" target="_blank" id="social-instagram" class="entypo-social" title="Bilder und Impressionen mit und ohne Filter...">&#62253;</a></li>
</ul>
</section>
</nav>
</div><!-- /#subfooter -->
</footer>
<script src="http://phlow.github.io/feeling-responsive/assets/js/app.min.js"></script>
<script>
$("#masthead").backstretch("http://phlow.github.io/feeling-responsive/assets/img/unsplash_3.jpg");
</script>
</body>
</html>