Team:Calgary Entrepreneurial/Sandbox

From 2013.igem.org

(Difference between revisions)
 
(82 intermediate revisions not shown)
Line 1: Line 1:
 +
{{Team:Calgary_Entrepreneurial/Header}}
 +
<html>
<html>
<head>
<head>
-
<!--Fonts-->
+
<title>FREDsense Technologies</title>
-
<link href='http://fonts.googleapis.com/css?family=Average|Roboto:400,300,500,500italic,400italic,300italic' rel='stylesheet' type='text/css'>
+
<meta name="description" content="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.">
-
 
+
<meta name="viewport" content="width=device-width, initial-scale=1">
-
<!--JQ Library-->
+
-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+
<!--Stylesheets-->
<!--Stylesheets-->
<style type="text/css">
<style type="text/css">
-
/***
+
#blackcontainer{
-
Minimal header: removes the search bar and header image and readjusts font colours in the menus.
+
text-align: right; /*aligns herocaption to the right*/
-
 
+
}
-
Thanks a lot to the 2011 Brown-Stanford and 2012 Lethbridge iGEM teams for snippets of their code!
+
-
Check out their wikis at:
+
-
https://2011.igem.org/Team:Brown-Stanford
+
-
https://2012.igem.org/Team:Lethbridge
+
-
***/
+
-
 
+
-
#content h1.firstHeading {
+
-
display: none;
+
-
}
+
-
#p-logo {
+
-
display: none;
+
-
}
+
-
#searchform {
+
-
    display: none;
+
-
}
+
-
 
+
-
.left-menu {
+
-
background-color: #555;
+
-
}
+
img#hero{
-
.left-menu a {
+
display: block;
-
    color: #000;
+
margin: 0 auto 0 auto;
-
}
+
max-width: 950px;
 +
position: relative;
 +
top: 10.5em;
 +
width: 100%;
 +
}
-
div#top-section{ /*the div containing the entire top bar*/
+
#herocaption{
-
background: #EEEEEE;
+
background: #EF8526;
-
height: 1.5em;
+
display: inline-block;
-
margin-bottom: 0px !important;
+
padding: 1em;
-
border: none;
+
position: relative;
-
width: 100%;
+
right: 13.5%;
-
}
+
text-align: left;
-
 
+
top: 2em;
-
 
+
width: 40%;
-
#content{
+
}
-
border: 0;
+
-
margin: 0;
+
#herocaption h1{
-
padding: 0;
+
color: #FFFFFF;
-
width: 100%;
+
font-size: 1.8rem;
-
}
+
line-height: 2.2rem;
-
 
+
padding: 0;
-
#search-controls {
+
}
-
overflow:hidden;
+
-
display:none;
+
#herocaption a:hover{
-
background: none;
+
text-decoration: none;
-
position: absolute;
+
}
-
top: 170px;
+
-
right: 40px;
+
#herocaption p{
-
}
+
color: #FFFFFF;
-
 
+
font-size: 1.15rem;
-
 
+
}
-
div#header {
+
-
width: 975px;
+
-
text-align: left;
+
#maincontent{
-
margin-left: auto;
+
background: #FFFFFF;
-
margin-right: auto;
+
-
margin-bottom: 0px !important;
+
-
}  
+
-
 
+
-
#menubar {
+
-
position: absolute;
+
-
background: none;
+
-
color: black;
+
-
}
+
-
 
+
-
.left-menu, .right-menu{
+
-
position: absolute;
+
-
background: none;
+
-
color: black;
+
-
}
+
-
 
+
-
.left-menu li a, .right-menu li a {
+
-
color: #000 !important;
+
-
font-size: 0.8rem;
+
-
padding: 0 0.6em 0 0;
+
-
}
+
-
 
+
-
 
+
-
.left-menu ul li, .right-menu ul li a{
+
-
background: none;
+
-
color: #000 !important;
+
-
font-size: 0.8rem;
+
-
}
+
-
 
