Difference between revisions of "Team:NUS Singapore-A/Part Collection"

 
(18 intermediate revisions by 5 users not shown)
Line 1: Line 1:
 
{{NUS_Singapore-A}}
 
{{NUS_Singapore-A}}
 +
{{:Team:NUS_Singapore-A/Templates/Style}}
 
<html>
 
<html>
 
      
 
      
 
     <head>
 
     <head>
 +
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 
         <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,600" rel="stylesheet">
 
         <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,600" rel="stylesheet">
 
         <link href="https://fonts.googleapis.com/css?family=Lora:400,400i" rel="stylesheet">
 
         <link href="https://fonts.googleapis.com/css?family=Lora:400,400i" rel="stylesheet">
Line 14: Line 16:
 
</script>
 
</script>
  
−
<style>
 
−
    /***************************************************CSS STARTS HERE*********************************************************/
 
−
    /* The accordion is the class given to the drop-down menu thingy */
 
−
    .accordion {
 
−
        background-color: #f2f2f2;
 
−
        color: black;
 
−
        cursor: pointer;
 
−
        padding: 15px;
 
−
        width: 90%;
 
−
        text-align: left;
 
−
        margin-left: 5%;
 
−
        margin-right: 5%;
 
−
        border: none;
 
−
        outline: none;
 
−
        /* I wanted to give a gradual change, but it's having some trouble reading the 'transition' property. I'll look into having it javascripted instead. */
 
−
        /*transition: 0.4s ease;*/
 
−
        font-family: "Montserrat", sans-serif;
 
−
        font-weight: 300;
 
−
        font-size: 20px;
 
−
    }
 
−
   
 
−
    /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
 
−
    .active, .accordion:hover {
 
−
        font: bold 20px "Montserrat", sans-serif;
 
−
        background-color: #e6e6e6;
 
−
    }
 
−
   
 
−
    /* Style the accordion panel. Note: hidden by default */
 
−
    .panel {
 
−
        background-color: white;
 
−
        text-align: left;
 
−
        margin-top: 10px;
 
−
        max-height: 0;
 
−
        overflow: hidden;
 
−
        transition: max-height 0.2s ease-out;
 
−
    }
 
−
    .accordion:after {
 
−
        content: '+';
 
−
        font-size: 13px;
 
−
        color: #777;
 
−
        float: right;
 
−
        margin-left: 5px;
 
−
    }
 
−
   
 
−
    /* Not sure why this function does not work. Need to check */
 
−
    .active:after {
 
−
        content: "-";
 
−
    }
 
  
−
    table, th, td {
 
−
        border: none;
 
−
        border-collapse: collapse;
 
−
    }
 
−
    table {
 
−
        font-family: "Lora";
 
−
        font-size: 13px;
 
−
        word-spacing: 0.5em;
 
−
    }
 
  
−
    th, td {
+
<body>
−
        text-align: left;
+
−
        padding: 3px;
+
−
    }
+
  
−
    table caption {
+
<div class="inner-border" style="border-top: none;">
 +
<div class="all-wrapper">
 +
<div class="content-wrapper">
  
−
    }
+
  <img src="https://static.igem.org/mediawiki/2018/a/a2/T--NUS_Singapore-A--Part_Collection_header_C.png" class="header">
  
−
     h1 {
+
     <br> <!-- Using this makes a break between lines -->
−
        font-family: "MONTSERRAT", sans-serif;
+
<h1>OVERVIEW</h1>
−
        font-weight: bold;
+
<br>
−
        font-size: 22px;
+
<p>
−
        text-align: left;
+
These are the BioBricks that our team has constructed and characterized. The parts with a red heart represent our favorite parts! Click on each BioBrick to find out more!
−
        color: black;
+
</p>
−
        padding-left: 5%;
+
<br>
−
        padding-top: 1.5%;
+
  <h1>PARTS COLLECTION</h1>
−
        padding-bottom: 1%;
+
<br>
−
        border: none;
+
  <table>
−
    }
+
<tr style="background-color: black; color: white;">
−
   
+
<th>Part Number</th>
−
    h2 {
+
<th>Type</th>
−
        font-family: "Lora", sans;
+
<th>Description</th>
−
        font-weight: 300;
+
<th>Length</th>
−
        text-align: left;
+
</tr>
−
        color: black;
+
<tr style="background-color: #dddddd;">
−
        margin-left: 5%;
+
<td><a href="http://parts.igem.org/wiki/index.php?title=Part:BBa_K2819118">BBa_K2819118</a></td>
−
        margin-bottom: 15px; 
+
<td>Reporter</td>
−
    }
