Difference between revisions of "Team:TU-Eindhoven/testpage"

 
(24 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
{{:Team:TU-Eindhoven/NavMenu}}
 
{{:Team:TU-Eindhoven/NavMenu}}
−
 
 
<html>
 
<html>
 +
 
<head>
 
<head>
 +
    <style>
 +
        body, html {
 +
            height: 100%;
 +
            margin: 0;
 +
            font: 400 15px/1.8 "Lato", sans-serif;
 +
            color: #777;
 +
        }
 +
       
 +
        .bgimg-1,
 +
        .bgimg-2,
 +
        .bgimg-3 {
 +
            position: relative;
 +
            /* opacity: 0.65; */
 +
            background-attachment: fixed;
 +
            background-position: center;
 +
            background-repeat: no-repeat;
 +
            background-size: cover;
 +
        }
 +
        .bgimg-1 {
 +
            background-image: url(https://static.igem.org/mediawiki/2018/c/c9/T--TU-Eindhoven--BgImg1.jpeg);
 +
            min-height: 500px;
 +
        }
 +
       
 +
        .bgimg-2 {
 +
            background-image: url(https://static.igem.org/mediawiki/2018/a/ad/T--TU-Eindhoven--homepageVideoThumbnail.jpeg);
 +
            min-height: 400px;
 +
        }
 +
       
 +
        .bgimg-3 {
 +
            background-image: url("/images/frontpage/sissy.jpg");
 +
            min-height: 400px;
 +
        }
 +
       
 +
        .caption {
 +
            position: absolute;
 +
            left: 0;
 +
            top: 50%;
 +
            width: 100%;
 +
            text-align: center;
 +
            color: #000;
 +
        }
 +
       
 +
        .caption span.border {
 +
            line-height: 150%;
 +
            background-color: #111;
 +
            color: #fff;
 +
            padding: 18px;
 +
            font-size: 25px;
 +
            letter-spacing: 3px;
 +
        }
 +
       
 +
        h3 {
 +
            text-transform: uppercase;
 +
            font: 20px "Lato", sans-serif;
 +
            color: #111;
 +
        }
 +
       
 +
        /* Turn off parallax scrolling for tablets and phones */
 +
        @media only screen and (max-device-width: 1024px) {
 +
            .bgimg-1,
 +
            .bgimg-2,
 +
            .bgimg-3 {
 +
                background-attachment: scroll;
 +
            }
 +
        }
 +
        .jumbotron{
 +
          padding:0;
 +
          position:relative;
 +
        }
 +
        video#bgvid {
 +
          /* position: fixed;
 +
          top: 50%;
 +
          left: 50%; */
 +
          width: 100%;
 +
          /* height: auto; */
 +
          z-index: -100;
 +
          /* -ms-transform: translateX(-50%) translateY(-50%);
 +
          -moz-transform: translateX(-50%) translateY(-50%);
 +
          -webkit-transform: translateX(-50%) translateY(-50%); */
 +
          /* transform: translateX(-50%) translateY(-50%); */
 +
          background: url(/images/VIDEO-IGEM_Trim.mp4_snapshot_00.21_[2018.10.17_14.30.27].jpg) no-repeat;
 +
          /* background-size: cover;  */
 +
          margin-bottom:-10px;
 +
        }
 +
        .video-text,
 +
        .videoCtrl {
 +
          position: absolute;
 +
          top: 50%;
 +
          left: 50%;
 +
          transform: translateX(-50%) translateY(-50%);
  
−
<style type="text/css" >
+
          /* font-size: 7vw; */
 +
          line-height: 1.5em;
 +
          color: rgb(141, 49, 194);
 +
          text-align: center;
 +
          font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 +
          /* display: none; */
 +
        }
 +
        .playBtn {
 +
            background-color:transparent;
 +
            border-width: 0px;
 +
        }
 +
        .playBtn img {
 +
            width:100px;
 +
            opacity:0.2;
 +
        }
 +
        .playBtn:hover img {
 +
            opacity:0.7;
 +
        }
 +
        #videoModal video {
 +
            width: 85%;
 +
            margin:0 auto;
 +
            top: 50%;
 +
            left: 50%;
 +
            transform: translateX(9%) translateY(9%);
 +
        }
 +
        #videoModal {
 +
            padding-top:0;
 +
        }
 +
        .closeFigure {
 +
            position:fixed;
 +
            top:25px;
 +
            right:45px;
 +
        }
 +
        #tueMessage:hover {
 +
            background-color:rgba(255, 255, 255, 0.746);
 +
        }
 +
        #tueMessage {
 +
            cursor:default;
 +
        }
 +
        a:hover{
 +
            text-decoration: none;
 +
        }
 +
 
 +
    </style>
 +
