|
|
| (108 intermediate revisions by 2 users not shown) |
| Line 4: |
Line 4: |
| | | | |
| | <!-- importing style sheet --> | | <!-- importing style sheet --> |
| | + | <link rel="stylesheet" type="text/css" href="https://2017.igem.org/Team:DTU-Denmark/stylesheetsub?action=raw&ctype=text/css&?ver=7"> |
| | | | |
| − | <link rel="stylesheet" type="text/css" href="https://2017.igem.org/Team:DTU-Denmark/stylesheetmain?action=raw&ctype=text/css"> | + | <!--- importing script INCLUDING NAVBAR HTML CODE --> |
| − | | + | <script type="text/javascript" src="https://2017.igem.org/Team:DTU-Denmark/jsnavbarfade?action=raw&ctype=text/javascript"></script> |
| − | <style>
| + | |
| − | | + | |
| − | /****************************************************************************************************************/
| + | |
| − | /************************************** OVERWRITES DEFAULT WIKI SETTINGS ****************************************/
| + | |
| − | /************************************************* (iGEM CODE) **************************************************/
| + | |
| − | /****************************************************************************************************************/
| + | |
| − |
| + | |
| − | | + | |
| − | /* Clear the default wiki settings */
| + | |
| − |
| + | |
| − | #home_logo, #sideMenu {
| + | |
| − | display:none;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #sideMenu, #top_title, .patrollink {
| + | |
| − | display:none;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #content {
| + | |
| − | width: 100%;
| + | |
| − | padding: 0px;
| + | |
| − | margin-top: -7px;
| + | |
| − | margin-left: 0px;
| + | |
| − | }
| + | |
| − | | + | |
| − | body {
| + | |
| − | background-color: white;
| + | |
| − | }
| + | |
| − | | + | |
| − | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 {
| + | |
| − | margin-bottom: 0px;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /****************************************************************************************************************/
| + | |
| − | /*********************************************** SETS MAIN STYLES ***********************************************/
| + | |
| − | /****************************************************************************************************************/
| + | |
| − | | + | |
| − | /***** TO OVERWRITE iGEM STYLING WHITHOUT MESSING WITH iGEM HEADER USE #windowcontent PREFIX IN CSS SYLING *****/
| + | |
| − | | + | |
| − | #windowcontent * {
| + | |
| − | box-sizing: border-box;
| + | |
| − | font-family: sans-serif, "Times New Roman", Times, serif;
| + | |
| − | margin: 0px;
| + | |
| − | padding: 0px;
| + | |
| − | }
| + | |
| − | | + | |
| − | #windowcontent ul, ol {
| + | |
| − | list-style: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | /*makes the website span from edge to edge of the viewport*/
| + | |
| − | | + | |
| − | #windowcontent 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 (OF THE SAME TYPE) IN TOTAL *****/
| + | |
| − | /************ (for example col-4, col-6, col-2 is a row) ***********/
| + | |
| − | | + | |
| − | | + | |
| − | /***** clears the row of other content *****/
| + | |
| − | | + | |
| − | .row::after {
| + | |
| − | content: "";
| + | |
| − | clear: both;
| + | |
| − | display: table;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | /****************************************************************************************************************/
| + | |
| − | /*************************** HELPING CLASSES - OVERWRITES OTHER PREDEFINED PROPERTIES ***************************/
| + | |
| − | /****************************************************************************************************************/
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | /***** removes margin and padding *****/
| + | |
| − | | + | |
| − | #windowcontent .rmvpadmarg {
| + | |
| − | margin: 0px;
| + | |
| − | padding: 0px;
| + | |
| − | }
| + | |
| − | | + | |
| − | /***** removes vertical lines on links *****/
| + | |
| − | | + | |
| − | #windowcontent .rmvlinkstyle a {
| + | |
| − | text-decoration: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | /***** brings element to front of page, used to bring nav bar in front of everything else *****/
| + | |
| − | | + | |
| − | #windowcontent .tofront {
| + | |
| − | position: relative;
| + | |
| − | z-index: 9999;
| + | |
| − | }
| + | |
| − | | + | |
| − | /***** sets the position of the element to be given a bottom border *****/
| + | |
| − | | + | |
| − | #windowcontent .bottomborder {
| + | |
| − | position: relative;
| + | |
| − | padding: 25px 0px;
| + | |
| − | }
| + | |
| − | | + | |
| − | /***** styles borders for h1 elements *****/
| + | |
| − | | + | |
| − | #windowcontent h1.bottomborder:after {
| + | |
| − | content:"";
| + | |
| − | background: black;
| + | |
| − | position: absolute;
| + | |
| − | left: 150px;
| + | |
| − | bottom: 16px;
| + | |
| − | height: 1px;
| + | |
| − | width: 700px;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /***** styles borders for h2 elements *****/
| + | |
| − | | + | |
| − | #windowcontent h2.bottomborder:after {
| + | |
| − | content:"";
| + | |
| − | background: black;
| + | |
| − | position: absolute;
| + | |
| − | left: 300px;
| + | |
| − | bottom: 18px;
| + | |
| − | height: 1px;
| + | |
| − | width: 400px;
| + | |
| − | }
| + | |
| − | | + | |
| − | #windowcontent .fixed {
| + | |
| − | position: fixed;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /****************************************************************************************************************/
| + | |
| − | /**************************************************** NAVBAR ****************************************************/
| + | |
| − | /****************************************************************************************************************/
| + | |
| − | | + | |
| − | | + | |
| − | /***** defines key properties of the nav bar *****/
| + | |
| − | | + | |
| − | #windowcontent nav {
| + | |
| − | margin: 0px;
| + | |
| − | padding: 0px;
| + | |
| − | overflow: hidden;
| + | |
| − | top: 0px;
| + | |
| − | width: 100%;
| + | |
| − | height: 40px;
| + | |
| − | }
| + | |
| − | | + | |
| − | /***** helps center navar. The sum of the nav bar choice widths is 1000px (5*200px) *****/
| + | |
| − | | + | |
| − | #windowcontent .navbarcenter {
| + | |
| − | width: 1000px;
| + | |
| − | margin: auto;
| + | |
| − | }
| + | |
| − | | + | |
| − | /***** sets color of nav bar when the page is scrolled to the top *****/
| + | |
| − | | + | |
| − | #windowcontent .navbar {
| + | |
| − | background-color: red;
| + | |
| − | }
| + | |
| − | | + | |
| − | /***** sets background of navbar choice buttons when hovered *****/
| + | |
| − | | + | |
| − | #windowcontent .dropdown:hover .dropbtn {
| + | |
| − | background: -webkit-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
| + | |
| − | background: -o-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
| + | |
| − | background: -moz-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
| + | |
| − | background: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
| + | |
| − | }
| + | |
| − | | + | |
| − | /***** makes nav bar choices float next to each other *****/
| + | |
| − | | + | |
| − | #windowcontent .dropdown {
| + | |
| − | float: right;
| + | |
| − | height: 40px;
| + | |
| − | }
| + | |
| − | | + | |
| − | /***** layout of nav bar choice buttons *****/
| + | |
| − | | + | |
| − | #windowcontent .dropdown .dropbtn {
| + | |
| − | height: 40px;
| + | |
| − | 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;
| + | |
| − | }
| + | |
| − | | + | |
| − | /***** hides dropdown choices, sets background and shadows. makes sure that the width is not less than the width of the nav bar choice buttons *****/
| + | |
| − | | + | |
| − | #windowcontent .dropdown-content {
| + | |
| − | -webkit-transition: background 1.5s; /* Safari */
| + | |
| − | transition: background 1.5s;
| + | |
| − | 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;
| + | |
| − | }
| + | |
| − | | + | |
| − | /***** displays dropdown content when nav bar choice is hovered *****/
| + | |
| − | | + | |
| − | #windowcontent .dropdown:hover .dropdown-content, #windowcontent .dropdown:focus .dropdown-content {
| + | |
| − | display: block;
| + | |
| − | }
| + | |
| − | | + | |
| − | /***** defines nav bar dropdown link layout *****/
| + | |
| − | | + | |
| − | #windowcontent .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 *****/
| + | |
| − | | + | |
| − | #windowcontent .dropdown-content a:hover, #windowcontent .dropdown-content a:focus {
| + | |
| − | background-color: rgb(235,235,235);
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /****************************************************************************************************************/
| + | |
| − | /************************************* PARALLAX IMAGE (WHOLE SPLASH SCREEN) *************************************/
| + | |
| − | /****************************************************************************************************************/
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | /***** creates the parallax effect on main page when scrooling *****/
| + | |
| − |
| + | |
| − | #windowcontent .parallax {
| + | |
| − | position: relative;
| + | |
| − | z-index: -1;
| + | |
| − | background-image: url("https://static.igem.org/mediawiki/2017/6/67/T--DTU-Denmark--Indian_Cobra.jpg");
| + | |
| − | 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;
| + | |
| − | min-width: 1000px;
| + | |
| − | }
| + | |
| − | | + | |
| − | /***** sets position and style for the headline text on main page *****/
| + | |
| − | | + | |
| − | #windowcontent .homepageheadline {
| + | |
| − | display: block;
| + | |
| − | margin: auto;
| + | |
| − | width: 700px;
| + | |
| − | padding-top: 15vh;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /***** styles line one in the headline text on main page *****/
| + | |
| − | | + | |
| − | #windowcontent #homepageheadline1 {
| + | |
| − | font-size: 5em;
| + | |
| − | color: white;
| + | |
| − | font-family: sans-serif;
| + | |
| − | text-shadow: 2px 2px 6px #727272;
| + | |
| − | text-align: center;
| + | |
| − | }
| + | |
| − | | + | |
| − | /***** styles line two in the headline text on main page *****/
| + | |
| − | | + | |
| − | #windowcontent #homepageheadline2 {
| + | |
| − | font-size: 3em;
| + | |
| − | color: white;
| + | |
| − | font-family: sans-serif;
| + | |
| − | text-shadow: 0px 0px 5px #727272;
| + | |
| − | text-align: center;
| + | |
| − | }
| + | |
| − | | + | |
| − | /***** creates a fade from parallax image to main content. Height fits extra height in .parallax *****/
| + | |
| − | | + | |
| − | #windowcontent .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.01), rgba(255,255,255,1)); /* Standard syntax (must be last) */
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /****************************************************************************************************************/
| + | |
| − | /************************************************* MAIN CONTENT *************************************************/
| + | |
| − | /****************************************************************************************************************/
| + | |
| − | | + | |
| − | | + | |
| − | /***** styles main text area on main page *****/
| + | |
| − | | + | |
| − | #windowcontent .maincontainer {
| + | |
| − | margin: 100px auto;
| + | |
| − | width: 1000px;
| + | |
| − | text-align: justify;
| + | |
| − | clear: both;
| + | |
| − | display: table;
| + | |
| − | }
| + | |
| − | | + | |
| − | /***** container for the two pictures in top of main content *****/
| + | |
| − |
| + | |
| − | #windowcontent .imgmenu {
| + | |
| − | max-width: 100%;
| + | |
| − | margin: 70px auto 100px auto;
| + | |
| − | overflow: hidden;
| + | |
| − | }
| + | |
| − | | + | |
| − | /***** sets container for the individual pictures *****/
| + | |
| − | | + | |
| − | #windowcontent .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 *****/
| + | |
| − |
| + | |
| − | #windowcontent .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;
| + | |
| − | }
| + | |
| − | | + | |
| − | /***** the different images are styled *****/
| + | |
| − | | + | |
| − | #windowcontent .img1 {
| + | |
| − | background-image: url("https://static.igem.org/mediawiki/2017/e/e1/T--DTU-Denmark--snake_problem.jpg");
| + | |
| − | opacity: 0.9;
| + | |
| − | -webkit-filter: brightness(1.2);
| + | |
| − | filter: brightness(1.2);
| + | |
| − | background-position: -200px center;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #windowcontent .img2 {
| + | |
| − | background-image: url("https://static.igem.org/mediawiki/2017/b/bc/T--DTU-Denmark--snake_map.jpg");
| + | |
| − | background-position: -200px -20px;
| + | |
| − | }
| + | |
| − | | + | |
| − | /***** zooms picture when hovered *****/
| + | |
| − |
| + | |
| − | #windowcontent .imgmenuitem:hover .imgmenucontent, #windowcontent .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 *****/
| + | |
| − | | + | |
| − | #windowcontent .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 *****/
| + | |
| − | | + | |
| − | #windowcontent .imgmenuitem:hover .imgmenuoverlay, #windowcontent .imgmenuitem:focus .imgmenuoverlay {
| + | |
| − | background-color: rgba(50,50,50,0.9);
| + | |
| − | }
| + | |
| − | | + | |
| − | /***** sets style of the text in the overlay *****/
| + | |
| − |
| + | |
| − | #windowcontent .imgmenuitem a * {
| + | |
| − | color: white;
| + | |
| − | cursor: pointer;
| + | |
| − | text-decoration: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | /***** sets style of the header in the overlay *****/
| + | |
| − | | + | |
| − | #windowcontent .imgmenuitem a *:first-child {
| + | |
| − | width: 100%;
| + | |
| − | border-bottom: 1px solid white;
| + | |
| − | text-align: center;
| + | |
| − | }
| + | |
| − | | + | |
| − | /***** styles the paragraph in the overlay *****/
| + | |
| − |
| + | |
| − | #windowcontent .imgmenuitem a p {
| + | |
| − | font-size: 14px;
| + | |
| − | }
| + | |
| − | | + | |
| − | /****************************************************************************************************************/
| + | |
| − | /**************************************************** FOOTER ****************************************************/
| + | |
| − | /****************************************************************************************************************/
| + | |
| − | | + | |
| − | | + | |
| − | /***** styles main footer area *****/
| + | |
| − |
| + | |
| − | #windowcontent footer {
| + | |
| − | background: #848282;
| + | |
| − | color: white;
| + | |
| − | 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 *****/
| + | |
| − | | + | |
| − | #windowcontent .footercontainer {
| + | |
| − | width: 1000px;
| + | |
| − | margin: 20px auto 25px auto;
| + | |
| − | }
| + | |
| − | | + | |
| − | /***** centers footer content in the individual columns *****/
| + | |
| − |
| + | |
| − | #windowcontent .footercolstyle * {
| + | |
| − | align-content: center;
| + | |
| − | text-align: center;
| + | |
| − | }
| + | |
| − | | + | |
| − | #windowcontent .footercolstyle a {
| + | |
| − | padding: 0px;
| + | |
| − | }
| + | |
| − | | + | |
| − | /***** styles left footer column *****/
| + | |
| − |
| + | |
| − | #windowcontent .leftfootercol {
| + | |
| − | float: left;
| + | |
| − | }
| + | |
| − | | + | |
| − | /***** styles right footer column *****/
| + | |
| − | | + | |
| − | #windowcontent .rightfootercol {
| + | |
| − | float: right;
| + | |
| − | }
| + | |
| − | | + | |
| − | /***** gives space between the "find us at" icons *****/
| + | |
| − |
| + | |
| − | #windowcontent footer img {
| + | |
| − | margin: 10px;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | </style>
| + | |
| | | | |
| | <!-- This tells the browser that your page is responsive --> | | <!-- This tells the browser that your page is responsive --> |
| Line 592: |
Line 24: |
| | <div class="col-12 rmvpadmarg tofront fixed"> | | <div class="col-12 rmvpadmarg tofront fixed"> |
| | <nav class="navbar"> | | <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="https://2017.igem.org/Team:DTU-Denmark/Description">Description</a>
| |
| − | <a href="#">Results</a>
| |
| − | <a href="#">Prototype</a>
| |
| − | </div>
| |
| − | </li>
| |
| − | </ul>
| |
| − | </div>
| |
| | </nav> | | </nav> |
| | </div> | | </div> |
| Line 644: |
Line 32: |
| | | | |
| | <!-- creates a 3 column (2-8-2) row with the main container and air on each side --> | | <!-- creates a 3 column (2-8-2) row with the main container and air on each side --> |
| − | | + | <div class="row"> |
| | <div class="maincontainer"> | | <div class="maincontainer"> |
| | | | |
| | <!-- creates the main container (text area) --> | | <!-- creates the main container (text area) --> |
| | | | |
| − | <div class="colp-12 rmvpadmarg"> | + | <div class="colp-10 rmvpadmarg"> |
| | | | |
| | + | <h1 id=description class="bottomborder">Project</h1> |
| | | | |
| − | <h1 class="bottomborder">Project description</h1>
| + | <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>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>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>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 id="displayvid"> |
| | + | <video width="700" height="398" controls> |
| | + | <source src="https://static.igem.org/mediawiki/2017/9/97/T--DTU-Denmark--snakevideodescription.mp4" type="video/mp4"> |
| | + | Your browser does not support the video. |
| | + | </video> |
| | + | </div> |
| | | | |
| − | <!-- LOREM IPSUM TO TEST SCOLLING --> | + | <h2 id=detection class="bottomborder" align="center">Current detection methods</h2> |
| | | | |
| | + | <p>The identification of the snake that has bitten the patient is often a very hard task. Numerous molecular biology techniques such as immunofluorescence, radioimmunoassay and enzyme immunoassay have been described as suitable methods for detecting the snake responsible [4]. However, the drawbacks following these techniques (expensive, need of trained personnel and/or sophisticated equipment, long assay time) usually outweigh the advantages. For these reasons, medical staff and clinicians rely on the symptoms exhibited by the patient, in order to decide which antivenom to administer. This obviously is not optimal, as the time spent for the diagnosis could prove crucial for the survival of the patient. </p><br /><br /> |
| | | | |
| − | <p> | + | <h2 id=results class="bottomborder" align="center">Results</h2> |
| − | Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a felis sed enim feugiat hendrerit. Curabitur id vulputate risus. Donec porta volutpat posuere. Morbi metus lectus, laoreet quis elit in, bibendum vehicula massa. Vestibulum sit amet tempor libero. Nam urna tellus, suscipit id est sit amet, volutpat ullamcorper ante. Sed venenatis interdum nisl. Nam consectetur libero quis ipsum porttitor, sed placerat diam hendrerit. Cras sit amet massa sit amet nunc tristique tincidunt. Nunc pellentesque, erat et ullamcorper cursus, lacus ligula ultricies tortor, vel suscipit est diam quis nisi. Ut erat sem, aliquam at tortor rutrum, varius lobortis dui. Maecenas ac augue ac arcu blandit commodo eget sit amet sem.
| + | |
| − | </p>
| + | |
| − | <p>
| + | |
| − | Nulla ac iaculis nunc, et pretium purus. Nulla sagittis enim et turpis commodo auctor. Vivamus ac faucibus tellus. Curabitur viverra libero nec ligula ornare, vel gravida metus vehicula. Nam congue id neque sit amet suscipit. Integer commodo est sit amet lorem vestibulum, ac pharetra magna blandit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ultricies, tellus vel blandit gravida, nibh justo mollis enim, in laoreet libero enim eget ante. Vivamus luctus volutpat euismod. Vivamus bibendum sit amet quam vitae suscipit. Proin vel hendrerit nisl. Mauris malesuada tincidunt eros eu volutpat.
| + | |
| − | </p>
| + | |
| − | <p>
| + | |
| − | Nunc et elit turpis. Nulla a felis felis. Aenean in ipsum finibus, ornare mauris et, tempor tellus. Donec non arcu eget ipsum ultricies pellentesque. Donec sagittis, orci eu sollicitudin efficitur, ex elit aliquam mi, tincidunt lacinia dui erat quis arcu. Ut tincidunt neque urna, nec sodales diam faucibus non. Cras convallis finibus elit, sit amet pulvinar erat pretium sit amet. In vel fermentum arcu, a hendrerit lacus. Proin posuere nibh eget diam laoreet, ac vehicula leo cursus. Nullam sit amet sem semper, ornare odio in, luctus nunc. Quisque eu massa ultrices, euismod eros a, feugiat erat. Curabitur vitae scelerisque augue, non luctus libero. Nullam ac nulla quis elit auctor blandit. Aliquam non consequat leo.
| + | |
| − | </p>
| + | |
| − | <p>
| + | |
| − | Fusce massa justo, rutrum nec elit eget, aliquet cursus magna. Aliquam non fringilla diam, id bibendum enim. Integer tristique tortor sit amet porta accumsan. In scelerisque turpis enim, id ornare nibh euismod sit amet. Aenean sem velit, ultrices sed tristique nec, eleifend id elit. Duis ac nisi in quam feugiat euismod eu ut metus. Morbi eget scelerisque felis. Nullam malesuada ex et risus convallis pretium. Aliquam erat volutpat.
| + | |
| − | </p>
| + | |
| − | <p>
| + | |
| − | Cras orci justo, aliquet a felis nec, mattis posuere lacus. Nullam eleifend imperdiet est at facilisis. Maecenas nulla massa, tincidunt eget vulputate sit amet, ultricies sed urna. Ut viverra viverra augue, eu interdum ligula posuere in. Etiam consequat iaculis enim, at interdum leo porta id. Pellentesque pretium massa vitae consequat rutrum. Vestibulum hendrerit egestas urna non venenatis.
| + | |
| − | </p>
| + | |
| − | <p>
| + | |
| − | Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a felis sed enim feugiat hendrerit. Curabitur id vulputate risus. Donec porta volutpat posuere. Morbi metus lectus, laoreet quis elit in, bibendum vehicula massa. Vestibulum sit amet tempor libero. Nam urna tellus, suscipit id est sit amet, volutpat ullamcorper ante. Sed venenatis interdum nisl. Nam consectetur libero quis ipsum porttitor, sed placerat diam hendrerit. Cras sit amet massa sit amet nunc tristique tincidunt. Nunc pellentesque, erat et ullamcorper cursus, lacus ligula ultricies tortor, vel suscipit est diam quis nisi. Ut erat sem, aliquam at tortor rutrum, varius lobortis dui. Maecenas ac augue ac arcu blandit commodo eget sit amet sem.
| + | |
| − | </p>
| + | |
| − | <p>
| + | |
| − | Nulla ac iaculis nunc, et pretium purus. Nulla sagittis enim et turpis commodo auctor. Vivamus ac faucibus tellus. Curabitur viverra libero nec ligula ornare, vel gravida metus vehicula. Nam congue id neque sit amet suscipit. Integer commodo est sit amet lorem vestibulum, ac pharetra magna blandit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ultricies, tellus vel blandit gravida, nibh justo mollis enim, in laoreet libero enim eget ante. Vivamus luctus volutpat euismod. Vivamus bibendum sit amet quam vitae suscipit. Proin vel hendrerit nisl. Mauris malesuada tincidunt eros eu volutpat.
| + | |
| − | </p>
| + | |
| − | <p>
| + | |
| − | Nunc et elit turpis. Nulla a felis felis. Aenean in ipsum finibus, ornare mauris et, tempor tellus. Donec non arcu eget ipsum ultricies pellentesque. Donec sagittis, orci eu sollicitudin efficitur, ex elit aliquam mi, tincidunt lacinia dui erat quis arcu. Ut tincidunt neque urna, nec sodales diam faucibus non. Cras convallis finibus elit, sit amet pulvinar erat pretium sit amet. In vel fermentum arcu, a hendrerit lacus. Proin posuere nibh eget diam laoreet, ac vehicula leo cursus. Nullam sit amet sem semper, ornare odio in, luctus nunc. Quisque eu massa ultrices, euismod eros a, feugiat erat. Curabitur vitae scelerisque augue, non luctus libero. Nullam ac nulla quis elit auctor blandit. Aliquam non consequat leo.
| + | |
| − | </p>
| + | |
| − | <p>
| + | |
| − | Fusce massa justo, rutrum nec elit eget, aliquet cursus magna. Aliquam non fringilla diam, id bibendum enim. Integer tristique tortor sit amet porta accumsan. In scelerisque turpis enim, id ornare nibh euismod sit amet. Aenean sem velit, ultrices sed tristique nec, eleifend id elit. Duis ac nisi in quam feugiat euismod eu ut metus. Morbi eget scelerisque felis. Nullam malesuada ex et risus convallis pretium. Aliquam erat volutpat.
| + | |
| − | </p>
| + | |
| − | <p>
| + | |
| − | Cras orci justo, aliquet a felis nec, mattis posuere lacus. Nullam eleifend imperdiet est at facilisis. Maecenas nulla massa, tincidunt eget vulputate sit amet, ultricies sed urna. Ut viverra viverra augue, eu interdum ligula posuere in. Etiam consequat iaculis enim, at interdum leo porta id. Pellentesque pretium massa vitae consequat rutrum. Vestibulum hendrerit egestas urna non venenatis.
| + | |
| − | </p><p>
| + | |
| − | Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a felis sed enim feugiat hendrerit. Curabitur id vulputate risus. Donec porta volutpat posuere. Morbi metus lectus, laoreet quis elit in, bibendum vehicula massa. Vestibulum sit amet tempor libero. Nam urna tellus, suscipit id est sit amet, volutpat ullamcorper ante. Sed venenatis interdum nisl. Nam consectetur libero quis ipsum porttitor, sed placerat diam hendrerit. Cras sit amet massa sit amet nunc tristique tincidunt. Nunc pellentesque, erat et ullamcorper cursus, lacus ligula ultricies tortor, vel suscipit est diam quis nisi. Ut erat sem, aliquam at tortor rutrum, varius lobortis dui. Maecenas ac augue ac arcu blandit commodo eget sit amet sem.
| + | |
| − | </p><p>
| + | |
| − | Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a felis sed enim feugiat hendrerit. Curabitur id vulputate risus. Donec porta volutpat posuere. Morbi metus lectus, laoreet quis elit in, bibendum vehicula massa. Vestibulum sit amet tempor libero. Nam urna tellus, suscipit id est sit amet, volutpat ullamcorper ante. Sed venenatis interdum nisl. Nam consectetur libero quis ipsum porttitor, sed placerat diam hendrerit. Cras sit amet massa sit amet nunc tristique tincidunt. Nunc pellentesque, erat et ullamcorper cursus, lacus ligula ultricies tortor, vel suscipit est diam quis nisi. Ut erat sem, aliquam at tortor rutrum, varius lobortis dui. Maecenas ac augue ac arcu blandit commodo eget sit amet sem.
| + | |
| − | </p><p>
| + | |
| − | Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a felis sed enim feugiat hendrerit. Curabitur id vulputate risus. Donec porta volutpat posuere. Morbi metus lectus, laoreet quis elit in, bibendum vehicula massa. Vestibulum sit amet tempor libero. Nam urna tellus, suscipit id est sit amet, volutpat ullamcorper ante. Sed venenatis interdum nisl. Nam consectetur libero quis ipsum porttitor, sed placerat diam hendrerit. Cras sit amet massa sit amet nunc tristique tincidunt. Nunc pellentesque, erat et ullamcorper cursus, lacus ligula ultricies tortor, vel suscipit est diam quis nisi. Ut erat sem, aliquam at tortor rutrum, varius lobortis dui. Maecenas ac augue ac arcu blandit commodo eget sit amet sem.
| + | |
| − | </p><p>
| + | |
| − | Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a felis sed enim feugiat hendrerit. Curabitur id vulputate risus. Donec porta volutpat posuere. Morbi metus lectus, laoreet quis elit in, bibendum vehicula massa. Vestibulum sit amet tempor libero. Nam urna tellus, suscipit id est sit amet, volutpat ullamcorper ante. Sed venenatis interdum nisl. Nam consectetur libero quis ipsum porttitor, sed placerat diam hendrerit. Cras sit amet massa sit amet nunc tristique tincidunt. Nunc pellentesque, erat et ullamcorper cursus, lacus ligula ultricies tortor, vel suscipit est diam quis nisi. Ut erat sem, aliquam at tortor rutrum, varius lobortis dui. Maecenas ac augue ac arcu blandit commodo eget sit amet sem.
| + | |
| − | </p><p>
| + | |
| − | Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a felis sed enim feugiat hendrerit. Curabitur id vulputate risus. Donec porta volutpat posuere. Morbi metus lectus, laoreet quis elit in, bibendum vehicula massa. Vestibulum sit amet tempor libero. Nam urna tellus, suscipit id est sit amet, volutpat ullamcorper ante. Sed venenatis interdum nisl. Nam consectetur libero quis ipsum porttitor, sed placerat diam hendrerit. Cras sit amet massa sit amet nunc tristique tincidunt. Nunc pellentesque, erat et ullamcorper cursus, lacus ligula ultricies tortor, vel suscipit est diam quis nisi. Ut erat sem, aliquam at tortor rutrum, varius lobortis dui. Maecenas ac augue ac arcu blandit commodo eget sit amet sem.
| + | |
| − | </p><p>
| + | |
| − | Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a felis sed enim feugiat hendrerit. Curabitur id vulputate risus. Donec porta volutpat posuere. Morbi metus lectus, laoreet quis elit in, bibendum vehicula massa. Vestibulum sit amet tempor libero. Nam urna tellus, suscipit id est sit amet, volutpat ullamcorper ante. Sed venenatis interdum nisl. Nam consectetur libero quis ipsum porttitor, sed placerat diam hendrerit. Cras sit amet massa sit amet nunc tristique tincidunt. Nunc pellentesque, erat et ullamcorper cursus, lacus ligula ultricies tortor, vel suscipit est diam quis nisi. Ut erat sem, aliquam at tortor rutrum, varius lobortis dui. Maecenas ac augue ac arcu blandit commodo eget sit amet sem.
| + | |
| − | </p><p>
| + | |
| − | Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a felis sed enim feugiat hendrerit. Curabitur id vulputate risus. Donec porta volutpat posuere. Morbi metus lectus, laoreet quis elit in, bibendum vehicula massa. Vestibulum sit amet tempor libero. Nam urna tellus, suscipit id est sit amet, volutpat ullamcorper ante. Sed venenatis interdum nisl. Nam consectetur libero quis ipsum porttitor, sed placerat diam hendrerit. Cras sit amet massa sit amet nunc tristique tincidunt. Nunc pellentesque, erat et ullamcorper cursus, lacus ligula ultricies tortor, vel suscipit est diam quis nisi. Ut erat sem, aliquam at tortor rutrum, varius lobortis dui. Maecenas ac augue ac arcu blandit commodo eget sit amet sem.
| + | |
| − | </p><p>
| + | |
| − | Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a felis sed enim feugiat hendrerit. Curabitur id vulputate risus. Donec porta volutpat posuere. Morbi metus lectus, laoreet quis elit in, bibendum vehicula massa. Vestibulum sit amet tempor libero. Nam urna tellus, suscipit id est sit amet, volutpat ullamcorper ante. Sed venenatis interdum nisl. Nam consectetur libero quis ipsum porttitor, sed placerat diam hendrerit. Cras sit amet massa sit amet nunc tristique tincidunt. Nunc pellentesque, erat et ullamcorper cursus, lacus ligula ultricies tortor, vel suscipit est diam quis nisi. Ut erat sem, aliquam at tortor rutrum, varius lobortis dui. Maecenas ac augue ac arcu blandit commodo eget sit amet sem.
| + | |
| − | </p> | + | |
| | | | |
| | + | <p>Our experiments showed that distinguishing between snakes of different or the same genus, using an enzymatic assay detection method, is possible. We identified numerous peptide substrates, cleavable by proteases present in the venom, that can be used to separate snake species, by incubating them with the venom. These peptides can be used as standalone, if they are uniquely cleaved by one of the venoms, or as part of a decision tree using multiple peptides for more accurate detection. We designed composite parts that would utilize these peptides, and display color when they are cleaved for easier and more robust detection. The time necessary for the detection can be significantly reduced when compared to detection methods currently available. Lastly, we developed a prototype of a device that would employ these parts, thus creating a complete and intuitive snake venom detection system.</p><br /><br /> |
| | | | |
| | + | <h2 id=future class="bottomborder" align="center">Future</h2> |
| | | | |
| | + | <p>As mentioned above, our project investigated snake venom detection only as a proof of concept, using three snakes that are a huge health problem and are active in the same geographical region. Future studies would involve optimizing and continuing the tests of the composite parts that allow the identification of these snake venoms, and improving the device used as the detection system. In addition, reducing the time of detection to even less would greatly help the performance and capabilities of the system. Last but not least, continuing the research for more suitable and efficient oligopeptides and expanding the snake species of interest to more regions of the world would be of great importance.</p><br /><br /> |
| | | | |
| | | | |
| | + | <h2 id=references class="bottomborder" align="center">References</h2> |
| | + | <p><font size="1"> |
| | + | [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. <br /> |
| | + | [4] Theakston RD, Laing GD (2014). <em>Diagnosis of snakebite and the importance of immunological tests in venom research.</em> Toxins (Basel), 6(5),1667-95.</font></p> |
| | | | |
| | </div> | | </div> |
| | + | |
| | + | <div class="colp-2 rmvpadmarg"> |
| | + | <div class="rightnavbar rmvpadmarg"> |
| | + | |
| | + | <ul> |
| | + | |
| | + | <li class="rightnavbarbtn"> |
| | + | <a href="#description">Project description</a> |
| | + | </li> |
| | + | |
| | + | <li class="rightnavbarbtn"> |
| | + | <a href="#detection">Current detection methods</a> |
| | + | </li> |
| | + | |
| | + | <li class="rightnavbarbtn"> |
| | + | <a href="#results">Results</a> |
| | + | </li> |
| | + | |
| | + | <li class="rightnavbarbtn"> |
| | + | <a href="#future">Future</a> |
| | + | </li> |
| | + | |
| | + | <li class="rightnavbarbtn"> |
| | + | <a href="#references">References</a> |
| | + | </li> |
| | + | |
| | + | </ul> |
| | + | </div> |
| | + | </div> |
| | + | |
| | + | |
| | + | |
| | + | |
| | + | |
| | + | |
| | + | |
| | + | </div> |
| | </div> | | </div> |
| | | | |
| Line 738: |
Line 129: |
| | <p>FIND US AT</p> | | <p>FIND US AT</p> |
| | <a href="mailto:dtubiobuilders@gmail.com"> | | <a href="mailto:dtubiobuilders@gmail.com"> |
| − | <img src="https://static.igem.org/mediawiki/2017/e/e6/T--DTU-Denmark--mail_logo.svg" alt="Mail" height="40"> | + | <img src="https://static.igem.org/mediawiki/2017/e/e6/T--DTU-Denmark--mail_logo.svg" alt="Mail" height="40" style="filter: invert(100%);"> |
| | + | </a> |
| | + | <a href="https://www.instagram.com/igem_dtubiobuilders/?hl=da"> |
| | + | <img src="https://static.igem.org/mediawiki/2017/9/9f/T--DTU-Denmark--instagram_logo.png" alt="Instagram" height="40"> |
| | </a> | | </a> |
| | <a href="https://www.facebook.com/dtubiobuilders/?fref=ts"> | | <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"> | + | <img src="https://static.igem.org/mediawiki/2017/2/20/T--DTU-Denmark--facebook_logo.png" alt="Facebook" height="40" style="filter: invert(100%);"> |
| | </a> | | </a> |
| | <a href="https://twitter.com/iGEM_DTU"> | | <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"> | + | <img src="https://static.igem.org/mediawiki/2017/7/7d/T--DTU-Denmark--twitter_logo.png" alt="Twitter" height="40" style="filter: invert(100%);"> |
| | </a><br /> | | </a><br /> |
| | <span>DTU BIOBUILDERS</span><br /> | | <span>DTU BIOBUILDERS</span><br /> |
| Line 752: |
Line 146: |
| | </div> | | </div> |
| | </div> | | </div> |
| | + | |
| | | | |
| | <!-- main sponsors footer display --> | | <!-- main sponsors footer display --> |
| Line 762: |
Line 157: |
| | <img src="https://static.igem.org/mediawiki/2016/f/f3/T--DTU-Denmark--OM_logo.jpg" alt="Otto Mønsted" align="middle" width="150"> | | <img src="https://static.igem.org/mediawiki/2016/f/f3/T--DTU-Denmark--OM_logo.jpg" alt="Otto Mønsted" align="middle" width="150"> |
| | </a> | | </a> |
| − | <!-- <a href="http://www.novonordiskfonden.dk/"> | + | <a href="http://www.novonordiskfonden.dk/"> |
| | <img src="https://static.igem.org/mediawiki/2016/4/45/T--DTU-Denmark--nnfond_logo.png" alt="Lundbeck fundation" align="middle" width="150"> | | <img src="https://static.igem.org/mediawiki/2016/4/45/T--DTU-Denmark--nnfond_logo.png" alt="Lundbeck fundation" align="middle" width="150"> |
| − | </a> --> | + | </a> |
| | </span><br/> | | </span><br/> |
| | <span> | | <span> |
| Line 784: |
Line 179: |
| | </div> | | </div> |
| | </footer> | | </footer> |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| | | | |
| | | | |
| Line 806: |
Line 192: |
| | <!-- This div ending is windowcontent. Everything should be before this --> | | <!-- This div ending is windowcontent. Everything should be before this --> |
| | </div> | | </div> |
| | + | |
| | + | |
| | + | <!--- importing script INCLUDING NAVBAR HTML CODE --> |
| | + | <script type="text/javascript" src="https://2017.igem.org/Team:DTU-Denmark/jsnavbarfade?action=raw&ctype=text/javascript"></script> |
| | | | |
| | </body> | | </body> |
| | </html> | | </html> |
