Difference between revisions of "Team:Stuttgart"

Line 4: Line 4:
  
 
<head>
 
<head>
−
     <script>
+
     <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"
−
 
+
          id="bootstrap-css">
−
        // This is the jquery part of your template.
+
−
        // Try not modify any of this code too much since it makes your menu work.
+
−
 
+
−
        $(document).ready(function () {
+
−
 
+
−
            $("#HQ_page").attr('id', '');
+
−
 
+
−
            // call the functions that control the menu
+
−
            menu_functionality();
+
−
            hide_show_menu();
+
−
 
+
−
 
+
−
            //this function controls the expand and collapse buttons of the menu and changes the +/- symbols
+
−
            function menu_functionality() {
+
−
 
+
−
                //when clicking on a "menu_button", it will change the "+/-" accordingly and it will show/hide the corresponding submenu
+
−
                $(".menu_button").click(function () {
+
−
 
+
−
                    // add or remove the class "open" , this class holds the "-"
+
−
                    $(this).children().toggleClass("open");
+
−
                    // show or hide the submenu
+
−
                    $(this).next('.submenu_wrapper').fadeToggle(400);
+
−
                });
+
−
 
+
−
                // when the screen size is smaller than 800px, the display_menu_control button appears and will show/hide the whole menu
+
−
                $("#display_menu_control").click(function () {
+
−
                    $('#menu_content').fadeToggle(400);
+
−
                });
+
−
 
+
−
                // call the current page highlight function
+
−
                highlight_current_page();
+
−
            }
+
−
 
+
−
 
+
−
            // call the highlight current page function to show it on the menu with a different background color
+
−
            function highlight_current_page() {
+
−
 
+
−
                // select a page from the menu based on the id assigned to it and the current page name and add the class "current page" to make it change background color
+
−
                $("#" + wgPageName.substring(wgPageName.lastIndexOf("/") + 1, wgPageName.length) + "_page").addClass("current_page");
+
−
 
+
−
                // now that the current_page class has been added to a menu item, make the submenu fade in
+
−
                $(".current_page").parents(".submenu_wrapper").fadeIn(400);
+
−
                // change the +/- symbol of the corresponding menu button
+
−
                $(".current_page").parents(".submenu_wrapper").prev().children().toggleClass("open");
+
−
 
+
−
            }
+
−
 
+
−
 
+
−
            // allow button on the black menu bar to show/hide the side menu
+
−
            function hide_show_menu() {
+
−
 
+
−
                // in case you preview mode is selected, the menu is hidden for better visibility
+
−
                if (window.location.href.indexOf("submit") >= 0) {
+
−
                    $(".igem_2017_menu_wrapper").hide();
+
−
                }
+
−
 
+
−
                // if the black menu bar has been loaded
+
−
                if (document.getElementById('bars_item')) {
+
−
 
+
−
                    // when the "bars_item" has been clicked
+
−
                    $("#bars_item").click(function () {
+
−
                        $("#sideMenu").hide();
+
−
 
+
−
                        // show/hide the menu wrapper
+
−
                        $(".igem_2017_menu_wrapper").fadeToggle("100");
+
−
                    });
+
−
                }
+
−
 
+
−
                // because the black menu bars loads at a different time than the rest of the page, this function is set on a time out so it can run again in case it has not been loaded yet
+
−
                else {
+
−
                    setTimeout(hide_show_menu, 15);
+
−
                }
+
−
            }
+
−
 
+
−
 
+
−
        });
+
−
 
+
−
 
+
−
    </script>
+
−
 
+
 
     <style>
 
     <style>
  
Line 180: Line 100:
 
         .igem_2017_menu_wrapper .menu_button .expand_collapse_icon::before {
 
         .igem_2017_menu_wrapper .menu_button .expand_collapse_icon::before {
 
             content: "+";
 
             content: "+";
−
        }
 
−
 
−
        .open::before {
 
−
            content: "-" !important;
 
 
         }
 
         }
  
