Difference between revisions of "Team:Kent/Experiments"

(Prototype team page)
 
Line 1: Line 1:
−
{{Kent}}
 
 
<html>
 
<html>
 +
<head>
 +
<link href="https://fonts.googleapis.com/css?family=Exo+2:300" rel="stylesheet">
 +
<link rel="stylesheet" type="text/css" href="protocol_style.css">
 +
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
 +
<meta charset="utf-8">
 +
</head>
 +
<style>
 +
body {
 +
background-image: url('Backgrounds/Protocol_backgroud.png');
 +
    height: 100%;
 +
    background-position: center;
 +
    background-size: cover;
 +
font-family: 'Exo 2', sans-serif;
 +
    padding-bottom: 300px;
 +
}
  
−
<div class="column full_size">
+
*{
 +
padding: 0;
 +
  margin: 0;
 +
  }
  
−
<h1>Experiments</h1>
+
#navdiv{
−
<p>Describe the research, experiments, and protocols you used in your iGEM project. These should be detailed enough for another team to repeat your experiments.</p>
+
padding: 50px;
 +
  text-align: center;
 +
}
  
−
<p>
+
#navdiv h1 img {
−
Please remember to put all characterization and measurement data for your parts on the corresponding Registry part pages.
+
width:80px;
−
</p>
+
}
 +
 +
#navdiv ul{
 +
  text-align: center;
 +
list-style: none;
 +
  padding: 0;
 +
  margin: 0;
 +
  display: inline-block;
 +
  background: #40494F;
 +
  border-radius: 5px;
  
−
</div>
+
}
  
−
<div class="column half_size">
+
#navdiv ul a{
−
<h5>What should this page contain?</h5>
+
text-decoration: none;
−
<ul>
+
color: white;
−
<li> Protocols </li>
+
}
−
<li> Experiments </li>
+
#navdiv ul li{
−
<li> Documentation of the development of your project </li>
+
float: left;
−
</ul>
+
  width: 150px;
 +
  height: 65px;
 +
  line-height: 65px;
 +
  position: relative;
 +
  text-transform: uppercase;
 +
  font-size: 14px;
 +
  color: rgba(0, 0, 0, 0.7);
 +
  cursor: pointer;
 +
}
  
−
</div>
+
#navdiv ul li:hover{
 +
background: #06B4D3;
 +
border-radius: 5px;
 +
transition:all 0.7s
 +
}
 +
#navdiv ul li:hover a{
 +
color: #142333;
 +
}
  
−
<div class="column half_size">
+
ul.drop-menu {
−
<h5>Inspiration</h5>
+
  position: absolute;
−
<ul>
+
  top: 100%;
−
<li><a href="https://2014.igem.org/Team:Colombia/Protocols">2014 Colombia </a></li>
+
  left: 0%;
−
<li><a href="https://2014.igem.org/Team:Imperial/Protocols">2014 Imperial </a></li>
+
  width: 100%;
−
<li><a href="https://2014.igem.org/Team:Caltech/Project/Experiments">2014 Caltech </a></li>
+
  padding: 0;
−
</ul>
+
}
−
</div>
+
ul.drop-menu li {
 +
  background: #666;
 +
  color: rgba(255, 255, 255, 0.7);
 +
}
 +
ul.drop-menu li:hover {
 +
  background: #606060;
 +
}
 +
ul.drop-menu li:last-child {
 +
  border-radius: 5px  5px 5px 5px;
 +
}
  
 +
ul.drop-menu li {
 +
  display: none;
 +
}
  
−
<div class="clear"></div>
 
  
 +
li:hover > ul.drop-menu{
 +
  perspective: 1000px;
  
−
<div class="column half_size">
+
}
  
 +
li:hover > ul.drop-menu li {
 +
  display: block;
 +
  text-align: center
 +
}
  
  
 +
#title p{
 +
text-align: center;
 +
font-size: 40px;
 +
 +
}
 +
 +
#accordion section{
 +
background: #434E52;
 +
margin-left: 100px;
 +
margin-right: 100px;
 +
margin-top: 20px;
 +
padding: 25px;
 +
float: center;
 +
    border-radius: 5px;
 +
}
 +
 +
#accordion section p{
 +
display: none;
 +
