Difference between revisions of "Team:Technion Israel/Lab Notebook/Protocols"

Line 11: Line 11:
 
}
 
}
 
 
−
.Protocol_Main{
+
.slides {height: 560px;
−
width:900px;
+
width: 700px;
−
height: 2000px;
+
float: left;
−
margin:auto;
+
padding: 20px;
−
background-color: white;
+
margin: auto;}
−
overflow: hidden;}
+
−
+
−
.four_columns
+
−
{width: 900px;
+
−
height: 300;
+
−
position: absolute;
+
−
left:200px;
+
−
margin: auto;
+
−
padding: 10px;}
+
 
 
−
.four_columns h1
+
li {list-style-type: none;}
−
{font-size: 18; font-style: underline; font-style: bold;}
+
 
−
.four_columns h2
+
.cloning_left{margin-left: 20px; float: left; width: 330px; list-style: none;}
−
{font-size: 14; font-style: bold;}
+
.cloning_left h2{font-size: 16px;}
−
.four_columns h3
+
.cloning_left h3{font-size: 12px;}
−
{font-size: 12;}
+
−
+
−
#pic_cloning {
+
−
position: absolute;
+
−
top: 90px;
+
−
right: 38px;
+
−
margin-bottom: 10px;
+
−
}
+
−
#pic_proof {
+
−
position: absolute;
+
−
right: 38px;
+
−
margin-bottom: 10px;
+
−
}
+
−
+
−
.wrapper{height: 300px;
+
−
position: absolute;
+
−
top: 300px;
+
−
left: 100px;}
+
−
+
−
.cloning_left{float: left; width: 400px;}
+
 
 
−
#proof {
+
.cloning_right{float: left; width: 340px; list-style: none;}
−
position: absolute;
+
.cloning_right h2{font-size: 16px;}
−
top: 600px;}
+
.cloning_right h3{font-size: 12px;}
−
+
−
#pic_comb {
+
−
position: absolute;
+
−
top: 500px;
+
−
right: 38px;
+
−
margin-bottom: 10px;}
+
 
 
−
#comb {
 
−
position: absolute;
 
−
top: 500px;}
 
−
 
−
#misc {
 
−
position: absolute;
 
−
top: 1500px;}
 
−
 
−
#pic_misc {
 
−
position: absolute;
 
−
right: 38px;
 
−
margin-bottom: 10px;}
 
−
 
−
.wrapper_misc {height: 300px;
 
−
position: absolute;
 
−
top: 220px;
 
−
left: 100px;
 
−
}
 
−
 
−
.wrapper_proof {height: 300px;
 
−
position: absolute;
 
−
top: 220px;
 
−
left: 100px;
 
−
}
 
 
 
 +
.sp-slideshow {
 +
  position: relative;
 +
  margin: 0px auto;
 +
  width: 800px;
 +
  max-width: 1000px;
 +
  min-width: 260px;
 +
  height: 560px;
 +
  border: 10px solid #ddd;
 +
  border: 10px solid rgba(255,255,255,0.9);
 +
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
 +
}
 +
 +
.sp-content {
 +
  position: relative;
 +
  width: 100%;
 +
  height: 100%;
 +
  overflow: hidden;
 +
}
 +
 +
.sp-parallax-bg {
 +
  position: absolute;
 +
  top: 0;
 +
  left: 0;
 +
  background-size: cover;
 +
  width: 100%;
 +
  height: 100%;
 +
  overflow: hidden;
 +
}
 +
 +
.sp-slideshow input {
 +
  position: absolute;
 +
  bottom: 15px;
 +
  left: 50%;
 +
  width: 9px;
 +
  height: 9px;
 +
  z-index: 1001;
 +
  cursor: pointer;
 +
  opacity: 0;
 +
}
 +
 +
.sp-slideshow input + label {
 +
  position: absolute;
 +
  bottom: 15px;
 +
  left: 50%;
 +
  width: 6px;
 +
  height: 6px;
 +
  display: block;
 +
  z-index: 1000;
 +
  border: 3px solid white;
 +
  border: 3px solid navy;
 +
  border-radius: 50%;
 +
  transition: background-color linear 0.1s;
 +
}
 +
 +
.sp-slideshow input:checked + label {
 +
  background-color: white;
 +
  background-color: navy;
 +
}
 +
 +
.sp-selector-1, .button-label-1 {
 +
  margin-left: -36px;
 +
}
 +
 +
.sp-selector-2, .button-label-2 {
 +
  margin-left: -18px;
 +
}
 +
.sp-selector-4, .button-label-4 {
 +
  margin-left: 18px;
 +
}
 +
 +
 +