Line 413: Line 329:
 
         body {
 
         body {
 
             overflow-x: hidden;
 
             overflow-x: hidden;
−
        }
+
             margin-top: 80px;
−
 
+
−
        .img-responsive {
+
−
            display: block;
+
−
            max-width: 100%;
+
−
            height: auto;
+
−
        }
+
−
 
+
−
        .row:before {
+
−
            content: " ";
+
−
            display: table;
+
−
        }
+
−
 
+
−
        .row:after {
+
−
            clear: both;
+
−
        }
+
−
 
+
−
        .row {
+
−
             margin-left: -5px;
+
−
            margin-right: -5px;
+
−
        }
+
−
 
+
−
        .row .col-40 {
+
−
            position: relative;
+
−
            min-height: 1px;
+
−
            float: left;
+
−
            width: 40%;
+
−
            padding-left: 15px;
+
−
            padding-right: 15px;
+
−
        }
+
−
 
+
−
        .row .col-50 {
+
−
            position: relative;
+
−
            min-height: 1px;
+
−
            float: left;
+
−
            width: 50%;
+
−
            padding-left: 15px;
+
−
            padding-right: 15px;
+
−
        }
+
−
 
+
−
        .row .col-60 {
+
−
            position: relative;
+
−
            min-height: 1px;
+
−
            float: left;
+
−
            width: 60%;
+
−
            padding-left: 15px;
+
−
            padding-right: 15px;
+
 
         }
 
         }
  
Line 495: Line 365:
 
                 padding-left: 17px;
 
                 padding-left: 17px;
 
             }
 
             }
−
 
−
            .row .col-40 {
 
−
                width: 50%;
 
−
            }
 
−
 
−
            .row .col-50 {
 
−
                width: 50%;
 
−
            }
 
−
 
−
            .row .col-60 {
 
−
                width: 50%;
 
−
            }
 
−
 
 
         }
 
         }
  
Line 549: Line 406:
 
             .menu_button.direct_to_page {
 
             .menu_button.direct_to_page {
 
                 padding-left: 36px;
 
                 padding-left: 36px;
−
            }
 
−
 
−
            /* TABLES */
 
−
            .row .col-40 {
 
−
                width: 100%;
 
−
            }
 
−
 
−
            .row .col-50 {
 
−
                width: 100%;
 
−
            }
 
−
 
−
            .row .col-60 {
 
−
                width: 100%;
 
 
             }
 
             }
 
         }
 
         }
Line 574: Line 418:
 
         }
 
         }
  
−
    </style>
+
        /* CUSTOM BS NAVBAR STYLES */
 +
        .navbar {
 +
            border: 0;
 +
        }
  
 +
        .navbar-default {
 +
            background-color: #222;
 +
        }
  
−
    <!-- This tells the browser that your page is responsive -->
+
        .navbar-brand {
−
    <meta name="viewport" content="width=device-width, initial-scale=1">
+
            padding: 0;
 +
            padding-left: 25px;
 +
            padding-right: 25px;
 +
        }
  
−
</head>
+
        .navbar-brand img {
−
<body>
+
            height: 49px;
 +
        }
  
−
<!--MENU-->
+
        .navbar-default .navbar-nav > li > a {
−
<div class="igem_2017_menu_wrapper">
+
            color: white;
 +
        }
  
 +
        .navbar-default .navbar-nav > li > a:focus,
 +
        .navbar-default .navbar-nav > li > a:hover,
 +
        .navbar-default .navbar-nav > .dropdown > a .caret:hover {
 +
            color: #F8CE63;
 +
        }
  
−
    <a href="https://2017.igem.org/Team:Stuttgart">
+
        .navbar-default .navbar-nav > .open > a,
−
         <img src="https://static.igem.org/mediawiki/2017/4/45/Bildschirmfoto_2017-10-17_um_14.23.20.png">
+
         .navbar-default .navbar-nav > .open > a:hover,
