Difference between revisions of "Team:Warwick/Description"

m
 
(39 intermediate revisions by 5 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
−
<head>
 
−
<link rel="stylesheet" type="text/css" href="https://2019.igem.org/Team:warwick/CSS/stylesheet.css">
 
−
<link href="https://fonts.googleapis.com/css?family=Simonetta&display=swap" rel="stylesheet">
 
  
−
<style>  
+
<link rel="stylesheet" href="https://2019.igem.org/Template:Warwick/CSS/RotateScriptor?action=raw&ctype=text/css">
 +
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 +
</html>
 +
{{Template:Warwick/Navbar}}
  
−
/* fixing igem custom settings */
+
<html>
−
#top_title{
+
<script>
−
  display:none !important;
+
var amountToTurn = 0;
−
}
+
var previousTeam = 0;
−
.igem_2019_team_column_wrapper {
+
−
  width: 100% !important;
+
−
}
+
−
.igem_2019_team_menu {
+
−
  display:none !important;
+
−
}
+
−
#HQ_page p{
+
−
  padding: 0;
+
−
  margin: 0;
+
−
  text-align: inherit !important;
+
−
  all:unset;
+
−
}
+
−
#top {
+
−
  display:none !important;
+
−
}
+
  
−
.igem_2019_team_content {  
+
function rotate(newTeam){
−
width: 100% !important;
+
dif  = newTeam - previousTeam;
−
margin: 0;
+
if(dif == 1 || dif == -2){
−
padding: 0;
+
amountToTurn += 120;
−
background-color: #3B3838 !important;
+
}
−
}
+
else if(dif == -1 || dif == 2){
−
.clear.extra_space {
+
amountToTurn -= 120;
−
  display:none !important;
+
}
−
}
+
−
#content{
+
−
  width: 100% !important;
+
−
  margin: 0;
+
−
  padding: 0;
+
−
  background-color: #3B3838 !important;
+
−
  line-height: 0;
+
−
}
+
−
#bodycontent {
+
−
background-color: #3B3838 !important;
+
−
}
+
−
/* end of igem custom settings */
+
  
−
body {
+
    $("#BOIStriangle").css('transform', 'rotate(' + amountToTurn + 'deg)');
−
background-color: #3B3838 !important;
+
    $("#BOISContent").css('transform', 'rotate(' + (-1*amountToTurn) + 'deg)');
−
}
+
    $("#hamIMG").css('transform', 'rotate(' + (-1*amountToTurn) + 'deg)');
 +
$("#dnaIMG").css('transform', 'rotate(' + (-1*amountToTurn) + 'deg)');
 +
    $("#pencilIMG").css('transform', 'rotate('+ (-1*amountToTurn) + 'deg)');
  
 +
    h3content = $("#BCTitle");
 +
    pcontent = $("#BCText");
  
−
/* NavBar settings and identifiers */
+
    switch(newTeam){
 +
    case 0:
 +
    h3content.html("Degradation");
 +
    pcontent.html("Utilising the properties of lipase enzymes in bacteria to break down fatbergs into fatty acids and triglycerides to break down solid masses of fatbergs.");
 +
    break;
 +
    case 1:
 +
h3content.html("Sequencing");
 +
    pcontent.html("Understanding the DNA ecology of organisms inhabiting fatbergs to find lipase genes.");
 +
    break;
 +
    case 2:
 +
h3content.html("Prevention");
 +
    pcontent.html("Ensuring that every level of society is aware that fatberg formation is solely from human activity and can be solved from better waste disposal measures.");
 +
    break;
 +
    }
  
−
#navbar {
+
    previousTeam = newTeam;
−
list-style-type: none !important;
+
−
margin: 0 !important;
+
−
padding: 0 !important;
+
−
overflow: hidden !important;
+
−
background-color:#F5B433 !important;
+
−
list-style-image: none !important;
+
−
height:auto;
+
−
display: block;
+
 
}
 
}
  
−
#navbarbutton {
+
function reset(){
−
float: left !important;
+
$("#BottNav").hide();
 
}
 
}
 +
                </script>
  
−
#navbarbutton:hover {
+
<script>
−
  background-color: #3B3838;
+
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
−
color:white;
+
−
}
+
  
