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

 
(26 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">
 +
            <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 class="container-fluid">
 +
        <div class="row">
 +
        <div>
 +
            <!-- if our video is ready -->
 +
        </div>
 +
        <div class="bgimg-1">
 +
            <div class="caption">
 +
                 <span class="border">Welcome to GelCatraz: Where <em>E. coli</em> goes to stay!</span>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
−
         <div id="docContent" class="doc-content col-xs-12 col-sm-12 col-md-8 col-lg-9 col-xl-9">
+
       
−
            <script>
+
         <div style="color: #777;background-color:white;padding:50px 25%;text-align:justify;">
−
                var bGenerateCat=true;
+
             <p>Living biomaterials are an innovative type  of device with wide-ranging implications. Combining the
−
            </script>
+
                 flexibility of living cells with biocompatiblematerials, this new class of devices is expected to
−
            <script src="https://2018.igem.org/Team:TU-Eindhoven/D3JS?action=raw&ctype=text/javascript"></script>
+
                 impact many fields and assist society in dealing with the challenges ahead. Bacterial are a
−
            <h1>Welcome to iGEM TU Eindhoven 2018! </h1>
+
                particularly attractive platform since they can be genetically "tailored" to produce many different
−
            <div class="sect">
+
                types of proteins in response to almost any known type of chemical, physical or biological change.
−
            <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>
 
             </p>
−
             <h3>qweasdf df sdf trfghdnnmnbe e</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>aeiurw qeqrejl ahxjabvzkai erwoq</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>Calibration</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>aera jliaqlkjeq a znkjkaeroehaer</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>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 class="sect">
+
−
            <h2>Comparison and Improvement</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>daf erije ljlwr jiwerk jkloe</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>adfe erera dfea fedf</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 -->
+
        <!-- The Close Button -->
−
         </div>
+
        <span class="closeFigure">&times;</span>
 +
       
 +
        <!-- Modal Content (The Image) -->
 +
        <video controls playsinline loop poster="https://static.igem.org/mediawiki/2018/a/ad/T--TU-Eindhoven--homepageVideoThumbnail.jpeg">
 +
            <source src="https://static.igem.org/mediawiki/2018/5/5c/T--TU-Eindhoven--FullscreenVideo.mp4" type="video/mp4">
 +
         </video>
 
     </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}}

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
×