Team:Oxford/layouttest

From 2014.igem.org

(Difference between revisions)
Line 7: Line 7:
<head>
<head>
-
<style type="text/css">
 
-
 
-
  @import url(http://fonts.googleapis.com/css?family=PT+Serif|Open+Sans:300italic,400,300);
 
-
 
-
  /* Enforce a lack of horizontal scrollbar so that the social section doesn't mess with the viewport. */
 
-
  html, body {
 
-
    max-width: 100%;
 
-
    overflow-x: hidden;
 
-
  }
 
-
 
-
  body {
 
-
    background-color: #EBEBEB;
 
-
    margin: 0px;
 
-
    padding: 0;
 
-
    border: 0;
 
-
    vertical-align: baseline;
 
-
    font-family: 'Open Sans', 'helvetica', sans-serif;
 
-
    font-size: 10px;
 
-
    font-weight: 300;
 
-
  }
 
-
 
-
  #content {
 
-
    border:none;
 
-
    width:100%;
 
-
    margin:0;
 
-
    padding:0;
 
-
    background:none;
 
-
  }
 
-
 
-
  #catlinks {
 
-
    display:none;
 
-
  }
 
-
 
-
  #contentSub {
 
-
    display:none;
 
-
  }
 
-
 
-
  #menubar {
 
-
    width: auto;
 
-
    margin-top:0.5%;
 
-
}
 
-
 
-
  .left-menu:hover {
 
-
    background-color: transparent;
 
-
  }
 
-
  #menubar li a {
 
-
    background-color: transparent;
 
-
  }
 
-
  #menubar:hover {
 
-
    color: gray;
 
-
  }
 
-
  #menubar li a {
 
-
    color: #B5B5B5;
 
-
  }
 
-
  #menubar:hover li a {
 
-
    color: gray;
 
-
  }
 
-
 
-
  #menubar.left-menu.noprint ul li:last-child {
 
-
  display:none;
 
-
  }
 
-
 
-
  #search-controls {
 
-
    display:none;
 
-
  }
 
-
 
-
  #top-section {
 
-
    height:0px;
 
-
    width:100%;
 
-
    border:none;
 
-
  }
 
-
 
-
  #footer-box {
 
-
    border:none;
 
-
    display:none;
 
-
    width:100%;
 
-
  }
 
-
 
-
  #p-logo {
 
-
    display:none
 
-
  }
 
-
 
-
  .firstHeading {
 
-
  display:none;
 
-
  }
 
-
 
-
  #bodyContent p{
 
-
    display:none;
 
-
  }
 
-
 
-
  html, div, span, applet, object, iframe,
 
-
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 
-
  a, abbr, acronym, address, big, cite, code,
 
-
  del, dfn, em, img, ins, kbd, q, s, samp,
 
-
  small, strike, strong, sub, sup, tt, var,
 
-
  b, u, i, center,
 
-
  dl, dt, dd, ol, ul, li,
 
-
  fieldset, form, label, legend,
 
-
  table, caption, tbody, tfoot, thead, tr, th, td,
 
-
  article, aside, canvas, details, embed,
 
-
  figure, figcaption, footer, header, hgroup,
 
-
  menu, nav, output, ruby, section, summary,
 
-
  time, mark, audio, video {
 
-
    margin: 0;
 
-
    padding: 0;
 
-
    border: 0;
 
-
    font-size: 100%;
 
-
    font: inherit;
 
-
    vertical-align: baseline;
 
-
  }
 
-
 
-
  #top-section {
 
-
    width: 965px;
 
-
    height: 0;
 
-
    margin: 0 auto;
 
-
    padding: 0;
 
-
    border: none;}
 
-
 
-
  .left-menu:hover {
 
-
    background-color: transparent;}
 
-
 
-
  #menubar li a {
 
-
    background-color: transparent;}
 
-
</style>
 
-
 
-
<!-- Website Template designed by www.downloadwebsitetemplates.co.uk -->
 
<meta charset="UTF-8">
<meta charset="UTF-8">
<title>Oxigem 2014 - Bioremediation</title>
<title>Oxigem 2014 - Bioremediation</title>
Line 145: Line 19:
<!--[if IE]><![endif]-->
<!--[if IE]><![endif]-->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/style.css">
-
<script src="js/jquery.js"></script>
 
-
<script src="js/owlcarousel.js"></script>
 