+
<td><i class="fas fa-heart" style="color: #FF1493; font-family: FontAwesome;"></i>Stress Reporter: mRFP Gene under Burden-Driven Promoter </td>
 +
<td>901</td>
 +
</tr>
 +
<tr>
 +
<td><a href="http://parts.igem.org/wiki/index.php?title=Part:BBa_K2819010">BBa_K2819010</a></td>
 +
<td>Regulatory</td>
 +
<td><i class="fas fa-heart" style="color: #FF1493; font-family: FontAwesome;"></i>Stress Promoter (htpG1)</td>
 +
<td>81</td>
 +
</tr>
  
−
    h3 {
+
<tr style="background-color: #dddddd;">
−
        font-family: "Lora", sans;
+
<td><a href="http://parts.igem.org/wiki/index.php?title=Part:BBa_K2819103">BBa_K2819103</a></td>
−
        font-weight: 300;
+
<td>Regulatory</td>
−
        text-align: left;
+
<td><i class="fas fa-heart" style="color: #FF1493; font-family: FontAwesome;"></i>Blue light-repressible system with RFP reporter attached with YbaQ degradation tag</i></td>
−
        color: black;
+
<td>1702</td>
−
    }
+
</tr>
 +
<tr>
 +
<td><a href="http://parts.igem.org/wiki/index.php?title=Part:BBa_K2819200">BBa_K2819200</a></td>
 +
<td>Coding</td>
 +
<td>Blue light-repressible production of F3’H</td>
 +
<td>1500</td>
 +
</tr>
 +
<tr style="background-color: #dddddd;">
 +
<td><a href="http://parts.igem.org/wiki/index.php?title=Part:BBa_K2819201">BBa_K2819201</a></td>
 +
<td>Coding</td>
 +
<td>Blue light-repressible production of FNS</td>
 +
<td>1131</td>
 +
</tr>
 +
<tr>
 +
<td><a href="http://parts.igem.org/wiki/index.php?title=Part:BBa_K2819206">BBa_K2819206</a></td>
 +
<td>Coding</td>
 +
<td>Production of Flavone Synthase (FNS) by induction of arabinose</td>
 +
<td>2468</td>
 +
</tr>
 +
<tr style="background-color: #dddddd;">
 +
<td><a href="http://parts.igem.org/wiki/index.php?title=Part:BBa_K2819000">BBa_K2819000</a></td>
 +
<td>Coding</td>
 +
<td>Coding Region for F3'H</td>
 +
<td>1464</td>
 +
</tr>
 +
<tr>
 +
<td><a href="http://parts.igem.org/wiki/index.php?title=Part:BBa_K2819001">BBa_K2819001</a></td>
 +
<td>Coding</td>
 +
<td>Coding Region for Flavone Synthase (FNS)</td>
 +
<td>1095</td>
 +
</tr>
 +
<<tr style="background-color: #dddddd;">
 +
<td><a href="http://parts.igem.org/wiki/index.php?title=Part:BBa_K2819011">BBa_K2819011</a></td>
 +
<td>Coding</td>
 +
<td>YbaQ degradation tag</td>
 +
<td>30</td>
 +
</tr>
  
  
−
    p, ol li, ul li  {
 
−
        font-family: "Lora", serif;
 
−
        font-size: 14px;
 
−
        word-spacing: 0.5em;
 
−
        text-align:justify;
 
−
    }
 
  
−
    img {
+
</table>
−
        display: block;
+
 
−
        margin-left: auto;
+
  <br><br>
−
        margin-right: auto;
+
−
    }
+
  
−
    .discussion_graph, .measurement_table{
+
</div>
−
        width: 70%;
+
</div>
−
        height: auto;
+
</div>
−
        margin: auto;
+
   
−
     }
+
</body>
 +
      
 +
<script>
 +
        /***************************************************JAVASCRIPT STARTS HERE**************************************************/
  
 +
var acc = document.getElementsByClassName("accordion");
 +
var close = document.getElementsByClassName("accordion-closer");
 +
var i;
  
 +