text-align: center;
 +
    color:whitesmoke;
 +
}
 +
 +
#accordion section a{
 +
 +
text-align: center;
 +
color:#08CB9B;
 +
text-decoration: none;
 +
}
 +
 +
#accordion section a:hover{
 +
text-shadow: 0 1px 0 #d84f4f, 0 2px 0 #d54646, 0 3px 0 #ce3333, 0 4px 0 #b92e2e, 0 5px 0 #912525, 0 6px 0 #721e1e, 0px 6px 5px rgba(0,0,0,0.5);
 +
    top: 4px;
 +
}
 +
 +
#accordion section:target p{
 +
display: block;
 +
}
 +
 +
#accordion section:target hr{
 +
display: block;
 +
}
 +
 +
 +
hr{
 +
    display:none;
 +
    margin: auto;
 +
    margin-top: 10px;
 +
    margin-bottom: 10px;
 +
    width: 40%;
 +
}
 +
 +
#foot ul{
 +
display: flex;
 +
position: fixed;
 +
top:95%;
 +
left:50%;
 +
transform: translate(-50%,-50%);
 +
}
 +
 +
#foot ul li{
 +
list-style: none;
 +
}
 +
 +
#foot ul li a{
 +
width:50px;
 +
height:50px;
 +
background: #455057;
 +
text-align:center;
 +
line-height:50px;
 +
font-size: 25px;
 +
margin: 0 15px;
 +
display: block;
 +
border-radius: 50%;
 +
position: relative;
 +
overflow:hidden;
 +
border: 4px solid #455057;
 +
z-index:1;
 +
}
 +
 +
#foot ul li a .fa{
 +
margin: 25%;
 +
position:relative;
 +
color:white;
 +
transition: 0.5s;
 +
}
 +
 +
#foot ul li a:hover .fa
 +
{
 +
color:#25343D;
 +
transform: rotateY(360deg);
 +
}
 +
 +
#foot ul li a:before
 +
{
 +
content:'';
 +
position: absolute;
 +
top:100%;
 +
left:0;
 +
width:100%;
 +
height:100%;
 +
background: #1AE195;
 +
transition: 0.5s;
 +
}
 +
 +
#foot ul li a:hover:before{
 +
top:0;
 +
}
 +
 +
#foot ul li:nth-child(1) a:before{
 +
background: #E10C2B;
 +
}
 +
#foot ul li:nth-child(2) a:before{
 +
background: #AA5EE7;
 +
}
 +
#foot ul li:nth-child(3) a:before{
 +
background: #09F99E;
 +
}
 +
#foot ul li:nth-child(4) a:before{
 +
background: #0367A6;
 +
}
 +
#foot ul li:nth-child(5) a:before{
 +
background: #299CE4;
 +
}
 +
#foot ul li:nth-child(6) a:before{
 +
background: #5BBBF7;
 +
}
 +
</style>
 +
<body>
 +
 +
<nav id="navdiv">
 +
<ul>
 +
<li><a href="#">Project</a>
 +
<ul class="drop-menu menu-1">
 +
        <li>uno</li>
 +
        <li>dos</li>
 +
        <li>tres</li>
 +
        <li>cuatro</li>
 +
        <li>cinco</li>
 +
        <li>seis</li>
 +
      </ul>
 +
<li><a href="#">Parts</a>
 +
<ul class="drop-menu menu-2">
 +
        <li>uno</li>
 +
        <li>dos</li>
 +
        <li>tres</li>
 +
        <li>cuatro</li>
 +
        <li>cinco</li>
 +
        <li>seis</li>
 +
      </ul>
 +
      </li>
 +
<li><a href="#">Notebook</a>
 +
<ul class="drop-menu menu-2">
 +
        <li>uno</li>
 +
        <li>dos</li>
 +
        <li>tres</li>
 +
        <li>cuatro</li>
 +
        <li>cinco</li>
 +
        <li>seis</li>
 +
      </ul>
 +
      </li>
 +
<li><a href="#"><h1><img src="logo1.png"></h1></a></li>
 +
<li><a href="#">Safety</a>
 +
<ul class="drop-menu menu-2">
 +
        <li>uno</li>
 +
        <li>dos</li>
 +
        <li>tres</li>
 +
        <li>cuatro</li>
 +
        <li>cinco</li>
 +
        <li>seis</li>
 +
      </ul>
 +
      </li>
 +
