Team:UCSF/Home1

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<html>
+
<!-- Navigation -->
-
 
+
-
 
+
-
 
+
-
<!--  
+
-
* Markup for jQuery Orbit Plugin 1.2.3
+
-
* www.ZURB.com/playground
+
-
* Copyright 2010, ZURB
+
-
* Free to use under the MIT license.
+
-
* http://www.opensource.org/licenses/mit-license.php
+
-
-->
+
   
   
 +
  <nav class="top-bar">
 +
    <ul class="title-area">
 +
      <!-- Title Area -->
 +
      <li class="name">
 +
        <h1>
 +
          <a href="#">
 +
            Top Bar Title
 +
          </a>
 +
        </h1>
 +
      </li>
 +
      <li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li>
 +
    </ul>
   
   
 +
    <section class="top-bar-section">
 +
      <!-- Right Nav Section -->
 +
      <ul class="right">
 +
        <li class="divider"></li>
 +
        <li class="has-dropdown">
 +
          <a href="#">Main Item 1</a>
 +
          <ul class="dropdown">
 +
            <li><label>Section Name</label></li>
 +
            <li class="has-dropdown">
 +
              <a href="#" class="">Has Dropdown, Level 1</a>
 +
              <ul class="dropdown">
 +
                <li><a href="#">Dropdown Options</a></li>
 +
                <li><a href="#">Dropdown Options</a></li>
 +
                <li><a href="#">Level 2</a></li>
 +
                <li><a href="#">Subdropdown Option</a></li>
 +
                <li><a href="#">Subdropdown Option</a></li>
 +
                <li><a href="#">Subdropdown Option</a></li>
 +
              </ul>
 +
            </li>
 +
            <li><a href="#">Dropdown Option</a></li>
 +
            <li><a href="#">Dropdown Option</a></li>
 +
            <li class="divider"></li>
 +
            <li><label>Section Name</label></li>
 +
            <li><a href="#">Dropdown Option</a></li>
 +
            <li><a href="#">Dropdown Option</a></li>
 +
            <li><a href="#">Dropdown Option</a></li>
 +
            <li class="divider"></li>
 +
            <li><a href="#">See all &rarr;</a></li>
 +
          </ul>
 +
        </li>
 +
        <li class="divider"></li>
 +
        <li><a href="#">Main Item 2</a></li>
 +
        <li class="divider"></li>
 +
        <li class="has-dropdown">
 +
          <a href="#">Main Item 3</a>
 +
          <ul class="dropdown">
 +
            <li><a href="#">Dropdown Option</a></li>
 +
            <li><a href="#">Dropdown Option</a></li>
 +
            <li><a href="#">Dropdown Option</a></li>
 +
            <li class="divider"></li>
 +
            <li><a href="#">See all &rarr;</a></li>
 +
          </ul>
 +
        </li>
 +
      </ul>
 +
    </section>
 +
  </nav>
   
   
-
<head>
+
  <!-- End Top Bar -->
-
<meta charset="utf-8" />
+
-
<title>Stanford-Brown iGEM</title>
+
  <div class="row">
-
+
    <div class="large-12 columns">
-
<!-- Attach our CSS -->
+
-
  <!-- <link rel="stylesheet" href="../orbit-1.2.3.css">
+
    <!-- Content Slider -->
-
  <link rel="stylesheet" href="demo-style.css">
+
-
  -->
+
      <div class="row">
-
<!-- Attach necessary JS --><!--
+
        <div class="large-12 hide-for-small">
-
<script type="text/javascript" src="../jquery-1.5.1.min.js"></script>
+
   
-
<script type="text/javascript" src="../jquery.orbit-1.2.3.min.js"></script>
+
          <div id="featured" data-orbit>
-
  -->
+
              <img src="http://placehold.it/1200x500&text=Slide Image 1" alt="slide image">
-
 
+
              <img src="http://placehold.it/1200x500&text=Slide Image 2" alt="slide image">
-
<!-- Attach our CSS -->
+
              <img src="http://placehold.it/1200x500&text=Slide Image 3" alt="slide image">
-
  <link rel="stylesheet" href="http://www.stanford.edu/~sryoung/cgi-bin/igem/orbit-1.2.3.css">
+
            </div>
-
  <link rel="stylesheet" href="http://www.stanford.edu/~sryoung/cgi-bin/igem/demo/demo-style.css">
+
-
 
+
      </div>
-
<!-- Attach necessary JS -->
+
    </div>
-
<script type="text/javascript" src="http://www.stanford.edu/~sryoung/cgi-bin/igem/jquery-1.5.1.min.js"></script>
+
-
<script type="text/javascript" src="http://www.stanford.edu/~sryoung/cgi-bin/igem/jquery.orbit-1.2.3.min.js"></script>
+
    <!-- End Content Slider -->
