Difference between revisions of "Template:Freiburg/PageTest3"

 
Line 1: Line 1:
−
 
  
 
{{Freiburg/Navbar}}
 
{{Freiburg/Navbar}}
−
 
 
<html>
 
<html>
 
<head>
 
<head>
 +
</head>
 +
 
<style>
 
<style>
−
.table, th, td {
+
 
−
border: 1px solid black;
+
/* .body {
−
border-collapse: collapse;
+
  background-color: #F5EFED;
 +
} */
 +
 
 +
/* =============== BEGIN: Circle of Elements ==================== */
 +
/*
 +
* Mixin to put items on a circle
 +
* [1] - Allows children to be absolutely positioned
 +
* [2] - Allows the mixin to be used on a list
 +
* [3] - In case box-sizing: border-box has been enabled
 +
* [4] - Allows any type of direct children to be targeted
 +
*/
 +
 
 +
@media screen and (min-width: 900px){
 +
 
 +
.circle-container {
 +
  position: relative;
 +
  /* [1] */
 +
  width: 500px;                      /* changes size of circle that elements are circling on */
 +
  height: 500px;
 +
  padding: 0;
 +
  border-radius: 10%;              /* switch between circle and Rechteck */
 +
  list-style: none;
 +
  /* [2] */
 +
  -moz-box-sizing: content-box;
 +
  -webkit-box-sizing: content-box;
 +
  box-sizing: content-box;
 +
  /* [3] */
 +
  margin: 5em auto 0;
 +
  /*border: solid 5px #0051A2;*/
 +
  z-index: 9;
 +
}
 +
.circle-container > * {
 +
  /* [4] */
 +
  display: block;
 +
  position: absolute;              /* set absolute to fix elements on circle */
 +
  top: 25%;
 +
  left: 40%;
 +
  width: 170px;                      /* define size of elements */
 +
  height: 280px;
 +
  margin: 0;   
 +
  font-size: 100%;
 +
  text-align: center;
 
}
 
}
  
−
table{
+
/* transformations needed for showing the pictures */
−
    width:95%
+
.circle-container > *:nth-of-type(4) {
−
    }
+
  -moz-transform: rotate(341.8deg) translate(274px) rotate(-341.8deg);
 +
  -ms-transform: rotate(341.8deg) translate(274px) rotate(-341.8deg);
 +
  -webkit-transform: rotate(341.8deg) translate(274px) rotate(-341.8deg);
 +
  transform: rotate(341.8deg) translate(274px) rotate(-341.8deg);            /*change translate for defining position of elements*/
 +
}
 +
.circle-container > *:nth-of-type(5) {
 +
  -moz-transform: rotate(60deg) translate(138px) rotate(-60deg);
 +
  -ms-transform: rotate(60deg) translate(138px) rotate(-60deg);
 +
  -webkit-transform: rotate(60deg) translate(138px) rotate(-60deg);
 +
  transform: rotate(60deg) translate(138px) rotate(-60deg);
 +
}
 +
.circle-container > *:nth-of-type(6) {
 +
  -moz-transform: rotate(150deg) translate(236px) rotate(-150deg);
 +
  -ms-transform: rotate(150deg) translate(236px) rotate(-150deg);
 +
  -webkit-transform: rotate(150deg) translate(236px) rotate(-150deg);
 +
  transform: rotate(150deg) translate(236px) rotate(-150deg);
 +
}
 +
.circle-container > *:nth-of-type(1) {
 +
  -moz-transform: rotate(235deg) translate(355.5px) rotate(-235deg);
 +
  -ms-transform: rotate(235deg) translate(355.5px) rotate(-235deg);
 +
  -webkit-transform: rotate(235deg) translate(355.5px) rotate(-235deg);
 +
  transform: rotate(235deg) translate(355.5px) rotate(-235deg);
 +
}
 +
.circle-container > *:nth-of-type(2) {
 +
  -moz-transform: rotate(192.5deg) translate(395px) rotate(-192.5deg);
 +
  -ms-transform: rotate(192.5deg) translate(395px) rotate(-192.5deg);
 +
  -webkit-transform: rotate(192.5deg) translate(395px) rotate(-192.5deg);
 +
  transform: rotate(192.5deg) translate(395px) rotate(-192.5deg);
 +
}
 +
.circle-container > *:nth-of-type(3) {
 +
  -moz-transform: rotate(283deg) translate(300px) rotate(-283deg);
 +
  -ms-transform: rotate(283deg) translate(300px) rotate(-283deg);
 +
  -webkit-transform: rotate(283deg) translate(300px) rotate(-283deg);
 +
  transform: rotate(283deg) translate(300px) rotate(-283deg);
 +
}
  
−
.th, td {
+
.circle-container a {
−
padding: 5px;
+
  padding: 1px 10px;
 +
  font-size: 90%;
 
}
 
}
−
   
+
 
−
button.accordion {
+
.circle-container > div {
−
     background-color: #eee;
+
  display: block;
−
     color: #444;
+
  width: 100%;
−
     cursor: pointer;
+
  border-radius: 50%;                      /* makes elements round or Rechteck */
−
     padding: 25px;
+
  -webkit-filter: grayscale(100%);
 +
  filter: grayscale(100%);
 +
}
 +
.circle-container img:hover {
 +
  -webkit-filter: grayscale(0);
 +
  filter: grayscale(0);
 +
}
 +
 
 +
 
 +
 
 +
/* =============== END: Circle of Elements - Positioning ==================== */
 +
 
 +
/* =============== BEGIN: New Header =============================== */
 +
#cool_centerimage_small{
 +
  display: none;
 +
}
 +
/* =============== END: New Header =============================== */
 +
 
 +
} /* end of media query! dont delete */
 +
 
 +
 
 +
