Difference between revisions of "Team:Imperial College/Results"

(Prototype team page)
 
Line 1: Line 1:
−
{{Imperial_College}}
+
{{:Team:Imperial_College/Templates/NavBar}}
 +
 
 +
 
 
<html>
 
<html>
 +
<head>
 +
<style>
  
 +
#expt1, #expt2, #expt3, #expt4, #expt5, #expt6 #expt7 {
 +
    width:100%;
 +
    height:5px;
  
−
<div class="column full_size">
+
}
−
<h1>Results</h1>
+
−
<p>Here you can describe the results of your project and your future plans. </p>
+
−
</div>
+
  
 +
.contents ul{
 +
    width:40%;
 +
    margin-top:5%;
 +
    float:left;
 +
    box-sizing: border-box;
 +
    margin-left:6.666%;
 +
    list-style-type: none;
 +
    background:none;
 +
}
  
−
<div class="column third_size" >
+
.contents ul li{
 +
    width: 100%;
 +
    margin-bottom:5%;
 +
    cursor: pointer;
 +
    border-radius:20px;
 +
    background:none;
 +
    transition: border 0.3s ease;
 +
    box-sizing:border-box;
 +
}
  
−
<h3>What should this page contain?</h3>
+
.contents ul li a{
−
<ul>
+
    padding-top: 5px;
−
<li> Clearly and objectively describe the results of your work.</li>
+
    padding-bottom: 0px;
−
<li> Future plans for the project. </li>
+
    margin-top: 10px;
−
<li> Considerations for replicating the experiments. </li>
+
    margin-left: 0px;
−
</ul>
+
    text-decoration: none;
−
</div>
+
    font-size: 30px;
 +
    font-family: 'Varela Round', sans-serif;
 +
    color: #374785;
 +
    border:none;
 +
    background:none;
 +
 
 +
}
  
 +
.contents ul li a:hover{
 +
    font-weight:bold;
 +
}
  
  
  
−
<div class="column two_thirds_size" >
+
.allButton {
−
<h3>Describe what your results mean </h3>
+
    font-size: 30px;
−
<ul>
+
    color: #374785;
−
<li> Interpretation of the results obtained during your project. Don't just show a plot/figure/graph/other, tell us what you think the data means. This is an important part of your project that the judges will look for. </li>
+
    font-family: "Varela Round", sans-serif;
−
<li> Show data, but remember all measurement and characterization data must be on part pages in the Registry. </li>
+
    font-weight:normal;
−
<li> Consider including an analysis summary section to discuss what your results mean. Judges like to read what you think your data means, beyond all the data you have acquired during your project. </li>
+
    background-color:none;
−
</ul>
+
   
−
</div>
+
}
  
 +
.open{
 +
    float:right;
 +
    width:auto;
 +
    box-sizing: border-box;
 +
    margin-top:20px;
 +
    margin-right:10%;
 +
    font-size:30px;
 +
    font-family:"Varela Round", sans-serif;
 +
    color:#374785;
 +
}
  
−
<div class="clear extra_space"></div>
+
.expandButton:hover {
 +
    cursor:pointer;
 +
    background-color:red;
 +
    color:#F76C6C;
 +
}
  
  
 +
.accordion {
 +
    float: left;
 +
    padding-top: 5px;
 +
    margin-bottom:5px;
 +
    margin-left:10%;
 +
    cursor: pointer;
 +
    text-align:left;
 +
    margin-left:20%;
 +
    border:none;
 +
    transition: border-bottom 0.1s linear;
 +
    font-size: 25px;
 +
    font-weight:bold;
 +
    line-height: 50px;
 +
    font-family:"Varela Round", sans-serif;
 +
    color:#374785;
 +
}
  
−
<div class="column two_thirds_size" >
 
−
<h3> Project Achievements </h3>
 
  
−
<p>You can also include a list of bullet points (and links) of the successes and failures you have had over your summer. It is a quick reference page for the judges to see what you achieved during your summer.</p>
+
.accordion:hover {
 +
    border-bottom: solid #F8E9A1 3px;
 +
}
  
−
<ul>
 
−
<li>A list of linked bullet points of the successful results during your project</li>
 