</head>
  
−
</style>
 
  
−
</head>
+
 
−
         <div class="relative-pos col-xs-12 col-sm-12 col-md-4 col-lg-3 col-xl-3">
+
 
−
             <div id="toc-container" class="doc-catalogue" style="display:none;">
+
    <div class="jumbotron neat">
−
                 Life is like riding a bicycle. To keep your balance you must keep moving.
+
         <video id="bgvid" playsinline autoplay muted loop poster="https://static.igem.org/mediawiki/2018/a/ad/T--TU-Eindhoven--homepageVideoThumbnail.jpeg">
−
             </div>
+
            <source src="https://static.igem.org/mediawiki/2018/1/18/T--TU-Eindhoven--ShortVideoMuted.mp4" type="video/mp4">
 +
        </video>
 +
        <!-- <div class="video-text">
 +
             Welcome to GelCatraz!
 +
        </div> -->
 +
        <div class="videoCtrl">
 +
            <button class="playBtn" onclick="showVideoModal(this)" data-vid-url="https://static.igem.org/mediawiki/2018/5/5c/T--TU-Eindhoven--FullscreenVideo.mp4">
 +
                 <img src="https://static.igem.org/mediawiki/2018/d/dc/T--TU-Eindhoven--VideoPlayBtn.png">
 +
             </button>
 
         </div>
 
         </div>
−
        <div id="docContent" class="doc-content col-xs-12 col-sm-12 col-md-8 col-lg-9 col-xl-9">
+
    </div>
−
            <script>
+
−
                var bGenerateCat=true;
+
−
            </script>
+
−
            <script src="https://2018.igem.org/Team:TU-Eindhoven/D3JS?action=raw&ctype=text/javascript"></script>
+
−
            <h1>Welcome to iGEM TU Eindhoven 2018! </h1>
+
−
            <div class="sect">
+
−
            <h2>Project Description</h2>
+
−
            <p>Keywords: Living biomaterials; Ice binding protein (IBP); Wound Healing; Lysostaphin; Staphylocci</p>
+
−
            <p>Living cells can continuously monitor their microenvironment and respond to local environmental
+
−
                changes by expressing specific gene sets. This makes living cells attractive to use in small
+
−
                devices and smart materials. Bacterial cells are particularly attractive since they can be
+
−
                genetically "tailored" to produce many different types of proteins in response to almost any
+
−
                known type of chemical, physical or biological stress.</p>
+
−
            <h3>qtueopoetnx noloja  jeoirjla hkjw ajwe</h3>
+
−
            <p>Unfortunately, exploiting this potential is held back by challenges like maintaining the
+
−
                viability, functionality and safety of the living components in freestanding materials and
+
−
                devices. The bacteria can be contained in a gel, but if they leak out and escape into the
+
−
                environment they may cause major problems.</p>
+
−
            <h3>dfer  se sre s gfsesaaw</h3>
+
−
            <p>We aim to design a living material in which the bacteria are immobilized within the hydrogel
+
−
                by using an adhesive protein which originates from an Antarctic bacteria. In this way, we’ll
+
−
                create a living material that can safely be used outside of the laboratory environment.</p>
+
−
            <h3>qweazsdnhhbeduyjh eiukj huejks nkws o efrefs</h3>
+
−
            <p>We aim to apply our living material to wound healing. Wounds are prone to infections of