for (i = 0; i < acc.length; i++) {
 +
  acc[i].addEventListener("click", function() {
 +
    /* Toggle between adding and removing the "active" class,
 +
                                    to highlight the button that controls the panel */
 +
    this.classList.toggle("active");
  
−
     .modelling-header{
+
     /* Toggle between hiding and showing the active panel */
−
        width: 47.5%;
+
−
        height: auto;
+
−
        margin: auto;
+
−
    }
+
−
    .center-justified{
+
−
      text-align: justify;
+
−
      margin: 0 auto;
+
−
      width: 70%;
+
−
    }
+
  
−
     /**********************
+
     var panel = this.nextElementSibling;
−
    Start of two columns */
+
     if (panel.style.display === "block") {
−
     * {
+
      panel.style.display = "none";
−
     box-sizing: border-box;
+
     } else {
 +
      panel.style.display = "block";
 
     }
 
     }
−
 
+
     if (panel.style.maxHeight) {
−
    /* Create two columns that floats next to each other */
+
      panel.style.maxHeight = null;
−
     .column {
+
    } else {
−
        float: left;
+
      panel.style.maxHeight = panel.scrollHeight + "px";
−
        text-align: left;
+
 
     }
 
     }
 +
  });
 +
}
 +
for (i = 0; i < close.length; i++) {
 +
  close[i].addEventListener("click", function(acc) {
 
      
 
      
−
     .left {
+
     this.parentElement.previousElementSibling.classList.toggle("active");
−
        width: 50%;
+
    var panel = this.parentElement;
−
        padding-left: 5%;
+
    var accordion = panel.previousElementSibling;
−
        padding-right: 2.5%;
+
     accordion.scrollIntoView();
−
     }
+
  
−
     .right {
+
     panel.style.display = "none";
−
        width: 50%;
+
     if (panel.style.maxHeight) {
−
        padding-left: 2.5%;
+
      panel.style.maxHeight = null;
−
        padding-right: 5%;
+
    } else {
−
    }
+
      panel.style.maxHeight = panel.scrollHeight + "px";
−
 
+
−
    /* Clear floats after the columns */
+
−
    .row:after {
+
−
        content: "";
+
−
        display: table;
+
−
        clear: both;
+
−
    }
+
−
 
+
−
    /********************
+
−
    End of two columns */
+
−
   
+
−
    /***************************************************CSS ENDS HERE**********************************************************/
+
−
</style>
+
−
 
+
−
 
+
−
<body>
+
−
<div class="inner-border" style="border-top: none;">
+
−
 
+
−
  <img src="https://static.igem.org/mediawiki/2018/a/ac/T--NUS_Singapore-A--Part_Collection_header.png" class="modelling-header">
+
−
 
+
−
  <h1>OVERVIEW</h1>
+
−
  <div class="row">
+
−
    <div class="column left" style="background-color:white;">
+
−
      <p>Did your team make a lot of great parts? Is there a theme that ties all your parts together? Do you have more than 10 parts in this collection? Did you make a CRISPR collection, a MoClo collection, or a collection of awesome pigment parts? Describe your parts collection on this page, so the judges can evaluate you for the Best Part Collection award.
+
−
      </p>
+
−
      <br>
+
−
      <p>
+
−
While you should put all the characterization information for your parts on the Registry, you are encouraged to explain how all your parts form a collection on this page.
+
−
    </p>
+
−
 
+
−
    </div>
+
−
    <div class="column right" style="background-color:white;">
+
−
      <p><i>Note</i>
+
−
      </p>
+
−
 
+
−
      <br>
+
−
 
+
−
      <p>This page should list all the parts in the collection your team made during your project. You must add all characterization information for your parts on the Registry. You should not put characterization information on this page.
+
−
      </p>
+
−
      <br>
+
−
      <p> <i>Best Part Collection Special Prize</i></p>
+
−
      <br>
+
−
      <p>To be eligible for this award, these parts must adhere to <a href="http://parts.igem.org/DNA_Submission">Registry sample submission guidelines</a> and have been sent to the Registry of Standard Biological Parts. If you have a collection of parts you wish to nominate your team for this <a href="https://2018.igem.org/Judging/Awards">special prize</a>, make sure you add your part numbers to your <a href="https://2018.igem.org/Judging/Judging_Form">judging form</a> and delete the box at the top of this page.
+
−
      </p>
+
−
    </div>
+
−
    <br>
+
−
  </div>
+
−
  <br>
+
−
  <hr>
+
−
  <br>
+
−
 
+
−
  <h1> ALL TITLES IN CAPS </h1>
+
−
  <button class="accordion">An ACCORDION</button>
+
−
  <div class="panel" style="line-height: 17em;">
+
−
    <div class="row">
+
−
      <div class="column left" style="background-color:white;">
+
−
        <p>So stuff should go right in here.</p>
+
−
      </div>
+
−
      <div class="column right" style="background-color:white;">
+
−
        <p> And more stuff on this side too.</p>
+
−
      </div>
+
−
    </div>
+
−
  </div>
+
−
 
+
−
  <button class="accordion">OPEN ME PLEASE</button>
+
−
  <div class="panel" style="line-height: 17em;">
+
−
    <div class="row">
+
−
      <div class="column left" style="background-color:white;">
+
−
        <p>Blah Blah Blah</p>
+
−
      </div>
+
−
      <div class="column right" style="background-color:white;">
+
−
        <p>Blargh Blargh Blargh</p>
+
−
      </div>
+
−
    </div>
+
−
  </div>
+
−
 
+
−
</div>
+
−
</body>
+
−
 
+
−
<script>
+
−
        /***************************************************JAVASCRIPT STARTS HERE**************************************************/
+
−
       
+
−
               
+
−
        var acc = document.getElementsByClassName("accordion");
+
−
        var i;
+
−
       
+
−
        for (i = 0; i < acc.length; i++) {
+
−
            acc[i].addEventListener("click", function() {
+
−
                                   
+
−
                                    /* Toggle between adding and removing the "active" class,
+
−
                                    to highlight the button that controls the panel */
+
−
                                   
+
−
                                    this.classList.toggle("active");
+
−
                                   
+
−
                                    /* Toggle between hiding and showing the active panel */
+
−
                                   
+
−
                                    var panel = this.nextElementSibling;
+
−
                                    if (panel.style.display === "block") {
+
−
                                    panel.style.display = "none";
+
−
                                    } else {
+
−
                                    panel.style.display = "block";
+
−
                                    }
+
−
                                    });
+
−
        }
+
−
      
+
−
    for (i = 0; i < acc.length; i++) {
+
−
        acc[i].addEventListener("click", function() {
+
−
                                this.classList.toggle("active");
+
−
                                var panel = this.nextElementSibling;
+
−
                                if (panel.style.maxHeight){
+
−
                                panel.style.maxHeight = null;
+
−
                                } else {
+
−
                                panel.style.maxHeight = panel.scrollHeight + "px";
+
−
                                }
+
−
                                });
+
 
     }
 
     }
 +
  });
 +
}
 
     /***************************************************JAVASCRIPT ENDS HERE****************************************************/
 
     /***************************************************JAVASCRIPT ENDS HERE****************************************************/
 