−
#navbarbuttontext {
+
$(document).ready(function() {
−
display: block;
+
−
  color: white;
+
−
font-size:15px;
+
−
  text-align: center;
+
−
  padding: 14px 14px;
+
−
  text-decoration: none;
+
−
  font-family: 'Simonetta', serif !important;
+
−
}
+
  
−
/* end of navbar */
+
//remove the HQ_page id
 +
$("#HQ_page").attr('id','');
 +
  
−
/*Start of first title screen */
+
//highlight current page on the menu
 +
highlight_current_page_menu();
 +
 +
//accessing submenus
 +
$(".menu_item").click(function(){
 +
$(".submenu_control_icon", this).toggleClass("open");
 +
$(this).next(".submenu").fadeToggle(400);
 +
});
 +
 +
//mobile menu access
 +
$(".igem_2019_team_mobile_bar").click(function(){
 +
$(this).next().toggleClass("displaying_menu");
 +
});
 +
 +
});
  
−
#titlescreen {
 
−
height:100vh;
 
−
}
 
  
−
#fattitle {  
+
function highlight_current_page_menu() {
−
color:#F5B433 !important;
+
−
font-size: 100px !important;
+
var page_url="https://2019.igem.org/";
−
font-family: 'Simonetta', serif !important;
+
page_url = page_url + wgPageName;
−
display: block !important;
+
$("a[href$='"+ page_url +"']").children().addClass("current_page");
−
line-height: 0px;
+
−
overflow: visible;
+
//if the page is in a submenu, open the submenu and make the appropiate changes
−
padding:0px;
+
if( $( ".current_page" ).hasClass( "submenu_item" )){
−
float:left;
+
−
}
+
$(".current_page").parent().parent().fadeToggle(400);
 +
$(".current_page").parent().parent().prev().addClass("current_page");
 +
$(".menu_item.current_page > .submenu_control_icon").toggleClass("open");
 +
 +
}
 +
}
  
−
#bottomtitle { 
 
−
color:white !important;
 
−
font-family: 'Simonetta', serif !important;
 
−
display: block !important;
 
−
overflow: visible;
 
−
margin-bottom: 0;
 
−
padding:0px;
 
−
}
 
  
−
/* end of title screen */  
+
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 +
</script>
  
−
/* start of "body" section */
 
  
−
#bodysectiontitle {
+
<style>
−
color:#F5B433;
+
/**************************************************************************************************************************************************************************************************/
−
font-size: 30px;
+
 
−
font-family: 'Simonetta', serif !important;
+
/**************************************************************************************************************************************************************************************************/
−
overflow: visible;
+
/* DEFAULT WIKI SETTINGS */
−
position:relative;
+
/**************************************************************************************************************************************************************************************************/
−
left: 30px;
+
 
 +
 
 +
#home_logo, #sideMenu { display:none; }
 +
#sideMenu, #top_title, .patrollink  {display:none;}
 +
#content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
 +