+
−
                pathogenic bacteria, which dramatically slow down wound healing and are increasingly
+
−
                becoming resistant to antibiotics. Bandages may prevent infections to some extent, but they
+
−
                would be much more effective if they continuously release proteins that fight pathogens.
+
−
                This is what the bacteria in our material will do. They will produce a small protein named
+
−
                lysostaphin. This is an enzyme that specifically destroys staphylococcus aureus and other
+
−
                staphylocci, which are currently the most common cause of infections in hospitalized
+
−
                patients. In this way, a wound healing hydrogel can be created. This hydrogel can be easily
+
−
                and safely applied as a patch on the skin. This way, our living material will form a
+
−
                convenient alternative to antibiotics.</p>
+
−
            </div>
+
−
            <div class="sect">
+
−
            <h2>Measurement</h2>
+
−
            <p>dja afke a ereka ereafe jrerjw que ale rjei arj aije li pizqq qpozmfjwm  kjeoif e koaejk
+
−
                efjejklad jkaf zhcmnvbzl jhua a e eioianei lknkcikl, kdijk aoieujkjzialkdjkuiuae wie als
+
−
                aeiakeru  er a iuekajr eraierla euaiqpqqerutvnghs seis eaeija ;oiejner ajeriskala apia.
+
−
            </p>
+
−
            <h3>qweasdf  df sdf trfghdnnmnbe e</h3>
+
−
            <p>dja afke a ereka ereafe jrerjw que ale rjei arj aije li pizqq qpozmfjwm  kjeoif e koaejk
+
−
                efjejklad jkaf zhcmnvbzl jhua a e eioianei lknkcikl, kdijk aoieujkjzialkdjkuiuae wie als
+
−
                aeiakeru  er a iuekajr eraierla euaiqpqqerutvnghs seis eaeija ;oiejner ajeriskala apia.
+
−
            </p>
+
−
            <h3>aeiurw qeqrejl ahxjabvzkai erwoq</h3>
+
−
            <p>dja afke a ereka ereafe jrerjw que ale rjei arj aije li pizqq qpozmfjwm  kjeoif e koaejk
+
−
                efjejklad jkaf zhcmnvbzl jhua a e eioianei lknkcikl, kdijk aoieujkjzialkdjkuiuae wie als
+
−
                aeiakeru  er a iuekajr eraierla euaiqpqqerutvnghs seis eaeija ;oiejner ajeriskala apia.
+
−
            </p> 
+
−
            </div>
+
  
−
            <div class="sect">
+
    <div class="container-fluid">
−
            <h2>Calibration</h2>
+
        <div class="row">
−
             <p>dja afke a ereka ereafe jrerjw que ale rjei arj aije li pizqq qpozmfjwm  kjeoif e koaejk
+
        <div>
−
                efjejklad jkaf zhcmnvbzl jhua a e eioianei lknkcikl, kdijk aoieujkjzialkdjkuiuae wie als
+
             <!-- if our video is ready -->
−
                aeiakeru  er a iuekajr eraierla euaiqpqqerutvnghs seis eaeija ;oiejner ajeriskala apia.
+
        </div>
−
            </p>
+
        <div class="bgimg-1">
−
            <h3>aera jliaqlkjeq a znkjkaeroehaer</h3>
+
             <div class="caption">
−
             <p>dja afke a ereka ereafe jrerjw que ale rjei arj aije li pizqq qpozmfjwm  kjeoif e koaejk
+
                 <span class="border">Welcome to GelCatraz: Where <em>E. coli</em> goes to stay!</span>
−
                 efjejklad jkaf zhcmnvbzl jhua a e eioianei lknkcikl, kdijk aoieujkjzialkdjkuiuae wie als
+
−
                aeiakeru  er a iuekajr eraierla euaiqpqqerutvnghs seis eaeija ;oiejner ajeriskala apia.
+
−
            </p>
+
−
            <h3>jkjiejfa rekl qqer p omm jkjrijer</h3>