-
+
-
+
    <!-- Mobile Header -->
-
<!--[if IE]>
+
-
    <style type="text/css">
+
      <div class="row">
-
        .timer { display: none !important; }
+
        <div class="large-12 columns show-for-small">
-
        div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }
+
-
    </style>
+
          <img src="http://placehold.it/1200x700&text=Mobile Header">
-
<![endif]-->
+
-
+
        </div>
-
<!-- Run the plugin -->
+
      </div><br>
-
<script type="text/javascript">
+
-
$(window).load(function() {
+
    <!-- End Mobile Header -->
-
$('#featured').orbit();
+
-
});
+
-
</script>
+
      <div class="row">
-
 
+
        <div class="large-12 columns">
-
 
+
          <div class="row">
-
 
+
            <!-- Shows -->
-
<!-- Stuff from Calgary -->
+
            <div class="large-4 small-6 columns">
-
 
+
-
<link rel='stylesheet' type='text/css' href="https://2012.igem.org/Team:Calgary/static/basicpageglobal.css?action=raw&ctype=text/css" />
+
              <h4>Upcoming Shows</h4><hr>
-
 
+
-
<style>
+
              <div class="row">
-
/*======
+
                <div class="large-1 column">
-
Desktop Styling
+
                  <img src="http://placehold.it/50x50&amp;text=[img]">
-
======*/
+
                </div>
-
+
-
/***Body styling***/
+
                <div class="large-9 columns">
-
h1{
+
                  <h5><a href="#">Venue Name</a></h5>
-
font-size: 2.5em;
+
                  <h6 class="subheader show-for-small">Doors at 00:00pm</h6>
-
}
+
                </div>
-
h2{
+
              </div><hr>
-
font-size: 1.8em;
+
-
}
+
              <div class="hide-for-small">
-
 
+
                <div class="row">
-
#box1{
+
                  <div class="large-1 column">
-
width: 968px;
+
                    <img src="http://placehold.it/50x50&amp;text=[img]">
-
margin-top: -8px;
+
                  </div>
-
background: threedface;
+
-
float: left;
+
                  <div class="large-9 columns">
-
padding-bottom: 20px;
+
                    <h5 class="subheader"><a href="#">Venue Name</a></h5>
-
margin-bottom: 13px;
+
                  </div>
-
}
+
                </div><hr>
-
#box1 h2{
+
-
padding: 20px 20px 20px 20px;
+
                <div class="row">
-
}
+
                  <div class="large-1 column">
-
#box1 p{
+
                    <img src="http://placehold.it/50x50&amp;text=[img]">
-
padding: 0px 20px 0px 20px;
+
                  </div>
-
font-size: 1.1em;
+
-
}
+
                  <div class="large-9 columns">
-
 
+
                    <h5 class="subheader"><a href="#">Venue Name</a></h5>
-
#FredOscarFlag{
+
                  </div>
-
display: block;
+
                </div><hr>
-
float: left;
+
-
width: 250px;
+
                <div class="row">
-
height: 274px;
+
                  <div class="large-1 column">
-
background: url('https://static.igem.org/mediawiki/2012/0/0b/UCalgary2012_FRED_and_OSCAR_Main_Page.png');
+
                    <img src="http://placehold.it/50x50&amp;text=[img]">
-
background-position: top;
+
                  </div>
-
margin: 15px;
+
-
}
+
                  <div class="large-9 columns">
-
#FredOscarFlag:hover{
+
                    <h5 class="subheader"><a href="#">Venue Name</a></h5>
-
background-position: bottom;
+
                  </div>
-
}
+
                </div>
-
+
              </div>
-
 
+
            </div>
-
#box2{
+
            <!-- End Shows -->
-
width: 968px;
+
-
background: #C68DD8;
+
-
float: left;
+
            <!-- Image -->
-
margin-bottom: 13px;
+
-
}
+
            <div class="large-4 small-6 columns">
-
#box2 h2{
+
              <img src="http://placehold.it/300x465&amp;text=Image">
-
padding: 20px 20px 20px 20px;
+
            </div>
-
color: white;
+
-
}
+
            <!-- End Image -->
-
#box2 p{
+
-
padding: 0px 20px 0px 20px;
+
-
font-size: 1.1em;
+
            <!-- Feed -->
-
color: white;
+
-
}
+
            <div class="large-4 small-12 columns">
-
#box2 img{
+
-
float: left;
+
              <h4>Blog</h4><hr>
-
margin: 15px;
+
              <div class="panel">
-
height: 110px;
+
                <h5><a href="#">Post Title 1</a></h5>
-
}
+
-
#box2:hover{
+
                <h6 class="subheader">