body {background-color:#fff; }
 +
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 +
#bodyContent a[href ^="https://"], .link-https { padding-right:0px;}
 +
 
 +
 
 +
/**************************************************************************************************************************************************************************************************/
 +
/* MENU */
 +
/**************************************************************************************************************************************************************************************************/
 +
 
 +
/*wrapping for the menu*/
 +
.igem_2019_team_menu {
 +
background-color:#cecece;
 +
border-left: 1px solid #635d5d;
 +
float:right;
 +
height:100vh;
 +
max-width: 270px;
 +
overflow-y: auto;
 +
overflow-x: hidden;
 +
padding:0px;
 +
position:fixed;
 +
right:0%;
 +
text-align:left;
 +
width: 15%;
 +
}
 +
 
 +
/*controlling menu visibility*/
 +
.igem_2019_team_menu.displaying_menu{
 +
display:block;
 +
}
 +
 
 +
/*links in the menu*/
 +
.igem_2019_team_menu  a {
 +
color: #484848;
 +
text-decoration:none;
 +
}
 +
 
 +
/*images in the menu*/
 +
.igem_2019_team_menu img {
 +
width:100%;
 +
}
 +
 
 +
/*level 1 menu items*/
 +
.igem_2019_team_menu .menu_item {
 +
    background-color: #cecece;
 +
    border-bottom: 1px solid #635d5d;
 +
    clear: both;
 +
color: #484848;
 +
    cursor: pointer;
 +
float: left;
 +
    font-size: 120%;
 +
    font-weight: bold;
 +
    padding: 15px 0px 15px 5%;
 +
  width: 100%;
 +
}
 +
 
 +
/*level 1 menu items without submenus*/
 +
.igem_2019_team_menu .menu_item.direct_link {
 +
color: #484848;
 +
padding-left: 15%;
 +
}
 +
 +
/*level 1 menu items on hover*/
 +
.igem_2019_team_menu .menu_item:hover {
 +
background-color: #ecb656 !important;
 +
}
 +
 
 +
/*icon for expanding and collapsing level 1 menut items*/
 +
.igem_2019_team_menu .menu_item .submenu_control_icon {
 +
color: #484848;
 +
float: left;
 +
width: 10%;
 +
}
 +
 
 +
/* submenu icon  "-"*/
 +
.igem_2019_team_menu .menu_item .submenu_control_icon::before {
 +
content: "+";
 +
}
 +
 
 +
/* submenu icon  "-"*/
 +
.igem_2019_team_menu .menu_item .submenu_control_icon.open::before {
 +
content: "-";
 +
}
 +
 
 +
 +
/*level 2 menu (submenu) wrapper*/
 +
.igem_2019_team_menu .submenu{
 +
background-color: #ececec;
 +
clear:both;
 +
display:none;
 +
float: left; 
 +
width:100%;
 +
}
 +
 
 +
/*level 2 menu (submenu) item*/
 +
.igem_2019_team_menu .submenu .submenu_item {
 +
border-bottom: 1px solid #cecece;
 +
  color: #635d5d;
 +
    height: 30px;
 +
  float: left;
 +
    font-size: 110%;
 +
font-weight: bold;
 +
    padding: 12px 0px 0px 15%;
 +
    width: 100%;
 +
}
 +
 
 +
/*level 2 menu (submenu) items on hover*/
 +
.igem_2019_team_menu .submenu .submenu_item:hover {
 +
background-color: #ecb656 !important;
 +
}
 +
 
 +
/*color for highlighting current page on the wiki*/
 +
.igem_2019_team_menu .submenu .submenu_item.current_page,
 +
.igem_2019_team_menu .menu_item.current_page,
 +
.igem_2019_team_menu .menu_item.direct_link.current_page {
 +
background-color:#a2d3d0;
 +
}
 +
 
 +
 
 +
/*mobile menu bar styling*/
 +
/**************************************************************************************************************************************************************************************************/
 +
 
 +
/*mobile bar that controls the menu*/
 +
.igem_2019_team_mobile_bar {
 +
background-color:#ececec;
 +
border-bottom: 1px solid #cecece;
 +
cursor:pointer;
 +
display:none;
 +
float:left;
 +
margin-top: 0;
 +
padding: 5px 0;
 +
position:fixed;
 +
width:100%;
 +
}
 +
 +
/*mobile logo*/
 +
.igem_logo_mobile {
 +
float:left;
 +
padding-left: 5%;
 +
width: 30%;
 +
}
 +
 
 +
/*image within the mobile logo*/
 +
.igem_logo_mobile img {
 +
width:70px;
 +
}
 +
 +
/*mobile expand collapse button*/
 +
.igem_menu_control_mobile {
 +
float:right;
 +
padding-right:5%;
 +
padding-top:5px;
 +
text-align:right;
 +
width: 30%;
 +
}
 +
 
 +
/*image for mobile expand collapse button*/
 +
.igem_menu_control_mobile img {
 +
width:25px;
 +
}
 +
 
 +
 
 +
/*add extra padding to the menu to improve mobile scrolling*/
 +
.menu_padding{
 +
float:left;
 +
height:100px;
 +
}
 +
 
 +
 
 +
/**************************************************************************************************************************************************************************************************/
 +
/* CONTENT OF THE PAGE */
 +
/**************************************************************************************************************************************************************************************************/
 +
 
 +
/* general wrapper for the content */
 +
.igem_2019_team_content {
 +
background-color:#393939;
 +
display:block;
 +
width: 87%;
 +
}
 +
 
 +
/* subwrapper to center content */
 +
.igem_2019_team_content .igem_2019_team_column_wrapper {
 +
margin:auto;
 +
max-width: 1400px;
 +
width:90%;
 +
}
 +
 
 +
 
 +
 
 +
/*general styling*/
 +
/**************************************************************************************************************************************************************************************************/
 +
 
 +
/*size for title h tags*/
 +
.igem_2019_team_content .igem_2019_team_column_wrapper h1 { font-size: 210%;}
 +
.igem_2019_team_content .igem_2019_team_column_wrapper h2 { font-size: 190%;}
 +
.igem_2019_team_content .igem_2019_team_column_wrapper h3 { font-size: 170%;}
 +
.igem_2019_team_content .igem_2019_team_column_wrapper h4 { font-size: 150%;}
 +
.igem_2019_team_content .igem_2019_team_column_wrapper h5 { font-size: 140%;}
 +
.igem_2019_team_content .igem_2019_team_column_wrapper h6 { font-size: 130%;}
 +
 
 +
 
 +
/*titles h1, h2*/
 +
.igem_2019_team_content .igem_2019_team_column_wrapper h1, .igem_2019_team_content .igem_2019_team_column_wrapper h2 {
 +
border-bottom:0px;
 +
color: #635d5d;
 +
font-family: "Arial Black", Gadget, sans-serif;
 +
padding: 10px 0px;
 +
}
 +
 
 +
/*titles h3, h3, h5, h6 */
 +
.igem_2019_team_content .igem_2019_team_column_wrapper h3,
 +
.igem_2019_team_content .igem_2019_team_column_wrapper h4,
 +
.igem_2019_team_content .igem_2019_team_column_wrapper h5,
 +
.igem_2019_team_content .igem_2019_team_column_wrapper h6 {
 +
border-bottom:0px;
 +
color: #635d5d; 
 +
font-family: "Arial Black", Gadget, sans-serif;
 +
padding: 5px 0px;
 +
}
 +
 
 +
/* text p tag*/
 +
.igem_2019_team_content .igem_2019_team_column_wrapper p {
 +
font-size: 130%;
 +
font-family: Arial, Helvetica, sans-serif;
 +
padding: 5px 0px;
 +
text-align: left;
 +
color: #484848;
 +
}
 +
 
 +
/* Links a tag*/
 +
.igem_2019_team_content .igem_2019_team_column_wrapper a {
 +
color: #00a19b;
 +
font-weight: bold;
 +
text-decoration: underline;
 +
text-decoration-color:#00a19b;
 +
transition: all 0.4s ease;
 +
-webkit-transition: all 0.4s ease;
 +
-moz-transition: all 0.4s ease;
 +
-ms-transition: all 0.4s ease;
 +
-o-transition: all 0.4s ease;
 +
}
 +
 
 +
/* hover for the links */
 +
.igem_2019_team_content .igem_2019_team_column_wrapper a:hover {
 +
color: #085156;
 +
text-decoration:none;
 +
}
 +
 
 +
 
 +
/* Table tag*/
 +
.igem_2019_team_content .igem_2019_team_column_wrapper table {
 +
border: 1px solid #635d5d;
 +
border-collapse: collapse;
 +
font-size: 130%;
 +
width: 100%;
 +
}
 +
 
 +
/* table cells */
 +
.igem_2019_team_content .igem_2019_team_column_wrapper td {
 +
border: 1px solid #cecece;
 +
border-collapse: collapse;
 +
font-size: 105%;
 +
padding: 10px;
 +
vertical-align: text-top;
 +
}
 +
 
 +
/* table headers */
 +
.igem_2019_team_content .igem_2019_team_column_wrapper th {
 +
background-color:#cecece;
 +
border: 1px solid #635d5d;
 +
border-collapse: collapse;
 +
font-size: 110%;
 +
padding: 10px;
 +
vertical-align: text-top;
 +
}
 +
 
 +
 
 +
 
 +
/* non numbered lists */
 +
.igem_2019_team_content .igem_2019_team_column_wrapper ul, .igem_2019_team_content .igem_2019_team_column_wrapper ol {
 +
font-size: 130%;
 +
font-family: Arial, Helvetica, sans-serif;
 +
padding:0px 20px;
 +
}
 +
 
 +
 
 +
/*font sizing within list nesting*/
 +
.igem_2019_team_content .igem_2019_team_column_wrapper ul ul li, .igem_2019_team_content .igem_2019_team_column_wrapper ul ul ul li,
 +
.igem_2019_team_content .igem_2019_team_column_wrapper ul ol li, .igem_2019_team_content .igem_2019_team_column_wrapper ul ul ol li,
 +
.igem_2019_team_content .igem_2019_team_column_wrapper ol ol li, .igem_2019_team_content .igem_2019_team_column_wrapper ul ol ul li,
 +
.igem_2019_team_content .igem_2019_team_column_wrapper ol ul li, .igem_2019_team_content .igem_2019_team_column_wrapper ul ol ol li,
 +
.igem_2019_team_content .igem_2019_team_column_wrapper ol ul ul li, .igem_2019_team_content .igem_2019_team_column_wrapper ol ol ul li,
 +
.igem_2019_team_content .igem_2019_team_column_wrapper ol ol ol li, .igem_2019_team_content .igem_2019_team_column_wrapper ol ul ol li{ font-size: 76%; }
 +
 
 +
 
 +
 
 +
/*layout classes*/
 +
/**************************************************************************************************************************************************************************************************/
 +
 
 +
/*main layout class */
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .column  {
 +
float:left;
 +
margin: 1% 2%;
 +
padding: 0px;
 +
}
 +
 
 +
/* 100% */
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .column.full_size { width:96%; }
 +
 
 +
/* 66% */
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .column.two_thirds_size { width: 62.6%; }
 +
 
 +
/* 33% */
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .column.third_size { width: 29.3%; }
 +
 
 +
 
 +
 
 +
 
 +
/*all images*/
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .column.full_size img,
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .column.two_thirds_size img,
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .column.third_size img {
 +
margin-bottom: 15px;
 +
width: 100%;
 +
}
 +
 
 +
 
 +
/* page break */
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .clear {
 +
clear:both;
 +
}
 +
/*add extra space to page break with clear class*/
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .clear.extra_space {
 +
height: 30px;
 +
}
 +
 
 +
/* horizontal line to divide the page*/
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .line_divider {
 +
    border-top: 1px solid #cecece;
 +
  margin: auto;
 +
  width: 98%;
 +
}
 +
 
 +
 
 +
 
 +
 +
/*support classes*/
 +
/**************************************************************************************************************************************************************************************************/
 +
 
 +
 
 +
/*Button  */
 +
/************************************************/
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .button_link {
 +
font-size: 130%;
 +
margin: 30px auto;
 +
text-align: center;
 +
}
 +
 
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .button_link a  {
 +
background-color: #00a19bad !important;
 +
color: #000 !important;
 +
font-weight: bold;
 +
margin: auto;
 +
text-decoration: none !important;
 +
padding: 10px 15px !important;
 +
}
 +
 
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .button_link a:hover {
 +
background-color: #ffb819 !important; 
 +
}
 +
 
 +
 +
 
 +
/*highlight */
 +
/************************************************/
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight {
 +
padding: 15px 20px;
 +
}
 +
 
 +
 
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight p,
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight h1,
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight h2,
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight h3,
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight h4,
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight h5,
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight h6 {
 +
padding: 5px 15px;
 +
}
 +
 
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_background {
 +
background-color: #ececec;
 +
}
 +
 
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_A_top {
 +
    border-top: 4px solid #00a19bad;
 +
}
 +
 
 +
 
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_A_full {
 +
    border: 4px solid #00a19bad;
 +
}
 +
 
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_B_top {
 +
    border-top: 4px solid #ffb819
 +
}
 +
 
 +
 
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_B_full {
 +
    border: 4px solid #ffb819;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
/*mobile*/
 +
/**************************************************************************************************************************************************************************************************/
 +
 
 +
 
 +
/* 1800px  */
 +
/************************************************/
 +
@media only screen and (max-width: 1800px) {
 +
.igem_2019_team_content { width: 85%;}
 +
.igem_2019_team_menu {display:block;}
 
}
 
}
  
−
#paragraphtext {
+
/* 1400px  */
−
color:white !important;
+
/************************************************/
−
font-family: 'Simonetta', serif !important;
+
@media only screen and (max-width: 1400px) {
−
font-size: 20px !important;
+
.igem_2019_team_menu .menu_item { font-size:100%;}
−
word-wrap: break-word !important;
+
.igem_2019_team_menu .submenu .submenu_item { font-size:90%;}
−
position: relative;
+
.igem_2019_team_menu {display:block;}
−
left:30px;
+
}
−
overflow: visible;
+
 
−
display:block-inline;
+
 
 +
/* 1100px  */
 +
/************************************************/
 +
@media only screen and (max-width: 1100px) {
 +
.igem_2019_team_content {width:100%; margin-left:0px;}
 +
 +
.igem_2019_team_menu {display:none;float:right;margin-top:47px;max-width:100%;position:fixed;width:25%;}
 +
 +
.igem_2019_team_mobile_bar {display:block;}
 +
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .column.full_size, .igem_2019_team_content .igem_2019_team_column_wrapper .column.two_thirds_size,.igem_2019_team_content .igem_2019_team_column_wrapper .column.third_size {width:96%; }
 +
 
 +
}
 +
 
 +
/* 850px  */
 +
/************************************************/
 +
@media only screen and (max-width: 850px) {
 +
.igem_2019_team_menu {width:40%;}
 +
}
 +
 
 +
/*500px  */
 +
/************************************************/
 +
@media only screen and (max-width: 500px) {
 +
.igem_2019_team_menu {min-width:100%;width:100%;}
 +
}
 +
 
 +
 
 +
/**************************************************************************************************************************************************************************************************/
 +
 
 +
.members-title {{
 +
    color: black;
 +
    font-size: 32px;}
 
}
 
}
  
