Team:UCLA/samantha michaels ucla2014 workspace

From 2014.igem.org

(Difference between revisions)
 
(129 intermediate revisions not shown)
Line 1: Line 1:
{{:Team:UCLA/Template/Javascript}}
{{:Team:UCLA/Template/Javascript}}
{{:Team:UCLA/Template/CSS_test}}
{{:Team:UCLA/Template/CSS_test}}
-
{{:Team:UCLA/sams_extra_css}}
 
<html lang="en">
<html lang="en">
Line 9: Line 8:
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
 
-
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
 
-
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 
-
    <link href="css/bootstrap.min.css" rel="stylesheet">
 
     <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
     <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
     <title>iGEM UCLA</title>
     <title>iGEM UCLA</title>
-
 
-
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
 
-
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 
-
    <!--[if lt IE 9]>
 
-
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 
-
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 
-
    <![endif]-->
 
   </head>
   </head>
-
<body class="cbp-spmenu-push">
+
<body>
-
<!-- MAIN MENU BAR-->
+
<!--TOP NAVIGATION MENU BAR-->
-
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+
<div id = "top_menu" >
-
  <div class="container">
+
<ul id = "menu">
-
    <!-- Brand and toggle get grouped for better mobile display -->
+
<li><a href="/Team:UCLA">Home</a></li>
-
    <div class="navbar-header">
+
-
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+
         <li><a href="/Team:UCLA/Team">Team</a>
-
        <span class="sr-only">Toggle navigation</span>
+
        <ul>
-
        <span class="icon-bar"></span>
+
    <li><a href="/Team:UCLA/meet_the_team">Meet the Team</a></li>
-
        <span class="icon-bar"></span>
+
    <li><a href="https://igem.org/Team.cgi?year=2014&team_name=UCLA">Official Profile</a></li>
-
        <span class="icon-bar"></span>
+
        </ul>
-
      </button>
+
-
      <a class="navbar-brand" href="#">UCLA iGEM</a>
+
-
    </div>
+
-
 
+
-
    <!-- Collect the nav links, forms, and other content for toggling -->
+
-
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+
-
 
+
-
      <ul class="nav navbar-nav">
+
-
        <li class="active"><a href="/Team:UCLA">Home</a></li>
+
-
         <li class="dropdown">
+
-
          <a href="/Team:UCLA/Team" class="dropdown-toggle" data-toggle="dropdown">Team<span class="caret"></span></a>
+
-
          <ul class="dropdown-menu" role="menu">
+
-
            <li><a href="/Team:UCLA/meet_the_team">Meet the Team</a></li>
+
-
            <li><a href="https://igem.org/Team.cgi?year=2014&team_name=UCLA">Official Profile</a></li>
+
-
          </ul>
+
         </li>
         </li>
-
         <li class="dropdown">
+
-
          <a href="/Team:UCLA/Project" class="dropdown-toggle" data-toggle="dropdown">Project<span class="caret"></span></a>
+
         <li><a href="/Team:UCLA/Project">Project</a>
-
          <ul class="dropdown-menu" role="menu">
+
<ul>
-
            <li><a href="/Team:UCLA/Project/Customizing Silk">Customizing Silk Properties</a></li>
+
    <li><a href="/Team:UCLA/Project/Customizing Silk">Customizing Silk Properties</a></li>
    <li><a href="/Team:UCLA/Project/Functionalizing Fibers">Functionalizing Fibers</a></li>
    <li><a href="/Team:UCLA/Project/Functionalizing Fibers">Functionalizing Fibers</a></li>
    <li><a href="/Team:UCLA/Project/Spinning Silk">Spinning Silk</a></li>
    <li><a href="/Team:UCLA/Project/Spinning Silk">Spinning Silk</a></li>
             <li><a href="#">Human Practices</a></li>
             <li><a href="#">Human Practices</a></li>
-
          </ul>
+
</ul>
-
        </li>
+
</li>
-
         <li class="dropdown">
+
       
-
          <a href="/Team:UCLA/Parts" class="dropdown-toggle" data-toggle="dropdown">Parts<span class="caret"></span></a>
+
         <li><a href="/Team:UCLA/Parts">Parts</a>
-
          <ul class="dropdown-menu" role="menu">
+
<!--<ul>
    <li><a href="#">Page1</a></li>
    <li><a href="#">Page1</a></li>
    <li><a href="#">Page2</a></li>
    <li><a href="#">Page2</a></li>
    <li><a href="#">Page3</a></li>
    <li><a href="#">Page3</a></li>
