Difference between revisions of "Team:DTU-Denmark"

(another update...)
(does this work?)
Line 18: Line 18:
 
 
 
 
−
 
−
/**************************************************************** MENU ***************************************************************/
 
−
/* Wrapper for the menu */
 
−
.igem_2017_menu_wrapper {
 
−
width: 15%;
 
−
height:100vh;
 
−
position:fixed;
 
−
right:0%;
 
−
padding:0px;
 
−
float:right;
 
−
border-left: 1px solid #d3d3d3;
 
−
background-color:#dddddd;
 
−
text-align:left;
 
−
font-family:Tahoma, Geneva, sans-serif;
 
−
overflow-y: auto;
 
−
overflow-x: hidden;
 
−
}
 
−
 
−
/* this hides the scrollbar to keep view consistency */
 
−
.igem_2017_menu_wrappe::-webkit-scrollbar {
 
−
display: none;
 
−
}
 
−
 
−
 
−
/* styling for links in the menu, removes the line under text */
 
−
.igem_2017_menu_wrapper a { 
 
−
text-decoration: none;
 
−
}
 
−
 
−
 
−
/* styling for the images in the menu */
 
−
.igem_2017_menu_wrapper img {
 
−
width: 100%;
 
−
}
 
−
 
−
/* styling for the menu buttons */
 
−
.igem_2017_menu_wrapper .menu_button {
 
−
width: 100%;
 
−
padding: 10px 0px 10px 15px;
 
−
float:left;
 
−
border-bottom: 1px solid #d3d3d3;
 
−
font-size: 12px;
 
−
font-weight: bold;
 
−
color: #5e5f5f;
 
−
cursor: pointer;
 
−
}
 
−
 
−
 
−
.igem_2017_menu_wrapper .menu_bottom_padding {
 
−
width: 100%;
 
−
height: 30px;
 
−
float:left;
 
−
}
 
−
 
−
.menu_button.direct_to_page {
 
−
padding-left: 36px;
 
−
}
 
−
 
−
 
−
.igem_2017_menu_wrapper .menu_button .expand_collapse_icon {
 
−
width:10%;
 
−
float:left;
 
−
}
 
−
 
−
.igem_2017_menu_wrapper .menu_button .expand_collapse_icon::before {
 
−
content: "+"; 
 
−
}
 
−
 
−
.open::before {
 
−
content: "-" !important; 
 
−
}
 
−
 
−
 
−
 
−
/* styling for the menu buttons on hover */
 
−
.igem_2017_menu_wrapper .menu_button:hover, .igem_2017_menu_wrapper .submenu_button:hover ,  .submenu_button.current_page:hover {
 
−
background-color: #3399ff;
 
−
text-decoration: none;
 
−
color:#ffffff;
 
−
}
 
−
 
−
/* styling for the menu button when it is the current page */
 
−
.current_page {
 
−
background-color:#7fc1f7  !important;
 
−
color:#5e5f5f !important;
 
−
}
 
−
 
−
 
−
/* styling for the submenu buttons */
 
−
.igem_2017_menu_wrapper .submenu_button {
 
−
width: 100%;
 
−
padding: 10px 0px 10px 34px;
 
−
float:left;
 
−
background-color:#f2f2f2;
 
−
border-bottom: 1px solid #d3d3d3;
 
−
font-size: 12px;
 
−
color: #5e5f5f;
 
−
cursor: pointer;
 
−
}
 
−
 
−
/* wrapper for the submenu items, they are hidden by default*/
 
−
.igem_2017_menu_wrapper .submenu_wrapper {
 
−
display:none;
 
−
}
 
−
 
−
/* when the page size is bigger than 800px, this show/hide control is hidden by default */
 
−
.igem_2017_menu_wrapper #display_menu_control {
 
−
display:none;
 
−
text-align:center;
 
−
}
 
−
 
−
 
 
/***************************************************** CONTENT OF THE PAGE ****************************************************/
 
/***************************************************** CONTENT OF THE PAGE ****************************************************/
  
Line 358: Line 246:
 
     font-weight: bold;
 
     font-weight: bold;
 
}
 
}
 +
 +
/*sets boxes so that the width and height properties (and min/max properties)
 +
  includes content, padding and border, but not the margin*/
 +
