Team:Calgary Entrepreneurial/Sandbox2

From 2013.igem.org

(Difference between revisions)
 
(15 intermediate revisions not shown)
Line 3: Line 3:
<html>
<html>
<head>
<head>
 +
<title>FREDsense Technologies</title>
 +
<meta name="description" content="FREDsense has developed a novel system for quantitative, real-time detection of various toxins in any sample. We use a biosensor with an electrochemical output to create a system that is portable, fast, and unlike anything else in the market.">
 +
<!--Stylesheets-->
<style type="text/css">
<style type="text/css">
-
#bodyContent{
+
#blackcontainer{
-
background: #FDFDFD;
+
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%;
 +
}
-
#maincontainer{
+
#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;
position: relative;
-
margin: 0 auto 0 auto;
+
margin-top: 3em;
-
max-width: 1150px;
+
width: 100%;
width: 100%;
 +
z-index: 0;
}
}
-
#sidebar{
+
.boxcontainer{
-
/*background: #FDFDFD;*/ /*weird borders on iOS with background*/
+
display: block;
-
display: inline-block;
+
margin: 1% auto;
-
min-width: 100px;
+
max-width: 975px;
-
margin-right: 0;
+
overflow: hidden; /*div equal height hack*/
-
margin-top: 9em;
+
padding: 0;
-
max-width: 270px;
+
width: 100%;
-
position: relative;
+
-
width: 24%;
+
}
}
-
/*only cascades when the sidebar hits the top*/
+
#firstrow{
-
#sidebar.fixed{
+
padding-top: 1em;
-
margin-top: 4em;
+
}
-
position: fixed;
+
-
}
+
-
+
-
#sidebar ul{
+
-
border: none;
+
-
border-right: 3px solid #777777;
+
-
}
+
-
#sidebar ul li{
+
.greenbox{
 +
background: #7cb83d;
display: block;
display: block;
-
padding: 0.5em 1em 0.5em 0.5em;
+
float: left;
-
text-align: right;
+
 +
margin-left: 1%;
 +
margin-bottom: -100%; /*div equal height hack*/
 +
 +
padding: 0;
 +
padding-bottom: 100%; /*div equal height hack*/
}
}
-
#sidebar ul li a{
+
.boxcontainer a div:hover{
-
color: #333333 !important;
+
opacity: 0.9;
-
font-size: 1.2rem;
+
filter:alpha(opacity=90); /*IE8 and lower*/
-
line-height: 1.35rem;
+
-
padding: 0;
+
}
}
-
#sidebar ul li a:hover{
+
.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;
 +
}
 +
 +
/*small greenbox with photo*/
 +
#box2{
 +
background-image: url('https://static.igem.org/mediawiki/2013/9/92/2013CalgaryE_tailingspond.png');
 +
background-repeat: no-repeat;
 +
}
 +
 +
#sponsorstable{
background: transparent;
background: transparent;
-
color: #7cb83d !important;
+
margin: 1rem 0;
}
}
 +
 +
#sponsorstable td{
 +
padding: .5rem 1.5rem;
 +
}
 +
 +
#sponsorstable td img{
 +
max-width: 90%;
 +
margin: auto;
 +
display: block;
 +
max-height: 80px;
 +
}
 +
-
/*submenu*/
+
/*Font positioning breaks at 1050px screen width*/
-
#sidebar ul li ul{
+
@media screen and (max-width: 1050px){
-
border: none;
+
-
margin: .5em .5em -.5em 0; /*adjusts positioning to bottom w/ indent*/
+
-
}
+
-
/*submenu li*/
+
-
#sidebar ul li ul li{
+
-
margin: 0;
+
-
padding: .25em 0;
+
-
}
+
-
+
-
/*submenu link*/
+
-
#sidebar ul li ul li a{
+
-
color: #000000 !important;
+
-
font-size: 1rem;
+
-
font-weight: 500;
+
-
line-height: 1.2rem;
+
-
}
+
-
#maincontent{
+
#herocaption{
-
display: inline-block;
+
right: .5em;
-
float: right;
+
width: 60%;
-
width: 73.5%;
+
-
margin-left: 2%;
+
-
margin-top: 3em;
+
-
padding-top: 6em; /*used to activate JS menu a little faster*/
+
-
padding-bottom: 2em;
+
}
}
-
#maincontainer p{
+
#herocaption h1{
-
padding: 0.5rem 0 0.5rem 1rem;
+
color: #FFFFFF;
 +
font-size: 1.7rem;
 +
line-height: 2rem;
 +
padding: 0;
}
}
-
#abstractbox{
+
#herocaption a:hover{
-
background: #7cb83d;
+
text-decoration: none;
-
display: inline-block;
+
}
-
margin-bottom: .5em;
+
-
padding: 1.5em;
+
#herocaption p{
-
width: 90%;
+
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;
 +