<li><a href="#">Team</a><ul class="drop-menu menu-2">
 +
        <li>uno</li>
 +
        <li>dos</li>
 +
        <li>tres</li>
 +
        <li>cuatro</li>
 +
        <li>cinco</li>
 +
        <li>seis</li>
 +
      </ul>
 +
      </li>
 +
<li><a href="#">Human Practices</a><ul class="drop-menu menu-2">
 +
        <li>uno</li>
 +
        <li>dos</li>
 +
        <li>tres</li>
 +
        <li>cuatro</li>
 +
        <li>cinco</li>
 +
        <li>seis</li>
 +
      </ul>
 +
      </li>
 +
</ul>
 +
</nav>
 +
 +
<div id ="title">
 +
<p>
 +
Experiments and protocols
 +
</p>
 
</div>
 
</div>
  
 +
<main id="accordion">
 +
<section id="item1">
 +
<a href="#item1"><h1>Protocol 1</h1></a>
 +
    <hr>
 +
<p>
 +
   
 +
Lorem ipsum dolor sit amet, pro at veri mentitum invenire, ad agam iusto affert sea, ei ocurreret interpretaris vix. His sumo soleat liberavisse te, in cum dicat nulla fuisset. Ne dicunt mediocritatem eum, quis verear ne mel, ad vel nemore aperiam minimum. An alii minim sit, disputando reformidans vix ne. Clita meliore referrentur ut quo.
 +
Nec aliquip eligendi consectetuer ne, ei sit ornatus verterem. Pri eu delenit debitis vocibus, ferri clita noster pro in, vix doctus discere intellegebat at. Vel an congue persecuti, eos magna soluta referrentur te. Eam esse aliquip appellantur te, vitae equidem adversarium at eum.
 +
Lorem ipsum dolor sit amet, pro at veri mentitum invenire, ad agam iusto affert sea, ei ocurreret interpretaris vix. His sumo soleat liberavisse te, in cum dicat nulla fuisset. Ne dicunt mediocritatem eum, quis verear ne mel, ad vel nemore aperiam minimum. An alii minim sit, disputando reformidans vix ne. Clita meliore referrentur ut quo.
 +
Nec aliquip eligendi consectetuer ne, ei sit ornatus verterem. Pri eu delenit debitis vocibus, ferri clita noster pro in, vix doctus discere intellegebat at. Vel an congue persecuti, eos magna soluta referrentur te. Eam esse aliquip appellantur te, vitae equidem adversarium at eum.
 +
Lorem ipsum dolor sit amet, pro at veri mentitum invenire, ad agam iusto affert sea, ei ocurreret interpretaris vix. His sumo soleat liberavisse te, in cum dicat nulla fuisset. Ne dicunt mediocritatem eum, quis verear ne mel, ad vel nemore aperiam minimum. An alii minim sit, disputando reformidans vix ne. Clita meliore referrentur ut quo.
 +
Nec aliquip eligendi consectetuer ne, ei sit ornatus verterem. Pri eu delenit debitis vocibus, ferri clita noster pro in, vix doctus discere intellegebat at. Vel an congue persecuti, eos magna soluta referrentur te. Eam esse aliquip appellantur te, vitae equidem adversarium at eum.
 +
Lorem ipsum dolor sit amet, pro at veri mentitum invenire, ad agam iusto affert sea, ei ocurreret interpretaris vix. His sumo soleat liberavisse te, in cum dicat nulla fuisset. Ne dicunt mediocritatem eum, quis verear ne mel, ad vel nemore aperiam minimum. An alii minim sit, disputando reformidans vix ne. Clita meliore referrentur ut quo.
 +
Nec aliquip eligendi consectetuer ne, ei sit ornatus verterem. Pri eu delenit debitis vocibus, ferri clita noster pro in, vix doctus discere intellegebat at. Vel an congue persecuti, eos magna soluta referrentur te. Eam esse aliquip appellantur te, vitae equidem adversarium at eum.
 +
</p>
 +
</section>
 +
<section id="item2">
 +
<a href="#item2"><h1>Protocol 2</h1></a>
 +
    <hr>
 +
<p>
 +
