"
Team:Calgary/Sandbox
From 2012.igem.org
(Difference between revisions)
| Line 1: | Line 1: | ||
<html> | <html> | ||
<!-- | <!-- | ||
| - | This version | + | This version attempts to add the ability for CSS switching |
--> | --> | ||
<head> | <head> | ||
| Line 20: | Line 20: | ||
margin-top: 10px; | margin-top: 10px; | ||
} | } | ||
| - | h1, h2{ | + | h1, h2, #css-full, #css-mobi{ |
font-family: Myriad Pro, Gill Sans MT, Trebuchet MS, Arial, Sans-Serif; | font-family: Myriad Pro, Gill Sans MT, Trebuchet MS, Arial, Sans-Serif; | ||
border: 0; | border: 0; | ||
| Line 31: | Line 31: | ||
color: black; | color: black; | ||
margin-bottom: 10px; | margin-bottom: 10px; | ||
| + | } | ||
| + | #css-full, #css-mobi{ | ||
| + | position: absolute; | ||
| + | float: right; | ||
| + | color: black; | ||
| + | font-size: 1.3em; | ||
| + | top: 0px; | ||
| + | right: 10px; | ||
} | } | ||
| Line 139: | Line 147: | ||
font-size: 1.5em; | font-size: 1.5em; | ||
} | } | ||
| + | #css-mobi{ | ||
| + | display: none; | ||
| + | } | ||
| + | #css-full{ | ||
| + | display: block; | ||
| + | top: 73px; | ||
| + | } | ||
} | } | ||
| Line 147: | Line 162: | ||
position: relative; | position: relative; | ||
margin-top: 20px; | margin-top: 20px; | ||
| - | font-size: | + | font-size: 2.1em; |
} | } | ||
h2{ | h2{ | ||
position: relative; | position: relative; | ||
| - | font-size: 1. | + | font-size: 1.8em; |
} | } | ||
p{ | p{ | ||
position: relative; | position: relative; | ||
| - | font-size: 1. | + | font-size: 1.2em; |
} | } | ||
} | } | ||
| Line 284: | Line 299: | ||
margin-bottom: 10px; | margin-bottom: 10px; | ||
margin-top: -20px; | margin-top: -20px; | ||
| + | } | ||
| + | #css-full{ | ||
| + | display: none; | ||
| + | } | ||
| + | #css-mobi{ | ||
| + | display: block; | ||
} | } | ||
| Line 329: | Line 350: | ||
<body> | <body> | ||
| - | <div id="headerimage"><img src="https://static.igem.org/mediawiki/2012/f/fc/UCalgary2012_MainHeaderImage.png"></img></div> | + | <header> |
| - | <div id="nav-wrap"> | + | <a id="css-full" href="#default">Full View</a> |
| - | + | <a id="css-mobi" href="#mobile">Mobile View</a> | |
| - | + | <div id="headerimage"><img src="https://static.igem.org/mediawiki/2012/f/fc/UCalgary2012_MainHeaderImage.png"></img></div> | |
| - | + | <div id="nav-wrap"> | |
| - | + | <ul id="nav"> | |
| - | + | <li><a href="#">Home</a></li> | |
| - | + | <li><a class="drop" href="#">Team</a> | |
| - | + | <div class="col_1"> | |
| - | + | <a class="dropheader" href="#">MEMBERS</a> | |
| - | + | <a href="#">Undergraduates</a> | |
| - | + | <a href="#">Advisors</a> | |
| - | + | <a href="#">Supervisors</a> | |
| - | + | <a class="dropheader" href="#">OFFICIAL PROFILE</a> | |
| - | + | <a class="dropheader" href="#">THE UNIVERSITY</a> | |
| - | + | </div> | |
| - | + | </li> | |
| - | + | <li><a class="drop" href="#">Project</a> | |
| - | + | <div class="col_2"> | |
| - | + | <div class="col_l"> | |
| - | + | <a class="dropheader" href="#">OVERVIEW</a> | |
| - | + | <a href="#">Data Page</a> | |
| - | + | <a class="dropheader" href="#">BIOSENSOR</a> | |
| - | + | <a href="#">Sensing NAs</a> | |
| - | + | <a href="#">Promoter Library</a> | |
| - | + | <a href="#">Electrochemistry</a> | |
| - | + | <a class="dropheader" href="#">FUEL CONVERSION</a> | |
| - | + | <a href="#">Decarboxylation</a> | |
| - | + | <a href="#">Desulfurization</a> | |
| + | <a href="#">Denitrification</a> | ||
| + | <a href="#">Ring Cleavage</a> | ||
| + | <a href="#">Flux Analysis</a> | ||
| + | </div> | ||
| + | |||
| + | <div class="col_r"> | ||
| + | <a class="dropheader" href="#">KILLSWITCH</a> | ||
| + | <a href="#">Riboswitches</a> | ||
| + | <a href="#">Rhamnose Promoter</a> | ||
| + | <a class="dropheader" href="#">BIOREACTOR</a> | ||
| + | <a href="#">Design</a> | ||
| + | <a href="#">Modelling</a> | ||
| + | <a class="dropheader" href="#">FUTURE DIRECTIONS</a> | ||
| + | <a class="dropheader" href="#">ATTRIBUTIONS</a> | ||
| + | </div> | ||
| + | |||
| + | </div> | ||
| + | </li> | ||
| + | <li><a href="#">Parts</a></li> | ||
| + | <li><a class="drop" href="#">Notebook</a> | ||
| + | <div class="col_1"> | ||
| + | <a class="dropheader" href="#">JOURNAL</a> | ||
| + | <a class="dropheader" href="#">SAFETY</a> | ||
| + | <a class="dropheader" href="#">PROTOCOLS</a> | ||
</div> | </div> | ||
| - | + | </li> | |
| - | + | <li><a class="drop" href="#">Outreach</a> | |
| - | + | <div class="col_1"> | |
| - | < | + | <a class="dropheader" href="#">HUMAN PRACTICES</a> |
| - | + | <a href="#">Video Series</a> | |
| - | + | <a href="#">Video Game</a> | |
| - | + | <a class="dropheader" href="#">FOLLOW US</a> | |
| - | + | <a href="#">Twitter</a> | |
| - | + | <a href="#">Facebook</a> | |
| - | + | ||
</div> | </div> | ||
| - | + | </li> | |
| - | + | <li><a href="#">Sponsors</a></li> | |
| - | + | <li><a href="#">iGEM Home</a></li> | |
| - | + | </ul> | |
| - | + | <a id="logo" href="https://2012.igem.org/Team:Calgary"><img src="https://static.igem.org/mediawiki/2012/4/48/UCalgary2012_White_Low-Res_Official_Logo.png"></img></a> | |
| - | + | </div> | |
| - | + | </header> | |
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | </div> | + | |
<div id="bodycontainer"> | <div id="bodycontainer"> | ||
Revision as of 16:20, 27 June 2012
Header Stuff!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut convallis eleifend interdum. Pellentesque libero magna, dignissim vitae blandit et, tincidunt nec felis. Proin et risus eget lectus lacinia mollis. Quisque rhoncus posuere lectus, eget vestibulum dolor feugiat bibendum. Vestibulum scelerisque commodo eros, in vulputate arcu tempus varius. Donec ornare malesuada mi vitae rhoncus. Nulla facilisi.
Subheader Stuff!
Viverra nisl a bibendum. Etiam cursus ultrices arcu, pretium sodales tellus euismod id. Pellentesque congue aliquam urna, commodo iaculis massa pellentesque eget. Vivamus et sem non massa tincidunt ultrices. Sed luctus justo nec dui venenatis sodales. Proin sit amet risus nibh. In hac habitasse platea dictumst. Sed pretium egestas augue, sed varius nibh consequat ac. In orci.