* {
 +
  box-sizing: border-box;
 +
  font-family: sans-serif, "Times New Roman", Times, serif;
 +
}
 +
 +
/*makes the website span from edge to edge of the viewport*/
 +
body {
 +
position: relative;
 +
  width: 100%;
 +
  margin: 0px;
 +
  padding:0px;
 +
}
 +
 +
/*centers all headlines as standard*/
 +
h1, h2, h3, h4, h5, h6 {
 +
  text-align: center;
 +
}
 +
 +
/*defines percentage columns used for layout so everything
 +
  but the main content spans from edge to edge of the viewport*/
 +
.col-1 {width: 08.33%;}
 +
.col-2 {width: 16.66%;}
 +
.col-3 {width: 25.00%;}
 +
.col-4 {width: 33.33%;}
 +
.col-5 {width: 41.66%;}
 +
.col-6 {width: 50.00%;}
 +
.col-7 {width: 58.33%;}
 +
.col-8 {width: 66.66%;}
 +
.col-9 {width: 75.00%;}
 +
.col-10 {width: 83.33%;}
 +
.col-11 {width: 91.66%;}
 +
.col-12 {width: 100.0%;}
 +
 +
/*defines columns in pixels used for main content area, so
 +
  user zoom will not affect the layout*/
 +
.colp-1 {width: calc(1000px/12);}
 +
.colp-2 {width: calc(1000px/12*2);}
 +
.colp-3 {width: calc(1000px/12*3);}
 +
.colp-4 {width: calc(1000px/12*4);}
 +
.colp-5 {width: calc(1000px/12*5);}
 +
.colp-6 {width: calc(1000px/12*6);}
 +
.colp-7 {width: calc(1000px/12*7);}
 +
.colp-8 {width: calc(1000px/12*8);}
 +
.colp-9 {width: calc(1000px/12*9);}
 +
.colp-10 {width: calc(1000px/12*10);}
 +
.colp-11 {width: calc(1000px/12*11);}
 +
.colp-12 {width: 1000px;}
 +
 +
/*makes all the columns go to the left of
 +
  the page and "stack" to the right if room*/
 +
[class*="col-"] {
 +
  float: left;
 +
  padding: 15px;
 +
}
 +
[class*="colp-"] {
 +
  float: left;
 +
  padding: 15px;
 +
}
 +
 +
/***********EACH ROW MUST BE 12 COLUMNS TOTAL*********/
 +
 +
/*(example col-4, col-6, col-2 is a row)
 +
  clears the row of other content*/
 +
.row::after {
 +
  content: "";
 +
  clear: both;
 +
  display: table;
 +
}
 +
 +
 +
 +
/****************************************************************************************************************/
 +
/******************************************* NAVBAR AND PROGRESS BAR  *******************************************/
 +
/****************************************************************************************************************/
 +
 +
 +
 +
/*defines key properties of the nav bar*/
 +
nav {
 +
  margin: 0px;
 +
  padding: 0px;
 +
  overflow: hidden;
 +
  top: 0;
 +
  width: 100%;
 +
  height: 40px;
 +
}
 +
 +
/*hides list*/
 +
nav ul {
 +
  height: 0px;
 +
  list-style-type: none;
 +
}
 +
 +
/*sets color of nav bar when the page is scrolled to the top*/
 +
.navbar {
 +
  -webkit-transition: background 1s; /* Safari */
 +
  transition: background 1s;
 +
  background-image: -webkit-linear-gradient(180deg, rgba(40,40,40,0.6), rgba(150,150,150,0.3)); /* For Safari 5.1 to 6.0 */
 +
  background-image: -o-linear-gradient(180deg, rgba(40,40,40,0.6), rgba(150,150,150,0.3)); /* For Opera 11.1 to 12.0 */
 +
  background-image: -moz-linear-gradient(180deg, rgba(40,40,40,0.6), rgba(150,150,150,0.3)); /* For Firefox 3.6 to 15 */
 +
  background-image: linear-gradient(180deg, rgba(40,40,40,0.6), rgba(150,150,150,0.3)); /* Standard syntax (must be last) */
 +
  box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.3);
 +
}
 +
 +