−
    </a>
+
        .navbar-default .navbar-nav > .open > a:focus {
 +
            color: #F8CE63;
 +
            background-color: #444;
 +
        }
  
 +
        .navbar-default .navbar-nav > .dropdown > a .caret {
 +
            border-top-color: #eee;
 +
            border-bottom-color: #eee;
 +
        }
  
−
    <!-- this div is hidden by default and will only be displayed if the screen size is too small -->
+
        .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
−
    <div class="menu_button" id="display_menu_control">
+
            color: #333;
−
        MENU
+
            text-decoration: none;
−
    </div>
+
            background-color: #F8CE63;
 +
        }
  
−
    <div id="menu_content">
+
        .navbar-default .navbar-nav > .dropdown > a:hover .caret,
 +
        .navbar-default .navbar-nav > .dropdown > a:focus .caret {
 +
            border-top-color: white;
 +
            border-bottom-color: white;
 +
        }
  
 +
        /*.navbar-default .navbar-nav >.dropdown> a .caret:hover {
 +
            border-top-color: #ccc;
 +
            border-bottom-color: #ccc;
 +
        }*/
 +
    </style>
  
−
        <a href="https://2017.igem.org/Team:Stuttgart">
+
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
−
            <div class="menu_button direct_to_page">
+
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
−
                HOME
+
−
            </div>
+
−
        </a>
+
  
 +
    <!-- This tells the browser that your page is responsive -->
 +
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
−
        <div class="menu_button">
+
</head>
−
            <div class="expand_collapse_icon"></div>
+
<body>
−
            TEAM
+
−
        </div>
+
  
−
         <div class="submenu_wrapper" id="team_submenu">
+
<!--MENU-->
−
 
+
<nav class="navbar navbar-default navbar-fixed-top">
−
             <a href="https://2017.igem.org/Team:Stuttgart/Team">
+
    <div class="container-fluid">
−
                 <div class="submenu_button" id="Team_page">
+
        <!-- Brand and toggle get grouped for better mobile display -->
−
                    Team
+
         <div class="navbar-header">
−
                </div>
+
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
 +
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
 +
                <span class="sr-only">Toggle navigation</span>
 +
                <span class="icon-bar"></span>
 +
                <span class="icon-bar"></span>
 +
                <span class="icon-bar"></span>
 +
            </button>
 +
             <a class="navbar-brand" href="https://2017.igem.org/Team:Stuttgart">
 +
                 <img alt="Team:Stuttgart"
 +
                    src="https://static.igem.org/mediawiki/2017/4/45/Bildschirmfoto_2017-10-17_um_14.23.20.png">
 
             </a>
 
             </a>
−
 
−
            <a href="https://2017.igem.org/Team:Stuttgart/Collaborations">
 
−
                <div class="submenu_button" id="Collaborations_page">
 
−
                    Collaborations
 
−
                </div>
 
−
            </a>
 
−
 
−
 
 
         </div>
 
         </div>
  
−
 
+
        <!-- Collect the nav links, forms, and other content for toggling -->
−
         <div class="menu_button">
+
         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
−
             <div class="expand_collapse_icon"></div>
+
             <ul class="nav navbar-nav">
−
            PROJECT
+
                <li>
−
        </div>
+
                    <a href="#">Home</a>
−
 
+
                </li>
−
        <!-- project submenu -->
+
                <li class="dropdown">
−
        <div class="submenu_wrapper">
+
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
−
 
+
                      aria-expanded="false">Team <span class="caret"></span></a>
−
            <a href="https://2017.igem.org/Team:Stuttgart/Description">
+
                    <ul class="dropdown-menu">
−
                <div class="submenu_button" id="Description_page">
+
                        <li><a href="https://2017.igem.org/Team:Stuttgart/Team">Team</a></li>
−
                    Description
+
                        <li><a href="https://2017.igem.org/Team:Stuttgart/Attributions">Attributions</a></li>
−
                </div>
