Template:SMTexas/heading

From 2014hs.igem.org

(Difference between revisions)
Line 9: Line 9:
<!-- Header -->
<!-- Header -->
-
+
<header id="header">
-
+
<div class="logo">
 +
<div>
 +
<h1><a href="#" id="logo">TXT</a></h1>
 +
<span class="byline">A responsive site template by HTML5 UP</span>
 +
</div>
 +
</div>
 +
</header>
 +
<!-- /Header -->
<!-- Nav -->
<!-- Nav -->
Line 22: Line 29:
</nav>
</nav>
<!-- /Nav -->
<!-- /Nav -->
-
<!-- Banner -->
+
 +
<!-- Banner -->
<div id="banner-wrapper">
<div id="banner-wrapper">
<section id="banner">
<section id="banner">
-
<h2>SMTexas</h2>
+
<h2>You are in a dimly lit stairwell</h2>
-
<span class="byline">iGEM 2014</span>
+
<span class="byline">The stench is unbearable. You wonder why all stairwells smell this way.</span>
-
<a href="#" class="button">Welcome</a>
+
<a href="#" class="button">Hold Breath and Continue</a>
</section>
</section>
</div>
</div>
<!-- /Banner -->
<!-- /Banner -->
 +
 +
<!-- Main -->
 +
<div id="main-wrapper">
 +
<div id="main" class="container">
 +
<div class="row">
 +
<div class="12u">
 +
 +
<!-- Highlight -->
 +
<section class="is-highlight">
 +
<ul class="special">
 +
<li><a href="#" class="fa fa-search solo"><span>Battery</span></a></li>
 +
<li><a href="#" class="fa fa-tablet solo"><span>Tablet</span></a></li>
 +
<li><a href="#" class="fa fa-flask solo"><span>Flask</span></a></li>
 +
<li><a href="#" class="fa fa-cog solo"><span>Pie Chart?</span></a></li>
 +
</ul>
 +
<header>
 +
<h2>You check the contents of your inventory</h2>
 +
<span class="byline">it contains: many items that seem important but actually aren’t</span>
 +
</header>
 +
<p>
 +
Phasellus quam turpis, feugiat sit amet ornare in, hendrerit in lectus. Praesent semper mod quis eget mi. Etiam eu<br />
 +
ante risus. Aliquam erat volutpat. Aliquam luctus et mattis lectus amet pulvinar. Nam nec turpis consequat.
 +
</p>
 +
</section>
 +
<!-- /Highlight -->
 +
 +
</div>
 +
</div>
 +
<div class="row">
 +
<div class="12u">
 +
 +
<!-- Features -->
 +
<section class="is-features">
 +
<h2 class="major"><span>Valid Commands</span></h2>
 +
<div>
 +
<div class="row">
 +
<div class="3u">
 +
 +
<!-- Feature -->
 +
<section class="is-feature">
 +
<a href="#" class="image image-full"><img src="images/pic01.jpg" alt="" /></a>
 +
<h3><a href="#">Look Up</a></h3>
 +
<p>
 +
Phasellus quam turpis, feugiat sit amet ornare in, a hendrerit in
 +
lectus dolore. Praesent semper mod quis eget sed etiam eu ante risus.
 +
</p>
 +
</section>
 +
<!-- /Feature -->
 +
 +
</div>
 +
<div class="3u">
 +
 +
<!-- Feature -->
 +
<section class="is-feature">
 +
<a href="#" class="image image-full"><img src="images/pic02.jpg" alt="" /></a>
 +
<h3><a href="#">Look Down</a></h3>
 +
<p>
 +
Phasellus quam turpis, feugiat sit amet ornare in, a hendrerit in
 +
lectus dolore. Praesent semper mod quis eget sed etiam eu ante risus.
 +
</p>
 +
</section>
 +
<!-- /Feature -->
 +
 +
</div>
 +
<div class="3u">
 +
 +
<!-- Feature -->
 +
<section class="is-feature">
 +
<a href="#" class="image image-full"><img src="images/pic03.jpg" alt="" /></a>
 +
<h3><a href="#">Examine Room</a></h3>
 +
<p>
 +
Phasellus quam turpis, feugiat sit amet ornare in, a hendrerit in
 +
lectus dolore. Praesent semper mod quis eget sed etiam eu ante risus.
 +
</p>
 +
</section>
 +
<!-- /Feature -->
 +
 +
</div>
 +
<div class="3u">
 +
 +
