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

 
(2 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>
+
    <style>
 
         body, html {
 
         body, html {
 
             height: 100%;
 
             height: 100%;
Line 21: Line 22:
 
         }
 
         }
 
         .bgimg-1 {
 
         .bgimg-1 {
−
             background-image: url("/images/frontpage/center.jpg");
+
             background-image: url(https://static.igem.org/mediawiki/2018/c/c9/T--TU-Eindhoven--BgImg1.jpeg);
 
             min-height: 500px;
 
             min-height: 500px;
 
         }
 
         }
 
          
 
          
 
         .bgimg-2 {
 
         .bgimg-2 {
−
             background-image: url("/images/frontpage/plazza.jpg");
+
             background-image: url(https://static.igem.org/mediawiki/2018/a/ad/T--TU-Eindhoven--homepageVideoThumbnail.jpeg);
 
             min-height: 400px;
 
             min-height: 400px;
 
         }
 
         }
Line 45: Line 46:
 
          
 
          
 
         .caption span.border {
 
         .caption span.border {
 +
            line-height: 150%;
 
             background-color: #111;
 
             background-color: #111;
 
             color: #fff;
 
             color: #fff;
 
             padding: 18px;
 
             padding: 18px;
 
             font-size: 25px;
 
             font-size: 25px;
−
             letter-spacing: 10px;
+
             letter-spacing: 3px;
 
         }
 
         }
 
          
 
          
 
         h3 {
 
         h3 {
−
            letter-spacing: 5px;
 
 
             text-transform: uppercase;
 
             text-transform: uppercase;
 
             font: 20px "Lato", sans-serif;
 
             font: 20px "Lato", sans-serif;
Line 69: Line 70:
 
         .jumbotron{
 
         .jumbotron{
 
           padding:0;
 
           padding:0;
 +
          position:relative;
 
         }
 
         }
 
         video#bgvid {  
 
         video#bgvid {  
Line 111: Line 113:
 
         }
 
         }
 
         #videoModal video {
 
         #videoModal video {
−
             width: 80%;
+
             width: 85%;
 
             margin:0 auto;
 
             margin:0 auto;
 
             top: 50%;
 
             top: 50%;
 
             left: 50%;
 
             left: 50%;
−
             transform: translateX(12.5%) translateY(10%);
+
             transform: translateX(9%) translateY(9%);
 
         }
 
         }
 
         #videoModal {
 
         #videoModal {
Line 122: Line 124:
 
         .closeFigure {
 
         .closeFigure {
 
             position:fixed;
 
             position:fixed;
−
             top:100px;
+
             top:25px;
−
             right:100px;
+
             right:45px;
 
         }
 
         }
 +
        #tueMessage:hover {
 +
            background-color:rgba(255, 255, 255, 0.746);
 +
        }
 +
        #tueMessage {
 +
            cursor:default;
 +
        }
 +
        a:hover{
 +
            text-decoration: none;
 +
        }
 +
 
     </style>
 
     </style>
 
</head>
 
</head>
 +
 +
 +
  
 
     <div class="jumbotron neat">
 
     <div class="jumbotron neat">
 
         <video id="bgvid" playsinline autoplay muted loop poster="https://static.igem.org/mediawiki/2018/a/ad/T--TU-Eindhoven--homepageVideoThumbnail.jpeg">
 
         <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/5/5c/T--TU-Eindhoven--FullscreenVideo.mp4" type="video/mp4">
+
             <source src="https://static.igem.org/mediawiki/2018/1/18/T--TU-Eindhoven--ShortVideoMuted.mp4" type="video/mp4">
 
         </video>
 
         </video>
 
         <!-- <div class="video-text">
 
         <!-- <div class="video-text">
Line 149: Line 164:
 
         <div class="bgimg-1">
 
         <div class="bgimg-1">
 
             <div class="caption">
 
             <div class="caption">
−
            <span class="border">WELCOME TO GELCATRAZ</span>
+
                <span class="border">Welcome to GelCatraz: Where <em>E. coli</em> goes to stay!</span>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
          
 
          