/*sets the color of the nav bar when scrolled down to
 +
  the main text TRANSITIONS CANNOT BE USED HERE*/
 +
.navbar.scrolledpastnav {
 +
  -webkit-transition: background 1.5s; /* Safari */
 +
transition: background 1.5s;
 +
background-color: rgba(20,20,20,1);
 +
  box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.7);
 +
}
 +
 +
/*helps center navar. The sum of the nav bar choice
 +
  widths is 1000px (5*200px)*/
 +
.navbarcenter {
 +
    width: 1000px;
 +
    margin: auto;
 +
}
 +
 +
/*makes nav bar choices float next to each other*/
 +
.dropdown {
 +
    float: right;
 +
    height: 38px;
 +
}
 +
 +
/*layout of nav bar choice buttons*/
 +
.dropdown .dropbtn {
 +
  height: 38px;
 +
  display: inline-block;
 +
  color: white;
 +
  text-align: center;
 +
  padding: 10px 16px;
 +
  width: 200px;
 +
  text-decoration: none;
 +
  font-size: 1em;
 +
  font-family: sans-serif, "Times New Roman", Times, serif;
 +
}
 +
 +
/*sets background of navbar choice buttons when hovered*/
 +
.dropdown:hover .dropbtn {
 +
background: -webkit-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); /* For Safari 5.1 to 6.0 */
 +
  background: -o-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); /* For Opera 11.1 to 12.0 */
 +
  background: -moz-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); /* For Firefox 3.6 to 15 */
 +
  background: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); /* Standard syntax (must be last) */
 +
}
 +
 +
/*hides dropdown choices, sets background and shadows. makes sure that
 +
  the width is not less than the width of the nav bar choice buttons*/
 +
.dropdown-content {
 +
  -webkit-transition: background 1.5s; /* Safari */
 +
  transition: background 1.5s;
 +
 +
  /*border has same height as progress bar*/
 +
  border-top: 2px solid rgba(150,150,150,0.3);
 +
 +
  /*fixes layout issue with border rendering 3 px*/
 +
  margin-top: -0.1px;
 +
  display: none;
 +
  position: absolute;
 +
  background-color: transparent;
 +
  min-width: 200px;
 +
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 +
  z-index: 1;
 +
}
 +
 +
/*sets layout of dropdown menu when nav bar changes layout*/
 +
.dropdown-content.scrolledpastnav {
 +
  -webkit-transition: background 1.5s; /* Safari */
 +
  transition: background 1.5s;
 +
 +
  /*border has same height as progress bar*/
 +
  border-top: 2px solid transparent;
 +
}
 +
 +
 +
/*displays dropdown content when nav bar choice is hovered*/
 +
.dropdown:hover .dropdown-content, .dropdown:focus .dropdown-content {
 +
  display: block;
 +
}
 +
 +
/*defines nav bar dropdown link layout*/
 +
.dropdown-content a {
 +
  color: black;
 +
  background-color: white;
 +
  padding: 12px 16px;
 +
  text-decoration: none;
 +
  display: block;
 +
  text-align: left;
 +
}
 +
 +
/*changes navbar dropdown menu color when choice is hovered*/
 +
.dropdown-content a:hover, .dropdown-content a:focus {
 +
    background-color: rgb(235,235,235);
 +
}
 +
 +
/*********** PROGRESS BAR ************/
 +
 +
/*defines progress bar layout*/
 +
progress {
 +
  /* Positioning */
 +
  position: fixed;
 +
  left: 0;
 +
  top: 38px;
 +
 +
  /* Dimensions */
 +
  width: 100%;
 +
  height: 2px;
 +
 +
  /* Reset the apperance */ 
 +
  -webkit-appearance: none;
 +
    -moz-appearance: none;
 +
          appearance: none;
 +
 +
  /* Get rid of the default border in Firefox/Opera. */
 +
  border: none;
 +
 +
  /* For Firefox/IE10+ */
 +
  background-color: rgba(150,150,150,0.3);
 +
 +
  /* For IE10+, color of the progress bar */
 +
  color: white;
 +
}
 +
 +
/*changes progressbar when nav bar changes layout*/
 +