−
/*end of body section */
+
 
  
 
</style>
 
</style>
 +
 +
 +
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 +
<!--- THIS IS WHERE THE HTML BEGINS --->
 +
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 +
 +
<head>
 +
 +
  <!-- This tells the browser that your page is responsive -->
 +
  <meta name="viewport" content="width=device-width, initial-scale=1">
 +
 +
  <link rel="stylesheet" type="text/css" href="https://2019.igem.org/wiki/index.php?title=Template:Warwick/CSS&action=raw&ctype=text/css" />
 +
  <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Template:Warwick/JS&action=raw&ctype=text/javascript"></script>
 +
 +
 +
<!-- Bootstrap CSS. TODO: not allowed to use 3rd party hosting apparently -->
 +
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 +
 +
<!-- Bootstrap JS -->
 +
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
 
</head>
 
</head>
 +
 +
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 +
<!--- Menu --->
 +
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 +
 +
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 +
<!--- Content of the page  --->
 +
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
  
 
<body>
 
<body>
 +
    <div class="text-center">
 +
        <h1 class="d-inline-block header-yellow-dots"> <b> Project Description </b> </h1>
 +
    </div>
 +
 +
<section class="bg-ww-yellow text-center text-black my-5 py-4">
 +
        <div class="container">
 +
            <div class="row">
 +
                <div class="col-12 col-md-6 align-self-center">
 +
                    <h3 class="text-center text-black"> <b> A Greasy Nightmare... </b> </h3>
 +
                   
 +
                    <p align="justify">Despite being under your feet and out of sight, sewers are extremely important components of urban infrastructure that help to keep the area safe from flooding and minimize the spread of water-borne disease. Nowadays existing sewer networks are under increasing strain... mainly as a result of population growth, increasing urbanization and climate change. But it’s not just an increased usage of sewers which are beginning to challenge these infrastructural wonders. Human activity can, as per usual, be blamed. Life is like a sewer. You get out what you put into it and, sometimes, it stinks. We have created monsters. We have created fatbergs.</p>
 +
 +