Lorem ipsum dolor sit amet, pro at veri mentitum invenire, ad agam iusto affert sea, ei ocurreret interpretaris vix. His sumo soleat liberavisse te, in cum dicat nulla fuisset. Ne dicunt mediocritatem eum, quis verear ne mel, ad vel nemore aperiam minimum. An alii minim sit, disputando reformidans vix ne. Clita meliore referrentur ut quo.
 +
Nec aliquip eligendi consectetuer ne, ei sit ornatus verterem. Pri eu delenit debitis vocibus, ferri clita noster pro in, vix doctus discere intellegebat at. Vel an congue persecuti, eos magna soluta referrentur te. Eam esse aliquip appellantur te, vitae equidem adversarium at eum.
 +
</p>
 +
</section>
 +
<section id="item3">
 +
<a href="#item3"><h1>Protocol 3</h1></a>
 +
    <hr>
 +
<p>
 +
Lorem ipsum dolor sit amet, pro at veri mentitum invenire, ad agam iusto affert sea, ei ocurreret interpretaris vix. His sumo soleat liberavisse te, in cum dicat nulla fuisset. Ne dicunt mediocritatem eum, quis verear ne mel, ad vel nemore aperiam minimum. An alii minim sit, disputando reformidans vix ne. Clita meliore referrentur ut quo.
 +
Nec aliquip eligendi consectetuer ne, ei sit ornatus verterem. Pri eu delenit debitis vocibus, ferri clita noster pro in, vix doctus discere intellegebat at. Vel an congue persecuti, eos magna soluta referrentur te. Eam esse aliquip appellantur te, vitae equidem adversarium at eum.
 +
</p>
 +
</section>
 +
<section id="item4">
 +
<a href="#item4"><h1>Protocol 4</h1></a>
 +
    <hr>
 +
<p>
 +
Lorem ipsum dolor sit amet, pro at veri mentitum invenire, ad agam iusto affert sea, ei ocurreret interpretaris vix. His sumo soleat liberavisse te, in cum dicat nulla fuisset. Ne dicunt mediocritatem eum, quis verear ne mel, ad vel nemore aperiam minimum. An alii minim sit, disputando reformidans vix ne. Clita meliore referrentur ut quo.
 +
Nec aliquip eligendi consectetuer ne, ei sit ornatus verterem. Pri eu delenit debitis vocibus, ferri clita noster pro in, vix doctus discere intellegebat at. Vel an congue persecuti, eos magna soluta referrentur te. Eam esse aliquip appellantur te, vitae equidem adversarium at eum.
 +
</p>
 +
</section>
 +
</main>
 +
   
 +
    <footer>
 +
<div id="foot">
 +
<ul>
 +
<li><a href="https://www.youtube.com/channel/UCV4kIcIodwiGjgEX_Rad1Ig"><i class="fa fa-youtube" aria-hidden="true"></i></a></li>
 +
<li><a href="https://www.instagram.com/igem_kent2017/?hl=en"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
 +
<li><a href="#"><i class="fa fa-envelope" aria-hidden="true"></i></a></li>
 +
<li><a href="https://www.facebook.com/iGEMkent2017/"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
 +
<li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
 +
<li><a href="https://twitter.com/igemkent?lang=en"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
 +
</ul>
 +
</div>
 +
</footer>
 +
</body>
 
</html>
 
</html>

Revision as of 17:29, 27 July 2017

Experiments and protocols

Protocol 1

