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/typography/this-is-h1-headline/index.html
Moritz »mo.« Sauer db13c8f755 Update
2014-08-17 23:42:19 +02:00

443 lines
No EOL
12 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>This is the &lt;h1&gt;-Headline</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/">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="small-12 columns">
<img src="http://phlow.github.io/feeling-responsive/assets/img/unsplash_5-970x546-bbbc89.jpg" width="970" height="546" alt="This is the &lt;h1&gt;-Headline" >
</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">Subheadline</p>
<h1>This is the &lt;h1&gt;-Headline</h1>
</header>
<p class="teaser">
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.
</p>
<h1 id="lth1gt-headline">&lt;h1&gt;-Headline</h1>
<h2 id="lth2gt-headline">&lt;h2&gt;-Headline</h2>
<h3 id="lth3gt-headline">&lt;h3&gt;-Headline</h3>
<h4 id="lth4gt-headline">&lt;h4&gt;-Headline</h4>
<h5 id="lth5gt-headline">&lt;h5&gt;-Headline</h5>
<h6 id="lth6gt-headline">&lt;h6&gt;-Headline</h6>
<hr />
<ol>
<li>Ordered List</li>
<li>Second List Item</li>
<li>Third List Item</li>
<li>Fourth List Item</li>
<li>Fifth List Item</li>
</ol>
<hr />
<dl>
<dt>Definition List</dt>
<dd>Bacon ipsum dolor sit amet spare ribs brisket ribeye, andouille sirloin bresaola frankfurter corned beef capicola bacon. Salami beef ribs sirloin, short loin hamburger shoulder t-bone.</dd>
<dt>Beef ribs jowl swine porchetta</dt>
<dd>Sirloin tenderloin swine frankfurter pork loin pork capicola ham hock strip steak ribeye beef ribs. Hamburger t-bone ribeye ham prosciutto bresaola.</dd>
<dt>Pancetta flank sirloin pork</dt>
<dd>short ribs shankle prosciutto landjaeger. Beef ribs turkey shoulder drumstick. Leberkas pork belly ribeye, bresaola jerky strip steak tenderloin bacon landjaeger short ribs beef ribs. Flank pork chop fatback tail kielbasa filet mignon jowl landjaeger bresaola tongue corned beef biltong. Landjaeger spare ribs fatback corned beef tenderloin drumstick, swine chicken beef turkey biltong doner tri-tip filet mignon. </dd>
</dl>
<div class="page-meta">
<ul class="side-nav">
<li class="subheader">Date: 05.07.2014</li>
<li class="subheader">Archived in TYPOGRAPHY · ELEMENTS</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>
<li><a href="http://www.pinterest.com/phlowmedia/" target="_blank" id="social-pinterest" class="entypo-social" title="Bilder, Fotos, Illustrationen, Grafiken sammeln...">&#62227;</a></li>
<li><a href="http://www.mixcloud.com/phlow/" target="_blank" id="social-mixcloud" class="entypo" title="Mixe, was sonst?">&#9729;</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>