-
<script src="js/scripts.js"></script>
 
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
</head>
Line 155: Line 26:
<div class="container clearfix">
<div class="container clearfix">
<div id="headercont" class="bodycontainer clearfix">
<div id="headercont" class="bodycontainer clearfix">
-
<h1><a title="" href="#">Aperture <span>Free Website Template</span></a></h1>
+
<h1><a title="" href="#">Bioremediation <span>Characterisation</span></a></h1>
          
          
</div>
</div>
Line 167: Line 38:
<div class="item">
<div class="item">
<div class="itemcont">
<div class="itemcont">
-
<h3>Urna eget vulputate egestas</h3>
+
<h3 style="padding-top:50px;color:white;margin-left:10%;">Urna eget vulputate egestas</h3>
<span class="hrline"></span>
<span class="hrline"></span>
-
<p>Quisque condimentum, urna eget vulputate egestas, justo turpis luctus massa, in malesuada arcu velit vel metus. Donec massa diam, consectetur sit amet felis sit amet, rutrum accumsan neque.</p>
+
<p style="padding-bottom:50px;color:white;margin-left:10%;margin-right:10%;">Quisque condimentum, urna eget vulputate egestas, justo turpis luctus massa, in malesuada arcu velit vel metus. Donec massa diam, consectetur sit amet felis sit amet, rutrum accumsan neque.</p>
-
</div>
+
-
</div>
+
-
<div class="item">
+
-
<div class="itemcont">
+
-
<h3>Quisque eget condimentum</h3>
+
-
<span class="hrline"></span>
+
-
<p>Quisque condimentum, urna eget vulputate egestas, justo turpis luctus massa, in malesuada arcu velit vel metus. Donec massa diam, consectetur sit amet felis sit amet, rutrum accumsan neque.</p>
+
-
</div>
+
-
</div>
+
-
<div class="item">
+
-
<div class="itemcont">
+
-
<h3>Donec massa diam consectetur</h3>
+
-
<span class="hrline"></span>
+
-
<p>Quisque condimentum, urna eget vulputate egestas, justo turpis luctus massa, in malesuada arcu velit vel metus. Donec massa diam, consectetur sit amet felis sit amet, rutrum accumsan neque.</p>
+
</div>
</div>
</div>
</div>
 +
</div>
</div>
</div>
</div>
Line 196: Line 54:
      
      
<h2>Lorem ipsum dolor sit amet consectetur</h2>
<h2>Lorem ipsum dolor sit amet consectetur</h2>
-
<img class="imgright" alt="" src="images/600x450.jpg" />
+
<img class="imgright" alt="" src="https://static.igem.org/mediawiki/2014/c/c2/OxigemDCMation600x400.jpg" />
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec dolor elit. Quisque ut rutrum arcu, at posuere odio. In hac habitasse platea dictumst. In euismod ante ut quam tempus, commodo congue urna sagittis. Nulla convallis est quis ultricies semper. Donec tempor, ligula at molestie iaculis, odio nulla faucibus mi, eu mattis mauris erat porta dui. Praesent quis turpis dui. Cras sit amet pulvinar tortor. Aliquam pretium nunc vel viverra accumsan.</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec dolor elit. Quisque ut rutrum arcu, at posuere odio. In hac habitasse platea dictumst. In euismod ante ut quam tempus, commodo congue urna sagittis. Nulla convallis est quis ultricies semper. Donec tempor, ligula at molestie iaculis, odio nulla faucibus mi, eu mattis mauris erat porta dui. Praesent quis turpis dui. Cras sit amet pulvinar tortor. Aliquam pretium nunc vel viverra accumsan.</p>
         <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas elementum pulvinar convallis. Proin sit amet urna ligula. Vestibulum vestibulum lectus et lacus pretium hendrerit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam eu vulputate leo. Integer tincidunt leo vitae turpis volutpat imperdiet. Donec pellentesque lectus eu suscipit ultrices. Pellentesque a quam auctor, pulvinar lacus vel, euismod purus.</p>
         <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas elementum pulvinar convallis. Proin sit amet urna ligula. Vestibulum vestibulum lectus et lacus pretium hendrerit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam eu vulputate leo. Integer tincidunt leo vitae turpis volutpat imperdiet. Donec pellentesque lectus eu suscipit ultrices. Pellentesque a quam auctor, pulvinar lacus vel, euismod purus.</p>