-
background: #D79EE9;
+
                  Risus ligula, aliquam nec fermentum vitae, sollicitudin eget urna. Suspendisse ultrices ornare tempor...
-
}
+
                </h6>
-
+
-
/***positioning of elements in ZE EPIC BOX***/
+
                <h6><a href="#">Read More »</a></h6>
-
#epicbox{
+
              </div>
-
margin-top: 4px;
+
-
}
+
              <div class="panel hide-for-small">
-
 
+
                <h5><a href="#">Post Title 2 »</a></h5>
-
#boximgcontainer{
+
              </div>
-
float: left;
+
-
width: 644px;
+
              <div class="panel hide-for-small">
-
height: 655px;
+
                <h5><a href="#">Post Title 3 »</a></h5>
-
}
+
              </div>
-
#boximgcontainer div{
+
-
float: left;
+
              <a href="#" class="right">Go To Blog »</a>
-
position: relative;
+
-
}
+
            </div>
-
#orangebox{
+
-
margin-bottom: 4px;
+
            <!-- End Feed -->
-
}
+
-
#orangebox .imgbox{
+
          </div>
-
width: 644px;
+
        </div>
-
height: 215px;
+
      </div>
-
top: 108px;
+
-
// background: #F6A82D;
+
    <!-- End Content -->
-
//background: #33CC33;
+
-
background: #555555;
+
-
margin-bottom: 4px;
+
    <!-- Footer -->
-
}
+
-
.oblank{
+
      <footer class="row">
-
width: 644px;
+
        <div class="large-12 columns"><hr>
-
height: 104px;
+
            <div class="row">
-
//background: #FFE485;
+
-
//background: #33EE33;
+
              <div class="large-6 columns">
-
background: #888888;
+
                  <p>&copy; Copyright no one at all. Go to town.</p>
-
position: relative;
+
              </div>
-
top: -219px;
+
-
}
+
              <div class="large-6 small-12 columns">
-
#orangebox:hover .oblank, .oblank:hover{
+
                  <ul class="inline-list right">
-
display: none;
+
                    <li><a href="#">Link 1</a></li>
-
}
+
                    <li><a href="#">Link 2</a></li>
-
#orangebox .iconcontainer{
+
                    <li><a href="#">Link 3</a></li>
-
position: relative;
+
                    <li><a href="#">Link 4</a></li>
-
display: none;
+
                  </ul>
-
left: auto;
+
              </div>
-
top: -219px;
+
-
}
+
            </div>
-
.iconbox div, .iconbox{
+
        </div>
-
width: 104px;
+
      </footer>
-
height: 104px;
+
-
margin-right: 4px;
+
    <!-- End Footer -->
-
}
+
-
a.obox1 div{
+
    </div>
-
background: #BBBBBB;
+
  </div>
-
}
+
-
a.obox2 div{
+
  <script>
-
background: #AAAAAA;
+
  document.write('<script src=js/vendor/' +
-
}
+
  ('__proto__' in {} ? 'zepto' : 'jquery') +
-
a.obox3 div{
+
  '.js><\/script>')
-
background: #999999;
+
  </script>
-
}
+
  <script src="js/foundation.min.js"></script>
-
a.obox4 div{
+
  <script>
-
background: #888888;
+
    $(document).foundation();
-
}
+
  </script>