.sp-arrow {
 +
    position:absolute;
 +
    top:50%;
 +
    width:26px;
 +
    height:33px;
 +
    margin-top:-35px;
 +
    display:none;
 +
    opacity:0.8;
 +
    cursor:pointer;
 +
    z-index:1000;
 +
    background: url(http://i.imgur.com/L6FjFzo.png) no-repeat;
 +
    -webkit-transition:opacity linear 0.3s;
 +
    -moz-transition:opacity linear 0.3s;
 +
    -o-transition:opacity linear 0.3s;
 +
    -ms-transition:opacity linear 0.3s;
 +
    transition:opacity linear 0.3s; }
 +
   
 +
.sp-arrow:hover {
 +
    opacity:1; }
 +
 +
.sp-arrow:active {
 +
    margin-top:-35px; }
 
 
−
+
.sp-selector-1:checked ~ .sp-arrow.sp-a2,
−
</style>
+
.sp-selector-2:checked ~ .sp-arrow.sp-a3,
−
+
.sp-selector-3:checked ~ .sp-arrow.sp-a4 {
 +
  right: 15px;
 +
  display: block;
 +
  background-position: top right;
 +
}
 +
.sp-selector-2:checked ~ .sp-arrow.sp-a1,
 +
.sp-selector-3:checked ~ .sp-arrow.sp-a2,
 +
.sp-selector-4:checked ~ .sp-arrow.sp-a3 {
 +
  left: 15px;
 +
  display: block;
 +
  background-position: top left;
 +
}
 +
 
 +
.sp-slideshow input:checked ~ .sp-content {
 +
  transition: background-position linear 0.6s, background-color linear 0.8s;
 +
}
 +
 
 +
.sp-slideshow input:checked ~ .sp-content .sp-parallax-bg {
 +
  transition: background-position linear 0.7s;
 +
}
 +
 
 +
input.sp-selector-1:checked ~ .sp-content {
 +
  background-position: 0 0;
 +
  background-color: white;
 +
}
 +
 
 +
input.sp-selector-2:checked ~ .sp-content {
 +
  background-position: 0 0;
 +
  background-color: white;
 +
}
 +
 
 +
input.sp-selector-3:checked ~ .sp-content {
 +
  background-position: 0 0;
 +
  background-color: white;
 +
}
 +
 
 +
input.sp-selector-4:checked ~ .sp-content {
 +
  background-position: 0 0;
 +
  background-color: white;
 +
}
 +
 
 +
 
 +
input.sp-selector-1:checked ~ .sp-content .sp-parallax-bg {
 +
    background-position: 0 0;
 +
}
 +
 +
input.sp-selector-2:checked ~ .sp-content .sp-parallax-bg {
 +
    background-position: 0 0;
 +
}
 +
 +
input.sp-selector-3:checked ~ .sp-content .sp-parallax-bg {
 +
    background-position: 0 0;
 +
}
 +
 +
input.sp-selector-4:checked ~ .sp-content .sp-parallax-bg {
 +
    background-position: 0 0;
 +
}
 +
 
 +
 
 +
.sp-slider {
 +
  position: relative;
 +
  left: 0;
 +
  width: 500%;
 +
  height: 100%;
 +
  list-style: none;
 +
  margin: 0;
 +
  padding: 0;
 +
  transition: left ease-in 0.8s;
 +
}
 +
 
 +
.sp-slider > li {
 +
  color: purple;
 +
  width: 20%;
 +
  box-sizing: border-box;
 +
  height: 100%;
 +
  padding: 0 0px;
 +
  float: left;
 +
  opacity: 1;
 +
  transition: opactiy ease-in 0.4s 0.8s;
 +
}
 +
 
 +
.sp-slider > li a{
 +
  color: purple;
 +
font-size: 16px;}
 +
.sp-slider > li img {
 +
  box-sizing: border-box;
 +
  display: block;
 +
  margin: 0 auto;
 +
  padding: 40px 0 50px 0;
 +
  max-height: 100%;
 +
  max-width: 100%;
 +
}
 +
 
 +
input.sp-selector-1:checked ~ .sp-content .sp-slider {
 +
    left: 0;
 +
}
 +
 +
input.sp-selector-2:checked ~ .sp-content .sp-slider {
 +
    left: -100%;
 +
}
 +
 +
input.sp-selector-3:checked ~ .sp-content .sp-slider {
 +
    left: -200%;
 +
}
 +
 +
input.sp-selector-4:checked ~ .sp-content .sp-slider {
 +
    left: -300%;
 +
}
 +
 +
 
 +
input.sp-selector-1:checked ~ .sp-content .sp-slider > li:first-child,
 +
input.sp-selector-2:checked ~ .sp-content .sp-slider > li:nth-child(2),
 +
input.sp-selector-3:checked ~ .sp-content .sp-slider > li:nth-child(3),
 +
input.sp-selector-4:checked ~ .sp-content .sp-slider > li:nth-child(4){
 +
    opacity: 1;
 +
}
 +
 
 +
 
 +
 
 +
</style>
 
<title>Team: Technion 2015</title>
 
<title>Team: Technion 2015</title>
 
</head>
 
</head>
 
<body>
 
<body>
−
 
−
<header>
 
−
 
−
<div class="main_menu">
 
−
<nav>
 
−
<a href="#">
 
−
<button class="button_main1">
 
−
<span class="btn-text">Project</span>
 
−
<span class="btn-bg"></span>
 
−
</button>
 
−
</a>
 
−
<a href="#">
 
−
<button class="button_main2">
 
−
<span class="btn-text">Lab Notebook</span>
 
−
<span class="btn-bg"></span>
 
−
</button>
 
−
</a>
 
−
<a href="#">
 
−
<button class="button_main3">
 
−
<span class="btn-text">Judging Criteria</span>
 
−
<span class="btn-bg"></span>
 
−
</button>
 
−
</a>
 
−
<a href="#">
 
−
<button class="button_main4">
 
−
<span class="btn-text">Human Practices</span>
 
−
<span class="btn-bg"></span>
 
−
</button>
 
−
</a>
 
−
<a href="#">
 
−
<button class="button_main5">
 
−
<span class="btn-text">Team</span>
 
−
<span class="btn-bg"></span>
 
−
</button>
 
−
</a>
 
−
</nav>
 
−
</div>
 
−
</header>
 
  
 
<!---------------------------------------dropdown menu----------------------------------->
 
<!---------------------------------------dropdown menu----------------------------------->
Line 193: Line 308:
 
<!---------------------------------------dropdown menu-end----------------------------------->
 
<!---------------------------------------dropdown menu-end----------------------------------->
  
−
<div class= "Protocol_Main">
+
<div class= "content">
−
<div class="protocol_list">
+
<header>
−
<div class="four_columns">
+
<img src="https://static.igem.org/mediawiki/2015/5/52/Technion_Israel_2015_Design-heading.jpg" alt="Design" width="914px" height="300px"/>
 +
</header>
 +
<div class="container">
 +
 
 +
<div class="sp-slideshow">
 +
 
 +
  <input type="radio" id="button-1" name="radio-set" class="sp-selector-1" checked="checked" />
 +
  <label for="button-1" class="button-label-1"></label>
 +
 
 +
  <input type="radio" id="button-2" name="radio-set" class="sp-selector-2" />
 +
  <label for="button-2" class="button-label-2"></label>
 +
 
 +
  <input type="radio" id="button-3" name="radio-set" class="sp-selector-3" />
 +
  <label for="button-3" class="button-label-3"></label>
 +
 
 +
  <input type="radio" id="button-4" name="radio-set" class="sp-selector-4" />
 +
  <label for="button-4" class="button-label-4"></label>
 +
 +
 
 +
  <label for="button-1" class="sp-arrow sp-a1"></label>
 +
  <label for="button-2" class="sp-arrow sp-a2"></label>
 +
  <label for="button-3" class="sp-arrow sp-a3"></label>
 +
  <label for="button-4" class="sp-arrow sp-a4"></label>
 +
 
 +
 
 +
    <div class="sp-content">
 +
    <div class="sp-parallax-bg"></div>
 +
    <ul class="sp-slider clearfix">
 +
<li>
 +
<div class="slides">
 +
<div class="four_columns">
 
<div id="pic_cloning">
 
<div id="pic_cloning">
−
<img style="border-top: 5px solid black; border-bottom: 5px solid black" src="https://static.igem.org/mediawiki/2015/4/47/DNA.png" alt="DNA and Cloning" width="900px" height="300px">
+
<img src="https://static.igem.org/mediawiki/2015/4/47/DNA.png" alt="DNA and Cloning" width="900px" height="100px">
 
</div>
 
</div>
 
<div class="wrapper">
 
<div class="wrapper">
Line 207: Line 352:
 
<li>
 
<li>
 
<h2>Sigma-Aldrich Miniprep</h2>
 
<h2>Sigma-Aldrich Miniprep</h2>
 +
</li>
 
<li>
 
<li>
 
<h2>Phusion PCR</h2>
 
<h2>Phusion PCR</h2>
Line 221: Line 367:
 
</ul>
 
</ul>
 
</div>
 
</div>
−
<div class="cloning_left">
+
<div class="cloning_right">
 
<ul>
 
<ul>
 
<li>
 
<li>
Line 236: Line 382:
 
<ol><a href="https://static.igem.org/mediawiki/2015/b/bf/Technion_Israel_2015_Colony_PCR_for_B.Subtilis_.pdf"><h3><i>B. Subtilis</i></h3></a>
 
<ol><a href="https://static.igem.org/mediawiki/2015/b/bf/Technion_Israel_2015_Colony_PCR_for_B.Subtilis_.pdf"><h3><i>B. Subtilis</i></h3></a>
 
</ol>
 
</ol>
 +
</li>
 
<li>
 
<li>
 
<h2>Preparing Competent <i>E.coli</i></h2>
 
<h2>Preparing Competent <i>E.coli</i></h2>
Line 249: Line 396:
 
</div>
 
</div>
 
</div>
 
</div>
−
<div class="four_columns" id="Proof">
+
</div>
 +
</li>
 +
<li>
 +
<div class="slides">
 +
<div class="four_columns">
 
<div id="pic_proof">
 
<div id="pic_proof">
−
<img style="border-top: 5px solid black; border-bottom: 5px solid black" src="https://static.igem.org/mediawiki/2015/6/66/Technion_Israel_2015_Protocols_Proof.jpg" alt="Proof of Concept" width="900px" height="300px">
+
<img style="border-top: 5px solid black; border-bottom: 5px solid black" src="https://static.igem.org/mediawiki/2015/6/66/Technion_Israel_2015_Protocols_Proof.jpg" alt="Proof of Concept" width="800px" height="100px">
 
</div>
 
</div>
−
<div class="wrapper_proof">
+
<div class="wrapper">
 
<div class="cloning_left">
 
<div class="cloning_left">
 
<ul>
 
<ul>
−
<li><a href="https://static.igem.org/mediawiki/2015/4/4b/Technion_Israel_2015_LysisMethodComparison.pdf" target="_blank"><h2>Comparison of Lysis Procedures</h2></a>
+
<li><a href="https://static.igem.org/mediawiki/2015/4/4b/Technion_Israel_2015_LysisMethodComparison.pdf" target="_blank"><h2>Comparison of Lysis Procedures</h2></a>
−
</li>
+
</li><li><a href="https://static.igem.org/mediawiki/2015/e/e2/Technion_Israel_2015_protocols_B.subtilis-mCherry-secretion.pdf" target="_blank"><h2>Bacillus Secretion Verification</h2></a></li>
−
</ul>
+
</div>
−
</div>
+
</div>
−
</div>
+
</div>
−
</div>
+
</div>
−
 
+
</li>
−
<div class="four_columns" id="comb">
+
<li>
−
<div id="pic_comb">
+
<div class="slides">
−
<img style="border-top: 5px solid black; border-bottom: 5px solid black" src="https://static.igem.org/mediawiki/2015/7/70/Technion_iGEM_2015_Comb.jpg" alt="Comb" width="900px" height="300px">
+
−
</div>
+
−
</div>
+
−
<div class="four_columns" id="misc">
+
 
<div id="pic_misc">
 
<div id="pic_misc">
−
<img style="border-top: 5px solid black; border-bottom: 5px solid black" src="https://static.igem.org/mediawiki/2015/7/7c/Technion_Israel_2015_Protocols_Misc.jpg" alt="Miscellaneous" width="900px" height="300px"></a>
+
<img style="border-top: 5px solid black; border-bottom: 5px solid black" src="https://static.igem.org/mediawiki/2015/7/7c/Technion_Israel_2015_Protocols_Misc.jpg" alt="Miscellaneous" width="900px" height="100px"></a>
 
</div>
 
</div>
−
<div class="wrapper_misc">
 
 
<div class="cloning_left">
 
<div class="cloning_left">
 
<ul>
 
<ul>
Line 279: Line 425:
 
</div>
 
</div>
 
</div>
 
</div>
−
</div>
+
</li>
−
</div>
+
<li>
 +
<div class="slides">
 +
<div id="slide4-text-top">
 +
<h1><b>Prototype #4</b></h1>
 +
<h4><i>The final prototype for the iGEM 2015 competition</i></h4>
 +
<p>The final model has a unique, aesthetic design.  It can be easily adjusted to fit any hand size.</p>
 +
</div>
 +
</div>
 +
</li>
 +
    </ul>
 +
  </div><!-- sp-content -->
 +
   
 +
 
 +
</div> <!-- sp-slideshow -->
 +
<!-------end of slider------->
 
</div>
 
</div>
−
</body>
 
 
<footer>
 
<footer>
 
<div class="team_name">
 
<div class="team_name">
Line 298: Line 457:
 
</nav>
 
</nav>
 
</footer>
 
</footer>
 +
</div>
 +
</body>
 
</html>
 
</html>

Revision as of 06:36, 11 September 2015

Team: Technion 2015

Home
Navigate
Design

Contact Us