<!-- Feature -->
 +
<section class="is-feature">
 +
<a href="#" class="image image-full"><img src="images/pic04.jpg" alt="" /></a>
 +
<h3><a href="http://getlamp.com">Get Lamp</a></h3>
 +
<p>
 +
Phasellus quam turpis, feugiat sit amet ornare in, a hendrerit in
 +
lectus dolore. Praesent semper mod quis eget sed etiam eu ante risus.
 +
</p>
 +
</section>
 +
<!-- /Feature -->
 +
 +
</div>
 +
</div>
 +
<div class="row">
 +
<div class="12u">
 +
 +
<div class="actions">
 +
<a href="#" class="button button-big">Do Something</a>
 +
<a href="#" class="button button-alt button-big">Think About It</a>
 +
</div>
 +
 +
</div>
 +
</div>
 +
</div>
 +
</section>
 +
<!-- /Features -->
 +
 +
</div>
 +
</div>
 +
<div class="row">
 +
<div class="12u">
 +
 +
<!-- Blog -->
 +
<section class="is-blog">
 +
<h2 class="major"><span>Adventure Log</span></h2>
 +
<div>
 +
<div class="row">
 +
<div class="9u">
 +
<div class="content content-left">
 +
 +
<!-- Featured Post -->
 +
<article class="is-post">
 +
<header>
 +
<h3><a href="#">You mean I have to read stuff?</a></h3>
 +
<span class="byline">I’m going back to playing call of Modern Halostrike 15</span>
 +
<ul class="meta">
 +
<li class="fa fa-clock-o">15 minutes ago</li>
 +
<li class="fa fa-comments"><a href="#">8</a></li>
 +
</ul>
 +
</header>
 +
<a href="#" class="image image-full"><img src="images/pic05.jpg" alt="" /></a>
 +
<p>
 +
Phasellus quam turpis, feugiat sit amet ornare in, a hendrerit in lectus. Praesent
 +
semper mod quis eget mi. Etiam sed ante risus aliquam erat et volutpat. Praesent a
 +
dapibus velit. Curabitur sed nisi nunc, accumsan vestibulum lectus. Lorem ipsum
 +
dolor sit non aliquet sed, tempor et dolor.  Praesent a dapibus velit. Curabitur
 +
accumsan.
 +
</p>
 +
<a href="#" class="button">Continue Reading</a>
 +
</article>
 +
<!-- /Featured Post -->
 +
 +
</div>
 +
</div>
 +
<div class="3u">
 +
<div class="sidebar">
 +
 +
<!-- Archives -->
 +
<ul class="style2">
 +
<li>
 +
<article class="is-post-summary">
 +
<h3><a href="#">Where are the graphics?</a></h3>
 +
<ul class="meta">
 +
<li class="fa fa-clock-o">6 hours ago</li>
 +
<li class="fa fa-comments"><a href="#">34</a></li>
 +
</ul>
 +
</article>
 +
</li>
 +
<li>
 +
<article class="is-post-summary">
 +
<h3><a href="#">What achievements are there</a></h3>
 +
<ul class="meta">
 +
<li class="fa fa-clock-o">9 hours ago</li>
 +
<li class="fa fa-comments"><a href="#">27</a></li>
 +
</ul>
 +
</article>
 +
</li>
 +
<li>
 +
<article class="is-post-summary">
 +
<h3><a href="#">Can I play w/a controller</a></h3>
 +
<ul class="meta">
 +
<li class="fa fa-clock-o">Yesterday</li>
 +
<li class="fa fa-comments"><a href="#">184</a></li>
 +
</ul>
 +
</article>
 +
</li>
 +
<li>
 +
<article class="is-post-summary">
 +
<h3><a href="#">How is this a game??</a></h3>
 +
<ul class="meta">
 +
<li class="fa fa-clock-o">2 days ago</li>
 +
<li class="fa fa-comments"><a href="#">286</a></li>
 +
</ul>
 +
</article>
 +
</li>
 +
<li>
 +
<article class="is-post-summary">
 +
<h3><a href="#">Imagination is lost on me</a></h3>
 +
<ul class="meta">
 +
<li class="fa fa-clock-o">3 days ago</li>
 +
<li class="fa fa-comments"><a href="#">8,086</a></li>
 +
</ul>
 +
</article>
 +
</li>
 +
</ul>
 +
<a href="#" class="button button-alt">Browse Archives</a>
 +