+
−
            <p>dja afke a ereka ereafe jrerjw que ale rjei arj aije li pizqq qpozmfjwm  kjeoif e koaejk
+
−
                efjejklad jkaf zhcmnvbzl jhua a e eioianei lknkcikl, kdijk aoieujkjzialkdjkuiuae wie als
+
−
                aeiakeru  er a iuekajr eraierla euaiqpqqerutvnghs seis eaeija ;oiejner ajeriskala apia.
+
−
            </p>
+
 
             </div>
 
             </div>
−
            <div class="sect">
+
        </div>
−
            <h2>Comparison and Improvement</h2>
+
       
−
             <p>dja afke a ereka ereafe jrerjw que ale rjei arj aije li pizqq qpozmfjwm kjeoif e koaejk
+
        <div style="color: #777;background-color:white;padding:50px 25%;text-align:justify;">
−
                 efjejklad jkaf zhcmnvbzl jhua a e eioianei lknkcikl, kdijk aoieujkjzialkdjkuiuae wie als
+
             <p>Living biomaterials are an innovative type of device with wide-ranging implications. Combining the
−
                 aeiakeru  er a iuekajr eraierla euaiqpqqerutvnghs seis eaeija ;oiejner ajeriskala apia.
+
                 flexibility of living cells with biocompatiblematerials, this new class of devices is expected to
 +
                 impact many fields and assist society in dealing with the challenges ahead. Bacterial are a
 +
                particularly attractive platform since they can be genetically "tailored" to produce many different
 +
                types of proteins in response to almost any known type of chemical, physical or biological change.
 
             </p>
 
             </p>
−
             <h3>daf erije ljlwr jiwerk jkloe</h3>
+
             <p>
−
            <p>dja afke a ereka ereafe jrerjw que ale rjei arj aije li pizqq qpozmfjwm  kjeoif e koaejk
+
                Unfortunately, this potential is held back by challenges like maintaining the viability, functionality
−
                 efjejklad jkaf zhcmnvbzl jhua a e eioianei lknkcikl, kdijk aoieujkjzialkdjkuiuae wie als
+
                and safety of the living components  in freestanding materials and devices. One of the biggest
−
                 aeiakeru  er a iuekajr eraierla euaiqpqqerutvnghs seis eaeija ;oiejner ajeriskala apia.
+
                challenges in applying this emerging technology to real-world problems preventing bacterial leakage
 +
                while allowing for adequate diffusion of nutrients and products. In our project, we aimed to bring the
 +
                application of living materials a step closer to being realized. In the past several months we have
 +
                worked on our <a href="https://2018.igem.org/Team:TU-Eindhoven/Design">design</a> of a novel platform. Using an adhesive protein originating from arctic bacteria,
 +
                we <a href="https://2018.igem.org/Team:TU-Eindhoven/Results">successfully</a> reduced bacterial leakage by inducing genetically engineered <em>E. coli</em> to bind
 +
                 to a dextran hydrogel with macroporous character. We used the modularity of our platform in a wound
 +
                healing application, integrating in our design insights from our <a href="https://2018.igem.org/Team:TU-Eindhoven/Model">models</a> and <a href="https://2018.igem.org/Team:TU-Eindhoven/Human_Practices#stakeholder-container">feedback from stakeholders</a>.
 +
                 We believe we have successfully completed all <a href="https://2018.igem.org/Team:TU-Eindhoven/Medal_Requirements">medal requirements</a> and have managed to <a href="https://2018.igem.org/Team:TU-Eindhoven/Results">demonstate</a> our
 +
                project in a prototype.
 
             </p>
 
             </p>
−
            <h3>adfe erera dfea fedf</h3>
+
        </div>
−
             <p>dja afke a ereka ereafe jrerjw que ale rjei arj aije li pizqq qpozmfjwm  kjeoif e koaejk
+
       
−
                efjejklad jkaf zhcmnvbzl jhua a e eioianei lknkcikl, kdijk aoieujkjzialkdjkuiuae wie als
+
        <div class="bgimg-2">
−
                 aeiakeru  er a iuekajr eraierla euaiqpqqerutvnghs seis eaeija ;oiejner ajeriskala apia.