width: 100%;
}
}
-
#abstractbox h1, #abstractbox p{
+
#firstrow{
-
color: white;
+
padding-top: 1em;
-
padding: 0;
+
}
}
-
+
-
#abstractbox h1{
+
.boxcontainer a div:hover{
-
font-size: 1.8rem;
+
opacity: 0.9;
-
margin: 0 0 1.5rem 0 !important;
+
filter:alpha(opacity=90); /*IE8 and lower*/
}
}
-
#abstractbox + p{
+
.greenbox h1{
-
margin: 0;
+
color: #FFFFFF;
-
padding: 0;
+
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){
-
div.thumb{
+
img#hero{
-
border: none;
+
display: none;
-
margin: 1em 0;
+
}
}
-
div.thumb div{
+
#blackcontainer{
-
background: #FFFFFF;
+
top: 3em;
-
border: none;
+
}
}
-
div.thumb > div{
+
#herocaption{
-
box-shadow: 0px 2px 5px #AAAAAA;
+
display: block;
 +
margin: 3em auto 0 auto;
 +
padding: 0;
 +
right: 0;
 +
top: 5em;
 +
width: 98%;
}
}
-
/*figure*/
+
#herocaption h1{
-
div.thumb div a img{
+
color: #FFFFFF;
-
border: none;
+
font-size: 1.7rem;
 +
line-height: 2rem;
 +
margin: 0 !important;
 +
padding: 1.5rem 1rem;
}
}
-
/*caption*/
+
#herocaption a:hover{
-
div.thumb div div.thumbcaption{
+
text-decoration: none;
-
border-top: 2px solid #AAAAAA;
+
}
-
color: #333333;
+
-
font-family: Roboto, sans-serif;
+
#herocaption p{
-
font-size: .9rem;
+
color: #FFFFFF;
-
font-weight: 500;
+
font-size: 1.1rem;
-
line-height: 1.2rem;
+
line-height: 1.5rem;
-
padding-top: .7em !important;
+
margin: 0;
 +
padding: 0rem 1rem;
}
}
-
@media screen and (max-width:1050){
+
#maincontent{
-
#sidebar ul{
+
margin-top: 6em;
-
border: none;
+
}
-
border-right: 3px solid #777777;
+
 +
.boxcontainer{
 +
display: block;
 +
margin: 0 auto;
 +
max-width: 975px;
 +
padding: 0;
 +
width: 100%;
}
}
-
#sidebar ul li{
+
#firstrow{
 +
padding-top: 1em;
 +
}
 +
 +
.greenbox{
 +
background: #7cb83d;
display: block;
display: block;
-
padding: 0.5em 1em 0.5em 0.5em;
+
margin-left: 1%;
-
text-align: right;
+
margin-bottom: .5rem;
 +
min-height: 12rem;
 +
padding: 0;
 +
width: 98%;
}
}
-
#sidebar ul li a{
+
.boxcontainer a div:hover{
-
color: #333333 !important;
+
opacity: 0.9;
-
font-size: 1.2rem;
+
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;
line-height: 1.35rem;
-
padding: 0;
+
padding: 1rem 1.5rem 1.5rem 1.5rem;
}
}
-
 
+
-
/*submenu li*/
+
.boxclear{
-
#sidebar ul li ul li{
+
clear: both;
-
margin: 0;
+
}
-
padding: .25em 0;
+
 +
#box2{
 +
background-size: 100%;
 +
background-position-y: 25%;
 +
}
 +
 +
#logo-uofc{
 +
display: block;
 +
margin: 1em auto;
 +
width: 50%;
}
}
-
 
-
/*submenu link*/
 
-
#sidebar ul li ul li a{
 
-
color: #000000 !important;
 
-
font-size: 1rem;
 
-
font-weight: 500;
 
-
line-height: 1.2rem;
 
-
}
 
-
}
 
 +
}
 +
/*specific for a second row of nav menu*/
 +
@media only screen and (max-width: 634px){
 +
 +
#blackcontainer{
 +
top: 5em;
 +
}
 +
 +
#herocaption{
 +
margin-top: 5em;
 +
}
 +
 +
#logo-uofc, #logo-aitf, #logo-geekstarter, #logo-bhsc{
 +
display: block;
 +
float: none;
 +
width: auto;
 +
margin: 1rem auto;
 +
max-height: 110px;
 +
