Difference between revisions of "Team:UCSC"

 
(457 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
−
<!--Bootstrap Core Css-->
+
<head>
−
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
+
<meta charset="utf-8">
 +
<!-- Bootstrap CSS -->
 +
  <meta name="viewport" content="width=device-width, initial-scale=1">
 +
  <link rel="stylesheet" href="https://2015.igem.org/Template:UCSC/CSS?action=raw&ctype=text/css">
 +
  <script src="https://2015.igem.org/Template:UCSC/Javascript?action=raw&ctype=text/javascript"></script>
 +
  <script src="https://2015.igem.org/Template:UCSC/Bootstrap_Javascript?action=raw&ctype=text/javascript"></script>
 +
<style>
  
−
<!--Add custom CSS here-->
+
body{padding-bottom: 70px;}
  
−
<style type="text/css">
+
.navbar-nav > li{
−
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear {display: none;} /*-- hides default wiki settings --*/
+
  padding-top: 5px;
 +
  padding-left:15px;
 +
  padding-right:20px;
 +
}
  
−
body {
+
.navbar .navbar-nav {
−
background-image: url("http://i.imgur.com/3B5DBmW.jpg");
+
    display: inline-block;
 +
    float: none;
 +
}
  
−
}
+
.navbar .navbar-collapse {
 +
    text-align: center;
 +
}
 +
.bernick a:hover { color: #CCAC00;}
  
−
#scroller {
+
.foot a:link{ color: black;}
 +
 
 +
.foot a:visited{ color: black;}
 +
 
 +
.foot a:hover { color: #CCAC00;}
 +
 
 +
.bernick_swag a:link{ color: #8798b2; font-family:  Calibri, Helvetica; Arial font-size: 13px;}
 +
 
 +
.bernick_swag a:visited{ color: #8798b2; font-family: Calibri, Helvetica; Arial font-size: 13px;}
 +
 
 +
.bernick_swag a:hover { color: #DAA520; font-family:  Calibri, Helvetica; Arial font-size: 13px;}
 +
 
 +
img {
 +
max-width: 100%;
 +
height: auto;
 +
width: auto\9; /* ie8 */
 +
}
 +
 
 +
 
 +
#salt {width: 100%;
 +
      position: relative;
 +
      top: -75px;}
 +
 
 +
 
 +
div.classname a:hover {
 +
    opacity: 0.4;
 +
    filter: alpha(opacity=100); /* For IE8 and earlier */
 +
}
 +
 
 +
 
 +
 
 +
.gear {
 +
    width: 80px;
 +
    height: 80px;
 +
    -webkit-animation:spin 4s linear infinite;
 +
    -moz-animation:spin 4s linear infinite;
 +
    animation:spin 4s linear infinite;
 +
}
 +
 
 +
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
 +
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
 +
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
 +
 
 +
p {margin-left: 20px;
 +
font-family: calibri, helvetica, arial;
 +
font-size: 16px;}
 +
 
 +
ul#menu li {
 +
    display:inline;
 +
}
 +
 
 +
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
 +
    display:none;}
 +
 
 +
 
 +
#top-section {
 +
    border: none;
 +
    height: 0px;
 +
    width: 100%;
 +
    padding-left: 0px;}
 +
 
 +
 
 +
#content {
 +
    border: none;
 +
    width: 100%;
 +
    padding: 0px;}
 +
 
 +
 
 +
#our_content {
 +
 +
             
 
position: relative;
 
position: relative;
 +
                width: 1220px;
 +
                margin: auto;
 +
                repeat: n;
 +
                font-family: Calibri, Helvetica; Arial;
 +
                font-size: 18px;
 +
 
}
 
}
−
#scroller .innerScrollArea {
+
 
−
overflow: hidden;
+
#foot {margin: auto;
−
position: absolute;
+
        font-size: 12px;
−
left: 0;
+
        font-family: Calibri, Helvetica; Arial;}
−
right: 0;
+
 
−
top: 0;
+
 
−
bottom: 0;
+
 
 +
}
 +
 
 +
@media screen and (max-width: 1280px) {
 +
 
 +
.gear {width: 10%; height: 10%;}
 +
 
 +
#salt {width: 100%}
 +
 
 +
#our_content {
 +
width: 100%;
 
}
 
}
−
#scroller ul {
+
 
−
padding: 0;
+
#top-section {
−
margin: 0;
+
width: 100%;
−
position: relative;
+
 
}
 
}
−
#scroller li {
+
 
−
padding: 0;
+
#content {width: 100%;}
−
margin: 0;
+
 
−
list-style-type: none;
+
#foot {width: 100%}
−
position: absolute;
+
 
−
        }
+
 
−
        #footer {
+
}
−
img-align: center;
+
 