<p align="justify"> These large congealed masses composed of fat, oil, grease and non-biodegradable materials like wet wipes are beginning to wreck infrastructural havoc, causing thousands of blockages, which the UK government spend millions clearing each year. Though the fatberg issue could be solved by simply changing everyday habits, we - the Warwick iGEM team - have begun to lay the foundations for a biological solution toward this growing problem. </p>
 +
<p> </p>
 +
                </div>
 +
                <div class="col-12 col-md-6 align-self-center">
 +
                    <img class="img-fluid" src="https://static.igem.org/mediawiki/2019/0/06/T--Warwick--2019-FatbergPipe.png" height="150%" width="150%"></div>
 +
                </div>
 +
            </div>
 +
        </div>
 +
    </section>
 +
 +
<section class="bg-ww-grey text-center text-white my-5 py-4">
 +
        <div class="container">
 +
            <div class="row">
 +
                <div class="col-12 col-lg-8 offset-lg-2">
 +
                    <h3 class="text-center text-white"> <b> Inspiration</b> </h3>
 +
 +
 +
                  <p align="justify"> After several brainstorming sessions we came up with a strategy for our mission. After researching more, we found out that fatbergs are made up of several major components like calcium soap, wet wipes and triglycerides. We hypothesised that by breaking down the main component of fatbergs - fat molecules, also known as triglycerides we can break the whole structure to remove the solid mass. </p>
 +
 +