Line 207: Line 65:
<div id="section2" class="bodycontainer section clearfix">
<div id="section2" class="bodycontainer section clearfix">
      
      
-
<h2>Column Examples</h2>
+
<h2>Modelling</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec dolor elit. Quisque ut rutrum arcu, at posuere odio. In hac habitasse platea dictumst. In euismod ante ut quam tempus, commodo congue urna sagittis. Nulla convallis est quis ultricies semper. Donec tempor, ligula at molestie iaculis, odio nulla faucibus mi, eu mattis mauris erat porta dui. Praesent quis turpis dui. Cras sit amet pulvinar tortor. Aliquam pretium nunc vel viverra accumsan.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec dolor elit. Quisque ut rutrum arcu, at posuere odio. In hac habitasse platea dictumst. In euismod ante ut quam tempus, commodo congue urna sagittis. Nulla convallis est quis ultricies semper. Donec tempor, ligula at molestie iaculis, odio nulla faucibus mi, eu mattis mauris erat porta dui. Praesent quis turpis dui. Cras sit amet pulvinar tortor. Aliquam pretium nunc vel viverra accumsan.</p>
          
          
Line 257: Line 115:
<div id="section3" class="bodycontainer clearfix">
<div id="section3" class="bodycontainer clearfix">
<h2>Lorem ipsum dolor sit amet consectetur</h2>
<h2>Lorem ipsum dolor sit amet consectetur</h2>
-
<img class="imgleft" alt="" src="images/600x450.jpg" />
+
<img class="imgleft" alt="" src="https://static.igem.org/mediawiki/2014/c/c2/OxigemDCMation600x400.jpg" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec dolor elit. Quisque ut rutrum arcu, at posuere odio. In hac habitasse platea dictumst. In euismod ante ut quam tempus, commodo congue urna sagittis. Nulla convallis est quis ultricies semper. Donec tempor, ligula at molestie iaculis, odio nulla faucibus mi, eu mattis mauris erat porta dui. Praesent quis turpis dui. Cras sit amet pulvinar tortor. Aliquam pretium nunc vel viverra accumsan.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec dolor elit. Quisque ut rutrum arcu, at posuere odio. In hac habitasse platea dictumst. In euismod ante ut quam tempus, commodo congue urna sagittis. Nulla convallis est quis ultricies semper. Donec tempor, ligula at molestie iaculis, odio nulla faucibus mi, eu mattis mauris erat porta dui. Praesent quis turpis dui. Cras sit amet pulvinar tortor. Aliquam pretium nunc vel viverra accumsan.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas elementum pulvinar convallis. Proin sit amet urna ligula. Vestibulum vestibulum lectus et lacus pretium hendrerit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam eu vulputate leo. Integer tincidunt leo vitae turpis volutpat imperdiet. Donec pellentesque lectus eu suscipit ultrices. Pellentesque a quam auctor, pulvinar lacus vel, euismod purus.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas elementum pulvinar convallis. Proin sit amet urna ligula. Vestibulum vestibulum lectus et lacus pretium hendrerit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam eu vulputate leo. Integer tincidunt leo vitae turpis volutpat imperdiet. Donec pellentesque lectus eu suscipit ultrices. Pellentesque a quam auctor, pulvinar lacus vel, euismod purus.</p>
Line 268: Line 126:
<div id="footercont" class="bodycontainer clearfix">
<div id="footercont" class="bodycontainer clearfix">
-
<div class="grid">
+
 
-
<div class="column-2">
+
-
<p><a class="scrolltop" title="back to top" href="#pagetop"><span class="fa fa-angle-double-up"></span></a></p>
+
-
</div>
+
-
<div class="column-10 textright">
+
-
<div id="socialmedia" class="clearfix">
+
-
<ul>
+
-
<li><a title="" href="#" rel="external"><span class="fa fa-facebook"></span></a></li>
+
-
<li><a title="" href="#" rel="external"><span class="fa fa-twitter"></span></a></li>
+
-
<li><a title="" href="#" rel="external"><span class="fa fa-google-plus"></span></a></li>
+
-
<li><a title="" href="#" rel="external"><span class="fa fa-linkedin"></span></a></li>
+
-
<li><a title="" href="#" rel="external"><span class="fa fa-pinterest"></span></a></li>
+
-
</ul>
+
-
</div>
+
-
</div>
+
-
</div>
+
</div>
</div>
</div>
</div>
-
 
-
<script src="js/pageslide.min.js"></script>
 
</body>
</body>
</html>
</html>

Revision as of 18:43, 17 September 2014

<!DOCTYPE html> Oxigem 2014 - Bioremediation

Lorem ipsum dolor sit amet consectetur

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec dolor elit. Quisque ut rutrum arcu, at posuere odio. In hac habitasse platea dictumst. In euismod ante ut quam tempus, commodo congue urna sagittis. Nulla convallis est quis ultricies semper. Donec tempor, ligula at molestie iaculis, odio nulla faucibus mi, eu mattis mauris erat porta dui. Praesent quis turpis dui. Cras sit amet pulvinar tortor. Aliquam pretium nunc vel viverra accumsan.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas elementum pulvinar convallis. Proin sit amet urna ligula. Vestibulum vestibulum lectus et lacus pretium hendrerit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam eu vulputate leo. Integer tincidunt leo vitae turpis volutpat imperdiet. Donec pellentesque lectus eu suscipit ultrices. Pellentesque a quam auctor, pulvinar lacus vel, euismod purus.