<!-- /Archives -->
 +
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</section>
 +
<!-- /Blog -->
 +
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
<!-- /Main -->
 +
 +
<!-- Footer -->
 +
<footer id="footer" class="container">
 +
<div class="row">
 +
<div class="12u">
 +
 +
<!-- About -->
 +
<section>
 +
<h2 class="major"><span>What's this about?</span></h2>
 +
<p>
 +
This is <a href="http://html5up.net/txt/">TXT</a>, a free site template designed by
 +
<a href="http://n33.co">n33</a> for <a href="http://html5up.net/">HTML5 UP</a>.
 +
It's built on the <a href="http://skeljs.org">skelJS</a> framework, uses well-thought out
 +
HTML5 and CSS3, and is fully responsive making it a great starting point for your own
 +
projects. And, like everything else we make, it's also free to use for pretty much any
 +
personal or commercial work under the <a href="http://html5up.net/license/">Creative Commons Attribution</a>
 +
license, so go ahead and use it &ndash; just don't forget to credit us!
 +
</p>
 +
</section>
 +
<!-- /About -->
 +
 +
</div>
 +
</div>
 +
<div class="row">
 +
<div class="12u">
 +
 +
<!-- Contact -->
 +
<section>
 +
<h2 class="major"><span>Get in touch</span></h2>
 +
<ul class="contact">
 +
<li><a class="fa fa-facebook solo" href="#"><span>Facebook</span></a></li>
 +
<li><a class="fa fa-twitter solo" href="http://twitter.com/n33co"><span>Twitter</span></a></li>
 +
<li><a class="fa fa-rss solo" href="http://n33.co/feed/"><span>RSS</span></a></li>
 +
<li><a class="fa fa-dribbble solo" href="http://dribbble.com/n33"><span>Dribbble</span></a></li>
 +
<li><a class="fa fa-linkedin solo" href="#"><span>LinkedIn</span></a></li>
 +
<li><a class="fa fa-google-plus solo" href="#"><span>Google+</span></a></li>
 +
</ul>
 +
</section>
 +
<!-- /Contact -->
 +
 +
</div>
 +
</div>
 +
 +
<!-- Copyright -->
 +
<div id="copyright">
 +
&copy; Untitled Something | Images: <a href="http://fotogrph.com">fotogrph</a> | Design: <a href="http://html5up.net/">HTML5 UP</a>
 +
</div>
 +
<!-- /Copyright -->
 +
 +
</footer>
 +
<!-- /Footer -->
 +
 +
</body>
 +
</html>

Revision as of 05:00, 10 April 2014

You check the contents of your inventory

Phasellus quam turpis, feugiat sit amet ornare in, hendrerit in lectus. Praesent semper mod quis eget mi. Etiam eu
ante risus. Aliquam erat volutpat. Aliquam luctus et mattis lectus amet pulvinar. Nam nec turpis consequat.

Valid Commands

Look Up

Phasellus quam turpis, feugiat sit amet ornare in, a hendrerit in lectus dolore. Praesent semper mod quis eget sed etiam eu ante risus.

Look Down

Phasellus quam turpis, feugiat sit amet ornare in, a hendrerit in lectus dolore. Praesent semper mod quis eget sed etiam eu ante risus.

Examine Room

Phasellus quam turpis, feugiat sit amet ornare in, a hendrerit in lectus dolore. Praesent semper mod quis eget sed etiam eu ante risus.

Get Lamp

Phasellus quam turpis, feugiat sit amet ornare in, a hendrerit in lectus dolore. Praesent semper mod quis eget sed etiam eu ante risus.

Adventure Log

You mean I have to read stuff?

  • 15 minutes ago
  • 8

Phasellus quam turpis, feugiat sit amet ornare in, a hendrerit in lectus. Praesent semper mod quis eget mi. Etiam sed ante risus aliquam erat et volutpat. Praesent a dapibus velit. Curabitur sed nisi nunc, accumsan vestibulum lectus. Lorem ipsum dolor sit non aliquet sed, tempor et dolor. Praesent a dapibus velit. Curabitur accumsan.

Continue Reading

What's this about?

This is TXT, a free site template designed by n33 for HTML5 UP. It's built on the skelJS framework, uses well-thought out HTML5 and CSS3, and is fully responsive making it a great starting point for your own projects. And, like everything else we make, it's also free to use for pretty much any personal or commercial work under the Creative Commons Attribution license, so go ahead and use it – just don't forget to credit us!