Triebwerk snippets for a simple HTML and CSS website

snippet1.html

<title>Stellwerk. Informatik. HTML. Beispiel. Namics</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />

<script src="js/jquery.min.js"></script>
<script src="js/jquery.scrolly.min.js"></script>
<script src="js/jquery.poptrox.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/init.js"></script>
<noscript>
	<link rel="stylesheet" href="css/skel.css" />
	<link rel="stylesheet" href="css/style.css" />
</noscript>

snippet2.html

<section id="header">
	<header>
		<h1>Overflow</h1>
		<p>By HTML5 UP</p>
	</header>
	<footer>
		<a href="#banner" class="button style2 scrolly scrolly-centered">Proceed as anticipated</a>
	</footer>
</section>

snippet3.html

<section id="banner">
	<header>
		<h2>This is Overflow</h2>
	</header>
	<p>A brand new site template designed by <a href="http://n33.co">AJ</a> for <a href="http://html5up.net">HTML5 UP</a>.<br />
	It’s fully responsive, built on <strong>skel</strong>, and of course entirely free<br />
	under the <a href="http://html5up.net/license">Creative Commons license</a>.</p>
	<footer>
		<a href="#first" class="button style2 scrolly">Act on this message</a>
	</footer>
</section>

snippet4a.html

<article id="first" class="container box style1 right">
	<a href="#" class="image fit"><img src="images/pic01.jpg" alt="" /></a>
	<div class="inner">
		<header>
			<h2>Lorem ipsum<br />
			dolor sit amet</h2>
		</header>
		<p>Tortor faucibus ullamcorper nec tempus purus sed penatibus. Velit tempus etiam.</p>
	</div>
</article>

snippet4b.html

<article class="container box style1 left">
	<a href="#" class="image fit"><img src="images/pic02.jpg" alt="" /></a>
	<div class="inner">
		<header>
			<h2>Mollis posuere<br />
			lectus lacus</h2>
		</header>
		<p>Rhoncus mattis egestas sed fusce sodales rutrum et etiam ullamcorper. Lorem ipsum dolor.</p>
	</div>
</article>

snippet5.html

<article class="container box style2">
	<header>
		<h2>Magnis parturient</h2>
		<p>Justo phasellus et aenean dignissim<br />
		placerat cubilia purus lectus.</p>
	</header>
	<div class="inner gallery">
		<div class="row 0%">
			<div class="3u">
                <a href="images/fulls/01.jpg" class="image fit">
                    <img src="images/thumbs/01.jpg" alt="" title="Ad infinitum" />
                </a>
            </div>
			<div class="3u">
                <a href="images/fulls/02.jpg" class="image fit">
                    <img src="images/thumbs/02.jpg" alt="" title="Dressed in Clarity" />
                </a>
            </div>
			<div class="3u">
                <a href="images/fulls/03.jpg" class="image fit">
                    <img src="images/thumbs/03.jpg" alt="" title="Raven" />
                </a>
            </div>
			<div class="3u">
                <a href="images/fulls/04.jpg" class="image fit">
                    <img src="images/thumbs/04.jpg" alt="" title="I'll have a cup of Disneyland, please" />
                </a>
            </div>
		</div>
		<div class="row 0%">
			<!-- ... and so on ... -->
		</div>
	</div>
</article>

snippet6.html

<article class="container box style3">
	<header>
		<h2>Nisl sed ultricies</h2>
		<p>Diam dignissim lectus eu ornare volutpat orci.</p>
	</header>
	<form method="post" action="#">
		<div class="row 50%">
			<div class="6u"><input type="text" class="text" name="name" placeholder="Name" /></div>
			<div class="6u"><input type="text" class="text" name="email" placeholder="Email" /></div>
		</div>
		<div class="row 50%">
			<div class="12u">
				<textarea name="message" placeholder="Message"></textarea>
			</div>
		</div>
		<div class="row">
			<div class="12u">
				<ul class="actions">
					<li><input type="submit" value="Send Message" /></li>
				</ul>
			</div>
		</div>
	</form>
</article>

snippet7.html

<section id="footer">
	<ul class="icons">
		<li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
		<li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
		<li><a href="#" class="icon fa-google-plus"><span class="label">Google+</span></a></li>
		<li><a href="#" class="icon fa-pinterest"><span class="label">Pinterest</span></a></li>
		<li><a href="#" class="icon fa-dribbble"><span class="label">Dribbble</span></a></li>
		<li><a href="#" class="icon fa-linkedin"><span class="label">LinkedIn</span></a></li>
	</ul>
	<div class="copyright">
		<ul class="menu">
			<li>&copy; Untitled. All rights reserved.</li>
			<li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
		</ul>
	</div>
</section>