-
          </ul>
+
</ul>-->
-
        </li>
+
</li>
 +
 
         <li><a href="/Team:UCLA/Modeling">Modeling</a></li>
         <li><a href="/Team:UCLA/Modeling">Modeling</a></li>
-
         <li class="dropdown">
+
 
-
          <a href="/Team:UCLA/Notebook" class="dropdown-toggle" data-toggle="dropdown">Notebook<span class="caret"></span></a>
+
         <li><a href="/Team:UCLA/Notebook">Notebook</a>
-
          <ul class="dropdown-menu" role="menu">
+
<ul>
-
            <li><a href="/Team:UCLA/Notebook/Protocols">Protocols</a></li>
+
    <li><a href="/Team:UCLA/Notebook/Protocols">Protocols</a></li>
    <li><a href="/Team:UCLA/Notebook/Calendar">Calendar</a></li>
    <li><a href="/Team:UCLA/Notebook/Calendar">Calendar</a></li>
    <li><a href="/Team:UCLA/Notebook/Weekly Notes">Weekly Notes</a></li>
    <li><a href="/Team:UCLA/Notebook/Weekly Notes">Weekly Notes</a></li>
-
          </ul>
+
</ul>
-
        </li>
+
        </li>
 +
 
         <li><a href="/Team:UCLA/Safety">Safety</a></li>
         <li><a href="/Team:UCLA/Safety">Safety</a></li>
 +
         <li><a href="/Team:UCLA/Attributions">Attributions</a></li>
         <li><a href="/Team:UCLA/Attributions">Attributions</a></li>
-
      </ul>
+
</ul>
 +
<a href="https://2014.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/igem.org/1/17/IGEM_basic_Logo_white_stylized.png" width="55px"/></a>
 +
</div><br><br><br>
-
      <ul class="nav navbar-nav navbar-right">
+
<!--SIDEBAR NAV-->
-
        <a href="https://2014.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png" width="55px"/>
+
<div id="side_menu">
-
      </ul>
+
<h3>1</h3>
-
    </div><!-- /.navbar-collapse -->
+
<h3>2</h3>
-
  </div><!-- /.container-fluid -->
+
<h3>3</h3>
-
</nav>
+
<h3>4</h3>
-
 
+
<h3>5</h3>
-
<!-- CAROUSEL -->
+
<h3>6</h3>
-
<div class = "container"><br><br>
+
-
  <div class = "row">
+
-
    <div class = "col-md-offset-1 col-md-10 col-md-offset-1">
+
-
<div id = "myCarousel" class = "carousel slide">
+
-
  <ol class = "carousel-indicators">
+
-
<li data-target = "#myCarousel" data-slide-to = "0" class ="active"></li>
+
-
<li data-target = "#myCarousel" data-slide-to = "1"></li>
+
-
<li data-target = "#myCarousel" data-slide-to = "2"></li>
+
-
  </ol>
+
-
+
-
  <div class = "carousel-inner">
+
-
      <div class = "item active">
+
-
<img src = "http://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg" alt ="Space" class = "img-responsive">
+
-
<div class = "carousel-caption">
+
-
    <h3>The future is here.</h3>
+
-
    <p>Take a seat and view the world from a different perspective.</p>
+
-
</div>
+
-
      </div>
+
-
      <div class = "item">
+
-
  <img src = "http://tmacfitness.com/wp-content/uploads/2013/04/Beauty-of-nature-random-4884759-1280-800.jpg" alt ="Batman" class = "img-responsive">
+
-
  <div class = "carousel-caption">
+
-
    <h3>The Dark Knight</h3>
+
-
    <p>Take a look at the teaser trailer for Batman vs Superman</p>
+
-
  </div>
+
-
</div>
+
-
<div class = "item">
+
-
  <img src = "http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg" alt ="Minecraft" class = "img-responsive">
+
-
  <div class = "carousel-caption">
+
-
      <h3>Minecraft</h3>
+
-
      <p>Westeros, Middle-Earth and other incredible works recreated in Minecraft</p>
+
-
                  </div>
+
-
</div>
+
-
</div>
+
-
<a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">
+
-
  <span class = "icon-prev"></span>
+
-
</a>
+
-
<a class = "carousel-control right" href = "#myCarousel" data-slide = "next">
+
-
  <span class = "icon-next"></span>
