Difference between revisions of "Team:Oxford/Notebook"

Line 2: Line 2:
 
<html>
 
<html>
 
<head>
 
<head>
 +
<script type="text/javascript">
 +
$(document).ready(function(){
 +
    $('[data-toggle="popover1"]').popover({placement: "auto"});
 +
});
 +
</script>
 
<style>
 
<style>
 +
  /* Popover Header */
 +
  .popover-title {
 +
      background-color: #B0C4DE;
 +
      color: #FFFFFF;
 +
      height: auto;
 +
      font-size: 28px;
 +
      text-align: center;
 +
      padding: 2px;
 +
  }
 +
  /* Popover Body */
 +
  .popover-content {
 +
      background-color: ;
 +
      color: #000000;
 +
      padding: 10px;
 +
  }
  
−
.hovereffect {
 
−
width:100%;
 
−
height:100%;
 
−
float:left;
 
−
overflow:hidden;
 
−
position:relative;
 
−
text-align:center;
 
−
cursor:default;
 
−
}
 
  
−
.hovereffect .overlay {
+
  </style>
−
width:100%;
+
</head>
−
height:100%;
+
<body>
−
position:absolute;
+
−
overflow:hidden;
+
−
top:0;
+
−
left:0;
+
−
opacity:0;
+
−
background-color:rgba(0,0,0,0.5);
+
−
-webkit-transition:all .4s ease-in-out;
+
−
transition:all .4s ease-in-out
+
−
}
+
  
−
.hovereffect img {
+
<div id="banner" style="background-image: url(https://static.igem.org/mediawiki/2016/3/33/Experiments_page_header_oxford_2016_sam.jpeg);"></div>
−
display:block;
+
−
position:relative;
+
−
-webkit-transition:all .4s linear;
+
−
transition:all .4s linear;
+
−
}
+
  
−
.hovereffect h2 {
+
<div class="container-fluid content-main">
−
text-transform:uppercase;
+
<div class="row">
−
color:#fff;
+
−
text-align:center;
+
−
position:relative;
+
−
font-size:17px;
+
−
background:rgba(0,0,0,0.6);
+
−
-webkit-transform:translatey(-100px);
+
−
-ms-transform:translatey(-100px);
+
−
transform:translatey(-100px);
+
−
-webkit-transition:all .2s ease-in-out;
+
−
transition:all .2s ease-in-out;
+
−
padding:10px;
+
−
}
+
  
−
.hovereffect a.info {
 
−
text-decoration:none;
 
−
display:inline-block;
 
−
text-transform:uppercase;
 
−
color:#fff;
 
−
border:1px solid #fff;
 
−
background-color:transparent;
 
−
opacity:0;
 
−
filter:alpha(opacity=0);
 
−
-webkit-transition:all .2s ease-in-out;
 
−
transition:all .2s ease-in-out;
 
−
margin:50px 0 0;
 
−
padding:7px 14px;
 
−
}
 
  
−
.hovereffect a.info:hover {
 
−
box-shadow:0 0 5px #fff;
 
−
}
 
  
−
.hovereffect:hover img {
 
−
-ms-transform:scale(1.2);
 
−
-webkit-transform:scale(1.2);
 
−
transform:scale(1.2);
 
−
}
 
  
−
.hovereffect:hover .overlay {
+
<nav class="col-md-3 bs-docs-sidebar navFont">
−
opacity:1;
+
        <ul id="sidebar" class="nav nav-stacked" data-spy="affix" data-offset-top="330">
−
filter:alpha(opacity=100);
+
−
}
+
  
−
.hovereffect:hover h2,.hovereffect:hover a.info {
+
        </ul>
−
opacity:1;
+
    </nav>
−
filter:alpha(opacity=100);
+
 
−
-ms-transform:translatey(0);
+
 
−
-webkit-transform:translatey(0);
+
 
−
transform:translatey(0);
+
 
−
}
+
 
 +
 
 +
 
 +
 
 +
    <div class="col-md-9 content-right" style="background-color: #fff;">
 +
 
 +
<h1>Wet Lab Notebook</h1>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<div class="container-fluid">
  
−
.hovereffect:hover a.info {
 
−
-webkit-transition-delay:.2s;
 
−
transition-delay:.2s;
 
−
}
 
−
</style>
 
−
</head>
 
−
<body>
 
  
−
<div align="center">
 
−
<h2>Under construction</h2>
 
−
</div>
 
  
  
−
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
 
−
    <div class="hovereffect">
 
 
         <img class="img-responsive" src="https://static.igem.org/mediawiki/2016/c/c9/Overnight_cultures_plate_reader_sam_oxford_2016.jpeg" alt="">
 
         <img class="img-responsive" src="https://static.igem.org/mediawiki/2016/c/c9/Overnight_cultures_plate_reader_sam_oxford_2016.jpeg" alt="">
−
        <div class="overlay">
 
−
          <h3><font color="white"> These are some overnight cultures.</font></h3>
 
−
        </div>
 
−
    </div>
 
−
</div>
 
  
  
−
</body> </html>
+
 
 +
</div>
 +
</div>
 +
</div>
 +
</body>  
 +
</html>
 +
 
 +
{{:Team:Oxford/footer}}

Revision as of 13:15, 15 October 2016

iGEM Oxford 2016 - Cure for Copper

Wet Lab Notebook