-
a.obox5 div{
+
<!-- End Footer -->
-
background: #777777;
+
-
}
+
-
a.obox6 div{
+
-
background: #666666;
+
-
margin-right: 0;
+
-
}
+
-
#orangebox div:hover, #orangebox div.iconbox:hover div{
+
-
background: #DDDDDD;
+
-
}
+
-
#orangebox:hover .iconcontainer{
+
-
display: block;
+
-
background: transparent;
+
-
}
+
-
+
-
+
-
#greenbox .imgbox{
+
-
width: 320px;
+
-
height: 215px;
+
-
//background: #58CD45;
+
-
//background: #888888;
+
-
//background: #33CC33;
+
-
background: #663399;
+
-
}
+
-
.gblank{
+
-
width: 320px;
+
-
height: 104px;
+
-
//background: #B6FFA3;
+
-
//background: #BBBBBB;
+
-
//background: #33EE33;
+
-
background: #9933FF;
+
-
position: relative;
+
-
top: 219px;
+
-
left: -320px;
+
-
}
+
-
#greenbox .iconcontainer{
+
-
position: relative;
+
-
margin-top: 4px;
+
-
left: -999em;
+
-
z-index: 1;
+
-
}
+
-
a.gbox1 div{
+
-
background: #9933FF;
+
-
}
+
-
a.gbox2 div{
+
-
background: #9900FF;
+
-
}
+
-
a.gbox3 div{
+
-
background: #660099;
+
-
}
+
-
a.gbox4 div{
+
-
background: #663399;
+
-
}
+
-
#greenbox div:hover, #greenbox div.iconbox:hover div{
+
-
//background: #94FF7D;
+
-
background: #9933FF;
+
-
z-index: 99; /*hovers are not overridden by OSCAR boxes*/
+
-
}
+
-
#greenbox:hover .gblank, .gblank:hover{
+
-
display: none;
+
-
}
+
-
#greenbox:hover .iconcontainer{
+
-
left: auto;
+
-
background: transparent;
+
-
}
+
-
+
-
#bluebox{
+
-
position: relative;
+
-
top: -323px;
+
-
left: 320px;
+
-
}
+
-
#bluebox .imgbox{
+
-
width: 320px;
+
-
height: 215px;
+
-
//background: #5BB5E8;
+
-
background: #660000;
+
-
margin-left: 4px;
+
-
}
+
-
.bblank{
+
-
width: 320px;
+
-
height: 104px;
+
-
//background: #C5F0F0;
+
-
background: #996666;
+
-
position: relative;
+
-
top: 219px;
+
-
left: -320px;
+
-
z-index: 0;
+
-
}
+
-
#bluebox .iconcontainer{
+
-
position: relative;
+
-
margin-top: 4px;
+
-
left: -999em;
+
-
z-index: 0;
+
-
}
+
-
a.bbox1 div{
+
-
background: #993333;
+
-
}
+
-
a.bbox2 div{
+
-
background: #993300;
+
-
}
+
-
a.bbox3 div{
+
-
background: #990033;
+
-
}
+
-
a.bbox4 div{
+
-
background: #990000;
+
-
}
+
-
a.bbox5 div{
+
-
background: #990066;
+
-
}
+
-
a.bbox6 div{
+
-
background: #993366;
+
-
margin: 0;
+
-
}
+
-
#bluebox div:hover, #bluebox .iconbox:hover div{
+
-
//background: #7DD7FF;
+
-
background: #993333;
+
-
z-index: 99; /*hovers are not overridden by FRED boxes*/
+
-
}
+
-
#bluebox:hover .bblank, .bblank:hover{
+
-
display: none;
+
-
}
+
-
#bluebox:hover .iconcontainer{
+
-
left: -212px;
+
-
background: transparent;
+
-
}
+
-
+
-
#boxinfo{
+
-
float: right;
+
-
position: relative;
+
-
width: 320px;
+
-
left: 3px;
+
-
// background: #555555;
+
-
background: #33CC33;
+
-
height: 650px;
+
-
margin-bottom: 12px;
+
-
}
+
-
#boxinfo h2{
+
-
color: white;
+
-
padding: 20px 20px 0px;
+
-
}
+
-
#boxinfo p{
+
-
color: white;
+
-
padding: 10px 20px 20px;
+
-
font-size: 1.2em;
+
-
}
+
-
/*initial boxinfo appearance settings*/
+
-
#boxinfo div.orangebox, #boxinfo div.obox1, #boxinfo div.obox2, #boxinfo div.obox3, #boxinfo div.obox4, #boxinfo div.obox5, #boxinfo div.obox6{
+
-
display: none;
+
-
}
+
-
#boxinfo div.greenbox, #boxinfo div.gbox1, #boxinfo div.gbox2, #boxinfo div.gbox3, #boxinfo div.gbox4,
+
-
#boxinfo div.bluebox, #boxinfo div.bbox1, #boxinfo div.bbox2, #boxinfo div.bbox3, #boxinfo div.bbox4, #boxinfo div.bbox5{
+
-
position: relative;
+
-
padding-top: 320px;
+
-
display: none;
+
-
}
+
-
/*bold colours for FRED and OSCAR*/
+
-
#boxinfo div.greenbox b{
+
-
color: #72E85B;
+
-
}
+
-
#boxinfo div.bluebox b{
+
-
color: #5EB7F0;
+
-
}
+
-
.threeboxes{
+
-
clear: both;
+
-
position: relative;
+
-
width: 968px;
+
-
margin-bottom: 12px;
+
-
}
+
-
.threeboxes a, .threeboxes a div{
+
-
width: 320px;
+
-
height: 155px;
+
-
float: left;
+
-
margin-bottom: 12px;
+
-
}
+
-
.threeboxes div h2{
+
-
padding: 20px 20px 0px;
+
-
position: relative;
+
-
top: -155px;
+
-
}
+
-
.threeboxes div p{
+
-
padding: 0px 20px;
+
-
position: relative;
+
-
top: -155px;
+
-
}
+
-
#greybox1, #greybox6{
+
-
margin-right: 4px;
+
-
//background: #58CD45;
+
-
                        background: #3399FF;