−
text-align: center;
+
@media screen and (max-width: 1024px) {
 +
 
 +
#salt {width: 100%}
 +
 
 +
#our_content {
 +
width: 100%;
 
}
 
}
−
#footer {
+
 
−
background-image: url("http://i.imgur.com/cHGrwsB.jpg");
+
#top-section {
−
width: 1020px;
+
width: 100%;
−
align: center;
+
−
text-align: center;
+
−
img-align-center;
+
−
+
 
}
 
}
−
#alpha {
+
 
−
background-image: url("http://i.imgur.com/gDXtSTA.jpg");
+
#content {width: 100%;}
−
width: 1019px;
+
 
−
align: center;  
+
#foot {width: 100%}
−
text-align: center;
+
 
−
img-align-center;
+
.gear {width: 10%; height: 10%;}
−
+
 
 +
}
 +
@media screen and (max-width: 980px) {
 +
 
 +
#salt {width: 100%}
 +
#our_content {
 +
width: 100%;
 
}
 
}
−
+
 
−
.nav li a:hover {
+
#top-section {
−
        background-color: SteelBlue;  
+
width: 100%;
 +
}
 +
 
 +
#content {width: 100%;}
 +
 
 +
#foot {width: 100%}
 +
 
 +
.gear {width: 10%; height: 10%;}
 +
}
 +
 
 +
@media screen and (max-width: 650px) {
 +
 
 +
#salt {width: 100%}
 +
 
 +
#our_content {
 +
width: 100%;
 +
}
 +
 
 +
#top-section {
 +
width: 100%;
 +
}
 +
 
 +
#content {width: 100%;}
 +
 
 +
#foot {width: 100%}
 +
 
 +
.gear {width: 10%; height: 10%;}
 +
 
 +
}
 +
 
  
  
 
</style>
 
</style>
  
−
<body>
 
  
−
<!-- beginning of your page -->
+
</head>
 +
 
  
 
<!-- menu -->
 
<!-- menu -->
−
<div class="container col-lg-12 col-md-12 col-sm-12 col-xs-12">
 
−
<div class="row">
 
−
<nav class="navbar" style="background: SteelBlue;" >
 
−
  <div class="container-fluid">
 
−
    <!-- Brand and toggle get grouped for better mobile display -->
 
−
    <div class="navbar-header">
 
−
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
 
−
        <span class="sr-only">Toggle navigation</span>
 
−
        <span class="icon-bar"></span>
 
−
        <span class="icon-bar"></span>
 
−
        <span class="icon-bar"></span>
 
−
      </button>
 
−
      <a class="navbar-brand" href="https://2014.igem.org/Team:UCSC" style="color: gold;">Home</a>
 
−
    </div>
 
  
−
<!-- Collect the nav links, forms, and other content for toggling -->
+
<!-- end of menu -->
−
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+
<body>
−
      <ul class="nav navbar-nav">
+
−
        <li class="active"><a href="http://https://2014.igem.org/Team:UCSC/Project" style="color: gold;">Project</a></li>
+
−
        <li><a href="https://2014.igem.org/Team:UCSC/Parts" style="color: gold;">Parts</a></li>
+
−
        <li><a href="https://2014.igem.org/Team:UCSC/Team" style="color: gold;">Team</a></li>
+
−
        <li><a href="#" style="color: gold;">Community Outreach</a></li>
+
  
−
<!-- Dropdown Example
+
<nav class="navbar navbar-fixed-top" style="position:relative; top: -10px; background-color: #E5E4E2; text-align:center;" >
−
        <li class="dropdown">
+
  <div  class="container-fluid" >
−
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
+
    <div class="navbar-header" >
 +
      <a class="navbar-brand" href="#"></a>
 +
    </div>
 +
    <div>
 +
      <ul class="nav navbar-nav bernick_swag">
 +
        <li class="active"><a href="https://2015.igem.org/Team:UCSC">Home</a></li>
 +
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Team <span class="caret"></span></a>
 
           <ul class="dropdown-menu">
 
           <ul class="dropdown-menu">
−
             <li><a href="#">Action</a></li>
+
             <li><a href="https://2015.igem.org/Team:UCSC/Team">Meet the Team</a></li>
−
             <li><a href="#">Another action</a></li>
+
             <li><a href="https://2015.igem.org/Team:UCSC/Breakdown">Breakdown</a></li>
−
             <li><a href="#">Something else here</a></li>
+
             <li><a href="https://2015.igem.org/Team:UCSC/Fermentation">Fermentation</a></li>
−
            <li role="separator" class="divider"></li>
+
             <li><a href="https://2015.igem.org/Team:UCSC/Field">Field</a></li>
−
             <li><a href="#">Separated link</a></li>
+
             <li><a href="https://2015.igem.org/Team:UCSC/Attributions">Attributions</a></li>