+
                        <!--<li role="separator" class="divider"></li>-->
−
            </a>
+
                    </ul>
−
 
+
                </li>
−
 
+
                 <li class="dropdown">
−
            <a href="https://2017.igem.org/Team:Stuttgart/Experiments">
+
                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
−
                <div class="submenu_button" id="Experiments_page">
+
                      aria-expanded="false">Project <span class="caret"></span></a>
−
                    Experiments
+
                    <ul class="dropdown-menu">
−
                </div>
+
                        <!--<li class="navbar-text navbar-left">Dry Lab</li>-->
−
            </a>
+
                        <li><a href="https://2017.igem.org/Team:Stuttgart/Description">Description</a></li>
−
 
+
                        <li><a href="https://2017.igem.org/Team:Stuttgart/Background-Information">Background Information</a></li>
−
 
+
                        <li><a href="https://2017.igem.org/Team:Stuttgart/Protocols">Protocols & Experiments</a></li>
−
            <a href="https://2017.igem.org/Team:Stuttgart/Notebook">
+
                        <li><a href="https://2017.igem.org/Team:Stuttgart/Notebook">Notebook</a></li>
−
                <div class="submenu_button" id="Notebook_page">
+
                        <li><a href="https://2017.igem.org/Team:Stuttgart/InterLab">Interlab Study</a></li>
−
                    Notebook
+
                        <li><a href="https://2017.igem.org/Team:Stuttgart/Model">Modelling</a></li>
−
                </div>
+
                        <li><a href="https://2017.igem.org/Team:Stuttgart/Results">Results</a></li>
−
            </a>
+
                        <li><a href="https://2017.igem.org/Team:Stuttgart/Parts">Parts</a></li>
−
 
+
                        <!--<li role="separator" class="divider"></li>-->
−
            <a href="https://2017.igem.org/Team:Stuttgart/Protocols">
+
                     </ul>
−
                 <div class="submenu_button" id="Protocols_page">
+
                </li>
−
                     Protocols
+
                <li>
−
                </div>
+
                    <a href="https://2017.igem.org/Team:Stuttgart/Safety">Safety</a>
−
            </a>
+
                 </li>
−
 
+
                <li class="dropdown">
−
 
+
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
−
            <a href="https://2017.igem.org/Team:Stuttgart/InterLab">
+
                      aria-expanded="false">Human Practices <span class="caret"></span></a>
−
                <div class="submenu_button" id="InterLab_page">
+
                    <ul class="dropdown-menu">
−
                    InterLab
+
                        <li><a href="https://2017.igem.org/Team:Stuttgart/Engagement">Public Engagement</a></li>
−
                </div>
+
                        <li><a href="https://2017.igem.org/Team:Stuttgart/Collaborations">Collaborations</a></li>
−
            </a>
+
                        <li><a href="https://2017.igem.org/Team:Stuttgart/HP/Gold_Integrated">Integrated and Gold</a></li>
−
 
+
                        <li><a href="https://2017.igem.org/Team:Stuttgart/HP/Silver">Silver HP</a></li>
−
            <a href="https://2017.igem.org/Team:Stuttgart/Contribution">
+
                    </ul>
−
                <div class="submenu_button" id="Contribution_page">
+
                </li>
−
                    Contribution
+
                 <li class="dropdown">
−
                </div>
+
                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
−
            </a>
+
                      aria-expanded="false">Awards <span class="caret"></span></a>
−
 
+
                    <ul class="dropdown-menu">
−
            <a href="https://2017.igem.org/Team:Stuttgart/Model">
+
                        <li><a href="https://2017.igem.org/Team:Stuttgart/Applied_Design">Applied Design</a></li>
−
                <div class="submenu_button" id="Model_page">
+
                        <li><a href="https://2017.igem.org/Team:Stuttgart/Measurement">Measurement</a></li>
−
                    Model
+
                     </ul>
−
                </div>
+
                </li>
−
            </a>
+
                <li>
