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

 
(19 intermediate revisions by the same user not shown)
Line 2: Line 2:
 
<html>
 
<html>
  
−
<div id="docContent" class="doc-content col-xs-12 col-sm-12 col-md-8 col-lg-9 col-xl-9">
+
<head>
−
             <script>
+
    <style>
−
                var bGenerateCat=true;
+
        body, html {
−
            </script>
+
            height: 100%;
−
             <script src="https://2018.igem.org/Team:TU-Eindhoven/D3JS?action=raw&ctype=text/javascript"></script>
+
            margin: 0;
−
            <h1>Welcome to iGEM TU Eindhoven 2018! </h1>
+
            font: 400 15px/1.8 "Lato", sans-serif;
−
             <div class="sect">
+
            color: #777;
−
             <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
+
        .bgimg-1,
−
                changes by expressing specific gene sets. This makes living cells attractive to use in small
+
        .bgimg-2,
−
                devices and smart materials. Bacterial cells are particularly attractive since they can be
+
        .bgimg-3 {
−
                genetically "tailored" to produce many different types of proteins in response to almost any
+
            position: relative;
−
                known type of chemical, physical or biological stress.</p>
+
            /* opacity: 0.65; */
−
             <h3>qtueopoetnx noloja  jeoirjla hkjw ajwe</h3>
+
            background-attachment: fixed;
−
             <p>Unfortunately, exploiting this potential is held back by challenges like maintaining the
+
            background-position: center;
−
                viability, functionality and safety of the living components in freestanding materials and
+
            background-repeat: no-repeat;
−
                devices. The bacteria can be contained in a gel, but if they leak out and escape into the
+
             background-size: cover;
−
                environment they may cause major problems.</p>
+
        }
−
             <h3>dfer  se sre s gfsesaaw</h3>
+
        .bgimg-1 {
−
             <p>We aim to design a living material in which the bacteria are immobilized within the hydrogel
+
             background-image: url(https://static.igem.org/mediawiki/2018/c/c9/T--TU-Eindhoven--BgImg1.jpeg);
−
                by using an adhesive protein which originates from an Antarctic bacteria. In this way, we’ll
+
            min-height: 500px;
−
                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
+
        .bgimg-2 {
−
                pathogenic bacteria, which dramatically slow down wound healing and are increasingly
+
            background-image: url(https://static.igem.org/mediawiki/2018/a/ad/T--TU-Eindhoven--homepageVideoThumbnail.jpeg);
−
                becoming resistant to antibiotics. Bandages may prevent infections to some extent, but they
+
             min-height: 400px;
−
                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
+
        .bgimg-3 {
−
                staphylocci, which are currently the most common cause of infections in hospitalized
+
            background-image: url("/images/frontpage/sissy.jpg");
−
                patients. In this way, a wound healing hydrogel can be created. This hydrogel can be easily
+
             min-height: 400px;
−
                and safely applied as a patch on the skin. This way, our living material will form a
+
        }
−
                convenient alternative to <span class="klk2elaborate">example of dropdown elaboration</span>.
+
       
−
                <div class="explanation">
+
        .caption {
−
                    <blockquote>
+
             position: absolute;
−
                        <p>
+
            left: 0;
−
                            a afke a ereka ereafe jrerjw que ale rjei arj aije li pizqq qpozmfjwm  kjeoif e koaejk
+
            top: 50%;
−
                            efjejklad jkaf zhcmnvbzl jhua a e eioianei lknkcikl, kdijk aoieujkjzialkdjkuiuae wie als
+
            width: 100%;
−
                            aeiakeru  er a iuekajr eraierla euaiqpqqerutvnghs se
+
             text-align: center;
−
                        </p>
+
            color: #000;
−
                    </blockquote>
+
        }
−
                </div>
+
       
−
            </p>
+
        .caption span.border {
−
            </div>
+
             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%);
  
−
            <div class="sect">
+
          /* font-size: 7vw; */
−
            <h2>Calibration</h2>
+
          line-height: 1.5em;
−
            <p>dja afke a ereka ereafe jrerjw que ale rjei arj aije li pizqq qpozmfjwm  kjeoif e koaejk
+
          color: rgb(141, 49, 194);
−
                efjejklad jkaf zhcmnvbzl jhua a e eioianei lknkcikl, kdijk aoieujkjzialkdjkuiuae wie als
+
          text-align: center;
−
                aeiakeru  er a iuekajr eraierla euaiqpqqerutvnghs seis eaeija ;oiejner ajeriskala apia.
+
          font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
−
            </p>
+
          /* display: none; */
−
             <h3>aera jliaqlkjeq a znkjkaeroehaer</h3>
+
        }
−
             <p>dja afke a ereka ereafe jrerjw que ale rjei arj aije li pizqq qpozmfjwm  kjeoif e koaejk
+
        .playBtn {
−
                efjejklad jkaf zhcmnvbzl jhua a e eioianei lknkcikl, kdijk aoieujkjzialkdjkuiuae wie als
+
             background-color:transparent;
−
                aeiakeru  er a iuekajr eraierla euaiqpqqerutvnghs seis eaeija ;oiejner ajeriskala apia.
+
             border-width: 0px;
−
             </p>
+
        }
−
             <h3>jkjiejfa rekl qqer p omm jkjrijer</h3>
+
        .playBtn img {
−
             <p>dja afke a ereka ereafe jrerjw que ale rjei arj aije li pizqq qpozmfjwm  kjeoif e koaejk
+
            width:100px;
−
                efjejklad jkaf zhcmnvbzl jhua a e eioianei lknkcikl, kdijk aoieujkjzialkdjkuiuae wie als
+
            opacity:0.2;
−
                aeiakeru  er a iuekajr eraierla euaiqpqqerutvnghs seis eaeija ;oiejner ajeriskala apia.
+
        }
−
             </p>
+
        .playBtn:hover img {
−
             <form>
+
             opacity:0.7;
−
                <label><input type="radio" name="mode" value="grouped"> Grouped</label>
+
        }
−
                <label><input type="radio" name="mode" value="stacked" checked> Stacked</label>
+
        #videoModal video {
−
             </form>
+
             width: 85%;
−
              
+
             margin:0 auto;
−
             <script src="https://d3js.org/d3.v4.min.js"></script>
+
            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;
 +
        }
  
−
            </div>
+
    </style>
 +
</head>
  
−
             <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
+
    <div class="jumbotron neat">
−
                 aeiakeru  er a iuekajr eraierla euaiqpqqerutvnghs seis eaeija ;oiejner ajeriskala apia.
+
        <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 style="color: #777;background-color:white;padding:50px 25%;text-align:justify;">
 +
             <p>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.
 
             </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>
−
</html>
+
       
 +
        </div>
 +
    </div>
  
 +
    <div id="videoModal" class="figureModalWindow">
 +
 +
        <!-- The Close Button -->
 +
        <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>
 +
 +
 +
 +
</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
×