Sed vel ante a quam lacinia facilisis. Etiam gravida diam sem, ut facilisis ipsum varius vel. Fusce a metus a augue tincidunt consectetur a et enim. Donec mattis vulputate risus, a feugiat purus ultrices et. Curabitur mattis neque sit amet diam aliquam molestie. Nam vulputate justo non metus convallis dapibus. Mauris lobortis consectetur imperdiet. Nam id eros purus. Mauris quis est elit. Cras dapibus erat quis lectus dictum egestas.

Modelling

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec dolor elit. Quisque ut rutrum arcu, at posuere odio. In hac habitasse platea dictumst. In euismod ante ut quam tempus, commodo congue urna sagittis. Nulla convallis est quis ultricies semper. Donec tempor, ligula at molestie iaculis, odio nulla faucibus mi, eu mattis mauris erat porta dui. Praesent quis turpis dui. Cras sit amet pulvinar tortor. Aliquam pretium nunc vel viverra accumsan.

.column-6

Sed vel ante a quam lacinia facilisis. Etiam gravida diam sem, ut facilisis ipsum varius vel. Fusce a metus a augue tincidunt consectetur a et enim. Donec mattis vulputate risus, a feugiat purus ultrices et. Curabitur mattis neque sit amet diam aliquam molestie. Nam vulputate justo non metus convallis dapibus.

.column-6

Sed vel ante a quam lacinia facilisis. Etiam gravida diam sem, ut facilisis ipsum varius vel. Fusce a metus a augue tincidunt consectetur a et enim. Donec mattis vulputate risus, a feugiat purus ultrices et. Curabitur mattis neque sit amet diam aliquam molestie. Nam vulputate justo non metus convallis dapibus.

.column-4

Sed vel ante a quam lacinia facilisis. Fusce a metus a augue tincidunt consectetur a et enim. Donec mattis vulputate risus, a feugiat purus ultrices et. Curabitur mattis neque sit amet diam aliquam molestie.

.column-4

Sed vel ante a quam lacinia facilisis. Fusce a metus a augue tincidunt consectetur a et enim. Donec mattis vulputate risus, a feugiat purus ultrices et. Curabitur mattis neque sit amet diam aliquam molestie.

.column-4

Sed vel ante a quam lacinia facilisis. Fusce a metus a augue tincidunt consectetur a et enim. Donec mattis vulputate risus, a feugiat purus ultrices et. Curabitur mattis neque sit amet diam aliquam molestie.

.column-6

Sed vel ante a quam lacinia facilisis. Fusce a metus a augue tincidunt consectetur a et enim. Donec mattis vulputate risus, a feugiat purus ultrices et. Curabitur mattis neque sit amet diam aliquam molestie. Donec mattis vulputate risus, a feugiat purus ultrices et.

.column-3

Sed vel ante a quam lacinia facilisis. Fusce a metus a augue tincidunt consectetur a et enim. Donec mattis vulputate risus.

.column-3

Sed vel ante a quam lacinia facilisis. Fusce a metus a augue tincidunt consectetur a et enim. Donec mattis vulputate risus.

Lorem ipsum dolor sit amet consectetur

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec dolor elit. Quisque ut rutrum arcu, at posuere odio. In hac habitasse platea dictumst. In euismod ante ut quam tempus, commodo congue urna sagittis. Nulla convallis est quis ultricies semper. Donec tempor, ligula at molestie iaculis, odio nulla faucibus mi, eu mattis mauris erat porta dui. Praesent quis turpis dui. Cras sit amet pulvinar tortor. Aliquam pretium nunc vel viverra accumsan.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas elementum pulvinar convallis. Proin sit amet urna ligula. Vestibulum vestibulum lectus et lacus pretium hendrerit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam eu vulputate leo. Integer tincidunt leo vitae turpis volutpat imperdiet. Donec pellentesque lectus eu suscipit ultrices. Pellentesque a quam auctor, pulvinar lacus vel, euismod purus.

Sed vel ante a quam lacinia facilisis. Etiam gravida diam sem, ut facilisis ipsum varius vel. Fusce a metus a augue tincidunt consectetur a et enim. Donec mattis vulputate risus, a feugiat purus ultrices et. Curabitur mattis neque sit amet diam aliquam molestie. Nam vulputate justo non metus convallis dapibus. Mauris lobortis consectetur imperdiet. Nam id eros purus. Mauris quis est elit. Cras dapibus erat quis lectus dictum egestas.

Retrieved from "http://2014.igem.org/Team:Oxford/layouttest"