−
 
+
                    <a href="https://igem.org/2017_Judging_Form?team=Stuttgart">Judging Form</a>
−
            <a href="https://2017.igem.org/Team:Stuttgart/Results">
+
                 </li>
−
                <div class="submenu_button" id="Results_page">
+
            </ul>
−
                    Results
+
         </div><!-- /.navbar-collapse -->
−
                </div>
+
     </div><!-- /.container-fluid -->
−
            </a>
+
</nav>
−
 
+
−
 
+
−
            <a href="https://2017.igem.org/Team:Stuttgart/Improve">
+
−
                <div class="submenu_button" id="Improve_page">
+
−
                    Improve
+
−
                </div>
+
−
            </a>
+
−
 
+
−
            <a href="https://2017.igem.org/Team:Stuttgart/Attributions">
+
−
                <div class="submenu_button" id="Attributions_page">
+
−
                    Attributions
+
−
                </div>
+
−
            </a>
+
−
 
+
−
        </div>
+
−
 
+
−
 
+
−
        <div class="menu_button">
+
−
            <div class="expand_collapse_icon"></div>
+
−
            PARTS
+
−
        </div>
+
−
 
+
−
        <!-- parts submenu -->
+
−
        <div class="submenu_wrapper">
+
−
 
+
−
            <a href="https://2017.igem.org/Team:Stuttgart/Parts">
+
−
                <div class="submenu_button" id="Parts_page">
+
−
                    Parts
+
−
                </div>
+
−
            </a>
+
−
 
+
−
            <a href="https://2017.igem.org/Team:Stuttgart/Basic_Part">
+
−
                <div class="submenu_button" id="Basic_Part_page">
+
−
                    Basic Parts
+
−
                </div>
+
−
            </a>
+
−
 
+
−
            <a href="https://2017.igem.org/Team:Stuttgart/Composite_Part">
+
−
                <div class="submenu_button" id="Composite_Part_page">
+
−
                    Composite Parts
+
−
                </div>
+
−
            </a>
+
−
 
+
−
            <a href="https://2017.igem.org/Team:Stuttgart/Part_Collection">
+
−
                <div class="submenu_button" id="Part_Collection_page">
+
−
                     Part Collection
+
−
                </div>
+
−
            </a>
+
−
        </div>
+
−
 
+
−
 
+
−
        <a href="https://2017.igem.org/Team:Stuttgart/Safety">
+
−
            <div class="menu_button direct_to_page">
+
−
                 SAFETY
+
−
            </div>
+
−
        </a>
+
−
 
+
−
 
+
−
        <div class="menu_button">
+
−
            <div class="expand_collapse_icon"></div>
+
−
            HUMAN PRACTICES
+
−
        </div>
+
−
 
+
−
        <!-- human practices submenu -->
+
−
        <div class="submenu_wrapper">
+
−
 
+
−
            <a href="https://2017.igem.org/Team:Stuttgart/HP/Silver">
+
−
                <div class="submenu_button" id="Silver_page">
+
−
                    Silver HP
+
−
                </div>
+
−
            </a>
+
−
 
+
−
            <a href="https://2017.igem.org/Team:Stuttgart/HP/Gold_Integrated">
+
−
                <div class="submenu_button" id="Gold_Integrated_page">
+
−
                    Integrated and Gold
+
−
                </div>
+
−
            </a>
+
−
 
+
−
 
+
−
            <a href="https://2017.igem.org/Team:Stuttgart/Engagement">
+
−
                <div class="submenu_button" id="Engagement_page">
+
−
                    Public Engagement
+
−
                </div>
+
−
            </a>
+
−
 
+
−
        </div>
+
−
 
+
−
 
+
−
        <div class="menu_button">
+
−
            <div class="expand_collapse_icon"></div>
+
−
            AWARDS
+
−
        </div>
+
−
 
+
−
        <!-- awards submenu -->
+
−
        <div class="submenu_wrapper">