progress.scrolledpastnav {
 +
  -webkit-transition: background-color 1.5s; /* Safari */
 +
  transition: background-color 1.5s;
 +
  background-color: rgba(20,20,20,1);
 +
}
 +
 +
/*sets progress bar background for older browsers*/
 +
progress::-webkit-progress-bar {
 +
  background-color: rgba(150,150,150,0.3);
 +
}
 +
 +
/*sets color of progress bar value bar*/
 +
.flat::-webkit-progress-value {
 +
  -webkit-transition: background-color 1.5s; /* Safari */
 +
  transition: background-color 1.5s;
 +
  background-color: white;
 +
}
 +
 +
/*sets color of progress bar value bar*/
 +
.flat::-moz-progress-bar {
 +
  -webkit-transition: background-color 1.5s; /* Safari */
 +
  transition: background-color 1.5s;
 +
  background-color: white;
 +
}
 +
 +
/*sets the progress bar container (not so important for layout it seems)*/
 +
.progress-container {
 +
  width: 100%;
 +
  background-color: transparent;
 +
  position: fixed;
 +
  top: 38px;
 +
  left: 0;
 +
  height: 2px;
 +
  display: block;
 +
}
 +
 +
/******** END OF PROGRESS BAR ********/
 +
 +
 +
 +
/****************************************************************************************************************/
 +
/************************************* PARALLAX IMAGE (WHOLE SPLASH SCREEN) *************************************/
 +
/****************************************************************************************************************/
 +
 +
 +
 +
/*creates the parallax effect on main page when scrooling*/
 +
.parallax {
 +
position: relative;
 +
z-index: -1;
 +
  background-image: url("../logos/indian_cobra_good_version.png");
 +
  width: inherit;
 +
 +
  /*height is viewport height +1.5% of viewport
 +
    height (matches with the height of .parralaxfade)*/
 +
  height: 101.5vh;
 +
  background-attachment: fixed;
 +
  background-position: center;
 +
  background-repeat: no-repeat;
 +
  background-size: cover;
 +
}
 +
 +
/*sets position and style for the headline text on main page*/
 +
.homepageheadline {
 +
position: absolute;
 +
width: 850px;
 +
height: 150px;
 +
line-height: 60px;
 +
  text-align: center;
 +
top: 12%;
 +
left: 50%;
 +
margin: 0px 0px 0px -425px;
 +
}
 +
 +
/*styles line one in the headline text on main page*/
 +
#homepageheadline1 {
 +
font-size: 5em;
 +
color: white;
 +
margin: 0px;
 +
padding: 0px;
 +
line-height: normal;
 +
font-family: sans-serif;
 +
text-shadow: 2px 2px 6px #727272;
 +
}
 +
 +
/*styles line two in the headline text on main page*/
 +
#homepageheadline2 {
 +
font-size: 3em;
 +
color: white;
 +
margin: 0px;
 +
padding: 0px;
 +
line-height: normal;
 +
font-family: sans-serif;
 +
text-shadow: 0px 0px 5px #727272;
 +
}
 +
 +
/*creates a fade from parallax image to main content
 +
  Height fits extra height in .parallax*/
 +
.parallaxfade {
 +
width: inherit;
 +
height: 1.5vh;
 +
position: absolute;
 +
bottom: 0px;
 +
background: -webkit-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); /* For Safari 5.1 to 6.0 */
 +
  background: -o-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); /* For Opera 11.1 to 12.0 */
 +
  background: -moz-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); /* For Firefox 3.6 to 15 */
 +
  background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,1)); /* Standard syntax (must be last) */
 +
}
 +
 +
 +
 +
/****************************************************************************************************************/
 +
/************************************************* MAIN CONTENT *************************************************/
 +
/****************************************************************************************************************/
 +
 +
 +
/*styles main text area on main page*/
 +
.maincontainer {
 +
margin: 100px auto;
 +
  width: 1000px;
 +
  text-align: justify;
 +
  clear: both;
 +
  display: table;
 +
}
 +
 +
/*container for the two pictures in top of main content*/
 +
.imgmenu {
 +
  max-width: 100%;
 +
  margin: 70px auto 100px auto;
 +
  overflow: hidden;
 +
}
 +
 +