+
             <div class="caption">
−
             </p>  
+
            <span id="tueMessage" class="border" style="background-color:rgba(255, 255, 255,0.5); font-size:25px;color: #312626;">
 +
                 Made with <span style="color:red">❤</span> from <span style="color:red">TU/e</span>
 +
             </span>
 
             </div>
 
             </div>
 +
        </div>
 +
       
 +
        </div>
 +
    </div>
  
−
            <div class="sect">
+
    <div id="videoModal" class="figureModalWindow">
−
            <h2>aoicudbshduy xuayw dsduywmjddh</h2>
+
−
            <p>dja afke a ereka ereafe jrerjw que ale rjei arj aije li pizqq qpozmfjwm  kjeoif e koaejk
+
−
                efjejklad jkaf zhcmnvbzl jhua a e eioianei lknkcikl, kdijk aoieujkjzialkdjkuiuae wie als
+
−
                aeiakeru  er a iuekajr eraierla euaiqpqqerutvnghs seis eaeija ;oiejner ajeriskala apia.
+
−
            </p>
+
−
            <h3>akjbkcx uiusywh ljlkuoiqwd</h3>
+
−
            <p>dja afke a ereka ereafe jrerjw que ale rjei arj aije li pizqq qpozmfjwm  kjeoif e koaejk
+
−
                efjejklad jkaf zhcmnvbzl jhua a e eioianei lknkcikl, kdijk aoieujkjzialkdjkuiuae wie als
+
−
                aeiakeru  er a iuekajr eraierla euaiqpqqerutvnghs seis eaeija ;oiejner ajeriskala apia.
+
−
            </p>
+
−
            <h3>qw adaiuoc uy yuwjdb</h3>
+
−
            <p>dja afke a ereka ereafe jrerjw que ale rjei arj aije li pizqq qpozmfjwm  kjeoif e koaejk
+
−
                efjejklad jkaf zhcmnvbzl jhua a e eioianei lknkcikl, kdijk aoieujkjzialkdjkuiuae wie als
+
−
                aeiakeru  er a iuekajr eraierla euaiqpqqerutvnghs seis eaeija ;oiejner ajeriskala apia.
+
−
            </p>   
+
−
            </div>
+
  
−
            <div class="sect">
+
        <!-- The Close Button -->
−
            <h2>asdfgrtyucvbnfgh wwdds</h2>
+
        <span class="closeFigure">&times;</span>
−
            <p>dja afke a ereka ereafe jrerjw que ale rjei arj aije li pizqq qpozmfjwm  kjeoif e koaejk
+
       
−
                efjejklad jkaf zhcmnvbzl jhua a e eioianei lknkcikl, kdijk aoieujkjzialkdjkuiuae wie als
+
        <!-- Modal Content (The Image) -->
−
                aeiakeru  er a iuekajr eraierla euaiqpqqerutvnghs seis eaeija ;oiejner ajeriskala apia.
+
        <video controls playsinline loop poster="https://static.igem.org/mediawiki/2018/a/ad/T--TU-Eindhoven--homepageVideoThumbnail.jpeg">
−
            </p>
+
             <source src="https://static.igem.org/mediawiki/2018/5/5c/T--TU-Eindhoven--FullscreenVideo.mp4" type="video/mp4">
−
            <h3>akjsdhk qdqoi nhasdq ooizc</h3>
+
         </video>
−
            <p>dja afke a ereka ereafe jrerjw que ale rjei arj aije li pizqq qpozmfjwm  kjeoif e koaejk
+
−
                efjejklad jkaf zhcmnvbzl jhua a e eioianei lknkcikl, kdijk aoieujkjzialkdjkuiuae wie als
+
−
                aeiakeru  er a iuekajr eraierla euaiqpqqerutvnghs seis eaeija ;oiejner ajeriskala apia.
+
−
            </p>
+
−
            <h3>asdhkqw ahsdjkqh qowsqljj csd</h3>