+
-
}
+
-
#greybox1:hover, #greybox6:hover{
+
-
background: #94FF7D;
+
-
}
+
-
#greybox2, #greybox5{
+
-
margin-right: 4px;
+
-
background: #5BB5E8;
+
-
                     
+
-
}
+
-
#greybox2:hover, #greybox5:hover{
+
-
background: #7DD7FF;
+
-
}
+
-
#greybox3, #greybox4{
+
-
margin: 0;
+
-
//background: #F6A82D;
+
-
                        background: #00CCFF;
+
-
}
+
-
#greybox3:hover, #greybox4:hover{
+
-
background: #FFE44F;
+
-
}
+
-
 
+
-
#greybox4 {
+
-
background: #CCFFFF;
+
-
}
+
-
#greybox5 {
+
-
background: #CCFFFF;
+
-
}
+
-
#greybox6 {
+
-
background: #CCFFFF;
+
-
}
+
-
#greybox1:hover, #greybox2:hover, #greybox3:hover {
+
-
background: #00CC00;
+
-
}
+
-
 
+
-
 
+
-
 
+
-
 
+
-
#greybox4:hover, #greybox5:hover, #greybox6:hover {
+
-
background: #66FFFF;
+
-
}
+
-
 
+
-
#greybox1 {
+
-
background: #CCFF99;
+
-
}
+
-
#greybox2 {
+
-
background: #CCFF99;
+
-
}
+
-
#greybox3 {
+
-
background: #CCFF99;
+
-
}
+
-
+
-
#sponsorsbox{
+
-
clear: both;
+
-
position: relative;
+
-
width: 968px;
+
-
margin: 4px 0px;
+
-
background: #EEEEEE;
+
-
}
+
-
#sponsorsbox h2{
+
-
padding: 20px 20px 0px 20px;
+
-
}
+
-
#sponsorsbox p{
+
-
padding: 0px 20px;
+
-
}
+
-
#sponsorsbox table{
+
-
width: 950px;
+
-
margin-left: auto;
+
-
margin-right: auto;
+
-
background: #EEEEEE;
+
-
}
+
-
#sponsorsbox td{
+
-
padding: 15px 0px;
+
-
width: 300px;
+
-
}
+
-
#sponsorsbox img{
+
-
display: block;
+
-
margin-right: auto;
+
-
margin-left: auto;
+
-
}
+
-
 
+
-
</style>
+
-
 
+
-
<script>
+
-
jQuery(document).ready(function($){
+
-
 
+
-
//eliminate jsnotice
+
-
$('#jsnotice').hide();
+
-
 
+
-
+
-
/*epic box info functionality*/
+
-
//small icons
+
-
$('#boximgcontainer .iconbox').hover(
+
-
function(){
+
-
var className = $(this).attr('class').split(" ");
+
-
var box = className[0];
+
-
clearinfo();
+
-
$('#boxinfo div.' + box).show();
+
-
},
+
-
function(){
+
-
clearinfo();
+
-
$('#boxinfo_default').show();
+
-
});
+
-
//large icons
+
-
$('.imgbox').hover(
+
-
function(){
+
-
var id = $(this).parent().parent().attr('id');
+
-
clearinfo();
+
-
$('#boxinfo div.' + id).show();
+
-
},
+
-
function(){
+
-
clearinfo();
+
-
$('#boxinfo_default').show();
+
-
});
+
-
+
-
/*epic box FRED/OSCAR blank box disappearance*/
+
-
$('#bluebox').hover(
+
-
function(){
+
-
$('.gblank').hide();
+
-
$('.bblank').hide();
+
-
},
+
-
function(){
+
-
$('.gblank').show();
+
-
$('.bblank').show();
+
-
});
+
-
+
-
$('#greenbox').hover(
+
-
function(){
+
-
$('.gblank').hide();
+
-
$('.bblank').hide();
+
-
},
+
-
function(){
+
-
$('.gblank').show();
+
-
$('.bblank').show();
+
-
});
+
-
+
-
});
+
-
 
+
-
function clearinfo(){
+
-
$('#boxinfo div').hide();
+
-
}
+
-
</script>
+
-
 
+
-
<!-- End stuff from Calgary -->
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
+
-
</head>
+
-
<body>
+
-
 
+
-
<h1>Stanford-Brown iGEM </h1>
+
-
+
-
<!-- =======================================
+
-
 
+
-
THE ACTUAL ORBIT SLIDER CONTENT
+
-
 