−
<li>A list of linked bullet points of the unsuccessful results during your project. This is about being scientifically honest. If you worked on an area for a long time with no success, tell us so we know where you put your effort.</li>
 
−
</ul>
 
  
−
</div>
 
  
 +
.description {
 +
    margin-bottom:5px;
 +
    width: 70%;
 +
    margin-left:23%;
 +
    float:left;
 +
    border:none;
 +
    max-height: auto;
 +
}
  
 +
.colorChange{
 +
    transition: color 0.5s ease;
 +
}
  
−
<div class="column third_size" >
+
.slowRotate{
−
<div class="highlight decoration_A_full">
+
    transition: transform 0.3s linear;
−
<h3>Inspiration</h3>
+
}
−
<p>See how other teams presented their results.</p>
+
−
<ul>
+
−
<li><a href="https://2014.igem.org/Team:TU_Darmstadt/Results/Pathway">2014 TU Darmstadt </a></li>
+
−
<li><a href="https://2014.igem.org/Team:Imperial/Results">2014 Imperial </a></li>
+
−
<li><a href="https://2014.igem.org/Team:Paris_Bettencourt/Results">2014 Paris Bettencourt </a></li>
+
−
</ul>
+
−
</div>
+
−
</div>
+
  
 +
.highlight{
 +
    color:#374785;
 +
    font-weight:bold;
 +
    text-decoration:none;
 +
}
  
 +
.figure{
 +
    width: 30%;
 +
    margin-top:5px;
 +
    margin-left:35%;
 +
    box-sizing: border-box;
 +
}
  
 +
</style>
  
 +
</head>
  
 +
<body>
 +
