573 lines
No EOL
17 KiB
HTML
573 lines
No EOL
17 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>Wonderful Typography</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-no-image-header">
|
||
<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/">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 class="active"><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="small-12 columns">
|
||
<img src="http://phlow.github.io/feeling-responsive/assets/img/unsplash_5-970x546-bbbc89.jpg" width="970" height="546" alt="Wonderful Typography" >
|
||
</div><!-- /.small-12.columns -->
|
||
</div><!-- /.row -->
|
||
|
||
|
||
<div class="row top-30">
|
||
<div class="medium-offset-2 medium-8 end columns">
|
||
|
||
<article>
|
||
<header>
|
||
<p class="subtitle">Reading Experience</p>
|
||
<h1>Wonderful Typography</h1>
|
||
</header>
|
||
|
||
|
||
<p class="teaser">
|
||
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>Noch mehr 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>
|
||
|
||
<h2 id="second-lth2gt-heading">Second <h2>-Heading</h2>
|
||
|
||
<blockquote>
|
||
<p>Sirloin tenderloin swine frankfurter pork loin pork capicola ham hock strip steak ribeye beef ribs. Hamburger t-bone ribeye ham prosciutto bresaola.</p>
|
||
</blockquote>
|
||
|
||
<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>
|
||
|
||
<h3 id="third-lth3gt-heading">Third <h3>-Heading</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. </p>
|
||
|
||
<ul>
|
||
<li>Some Bulletpoints</li>
|
||
<li>Some Bulletpoints</li>
|
||
<li>Some Bulletpoints</li>
|
||
<li>Some Bulletpoints</li>
|
||
<li>Some Bulletpoints</li>
|
||
</ul>
|
||
|
||
<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>
|
||
|
||
<h4 id="forth-lth4gt-heading">Forth <h4>-Heading</h4>
|
||
|
||
<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>
|
||
|
||
<h4 id="fifth-lth5gt-heading">Fifth <h5>-Heading</h4>
|
||
|
||
<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>
|
||
|
||
<h2 id="typographical-elements">Typographical Elements</h2>
|
||
|
||
<p>Here you’ll find the <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list">complete list of HTML5-Tags</a> and this is how they look like.</p>
|
||
|
||
<h3 id="lthrgt-horizontal-lines"><hr> Horizontal Lines</h3>
|
||
<hr />
|
||
|
||
<h3 id="ltpregt-displaying-code"><pre> Displaying Code</h3>
|
||
<pre><code> <html>
|
||
<head>
|
||
<title>Code Blocks</title>
|
||
</head>
|
||
<body></body>
|
||
</html>
|
||
</code></pre>
|
||
|
||
<h3 id="ltblockquotegt-quotation"><blockquote> Quotation</h3>
|
||
<blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</blockquote>
|
||
|
||
<h3 id="ltolgt-ordered-lists"><ol> Ordered Lists</h3>
|
||
<ol>
|
||
<li>One</li>
|
||
<li>Two</li>
|
||
<li>Three
|
||
<ol>
|
||
<li>Second Level One</li>
|
||
<li>Second Level Two</li>
|
||
<li>Second Level Three
|
||
<ol>
|
||
<li>And a third level one</li>
|
||
<li>And a third level two</li>
|
||
<li>And a third level three</li>
|
||
</ol>
|
||
</li>
|
||
</ol>
|
||
</li>
|
||
<li>Four</li>
|
||
<li>Five</li>
|
||
</ol>
|
||
|
||
<h3 id="ltulgt-unordered-lists"><ul> Unordered Lists</h3>
|
||
<ul>
|
||
<li>One item
|
||
<ul>
|
||
<li>Second Level Item One</li>
|
||
<li>Second Level Item Two</li>
|
||
<li>Second Level Item Three
|
||
<ul>
|
||
<li>Third Level One</li>
|
||
<li>Third Level Two</li>
|
||
<li>Third Level Three</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>Second item</li>
|
||
<li>Third item</li>
|
||
<li>Fourth item</li>
|
||
<li>Fifth item and so on…</li>
|
||
</ul>
|
||
|
||
<h3 id="ltdlgt-definition-lists"><dl> Definition Lists</h3>
|
||
|
||
<dl>
|
||
<dt>Definition Lists</dt>
|
||
<dd>are beautiful</dd>
|
||
<dd>organize content</dd>
|
||
<dt>Definition Lists</dt>
|
||
<dd>Item One</dd>
|
||
<dt>Definition Lists</dt>
|
||
<dd>One more Item</dd>
|
||
</dl>
|
||
|
||
<h3 id="ltagt"><a></h3>
|
||
<p><a href="http://phlow.de/">Links</a> make the web exceptional.</p>
|
||
|
||
<h3 id="ltemgt"><em></h3>
|
||
<p>Let’s <em>emphasize</em> how important responsive webdesign is.</p>
|
||
|
||
<h3 id="ltstronggt"><strong></h3>
|
||
<p>This looks like <strong>bold</strong> text.</p>
|
||
|
||
<h3 id="ltsmallgt"><small></h3>
|
||
<p><small>This is small text.</small></p>
|
||
|
||
<h3 id="ltsgt"><s></h3>
|
||
|
||
<h3 id="ltcitegt"><cite></h3>
|
||
|
||
<h3 id="ltqgt"><q></h3>
|
||
|
||
<h3 id="ltdfngt"><dfn></h3>
|
||
|
||
<h3 id="ltabbrgt"><abbr></h3>
|
||
|
||
<h3 id="lttimegt"><time></h3>
|
||
|
||
<h3 id="ltcodegt"><code></h3>
|
||
|
||
<h3 id="ltvargt"><var></h3>
|
||
|
||
<h3 id="ltsampgt"><samp></h3>
|
||
|
||
<h3 id="ltkbdgt"><kbd></h3>
|
||
|
||
<h3 id="ltsubgt"><sub></h3>
|
||
|
||
<h3 id="ltigt"><i></h3>
|
||
|
||
<h3 id="ltbgt"><b></h3>
|
||
|
||
<h3 id="ltugt"><u></h3>
|
||
|
||
<h3 id="ltmarkgt"><mark></h3>
|
||
|
||
<h3 id="ltbrgt"><br></h3>
|
||
|
||
<h2 id="tables">Tables</h2>
|
||
<p><table>
|
||
<caption>
|
||
<colgroup>
|
||
<col>
|
||
<tbody>
|
||
<thead>Tabellenspalten enthalten.
|
||
<tfoot>Tabellenspalten enthalten.
|
||
<tr> Steht für eine Zeile mit Tabellenzellen.
|
||
<td> Kennzeichnet eine einzelne Tabellenzelle.
|
||
<th></p>
|
||
|
||
|
||
</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"></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>
|
||
|
||
<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://phlow.github.io/feeling-responsive/assets/js/app.min.js"></script>
|
||
|
||
<script>
|
||
$("#masthead").backstretch("http://phlow.github.io/feeling-responsive/assets/img/no");
|
||
</script>
|
||
</body>
|
||
</html> |