Difference between revisions of "Team:Freiburg"

(Prototype team page)
 
 
(251 intermediate revisions by 8 users not shown)
Line 1: Line 1:
−
{{Freiburg}}
+
 
 +
{{Freiburg/Navbar}}
 
<html>
 
<html>
 +
<head>
 +
</head>
  
 +
<style>
  
−
<div class="column full_size" >
+
/* .body {
−
<img src="http://placehold.it/2000x300/d3d3d3/f2f2f2">
+
  background-color: #F5EFED;
−
</div>
+
} */
  
 +
/* =============== 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){
  
−
<div class="column full_size" >
+
.circle-container {
−
<h1> Welcome to iGEM 2017! </h1>
+
  position: relative;
−
<p>Your team has been approved and you are ready to start the iGEM season! </p>
+
  /* [1] */
−
</div>  
+
  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;
 +
}
  
−
<div class="clear"></div>
+
/* transformations needed for showing the pictures */
 +
.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);
 +
}
  
−
<div class="column half_size" >
+
.circle-container a {
−
<h5>Before you start: </h5>
+
  padding: 1px 10px;
−
<p> Please read the following pages:</p>
+
  font-size: 90%;
−
<ul>
+
}
−
<li>  <a href="https://2017.igem.org/Competition">Competition Hub</a> </li>
+
−
<li> <a href="https://2017.igem.org/Competition/Deliverables/Wiki">Wiki Requirements page</a></li>
+
−
<li> <a href="https://2017.igem.org/Resources/Template_Documentation">Template documentation</a></li>
+
−
</ul>
+
−
</div>
+
  
−
<div class="column half_size" >
+
.circle-container > div {
−
<div class="highlight">
+
  display: block;
−
<h5> Styling your wiki </h5>
+
  width: 100%;
−
<p>You may style this page as you like or you can simply leave the style as it is. You can easily keep the styling and edit the content of these default wiki pages with your project information and completely fulfill the requirement to document your project.</p>
+
  border-radius: 50%;                      /* makes elements round or Rechteck */
−
<p>While you may not win Best Wiki with this styling, your team is still eligible for all other awards. This default wiki meets the requirements, it improves navigability and ease of use for visitors, and you should not feel it is necessary to style beyond what has been provided.</p>
+
  -webkit-filter: grayscale(100%);
−
</div>
+
  filter: grayscale(100%);
−
</div>
+
}
 +
.circle-container img:hover {
 +
  -webkit-filter: grayscale(0);
 +
  filter: grayscale(0);
 +
}
  
−
<div class="column full_size" >
 
−
<h5> Wiki template information </h5>
 
−
<p>We have created these wiki template pages to help you get started and to help you think about how your team will be evaluated. You can find a list of all the pages tied to awards here at the <a href="https://2017.igem.org/Judging/Pages_for_Awards">Pages for awards</a> link. You must edit these pages to be evaluated for medals and awards, but ultimately the design, layout, style and all other elements of your team wiki is up to you!</p>
 
  
−
</div>
 
  
 +
/* =============== END: Circle of Elements - Positioning ==================== */
  
 +
/* =============== BEGIN: New Header =============================== */
 +
#cool_centerimage_small{
 +
  display: none;
 +
}
 +
/* =============== END: New Header =============================== */
  
 +
} /* end of media query! dont delete */
  
−
<div class="column half_size" >
 
−
<h5> Editing your wiki </h5>
 
−
<p>On this page you can document your project, introduce your team members, document your progress and share your iGEM experience with the rest of the world! </p>
 
−
<p> <a href="https://2017.igem.org/wiki/index.php?title=Team:Example&action=edit"> </a>Use WikiTools - Edit in the black menu bar to edit this page</p>
 
  
−
</div>
+
/* =============== 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;
 +
}
  
−
<div class="column half_size" >
+
.cool_header a:hover {
−
<h5>Tips</h5>
+
  text-decoration: underline;
−
<p>This wiki will be your team’s first interaction with the rest of the world, so here are a few tips to help you get started: </p>
+
}
−
<ul>
+
−
<li>State your accomplishments! Tell people what you have achieved from the start. </li>
+
−
<li>Be clear about what you are doing and how you plan to do this.</li>
+
−
<li>You have a global audience! Consider the different backgrounds that your users come from.</li>
+
−
<li>Make sure information is easy to find; nothing should be more than 3 clicks away.  </li>
+
−
<li>Avoid using very small fonts and low contrast colors; information should be easy to read.  </li>
+
−
<li>Start documenting your project as early as possible; don’t leave anything to the last minute before the Wiki Freeze. For a complete list of deadlines visit the <a href="https://2017.igem.org/Calendar">iGEM 2017 calendar</a> </li>
+
−
<li>Have lots of fun! </li>
+
−
</ul>
+
−
</div>
+
  
 +
.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;
 +
}
  
−
<div class="column half_size" >
+
.cool_container {
−
<h5>Inspiration</h5>
+
    width: 100%;
−
<p> You can also view other team wikis for inspiration! Here are some examples:</p>
+
    padding-top: 280px;
−
<ul>
+
    margin-bottom: -100px;
−
<li> <a href="https://2014.igem.org/Team:SDU-Denmark/"> 2014 SDU Denmark </a> </li>
+
}
−
<li> <a href="https://2014.igem.org/Team:Aalto-Helsinki">2014 Aalto-Helsinki</a> </li>
+
−
<li> <a href="https://2014.igem.org/Team:LMU-Munich">2014 LMU-Munich</a> </li>
+
−
<li> <a href="https://2014.igem.org/Team:Michigan"> 2014 Michigan</a></li>
+
−
<li> <a href="https://2014.igem.org/Team:ITESM-Guadalajara">2014 ITESM-Guadalajara </a></li>
+
−
<li> <a href="https://2014.igem.org/Team:SCU-China"> 2014 SCU-China </a></li>
+
−
</ul>
+
−
</div>
+
  
−
<div class="column half_size" >
+
/* =============== END: Circle of Elements - Element Styling ==================== */
−
<h5> Uploading pictures and files </h5>
+
−
<p> You can upload your pictures and files to the iGEM 2017 server. Remember to keep all your pictures and files within your team's namespace or at least include your team's name in the file name. <br />
+
−
When you upload, set the "Destination Filename" to <br><code>T--YourOfficialTeamName--NameOfFile.jpg</code>. (If you don't do this, someone else might upload a different file with the same "Destination Filename", and your file would be erased!)<br><br>
+
  
−
<a href="https://2017.igem.org/Special:Upload">
 
−
UPLOAD FILES
 
−
</a>
 
−
</p>
 
−
</div>
 
  
 +
/* =============== 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;
 +
}
  
 +
#Abstract_logo {
 +
  position: relative;
 +
transform: translate(-20%, 50%);
 +
  -ms-transform: translate(-20%, 50%);
 +
  -o-transform: translate(-10%, 50%);
 +
  -webkit-transform: translate(-10%, 50%);
  
 +
 +
}
  
 +
/* =============== END: Circle of Elements - Center Image ==================== */
  
 +
 +
/* =============== BEGIN: Circle of Elements - Hiding Animation ==================== */
 +
.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/b/b5/T-FREIBURG-Mafiadude_z_medalami2.png");
 +
    background-size: cover;
 +
    background-position: center;
 +
}
 +
 +