<div class="container">         
 +
        <div class="content">
 +
 +
            <div class="titleimg">
 +
                    <h1>Experiments</h1>
 +
                    <br/>
 +
                    <br/>
 +
            <img src="https://static.igem.org/mediawiki/2018/7/71/T--Imperial_College--experiment.png" alt="" width="28%"; >
 +
            </div>
 +
               
 +
 +
                <h3>Building Constructs</h3>
 +
 +
         
 +
                <!--Start Experiment 1-->
 +
                <div id="expt1"></div>
 +
                <h4 > ON-OFF System Construct Assembly</h4>
 +
                <div onclick="openAll('expt1p');" class="expandButton">
 +
                        <p class="open expt1p colorChange" style="font-size:25px;padding-top:1px;" >Access All</p>
 +
                    <div class="open" style="margin-right:5px;">
 +
                        <i  class="fas fa-arrow-circle-down expt1p slowRotate"></i>
 +
                    </div>
 +
                </div>
 +
     
 +
                <div class="clr"></div>
 +
   
 +
                <div type="button" class="accordion"> Description </div>
 +
                <div class="description">
 +
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                </div>
 +
           
 +
                <div type="button" class="accordion">Relevance</div>
 +
                <div class="panel expt1p">
 +
                    <p >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                </div>
 +
 +
                <div type="button" class="accordion">Results</div>
 +
                <div class="panel expt1p">
 +
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.
 +
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. <a href="#" class="highlight">Competant cell protocol</a> Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                        <p>Lorem ipsum dolor, sit amet <a href="#" class="highlight">Heatshock protocol</a> consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>               
 +
                </div>
 +
               
 +
               
 +
                   
 +
                <div type="button" class="accordion" >Summary</div>
 +
                <div class="panel expt1p">
 +
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                </div>
 +
                <div class="clr"></div>
 +
            <!--End Experiment-->
 +
 +
       
 +
                <!--Start Experiment 2-->
 +
                <div id="expt2">
 +
                <h4>ON-OFF System on Agar</h4>
 +
                <div onclick="openAll('expt2p');" class="expandButton">
 +
                    <p class="open expt2p colorChange" style="font-size:25px;padding-top:1px;" >Access All</p>
 +
                    <div class="open" style="margin-right:5px;">
 +
                        <i  class="fas fa-arrow-circle-down expt2p slowRotate"></i>
 +
                    </div>
 +
                </div>
 +
                </div>
 +
                <div class="clr"></div>
 +
               
 +
                <div type="button" class="accordion"> Description </div>
 +
                <div class="description">
 +
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                </div>
 +
           
 +
                <div type="button" class="accordion">Relevance</div>
 +
                <div class="panel expt2p">
 +
                    <p >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                </div>
 +
 +
                <div type="button" class="accordion">Results</div>
 +
                <div class="panel expt2p">
 +
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.
 +
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. <a href="#" class="highlight">Competant cell protocol</a> Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                        <p>Lorem ipsum dolor, sit amet <a href="#" class="highlight">Heatshock protocol</a> consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>               
 +
                </div>
 +
               
 +
                  <div type="button" class="accordion" >Summary</div>
 +
                <div class="panel expt2p">
 +
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                </div>
 +
                <div class="clr"></div>
 +
            <!--End Experiment-->
 +
         
 +
   
 +
         
 +
                <!--Start Experiment 3-->
 +
                <div id="expt3"></div>
 +
                <h4 > Electronic Stimulation</h4>
 +
                <div onclick="openAll('expt3p');" class="expandButton">
 +
                    <p class="open expt3p colorChange" style="font-size:25px;padding-top:1px;" >Access All</p>
 +
                    <div class="open" style="margin-right:5px;">
 +
                        <i  class="fas fa-arrow-circle-down expt3p slowRotate"></i>
 +
                    </div>
 +
                </div>
 +
               
 +
                <div class="clr"></div>
 +
               
 +
                <div type="button" class="accordion"> Description </div>
 +
                <div class="description">
 +
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                </div>
 +
           
 +
                <div type="button" class="accordion">Relevance</div>
 +
                <div class="panel expt3p">
 +
                    <p >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                </div>
 +
 +
                <div type="button" class="accordion">Results</div>
 +
                <div class="panel expt3p">
 +
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.
 +
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. <a href="#" class="highlight">Competant cell protocol</a> Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                        <p>Lorem ipsum dolor, sit amet <a href="#" class="highlight">Heatshock protocol</a> consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>               
 +
                </div>
 +
               
 +
                   
 +
                <div type="button" class="accordion" >Summary</div>
 +
                <div class="panel expt3p">
 +
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                </div>
 +
                <div class="clr"></div>
 +
            <!--End Experiment-->
 +
 +
 +
 +
                <!--Start Experiment 4-->
 +
                <div id="expt4"></div>
 +
                <h4 > </h4>
 +
                <div onclick="openAll('expt4p');" class="expandButton">
 +
                    <p class="open expt4p colorChange" style="font-size:25px;padding-top:1px;" >Access All</p>
 +
                    <div class="open" style="margin-right:5px;">
 +
                        <i  class="fas fa-arrow-circle-down expt4p slowRotate"></i>
 +
                    </div>
 +
                </div>
 +
               
 +
                <div class="clr"></div>
 +
               
 +
                <div type="button" class="accordion"> Description </div>
 +
                <div class="description">
 +
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                </div>
 +
           
 +
                <div type="button" class="accordion">Relevance</div>
 +
                <div class="panel expt4p">
 +
                    <p >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                </div>
 +
 +
                <div type="button" class="accordion">Results</div>
 +
                <div class="panel expt4p">
 +
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.
 +
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. <a href="#" class="highlight">Competant cell protocol</a> Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                        <p>Lorem ipsum dolor, sit amet <a href="#" class="highlight">Heatshock protocol</a> consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>               
 +
                </div>
 +
               
 +
               
 +
                <div type="button" class="accordion" >Summary</div>
 +
                <div class="panel expt4p">
 +
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                </div>
 +
                <div class="clr"></div>
 +
            <!--End Experiment-->
 +
 +
 +
                <!--Start Experiment 5-->
 +
                <div id="expt5"></div>
 +
                <h4> </h4>
 +
                <div onclick="openAll('expt5p');" class="expandButton">
 +
                    <p class="open expt5p colorChange" style="font-size:25px;padding-top:1px;" >Access All</p>
 +
                    <div class="open" style="margin-right:5px;">
 +
                        <i  class="fas fa-arrow-circle-down expt5p slowRotate"></i>
 +
                    </div>
 +
                </div>
 +
               
 +
                <div class="clr"></div>
 +
               
 +
                <div type="button" class="accordion"> Description </div>
 +
                <div class="description">
 +
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                </div>
 +
           
 +
                <div type="button" class="accordion">Relevance</div>
 +
                <div class="panel expt5p">
 +
                    <p >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                </div>
 +
 +
                <div type="button" class="accordion">Results</div>
 +
                <div class="panel expt5p">
 +
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.
 +
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. <a href="#" class="highlight">Competant cell protocol</a> Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                        <p>Lorem ipsum dolor, sit amet <a href="#" class="highlight">Heatshock protocol</a> consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>               
 +
                </div>
 +
           
 +
                   
 +
                <div type="button" class="accordion" >Summary</div>
 +
                <div class="panel expt5p">
 +
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                </div>
 +
                <div class="clr"></div>
 +
            <!--End Experiment-->
 +
 +
           
 +
 +
                <!--Start Experiment 6-->
 +
                <div id="expt6"></div>
 +
                <h4 ></h4>
 +
                <div onclick="openAll('expt6p');" class="expandButton">
 +
                    <p class="open expt5p colorChange" style="font-size:25px;padding-top:1px;" >Access All</p>
 +
                    <div class="open" style="margin-right:5px;">
 +
                        <i  class="fas fa-arrow-circle-down expt6p slowRotate"></i>
 +
                    </div>
 +
                </div>
 +
               
 +
                <div class="clr"></div>
 +
               
 +
                <div type="button" class="accordion"> Description </div>
 +
                <div class="description">
 +
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                </div>
 +
           
 +
                <div type="button" class="accordion">Relevance</div>
 +
                <div class="panel expt6p">
 +
                    <p >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                </div>
 +
 +
                <div type="button" class="accordion">Results</div>
 +
                <div class="panel expt6p">
 +
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.
 +
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. <a href="#" class="highlight">Competant cell protocol</a> Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                        <p>Lorem ipsum dolor, sit amet <a href="#" class="highlight">Heatshock protocol</a> consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>               
 +
                </div>
 +
               
 +
                   
 +
                <div type="button" class="accordion" >Summary</div>
 +
                <div class="panel expt6p">
 +
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                </div>
 +
                <div class="clr"></div>
 +
            <!--End Experiment-->
 +
 +
               
 +
 +
                <!--Start Experiment 7-->
 +
                <div id="expt7"></div>
 +
                <h4 > </h4>
 +
                <div onclick="openAll('expt7p');" class="expandButton">
 +
                    <p class="open expt7p colorChange" style="font-size:25px;padding-top:1px;" >Access All</p>
 +
                    <div class="open" style="margin-right:5px;">
 +
                        <i  class="fas fa-arrow-circle-down expt7p slowRotate"></i>
 +
                    </div>
 +
                </div>
 +
               
 +
                <div class="clr"></div>
 +
               
 +
                <div type="button" class="accordion"> Description </div>
 +
                <div class="description">
 +
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                </div>
 +
           
 +
                <div type="button" class="accordion">Relevance</div>
 +
                <div class="panel expt7p">
 +
                    <p >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                </div>
 +
 +
                <div type="button" class="accordion">Results</div>
 +
                <div class="panel expt7p">
 +
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.
 +
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. <a href="#" class="highlight">Competant cell protocol</a> Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                        <p>Lorem ipsum dolor, sit amet <a href="#" class="highlight">Heatshock protocol</a> consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>               
 +
                </div>
 +
               
 +
               
 +
                <div type="button" class="accordion" >Summary</div>
 +
                <div class="panel expt7p">
 +
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                </div>
 +
                <div class="clr"></div>
 +
            <!--End Experiment-->
 +
 +
    <h3>Promoter Library Characterisation</h3>
 +
 +
                <!--Start Experiment 8-->
 +
                <div id="expt8"></div>
 +
                <h4 > BASIC</h4>
 +
                <div onclick="openAll('expt8p');" class="expandButton">
 +
                    <p class="open expt8p colorChange" style="font-size:25px;padding-top:1px;" >Access All</p>
 +
                    <div class="open" style="margin-right:5px;">
 +
                        <i  class="fas fa-arrow-circle-down expt8p slowRotate"></i>
 +
                    </div>
 +
                </div>
 +
               
 +
                <div class="clr"></div>
 +
               
 +
                <div type="button" class="accordion"> Description </div>
 +
                <div class="description">
 +
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                </div>
 +
           
 +
                <div type="button" class="accordion">Relevance</div>
 +
                <div class="panel expt8p">
 +
                    <p >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                </div>
 +
 +
                <div type="button" class="accordion">Results</div>
 +
                <div class="panel expt8p">
 +
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.
 +
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. <a href="#" class="highlight">Competant cell protocol</a> Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                        <p>Lorem ipsum dolor, sit amet <a href="#" class="highlight">Heatshock protocol</a> consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>               
 +
                </div>
 +
               
 +
             
 +
                   
 +
                <div type="button" class="accordion" >Summary</div>
 +
                <div class="panel expt8p">
 +
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                </div>
 +
                <div class="clr"></div>
 +
            <!--End Experiment-->
 +
   
 +
 +
                    <script>
 +
                        var acc = document.getElementsByClassName("accordion");
 +
                        var i;
 +
                        console.log(acc)
 +
                        for (i = 0; i < acc.length ; i++) {
 +
                            acc[i].addEventListener("click", function() {
 +
                                this.classList.toggle("active");
 +
                                var panell = this.nextElementSibling;
 +
                                if (panell.style.maxHeight) {
 +
                                    panell.style.maxHeight = null;
 +
                                } else {
 +
                                    panell.style.maxHeight = (panell.scrollHeight + "px"); 
 +
                                }
 +
                            });
 +
                        }
 +
               
 +
 +
               
 +
                        function openAll(expt) {
 +
                            console.log("click active")
 +
                            var i, panelList;
 +
                            panelList = document.getElementsByClassName(expt);
 +
                            console.log(panelList)
 +
                           
 +
                           
 +
                            for (i = 2; i < panelList.length; i++) {
 +
                                if (panelList[i].style.maxHeight == 0) {
 +
                                    console.log(panelList[i].style.maxHeight)
 +
                                    panelList[i].style.maxHeight = panelList[i].scrollHeight + "px"
 +
                                    console.log("open")
 +
                                    panelList[0].style.color = "#F76C6C";
 +
                                    panelList[1].style.color = "#F76C6C";
 +
                                    panelList[1].style.transform = "rotate(180deg)"
 +
               
 +
                                } else {
 +
                                    console.log(panelList[i].style.maxHeight)
 +
                                    panelList[i].style.maxHeight = null ;
 +
                                    console.log("close");
 +
                                    panelList[0].style.color = "#374785";
 +
                                    panelList[1].style.color = "#374785";
 +
                                    panelList[1].style.transform = "rotate(0deg)";
 +
                                }
 +
                            }
 +
                           
 +
                        } 
 +
                   
 +
                    </script>
 +
 +
 +
 
 +
        </div>
 +
    </div>
 +
   
 +