+
−
            <p>dja afke a ereka ereafe jrerjw que ale rjei arj aije li pizqq qpozmfjwm  kjeoif e koaejk
+
−
                efjejklad jkaf zhcmnvbzl jhua a e eioianei lknkcikl, kdijk aoieujkjzialkdjkuiuae wie als
+
−
                aeiakeru  er a iuekajr eraierla euaiqpqqerutvnghs seis eaeija ;oiejner ajeriskala apia.
+
−
            </p>  
+
−
             </div>
+
−
 
+
−
    <!-- template:footer -->
+
−
         </div>
+
 
     </div>
 
     </div>
−
    <!-- footer starts -->
 
−
    <div class="footer" id="footer-container">
 
−
        <div class="contact-tue">
 
−
            - facebook
 
−
            - email
 
−
            - twitter
 
−
        </div>
 
−
        <div class="sponsors-list row">
 
−
            <div class="col-xs-6 col-xl-3 col-lg-4 col-sm-6">
 
−
                <a href="https://www.microsoft.com">
 
−
                    <img class="sponsoren" src="../images/playwith/2000px-Microsoft_logo_(2012).svg.png">
 
−
                </a>
 
−
            </div>
 
  
−
            <div class="col-xs-6 col-xl-3 col-lg-4 col-sm-6">
 
−
                <a href="https://www.microsoft.com">
 
−
                    <img class="sponsoren" src="../images/playwith/2000px-KLM_logo.svg.png">
 
−
                </a>
 
−
            </div>
 
  
−
            <div class="col-xs-6 col-xl-3 col-lg-4 col-sm-6">
 
−
                <a href="https://www.microsoft.com">
 
−
                    <img class="sponsoren" src="../images/playwith/2000px-Google_2015_logo.svg.png">
 
−
                </a>
 
−
            </div>
 
  
−
            <div class="col-xs-6 col-xl-3 col-lg-4 col-sm-6">
 
−
                <a href="https://www.microsoft.com">
 
−
                    <img class="sponsoren" src="../images/playwith/intel.png">
 
−
                </a>
 
−
            </div>
 
−
 
−
            <div class="col-xs-6 col-xl-3 col-lg-4 col-sm-6">
 
−
                <a href="https://www.microsoft.com">
 
−
                    <img class="sponsoren" src="../images/playwith/Philips shield 2013.png">
 
−
                </a>
 
−
            </div>
 
−
            <div class="col-xs-6 col-xl-3 col-lg-4 col-sm-6">
 
−
                <a href="https://www.microsoft.com">
 
−
                    <img class="sponsoren" src="../images/playwith/huawei.png">
 
−
                </a>
 
−
            </div>
 
−
        </div>
 
−
    </div>
 
 
</html>
 
</html>
 
{{:Team:TU-Eindhoven/footer}}
 
{{:Team:TU-Eindhoven/footer}}

Latest revision as of 23:36, 17 October 2018

Welcome to GelCatraz: Where E. coli goes to stay!

Living biomaterials are an innovative type of device with wide-ranging implications. Combining the flexibility of living cells with biocompatiblematerials, this new class of devices is expected to impact many fields and assist society in dealing with the challenges ahead. Bacterial are a particularly attractive platform since they can be genetically "tailored" to produce many different types of proteins in response to almost any known type of chemical, physical or biological change.

Unfortunately, this potential is held back by challenges like maintaining the viability, functionality and safety of the living components in freestanding materials and devices. One of the biggest challenges in applying this emerging technology to real-world problems preventing bacterial leakage while allowing for adequate diffusion of nutrients and products. In our project, we aimed to bring the application of living materials a step closer to being realized. In the past several months we have worked on our design of a novel platform. Using an adhesive protein originating from arctic bacteria, we successfully reduced bacterial leakage by inducing genetically engineered E. coli to bind to a dextran hydrogel with macroporous character. We used the modularity of our platform in a wound healing application, integrating in our design insights from our models and feedback from stakeholders. We believe we have successfully completed all medal requirements and have managed to demonstate our project in a prototype.

Made with ❤ from TU/e
×