Difference between revisions of "Team:Freiburg/Basic Part"

Line 4: Line 4:
 
<html>
 
<html>
 
<head>
 
<head>
−
   
 
 
<style>
 
<style>
−
    .table, th, td {
+
font-family: 'Josefin Sans', serif;
−
    border: 1px solid black;
+
−
    border-collapse: collapse;
+
−
    }
+
  
−
    table{
+
/* =============== LIghtbox =========================*/
−
        width:98%
+
 
−
        }
+
/* from https://www.w3schools.com/howto/howto_js_lightbox.asp */
−
    .table{
+
 
−
        font-family: 'Roboto', sans serif;
+
* {
−
    }
+
  box-sizing: border-box;
−
    .th, td {
+
  padding: 20px;
−
    padding: 5px;
+
}
 +
 
 +
.row > .column {
 +
  padding: 0 8px;
 +
}
 +
 
 +
.row:after {
 +
  content: "";
 +
  display: table;
 +
  clear: both;
 +
}
 +
 
 +
.column {
 +
  float: left;
 +
  width: 100%;
 +
}
 +
 
 +
 
 +
 
 +
/* The Modal (background) */
 +
.modal {
 +
  display: none;
 +
  position: fixed;
 +
  z-index: 1;
 +
  padding-top: 200px;
 +
  left: 0;
 +
  top: 0;
 +
  width: 100%;
 +
  height: 100%;
 +
  overflow: auto;
 +
  background-color: transparent;
 +
}
 +
 
 +
/* Modal Content */
 +
.modal-content {
 +
  position: relative;
 +
  background-color: #fefefe;
 +
  margin: auto;
 +
  padding: 20px;
 +
  width: 90%;
 +
  max-width: 1200px;
 +
}
 +
 
 +
/* The Close Button */
 +
.close {
 +
  color: red;
 +
  position: absolute;
 +
  top: 100px;
 +
  right: 60px;
 +
  font-size: 100px;
 +
  font-weight: bold;
 +
}
 +
 
 +
.close:hover,
 +
.close:focus {
 +
  color: #999;
 +
  text-decoration: none;
 +
  cursor: pointer;
 +
}
 +
 
 +
.mySlides {
 +
  display: none;
 +
}
 +
 
 +
.cursor {
 +
  cursor: pointer
 +
}
 +
 
 +
 
 +
/* Number text (1/3 etc) */
 +
.numbertext {
 +
  color: #f2f2f2;
 +
  font-size: 12px;
 +
  padding: 8px 12px;
 +
  position: absolute;
 +
  top: 0;
 +
}
 +
 
 +
img {
 +
  margin-bottom: -4px;
 +
}
 +
 
 +
.caption-container {
 +
  text-align: center;
 +
  background-color: black;
 +
  padding: 2px 16px;
 +
  color: white;
 +
}
 +
 
 +
.demo {
 +
  opacity: 0.6;
 +
}
 +
 
 +
.active,
 +
.demo:hover {
 +
  opacity: 1;
 +
}
 +
 
 +
img.hover-shadow {
 +
  transition: 0.3s
 +
}
 +
 
 +
.hover-shadow:hover {
 +
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
 +
}
 +
 
 +
/* =============== END: Lightbox =========================*/
 +
 
 +
.table, th, td {
 +
border: 1px solid black;
 +
border-collapse: collapse;
 +
}
 +
 
 +
table{
 +
    width:95%
 
     }
 
     }
 +
 +
.th, td {
 +
padding: 5px;
 +
}
 +
 +
 +
button.accordion {
 +
    background-color: #eee;
 +
    color: #444;
 +
    cursor: pointer;
 +
    padding: 25px;
 +
    width: 100%;
 +
    border: none;
 +
    text-align: left;
 +
    outline: none;
 +
    font-size: 20px;
 +
    transition: 1s;
 +
    border-radius: 10px 10px 0px 0px;
 +
    font-weight: 600;
 +
    padding-left: 40px;
 +
}
 +
 +
button.accordion.active, button.accordion:hover {
 +
    background-color: #ccc;
 +
}
 +
 +
div.panel {
 +
    padding: 0 18px;
 +
    background-color: white;
 +
    max-height: 0;
 +
    overflow: hidden;
 +
    transition: max-height 1s ease-in;
 +
    border-radius: 0px 0px 10px 10px;
 +
}
 +
   
 +
    div.panellarge{
 +
    width: 100%   
 +
    } 
 +
   
 
</style>
 
</style>
 +
   
  
  
Line 38: Line 188:
 
       </div>
 
       </div>
  
−
<div class="image_box middle">
+
<div class="column">
−
            <div class="figure">
+
<div class="item">
−
              <div class="figureinner">
+
 
−
                 <img src="https://static.igem.org/mediawiki/2017/2/26/T-FREIBURG-our-project.png" alt="CAR_T_cells-therapy_scheme" height="100%" width="100%">
+
    <div class="image_box middle">
−
                <div class="figurecaption">  
+
      <div class="figure">
−
                    <p><strong>Figure 1: Text</strong><br>
+
          <div class="figureinner">
−
                      Text</p>
+
                 <img src="https://static.igem.org/mediawiki/2017/4/49/T-FREIBURG-BioBrick_Cloning.png" onclick="openModal();currentSlide(1)" class="hover-shadow cursor" style="width:80%;height:80%">
−
                </div>
+
              <div class="figurecaption">
−
              </div>