max-width: 70%;
 +
}
 +
}
</style>
</style>
<script>
<script>
-
//slower, but necessary to have all images already in place prior to calculating fixadent
+
$(document).ready(function(){
-
$(window).load(function(){
+
$('#herocaption').css('margin-top', '0');
-
var sidebar = $("#sidebar");
+
-
var white = $('#whiteheader');
+
-
var content = $('#maincontent');
+
-
+
-
var ems = $("#em").height();
+
-
var pos = sidebar.offset().top - (4*ems);
+
-
+
-
$(window).scroll(function(){
+
-
+
-
//locks the sidebar
+
-
if(window.pageYOffset > pos){
+
-
sidebar.addClass('fixed');
+
-
content.addClass('fixed');
+
-
/*
+
-
var margin = 4 * ems;
+
-
sidebar.css('margin-top', margin);
+
-
//*/
+
-
}
+
-
//allows it to move again
+
-
else{
+
-
sidebar.removeClass('fixed');
+
-
content.removeClass('fixed');
+
-
+
-
/*
+
-
var margin = 9 * ems;
+
-
sidebar.css('margin-top', margin);
+
-
//*/
+
-
}
+
-
+
-
});
+
-
+
});
});
Line 220: Line 331:
</head>
</head>
-
<body class="</html>{{{PAGE|basic}}}<html>">
+
<body>
-
<div id="maincontainer">
+
 
-
<nav id="sidebar">
+
-
</html>{{{SIDENAV|
+
<!--Black section hero image-->
-
<html>
+
<div id="blackcontainer">
-
<ul>
+
<img id="hero" src="https://static.igem.org/mediawiki/2013/7/71/CalgaryE_hero_index.png"></img>
-
<li><a href="#">Link 1</a></li>
+
<div id="herocaption">
-
<li><a href="#">Link 2</a></li>
+
<h1>We are building better biosensors.</h1>
-
<li><a href="#">Link 3</a></li>
+
<p>FREDsense has developed a novel system for quantitative, real-time detection of various toxins in any sample. We use a biosensor with an electrochemical output to create a system that is portable, fast, and unlike anything else in the market</p>
-
<li><a href="#">Link 4</a></li>
+
<a href="https://2013.igem.org/Team:Calgary_Entrepreneurial/Project"><h1>See how we're different. ></h1></a>
-
<li><a href="#">Longer Link 5</a></li>
+
</div>
-
</ul>
+
</div>
-
</html>
+
-
}}}
+
<!--White section-->
-
<html>
+
<div id="maincontent">
-
</nav>
+
-
+
<div class="boxcontainer" id="firstrow">
-
<div id="maincontent">
+
<!--Note: anchor tags can be added around these boxes with no issue-->
 +
<div id="box1" class="greenbox bigbox">
 +
<h1>Toxic Chemicals Are Bad.</h1>
 +
<p>Detecting toxic compounds in our environment is an ongoing struggle that we face, whether the underlying issue is a public health or an environmental protection concern.  The biosensing market worldwide is already an $8.9 billion market and is expected to grow to $18.9 billion by 2018. Alberta, Canada is faced with a specific challenge; development of petroleum related industries, specifically the oil sands, has led to large volumes of contaminated water that must be remediated before release into the natural ecosystem.  However, current methods of testing are either too slow, labour intensive or do not accurately report the relative toxicity. Thus, the 2013 iGEM Calgary Entrepreneurial team is building a better biosensor based system to report on the general toxicity present.</p>
 +
</div>
 +
<div id="box2" class="greenbox smallbox">
 +
 +
</div>
-
<div id="abstractbox">
+
<div class="boxclear"></div>
-
</html>
+
</div>
-
{{{ABSTRACT|
+
<div class="boxcontainer">
-
<html>
+
<div id="box3" class="greenbox smallbox">
-
<h1>We have a tagline.</h1>
+
<div align="center">
-
<p>This is the place where you can put a brief descriptive blurb that describes what this page is all about. Try to keep it short and sweet since we want this to grab the readers' attention and let them read further down. What is the purpose of this page? You're trying to be a little edgy, right?</p>
+
<iframe width="800" height="450" align="center" src="//www.youtube.com/embed/bTYoLCcLKcE" frameborder="0" allowfullscreen></iframe>
-
</html>
+
</div>
-
}}}
+
</div>
-
<html>
+
<div id="box4" class="greenbox smallbox">
 +
<h1>Who Are We?</h1>
 +
<p>We are FREDsense, an early venture start-up company focused on designing and implementing novel biosensor systems for oil sands applications. Our goal is to commercialize a product that was initially started as an iGEM project in 2012.</p>
 +
</div>
 +
<div id="box5" class="greenbox smallbox">
 +
<h1>What Do We Have?</h1>
 +
<p>Our toxin biosensor system is designed to be rapid, on-site, and require little to no sample prep, providing a distinct advantage against competing technologies presently available to oil sands service companies.</p>
</div>
</div>
-
</html>
 
