439 lines
No EOL
11 KiB
HTML
439 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>The Grid</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-30">
|
|
<div class="medium-12 columns">
|
|
|
|
<article>
|
|
<header>
|
|
<p class="subtitle">Multi-Device Layouts</p>
|
|
<h1>The Grid</h1>
|
|
</header>
|
|
|
|
|
|
<p class="teaser">
|
|
Create powerful multi-device layouts quickly and easily with the 12-column, nest-able Foundation grid. These are the dimensions.
|
|
</p>
|
|
|
|
|
|
<p><em>Feeling Responsive</em> is built on Foundation. And of course, we make use of the wonderful grid system and so can you. Find out more about <a href="http://foundation.zurb.com/docs/components/grid.html">constructing beautiful layouts</a> in the foundation documentation.</p>
|
|
|
|
<h2 id="large-displays">Large Displays</h2>
|
|
|
|
<h3 id="two-columns">Two Columns</h3>
|
|
|
|
<div class="row">
|
|
<div class="large-6 columns">
|
|
<img src="http://placehold.it/500x281/6b6351/e1dcd7&text=Width+500+Pixel" />
|
|
</div>
|
|
<div class="large-6 columns">
|
|
<img src="http://placehold.it/500x281/e05a10/e1e75e&text=Width+500+Pixel" />
|
|
</div>
|
|
</div>
|
|
|
|
<h3 id="three-columns">Three Columns</h3>
|
|
|
|
<div class="row">
|
|
<div class="large-4 columns">
|
|
<img src="http://placehold.it/333x170/6b6351/e1dcd7&text=Width+333+Pixel" />
|
|
</div>
|
|
<div class="large-4 columns">
|
|
<img src="http://placehold.it/333x170/e05a10/e1e75e&text=Width+333+Pixel" />
|
|
</div>
|
|
<div class="large-4 columns">
|
|
<img src="http://placehold.it/333x170/fabb00/771e1e&text=Width+333+Pixel" />
|
|
</div>
|
|
</div>
|
|
|
|
<h3 id="four-columns">Four Columns</h3>
|
|
|
|
<div class="row">
|
|
<div class="large-3 columns">
|
|
<img src="http://placehold.it/250x141/6b6351/e1dcd7&text=Width+250+Pixel" />
|
|
</div>
|
|
<div class="large-3 columns">
|
|
<img src="http://placehold.it/250x141/e05a10/e1e75e&text=Width+250+Pixel" />
|
|
</div>
|
|
<div class="large-3 columns">
|
|
<img src="http://placehold.it/250x141/fabb00/771e1e&text=Width+250+Pixel" />
|
|
</div>
|
|
<div class="large-3 columns">
|
|
<img src="http://placehold.it/250x141/00792c/acca57&text=Width+250+Pixel" />
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</article>
|
|
|
|
</div><!-- /.medium-12.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"></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">▶</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>
|
|
|
|
</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> |