/*sets container for the individual pictures*/
 +
.imgmenuitem {
 +
  position: relative;
 +
  width: 100%;
 +
  max-width: 700px;
 +
  margin: 0px auto;
 +
  height: 400px;
 +
  border-radius: 20px;
 +
  overflow: hidden;
 +
  cursor: pointer;
 +
}
 +
 +
/*sets layout for the pictures themselves*/
 +
.imgmenucontent {
 +
  height: 100%;
 +
  width: 100%;
 +
  background-size: cover;
 +
  background-repeat: no-repeat;
 +
  -webkit-transition: all .5s;
 +
  -moz-transition: all .5s;
 +
  -o-transition: all .5s;
 +
  transition: all .5s;
 +
  font
 +
}
 +
 +
/*the different images are styled*/
 +
.img1 {
 +
  background-image: url("../logos/the_problem.jpg");
 +
  opacity: 0.9;
 +
  -webkit-filter: brightness(1.2);
 +
  filter: brightness(1.2);
 +
  background-position: -200px center;
 +
}
 +
.img2 {
 +
  background-image: url("../logos/snake_map.png");
 +
  background-position: -200px -20px;
 +
}
 +
 +
/*zooms picture when hovered*/
 +
.imgmenuitem:hover .imgmenucontent, .imgmenuitem:focus .imgmenucontent {
 +
  -ms-transform: scale(1.1);
 +
  -moz-transform: scale(1.1);
 +
  -webkit-transform: scale(1.1);
 +
  -o-transform: scale(1.1);
 +
  transform: scale(1.1);
 +
  opacity: 0.5;
 +
}
 +
 +
/*sets layout of picture overlay*/
 +
.imgmenuoverlay {
 +
  position: absolute;
 +
  transition: 0.5s ease;
 +
  background-color: rgba(50,50,50,0.6);
 +
  padding: 16px 12px;
 +
  width: 100%;
 +
  height: 40%;
 +
  bottom: 0px;
 +
}
 +
 +
/*changes layout of overlay on pictures when hovered*/
 +
.imgmenuitem:hover .imgmenuoverlay, .imgmenuitem:focus .imgmenuoverlay {
 +
  background-color: rgba(50,50,50,0.9);
 +
}
 +
 +
/*sets style of the text in the overlay*/
 +
.imgmenuoverlay a {
 +
  color: white;
 +
  cursor: pointer;
 +
  text-decoration: none;
 +
}
 +
 +
/*sets style of the header in the overlay*/
 +
.imgmenuoverlay a *:first-child {
 +
  width: 100%;
 +
  border-bottom: 1px solid white;
 +
  text-align: center;
 +
}
 +
 +
/*styles the paragraph in the overlay*/
 +
.imgmenuoverlay a p {
 +
  font-size: 14px;
 +
}
 +
 +
 +
 +
/****************************************************************************************************************/
 +
/**************************************************** FOOTER ****************************************************/
 +
/****************************************************************************************************************/
 +
 +
 +
 +
/*styles main footer area*/
 +
footer {
 +
  background: #848282;
 +
  color: white;
 +
  margin: 0px;
 +
  padding: 0px;
 +
  width: 100%;
 +
  min-width: 1000px;
 +
  position: absolute;
 +
  text-align: center;
 +
  color: white;
 +
  font-size:x-small;
 +
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
 +
}
 +
 +
/*defines a container of same width as main content
 +
  that contains footer content*/
 +
.footercontainer {
 +
  width: 1000px;
 +
  margin: auto;
 +
}
 +
 +
/*centers footer content in the individual columns*/
 +
.footercolstyle {
 +
  align-content: center;
 +
}
 +
 +
/*styles left footer column*/
 +
.leftfootercol {
 +
  float: left;
 +
}
 +
 +
/*styles right footer column*/
 +
.rightfootercol {
 +
  float: right;
 +
}
 +
 +
/*gives space between the "find us at" icons*/
 +
footer img {
 +
  margin: 10px;
 +
}
 +
 +
 +
 +
/****************************************************************************************************************/
 +
/*************************** HELPING CLASSES - OVERWRITES OTHER PREDEFINED PROPERTIES ***************************/
 +