/* =============== BEGIN: Circle of Elements - Element Styling ==================== */
 +
.cool_header {
 +
     text-align: center;
 +
    height: 20px;
 +
    margin-bottom: 3px;
 +
    z-index: 5;
 +
}
 +
 
 +
.cool_header a {
 +
  /*display: block; */                        /* border around elements */
 +
  border-radius: 30%;                      /* makes border around elements round or Rechteck */
 +
  /*box-shadow: 0 0 0 5px #0051A2;*/
 +
        color: #FFF;
 +
  background-color: #7D0202;
 +
  padding: 1px 10px;
 +
  font-size: 110%;
 +
  border: 5px solid #7D0202;
 +
}
 +
 
 +
.cool_header a:hover {
 +
  text-decoration: underline;
 +
}
 +
 
 +
.cool_content {
 +
     padding: 20px;
 +
    height: 160px;
 +
    background-color: #FFFFFF;
 +
     text-align: center;
 +
     box-shadow: 1px 1px 10px #888;
 +
    -webkit-box-shadow: 1px 1px 10px #888;
 +
    -moz-box-shadow: 1px 1px 10px #888;
 +
    border-radius: 50%;
 +
  opacity: 0;
 +
 
 +
  -webkit-transition: all 0.4s ease-in-out;
 +
  -moz-transition: all 0.4s ease-in-out;
 +
  -o-transition: all 0.4s ease-in-out;
 +
  -ms-transition: all 0.4s ease-in-out;
 +
  transition: all 0.4s ease-in-out;
 +
 
 +
  -webkit-transform: scale(0);
 +
  -moz-transform: scale(0);
 +
  -o-transform: scale(0);
 +
  -ms-transform: scale(0);
 +
  transform: scale(0);
 +
 
 +
  -webkit-backface-visibility: hidden;
 +
}
 +
 
 +