+
-
.left-menu li a:hover, .right-menu li a:hover, .right-menu li a:visited, .right-menu li a:active {
+
-
    color: #000 !important;
+
-
font-size: 0.8rem;
+
-
}
+
-
 
+
-
#catlinks{
+
-
display:none;
+
-
}
+
-
 
+
-
#footer-box{
+
-
width: 100%;
+
-
margin: 0;
+
-
padding: 0;
+
-
border: none;
+
-
}
+
-
 
+
-
#f-list li a{
+
-
font-size: 0.8rem;
+
-
}
+
-
 
+
-
/*important for background colours*/
+
-
.mediawiki{
+
-
background: #ffffff;
+
-
}
+
-
 
+
-
/***End minimal header***/
+
-
 
+
-
html{
+
-
font-size: 100%;
+
-
}
+
-
 
+
-
body, #content{
+
-
background: #404040;
+
-
font-size: 100%;
+
height: 100%;
height: 100%;
-
margin: 0;
+
position: relative;
-
padding: 0;
+
margin-top: 3em;
 +
width: 100%;
 +
z-index: 0;
}
}
-
 
+
-
 
+
.boxcontainer{
-
header{
+
display: block;
-
text-align: justify;
+
margin: 1% auto;
 +
max-width: 975px;
 +
overflow: hidden; /*div equal height hack*/
padding: 0;
padding: 0;
-
position: absolute;
 
width: 100%;
width: 100%;
-
z-index: 0;
 
}
}
-
header:after{
+
#firstrow{
-
content: '';
+
padding-top: 1em;
-
display: inline-block;
+
-
width: 100%;
+
}
}
-
+
.greenbox{
-
.logo{
+
background: #7cb83d;
-
border: none;
+
display: block;
-
display: inline-block;
+
float: left;
-
*display: block;
+
-
margin: auto;
+
margin-left: 1%;
-
max-height: 100%;
+
margin-bottom: -100%; /*div equal height hack*/
-
max-width: 100%;
+
-
min-width: 200px;
+
padding: 0;
-
width: 19%;
+
padding-bottom: 100%; /*div equal height hack*/
-
vertical-align: middle;
+
-
 
+
}
}
 +
.boxcontainer a div:hover{
 +
opacity: 0.9;
 +
filter:alpha(opacity=90); /*IE8 and lower*/
 +
}
-
nav{
+
.greenbox h1{
-
display: inline-block;
+
color: #FFFFFF;
-
*display: block;
+
font-size: 1.8rem;
-
margin-top: 1em; /*nudges it down to align with the logo*/
+
line-height: 2.2rem;
-
margin-right: .5em;
+
margin: 0 !important;
-
vertical-align: middle;
+
padding: 1.5rem 1.5rem 0 1.5rem;
-
}
+
}
-
nav ul{
+
.greenbox p{
-
border-bottom: 2px solid white;
+
color: white;
-
*float: right;
+
padding: 1rem 1.5rem 1.5rem 1.5rem;
-
list-style: none;
+
}
}
-
nav li{
+
.smallbox{
-
display: inline-block;
+
width: 32%;
-
*display: inline-table;
+
-
*float: left;
+
}
}
-
nav li a{
+
.bigbox{
-
color: #FFFFFF !important;
+
width: 65%;
-
display: block; /*fills the full li element for clickability*/
+
}
-
font-family: Roboto, sans-serif;
+
-
font-size: 1.4rem;
+
.boxclear{
-
font-weight: 300;
+
clear: both;
-
line-height: 2em;
+
}
-
padding: .3em .8em 0 .8em;
+
 +
 
 +
/*Font positioning breaks at 1050px screen width*/
 +
@media screen and (max-width: 1050px){
 +
 +
#herocaption{
 +
right: .5em;
 +
width: 60%;
 +
}
 +
 +
#herocaption h1{
 +
color: #FFFFFF;
 +
font-size: 1.7rem;
 +
line-height: 2rem;
 +
padding: 0;
 +
}
 +
 +
#herocaption a:hover{
text-decoration: none;
text-decoration: none;
}
}
-
+
-
nav li a:hover{
+
#herocaption p{
-
background: #7cb83d;
+
color: #FFFFFF;
-
}
+
font-size: 1.1rem;
 +
line-height: 1.5rem;
 +
}
-
.clear{
+
.boxcontainer{
-
clear: both;
+
display: block;
-
}
+
margin: 1% auto;
-
+
max-width: 975px;
-
#maincontent{
+
overflow: hidden; /*div equal height hack*/
-
background: #FFFFFF;
+
padding: 0;
-
margin-top: 400px;
+
width: 100%;
width: 100%;
-
z-index: 2;
 
-
 
-
height: 900px;
 
}
}
-
#blackheader{
+
#firstrow{
 +
padding-top: 1em;
 +
}
 +
 +
.boxcontainer a div:hover{
 +
opacity: 0.9;
 +
filter:alpha(opacity=90); /*IE8 and lower*/
 +
}
 +
 +
.greenbox h1{
 +
color: #FFFFFF;
 +
font-size: 1.6rem;
 +
line-height: 2rem;
 +
margin: 0 !important;
 +
padding: 1.5rem 1.5rem 0 1.5rem;
 +
}
-
}
+
.greenbox p{
 +
color: white;
 +
font-size: 0.95rem;
 +
line-height: 1.35rem;
 +
padding: 1rem 1.5rem 1.5rem 1.5rem;
 +
}
 +
 +
}
 +
 
 +
/*mobile and tablet styling for less than 768px*/
 +
@media screen and (max-width: 768px){
-
/*White header that appears if javascript is enabled... hopefully*/
+
img#hero{
-
#whiteheader{
+
-
background: transparent;
+
display: none;
display: none;
-
margin-top: 2.9em; /*aligns it with the other menu*/
 
}
}
-
#whiteheader .logo{
+
#herocaption{
-
margin-left: 4.674%;
+
display: block;
-
min-width: 151px;
+
margin: auto;
-
width: 14.326%;
+
padding: 0;
 +
right: 0;
 +
top: 5em;
 +
width: 98%;
 +
}
 +
 +
#herocaption h1{
 +
color: #FFFFFF;
 +
font-size: 1.7rem;
 +
line-height: 2rem;
 +
margin: 0 !important;
 +
padding: 1.5rem 1rem;
}
}
-
#whiteheader nav{
+
#herocaption a:hover{
-
margin-top: -.5em;
+
text-decoration: none;
-
}
+
}
-
#whiteheader nav ul{
+
#herocaption p{
-
border-color: #777777;
+
color: #FFFFFF;
 +
font-size: 1.1rem;
 +
line-height: 1.5rem;
 +
margin: 0;
 +
padding: 0rem 1rem;
}
}
 +
 +
#maincontent{
 +
margin-top: 6em;
 +
}
-
#whiteheader nav a{
+
.boxcontainer{
-
color: #777777;
+
display: block;
-
+
margin: 0 auto;
-
}
+
max-width: 975px;
-
+
padding: 0;
-
+
width: 100%;
-
/*Font positioning breaks at 1050px screen width*/
+
-
@media screen and (max-width: 1050px){
+
-
+
-
#logo{
+
-
min-width: 150px;
+
}
}
-
nav{
+
#firstrow{
-
margin-top: 0.8em;
+
padding-top: 1em;
-
}
+
}
-
nav ul{
+
.greenbox{
 +
background: #7cb83d;
 +
display: block;
 +
margin-left: 1%;
 +
margin-bottom: .5rem;
 +
min-height: 12rem;
padding: 0;
padding: 0;
 +
width: 98%;
}
}
-
nav li a{
+
.boxcontainer a div:hover{
-
font-size: 1.05rem;
+
opacity: 0.9;
-
padding: .3em .6em 0 .6em;
+
filter:alpha(opacity=90); /*IE8 and lower*/
-
}
+
}
 +
.greenbox h1{
 +
color: #FFFFFF;
 +
font-size: 1.6rem;
 +
line-height: 2rem;
 +
margin: 0 !important;
 +
padding: 1.5rem 1.5rem 0 1.5rem;
 +
}
 +
 +
.greenbox p{
 +
color: white;
 +
font-size: 0.95rem;
 +
line-height: 1.35rem;
 +
padding: 1rem 1.5rem 1.5rem 1.5rem;
 +
}
 +
 +
.boxclear{
 +
clear: both;
 +
}
 +
}
}
</style>
</style>
-
 
-
<script type="text/javascript">
 
-
document.createElement("article");
 
-
document.createElement("footer");
 
-
document.createElement("header");
 
-
document.createElement("hgroup");
 
-
document.createElement("nav");
 
-
</script>
 
-
 
-
 
</head>
</head>
<body>
<body>
-
<header id="blackheader">
+
 
-
<!--Home logo-->
+
-
<a href="#"><img class="logo" src="https://static.igem.org/mediawiki/2013/f/f9/CalgaryE_Logo_white_green_low.png"></img></a>
+
-
+
-
<!--Nav menu-->
+
-
<nav>
+
-
<ul>
+
-
<li><a href="#">Team</a></li>
+
-
<li><a href="#">Project</a></li>
+
-
<li><a href="#">Source Data</a></li>
+
-
<li><a href="#">Human Practices</a></li>
+
-
<li><a href="#">Contact</a></li>
+
-
<li><a href="#" target="_blank">iGEM</a></li>
+
-
</ul>
+
-
</nav>
+
-
</header>
+
-
<header id="whiteheader">
+
<!--Black section hero image-->
-
<!--Home logo-->
+
<div id="blackcontainer">
-
<a href="#"><img class="logo" src="https://static.igem.org/mediawiki/2013/1/10/CalgaryE_Logo_green_low.png"></img></a>
+
<img id="hero" src="https://static.igem.org/mediawiki/2013/7/71/CalgaryE_hero_index.png"></img>
-
+
<div id="herocaption">
-
<!--Nav menu-->
+
<h1>We are building better biosensors.</h1>
-
<nav>
+
<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>
-
<ul>
+
<a href="#"><h1>See how we're different. ></h1></a>
-
<li><a href="#">Team</a></li>
+
</div>
-
<li><a href="#">Project</a></li>
+
</div>
-
<li><a href="#">Source Data</a></li>
+
-
<li><a href="#">Human Practices</a></li>
+
-
<li><a href="#">Contact</a></li>
+
-
<li><a href="#" target="_blank">iGEM</a></li>
+
-
</ul>
+
-
</nav>
+
-
</header>
+
-
<div class="clear"></div> <!--Just in case floating elements in the header mess up-->
+
<!--White section-->
 +
<div id="maincontent">
-
<p style="color: white; position: relative;">Testing paragraph for the black section.</p>
+
<div class="boxcontainer" id="firstrow">
-
+
<!--Note: anchor tags can be added around these boxes with no issue-->
-
<div id="maincontent">
+
<div id="box1" class="greenbox bigbox">
-
<p>Paragraph text block for testing purposes.</p>
+
<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>
</div>
</body>
</body>
</html>
</html>

Latest revision as of 21:38, 24 October 2013

FREDsense's website works best with Javascript enabled, especially on mobile devices. Please enable Javascript for optimal viewing.

FREDsense Technologies

We are building better biosensors.

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.

See how we're different. >

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.

Retrieved from "http://2013.igem.org/Team:Calgary_Entrepreneurial/Sandbox"