/****************************************************************************************************************/
 +
 +
 +
 +
/*removes margin and padding*/
 +
.rmvpadmarg {
 +
    margin: 0px;
 +
    padding: 0px;
 +
}
 +
 +
/*removes vertical lines on links*/
 +
.rmvlinkstyle a {
 +
text-decoration: none;
 +
}
 +
 +
/*brings element to front of page, used to bring nav bar
 +
  in front of everything else*/
 +
.tofront {
 +
  position: relative;
 +
  z-index: 9999;
 +
}
 +
 +
/*sets the position of the element to be given a bottom border*/
 +
.bottomborder {
 +
  position: relative;
 +
}
 +
 +
/*styles borders for h1 elements*/
 +
h1.bottomborder:after {
 +
  content:"";
 +
  background: black;
 +
  position: absolute;
 +
  bottom: -5px;
 +
  left: 150px;
 +
  height: 1px;
 +
  width: 700px;
 +
}
 +
 +
/*styles borders for h2 elements*/
 +
h2.bottomborder:after {
 +
  content:"";
 +
  background: black;
 +
  position: absolute;
 +
  bottom: -5px;
 +
  left: 300px;
 +
  height: 1px;
 +
  width: 400px;
 +
}
 
 
 
</style>
 
</style>
Line 375: Line 808:
  
  
−
<div class="igem_2017_content_wrapper">
+
<body>
−
<h1>DTU-Denmark</h1>
+
<!-- header contains the top navbar
−
</div>
+
    creates a 1 column (12) row containing the header
 +
    and defines the dropdown list-->
 +
<div class="col-12 rmvpadmarg tofront" style="position: fixed;">
 +
<nav class="navbar">
 +
<div class="navbarcenter">
 +
<ul class="rmvpadmarg">
 +
    <li class="dropdown">
 +
    <a href="#" class="dropbtn">Team</a>
 +
    <div class="dropdown-content">
 +
        <a href="#">Members</a>
 +
        <a href="#">Funds</a>
 +
        <a href="#">Sponsors</a>
 +
    </div>
 +
    </li>
 +
    <li class="dropdown">
 +
        <a href="#" class="dropbtn">Human practices</a>
 +
    <div class="dropdown-content">
 +
    <a href="#">Integrated practices</a>
 +
    <a href="#">Public engagement</a>
 +
        <a href="#">Collaborations</a>
 +
        </div>
 +
</li>
 +
<li class="dropdown">
 +
    <a href="#" class="dropbtn">Notes</a>
 +
    <div class="dropdown-content">
 +
          <a href="#">Lab diary</a>
 +
          <a href="#">Protocols</a>
 +
        <a href="#">Criteria</a>
 +
            <a href="#">Brainstorm</a>
 +
        </div>
 +
</li>   
 +
<li class="dropdown">
 +
    <a href="#" class="dropbtn">Modelling</a>
 +
    <div class="dropdown-content">
 +
        <a href="#">Overview</a>
 +
        <a href="#">In depth</a>
 +
    </div>
 +
</li> 
 +
<li class="dropdown">
 +
        <a href="#" class="dropbtn">Project</a>
 +
    <div class="dropdown-content">
 +
        <a href="#">Description</a>
 +
        <a href="#">Results</a>
 +
        <a href="#">Prototype</a>
 +
    </div>
 +
</li> 
 +
</ul>
 +
</div>
 +
 
 +
<!-- adds the progress bar below the menu -->
 +
<progress value="0" id="progressBar">
 +
<div class="progress-container">
 +
    <span class="progress-bar"></span>
 +
</div>
 +
</progress>
 +
</nav>
 +
</div>
 +
 
 +
 
 +
<!-- Creates a 1 column (12) row containing the parallax
 +
    splash screen -->
 +
<div class="row">
 +
<div class="col-12 rmvpadmarg">
 +
<div class="parallax">
 +
<div class="homepageheadline">
 +
<p id="homepageheadline1">Snakebite Detectives</p>
 +
<p id="homepageheadline2">iGEM 2017</p>
 +
</div>
 +
<div class="parallaxfade"></div>
 +
</div>
 +
</div>
 +
</div>
 +
 
 +