+
-
======================================= -->
+
-
<div id="featured">
+
-
<div class="content" style="">
+
-
<h1>Orbit does content now.</h1>
+
-
<h3>Highlight me...I'm text.</h3>
+
-
</div>
+
-
<a href=""><img src="http://www.stanford.edu/~sryoung/cgi-bin/igem/demo/dummy-images/overflow.jpg" /></a>
+
-
<img src="http://www.stanford.edu/~sryoung/cgi-bin/igem/demo/dummy-images/captions.jpg" data-caption="#htmlCaption" />
+
-
<img src="http://www.stanford.edu/~sryoung/cgi-bin/igem/demo/dummy-images/features.jpg"  />
+
-
</div>
+
-
<!-- Captions for Orbit -->
+
-
<span class="orbit-caption" id="htmlCaption"><strong>I'm A Badass Caption:</strong> I can haz <a href="#">links</a>, <em>style</em> or anything that is valid markup :)</span>
+
-
+
-
+
-
 
+
-
 
+
-
 
+
-
+
-
<!-- <div class="container"> -->
+
-
<!-- <h4>ZURB's Orbit Slider</h4>
+
-
<a href="http://www.zurb.com/playground/orbit-jquery-image-slider">View Docs + Playground for Orbit</a> -->
+
-
 
+
-
<br />
+
-
<br />
+
-
 
+
-
<div class="threeboxes">
+
-
<a id="greybox4" href="http://www.youtube.com/watch?v=KHhswxo6xow" style="margin-right:4px;">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/0/02/UCalgary2012_ThreeBoxMusic.png-"></img>
+
-
<h2>Project #1</h2>
+
-
<p>Description</p>
+
-
</div>
+
-
</a>
+
-
<a id="greybox5" href="https://2012.igem.org/Team:Calgary/Project/Synergy-">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/2/20/UCalgary2012_ThreeBoxSynergy.png-"></img>
+
-
<h2>Project #2</h2>
+
-
<p>Description</p>
+
-
</div>
+
-
</a>
+
-
<a id="greybox6" href="http://www.youtube.com/watch?v=vluDpf4ao6c" style="margin:0;">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/b/b1/UCalgary2012_ThreeBoxFilm.png-"></img>
+
-
<h2>Project #3</h2>
+
-
<p>Description</p>
+
-
</div>
+
-
</a>
+
-
+
-
</div>
+
-
 
+
-
<div class="threeboxes">
+
-
<a id="greybox1" href="https://2012.igem.org/Team:Calgary/Team">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/b/b8/UCalgary2012_ThreeBoxTeam.png-"></img>
+
-
<h2>Team</h2>
+
-
<p>Who are we?</p>
+
-
</div>
+
-
</a>
+
-
<a id="greybox2" href="https://2012.igem.org/Team:Calgary/Project/DataPage">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/9/92/UCalgary2012_ThreeBoxData.png-"></img>
+
-
<h2>Data Page</h2>
+
-
<p>Click here to see a summary of all our data collected so far!</p>
+
-
</div>
+
-
</a>
+
-
<a id="greybox3" href="https://2012.igem.org/Team:Calgary/Notebook">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/1/1b/UCalgary2012_ThreeBoxNotebook.png-"></img>
+
-
<h2>Notebook</h2>
+
-
<p>Here is a record of our summer's work. We also want to thank everybody who helped us along the way!</p>
+
-
</div>
+
-
</a>
+
-
</div>
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
<div id="epicbox">
+
-
<div id="boximgcontainer">
+
-
<div id="orangebox">
+
-
<a href="https://2012.igem.org/Team:Calgary/Project/HumanPractices">
+
-
<div class="imgbox">
+
-
<img src="https://static.igem.org/mediawiki/2012/9/9e/UCalgary2012_EpicBoxHP_-_Blank.png-"></img>
+
-
</div>
+
-
+
-
<div class="oblank">
+
-
</div>
+
-
+
-
<div class="iconcontainer">
+
-
<a class="obox1 iconbox" href="https://2012.igem.org/Team:Calgary/Project/HumanPractices/Collaborations">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/1/1b/UCalgary2012_IconHP8.png-"></img>
+
-
</div>
+
-
</a>
+
-
<a class="obox2 iconbox" href="https://2012.igem.org/Team:Calgary/Project/HumanPractices/Interviews">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/d/d6/UCalgary2012_IconHP3.png-"></img>
+
-
</div>
+
-
</a>
+
-
<a class="obox3 iconbox" href="https://2012.igem.org/Team:Calgary/Project/HumanPractices/Design">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/1/1c/UCalgary2012_IconHP4.png-"></img>
+
-
</div>
+
-
</a>
+
-
<a class="obox4 iconbox" href="https://2012.igem.org/Team:Calgary/Project/HumanPractices/Killswitch">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/6/65/UCalgary2012_IconHP2.png-"></img>
+
-
</div>
+
-
</a>
+
-
<a class="obox5 iconbox" href="https://2012.igem.org/Team:Calgary/Safety">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/c/c9/UCalgary2012_IconHP5.png-"></img>
+
-
</div>
+
-
</a>
+
-
<a class="obox6 iconbox" href="https://2012.igem.org/Team:Calgary/Outreach">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/0/0e/UCalgary2012_IconHP6.png-"></img>
+
-
</div>
+
-
</a>
+
-
</div>
+
-
 