.cool_container {
 
     width: 100%;
 
     width: 100%;
−
     border: none;
+
     padding-top: 280px;
−
    text-align: left;
+
     margin-bottom: -100px;
−
     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 {
+
/* =============== END: Circle of Elements - Element Styling ==================== */
−
     background-color: #ccc;
+
 
 +
 
 +
/* =============== BEGIN: Circle of Elements - Center Image ==================== */
 +
.cool_centerimage {
 +
     margin: 0 auto;
 +
    position: relative;
 +
    width: 30%;
 +
    height: 250px;
 +
    top: -530px;
 +
    text-align: center;
 +
    left: 1%;
 +
    color: #000;
 +
    z-index: 10;
 
}
 
}
  
−
div.panel {
+
#Abstract_logo {
−
    padding: 0 18px;
+
  position: relative;
−
    background-color: white;
+
transform: translate(-20%, 50%);
−
    max-height: 0;
+
  -ms-transform: translate(-20%, 50%);
−
    overflow: hidden;
+
  -o-transform: translate(-10%, 50%);
−
    transition: max-height 1s ease-in;
+
  -webkit-transform: translate(-10%, 50%);
−
    border-radius: 0px 0px 10px 10px;
+
−
}
+
−
   
+
−
.formula{
+
−
    width: 95%;
+
−
    float: left;
+
−
    clear: left;
+
−
    border: 1px solid blue;
+
−
   
+
−
    }
+
  
−
.num{
+
−
    width: 5%;
+
}
−
    float: right;
+
−
    clear: right;
+
−
    border: 1px solid red;
+
−
    }
+
  
 +
/* =============== END: Circle of Elements - Center Image ==================== */
  
−
table, th, td {
+
 
−
        width: 100%;
+
/* =============== BEGIN: Circle of Elements - Hiding Animation ==================== */
−
        border: collapse;
+
.cool_image_blink {
−
     }
+
  /*box-shadow:  
−
      
+
     inset 0 0 0 0 rgba(200,95,66, 0.4),
 +
     inset 0 0 0 16px rgba(255,255,255,0.6),
 +
    0 1px 2px rgba(0,0,0,0.1);*/
 +
        /* box-shadow: 1px 1px 2px 2px #000; */
 
      
 
      
 +
  -webkit-transition: all 0.4s ease-in-out;
 +
  -moz-transition: all 0.4s ease-in-out;
 +
  -o-transition: all 0.4s ease-in-out;
 +
  -ms-transition: all 0.4s ease-in-out;
 +
  transition: all 0.4s ease-in-out;
 +
        border-radius: 50%;
 +
}
 +
 +
.cool_image_blink:hover {
 +
  /*box-shadow:
 +
    inset 0 0 0 110px #0051A2/*rgba(200,95,66, 0.4)*/,
 +
    inset 0 0 0 16px #0051A2/*rgba(255,255,255,0.8)*/,
 +
    0 1px 2px #0051A2/*rgba(0,0,0,0.1)*/;*/
 +
}
 +
 +
.cool_image_blink:hover .cool_content {
 +
  opacity: 1;
 +
 
 +
  -webkit-transform: scale(1);
 +
  -moz-transform: scale(1);
 +
  -o-transform: scale(1);
 +
  -ms-transform: scale(1);
 +
  transform: scale(1); 
 +
}
 +
 +
.element1 {
 +
    background-image: url("https://static.igem.org/mediawiki/2017/6/67/Mafiadude_z_medalami.png");
 +
    background-size: cover;
 +
    background-position: center;
 +
}
 +
 +
.element2 {
 +
    background-image: url("https://static.igem.org/mediawiki/2017/1/14/T-FREIBURG-mafiadude-team2.png");
 +
    background-size: cover;
 +
    background-position: center;
 +
}
 +
 +
.element3 {
 +
    background-image: url("https://static.igem.org/mediawiki/2017/4/4e/T-FREIBURG-mafiadude-andgate.png");
 +
    background-size: cover;
 +
    background-position: center;
 +
}
 +
 +
.element4 {
 +
    background-image: url("https://static.igem.org/mediawiki/2017/0/0e/T-FREIBURG-mafiadude-diploma.png");
 +
    background-size: cover;
 +
    background-position: center;
 +
}
 +
 +
.element5 {
 +
    background-image: url("https://static.igem.org/mediawiki/2017/2/27/Mafiadude_rand_grau.png");
 +
    background-size: cover;
 +
    background-position: center;
 +
}
 +
 +