.element2 {
 +
    background-image: url("https://static.igem.org/mediawiki/2017/c/c4/T-FREIBURG-mafiadude-team3.png");
 +
    background-size: cover;
 +
    background-position: center;
 +
}
 +
 +
.element3 {
 +
    background-image: url("https://static.igem.org/mediawiki/2017/4/4d/T-FREIBURG-mafiadude-andgate2.png");
 +
    background-size: cover;
 +
    background-position: center;
 +
}
 +
 +
.element4 {
 +
    background-image: url("https://static.igem.org/mediawiki/2017/8/82/T-FREIBURG-mafiadude-diploma2.png");
 +
    background-size: cover;
 +
    background-position: center;
 +
}
 +
 +
.element5 {
 +
    background-image: url("https://static.igem.org/mediawiki/2017/4/43/T-FREIBURG-mafiadude-modeling.png");
 +
    background-size: cover;
 +
    background-position: center;
 +
}
 +
 +
.element6 {
 +
    background-image: url("https://static.igem.org/mediawiki/2017/3/3d/T-FREIBURG-mafiadude-hp.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>
 +
 +
<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>
 +
 +
$(document).ready(function(){
 +
  $('.link_trigger').click(function(){
 +
    window.location.href=$(this).attr('href');
 +
  })
 +
});
 +
 +
</script>
 +
 +
<div class="body">
 +
 +
 +
<div class="cool_container">
 +
 +
    <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/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>
 +
          </div>
 +
<div class="cool_header"><a href="https://2017.igem.org/Team:Freiburg/Achievements">Achievements</a></div>
 +
        </div>
 +
        </li>
 +
 +
        <li><!--7-->
 +
        <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 our members!
 +
          </div>
 +
          </div>
 +
<div class="cool_header"><a href='https://2017.igem.org/Team:Freiburg/Team'>Team</a></div>
 +
        </div>
 +
        </li>
 +
 +
        <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 integrating two inputs into one output. 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 id="box4" class="topicboxes">
 +
           
 +
              <div class="cool_image_blink element4">
 +
              <div class="cool_content cool_text_blink link_trigger" href='https://2017.igem.org/Team:Freiburg/Results' title="">
 +
                  We generated <br> stable cell lines, a gene knockdown, characterized several promoters and much more!
 +
              </div>
 +
            </div>
 +
<div class="cool_header"><a href="https://2017.igem.org/Team:Freiburg/Results">Results</a></div>
 +
          </div>
 +
        </li>
 +
 +
        <li><!--2-->
 +
          <div id="box5" class="topicboxes">
 +
   
 +
            <div class="cool_image_blink element5">
 +
            <div class="cool_content cool_text_blink link_trigger" href='https://2017.igem.org/Team:Freiburg/Model' title="">
 +
              To better <br> understand our AND gate, we modeled gene expression within our genetic circuit.
 +
            </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 topic!
 +
            </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 class="container">
 +
    <div class="row">
 +
      <div class="col-md-12 text-center">
 +
        <div class="flex-container" style="margin-top:-20%;padding-right:10%;">
 +
<div class="item">
 +
<h2 style="font-size:40px; padding-top: 50px" align="center">Abstract</h2>
 +
<p>A new approach to cancer treatment is the chimeric antigen receptor (CAR) T cell 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>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
  
  
 
</html>
 
</html>
 +
{{Freiburg/Footer}}

Latest revision as of 01:52, 2 November 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 our members!
    Team
  • To make our approach safer, we are integrating two inputs into one output. 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 topic!
    Human Practice

Abstract

A new approach to cancer treatment is the chimeric antigen receptor (CAR) T cell 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.