+
-
+
-
</a>
+
-
</div>
+
-
+
-
<div id="greenbox">
+
-
<a href="https://2012.igem.org/Team:Calgary/Project/FRED">
+
-
<div class="imgbox">
+
-
<img src="https://static.igem.org/mediawiki/2012/4/47/UCalgary2012_EpicBoxFRED_-_Blank.png-"></img>
+
-
</div>
+
-
+
-
<div class="gblank">
+
-
</div>
+
-
+
-
<div class="iconcontainer">
+
-
<a class="gbox1 iconbox" href="https://2012.igem.org/Team:Calgary/Project/FRED/Detecting">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/0/0a/UCalgary2012_IconFRED1.png-"></img>
+
-
</div>
+
-
</a>
+
-
<a class="gbox2 iconbox" href="https://2012.igem.org/Team:Calgary/Project/FRED/Reporting">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/8/8d/UCalgary2012_IconFRED2.png-"></img>
+
-
</div>
+
-
</a>
+
-
<a class="gbox3 iconbox" href="https://2012.igem.org/Team:Calgary/Project/FRED/Modelling">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/c/c0/UCalgary2012_IconFRED3.png-"></img>
+
-
</div>
+
-
</a>
+
-
<a class="gbox4 iconbox" href="https://2012.igem.org/Team:Calgary/Project/FRED/Prototype">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/a/a7/UCalgary2012_IconFRED4.png-"></img>
+
-
</div>
+
-
</a>
+
-
</div>
+
-
</a>
+
-
</div>
+
-
+
-
<div id="bluebox">
+
-
<a href="https://2012.igem.org/Team:Calgary/Project/OSCAR">
+
-
<div class="imgbox">
+
-
<img src="https://static.igem.org/mediawiki/2012/9/94/UCalgary2012_EpicBoxOSCAR_-_Blank.png-"></img>
+
-
</div>
+
-
+
-
<div class="bblank">
+
-
</div>
+
-
+
-
<div class="iconcontainer">
+
-
<a class="bbox1 iconbox" href="https://2012.igem.org/Team:Calgary/Project/OSCAR/Decarboxylation">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/f/f1/UCalgary2012_IconOSCAR1.png-"></img>
+
-
</div>
+
-
</a>
+
-
<a class="bbox2 iconbox" href="https://2012.igem.org/Team:Calgary/Project/OSCAR/CatecholDegradation">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/0/0c/UCalgary2012_IconOSCAR4.png-"></img>
+
-
</div>
+
-
</a>
+
-
<a class="bbox3 iconbox" href="https://2012.igem.org/Team:Calgary/Project/OSCAR/FluxAnalysis">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/4/40/UCalgary2012_IconOSCAR6.png-"></img>
+
-
</div>
+
-
</a>
+
-
<a class="bbox4 iconbox" href="https://2012.igem.org/Team:Calgary/Project/OSCAR/Bioreactor">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/3/3e/UCalgary2012_IconOSCAR5.png-"></img>
+
-
</div>
+
-
</a>
+
-
<a class="bbox5 iconbox" href="https://2012.igem.org/Team:Calgary/Project/OSCAR/Upgrading">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/4/44/UCalgary2012_IconOSCAR7.png-"></img>
+
-
</div>
+
-
</a>
+
-
</div>
+
-
</a>
+
-
</div>
+
-
</div>
+
-
<div id="boxinfo">
+
-
<div id="boxinfo_default">
+
-
<h2>The Concept</h2>
+
-
<p>The concept</p>
+
-
</div>
+
-
<div class="orangebox">
+
-
<h2>Human Practices</h2>
+
-
<p>Human Practices</p>
+
-
</div>
+
-
<div class="obox1">
+
-
<h2>Initiative</h2>
+
-
<p>Initiative</p>
+
-
</div>
+
-
<div class="obox2">
+
-
<h2>Interviews</h2>
+
-
<p>Interviews</p>
+
-
</div>
+
-
<div class="obox3">
+
-
<h2>Design Considerations</h2>
+
-
<p>Design Considerations</p>
+
-
</div>
+
-
<div class="obox4">
+
-
<h2>Killswitch</h2>
+
-
<p>Kill Switch</p>
+
-
</div>
+
-
<div class="obox5">
+
-
<h2>Safety</h2>
+
-
<p>Safety</p>
+
-
</div>
+
-
<div class="obox6">
+
-
<h2>Community Outreach</h2>
+
-
<p>Community Outreach</p>
+
-
</div>
+
-
<div class="greenbox">
+
-
<h2>Project #1</h2>
+
-
<p>Project #1</p>
+
-
</div>
+
-
<div class="gbox1">
+
-
<h2>Detecting</h2>
+
-
<p>Project #1 Detection</p>
+
-
</div>
+
-
<div class="gbox2">
+
-
<h2>Reporting</h2>
+
-
<p>Project #1 Reporting</p>
+
-
</div>
+
-
<div class="gbox3">
+
-
<h2>Modelling</h2>
+
-
<p>Modelling for Project #1</p>
+
-
</div>
+
-
<div class="gbox4">
+
-
<h2>Prototyping</h2>
+
-
<p>Prototyping for Project #1</p>
+
-
</div>
+
-
<div class="bluebox">
+
-
<h2>Project #2</h2>
+
-
<p>Project #2</p>
+
-
</div>
+
-
<div class="bbox1">
+
-
<h2>Decarboxylation</h2>
+
-
<p>Project #2</p>
+
-
</div>
+
-
<div class="bbox2">
+
-
<h2>Catechol Degradation</h2>
+
-
<p>Project #2</p>
+
-
</div>
+
-
<div class="bbox3">
+
-
<h2>Flux-Variability Analysis</h2>
+
-
<p>Project #2</p>
+
-
</div>
+
-
<div class="bbox4">
+
-
<h2>Bioreactor</h2>
+
-
<p>Project #2</p>
+
-
</div>
+
-
<div class="bbox5">
+
-
<h2>Upgrading</h2>
+
-
<p>Project #2</p>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
 
