|
|
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 – 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"> |
| + | © 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> |