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

(Prototype team page)
 
Line 1: Line 1:
−
{{Imperial_College}}
+
{{:Team:Imperial_College/Templates/NavBar}}
 +
 
 
<html>
 
<html>
 +
<style>
 +
h1{
 +
    margin: auto;
 +
    padding: 20px;
 +
    margin-top: 12%;
 +
    font-size: 85px;
 +
    background-color:none;
 +
    text-align: center;
 +
    font-weight: normal;
 +
    font-family: 'Varela Round', sans-serif;
 +
    color:#24305E;
 +
}
 +
h2{
 +
  text-align: center;
 +
    font-size: 42px;
 +
    margin:4% 2% 2% 2%;
 +
}
 +
h3{
 +
    font-size: 30px;
 +
    margin:7% 2% 0 2%;
 +
    text-align: center;
 +
}
 +
.what{
 +
    background:none;
 +
    margin:7% 2% 0 2%;
 +
}
 +
.why{
 +
    background:none;
 +
    margin:0 2% 0 2%;
 +
}
 +
p2{
 +
    font-size: 25px;
 +
    line-height: 40px;
 +
    background: none;
 +
}
 +
p3{
 +
    font-size: 25px;
 +
    margin:0 2% 0 2%;
 +
}
  
 +
.collapsible {
 +
    background-color:#F8E9A1;
 +
    color: #24305E;
 +
    cursor: pointer;
 +
    padding: 18px;
 +
    width: 100%;
 +
    border: none;
 +
    text-align: left;
 +
    outline: none;
 +
    font-size: 27px;
 +
    transition: 0.4s;
 +
    border-radius: 20px;
 +
}
  
 +
.active, .collapsible:hover {
 +
    background-color: #A8D0E6;
 +
}
  
−
<div class="column full_size judges-will-not-evaluate">
+
.panel{
−
<h3>★  ALERT! </h3>
+
    padding: 0 18px;
−
<p>This page is used by the judges to evaluate your team for the <a href="https://2018.igem.org/Judging/Medals">medal criterion</a> or <a href="https://2018.igem.org/Judging/Awards"> award listed below</a>. </p>
+
    display: none;
−
<p> Delete this box in order to be evaluated for this medal criterion and/or award. See more information at <a href="https://2018.igem.org/Judging/Pages_for_Awards"> Instructions for Pages for awards</a>.</p>
+
    overflow: hidden;
−
</div>
+
    background-color: #f1f1f1;
 +
    border-radius: 20px;
 +
   
 +
}
 +
</style>
  
 +
<script>
 +
                        var coll = document.getElementsByClassName("collapsible");
 +
                        var i;
 +
                       
 +
                        for (i = 0; i < coll.length; i++) {
 +
                            coll[i].addEventListener("click", function() {
 +
                                this.classList.toggle("active");
 +
                                var panel = this.nextElementSibling;
 +
                                if (panel.style.display === "block") {
 +
                                    panel.style.display = "none";
 +
                                } else {
 +
                                    panel.style.display = "block";
 +
                                }
 +
                            });
 +
                        }
 +
                        </script>
  
−
<div class="clear"></div>
+
<body>
 +
<div class="container">         
 +
  <div class="content">
 +
      <div class="titleimg">
 +
<br/>
 +
            <h1>Hardware</h1>
 +
            <br/>
 +
            <br/>
 +
    <img src="" alt="" width="20%"; >
 +
  </div>
  
−
 
+
      <div class="what">
−
 
+
          <h2>Why do we need Hardware?</h2>
−
<div class="column full_size">
+
          <p2>Hardware is best described as any physical component of a computer system that contains a circuit board, ICs, or other electronics. A perfect example of hardware is the screen on which you are viewing this page. Whether it be a computer monitor, tablet or smartphone; it's hardware.
−
 
+
        </p2>
−
<h1>Hardware</h1>
+
        <h2>Hardware Requirments</h2>
 +
        <p2>The hardware is composed of electrodes, power generator, redox responsive agar plates and other components designed and assembled in our wet lab. The software is written in silico using DNA as programming language. These parts of DNA designed using computer programs such as Benchling and SnapGene are assembled in the wet lab using standardised protocols and components.</p2>
 +
        <h2>PCB</h2>
 +
        <button class="collapsible">PCB Design</button>
 +
        <div class="panel">
 +
                <p2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p2>
 +
              </div>
 +
              <button class="collapsible">PCB Constitution</button>
 +
              <div class="panel">
 +
                    <p2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p2>
 +
                  </div>
  
 
</div>
 
</div>
−
 
−
<div class="column two_thirds_size">
 
−
<h3>Best Hardware Special Prize</h3>
 
−
<p>iGEM is about making teams of students making synthetic biology projects. We encourage teams to work with parts and build biological devices in the lab. But we are inclusive and want all teams to work on many other types of problems in synbio. Robotic assembly, microfluidics, low cost equipment and measurement hardware are all areas ripe for innovation in synbio. </p>
 
−
 
−
<p>
 
−
Teams who are interested in working with hardware as a side project are encouraged to apply for the hardware award.
 
−
 
−
<br><br>
 
−
To compete for the <a href="https://2018.igem.org/Judging/Awards">Best Hardware prize</a>, please describe your work on this page and also fill out the description on the <a href="https://2018.igem.org/Judging/Judging_Form">judging form</a>.
 
−
<br><br>
 
−
You must also delete the message box on the top of this page to be eligible for this prize.
 
−
</p>
 
−
</p>
 
 
</div>
 
</div>
−
 
+
</body>
−
<div class="column third_size">
+
−
<div class="highlight decoration_A_full">
+
−
<h3>Inspiration</h3>
+
−
<p>You can look at what other teams did to get some inspiration! <br />
+
−
Here are a few examples:</p>
+
−
<ul>
+
−
<li><a href="https://2016.igem.org/Team:Valencia_UPV">2016 Valencia UPV</a></li>
+
−
<li><a href="https://2016.igem.org/Team:Aachen">2016 Aachen </a></li>
+
−
<li><a href="https://2015.igem.org/Team:TU_Delft">2015 TU Delft  </a></li>
+
−
<li><a href="https://2015.igem.org/Team:TU_Darmstadt">2015 TU Darmstadt</a></li>
+
−
</ul>
+
−
</div>
+
−
 
+
−
</div>
+
−
 
+
−
 
+
−
 
+
 
</html>
 
</html>
 +
{{:Team:Imperial_College/Templates/Footer}}

Revision as of 23:11, 18 September 2018


Hardware



Why do we need Hardware?

Hardware is best described as any physical component of a computer system that contains a circuit board, ICs, or other electronics. A perfect example of hardware is the screen on which you are viewing this page. Whether it be a computer monitor, tablet or smartphone; it's hardware.

Hardware Requirments

The hardware is composed of electrodes, power generator, redox responsive agar plates and other components designed and assembled in our wet lab. The software is written in silico using DNA as programming language. These parts of DNA designed using computer programs such as Benchling and SnapGene are assembled in the wet lab using standardised protocols and components.

PCB

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.