+
-
 
+
-
 
+
-
 
+
-
+
-
<!-- </div> -->
+
-
</body>
+
-
</html>
+

Revision as of 18:28, 7 August 2013


 <nav class="top-bar">

  • <a href="#"> Top Bar Title </a>

  • <a href="#">menu</a>
   <section class="top-bar-section">
  • <a href="#">Main Item 1</a>
    • <label>Section Name</label>
    • <a href="#" class="">Has Dropdown, Level 1</a>
      • <a href="#">Dropdown Options</a>
      • <a href="#">Dropdown Options</a>
      • <a href="#">Level 2</a>
      • <a href="#">Subdropdown Option</a>
      • <a href="#">Subdropdown Option</a>
      • <a href="#">Subdropdown Option</a>
    • <a href="#">Dropdown Option</a>
    • <a href="#">Dropdown Option</a>
    • <label>Section Name</label>
    • <a href="#">Dropdown Option</a>
    • <a href="#">Dropdown Option</a>
    • <a href="#">Dropdown Option</a>
    • <a href="#">See all →</a>
  • <a href="#">Main Item 2</a>
  • <a href="#">Main Item 3</a>
    • <a href="#">Dropdown Option</a>
    • <a href="#">Dropdown Option</a>
    • <a href="#">Dropdown Option</a>
    • <a href="#">See all →</a>
   </section>
 </nav>






         <img src="http://placehold.it/1200x700&text=Mobile Header">


Contents

Upcoming Shows

                 <img src="http://placehold.it/50x50&text=[img]">
<a href="#">Venue Name</a>
Doors at 00:00pm
                   <img src="http://placehold.it/50x50&text=[img]">
<a href="#">Venue Name</a>
                   <img src="http://placehold.it/50x50&text=[img]">
<a href="#">Venue Name</a>
                   <img src="http://placehold.it/50x50&text=[img]">
<a href="#">Venue Name</a>


             <img src="http://placehold.it/300x465&text=Image">



Blog

<a href="#">Post Title 1</a>
Risus ligula, aliquam nec fermentum vitae, sollicitudin eget urna. Suspendisse ultrices ornare tempor...
<a href="#">Read More »</a>
<a href="#">Post Title 2 »</a>
<a href="#">Post Title 3 »</a>
             <a href="#" class="right">Go To Blog »</a>






     <footer class="row">

© Copyright no one at all. Go to town.

  • <a href="#">Link 1</a>
  • <a href="#">Link 2</a>
  • <a href="#">Link 3</a>
  • <a href="#">Link 4</a>
     </footer>



 <script>
 document.write('<script src=js/vendor/' +
 ('__proto__' in {} ? 'zepto' : 'jquery') +
 '.js><\/script>')
 </script>
 <script src="js/foundation.min.js"></script>
 <script>
   $(document).foundation();
 </script>
Retrieved from "http://2013.igem.org/Team:UCSF/Home1"