</body>
 
</html>
 
</html>
 +
 +
 +
{{:Team:Imperial_College/Templates/Footer}}

Revision as of 21:32, 1 October 2018


Experiments



Building Constructs

ON-OFF System Construct Assembly

Access All

Description

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Relevance

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Results

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Competant cell protocol Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Lorem ipsum dolor, sit amet Heatshock protocol consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Summary

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

ON-OFF System on Agar

Access All

Description

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Relevance

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Results

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Competant cell protocol Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Lorem ipsum dolor, sit amet Heatshock protocol consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Summary

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Electronic Stimulation

Access All

Description

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Relevance

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Results

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Competant cell protocol Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Lorem ipsum dolor, sit amet Heatshock protocol consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Summary

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Access All

Description

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Relevance

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Results

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Competant cell protocol Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Lorem ipsum dolor, sit amet Heatshock protocol consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Summary

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Access All

Description

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Relevance

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Results

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Competant cell protocol Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Lorem ipsum dolor, sit amet Heatshock protocol consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Summary

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Access All

Description

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Relevance

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Results

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Competant cell protocol Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Lorem ipsum dolor, sit amet Heatshock protocol consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Summary

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Access All

Description

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Relevance

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Results

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Competant cell protocol Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Lorem ipsum dolor, sit amet Heatshock protocol consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Summary

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Promoter Library Characterisation

BASIC

Access All

Description

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Relevance

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Results

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Competant cell protocol Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Lorem ipsum dolor, sit amet Heatshock protocol consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Summary

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.