+
-
</a>
+
-
  </div>
+
-
    </div>
+
-
  </div>
+
</div>
</div>
-
<!--DIV BOXES-->
 
-
<br><br>
 
-
<div class = "container">
 
-
  <div class = "row">
 
-
    <div class = "col-xs-4">
 
-
    <p><div style="background-color: #333333; height:600px; padding-bottom: 8px; padding-left: 8px; padding-right: 8px; padding-top: 8px; overflow:auto;font-family: 'Open Sans Condensed', sans-serif;">
 
-
    <a href="YOUR IMAGE URL" style="clear: left; float: left; margin-bottom: 0.5em; margin-right: 1em;"><img border="0"  src="YOUR IMAGE URL" width="100"/></a>
+
<!-- TITLE BANNER-->
-
    <font color=#ffffff>
+
<br><center><img src="http://www.achickwithbaggage.com/storage/site_graphics/ad_placeholder_banner.jpg?__SQUARESPACE_CACHEVERSION=1297808765522"></center><br><Br>
-
    <b>Title</b><br/>
+
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
-
</font></div>
+
-
</p>
+
-
    </div>
+
-
    <div class = "col-xs-4">
+
-
    <p><div style="background-color: #333333; height:600px; padding-bottom: 8px; padding-left: 8px; padding-right: 8px; padding-top: 8px; overflow:auto;font-family: 'Open Sans Condensed', sans-serif;">
+
-
<a href="YOUR IMAGE URL" style="clear: left; float: left; margin-bottom: 0.5em; margin-right: 1em;"><img border="0" src="YOUR IMAGE URL" width="100"/></a>
+
<!--SLIDER-->
-
<font color=#ffffff>
+
<div class="slider">
-
<b>Title</b><br/>
+
<img id="1" src="http://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg" border="0"/>
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
<img id="2" src="http://tmacfitness.com/wp-content/uploads/2013/04/Beauty-of-nature-random-4884759-1280-800.jpg" border="0"/>
-
</font></div></p>
+
<img id="3" src="http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg" border="0"/>
-
    </div>
+
</div>
-
    <div class = "col-xs-4">
+
<div class="slider_nav">
-
    <p><div style="background-color: #333333; height:600px; padding-bottom: 8px; padding-left: 8px; padding-right: 8px; padding-top: 8px; overflow:auto;font-family: 'Open Sans Condensed', sans-serif;">
+
<img id="left" style="float:left;" src="http://www.visme.co/wp-content/themes/visme/images/left.png" border="0"/>
 +
<img id="right" style="float:right;" src="http://iconizer.net/files/Brightmix/orig/monotone_arrow_right.png" border="0"/>
 +
</div>
 +
<div class="shadow"></div>
-
<a href="YOUR IMAGE URL" style="clear: left; float: left; margin-bottom: 0.5em; margin-right: 1em;"><img border="0"  src="YOUR IMAGE URL" width="100"/></a>
+
</div>
-
<font color=#ffffff>
+
-
<b>Title</b><br/>
+
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
-
</font></div></p>
+
-
    </div>
+
-
  </div>
+
-
  </div>
+
-
<!-- BACK-TO-TOP BUTTON -->
+
<!--SUMMARY TILES-->
-
<div class="scroll-top-wrapper ">
+
<br><hr class="style-one">
-
  <span class="scroll-top-inner">
+
<div class="container">
-
<i class="fa fa-2x fa-chevron-circle-up"></i>
+
    <div class = "expandedContent">
-
  </span>
+
    <div class="boxgrid contentBorder boxgridMedium" id="box5" style="margin-left:210px">
 +
  <img src="https://static.igem.org/mediawiki/2013/0/06/SDU2013_LabHigh.jpg">
 +
  <a class="cover boxcaption" style="top: 340px" href="#anch1">
 +
    <h2 class="onBlack">Customizing Silk</h2>
 +
    <p class="onBlackIntro">
 +
 
 +
If you wish to see how, click here to start the interactive tour.
 +
    </p>
 +
    <p class="onBlack">
 +
Just days before the deadline of iGEM 2013, we got the peaks that our entire summer built towards: Two small bumps on the NMR indicating the presence of bacterially produced rubber in our strain of E. coli. With a mad scramble to the finish line, our initial indication was reinforced. Click anywhere along this text to start the interactive tour, which will guide you along the path to rubber.
 +
    </p>
 +
  </a>