−
            <li role="separator" class="divider"></li>
+
−
             <li><a href="#">One more separated link</a></li>
+
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
−
-->
+
        <li><a href="https://2015.igem.org/Team:UCSC/Description">Project</a></li>
 +
          <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Human Practices<span class="caret"></span></a>
 +
          <ul class="dropdown-menu">
 +
            <li><a href="https://2015.igem.org/Team:UCSC/Outreach">Outreach</a></li>
 +
            <li><a href="https://2015.igem.org/Team:UCSC/Practices">Bioethics</a></li>
 +
          </ul>
 +
        </li>
 +
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Notebook<span class="caret"></span></a>
 +
          <ul class="dropdown-menu">
 +
            <li><a href="https://2015.igem.org/Team:UCSC/Logs">Logs</a></li>
 +
            <li><a href="https://2015.igem.org/Team:UCSC/Protocols">Protocols</a></li>
 +
          </ul>
 +
        </li>
 +
        <li><a href="https://2015.igem.org/Team:UCSC/Safety">Safety</a></li>
 +
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Achievements<span class="caret"></span></a>
 +
          <ul class="dropdown-menu">
 +
            <li><a href="https://2015.igem.org/Team:UCSC/Parts">Parts</a></li>
 +
            <li><a href="https://2015.igem.org/Team:UCSC/Medal_Fulfillment">Medal Fulfillment</a></li>
 +
            <li><a href="https://2015.igem.org/Team:UCSC/Results">Results</a></li>
  
−
</ul>
+
</ul>
−
    </div><!-- /.navbar-collapse -->
+
 
−
  </div><!-- /.container-fluid -->
+
            <li><a href="https://2015.igem.org/Team:UCSC/Software">Software</a></li>           
 +
      </ul>
 +
    </div>
 +
  </div>
 
</nav>
 
</nav>
−
</div>
 
  
−
</td>
 
−
<td  bgColor="#FFFFFF"></td>
 
−
</tr>
 
−
</table>
 
−
<!-- end of menu -->
 
−
<div>
 
−
<img src="http://i.imgur.com/vb06PVl.jpg">
 
−
</div>
 
  
 
<!--First Block -->
 
<!--First Block -->
−
<div id="alpha">
 
  
 +
<div id="our_content" align="center">
 +
<img src="https://static.igem.org/mediawiki/2015/7/73/Ucsclogo.png" width="99%" height="99%" />
 +
<img src="https://static.igem.org/mediawiki/2015/3/3f/Ucsc_slogan.png" />
 +
<p style="font-size: 12px;">
 +
In collaboration with:
 +
<br />
 +
<img src="https://static.igem.org/mediawiki/2015/c/cd/IGEM_WikiFlicks_logo_white.png" style="height: 20%; width: 20%"/>
 +
</p>
  
 +
<br />
 +
<br />
  
 +
<div class="classname">
 +
<table class="center">
 +
  <tr>
 +
    <td><a href="https://2015.igem.org/Team:UCSC/Breakdown"><img src="https://static.igem.org/mediawiki/2015/5/5d/UCSC_Breakdown.jpg" width="350" height="200"></a></td>
 +
  <td><a href="https://2015.igem.org/Team:UCSC/Fermentation"><img src="https://static.igem.org/mediawiki/2015/f/fe/UCSC_Fermentation.jpg" width="350" height="200"></a></td>    
 +
<td><a href="https://2015.igem.org/Team:UCSC/Field"><img src="https://static.igem.org/mediawiki/2015/7/73/Field_3.jpg" width="350" height="200"></a></td>
 +
 
 +
  </tr>
 +
</table>
 +
<br />
 +
<br />
 +
<table class="center">
 +
<tr>
 +
    <td><a href="https://2015.igem.org/Team:UCSC/Description"><img src="https://static.igem.org/mediawiki/2015/3/3c/Ucsc_sustainability.jpg" width="350" height="200"></a></td>
 +
    <td><img src="https://static.igem.org/mediawiki/2015/4/41/Sammythumbsup.png" width="350" height="300"></a></td>
 +
    <td><a href="https://2015.igem.org/Team:UCSC/Outreach"><img src="https://static.igem.org/mediawiki/2015/3/32/Ucsc_outreach.jpg" width="350" height="200"></a></td>
 +
  </tr>
 +
</table>
 +
</nav>
  
−
 
−
 
−
 
−
<div class="center">
 
−
<a href="https://2015.igem.org/Special:Upload">CLICK HERE TO UPLOAD FILES</a>
 
 
<br />
 
<br />
 
<br />
 
<br />
 +
</div>
 
<br />
 
<br />
 +
<br />
 +
 
</div>
 
</div>
−
</div>
 
−
    <!--Footer-->
 
−
    <div id="footer">
 