.element6 {
 +
    background-image: url("https://static.igem.org/mediawiki/2017/2/27/Mafiadude_rand_grau.png");
 +
    background-size: cover;
 +
    background-position: center;
 +
}
 +
 +
.element7 {
 +
    background-image: url("https://static.igem.org/mediawiki/2017/2/27/Mafiadude_rand_grau.png");
 +
    background-size: cover;
 +
    background-position: center;
 +
}
 +
 +
.element8 {
 +
    background-image: url("");
 +
    background-size: cover;
 +
    background-position: center;
 +
}
 +
/* =============== END: Circle of Elements - Hiding Animation ==================== */
 +
 +
 +
/* =============== BEGIN: Resetting General CSS ==================== */
 +
.mw-content-ltr ul {
 +
    padding: 0;
 +
    margin: 0 auto;
 +
}
 +
 +
/*ul {
 +
    line-height: 1em;
 +
}*/
 +
 +
.content_box {
 +
    box-shadow: none;
 +
    padding: 2% 4%;
 +
    margin: 0px;
 +
}
 +
/* =============== END: Resetting General CSS ==================== */
 +
 +
 +
/* ============== Animate boxes on start ===========================*/
 +
 +
/* from https://daneden.github.io/animate.css/ */
 +
 +
@-webkit-keyframes zoomIn {
 +
  from {
 +
    opacity: 0;
 +
    -webkit-transform: scale3d(.3, .3, .3);
 +
    transform: scale3d(.3, .3, .3);
 +
  }
 +
 +
  50% {
 +
    opacity: 1;
 +
  }
 +
}
 +
 +
@-webkit-keyframes zoomIn-Pics {
 +
  from {
 +
    opacity: 0;
 +
    -webkit-transform: scale3d(.3, .3, .3);
 +
    transform: scale3d(.3, .3, .3);
 +
  }
 +
 +
  40% {
 +
    -webkit-transform: scale3d(1.1,1.1,1.1);
 +
    transform: scale3d(1.1,1.1,1.1);
 +
  }
 +
 +
  50% {
 +
    opacity: 1;
 +
  }
 +
}
 +
 +
@keyframes zoomIn {
 +
  from {
 +
    opacity: 0;
 +
    -webkit-transform: scale3d(.3, .3, .3);
 +
    transform: scale3d(.3, .3, .3);
 +
  }
 +
 +
  50% {
 +
    opacity: 1;
 +
  }
 +
}
 +
 +
@keyframes zoomIn-Pics {
 +
  from {
 +
    opacity: 0;
 +
    -webkit-transform: scale3d(.3, .3, .3);
 +
    transform: scale3d(.3, .3, .3);
 +
  }
 +
 +
  40% {
 +
    -webkit-transform: scale3d(1.1,1.1,1.1);
 +
    transform: scale3d(1.1,1.1,1.1);
 +
  }
 +
 +
  50% {
 +
    opacity: 1;
 +
  }
 +
}
 +
 +
.zoomIn {
 +
  -webkit-animation-name: zoomIn;
 +
  animation-name: zoomIn;
 +
}
 +
 +
@-webkit-keyframes zoomOut {
 +
  from {
 +
    opacity: 1;
 +
  }
 +
 +
  50% {
 +
    opacity: 0;
 +
    -webkit-transform: scale3d(.3, .3, .3);
 +
    transform: scale3d(.3, .3, .3);
 +
  }
 +
 +
  to {
 +
    opacity: 0;
 +
  }
 +
}
 +
 +
@keyframes zoomOut {
 +
  from {
 +
    opacity: 1;
 +
  }
 +
 +
  50% {
 +
    opacity: 0;
 +
    -webkit-transform: scale3d(.3, .3, .3);
 +
    transform: scale3d(.3, .3, .3);
 +
  }
 +
 +
  to {
 +
    opacity: 0;
 +
  }
 +
}
 +
 +