</div>
</div>
 +
<div class="boxgrid contentBorder boxgridMedium" id="box6" style="margin-left:40px">
 +
  <img src="https://static.igem.org/mediawiki/2013/0/06/SDU2013_LabHigh.jpg">
 +
  <a class="cover boxcaption" style="top: 340px" href="#anch2">
 +
    <h2 class="onBlack">Functionalizing Fibers</h2>
 +
    <p class="onBlackIntro">
-
<!-- SLIDING SLIDE BAR -->
+
If you wish to see how, click here to start the interactive tour.
-
<div class="row affix-row">
+
     </p>
-
    <div class="col-sm-3 col-md-2 affix-sidebar">
+
     <p class="onBlack">
-
<div class="sidebar-nav">
+
Just days before the deadline of iGEM 2013, we got the peaks that our entire summer built towards: Two small bumps on the NMR indicating the presence of bacterially produced rubber in our strain of E. coli. With a mad scramble to the finish line, our initial indication was reinforced. Click anywhere along this text to start the interactive tour, which will guide you along the path to rubber.
-
  <div class="navbar navbar-default" role="navigation">
+
    </p>
-
    <div class="navbar-header">
+
  </a>
-
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
+
</div>
-
      <span class="sr-only">Toggle navigation</span>
+
<div class="boxgrid contentBorder boxgridMedium" id="box7" style="margin-left:40px">
-
      <span class="icon-bar"></span>
+
  <img src="https://static.igem.org/mediawiki/2013/0/06/SDU2013_LabHigh.jpg">
-
      <span class="icon-bar"></span>
+
  <a class="cover boxcaption" style="top: 340px" href="#anch3">
-
      <span class="icon-bar"></span>
+
    <h2 class="onBlack">Spinning Silk</h2>
-
      </button>
+
    <p class="onBlackIntro">
-
      <span class="visible-xs navbar-brand">Sidebar menu</span>
+
 
-
     </div>
+
If you wish to see how, click here to start the interactive tour.
-
     <div class="navbar-collapse collapse sidebar-navbar-collapse">
+
    </p>
-
      <ul class="nav navbar-nav" id="sidenav01">
+
    <p class="onBlack">
-
        <li class="active">
+
Just days before the deadline of iGEM 2013, we got the peaks that our entire summer built towards: Two small bumps on the NMR indicating the presence of bacterially produced rubber in our strain of E. coli. With a mad scramble to the finish line, our initial indication was reinforced. Click anywhere along this text to start the interactive tour, which will guide you along the path to rubber.
-
          <a href="#" data-toggle="collapse" data-target="#toggleDemo0" data-parent="#sidenav01" class="collapsed">
+
     </p>
-
          <h4>
+
   </a>
-
          Control Panel
+
</div>
-
          <br>
+
</div>
-
          <small>IOSDSV <span class="caret"></span></small>
+
-
          </h4>
+
-
          </a>
+
-
          <div class="collapse" id="toggleDemo0" style="height: 0px;">
+
-
            <ul class="nav nav-list">
+
-
              <li><a href="#">ProfileSubMenu1</a></li>
+
-
              <li><a href="#">ProfileSubMenu2</a></li>
+
-
              <li><a href="#">ProfileSubMenu3</a></li>
+
-
            </ul>
+
-
          </div>
+
-
        </li>
+
-
        <li>
+
-
          <a href="#" data-toggle="collapse" data-target="#toggleDemo" data-parent="#sidenav01" class="collapsed">
+
-
          <span class="glyphicon glyphicon-cloud"></span> Submenu 1 <span class="caret pull-right"></span>
+
-
          </a>
+
-
          <div class="collapse" id="toggleDemo" style="height: 0px;">
+
-
            <ul class="nav nav-list">
+
-
              <li><a href="#">Submenu1.1</a></li>
+
-
              <li><a href="#">Submenu1.2</a></li>
+
-
              <li><a href="#">Submenu1.3</a></li>
+
-
            </ul>
+
-
          </div>
+
-
        </li>
+
-
        <li>
+
-
          <a href="#" data-toggle="collapse" data-target="#toggleDemo2" data-parent="#sidenav01" class="collapsed">
+
-
          <span class="glyphicon glyphicon-inbox"></span> Submenu 2 <span class="caret pull-right"></span>
+
-
          </a>
+
-
          <div class="collapse" id="toggleDemo2" style="height: 0px;">