−
<a href= "http://www.ucsc.edu/"> <img src="https://static.igem.org/mediawiki/2014/9/94/UCSC_School_Logo_white.jpg" width="175px"></a>
 
−
<a href="https://2014.igem.org/Main_Page"> <img src="https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png" width="55px" ></a>
 
−
<a href = "http://www.geneious.com/"> <img src= "https://static.igem.org/mediawiki/2014/d/d6/Genious_logo.png" height = "55px" ></a>
 
−
<a href = "https://us.vwr.com/"> <img src= "https://static.igem.org/mediawiki/2014/4/4f/Sponsors_Logo_VWR.jpg" height = "30px" ></a>
 
−
<a href="http://www.hartnell.edu/"> <img src="https://static.igem.org/mediawiki/2015/a/a9/Fns4kg.png" width="55px" ></a>
 
−
           
 
−
</div>
 
−
</body>
 
−
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
 
−
<script type="text/javascript">
 
−
    $(function(){
 
−
        var scroller = $('#scroller div.innerScrollArea');
 
−
        var scrollerContent = scroller.children('ul');
 
−
        scrollerContent.children().clone().appendTo(scrollerContent);
 
−
        var curX = 0;
 
−
        scrollerContent.children().each(function(){
 
−
            var $this = $(this);
 
−
            $this.css('left', curX);
 
−
            curX += $this.outerWidth(true);
 
−
        });
 
−
        var fullW = curX / 2;
 
−
        var viewportW = scroller.width();
 
  
−
        // Scrolling speed management
+
  <!--Footer-->
−
        var controller = {curSpeed:0, fullSpeed: 1};
+
−
        var $controller = $(controller);
+
−
        var tweenToNewSpeed = function(newSpeed, duration)
+
−
        {
+
−
            if (duration === undefined)
+
−
                duration = 600;
+
−
            $controller.stop(true).animate({curSpeed:newSpeed}, duration);
+
−
        };
+
  
−
        // Pause on hover
+
<div id="foot" class="center foot">
−
        scroller.hover(function(){
+
<img src="https://static.igem.org/mediawiki/2015/8/80/Cellulose_Footer.png" width="25%" /><img class="gear" src="https://static.igem.org/mediawiki/2015/1/11/Ucsc_gear.png" alt="">&nbsp;&nbsp; <a href="https://2015.igem.org/Team:UCSC">Home</a> | <a href="https://2015.igem.org/Team:UCSC/Team">Teams</a> | <a href="https://2015.igem.org/Team:UCSC/Description">Project</a> | <a href="https://2015.igem.org/Team:UCSC/Practices">Human Practices</a> | <a href="https://2015.igem.org/Team:UCSC/Logs">Notebook</a> | <a href="https://2015.igem.org/Team:UCSC/Safety">Safety</a> | <a href="https://2015.igem.org/Team:UCSC/Parts">Parts</a> | <a href="https://2015.igem.org/Team:UCSC/Software">F.O.C.U.S</a> &nbsp;&nbsp; <img class="gear" src="https://static.igem.org/mediawiki/2015/1/11/Ucsc_gear.png" alt="">
−
            tweenToNewSpeed(0);
+
<img src="https://static.igem.org/mediawiki/2015/4/4c/Fuel_Footer.png"  width="25%"/>
−
        }, function(){
+
−
            tweenToNewSpeed(controller.fullSpeed);
+
−
        });
+
  
−
        // Scrolling management; start the automatical scrolling
+
<ul id="menu">
−
        var doScroll = function()
+
<li><img src="https://static.igem.org/mediawiki/2015/a/a9/Fns4kg.png" style="width: 88px; height:88px;" /></li>
−
        {
+
 
−
            var curX = scroller.scrollLeft();
+
<li><img src="https://static.igem.org/mediawiki/2015/0/03/Vwr.png" style="width: 241px; height: 50px "/></li>
−
            var newX = curX + controller.curSpeed;
+
 
−
            if (newX > fullW*2 - viewportW)
+
<li><img src="https://static.igem.org/mediawiki/2015/6/62/Ucsc.png" style="width: 288px; height: 68px;" /></li>
−
                newX -= fullW;
+
 
−
            scroller.scrollLeft(newX);
+
<li><img src="https://static.igem.org/mediawiki/2015/b/b6/Geneious_logo.png" style="width: 288px; height: 88px; " /></li>
−
        };
+
 
−
        setInterval(doScroll, 20);
+
<li><img src="https://static.igem.org/mediawiki/2015/3/34/Idt.jpg" style="width: 88px; height: 88px;" /></li>
−
        tweenToNewSpeed(controller.fullSpeed);
+
</ul>
−
    });
+
 
−
</script>
+
</div>
 +
</body>
  
 
</html>
 
</html>

Latest revision as of 02:28, 19 September 2015

In collaboration with: