Team:Calgary Entrepreneurial/Sandbox

From 2013.igem.org

(Difference between revisions)
 
(59 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">
<!--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, #contentSub{
+
-
display: none;
+
-
}
+
-
#p-logo {
+
-
display: none;
+
-
}
+
-
#searchform {
+
-
    display: none;
+
-
}
+
-
 
+
-
.left-menu {
+
-
background-color: #555;
+
-
+
-
}
+
-
.left-menu a {
+
-
    color: #000;
+
-
}
+
-
 
+
-
div#top-section{ /*the div containing the entire top bar*/
+
-
background: #DEDEDE;
+
-
border: none;
+
-
height: 1.5em;
+
-
margin-bottom: 0px !important;
+
-
position: fixed;
+
-
width: 100%;
+
-
z-index: 2;
+
-
}
+
-
 
+
-
 
+
-
#content{
+
-
border: 0;
+
-
margin: 0;
+
-
padding: 0;
+
-
position: static;
+
-
width: 100%;
+
-
z-index: 1;
+
-
}
+
-
 
+
-
#search-controls {
+
-
overflow:hidden;
+
-
display:none;
+
-
background: none;
+
-
position: absolute;
+
-
top: 170px;
+
-
right: 40px;
+
-
}
+
-
 
+
-
 
+
-
div#header {
+
-
width: 975px;
+
-
text-align: left;
+
-
margin-left: auto;
+
-
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%;
+
-
}
+
-
 
+
-
h1, h2, h3, h4{
+
-
font-family: Roboto, sans-serif;
+
}
}
-
p{
+
img#hero{
-
font-family: Average, serif;
+
display: block;
-
font-size: 1rem;
+
margin: 0 auto 0 auto;
-
margin: 0;
+
max-width: 950px;
-
padding: 0;
+
position: relative;
-
}
+
top: 10.5em;
-
+
-
body, #content{
+
-
background: #404040;
+
-
font-size: 100%;
+
-
height: 100%;
+
-
margin: 0;
+
-
padding: 0;
+
-
}
+
-
 
+
-
 
+
-
header{
+
-
text-align: justify;
+
-
padding: 0;
+
-
position: fixed;
+
-
margin-top: 1.5em;
+
-
width: 100%;
+
-
z-index: 0;
+
-
}
+
-
+
-
header:after{
+
-
content: '';
+
-
display: inline-block;
+
width: 100%;
width: 100%;
}
}
-
 
-
 
-
.logo{
 
-
border: none;
 
-
display: inline-block;
 
-
*display: block;
 
-
margin: 0 0 .5em 0;
 
-
max-height: 100%;
 
-
max-width: 100%;
 
-
min-width: 200px;
 
-
width: 19%;
 
-
vertical-align: middle;
 
-
}
+
#herocaption{
-
+
background: #EF8526;
-
#mobilelogo{
+
-
display: none;
+
-
}
+
-
+
-
nav{
+
-
display: inline-block;
+
-
*display: block;
+
-
margin-top: 1em; /*nudges it down to align with the logo*/
+
-
margin-right: .5em;
+
-
vertical-align: middle;
+
-
}
+
-
+
-
nav ul{
+
-
border-bottom: 2px solid white;
+
-
*float: right;
+
-
list-style: none;
+
-
margin: 0;
+
-
}
+
-
+
-
nav li{
+
display: inline-block;
display: inline-block;
-
*display: inline-table;
+
padding: 1em;
-
*float: left;
+
position: relative;
 +
right: 13.5%;
 +
text-align: left;
 +
top: 2em;
 +
width: 40%;
}
}
-
nav li a{
+
#herocaption h1{
-
color: #FFFFFF !important;
+
color: #FFFFFF;
-
display: block; /*fills the full li element for clickability*/
+
font-size: 1.8rem;
-
font-family: Roboto, sans-serif;
+
line-height: 2.2rem;
-
font-size: 1.4rem;
+
padding: 0;
-
font-weight: 300;
+
-
line-height: 2em;
+
-
padding: .3em .8em 0 .8em;
+
-
text-decoration: none;
+
}
}
-
nav li a:hover{
+
#herocaption a:hover{
-
background: #7cb83d;
+
text-decoration: none;
text-decoration: none;
}
}
-
 
+
-
.clear{
+
#herocaption p{
-
clear: both;
+
color: #FFFFFF;
 +
font-size: 1.15rem;
 +
}
 +
 +
 +
#maincontent{
 +
background: #FFFFFF;
 +
height: 100%;
 +
position: relative;
 +
margin-top: 3em;
 +
width: 100%;
 +
z-index: 0;
}
}
 +
.boxcontainer{
 +
display: block;
 +
margin: 1% auto;
 +
max-width: 975px;
 +
overflow: hidden; /*div equal height hack*/
 +
padding: 0;
 +
width: 100%;
 +
}
-
#blackheader{
+
#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*/
}
}
-
 
-
/*White header that appears if javascript is enabled... hopefully*/
+
.boxcontainer a div:hover{
-
#whiteheader{
+
opacity: 0.9;
-
background: transparent;
+
filter:alpha(opacity=90); /*IE8 and lower*/
-
display: none;
+
}
-
margin-top: 1em; /*sits at top of page*/
+
-
position: fixed;
+
-
z-index: 4;
+
-
}
+
-
#whiteheader .logo{
+
.greenbox h1{
-
margin-left: 4.674%;
+
color: #FFFFFF;
-
min-width: 151px;
+
font-size: 1.8rem;
-
width: 14.326%;
+
line-height: 2.2rem;
 +
margin: 0 !important;
 +
padding: 1.5rem 1.5rem 0 1.5rem;
}
}
-
#whiteheader nav{
+
.greenbox p{
-
margin-top: -.5em;
+
color: white;
 +
padding: 1rem 1.5rem 1.5rem 1.5rem;
}
}
-
#whiteheader nav ul{
+
.smallbox{
-
border-color: #777777;
+
width: 32%;
}
}
-
#whiteheader nav li a{
+
.bigbox{
-
color: #777777 !important;
+
width: 65%;
}
}
-
#whiteheader nav li a:hover{
+
.boxclear{
-
color: #FFFFFF !important;
+
clear: both;
-
}
+
}
 +
-
 
-
#maincontent{
 
-
background: #FFFFFF;
 
-
margin-top: 400px;
 
-
position: relative;
 
-
width: 100%;
 
-
z-index: 3;
 
-
 
-
height: 900px;
 
-
}
 
-
 
-
 
/*Font positioning breaks at 1050px screen width*/
/*Font positioning breaks at 1050px screen width*/
@media screen and (max-width: 1050px){
@media screen and (max-width: 1050px){
-
 
-
/**Wiki-specific CSS**/
 
-
 
-
div#top-section{ /*the div containing the entire top bar*/
 
-
background: #DEDEDE;
 
-
border: none;
 
-
height: 1.3em;
 
-
margin-bottom: 0px !important;
 
-
position: fixed;
 
-
width: 100%;
 
-
z-index: 2;
 
-
}
 
-
 
-
.left-menu li a, .right-menu li a {
 
-
color: #000 !important;
 
-
font-size: 0.7rem;
 
-
padding: 0 0.6em 0 0;
 
-
}
 
-
 
-
 
-
.left-menu ul li, .right-menu ul li a{
 
-
background: none;
 
-
color: #000 !important;
 
-
font-size: 0.7rem;
 
-
}
 
-
 
-
.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.7rem;
 
-
}
 
-
/**End wiki-specific CSS**/
+
#herocaption{
-
+
right: .5em;
-
+
width: 60%;
-
.logo{
+
-
min-width: 160px;
+
}
}
-
nav{
+
#herocaption h1{
-
margin-top: 0.8em;
+
color: #FFFFFF;
-
}
+
font-size: 1.7rem;
-
+
line-height: 2rem;
-
nav ul{
+
padding: 0;
 +
}
 +
 +
#herocaption a:hover{
 +
text-decoration: none;
 +
}
 +
 +
#herocaption p{
 +
color: #FFFFFF;
 +
font-size: 1.1rem;
 +
line-height: 1.5rem;
 +
}
 +
 
 +
.boxcontainer{
 +
display: block;
 +
margin: 1% auto;
 +
max-width: 975px;
 +
overflow: hidden; /*div equal height hack*/
padding: 0;
padding: 0;
 +
width: 100%;
}
}
-
nav li a{
+
#firstrow{
-
font-size: 1.05rem;
+
padding-top: 1em;
-
padding: .3em .5em 0 .5em;
+
}
-
}
+
 +
.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;
 +
}
 +
}
}
Line 329: Line 179:
@media screen and (max-width: 768px){
@media screen and (max-width: 768px){
-
.logo{
+
img#hero{
display: none;
display: none;
-
min-width: 150px;
 
}
}
-
#mobilelogo{
+
#herocaption{
-
display: inline-block;
+
display: block;
-
margin-left: 0.5em;
+
margin: auto;
-
margin-top: 1em;
+
padding: 0;
 +
right: 0;
 +
top: 5em;
 +
width: 98%;
}
}
-
nav{
+
#herocaption h1{
-
margin-top: 0.8em;
+
color: #FFFFFF;
 +
font-size: 1.7rem;
 +
line-height: 2rem;
 +
margin: 0 !important;
 +
padding: 1.5rem 1rem;
 +
}
 +
 +
#herocaption a:hover{
 +
text-decoration: none;
 +
}
 +
 +
#herocaption p{
 +
color: #FFFFFF;
 +
font-size: 1.1rem;
 +
line-height: 1.5rem;
 +
margin: 0;
 +
padding: 0rem 1rem;
 +
}
 +
 
 +
#maincontent{
 +
margin-top: 6em;
}
}
-
+
-
nav ul{
+
.boxcontainer{
 +
display: block;
 +
margin: 0 auto;
 +
max-width: 975px;
padding: 0;
padding: 0;
 +
width: 100%;
}
}
-
nav li a{
+
#firstrow{
-
font-size: 1rem;
+
padding-top: 1em;
-
padding: .3em .5em 0 .5em;
+
}
 +
 +
.greenbox{
 +
background: #7cb83d;
 +
display: block;
 +
margin-left: 1%;
 +
margin-bottom: .5rem;
 +
min-height: 12rem;
 +
padding: 0;
 +
width: 98%;
}
}
 +
.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;
 +
}
 +
 +
.boxclear{
 +
clear: both;
 +
}
 +
}
}
</style>
</style>
-
 
-
<!--Window scrolling script for sticky header-->
 
-
<script type="text/javascript">
 
-
 
-
 
-
 
-
</script>
 
-
 
-
<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, along with a mobile version-->
+
-
<a href="#">
+
-
<img class="logo" src="https://static.igem.org/mediawiki/2013/f/f9/CalgaryE_Logo_white_green_low.png"></img>
+
-
</a>
+
-
<a href="#">
+
-
<img class="logo" id="mobilelogo" src="https://static.igem.org/mediawiki/2013/c/cf/CalgaryE_Logo_white_green_mini.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;">Paragraph in black text</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"