+
-
            <ul class="nav nav-list">
+
-
              <li><a href="#">Submenu2.1</a></li>
+
-
              <li><a href="#">Submenu2.2</a></li>
+
-
              <li><a href="#">Submenu2.3</a></li>
+
-
            </ul>
+
-
          </div>
+
-
        </li>
+
-
        <li><a href="#"><span class="glyphicon glyphicon-lock"></span> Normalmenu</a></li>
+
-
        <li><a href="#"><span class="glyphicon glyphicon-calendar"></span> WithBadges <span class="badge pull-right">42</span></a></li>
+
-
        <li><a href=""><span class="glyphicon glyphicon-cog"></span> PreferencesMenu</a></li>
+
-
      </ul>
+
-
      </div><!--/.nav-collapse -->
+
-
     </div>
+
-
   </div>
+
-
</div>
+
-
<div class="col-sm-9 col-md-10 affix-content">
+
-
<div class="container">
+
-
+
-
<div class="page-header">
+
-
<h3><span class="glyphicon glyphicon-th-list"></span> Navigation</h3>
+
</div>
</div>
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lectus orci, viverra nec neque non, tincidunt commodo leo. Nullam eleifend velit purus, id aliquam elit venenatis sit amet. Cras vel nisl eget eros tempus viverra. Phasellus in enim et nulla tempor blandit. Donec at lectus sit amet velit faucibus tincidunt quis sed est. Mauris placerat purus odio. In egestas, velit quis congue sodales, turpis lacus pellentesque neque, quis accumsan orci nibh sed mauris. Sed sit amet pulvinar felis. Aliquam consequat tellus non ligula elementum, at egestas quam vestibulum.
 
-
Duis sed urna sit amet quam rutrum malesuada sed eu risus. Cras sit amet velit a neque tincidunt cursus sed ac nunc. Donec ac auctor purus. Proin viverra turpis sit amet dui sagittis, quis tempor elit suscipit. Curabitur rutrum lacus et diam lacinia, vel ullamcorper libero vulputate. Phasellus sem ligula, pharetra sed nisl sed, facilisis sagittis ante. Nullam egestas turpis et mauris aliquet cursus. Nullam vel eleifend neque.</p>
 
-
<p>Pellentesque semper nisl eget auctor varius. Vivamus auctor venenatis rhoncus. Ut at elit eget justo placerat tincidunt. Etiam varius sapien lacus, eget vehicula diam tincidunt et. Integer at velit eu metus luctus bibendum. Mauris ornare hendrerit felis, at cursus enim tempor et. Nullam pretium at libero facilisis aliquet. Mauris malesuada eros sed erat laoreet blandit. Proin venenatis ac arcu sed tristique.</p>
 
-
<p>In eget ullamcorper mi. Curabitur iaculis a eros in elementum. Pellentesque volutpat quam nec dolor pharetra, vitae iaculis lacus viverra. Aenean tristique felis sed leo ultricies lobortis. Phasellus ut libero dictum, dapibus elit et, pretium tellus. Donec fermentum neque dolor, vitae mattis odio blandit nec. Sed eget tellus ac dui pellentesque ultrices vitae eget arcu. Sed congue sit amet nunc eu sollicitudin. Praesent sit amet auctor purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque tincidunt erat sem, ac rhoncus nisi aliquet vel. Pellentesque at lectus faucibus, ultrices tellus non, accumsan justo. Curabitur vitae turpis aliquet, vehicula enim eu, rhoncus quam.</p>
 
-
<p>Aenean vitae lorem a elit faucibus porta vitae nec risus. Mauris eget ligula nisi. Nunc eu egestas leo. In euismod consectetur sollicitudin. Curabitur sed justo eleifend, consequat tortor eu, semper massa. Proin rhoncus, odio eu pulvinar pulvinar, urna neque dignissim metus, eget porta libero justo non dolor. Phasellus rhoncus dui diam, at vehicula mauris rhoncus et. Cras quis varius mauris. Sed erat ante, mattis quis lacus nec, vehicula congue enim. Nam vel felis ultricies, sodales justo ac, tristique odio. Sed ullamcorper purus eget tortor posuere tempor. Donec at auctor felis, at iaculis quam. Proin fermentum sagittis sem vel varius. Proin enim nibh, mollis a nibh vitae, porta congue dui.</p>
 
