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

 
(10 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
{{:Team:TU-Eindhoven/NavMenu}}
 
{{:Team:TU-Eindhoven/NavMenu}}
 
<html>
 
<html>
−
<div id="main" class="container">
+
 
−
        <div class="row">
+
<head>
−
             <div id="introDiv" class="col-xs-12 introduction">
+
    <style>
−
                <h1 style="text-align: center;">Introduction <b style="color:red">h1</b></h1>
+
        body, html {
−
                <p>From the beginning, the Human Practices took a central role in shaping our
+
             height: 100%;
−
                    project. When we started our brainstorm sessions in March, we had no clue which
+
            margin: 0;
−
                    topic we wanted to explore. Yet, we wanted it to be relevant to society.
+
            font: 400 15px/1.8 "Lato", sans-serif;
−
                    During these first months, we got the opportunity to interact with experts
+
            color: #777;
−
                    and the public to discuss our ideas. These encounters were of great help in
+
        }
−
                    our topic selection. During a visit to the Dutch Institute for Public Health
+
       
−
                    and the Environment (RIVM) and the Rathenau Instituut (Dutch organization for
+
        .bgimg-1,
−
                    technology assessment), we realized that the lack of a safe platform for
+
        .bgimg-2,
−
                    working with GMOs outside of controlled environments is a problem on itself
+
        .bgimg-3 {
−
                    that deserves a solution. We were excited to tackle this issue with
+
            position: relative;
−
                    Gelcatraz, but also wanted to work towards a more concrete application. In
+
            /* opacity: 0.65; */
−
                    the time that followed, we consulted several experts and interacted with the
+
            background-attachment: fixed;
−
                    public to get feedback on our proposals. Once we had settled on the wound
+
            background-position: center;
−
                    healing application, we interacted with more stakeholders and experts to
+
            background-repeat: no-repeat;
−
                    shape the design of the wound healing patch. We realize that our project
+
            background-size: cover;
−
                    would not have been the same without the Human Practices. In the following
+
        }
−
                    section, we share the insights we gained from interactions with stakeholders
+
        .bgimg-1 {
−
                    and experts during the three main stages of the project: finding a project,
+
            background-image: url(https://static.igem.org/mediawiki/2018/c/c9/T--TU-Eindhoven--BgImg1.jpeg);
−
                    finding an application  and shaping the design .
+
            min-height: 500px;
−
                </p>
+
        }
−
             </div>
+
       
 +
        .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%);
 +
 
 +
          /* 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>
 +
 
 +
 
 +
 
 +
 
 +
    <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">
 +
            <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>
  
 +
    <div class="container-fluid">
 
         <div class="row">
 
         <div class="row">
−
            <div class="col-xs-12 col-sm-12 col-md-3 col-lg-2 col-xl-2 toc-column">
+
        <div>
−
                <div class="toc-wrapper">
+
            <!-- if our video is ready -->
−
                    <li>
+
        </div>
−
                        <ul id="tableOfContent">
+
        <div class="bgimg-1">
−
                            <p>The best that most of us can hope to achieve in physics is simply to misunderstand at a deeper level.</p>
+
            <div class="caption">
−
                        </ul>
+
                <span class="border">Welcome to GelCatraz: Where <em>E. coli</em> goes to stay!</span>
−
                        <a class="backToTop" onclick="topFunction()">▲</a>
+
−
                    </li>
+
−
                </div>
+
 
             </div>
 
             </div>
−
            <div class="col-xs-12 col-sm-12 col-md-9 col-lg-10 col-xl-8 docs">
+
        </div>
−
                <section>
+
       
−
                    <h2>What is Lorem Ipsum <b style="color:red">h2</b></h2>
+
        <div style="color: #777;background-color:white;padding:50px 25%;text-align:justify;">
−
                    <div class="figureWrapper figureRight">
+
            <p>Living biomaterials are an innovative type  of device with wide-ranging implications. Combining the
−
                        <div class="figureFrame">
+
                flexibility of living cells with biocompatiblematerials, this new class of devices is expected to
−
                            <a href=""><img class="figure" src="https://static.igem.org/mediawiki/2018/thumb/2/24/T--WPI_Worcester--goat3.png/180px-T--WPI_Worcester--goat3.png"></a>
+
                impact many fields and assist society in dealing with the challenges ahead. Bacterial are a
−
                            <div class="figureCaption">
+
                particularly attractive platform since they can be genetically "tailored" to produce many different
−
                                <p>
+
                types of proteins in response to almost any known type of chemical, physical or biological change.
−
                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
+
            </p>
−
                                    has been the industry's standard dummy text ever since the 1500s, when an unknown
+
            <p>
−
                                    printer took a galley of type.
+
                Unfortunately, this potential is held back by challenges like maintaining the viability, functionality
−
                                </p>
+
                and safety of the living components  in freestanding materials and devices. One of the biggest
−
                            </div>
+
                 challenges in applying this emerging technology to real-world problems preventing bacterial leakage
−
                        </div>
+
                 while allowing for adequate diffusion of nutrients and products. In our project, we aimed to bring the
−
                    </div>
+
                application of living materials a step closer to being realized. In the past several months we have
−
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+
                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,
−
                    <h3>zheshemenshierhie <b style="color:red">h3</b></h3>
+
                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
−
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+
                to a dextran hydrogel with macroporous character. We used the modularity of our platform in a wound
−
                    <h3>zheshenemerhie</h3>
+
                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>.
−
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+
                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
−
                 </section>
+
                project in a prototype.
−
                 <section>
+
            </p>
−
                    <h2>What is Lorem Ipsum</h2>
+
        </div>
−
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+
       
−
                    <h3>zhhishenemehie</h3>
+
        <div class="bgimg-2">
−
                    <p>
+
            <div class="caption">
−
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
+
            <span id="tueMessage" class="border" style="background-color:rgba(255, 255, 255,0.5); font-size:25px;color: #312626;">
−
                        has been the industry's standard dummy text ever since the 1500s, when an unknown
+
                Made with <span style="color:red">❤</span> from <span style="color:red">TU/e</span>
−
                        printer took a galley of type and scrambled it to make a type specimen book. It has
+
            </span>
−
                        survived not only five centuries, but also the leap into electronic typesetting,
+
−
                        remaining essentially unchanged. It was popularised in the 1960s with the release of
+
−
                        Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
+
−
                        publishing software like <span class="klk2elaborate">Aldus PageMaker</span> including
+
−
                        versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and
+
−
                        typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever
+
−
                        since the 1500s, when an unknown printer took a galley.
+
−
                    </p>
+
−
                    <blockquote class="explanation disappear" id="AldusPageMaker">
+
−
                        <h4>Aldus PageMaker</h4>
+
−
                        Now is Adobe InDesign - The next page in layout design.
+
−
                        The industry-leading page design and layout app lets you create, preflight, and publish beautiful documents for print and digital media. InDesign CC has everything you need to make posters, books, digital magazines, eBooks, interactive PDFs, and more.
+
−
                    </blockquote>
+
−
 
+
−
                    <h3>zishenemenshie</h3>
+
−
                    <div class="figureWrapper figureMiddle">
+
−
                        <div class="figureFrame">
+
−
                            <a href=""><img class="figure" src="https://static.igem.org/mediawiki/2018/thumb/2/24/T--WPI_Worcester--goat3.png/450px-T--WPI_Worcester--goat3.png"></a>
+
−
                            <div class="figureCaption">
+
−
                                <p>
+
−
                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
+
−
                                    has been the industry's standard dummy text ever since the 1500s, when an unknown
+
−
                                    printer took a galley of type.
+
−
                                </p>
+
−
                            </div>
+
−
                        </div>
+
−
                    </div>
+
−
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+
−
                    <h3>zshenemenshe</h3>
+
−
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+
−
                </section>
+
−
                <section>
+
−
                    <h2>What is Lorem Ipsum?</h2>
+
−
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+
−
                    <h3>zhisheneshierhe</h3>
+
−
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+
−
                    <h3>zheimeee</h3>
+
−
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+
−
                </section>
+
 
             </div>
 
             </div>
−
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-2 placeholder"></div>
+
        </div>
 +
       
 
         </div>
 
         </div>
 
     </div>
 
     </div>
−
</html>
 
  
 +
    <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
×