<!-- creates a 3 column (2-8-2) row with the main container
 +
    and air on each side -->
 +
<!-- navbarfade starts here -->
 +
 
 +
<div class="maincontainer" id="startchange">
 +
 
 +
<!-- creates the main container (text area) -->
 +
<div class="colp-12 rmvpadmarg maincontainer">
 +
<h1 class="bottomborder">The most neglected tropical disease</h1>
 +
 
 +
<div class="row imgmenu">
 +
<div class="col-5 rmvpadmarg">
 +
    <div class="imgmenuitem" onclick="">
 +
        <div class="imgmenucontent img1"></div>
 +
        <div class="imgmenuoverlay">
 +
        <a href="#">
 +
        <h3 class="rmvpadmarg">What is the problem</h3>
 +
        <p>Some very informative text that will make the user click the link and learn more about our project</p>
 +
        </a>
 +
        </div>
 +
    </div>
 +
</div>
 +
<div class="col-2 rmvpadmarg"><p></p></div>
 +
<div class="col-5 rmvpadmarg">
 +
    <div class="imgmenuitem right" onclick="">
 +
        <div class="imgmenucontent img2"></div>
 +
        <div class="imgmenuoverlay">
 +
        <a href="#">
 +
        <h3 class="rmvpadmarg">Where is the problem</h3>
 +
        <p>Some more very informative text that will make the user click the link and learn more about our project</p>
 +
        </a>
 +
        </div>
 +
    </div>
 +
    </div>
 +
</div>
 +
 
 +
<h2 class="bottomborder">Project description</h2>
 +
<p>Envenomation by snakebite is one of the most neglected diseases with an estimated 5 million bites. These result in about 100,000 deaths and 400,000 disabilities annually [1]. The only effective treatment is animal derived antivenoms, which frequently causes adverse reactions [2]. As a result they are often only administered as a last resort.</p>
 +
 
 +
<p>One of the major problems related to treatment of snake bites concerns the lack of identification of the snake. When bitten, it is difficult for most people to remember details about the snake, which makes it almost impossible to confidently administer the correct specific antivenom. Currently, if the snake cannot be identified, multispecies antivenom is used in a consequently higher dose leading to more severe side effects. By solving the venom identification problem it could potentially increase the survival rate of snake bite victims. This is due to decreased diagnosis time and less amount of antivenom necessary for treatment, thereby causing fewer adverse reactions in the patient [3].</p>
 +
 
 +
<p>We aim to create a novel diagnostic platform by using synthetic biology derived protease activity assay to identify specific venom enzymes that, by developing suitable substrates, can investigate the relative composition of specific venom components in a blood sample. Our goal is to create a diagnostic tool that would make it possible for a clinician to quickly determine which antivenom is necessary, or if it is necessary at all.</p><br /><br />
 +
 
 +
<p>References:<br /><br />
 +
[1] Chippaux JP (1998). <em>Snake-bites: appraisal of the global situation.</em> Bulletin of the World Health Organization, 76(5),515-24.<br />
 +
[2] Gutiérrez JM, León G, Lomonte B, Angulo Y (2011). <em>Antivenoms for Snakebite Envenomings. Inflammation and Allergy.</em> Drug Targets 10(5), 369–80.<br />
 +
[3] Warrell D, Gutierrez JM, Padilla A (2007). <em>Rabies and Envenomings: a Neglected Public Health Issue: Report of a Consultative Meeting.</em> World Health Organization, Geneva.</p>
 +
 
 +
</div>
 +
</div>
 +
 
 +
<!-- creates a 4 column (3-3-3-3) design with 1 and 4 being whitespace, 3 is "FIND US AT" and 4 sponsors-->
 +
<footer id="footer">
 +
<div class="footercontainer">
 +
 
 +
<!-- left footer whitespace -->
 +
<div class="colp-1 rmvpadmarg">
 +
<p></p>
 +
</div>
 +
 
 +
<!-- contact information display in footer -->
 +
<div class="colp-5 rmvpadmarg">
 +
<div class="rmvlinkstyle footercolstyle leftfootercol">
 +
            <p>FIND US AT</p>
 +
<a href="mailto:dtubiobuilders@gmail.com">
 +
    <img src="logos/mail_white.svg" alt="Mail" height="40">
 +