+
<p><strong>Figure. 1: Cloning strategies of BioBricks. </strong></p>
−
            </div>
+
              </div>
 
           </div>
 
           </div>
 +
 +
<div id="myModal" class="modal">
 +
  <span class="close cursor" onclick="closeModal()">&times;</span>
 +
  <div class="modal-content">
 +
           
 +
 +
    <div class="mySlides">   
 +
            <div class="numbertext">cloning biobrick </div>
 +
      <img src="https://static.igem.org/mediawiki/2017/4/49/T-FREIBURG-BioBrick_Cloning.png" style="width:150%">
 +
    </div>
 +
 +
</div>
 +
</div>
 +
 +
</div>
 +
</div>
 +
 +
  
 
           <div class="item">
 
           <div class="item">
Line 111: Line 279:
 
</div>
 
</div>
  
 +
<script>
 +
function openModal() {
 +
  document.getElementById('myModal').style.display = "block";
 +
}
  
 +
function closeModal() {
 +
  document.getElementById('myModal').style.display = "none";
 +
}
 +
 +
var slideIndex = 1;
 +
showSlides(slideIndex);
 +
 +
function plusSlides(n) {
 +
  showSlides(slideIndex += n);
 +
}
 +
 +
function currentSlide(n) {
 +
  showSlides(slideIndex = n);
 +
}
 +
 +
function showSlides(n) {
 +
  var i;
 +
  var slides = document.getElementsByClassName("mySlides");
 +
  var dots = document.getElementsByClassName("demo");
 +
  var captionText = document.getElementById("caption");
 +
  if (n > slides.length) {slideIndex = 1}
 +
  if (n < 1) {slideIndex = slides.length}
 +
  for (i = 0; i < slides.length; i++) {
 +
      slides[i].style.display = "none";
 +
  }
 +
  for (i = 0; i < dots.length; i++) {
 +
      dots[i].className = dots[i].className.replace(" active", "");
 +
  }
 +
  slides[slideIndex-1].style.display = "block";
 +
  dots[slideIndex-1].className += " active";
 +
  captionText.innerHTML = dots[slideIndex-1].alt;
 +
}
 +
</script>
 +
 +
<script>
 +
        var acc = document.getElementsByClassName("accordion");
 +
        var i;
 +
 +
        for (i = 0; i < acc.length; i++) {
 +
          acc[i].onclick = function() {
 +
            this.classList.toggle("active");
 +
            var panel = this.nextElementSibling;
 +
            if (panel.style.maxHeight){
 +
              panel.style.maxHeight = null;
 +
            } else {
 +
              panel.style.maxHeight = panel.scrollHeight + "px";
 +
            }
 +
          }
 +
        }
 +
</script>
  
 
</body>
 
</body>

Revision as of 03:30, 31 October 2017

Logo
Overview Motivation CAR T Cells Tumor Microenvironment AND Gate Outlook Achievements References
Members Attributions Partners Contact
Main Project Modeling Applied Design Proof of Concept BioBricks Basic Part BioBrick Improvement Interlab Study
Safety Cloning HIF1A Knockdown Cell Culture Lab Book
Human Practice Integrated Human Practice Collaborations

Basic Part

Our project involved the characterization of different promoters as well as their signaling inputs. Their unique properties make them not only applicable to many medical purposes but they can also be used for any other field necessitating input dependent expression. Hence we want to share the sequences encoding the main parts of our CARTELTM AND gate. Future iGEM teams will have the opportunity to take advantage of our research if they are planning to work with pH, hypoxia as well as VEGF. Most of the sequences were obtained by literature research and have been synthesized by Integrated DNA technologies, engaging their special offer for iGEM teams. Also sequences have been purchased on Add gene and have been produced via amplification of cDNA. Recognition sites for restriction enzymes used for standard cloning have been removed without causing amino acid changes. Cloning our inserts into pSB1C3, was done using extension PCR and Gibson Assembly.

Figure. 1: Cloning strategies of BioBricks.

All our BioBricks are summarized in the table below (Tab. 1). Additionally, the table guides you to more detailed info pages as well as to the corresponding registry pages.

We used not only the enhancer elements as single regulatory units, but created multiple enhancer elements. Increasing the amount of enhancer elements results in an upregulation transcription downstream of the minimal promoter. This allows highly specific tuning to target cell types. We thereby create the chance for other iGEM teams to use our BioBricks and adjust them to their individual needs. This can be easily done by using compatible end assembly, which is possible due to a BglII restriction site contained in BBa_K2295003.

Our favourite part is the CRE promoter, a cAMP dependent promoter. Being one of the main downstream signaling pathways of Gs coupled GPCRs (G protein coupled receptors), this BioBrick supports the combination with a wide range of other parts. The iGEM BioBrick library already contains several Gs coupled GPCRs. Depending on the GPCR, different inputs can be used for ligand dependent gene expression.
One example for the usage of BBa_K2295001 has been shown in our project with the TDAG8 Receptor (BBa_K2295000), allowing pH dependent gene expression.

Tabel 1: BioBricks

Biobrick Short description Detailed description
BBa_K2295000 TDAG8 Proton sensing GPCR
BBa_K2295001 CRE promoter cAMP response element
BBa_K2295002 Hif1a Hypoxia-inducible factor 1-alpha
BBa_K2295003 HRE pTal Hypoxia response element
BBa_K2295005 CTLA4 promoter cytotoxic T-lymphocyte-associated protein 4