-
{{{CONTENT|
 
-
<html>
 
-
<p>This is another body of content. Add whatever you feel like here.</p>
 
-
<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>
 
-
<h1>Title appearance</h1>
+
<div class="boxclear"></div>
-
<h2>Subheader</h2>
+
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus luctus orci quis blandit porttitor. Proin convallis lobortis consectetur. Integer metus quam, fermentum ut massa in, vehicula interdum velit. Curabitur in volutpat est. In tincidunt enim in facilisis rutrum. Morbi ut purus tellus. Integer pretium justo sagittis, ultricies turpis vitae, lacinia eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi vel leo lacinia, accumsan nibh sed, molestie dui. Sed a ligula eget sem faucibus placerat id vitae nunc. Donec pellentesque, ante ut vehicula laoreet, magna metus faucibus ante, eu suscipit lorem tortor a ipsum. Vestibulum bibendum eget dolor a pulvinar. Vivamus scelerisque malesuada euismod. Mauris at aliquam mi. Morbi suscipit nunc in urna aliquam, non scelerisque tellus porta.</p>
+
-
<h3>Third subheader</h3>
+
-
<p>Nulla pharetra nisi quam, non aliquam risus volutpat eget. Proin semper, sapien sed pulvinar aliquam, nibh augue egestas sapien, at sodales magna magna eget leo. Mauris sem lorem, sagittis accumsan tellus quis, interdum consectetur nunc. Etiam accumsan, sem id scelerisque dapibus, quam felis lobortis elit, sed molestie neque tortor eget dui. Etiam at imperdiet turpis, vitae lacinia est. Nulla non urna posuere, ultrices eros ac, blandit ante. Aenean et arcu ornare, venenatis turpis eget, molestie ipsum. Nunc dignissim nulla imperdiet rutrum tempor.</p>
+
-
</html>
+
-
}}}
+
-
<html>
+
</div>
</div>
-
+
<div class="boxcontainer">
 +
<div id="box6" class="greenbox smallbox">
 +
<h1>Are We Needed?</h1>
 +
<p>With growing regulatory bodies increasing the financial contribution to analytical based monitoring instrumentation, there is an emerging market surrounding specific toxin sensing for oil sands applications.</p>
 +
</div>
 +
<div id="box7" class="greenbox bigbox">
 +
<h1>Sponsors</h1>
 +
<table id="sponsorstable">
 +
<tr>
 +
<td>
 +
<img id="logo-uofc" src="https://static.igem.org/mediawiki/2013/7/74/2013CalgaryE_UofCLogoWhite.png"></img>
 +
</td>
 +
<td>
 +
<img id="logo-bhsc" src="https://static.igem.org/mediawiki/2013/4/4e/2013CalgaryE_OBrienCentreLogoWhite.png"></img>
 +
</td>
 +
</tr>
 +
<tr>
 +
<td>
 +
<img id="logo-aitf" src="https://static.igem.org/mediawiki/2013/0/0c/2013CalgaryE_AITFLogoWhite.png"></img>
 +
</td>
 +
<td>
 +
<img id="logo-geekstarter" src="https://static.igem.org/mediawiki/2013/c/c3/2013CalgaryE_geekStarterLogoWhite.png"></img>
 +
</td>
 +
</tr>
 +
</table>
 +
</div>
 +
 +
<div class="boxclear"></div>
 +
</div>
 +
<div class="clear"></div>
</div>
</div>
 +
</body>
</body>
</html>
</html>

Latest revision as of 01:12, 29 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 has developed a novel system for quantitative, real-time detection of various toxins in any sample. We use a biosensor with an electrochemical output to create a system that is portable, fast, and unlike anything else in the market

See how we're different. >

Toxic Chemicals Are Bad.

Detecting toxic compounds in our environment is an ongoing struggle that we face, whether the underlying issue is a public health or an environmental protection concern. The biosensing market worldwide is already an $8.9 billion market and is expected to grow to $18.9 billion by 2018. Alberta, Canada is faced with a specific challenge; development of petroleum related industries, specifically the oil sands, has led to large volumes of contaminated water that must be remediated before release into the natural ecosystem. However, current methods of testing are either too slow, labour intensive or do not accurately report the relative toxicity. Thus, the 2013 iGEM Calgary Entrepreneurial team is building a better biosensor based system to report on the general toxicity present.

Who Are We?

We are FREDsense, an early venture start-up company focused on designing and implementing novel biosensor systems for oil sands applications. Our goal is to commercialize a product that was initially started as an iGEM project in 2012.

What Do We Have?

Our toxin biosensor system is designed to be rapid, on-site, and require little to no sample prep, providing a distinct advantage against competing technologies presently available to oil sands service companies.

Are We Needed?

With growing regulatory bodies increasing the financial contribution to analytical based monitoring instrumentation, there is an emerging market surrounding specific toxin sensing for oil sands applications.

Sponsors

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