450 lines
No EOL
14 KiB
HTML
450 lines
No EOL
14 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>The Feeling Responsive Blog Template</title>
|
||
<link rel="stylesheet" href="http://localhost:4000/assets/css/style.min.css">
|
||
<script src="http://localhost:4000/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="" />
|
||
|
||
|
||
<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://localhost:4000" title="Feeling Responsive">
|
||
<img src="http://localhost:4000/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.de/kontakt/" target="_blank">Contact</a></li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</ul>
|
||
|
||
<ul class="left">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li><a href="http://localhost:4000/index.html">Start</a></li>
|
||
<li class="divider"></li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="has-dropdown">
|
||
<a href="http://localhost:4000/design/style-guide/">Style your content</a>
|
||
|
||
<ul class="dropdown">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li><a href="http://localhost:4000/design/elements/">Style Your Posts</a></li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li><a href="http://localhost:4000/design/grid/">The Grid</a></li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li><a href="http://localhost:4000/blog/">Blog-Page</a></li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li><a href="http://localhost:4000/design/post/">Post-Layout</a></li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li><a href="http://localhost:4000/design/post-left-sidebar/">Post-Left-Sidebar</a></li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li><a href="http://localhost:4000/design/post-right-sidebar/">Post-Right-Sidebar</a></li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li><a href="http://localhost:4000/typography/">Typography</a></li>
|
||
|
||
</ul>
|
||
|
||
</li>
|
||
<li class="divider"></li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li><a href="http://localhost:4000/documentation/">Documentation</a></li>
|
||
<li class="divider"></li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="active"><a href="http://localhost:4000/blog/">Blog</a></li>
|
||
<li class="divider"></li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li><a href="http://localhost:4000/changelog/">Changelog</a></li>
|
||
<li class="divider"></li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</ul>
|
||
</section>
|
||
</nav>
|
||
</div><!-- /#navigation -->
|
||
|
||
|
||
<div id="blog-index" class="row">
|
||
<div class="medium-7 columns top-30">
|
||
|
||
|
||
<div class="row">
|
||
<div class="small-12 columns bottom-60">
|
||
<p class="subtitle">Layout Elements<span class="subheader"><small> 18.07.2014 · layout</small></span></p>
|
||
<h2><a href="http://localhost:4000/design/elements/">Possibilites to style your Post</a></h2>
|
||
<p>
|
||
<a href="http://localhost:4000/design/elements/" title="Possibilites to style your Post"><img src="http://localhost:4000/assets/img/unsplash_6_thumb.jpg" class="alignleft" width="150" height="150" alt="The Feeling Responsive Blog Template"></a>
|
||
You can style your content in different ways. There are elements like subtitles, feature images, header images, meta data like categories and tags and many more. This article shows the different possibilites.
|
||
<a href="http://localhost:4000/design/elements/" title="Read Possibilites to style your Post"><strong>Read more ›</strong></a>
|
||
</p>
|
||
</div><!-- /.small-12.columns -->
|
||
</div><!-- /.row -->
|
||
|
||
<div class="row">
|
||
<div class="small-12 columns bottom-60">
|
||
<p class="subtitle">Multi-Device Layouts<span class="subheader"><small> 05.07.2014 · layout</small></span></p>
|
||
<h2><a href="http://localhost:4000/design/grid/">The Grid</a></h2>
|
||
<p>
|
||
<a href="http://localhost:4000/design/grid/" title="The Grid"><img src="http://localhost:4000/assets/img/unsplash_7_thumb.jpg" class="alignleft" width="150" height="150" alt="The Feeling Responsive Blog Template"></a>
|
||
Create powerful multi-device layouts quickly and easily with the 12-column, nest-able Foundation grid. These are the dimensions.
|
||
<a href="http://localhost:4000/design/grid/" title="Read The Grid"><strong>Read more ›</strong></a>
|
||
</p>
|
||
</div><!-- /.small-12.columns -->
|
||
</div><!-- /.row -->
|
||
|
||
<div class="row">
|
||
<div class="small-12 columns bottom-60">
|
||
<p class="subtitle">Subheadline<span class="subheader"><small> 05.07.2014 · typography · design · elements</small></span></p>
|
||
<h2><a href="http://localhost:4000/design/this-is-h1-headline/">This is the <h1>-Headline</a></h2>
|
||
<p>
|
||
|
||
Feeling Responsive offers lots of possibilities to style your articles. The theme turns around the corner with a headline, subheadline, a title and header image. A beautiful typography crafted to please the eyes delivers your ideas, explanations and articles to stick out.
|
||
<a href="http://localhost:4000/design/this-is-h1-headline/" title="Read This is the <h1>-Headline"><strong>Read more ›</strong></a>
|
||
</p>
|
||
</div><!-- /.small-12.columns -->
|
||
</div><!-- /.row -->
|
||
|
||
<div class="row">
|
||
<div class="small-12 columns bottom-60">
|
||
<p class="subtitle"><span class="subheader"><small> 28.03.2014 · layout</small></span></p>
|
||
<h2><a href="http://localhost:4000/design/post-right-sidebar/">Post With Right Sidebar</a></h2>
|
||
<p>
|
||
<a href="http://localhost:4000/design/post-right-sidebar/" title="Post With Right Sidebar"><img src="http://localhost:4000/assets/img/unsplash_2_thumb.jpg" class="alignleft" width="150" height="150" alt="The Feeling Responsive Blog Template"></a>
|
||
This is a example of Post with a Sidebar on the right.
|
||
<a href="http://localhost:4000/design/post-right-sidebar/" title="Read Post With Right Sidebar"><strong>Read more ›</strong></a>
|
||
</p>
|
||
</div><!-- /.small-12.columns -->
|
||
</div><!-- /.row -->
|
||
|
||
<div class="row">
|
||
<div class="small-12 columns bottom-60">
|
||
<p class="subtitle"><span class="subheader"><small> 28.03.2014 · layout</small></span></p>
|
||
<h2><a href="http://localhost:4000/design/post-left-sidebar/">Post With Left Sidebar</a></h2>
|
||
<p>
|
||
|
||
This is a example of Post with a Sidebar on the left.
|
||
<a href="http://localhost:4000/design/post-left-sidebar/" title="Read Post With Left Sidebar"><strong>Read more ›</strong></a>
|
||
</p>
|
||
</div><!-- /.small-12.columns -->
|
||
</div><!-- /.row -->
|
||
|
||
<div class="row">
|
||
<div class="small-12 columns bottom-60">
|
||
<p class="subtitle"><span class="subheader"><small> 28.03.2014 · layout</small></span></p>
|
||
<h2><a href="http://localhost:4000/design/post/">Normal Post</a></h2>
|
||
<p>
|
||
|
||
This is a example of post beautiful aligned in the middle. No sidebar needed to read good articles.
|
||
<a href="http://localhost:4000/design/post/" title="Read Normal Post"><strong>Read more ›</strong></a>
|
||
</p>
|
||
</div><!-- /.small-12.columns -->
|
||
</div><!-- /.row -->
|
||
|
||
|
||
</div><!-- /.medium-7.columns -->
|
||
|
||
|
||
|
||
<div class="medium-5 columns top-30">
|
||
<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-5.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://localhost:4000/feed.xml">RSS</a></li>
|
||
<li class="sitemap-link"><a href="http://localhost:4000/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"></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-6 columns">
|
||
<ul class="inline-list">
|
||
<li><a href="http://localhost:4000/about/">About</a></li>
|
||
<li><a href="http://phlow.de/webdesign/">Theme & Webdesign by Phlow</a></li>
|
||
</ul>
|
||
</section>
|
||
|
||
<section id="subfooter-right" class="small-12 medium-6 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">▶</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"></a></li>
|
||
|
||
<li><a href="http://www.facebook.com/phlow.media" target="_blank" id="social-facebook" class="entypo-social" title="Lass uns Freunde sein!"></a></li>
|
||
|
||
<li><a href="http://soundcloud.com/phlow" target="_blank" id="social-soundcloud" class="entypo-social" title="Sounds und Downloads und mehr"></a></li>
|
||
|
||
<li><a href="http://github.com/phlow" target="_blank" id="social-github" class="entypo-social" title="Code und mehr..."></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..."></a></li>
|
||
|
||
<li><a href="http://www.pinterest.com/phlowmedia/" target="_blank" id="social-pinterest" class="entypo-social" title="Bilder, Fotos, Illustrationen, Grafiken sammeln..."></a></li>
|
||
|
||
<li><a href="http://www.mixcloud.com/phlow/" target="_blank" id="social-mixcloud" class="entypo" title="Mixe, was sonst?">☁</a></li>
|
||
|
||
</ul>
|
||
</section>
|
||
</nav>
|
||
</div><!-- /#subfooter -->
|
||
</footer>
|
||
|
||
|
||
<script src="http://localhost:4000/assets/js/app.min.js"></script>
|
||
|
||
<script>
|
||
$("#masthead").backstretch("http://localhost:4000/assets/img/header_unsplash_6.jpg");
|
||
</script>
|
||
</body>
|
||
</html> |