+
−
 
+
−
            <a href="https://2017.igem.org/Team:Stuttgart/Applied_Design">
+
−
                <div class="submenu_button" id="Applied_Design_page">
+
−
                    Applied Design
+
−
                </div>
+
−
            </a>
+
−
 
+
−
            <a href="https://2017.igem.org/Team:Stuttgart/Entrepreneurship">
+
−
                 <div class="submenu_button" id="Entrepreneurship_page">
+
−
                     Entrepreneurship
+
−
                </div>
+
−
            </a>
+
−
 
+
−
            <a href="https://2017.igem.org/Team:Stuttgart/Hardware">
+
−
                <div class="submenu_button" id="Hardware_page">
+
−
                    Hardware
+
−
                </div>
+
−
            </a>
+
−
 
+
−
            <a href="https://2017.igem.org/Team:Stuttgart/Measurement">
+
−
                <div class="submenu_button" id="Measurement_page">
+
−
                    Measurement
+
−
                </div>
+
−
            </a>
+
−
 
+
−
            <a href="https://2017.igem.org/Team:Stuttgart/Model">
+
−
                <div class="submenu_button" id="Model_page">
+
−
                     Model
+
−
                </div>
+
−
            </a>
+
−
 
+
−
 
+
−
        </div>
+
−
 
+
−
        <a href="https://igem.org/2017_Judging_Form?team=Stuttgart">
+
−
            <div class="menu_button direct_to_page">
+
−
                 JUDGING FORM
+
−
            </div>
+
−
        </a>
+
−
 
+
−
 
+
−
         <div class="menu_bottom_padding">
+
−
        </div>
+
−
 
+
−
     </div>
+
−
 
+
−
</div>
+
  
  
 
<!-- start of content -->
 
<!-- start of content -->
−
<div class="igem_2017_content_wrapper">
+
<div class="container">
 
     <div class="row">
 
     <div class="row">
−
         <div class="col-40">
+
         <div class="col-xs-12 col-sm-6 col-md-4">
 
             <!--<img src="https://static.igem.org/mediawiki/2017/e/ef/Tshirt_LIGHTUPTHEPIPE.pdf">-->
 
             <!--<img src="https://static.igem.org/mediawiki/2017/e/ef/Tshirt_LIGHTUPTHEPIPE.pdf">-->
 
             <img src="http://unsplash.it/800/601" class="img-responsive"/>
 
             <img src="http://unsplash.it/800/601" class="img-responsive"/>
 
         </div>
 
         </div>
−
         <div class="col-60">
+
         <div class="col-xs-12 col-sm-6 col-md-8">
 
             <p>The clogging of drains and pipe systems by hair and fat is a serious problem in industry and private
 
             <p>The clogging of drains and pipe systems by hair and fat is a serious problem in industry and private
 
                 households. Currently many blockages are dissolved by toxic and reactive chemicals like hydroxide
 
                 households. Currently many blockages are dissolved by toxic and reactive chemicals like hydroxide

Revision as of 16:20, 28 October 2017

The clogging of drains and pipe systems by hair and fat is a serious problem in industry and private households. Currently many blockages are dissolved by toxic and reactive chemicals like hydroxide and chlorine compounds, leading to accelerate corrosion in the pipe system and ecological damage. Our aim is to engage this problem in a more sustainable and eco-friendly way by developing a biological cleaner based on a holistic approach using E.coli. Our microbial system is targeted on producing and secreting enzymes, such as keratinases, lipases and esterases to break down hair, fat and other pollutants. By optimizing the secretion of the selected enzymes, we are avoiding enzyme purification which can save valuable money and time. Additionally, we want to produce a scent from the existing waste as an indicator of successful degradation. Involving mathematical modeling of enzymatic kinetics and degradation processes will support the experimental work. Finally this approach will LIGHT UP THE PIPE again!



You can also find us on facebook - visit, give us a like or follow us on twitter
follow me on facebook follow me on twitter