.zoomOut {
 +
  -webkit-animation-name: zoomOut;
 +
  animation-name: zoomOut;
 +
}
 +
 +
 +
#box1,
 +
#box2,
 +
#box3,
 +
#box4,
 +
#box5,
 +
#box6,
 +
#box7,
 +
#box8,
 +
#Abstract_logo,
 +
#Abstract_text {
 +
  opacity: 0;
 +
}
 +
 +
.link_trigger:hover{
 +
  cursor: hand;
 +
  cursor: pointer;
 +
}
 +
 +
@media screen and (max-width: 899px) {
 +
 +
.topicboxes{
 +
  display: block;
 +
  width: 200px;                      /* define size of elements */
 +
  height: 200px;
 +
  margin: 20px;
 +
  font-size: 100%;   
 +
  text-align: center;
 +
}
 +
 +
.circle-container li {
 +
  display: inline-block;
 +
}
 +
 
 +
.circle-container{
 +
  display: flex;
 +
  flex-wrap: wrap;
 +
  justify-content: space-around;
 +
  margin-bottom: 32px;
 +
}
 +
 +
.cool_container{
 +
  display: block;
 +
  padding-top: 0;
 +
  margin: 0;
 +
}
 +
 
 +
.cool_centerimage{
 +
  display: none;
 +
}
 +
 +
#cool_centerimage_small{
 +
  display: block;
 +
  margin: 20px;
 +
  font-weight: 500;
 +
}
 +
 +
.circle-container a {
 +
  padding: 1px 5px;
 +
  font-size: 80%;
 +
}
 +
 +
}
 +
 
</style>
 
</style>
−
<script src="https://2017.igem.org/common/MathJax-2.5-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
+
 
 +
<script type="text/javascript">
 +
 
 +
// perform the animation
 +
 
 +