Lorem ipsum dolor sit amet, pro at veri mentitum invenire, ad agam iusto affert sea, ei ocurreret interpretaris vix. His sumo soleat liberavisse te, in cum dicat nulla fuisset. Ne dicunt mediocritatem eum, quis verear ne mel, ad vel nemore aperiam minimum. An alii minim sit, disputando reformidans vix ne. Clita meliore referrentur ut quo. Nec aliquip eligendi consectetuer ne, ei sit ornatus verterem. Pri eu delenit debitis vocibus, ferri clita noster pro in, vix doctus discere intellegebat at. Vel an congue persecuti, eos magna soluta referrentur te. Eam esse aliquip appellantur te, vitae equidem adversarium at eum. Lorem ipsum dolor sit amet, pro at veri mentitum invenire, ad agam iusto affert sea, ei ocurreret interpretaris vix. His sumo soleat liberavisse te, in cum dicat nulla fuisset. Ne dicunt mediocritatem eum, quis verear ne mel, ad vel nemore aperiam minimum. An alii minim sit, disputando reformidans vix ne. Clita meliore referrentur ut quo. Nec aliquip eligendi consectetuer ne, ei sit ornatus verterem. Pri eu delenit debitis vocibus, ferri clita noster pro in, vix doctus discere intellegebat at. Vel an congue persecuti, eos magna soluta referrentur te. Eam esse aliquip appellantur te, vitae equidem adversarium at eum. Lorem ipsum dolor sit amet, pro at veri mentitum invenire, ad agam iusto affert sea, ei ocurreret interpretaris vix. His sumo soleat liberavisse te, in cum dicat nulla fuisset. Ne dicunt mediocritatem eum, quis verear ne mel, ad vel nemore aperiam minimum. An alii minim sit, disputando reformidans vix ne. Clita meliore referrentur ut quo. Nec aliquip eligendi consectetuer ne, ei sit ornatus verterem. Pri eu delenit debitis vocibus, ferri clita noster pro in, vix doctus discere intellegebat at. Vel an congue persecuti, eos magna soluta referrentur te. Eam esse aliquip appellantur te, vitae equidem adversarium at eum. Lorem ipsum dolor sit amet, pro at veri mentitum invenire, ad agam iusto affert sea, ei ocurreret interpretaris vix. His sumo soleat liberavisse te, in cum dicat nulla fuisset. Ne dicunt mediocritatem eum, quis verear ne mel, ad vel nemore aperiam minimum. An alii minim sit, disputando reformidans vix ne. Clita meliore referrentur ut quo. Nec aliquip eligendi consectetuer ne, ei sit ornatus verterem. Pri eu delenit debitis vocibus, ferri clita noster pro in, vix doctus discere intellegebat at. Vel an congue persecuti, eos magna soluta referrentur te. Eam esse aliquip appellantur te, vitae equidem adversarium at eum.

Protocol 2

Lorem ipsum dolor sit amet, pro at veri mentitum invenire, ad agam iusto affert sea, ei ocurreret interpretaris vix. His sumo soleat liberavisse te, in cum dicat nulla fuisset. Ne dicunt mediocritatem eum, quis verear ne mel, ad vel nemore aperiam minimum. An alii minim sit, disputando reformidans vix ne. Clita meliore referrentur ut quo. Nec aliquip eligendi consectetuer ne, ei sit ornatus verterem. Pri eu delenit debitis vocibus, ferri clita noster pro in, vix doctus discere intellegebat at. Vel an congue persecuti, eos magna soluta referrentur te. Eam esse aliquip appellantur te, vitae equidem adversarium at eum.

Protocol 3

Lorem ipsum dolor sit amet, pro at veri mentitum invenire, ad agam iusto affert sea, ei ocurreret interpretaris vix. His sumo soleat liberavisse te, in cum dicat nulla fuisset. Ne dicunt mediocritatem eum, quis verear ne mel, ad vel nemore aperiam minimum. An alii minim sit, disputando reformidans vix ne. Clita meliore referrentur ut quo. Nec aliquip eligendi consectetuer ne, ei sit ornatus verterem. Pri eu delenit debitis vocibus, ferri clita noster pro in, vix doctus discere intellegebat at. Vel an congue persecuti, eos magna soluta referrentur te. Eam esse aliquip appellantur te, vitae equidem adversarium at eum.

Protocol 4

Lorem ipsum dolor sit amet, pro at veri mentitum invenire, ad agam iusto affert sea, ei ocurreret interpretaris vix. His sumo soleat liberavisse te, in cum dicat nulla fuisset. Ne dicunt mediocritatem eum, quis verear ne mel, ad vel nemore aperiam minimum. An alii minim sit, disputando reformidans vix ne. Clita meliore referrentur ut quo. Nec aliquip eligendi consectetuer ne, ei sit ornatus verterem. Pri eu delenit debitis vocibus, ferri clita noster pro in, vix doctus discere intellegebat at. Vel an congue persecuti, eos magna soluta referrentur te. Eam esse aliquip appellantur te, vitae equidem adversarium at eum.