-
<p>Cras malesuada, est in placerat varius, risus nibh gravida tortor, et ullamcorper erat metus et velit. Fusce mollis mollis sem, non tincidunt nisi tristique eget. Aliquam erat volutpat. Vivamus mollis justo nunc, in commodo diam tristique ut. Proin at nunc dolor. Aenean dapibus commodo orci, in mollis odio volutpat in. Curabitur rutrum eu arcu vehicula interdum. Etiam eu imperdiet lacus, vel placerat magna. Duis molestie eu erat eu auctor. Sed cursus porta sem quis imperdiet. Cras pharetra ante urna, a tempus neque facilisis egestas. Proin vel nulla vitae eros luctus ornare ut vel sem. Donec eget erat in risus lobortis viverra. Mauris libero nisl, pretium in justo vel, porta euismod elit. Donec commodo porttitor metus, vel sagittis ante interdum ut.
 
-
Vivamus sodales turpis et eros cursus, eu feugiat dolor rhoncus. Nulla nisi lectus, molestie eu quam nec, condimentum sagittis est. Cras eu volutpat quam, vehicula suscipit metus. Duis ornare urna arcu, non malesuada nunc bibendum at. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer venenatis augue sed iaculis sodales. Donec nec turpis mi.</p>
 
-
<p>Sed facilisis lorem in bibendum rutrum. Morbi ligula risus, aliquam a lorem quis, pulvinar varius odio. Sed facilisis mi sit amet elit euismod hendrerit. Vestibulum fermentum erat eu semper ultricies. Interdum et malesuada fames ac ante ipsum primis in faucibus. In tristique orci tortor, in mollis magna varius non. Nullam sed dui scelerisque, porta nunc id, iaculis urna. Nunc faucibus ac enim nec sollicitudin.
 
-
Quisque nec ante arcu. Nullam aliquet et turpis nec pulvinar. Maecenas tellus velit, lobortis vitae laoreet eu, feugiat eu orci. Maecenas molestie malesuada nulla, id dignissim sem blandit at. Suspendisse hendrerit quis arcu ut malesuada. Nam porttitor magna et porttitor convallis. Curabitur gravida elementum lorem, in mattis turpis tristique tincidunt. Aliquam id neque euismod, consectetur diam sit amet, adipiscing felis. Phasellus sit amet sem elementum, elementum nisi non, aliquam ligula. Morbi in interdum mi, at pulvinar nunc.</p>
 
-
<p>Praesent aliquet, sapien id pulvinar auctor, elit nisl imperdiet elit, id mattis felis lacus a neque. Fusce ullamcorper, urna vitae mollis tempus, sapien urna aliquam neque, sed dignissim nunc mauris sed nisi. Mauris malesuada congue mauris. Aenean vel justo tincidunt, euismod dolor ut, mattis purus. Vivamus eget adipiscing augue. Curabitur et neque faucibus nunc porta ultrices eu ut justo. Nam eu quam et urna consectetur convallis. Integer at fringilla erat, ut molestie nulla. Maecenas rutrum justo ut lectus gravida, vitae eleifend nulla ullamcorper. Sed consequat sit amet purus id congue. Integer condimentum, odio non pellentesque posuere, eros nisi porttitor nunc, ac laoreet nibh quam eu eros. Sed quis massa posuere, gravida erat non, varius turpis. Morbi venenatis vestibulum vulputate. Vestibulum arcu mauris, commodo commodo ligula nec, molestie blandit neque. Nulla imperdiet, massa nec placerat iaculis, odio lacus aliquam dui, eu vehicula velit dolor et augue.</p>
 
-
 
-
</div>
 
-
</div>
 
</div>
</div>
-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+
<!-- Spider click to top button -->
-
<script src = "js/bootstrap.min.js"></script>
+
    <img class= "spiderbutton" src= "https://static.igem.org/mediawiki/2014/a/ac/Spiderbutton2.png">
-
<script type="text/javascript" src = "js/bootstrap-progressbar.js"></script>
+
    <img class= "spiderline" src= "https://static.igem.org/mediawiki/2014/6/66/Line2.png">
-
 
+
    <img class= "spiderweb" src= "https://static.igem.org/mediawiki/2014/b/bb/Web3.png">
-
  </body>
+
</body>
</html>
</html>

Latest revision as of 23:28, 16 September 2014

iGEM UCLA




1

2

3

4

5

6






Retrieved from "http://2014.igem.org/Team:UCLA/samantha_michaels_ucla2014_workspace"