$(document).ready(function() {
 +
    $('#Abstract_logo').delay(1000).queue(function (next) {$(this).css({"animation-name": "zoomIn", "animation-duration": "1s"}).css({"opacity":"1"}); next(); }); 
 +
    $('#box1').delay(2000).queue(function (next) {$(this).css({"animation-name": "zoomIn-Pics", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });
 +
    $('#box2').delay(2500).queue(function (next) {$(this).css({"animation-name": "zoomIn-Pics", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });
 +
    $('#box3').delay(3000).queue(function (next) {$(this).css({"animation-name": "zoomIn-Pics", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });
 +
    $('#box4').delay(3500).queue(function (next) {$(this).css({"animation-name": "zoomIn-Pics", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });
 +
    $('#box5').delay(4000).queue(function (next) {$(this).css({"animation-name": "zoomIn-Pics", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });
 +
    $('#box6').delay(4500).queue(function (next) {$(this).css({"animation-name": "zoomIn-Pics", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });
 +
    $('#box7').delay(5000).queue(function (next) {$(this).css({"animation-name": "zoomIn-Pics", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });
 +
    $('#box8').delay(5500).queue(function (next) {$(this).css({"animation-name": "zoomIn-Pics", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });
 +
    $('#Abstract_logo').delay(6000).queue(function (next) {$(this).css({"animation-name": "zoomIn", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });
 +
});
 +
 
 
</script>
 
</script>
−
</head>
 
  
 +
<script>
  
 +
$(document).ready(function(){
 +
  $('.link_trigger').click(function(){
 +
    window.location.href=$(this).attr('href');
 +
  })
 +
});
  
−
<body>
+
</script>
  
−
<div class="container">
+
<div class="body">
−
    <div class="row">
+
−
      <div class="col-md-12 text-center">
+
−
        <div class="flex-container">
+
−
            <div class="item">
+
  
−
<h1 align="center">Modeling</h1>
 
−
<div class="item">
 
  
−
       
+
<div class="cool_container">
−
    <table>
+
−
    <tr>
+
−
        <td align="center">Formula</td>
+
−
        <td>Numeri</td>
+
−
       
+
−
        </tr>
+
−
   
+
−
   
+
−
    </table>
+
−
             
+
−
               
+
−
    <div class="item">
+
  
−
         <h2 align="center">Finding the CARTEL<sup>TM</sup> AND gate</h2>
+
    <ul class='circle-container'>
 +
         <li><!--6-->
 +
        <div id="box1" class="topicboxes">
 +
         
 +
          <div class="cool_image_blink element1">
 +
          <div class="cool_content cool_text_blink link_trigger" href='https://2017.igem.org/wiki/index.php?title=Team:Freiburg/Achievements' title="">
 +
          <div class="text">
 +
            Besides learning <br> a lot and having fun, we achieved something great this year!
 +
Check it out!
  
−
       
+
          </div>
−
        <div class="formula">
+
          </div>
−
            <div class="centered">
+
          </div>
−
          <p align="center">This text should be centered </p>
+
<div class="cool_header"><a href='https://2017.igem.org/wiki/index.php?title=Team:Freiburg/Achievements'>Achievements</a></div>
 
         </div>
 
         </div>
−
         </div>  
+
         </li>
−
          
+
 
−
         <div class="num">
+
         <li><!--7-->
−
            <p>This text schould be on the right</p>
+
         <div id="box2" class="topicboxes">
 +
          <div class="cool_image_blink element2">
 +
          <div class="cool_content cool_text_blink link_trigger" href="https://2017.igem.org/Team:Freiburg/Team" title="">
 +
            <br>Find out more <br> about the Freiburg 2017 Team and its members!
 +
          </div>
 +
          </div>
 +
<div class="cool_header"><a href='https://2017.igem.org/Team:Freiburg/Team'>Team</a></div>
 
         </div>
 
         </div>
−
     
+
         </li>
−
       
+
−
         <p>
+
−
        The hypoxia response element (<i>HRE</i>), cAMP response element (<i>CRE</i>) and <i>CTLA4</i> promoter can be utilized for a more specific <i>CAR</i> expression. Combining these three enhancers in an AND gate to allow a specific <i>CAR</i> expression (Brophy et al., 2014) proved to be quite challenging. Using endogenous systems came with a drawback - a knockout or knockdown of either <i>HIF1</i>, <i>VEGFR-2</i> or <i>TDAG8</i> had to be generated.
+
−
        </p>
+
−
       
+
−
   
+
  
 +
        <li><!--8-->
 +
        <div id="box3" class="topicboxes">
 +
         
 +
          <div class="cool_image_blink element3">
 +
          <div class="cool_content cool_text_blink link_trigger" href='https://2017.igem.org/Team:Freiburg/Design' title="AND gate">
 +
            To make our approach safer, we are using an AND gate which com-bines two inputs into one. Have a look!
  
 +
          </div>
 +
          </div>
 +
<div class="cool_header"><a href='https://2017.igem.org/Team:Freiburg/Design'>AND gate</a></div>
 +
        </div>
 +
        </li>
  
−
 
+
         <li><!--1-->
−
         <div class="col-sm-1"></div>
+
            <div id="box4" class="topicboxes">
−
        <div class="col-sm-10">
+
           
−
          <p>
+
              <div class="cool_image_blink element4">
−
               <math xmlns="http://www.w3.org/1998/Math/MathML"><mi>f</mi><mo>'</mo><mo>(</mo><mi>t</mi><mo>)</mo><mo>=</mo><mi>a</mi><mo>(</mo><mi>z</mi><mo>)</mo><mo>-</mo><msub><mi>k</mi><mn>1</mn></msub><mo>*</mo><mi>f</mi><mo>(</mo><mi>t</mi><mo>)</mo></math>
+
               <div class="cool_content cool_text_blink link_trigger" href='https://2017.igem.org/Team:Freiburg/Results' title="">
−
          </p>
+
                  We generated <br> stable cell lines, a gene knockdown, characterized several promoters and much more!
−
        </div>  
+
              </div>
−
         <div class="col-sm-1"><p>(1)</p></div>
+
            </div>
 +
<div class="cool_header"><a href="https://2017.igem.org/Team:Freiburg/Results">Results</a></div>
 +
          </div>
 +
         </li>
  
−
       
+
         <li><!--2-->
−
         <div class="col-sm-1"></div>
+
           <div id="box5" class="topicboxes">
−
        <div class="col-sm-10">
+
−
           <p>
+
−
              <math xmlns="http://www.w3.org/1998/Math/MathML"><mi>y</mi><mo>'</mo><mo>(</mo><mi>t</mi><mo>)</mo><mo>=</mo><msub><mi>k</mi><mn>2</mn></msub><mo>*</mo><mi>f</mi><mo>(</mo><mi>t</mi><mo>)</mo><mo>-</mo><msub><mi>k</mi><mn>3</mn></msub><mo>*</mo><mi>y</mi><mo>(</mo><mi>t</mi><mo>)</mo></math>
+
−
          </p>
+
−
        </div>   
+
−
        <div class="col-sm-1"><p>(2)</p></div>
+
−
       
+
−
       
+
−
     
+
−
       
+
−
    </div>
+
−
               
+
−
         
+
−
               
+
−
               
+
−
               
+
−
               
+
−
               
+
−
                <!--  Panel 2 ---------------------------------------->
+
−
               
+
−
               
+
−
               
+
−
                <!-- END PANEL 2 ------------------------------------------------->
+
−
                   
+
 
      
 
      
−
              
+
             <div class="cool_image_blink element5">
−
              
+
             <div class="cool_content cool_text_blink link_trigger" href='https://2017.igem.org/Team:Freiburg/Model' title="">
−
    </div>  
+
              To better <br> understand our AND gate, we modeled gene expression within our genetic circuit.
−
     </div>
+
            </div>
 +
            </div>
 +
<div class="cool_header"><a href='https://2017.igem.org/Team:Freiburg/Model'>Modeling</a></div>
 +
          </div>
 +
        </li>
 +
 
 +
        <li><!--3-->
 +
          <div id="box6" class="topicboxes">
 +
         
 +
            <div class="cool_image_blink element6">
 +
            <div class="cool_content cool_text_blink link_trigger" href='https://2017.igem.org/Team:Freiburg/HP/Silver' title="">
 +
                To hear thoughts about our project check out our survey and interviews with experts working on the field!
 +
            </div>
 +
            </div>
 +
<div class="cool_header"><a href='https://2017.igem.org/Team:Freiburg/HP/Silver'>Human Practice</a></div>
 +
          </div>
 +
        </li>
 +
 
 +
 
 +
     
 +
     </ul>
 +
<div class="cool_centerimage">
 +
        <div id="Abstract_logo">
 +
        <a href="https://2017.igem.org/Team:Freiburg/Introduction" title="Start guided tour"> <img  src="https://static.igem.org/mediawiki/2017/7/74/T-FREIBURG-cartel.png" height="150px" width="340px"></a>
 +
        </div>
 
     </div>
 
     </div>
−
    </div>
 
−
    </div>
 
−
   
 
  
−
   
+
 
−
   
+
−
   
+
−
   
+
−
   
+
−
   
+
−
   
+
−
   
+
−
   
+
−
   
+
−
   
+
−
   
+
−
   
+
−
   
+
−
   
+
  
−
<div class="container">
 
−
  <div class="row">
 
−
      <div class="col-md-12 text-center">
 
−
        <div class="flex-container">
 
−
<div class="col-sm-6">
 
−
<div class="image_box left" style="float:right">
 
−
<div class="figure" style="width:195px">
 
−
                <div class="figureinner">
 
−
                        <div id="cf">
 
−
<a href="https://2017.igem.org/Team:Freiburg/Applied_Design"><img class="bottom" src="https://static.igem.org/mediawiki/2017/a/a9/T-FREIBURG-car-red-left3.jpg" style="width:180px;height:50px;">
 
−
<img class="top" src="https://static.igem.org/mediawiki/2017/b/b6/T-FREIBURG-carleft3.jpg" style="width:180px;height:50px;">
 
−
                        </div>
 
−
                    <div class="figurecaption-car" style="float:right">
 
−
                      <p><strong>Applied Design</strong></p></a>
 
−
</div>
 
−
</div>
 
−
</div>
 
 
</div>
 
</div>
 
</div>
 
</div>
  
  
−
<div class="col-sm-6">
+
 
−
<div class="image_box right" style="float:left">
+
<div class="container">
−
<div class="figure" style="width:180px">
+
    <div class="row">
−
                <div class="figureinner">
+
      <div class="col-md-12 text-center">
−
                    <div id="cf">
+
        <div class="flex-container" style="margin-top:-20%;padding-right:10%;">
−
<a href="https://2017.igem.org/Team:Freiburg/Basic_Part"><img class="bottom" src="https://static.igem.org/mediawiki/2017/9/9a/T-FREIBURG-car-red-right3.jpg" style="width:180px;height:50px;">
+
<div class="item">
−
<img class="top" src="https://static.igem.org/mediawiki/2017/7/73/T-FREIBURG-car-left3.jpg" style="width:180px;height:50px;">
+
 
−
                        </div> 
+
<p style="padding-top: 50px">A new approach to cancer treatment is the chimeric antigen receptor (CAR) therapy, which shows promising results fighting tumors in clinical trials. It consists of autologous isolated T cells modified with a chimeric receptor based on the T-cell receptor combined with the recognition domain of an antibody. Upon reinjection, CAR T cells exhibit cytotoxicity with high affinity towards cells displaying the antigen. However, clinical trials have shown that as tumor antigens are not solely expressed on tumor cells, but also on healthy tissues, grave off-target effects like the Graft-versus-Host-Disease may occur. In order to avoid such side-effects, we engineer CAR T cell lines specifically activated by factors of the tumor microenvironment. Controlled by a genetic AND gate system the T cells need two input signals in order to express CAR. This would allow highly localized cytotoxic activity of T cells and provide safer cell-based cancer immunotherapy especially for solid tumors.</p>
−
                    <div class="figurecaption-car" style="float:left">
+
−
                 
+
−
                      <p><strong>BioBricks</strong></p></a>
+
 
</div>
 
</div>
 
</div>
 
</div>
Line 223: Line 615:
 
</div>
 
</div>
  
−
</div>
 
−
</div>
 
−
</div>
 
−
</div>
 
−
   
 
−
   
 
−
        <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>
 
  
 
</html>
 
</html>
−
 
 
{{Freiburg/Footer}}
 
{{Freiburg/Footer}}

Latest revision as of 13:26, 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
  • Besides learning
    a lot and having fun, we achieved something great this year! Check it out!
    Achievements

  • Find out more
    about the Freiburg 2017 Team and its members!
    Team
  • To make our approach safer, we are using an AND gate which com-bines two inputs into one. Have a look!
    AND gate
  • We generated
    stable cell lines, a gene knockdown, characterized several promoters and much more!
    Results
  • To better
    understand our AND gate, we modeled gene expression within our genetic circuit.
    Modeling
  • To hear thoughts about our project check out our survey and interviews with experts working on the field!
    Human Practice

A new approach to cancer treatment is the chimeric antigen receptor (CAR) therapy, which shows promising results fighting tumors in clinical trials. It consists of autologous isolated T cells modified with a chimeric receptor based on the T-cell receptor combined with the recognition domain of an antibody. Upon reinjection, CAR T cells exhibit cytotoxicity with high affinity towards cells displaying the antigen. However, clinical trials have shown that as tumor antigens are not solely expressed on tumor cells, but also on healthy tissues, grave off-target effects like the Graft-versus-Host-Disease may occur. In order to avoid such side-effects, we engineer CAR T cell lines specifically activated by factors of the tumor microenvironment. Controlled by a genetic AND gate system the T cells need two input signals in order to express CAR. This would allow highly localized cytotoxic activity of T cells and provide safer cell-based cancer immunotherapy especially for solid tumors.