</script>
 
</script>

Latest revision as of 12:03, 9 December 2018

CONNECT WITH US

OVERVIEW


These are the BioBricks that our team has constructed and characterized. The parts with a red heart represent our favorite parts! Click on each BioBrick to find out more!


PARTS COLLECTION


<
Part Number Type Description Length
BBa_K2819118 Reporter Stress Reporter: mRFP Gene under Burden-Driven Promoter 901
BBa_K2819010 Regulatory Stress Promoter (htpG1) 81
BBa_K2819103 Regulatory Blue light-repressible system with RFP reporter attached with YbaQ degradation tag 1702
BBa_K2819200 Coding Blue light-repressible production of F3’H 1500
BBa_K2819201 Coding Blue light-repressible production of FNS 1131
BBa_K2819206 Coding Production of Flavone Synthase (FNS) by induction of arabinose 2468
BBa_K2819000 Coding Coding Region for F3'H 1464
BBa_K2819001 Coding Coding Region for Flavone Synthase (FNS) 1095
BBa_K2819011 Coding YbaQ degradation tag 30




HEAR OUR STORY

We’re using synthetic biology to change the way the world thinks and functions.

We’re a little disruptive, dangerous and maybe a tad too bold. But the world needs some shaking up every now and then, and we think we’re just the right people for that.

Together we’re going to engineer biology and create something awesome.

CONTACT US

nusigem@gmail.com

21 Lower Kent Ridge Rd, Singapore 119077