</a>
 +
<a href="https://www.facebook.com/dtubiobuilders/?fref=ts">
 +
        <img src="https://static.igem.org/mediawiki/2016/4/4b/T--DTU-Denmark--FB_logo_white.png" alt="Facebook" height="40">
 +
    </a>
 +
    <a href="https://twitter.com/iGEM_DTU">
 +
        <img src="https://static.igem.org/mediawiki/2016/7/77/T--DTU-Denmark--Twitter_logo_white.png" alt="Twitter" height="35">
 +
        </a>
 +
<br />
 +
<span>DTU BIOBUILDERS</span><br />
 +
<span>DENMARK</span><br />
 +
<span>DTU - SØLTOFTS PLADS, BYGN. 221/006</span><br />
 +
<span>2800 KGS. LYNGBY</span><br />
 +
    </div>
 +
</div>
 +
 
 +
<!-- main sponsors footer display -->
 +
<div class="colp-5 rmvpadmarg">
 +
<div class="rmvlinkstyle footercolstyle rightfootercol">
 +
<p>MAIN SPONSORS</p>
 +
<span><a href="http://www.lundbeckfonden.com/">
 +
    <img src="https://static.igem.org/mediawiki/2016/c/ce/T--DTU-Denmark--LF_logo.jpg" alt="Lundbeck fundation" align="middle" width="150">
 +
</a>
 +
<a href="http://www.dtu.dk/Uddannelse/Studieliv/Faa-mere-ud-af-dit-studie/DTU-Blue-Dot-Projects">
 +
<img src="https://static.igem.org/mediawiki/2016/d/d7/T--DTU-Denmark--DTU_logo.png" alt="DTU blue dot" align="middle" width="150">
 +
</a>
 +
    </div>
 +
</div>
 +
 
 +
<!-- right footer whitespace -->
 +
<div class="colp-1 rmvpadmarg">
 +
<p></p>
 +
</div>
 +
</div>
 +
</footer>

Revision as of 07:51, 13 July 2017

Snakebite Detectives

iGEM 2017

The most neglected tropical disease

What is the problem

Some very informative text that will make the user click the link and learn more about our project

Where is the problem

Some more very informative text that will make the user click the link and learn more about our project

Project description

Envenomation by snakebite is one of the most neglected diseases with an estimated 5 million bites. These result in about 100,000 deaths and 400,000 disabilities annually [1]. The only effective treatment is animal derived antivenoms, which frequently causes adverse reactions [2]. As a result they are often only administered as a last resort.

One of the major problems related to treatment of snake bites concerns the lack of identification of the snake. When bitten, it is difficult for most people to remember details about the snake, which makes it almost impossible to confidently administer the correct specific antivenom. Currently, if the snake cannot be identified, multispecies antivenom is used in a consequently higher dose leading to more severe side effects. By solving the venom identification problem it could potentially increase the survival rate of snake bite victims. This is due to decreased diagnosis time and less amount of antivenom necessary for treatment, thereby causing fewer adverse reactions in the patient [3].

We aim to create a novel diagnostic platform by using synthetic biology derived protease activity assay to identify specific venom enzymes that, by developing suitable substrates, can investigate the relative composition of specific venom components in a blood sample. Our goal is to create a diagnostic tool that would make it possible for a clinician to quickly determine which antivenom is necessary, or if it is necessary at all.



References:

[1] Chippaux JP (1998). Snake-bites: appraisal of the global situation. Bulletin of the World Health Organization, 76(5),515-24.
[2] Gutiérrez JM, León G, Lomonte B, Angulo Y (2011). Antivenoms for Snakebite Envenomings. Inflammation and Allergy. Drug Targets 10(5), 369–80.
[3] Warrell D, Gutierrez JM, Padilla A (2007). Rabies and Envenomings: a Neglected Public Health Issue: Report of a Consultative Meeting. World Health Organization, Geneva.

FIND US AT

Mail Facebook Twitter
DTU BIOBUILDERS
DENMARK
DTU - SØLTOFTS PLADS, BYGN. 221/006
2800 KGS. LYNGBY

MAIN SPONSORS

Lundbeck fundation DTU blue dot