Team:Calgary Entrepreneurial
From 2013.igem.org
Line 1: | Line 1: | ||
+ | {{Team:Calgary_Entrepreneurial/Header}} | ||
+ | |||
<html> | <html> | ||
<head> | <head> | ||
- | <title> | + | <title>FREDsense Home</title> |
+ | |||
+ | |||
+ | <!--Stylesheets--> | ||
+ | <style type="text/css"> | ||
+ | |||
+ | #blackcontainer{ | ||
+ | text-align: right; /*aligns herocaption to the right*/ | ||
+ | } | ||
+ | |||
+ | img#hero{ | ||
+ | display: block; | ||
+ | margin: 0 auto 0 auto; | ||
+ | max-width: 950px; | ||
+ | position: relative; | ||
+ | top: 10.5em; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | #herocaption{ | ||
+ | background: #EF8526; | ||
+ | display: inline-block; | ||
+ | padding: 1em; | ||
+ | position: relative; | ||
+ | right: 13.5%; | ||
+ | text-align: left; | ||
+ | top: 2em; | ||
+ | width: 40%; | ||
+ | } | ||
+ | |||
+ | #herocaption h1{ | ||
+ | color: #FFFFFF; | ||
+ | font-size: 1.8rem; | ||
+ | line-height: 2.2rem; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | #herocaption a:hover{ | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | #herocaption p{ | ||
+ | color: #FFFFFF; | ||
+ | font-size: 1.15rem; | ||
+ | } | ||
+ | |||
+ | |||
+ | #maincontent{ | ||
+ | background: #FFFFFF; | ||
+ | height: 100%; | ||
+ | position: relative; | ||
+ | margin-top: 4em; | ||
+ | width: 100%; | ||
+ | z-index: 0; | ||
+ | } | ||
+ | |||
+ | .boxcontainer{ | ||
+ | display: block; | ||
+ | margin: 1% auto; | ||
+ | max-width: 975px; | ||
+ | overflow: hidden; /*div equal height hack*/ | ||
+ | padding: 0; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | #firstrow{ | ||
+ | padding-top: 1em; | ||
+ | } | ||
+ | |||
+ | .greenbox{ | ||
+ | background: #7cb83d; | ||
+ | display: block; | ||
+ | float: left; | ||
+ | |||
+ | margin-left: 1%; | ||
+ | margin-bottom: -100%; /*div equal height hack*/ | ||
+ | |||
+ | padding: 0; | ||
+ | padding-bottom: 100%; /*div equal height hack*/ | ||
+ | } | ||
+ | |||
+ | .boxcontainer a div:hover{ | ||
+ | opacity: 0.9; | ||
+ | filter:alpha(opacity=90); /*IE8 and lower*/ | ||
+ | } | ||
+ | |||
+ | .greenbox h1{ | ||
+ | color: #FFFFFF; | ||
+ | font-size: 1.8rem; | ||
+ | line-height: 2.2rem; | ||
+ | margin: 0 !important; | ||
+ | padding: 1.5rem 1.5rem 0 1.5rem; | ||
+ | } | ||
+ | |||
+ | .greenbox p{ | ||
+ | color: white; | ||
+ | padding: 1rem 1.5rem 1.5rem 1.5rem; | ||
+ | } | ||
+ | |||
+ | .smallbox{ | ||
+ | width: 32%; | ||
+ | } | ||
+ | |||
+ | .bigbox{ | ||
+ | width: 65%; | ||
+ | } | ||
+ | |||
+ | .boxclear{ | ||
+ | clear: both; | ||
+ | } | ||
+ | |||
+ | |||
+ | /*Font positioning breaks at 1050px screen width*/ | ||
+ | @media screen and (max-width: 1050px){ | ||
+ | |||
+ | #herocaption{ | ||
+ | right: .5em; | ||
+ | width: 50%; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | /*mobile and tablet styling for less than 768px*/ | ||
+ | @media screen and (max-width: 768px){ | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | </style> | ||
+ | |||
</head> | </head> | ||
- | |||
- | |||
- | |||
- | |||
- | < | + | <body> |
+ | |||
+ | |||
+ | <!--Black section hero image--> | ||
+ | <div id="blackcontainer"> | ||
+ | <img id="hero" src="https://static.igem.org/mediawiki/2013/7/71/CalgaryE_hero_index.png"></img> | ||
+ | <div id="herocaption"> | ||
+ | <h1>We are building better biosensors.</h1> | ||
+ | <p>FREDsense is a novel system for quantitative, real-time detection of various toxins in any sample. We use an electrochemical system that is portable, fast, and unlike anything else in the market.</p> | ||
+ | <a href="#"><h1>See how we're different. ></h1></a> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <!--White section--> | ||
+ | <div id="maincontent"> | ||
+ | |||
+ | <div class="boxcontainer" id="firstrow"> | ||
+ | <!--Note: anchor tags can be added around these boxes with no issue--> | ||
+ | <div id="box1" class="greenbox bigbox"> | ||
+ | <h1>Colours are so 2012.</h1> | ||
+ | <p>Aliquam et mauris ut quam molestie volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae malesuada leo. Donec tincidunt ornare tortor eget tristique. Quisque lacus sapien, luctus eu blandit id, gravida ut risus. Vivamus a scelerisque nisl. Vestibulum at sodales massa, nec dapibus ante. In in nulla quis nunc facilisis auctor. Donec semper lectus eu sollicitudin consequat.</p> | ||
+ | </div> | ||
+ | <div id="box2" class="greenbox smallbox"> | ||
+ | <!--image box background in CSS--> | ||
+ | </div> | ||
+ | |||
+ | <div class="boxclear"></div> | ||
+ | </div> | ||
+ | <div class="boxcontainer"> | ||
+ | <div id="box3" class="greenbox smallbox"> | ||
+ | <h1>Small box 1.</h1> | ||
+ | <p>Aliquam et mauris ut quam molestie volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae malesuada leo. Donec tincidunt ornare tortor eget tristique. Quisque lacus sapien, luctus eu blandit id, gravida ut risus.</p> | ||
+ | </div> | ||
+ | <div id="box4" class="greenbox smallbox"> | ||
+ | <h1>Small box 2.</h1> | ||
+ | <p>Aliquam et mauris ut quam molestie volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae malesuada leo.</p> | ||
+ | </div> | ||
+ | <div id="box5" class="greenbox smallbox"> | ||
+ | <h1>Small box 3.</h1> | ||
+ | <p>Aliquam et mauris ut quam molestie volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae malesuada leo. Donec tincidunt ornare tortor eget tristique. Quisque lacus sapien, luctus eu blandit id, gravida ut risus. Vivamus a scelerisque nisl. Vestibulum at sodales massa, nec dapibus ante. In in nulla quis nunc facilisis auctor.</p> | ||
+ | </div> | ||
+ | |||
+ | <div class="boxclear"></div> | ||
+ | </div> | ||
+ | <div class="boxcontainer"> | ||
+ | <div id="box6" class="greenbox smallbox"> | ||
+ | <h1>Small box 4.</h1> | ||
+ | <p>Aliquam et mauris ut quam molestie volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae malesuada leo. Donec tincidunt ornare tortor eget tristique. Quisque lacus sapien, luctus eu blandit id, gravida ut risus. Vivamus a scelerisque nisl. Vestibulum at sodales massa, nec dapibus ante. In in nulla quis nunc facilisis auctor.</p> | ||
+ | </div> | ||
+ | <div id="box7" class="greenbox bigbox"> | ||
+ | <!--content--> | ||
+ | </div> | ||
+ | |||
+ | <div class="boxclear"></div> | ||
+ | </div> | ||
+ | <div class="clear"></div> | ||
+ | </div> | ||
+ | |||
</body> | </body> | ||
</html> | </html> |
Revision as of 06:23, 23 October 2013
FREDsense's website works best with Javascript enabled, especially on mobile devices. Please enable Javascript for optimal viewing.
Colours are so 2012.
Aliquam et mauris ut quam molestie volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae malesuada leo. Donec tincidunt ornare tortor eget tristique. Quisque lacus sapien, luctus eu blandit id, gravida ut risus. Vivamus a scelerisque nisl. Vestibulum at sodales massa, nec dapibus ante. In in nulla quis nunc facilisis auctor. Donec semper lectus eu sollicitudin consequat.
Small box 1.
Aliquam et mauris ut quam molestie volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae malesuada leo. Donec tincidunt ornare tortor eget tristique. Quisque lacus sapien, luctus eu blandit id, gravida ut risus.
Small box 2.
Aliquam et mauris ut quam molestie volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae malesuada leo.
Small box 3.
Aliquam et mauris ut quam molestie volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae malesuada leo. Donec tincidunt ornare tortor eget tristique. Quisque lacus sapien, luctus eu blandit id, gravida ut risus. Vivamus a scelerisque nisl. Vestibulum at sodales massa, nec dapibus ante. In in nulla quis nunc facilisis auctor.
Small box 4.
Aliquam et mauris ut quam molestie volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae malesuada leo. Donec tincidunt ornare tortor eget tristique. Quisque lacus sapien, luctus eu blandit id, gravida ut risus. Vivamus a scelerisque nisl. Vestibulum at sodales massa, nec dapibus ante. In in nulla quis nunc facilisis auctor.