−
         <div style="color: #777;background-color:white;text-align:center;padding:50px 20%;text-align: justify;">
+
         <div style="color: #777;background-color:white;padding:50px 25%;text-align:justify;">
−
             <h3 style="text-align:center;">Narrow Demo</h3>
+
             <p>Living biomaterials are an innovative type  of device with wide-ranging implications. Combining the
−
             <p>Parallax scrolling is a web site trend where the background content
+
                flexibility of living cells with biocompatiblematerials, this new class of devices is expected to
−
            is moved at a different speed than the foreground content while
+
                impact many fields and assist society in dealing with the challenges ahead. Bacterial are a
−
        scrolling. Nascetur per nec posuere turpis, lectus nec libero turpis
+
                particularly attractive platform since they can be genetically "tailored" to produce many different
−
        nunc at, sed posuere mollis ullamcorper libero ante lectus, blandit
+
                types of proteins in response to almost any known type of chemical, physical or biological change.
−
        pellentesque a, magna turpis est sapien duis blandit dignissim. Viverra
+
            </p>
−
        interdum mi magna mi, morbi sociis. Condimentum dui ipsum consequat
+
             <p>
−
        morbi, curabitur aliquam pede, nullam vitae eu placerat eget et
+
                Unfortunately, this potential is held back by challenges like maintaining the viability, functionality
−
        vehicula. Varius quisque non molestie dolor, nunc nisl dapibus
+
                and safety of the living components  in freestanding materials and devices. One of the biggest
−
        vestibulum at, sodales tincidunt mauris ullamcorper, dapibus pulvinar,
+
                challenges in applying this emerging technology to real-world problems preventing bacterial leakage
−
        in in neque risus odio. Accumsan fringilla vulputate at quibusdam sociis
+
                while allowing for adequate diffusion of nutrients and products. In our project, we aimed to bring the
−
            eleifend, aenean maecenas vulputate, non id vehicula lorem mattis,
+
                application of living materials a step closer to being realized. In the past several months we have
−
        ratione interdum sociis ornare. Suscipit proin magna cras vel, non sit
+
                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,
−
        platea sit, maecenas ante augue etiam maecenas, porta porttitor placerat
+
                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
−
             leo.</p>
+
                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>
 
         </div>
 
         </div>
 
          
 
          
 
         <div class="bgimg-2">
 
         <div class="bgimg-2">
 
             <div class="caption">
 
             <div class="caption">
−
             <span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">LESS HEIGHT</span>
+
             <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 style="position:relative;">
 
−
            <div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 20%;text-align: justify;">
 
−
            <p style="color:#ddd;">Scroll up and down to really get the feeling of how Parallax Scrolling works.</p>
 
−
            </div>
 
 
         </div>
 
         </div>
 +
    </div>
 +
 +
    <div id="videoModal" class="figureModalWindow">
 +
 +
        <!-- The Close Button -->
 +
        <span class="closeFigure">&times;</span>
 
          
 
          
−
         <div class="bgimg-3">
+
         <!-- Modal Content (The Image) -->
−
            <div class="caption">
+
        <video controls playsinline loop poster="https://static.igem.org/mediawiki/2018/a/ad/T--TU-Eindhoven--homepageVideoThumbnail.jpeg">
−
            <span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">SCROLL UP</span>
+
             <source src="https://static.igem.org/mediawiki/2018/5/5c/T--TU-Eindhoven--FullscreenVideo.mp4" type="video/mp4">
−
            </div>
+
         </video>
−
        </div>
+
−
       
+
−
        <div style="position:relative;">
+
−
            <div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 20%;text-align: justify;">
+
−
             <p style="color:#ddd;">Scroll up and down to really get the feeling of how Parallax Scrolling works.</p>
+
−
            </div>
+
−
        </div>
+
−
       
+
−
        <div class="bgimg-1">
+
−
            <div class="caption">
+
−
            <span class="border">COOL!</span>
+
−
            </div>
+
−
        </div>
+
−
         </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
×