<p class="aligncenter">
 +
    <img src="https://static.igem.org/mediawiki/2019/f/f5/T--Warwick--2019-LipaseAction1.png" height="50%" width="50%"/>
 +
</p>
 +
<p> <b> Figure 1 </b> Hydrolysis of a triglyceride molecule into glycerol and three free fatty acid molecules </p>
 +
 +
 +
<p align= "justify"> We were further inspired by the work carried out by the 2014 Sheffield iGEM team, who worked on the fatberg problem. We decided to build upon their foundational research and carry it forward to benefit society by using specific lipases suited to an environment like the sewage system. This includes Thermostable lipase A, as seen below in figure 2 (TliA, an enzyme derived from <i> Pseudomonas fluorescens; </i> a previous iGEM part utilised by Sheffield, as well as the Stuttgart and KAIST iGEM teams. </p>
 +
 +
<p class="aligncenter">
 +
    <img src="https://static.igem.org/mediawiki/2019/3/3b/T--Warwick--2019-TliA3D.png" height="40%" width="40%"/>
 +
</p>
 +
 +
<p> <b> Figure 2. </b> Three dimensional structure of TliA isolated from <i> Pseudomonas fluorescens </i> as used by the 2014 Sheffield iGEM team. </p>
 +
</section>
 +
 +
                </div>
 +
            </div>
 +
        </div>
 +
    </section>
 +
 +
    <section class="bg-ww-yellow text-center text-black my-5 py-4">
 +
        <div class="container">
 +
            <div class="row">
 +
                <div class="col-12 col-lg-8 offset-lg-2">
 +
                <h3 class="text-center text-black"> <b> Infatuation -The Guardians of the Sewers...  </b> </h3>
 +
               
 +
                    <p align="justify">Our mission as Warwick iGEM 2019 is to attempt to tackle the growing fatberg crisis. We have implemented two key strategies to do this: preventing their formation through the education of the general public to increase awareness of these monstrous masses, explaining how simple changes in human behaviour can significantly reduce their formation. </p>
 +
 +
<p align="justify">Secondly, we will utilise the power of synthetic biology to clone candidate lipases, derived from microorganisms living within fatbergs or sewers, into our E. coli carrier cells. The lipase activity of our clones will then be characterised using both a qualitative and quantitative assay of our own design, alongside experiments to establish the viability of our engineered bacteria in oil. </p>
 +
                </div>
 +
            </div>
 +
        </div>
 +
    </section>
  
−
<div style="width:100%;height:50px;margin-bottom:5%">
 
−
<ul id="navbar">
 
−
  <li id="navbarbutton"><a id="navbarbuttontext" href="https://2019.igem.org/Team:Warwick">Home</a></li>
 
−
  <li id="navbarbutton"><a id="navbarbuttontext" href="contact.asp">Design</a></li>
 
−
  <li id="navbarbutton"><a id="navbarbuttontext" href="about.asp">Experiments</a></li>
 
−
  <li id="navbarbutton"><a id="navbarbuttontext" href="default.asp">Notebook</a></li>
 
−
  <li id="navbarbutton"><a id="navbarbuttontext" href="news.asp">Results</a></li>
 
−
  <li id="navbarbutton"><a id="navbarbuttontext" href="contact.asp">Parts</a></li>
 
−
  <li id="navbarbutton"><a id="navbarbuttontext" href="about.asp">Safety</a></li>
 
−
        <li id="navbarbutton"><a id="navbarbuttontext" href="about.asp">Human Practices</a></li>
 
−
        <li id="navbarbutton"><a id="navbarbuttontext" href="about.asp">Attributions</a></li>
 
−
        <li id="navbarbutton"><a id="navbarbuttontext" href="about.asp">Description</a></li>
 
−
  </ul> <br>
 
−
</div>
 
  
−
<h1 id="bodysectiontitle" style="font-size:70px;margin-bottom:5%">Genetic text</h1>
+
<section class="bg-white text-center text-black my-5 py-4">
 +
        <div class="container">
 +
            <div class="row">
 +
                <div class="col-12 col-lg-8 offset-lg-2">
 +
                      <div class='' id='BOIStriangle'>
 +
<div id='BOISContent'>
 +
<h1 id='BCTitle'>Click one</h3>
 +
<p id='BCText'></p>
 +
</div>
 +
<img src='https://static.igem.org/mediawiki/2019/a/a4/T--Warwick--2019-Hammer-Sign.png' id='hamIMG' onclick="rotate(0)">
 +
<img src='https://static.igem.org/mediawiki/2019/8/8a/T--Warwick--2019-DNA-sign.png' id='dnaIMG'  onclick="rotate(1)">
 +
<img src='https://static.igem.org/mediawiki/2019/e/eb/T--Warwick--2019-Pencil-Sign.png' id='pencilIMG'  onclick="rotate(2)">
 +
      </div>               
 +
                </div>
 +
            </div>
 +
        </div>
 +
    </section>
  
−
<div style="width:80%;position:relative;left:30px"> 
 
  
−
  <h1 id="bottomtitle" style="margin-bottom:2.5%">Generic flavor text</h1>
+
   
−
  <p id="paragraphtext" style="position: relative;
+
−
left:70px;"> Generic paragraph
+
−
  </p> <br>
+
−
  <p id="paragraphtext" style="position: relative;
+
−
left:70px;"> Generic paragraph
+
−
  </p>
+
  
−
</div>
 
  
 
</body>
 
</body>
 
</html>
 
</html>
 +
{{Template:Warwick/Footer}}

Latest revision as of 01:10, 22 October 2019

Project Description

A Greasy Nightmare...

Despite being under your feet and out of sight, sewers are extremely important components of urban infrastructure that help to keep the area safe from flooding and minimize the spread of water-borne disease. Nowadays existing sewer networks are under increasing strain... mainly as a result of population growth, increasing urbanization and climate change. But it’s not just an increased usage of sewers which are beginning to challenge these infrastructural wonders. Human activity can, as per usual, be blamed. Life is like a sewer. You get out what you put into it and, sometimes, it stinks. We have created monsters. We have created fatbergs.

These large congealed masses composed of fat, oil, grease and non-biodegradable materials like wet wipes are beginning to wreck infrastructural havoc, causing thousands of blockages, which the UK government spend millions clearing each year. Though the fatberg issue could be solved by simply changing everyday habits, we - the Warwick iGEM team - have begun to lay the foundations for a biological solution toward this growing problem.

Inspiration

After several brainstorming sessions we came up with a strategy for our mission. After researching more, we found out that fatbergs are made up of several major components like calcium soap, wet wipes and triglycerides. We hypothesised that by breaking down the main component of fatbergs - fat molecules, also known as triglycerides we can break the whole structure to remove the solid mass.

Figure 1 Hydrolysis of a triglyceride molecule into glycerol and three free fatty acid molecules

We were further inspired by the work carried out by the 2014 Sheffield iGEM team, who worked on the fatberg problem. We decided to build upon their foundational research and carry it forward to benefit society by using specific lipases suited to an environment like the sewage system. This includes Thermostable lipase A, as seen below in figure 2 (TliA, an enzyme derived from Pseudomonas fluorescens; a previous iGEM part utilised by Sheffield, as well as the Stuttgart and KAIST iGEM teams.

Figure 2. Three dimensional structure of TliA isolated from Pseudomonas fluorescens as used by the 2014 Sheffield iGEM team.