|
|
| Line 1: |
Line 1: |
| | + | {{CSS_UCL6}} |
| | <html> | | <html> |
| | <head> | | <head> |
| | | | |
| | + | <style> |
| | | | |
| − | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> | + | |
| − | <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
| + | |
| − | <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
| + | .buttonblack2 { |
| − | <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Raleway" />
| + | text-transform: uppercase; |
| | + | font-size: 14px; |
| | + | font-weight: normal; |
| | + | line-height: 1.428571429; |
| | + | text-align: center; |
| | + | white-space: nowrap; |
| | + | vertical-align: middle; |
| | + | border-radius: 4px; |
| | + | transition-property: background-color, color, border-color; |
| | + | transition-duration: 1s; |
| | + | transition-timing-function: ease; |
| | + | color: #FFFFFF; |
| | + | padding: 10px 16px; |
| | + | text-decoration: none; |
| | + | font-family: Raleway; |
| | + | letter-spacing: 2px; |
| | + | font-weight: bold;} |
| | + | .buttonblack2 {background-color: #336666; border-color: #336666; } |
| | | | |
| − | <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
| + | a.buttonblack2 { color: #fff !important; font-size: 12px;} |
| | + | .buttonblack2:hover {border-color: #336666; color: #336666 !important; background-color: #fff !important;} |
| | + | |
| | + | |
| | + | .interesting1 { |
| | + | height:50px; |
| | + | width:50px; |
| | + | position:absolute; |
| | + | float:left; |
| | + | left:5%; |
| | + | bottom:3%; |
| | + | } |
| | + | .interesting2 { |
| | + | height:50px; |
| | + | width:50px; |
| | + | position:absolute; |
| | + | float:left; |
| | + | left:20%; |
| | + | bottom:3%; |
| | + | } |
| | + | |
| | + | /*references*/ |
| | + | .content .tooltip { |
| | + | background-color: #fff; |
| | + | border: 1px #22343C solid; |
| | + | border-radius: 4px; |
| | + | padding: 3px; |
| | + | position: absolute; |
| | + | width: 300px; |
| | + | z-Index: 99999; |
| | + | display: none; |
| | + | letter-spacing: 1px; |
| | + | line-height: 1; |
| | + | font-size: 11px; |
| | + | } |
| | | | |
| − | <style type="text/css">
| + | .tooltip a {color: #22343C;} |
| − | | + | .tooltip {color: #22343C;} |
| − | /* wiki width fixing */
| + | |
| − | #contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
| + | |
| − | display:none;}
| + | |
| − | #top-section { | + | |
| − | border: none;
| + | |
| − | height: 0px;}
| + | |
| − | | + | |
| − | #p-logo, h1.firstHeading,#search-controls,#catlinks {display:none;}
| + | |
| − | #footer #f-list {margin-top:0;}
| + | |
| − | #top-section,#footer-box{margin:0;padding:0;width:100%;height:0}
| + | |
| − | table{visibility:hidden;height:0;}
| + | |
| − | #contentSub {margin: 0;}
| + | |
| − | | + | |
| − | #globalWrapper, #content {
| + | |
| − | width: 100%;
| + | |
| − | height: 100%;
| + | |
| − | border: 0px;
| + | |
| − | background-color: transparent;
| + | |
| − | margin: 0px;
| + | |
| − | padding: 0px;
| + | |
| − | }
| + | |
| − | | + | |
| − | html, #bodyContent, body, #container {
| + | |
| − | width:100%;
| + | |
| − | height:100%;
| + | |
| − | overflow:hidden;
| + | |
| − | box-sizing: border-box;
| + | |
| | | | |
| | + | .content { |
| | + | position: relative; |
| | } | | } |
| | | | |
| | + | .content {color: #d67166;} |
| | | | |
| | + | /* end-of-references */ |
| | | | |
| − | /* blocks */
| + | #headerr {background-image: url('https://static.igem.org/mediawiki/2015/d/d4/UCL_London_Quad_Frontpage.jpeg'); |
| − | | + | text-align: center; width: 100%; |
| − | #header {background: #F0F0F5; margin: -5px; text-align: center; width: 100%; | + | |
| | height: 100%; | | height: 100%; |
| | position: relative; | | position: relative; |
| − | display: block; | + | display: block !important; |
| | margin: 0; | | margin: 0; |
| | padding: 0; | | padding: 0; |
| − | margin-top: -10px;
| |
| | top: 0; | | top: 0; |
| | bottom: 0; | | bottom: 0; |
| − | box-sizing: border-box; | + | background-repeat: no-repeat; |
| | | | |
| − | -webkit-background-size: cover;
| |
| − | -moz-background-size: cover;
| |
| − | -o-background-size: cover;
| |
| | background-size: cover; | | background-size: cover; |
| | + | background-position: top left; |
| | + | color:none; |
| | -webkit-box-sizing: border-box; | | -webkit-box-sizing: border-box; |
| | -moz-box-sizing: border-box; | | -moz-box-sizing: border-box; |
| | box-sizing: border-box; | | box-sizing: border-box; |
| | | | |
| − | vertical-align: middle; } | + | vertical-align: middle; |
| − | #intro1 { background: #EFE2E5; width: 100%;
| + | } |
| | + | |
| | + | |
| | + | |
| | + | /*#logophoto {width: 500px; height: 433px; height: 100%; opacity: 1; z-index: 99999;}*/ |
| | + | #logo { |
| | + | padding-top:12%; |
| | height: 100%; | | height: 100%; |
| | + | } |
| | + | |
| | + | #logophoto { |
| | + | max-width: 500px; |
| | + | opacity: 1; |
| | + | width: 360px; |
| | + | z-index: 99999; |
| | + | top:30%; |
| | + | position:static; |
| | + | transition-property: opacity; |
| | + | transition-duration: 2s;transition-timing-function: ease; |
| | + | } |
| | + | #logophoto:hover {opacity: 0.7; transition-property: opacity; |
| | + | transition-duration: 2s;transition-timing-function: ease;} |
| | + | |
| | + | /*#hidden-menu { |
| | + | z-index:999; |
| | + | }*/ |
| | + | |
| | + | |
| | + | |
| | + | #introo1 {width: 100%; height: 100%; |
| | + | background-image: url('https://static.igem.org/mediawiki/2015/a/a5/UCLFRONTBLOCK_1_2015.png'); |
| | position: relative; | | position: relative; |
| − | display: block;
| + | -webkit-background-size: cover; |
| − | margin: 0;
| + | |
| − | padding: 0;
| + | |
| − | top: 0;
| + | |
| − | bottom: 0;
| + | |
| − | box-sizing: border-box;
| + | |
| − | | + | |
| − | -webkit-background-size: cover;
| + | |
| − | -moz-background-size: cover;
| + | |
| − | -o-background-size: cover;
| + | |
| | background-size: cover; | | background-size: cover; |
| − | -webkit-box-sizing: border-box; | + | background-position: 0 -100px; |
| − | -moz-box-sizing: border-box;
| + | |
| − | box-sizing: border-box;}
| + | display: block !important; |
| − | #intro2 { background: #70C4BB;
| + | |
| − | width: 100%;
| + | |
| − | height: 100%;
| + | |
| − | position: relative;
| + | |
| − | display: block; | + | |
| | margin: 0; | | margin: 0; |
| | padding: 0; | | padding: 0; |
| | top: 0; | | top: 0; |
| | bottom: 0; | | bottom: 0; |
| − | box-sizing: border-box; | + | background-repeat: no-repeat; |
| | | | |
| − | -webkit-background-size: cover;
| + | color:none; |
| − | -moz-background-size: cover;
| + | |
| − | -o-background-size: cover;
| + | |
| − | background-size: cover;
| + | |
| | -webkit-box-sizing: border-box; | | -webkit-box-sizing: border-box; |
| | -moz-box-sizing: border-box; | | -moz-box-sizing: border-box; |
| − | box-sizing: border-box;} | + | box-sizing: border-box; |
| − | #intro3 { background: #F0F0F5;
| + | |
| − | width: 100%;
| + | |
| − | height: 100%;
| + | |
| − | position: relativee;
| + | |
| − | display: block;
| + | |
| − | margin: 0;
| + | |
| − | padding: 0;
| + | |
| − | top: 0;
| + | |
| − | bottom: 0;
| + | |
| − | box-sizing: border-box;
| + | |
| | | | |
| − | -webkit-background-size: cover;
| + | vertical-align: middle; |
| − | -moz-background-size: cover;
| + | font-family: Raleway; |
| − | -o-background-size: cover;
| + | letter-spacing: 1.1px; font-size: 13px; top: 0px; |
| − | background-size: cover;
| + | padding-top: 50px; |
| − | -webkit-box-sizing: border-box;
| + | padding-bottom: 50px; |
| − | -moz-box-sizing: border-box;
| + | |
| − | box-sizing: border-box;}
| + | } |
| − | #abstract {background: #fff; | + | #introo3 {width: 100%; |
| − | width: 100%; | + | background-image: url('https://static.igem.org/mediawiki/2015/c/c3/UCLFRONTBLOCK_2_2015.png'); |
| − | height: 100%;
| + | |
| | position: relative; | | position: relative; |
| − | display: block; | + | -webkit-background-size: cover; |
| | + | background-size: cover; |
| | + | background-position: 0 -100px; |
| | + | |
| | + | display: block !important; |
| | margin: 0; | | margin: 0; |
| | padding: 0; | | padding: 0; |
| | top: 0; | | top: 0; |
| | bottom: 0; | | bottom: 0; |
| − | box-sizing: border-box; | + | background-repeat: no-repeat; |
| | | | |
| − | -webkit-background-size: cover;
| + | color:none; |
| − | -moz-background-size: cover;
| + | |
| − | -o-background-size: cover;
| + | |
| − | background-size: cover;
| + | |
| | -webkit-box-sizing: border-box; | | -webkit-box-sizing: border-box; |
| | -moz-box-sizing: border-box; | | -moz-box-sizing: border-box; |
| − | box-sizing: border-box;} | + | box-sizing: border-box; |
| | | | |
| − | #motivation {background-color: #FE6C68; | + | vertical-align: middle; |
| − | color: #fff;
| + | font-family: Raleway; |
| − | width: 100%; | + | letter-spacing: 1.1px; font-size: 13px; top: 0px; |
| − | height: 100%; | + | padding-top: 50px; |
| − | position: relative !important; | + | padding-bottom: 50px; |
| − | display: block; | + | |
| | + | } |
| | + | |
| | + | #introo1text {background: #fff; |
| | + | border-radius: 20px; |
| | + | font-size: 17px; width: 70%; margin: 0 auto; line-height: 1.7; padding: 30px; text-align: justify;} |
| | + | |
| | + | #introo2text {width: 60%; margin: 0 auto; padding-top: 50px;} |
| | + | |
| | + | #introo2 {width: 100%; height: 100%; |
| | + | background: #EBF2F8; |
| | + | position: relative; |
| | + | display: block !important; |
| | margin: 0; | | margin: 0; |
| | padding: 0; | | padding: 0; |
| | top: 0; | | top: 0; |
| | bottom: 0; | | bottom: 0; |
| − | box-sizing: border-box; | + | background-repeat: no-repeat; |
| | | | |
| − | -webkit-background-size: cover;
| |
| − | -moz-background-size: cover;
| |
| − | -o-background-size: cover;
| |
| | background-size: cover; | | background-size: cover; |
| | + | background-position: top left; |
| | + | color:none; |
| | -webkit-box-sizing: border-box; | | -webkit-box-sizing: border-box; |
| | -moz-box-sizing: border-box; | | -moz-box-sizing: border-box; |
| − | box-sizing: border-box;} | + | box-sizing: border-box; |
| | | | |
| − | /*twitter*/
| + | vertical-align: middle; |
| − | #twit {width: 200px; height: 500px; position: fixed; float: right; margin-bottom: -20px; bottom: 0%; right: 5%;}
| + | |
| − | | + | |
| − | /* logo and buttons */
| + | |
| − | | + | |
| − | | + | |
| − | .logophoto {width: 300px; height: 400px; height: 100%; }
| + | |
| − | #logo {padding-top: 10%; padding-bottom: 100px;}
| + | |
| − | | + | |
| − | .intro-buttons {
| + | |
| − | padding-top: 20px; color: #FFFFFF;
| + | |
| − | }
| + | |
| − | | + | |
| − | .button-abstract {
| + | |
| − | padding-top: 20px; color: #FFFFFF;
| + | |
| − | text-align: center;
| + | |
| − | }
| + | |
| − | | + | |
| − | .intro-buttons a { color: #FFFFFF; text-decoration: none;}
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | .buttonc1 { display: inline-block;
| + | |
| − | margin-bottom: 10px;
| + | |
| − | margin-right: 5px;
| + | |
| − | margin-left: 5px;
| + | |
| − | font-size: 14px;
| + | |
| − | font-weight: normal;
| + | |
| − | line-height: 1.428571429;
| + | |
| − | text-align: center;
| + | |
| − | white-space: nowrap;
| + | |
| − | vertical-align: middle;
| + | |
| − | border: 1px solid transparent;
| + | |
| − | border-radius: 4px;
| + | |
| − | -webkit-user-select: none;
| + | |
| − | -moz-user-select: none;
| + | |
| − | -ms-user-select: none;
| + | |
| − | -o-user-select: none;
| + | |
| − | user-select: none;
| + | |
| − | color: #FFFFFF;
| + | |
| − | border: none;
| + | |
| − | padding: 10px 16px;
| + | |
| − | line-height: 1.33;
| + | |
| − | text-decoration: none;
| + | |
| − | width:140px; background-color: #F49794;
| + | |
| − | font-family: Raleway;
| + | |
| − | letter-spacing: 1.5px;
| + | |
| − | | + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | .buttonc2 { display: inline-block;
| + | |
| − | margin-bottom: 10px;
| + | |
| − | margin-right: 5px;
| + | |
| − | margin-left: 5px;
| + | |
| − | font-size: 14px;
| + | |
| − | font-weight: normal;
| + | |
| − | line-height: 1.428571429;
| + | |
| − | text-align: center;
| + | |
| − | white-space: nowrap;
| + | |
| − | vertical-align: middle;
| + | |
| − | border: 1px solid transparent;
| + | |
| − | border-radius: 4px;
| + | |
| − | -webkit-user-select: none;
| + | |
| − | -moz-user-select: none;
| + | |
| − | -ms-user-select: none;
| + | |
| − | -o-user-select: none;
| + | |
| − | user-select: none;
| + | |
| − | color: #FFFFFF;
| + | |
| − | border: none;
| + | |
| − | padding: 10px 16px;
| + | |
| − | line-height: 1.33;
| + | |
| − | text-decoration: none;
| + | |
| − | width: 140px; background-color: #61D9D2;
| + | |
| − | font-family: Raleway;
| + | |
| − | letter-spacing: 1.5px;
| + | |
| − | }
| + | |
| − | .buttonc3
| + | |
| − | {
| + | |
| − | display: inline-block;
| + | |
| − | margin-bottom: 10px;
| + | |
| − | margin-right: 5px;
| + | |
| − | margin-left: 5px;
| + | |
| − | font-size: 14px;
| + | |
| − | font-weight: normal;
| + | |
| − | line-height: 1.428571429;
| + | |
| − | text-align: center;
| + | |
| − | white-space: nowrap;
| + | |
| − | vertical-align: middle;
| + | |
| − | border: 1px solid transparent;
| + | |
| − | border-radius: 4px;
| + | |
| − | -webkit-user-select: none;
| + | |
| − | -moz-user-select: none;
| + | |
| − | -ms-user-select: none;
| + | |
| − | -o-user-select: none;
| + | |
| − | user-select: none;
| + | |
| − | color: #FFFFFF;
| + | |
| − | border: none;
| + | |
| − | padding: 10px 16px;
| + | |
| − | line-height: 1.33;
| + | |
| − | text-decoration: none;
| + | |
| − | width: 140px; background-color: #006C93;
| + | |
| − | font-family: Raleway;
| + | |
| − | letter-spacing: 1.5px;
| + | |
| − | }
| + | |
| − | | + | |
| − | #buttonc4
| + | |
| − | {
| + | |
| − | display: inline-block;
| + | |
| − | margin-bottom: 10px;
| + | |
| − | margin-right: 5px;
| + | |
| − | margin-left: 5px;
| + | |
| − | font-size: 14px;
| + | |
| − | font-weight: normal;
| + | |
| − | line-height: 1.428571429;
| + | |
| − | text-align: center;
| + | |
| − | white-space: nowrap;
| + | |
| − | vertical-align: middle;
| + | |
| − | border: 1px solid transparent;
| + | |
| − | border-radius: 4px;
| + | |
| − | -webkit-user-select: none;
| + | |
| − | -moz-user-select: none;
| + | |
| − | -ms-user-select: none;
| + | |
| − | -o-user-select: none;
| + | |
| − | user-select: none;
| + | |
| − | color: #FFFFFF;
| + | |
| − | border: none;
| + | |
| − | padding: 10px 16px;
| + | |
| − | line-height: 1.33;
| + | |
| − | text-decoration: none;
| + | |
| − | width: 140px; background-color: #019966;
| + | |
| − | font-family: Raleway;
| + | |
| − | letter-spacing: 1.5px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .buttonc1:hover {text-decoration: none; background-color: #FE6C68;}
| + | |
| − | .buttonc2:hover {text-decoration: none; background-color: #4EAEA8;}
| + | |
| − | .buttonc3:hover {text-decoration: none; background-color: #1E6073}
| + | |
| − | #buttonc4:hover {text-decoration: none; background-color: #03b576}
| + | |
| − | | + | |
| − | | + | |
| − | #why2 {padding-top: 20px; text-align: center; color: #fff;}
| + | |
| − | #why2 a {color: #fff;}
| + | |
| − | | + | |
| − | #why3 {padding-top: 15px; text-align: center; color: #fff;}
| + | |
| − | #why3 a {color: #fff;}
| + | |
| − | | + | |
| − | /*intro styles*/
| + | |
| − | .first {width: 70%;
| + | |
| − | padding-top: 10%;
| + | |
| − | padding-right: 10%;
| + | |
| − | float: right;
| + | |
| − | font-family: Raleway;
| + | |
| − | letter-spacing: 2px;
| + | |
| − | color: #787172;
| + | |
| − | | + | |
| − | line-height: 1.5;
| + | |
| − | padding-left: 5%;
| + | |
| − | font-size: 20px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .second {width: 70%;
| + | |
| − | padding-top: 11%;
| + | |
| − | padding-left: 9%;
| + | |
| − | float: left;
| + | |
| − | font-family: Raleway;
| + | |
| − | letter-spacing: 2px;
| + | |
| − | color: #fff;
| + | |
| − | | + | |
| − | line-height: 1.5;
| + | |
| − | font-size: 20px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .third {width: 80%;
| + | |
| − | padding-top: 18%;
| + | |
| − | padding-left: 20%;
| + | |
| − | float: left;
| + | |
| − | font-family: Raleway;
| + | |
| − | letter-spacing: 2px;
| + | |
| − | color: #787172;
| + | |
| − | | + | |
| − | line-height: 1.5;
| + | |
| − | font-size: 22px;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /*abstractstyle*/
| + | |
| − | #abstracttext {height: 80%;
| + | |
| − | width: 80%;
| + | |
| − | float: left;
| + | |
| − | margin: auto;
| + | |
| − | padding-left: 15%;
| + | |
| − | padding-top: 6%;
| + | |
| | font-family: Raleway; | | font-family: Raleway; |
| − | letter-spacing: 1.2px; line-height: 2; | + | letter-spacing: 1.1px; font-size: 13px; top: 0px; |
| − | text-align: justify;
| + | padding-top: 100px; |
| − | font-size: 15px;
| + | padding-bottom: 50px; |
| − | | + | |
| − | }
| + | |
| | | | |
| − | #abstracttext p { line-height: 2; text-align: justify; font-size: 15px;
| |
| | } | | } |
| | | | |
| | | | |
| − | @media screen and (max-width: 960px) {
| |
| − | #abstracttext p { line-height: 2; text-align: justify; font-size: 13px;
| |
| − | }
| |
| | | | |
| | | | |
| − | #whitebox1 {width: 24%; height: 38%; background-color: #fff; margin-right: 20px; margin-left: 10%; display: inline; float: left; font-size: 12px; color: #787172; margin-top: 20px; text-align: justify; padding: 10px; line-height: 1.5; border: 15px solid #F0F0F5;
| + | @media (max-width:1024px){ |
| − | border-radius: 15px;
| + | #introo1 {} |
| − | }
| + | #introo2 { height: 100%;} |
| − | #whitebox2 {width: 24%; height: 38%; background-color: #fff; margin-right: 20px; margin-left: 20px; display: inline; float: left; font-size: 12px; color: #787172; margin-top: 20px; text-align: justify; padding: 10px; line-height: 1.5;border: 15px solid #F0F0F5; | + | #introo3 {height: 100%; background-position: left 0px bottom -35px;} |
| − | border-radius: 15px;}
| + | #introo1text, #introo1arrow {font-size: 18px; line-height: 1.5;} |
| − | #whitebox3 {width: 24%; height: 38%; background-color: #fff; margin-right: 10%; margin-left: 20px; display: inline; float: left; font-size: 12px; color: #787172; margin-top: 20px; text-align: justify; padding: 10px; line-height: 1.5; border: 15px solid #F0F0F5; | + | |
| − | border-radius: 15px;}
| + | |
| − | #whitebox4 {width: 24%; height: 38%; background-color: #fff; margin-right: 20px; margin-left: 10%; display: inline; float: left; font-size: 12px; color: #787172; margin-top: 20px; text-align: justify; padding: 10px; line-height: 1.5;border: 15px solid #F0F0F5; | + | |
| − | border-radius: 15px;}
| + | |
| − | #whitebox5 {width: 24%; height: 38%; background-color: #fff; margin-right: 20px; margin-left: 20px; display: inline; float: left; font-size: 12px; color: #787172; margin-top: 20px; text-align: justify; padding: 10px; line-height: 1.5;border: 15px solid #F0F0F5; | + | |
| − | border-radius: 15px;}
| + | |
| − | #whitebox6 {width: 24%; height: 38%; background-color: #fff; margin-right: 10%; margin-left: 20px; display: inline; float: left; font-size: 12px; color: #787172; margin-top: 20px; text-align: justify; padding: 10px; line-height: 1.5;border: 15px solid #F0F0F5;
| + | |
| − | border-radius: 15px; }
| + | |
| − | | + | |
| | } | | } |
| | | | |
| − | #abstract h2 {font-size: 20px;} | + | @media (max-width:768px){ |
| − | | + | #introo1 {background-position: 0 100px;} |
| − | /*why stats */
| + | #introo1text {font-size: 18px; line-height: 1.5; bottom: 10%;} |
| − | | + | #introo2text {font-size: 20px; line-height: 1.5; bottom: 10%;} |
| − | .why {height: 100%;
| + | |
| − | width: 100%;
| + | |
| − | padding: 10px;
| + | |
| − | margin: 0;
| + | |
| − | padding-top: 8%;
| + | |
| − | font-family: Raleway; | + | |
| − | letter-spacing: 1.2px; line-height: 1.2;
| + | |
| − | text-align: center;
| + | |
| − | color: #fff;
| + | |
| − | font-size: 20px;
| + | |
| | } | | } |
| | | | |
| − | #whitebox1 {width: 24%; height: 38%; background-color: #fff; margin-right: 20px; margin-left: 10%; display: inline; float: left; font-size: 14px; color: #787172; margin-top: 20px; text-align: justify; padding: 10px; line-height: 1.5; border: 15px solid #F0F0F5;
| + | @media (max-width:480px){ |
| − | border-radius: 15px;
| + | #introo1 {background-position: 0 100px;} |
| − | }
| + | #introo1text {font-size: 15px; line-height: 1.5;} |
| − | #whitebox2 {width: 24%; height: 38%; background-color: #fff; margin-right: 20px; margin-left: 20px; display: inline; float: left; font-size: 14px; color: #787172; margin-top: 20px; text-align: justify; padding: 10px; line-height: 1.5;border: 15px solid #F0F0F5; | + | #introo2text {font-size: 17px; line-height: 1.5; bottom: 20%;} |
| − | border-radius: 15px;}
| + | |
| − | #whitebox3 {width: 24%; height: 38%; background-color: #fff; margin-right: 10%; margin-left: 20px; display: inline; float: left; font-size: 14px; color: #787172; margin-top: 20px; text-align: justify; padding: 10px; line-height: 1.5; border: 15px solid #F0F0F5; | + | |
| − | border-radius: 15px;}
| + | |
| − | #whitebox4 {width: 24%; height: 38%; background-color: #fff; margin-right: 20px; margin-left: 10%; display: inline; float: left; font-size: 14px; color: #787172; margin-top: 20px; text-align: justify; padding: 10px; line-height: 1.5;border: 15px solid #F0F0F5;
| + | |
| − | border-radius: 15px;}
| + | |
| − | #whitebox5 {width: 24%; height: 38%; background-color: #fff; margin-right: 20px; margin-left: 20px; display: inline; float: left; font-size: 14px; color: #787172; margin-top: 20px; text-align: justify; padding: 10px; line-height: 1.5;border: 15px solid #F0F0F5; | + | |
| − | border-radius: 15px;}
| + | |
| − | #whitebox6 {width: 24%; height: 38%; background-color: #fff; margin-right: 10%; margin-left: 20px; display: inline; float: left; font-size: 14px; color: #787172; margin-top: 20px; text-align: justify; padding: 10px; line-height: 1.5;border: 15px solid #F0F0F5;
| + | |
| − | border-radius: 15px; }
| + | |
| | | | |
| − |
| |
| − |
| |
| − | /*icons*/
| |
| − | @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");
| |
| − | .glyphicon {
| |
| − | font-family: 'Glyphicons Halflings';
| |
| − | font-style: normal;
| |
| − | font-weight: normal;
| |
| − | line-height: 1;
| |
| − | font-size: 40px;
| |
| − | position: relative;
| |
| | } | | } |
| | | | |
| − | .icon {
| |
| − | font-family: 'FontAwesome';
| |
| − | font-style: normal;
| |
| − | font-weight: normal;
| |
| − | line-height: 1;
| |
| − | font-size: 50px;
| |
| − | position: relative;
| |
| − | }
| |
| | | | |
| | + | @media (max-width:360px){ |
| | + | #introo1 {background-position: 0 60px;} |
| | + | #introo1text, #introo2text {font-size: 14px; line-height: 1.2;} |
| | + | #introo2text {font-size: 15px; line-height: 1.5; bottom: 20%;} |
| | | | |
| − | .icondiv {text-align: center; width: 100%; padding-top: 20px; padding-bottom: 20px; color: #F0F0F5;}
| |
| − |
| |
| − | .glyphicon-globe {color: #006C93;}
| |
| − | .glyphicon-stats {color: #61D9D2;}
| |
| − | .glyphicon-piggy-bank {color: #019966;}
| |
| − | .glyphicon-blackboard {color: #104A57;}
| |
| − | .icon-user-md {color: #FE6C68;}
| |
| − | .icon-group {color: #FFCD55;}
| |
| − |
| |
| − |
| |
| − |
| |
| − | /*menu*/
| |
| − |
| |
| − | .fixed-nav-bar {
| |
| − | position: fixed;
| |
| − | top: 18px;
| |
| − | left: 0;
| |
| − | z-index: 9999;
| |
| − | width: 100%;
| |
| − | height: 60px;
| |
| − | background: #fff;
| |
| − | border-bottom: 1px solid #787172;
| |
| − | border-top: 1px solid #787172;
| |
| − | font-size: 14px;
| |
| | } | | } |
| | | | |
| − | .menu-items {display: inline-block; width: 100%; text-align: center; margin-top: -10px; margin-left: -25px;
| |
| − | }
| |
| | | | |
| − | .menu-items li {
| |
| − | display: inline-block;
| |
| − | margin-right: 10px;
| |
| − | margin-left: 10px;
| |
| − | }
| |
| − | .menu-items a {color: #473E4F; text-decoration: none; font-family: Raleway;}
| |
| | | | |
| | | | |
| | </style> | | </style> |
| − |
| |
| | </head> | | </head> |
| | | | |
| − | <body>
| |
| − | <div style="clear: both;"></div>
| |
| − | <div id="container">
| |
| | | | |
| − | <nav class="fixed-nav-bar">
| |
| − | <div id="menu" class="menu">
| |
| | | | |
| | | | |
| − | <ul class="menu-items">
| + | <body> |
| − | <a href="https://2015.igem.org/Team:UCL/Home"><li>Home</li></a> | + | <div id="headerr"> |
| − | <a href="https://2015.igem.org/Team:UCL/Description"><li>Project</li></a>
| + | <script> |
| − | <a href="https://2015.igem.org/Team:UCL/Parts"><li>Parts</li></a>
| + | (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ |
| − | <a href="https://2015.igem.org/Team:UCL/Experiments"><li>Experiments & Protocols</li></a>
| + | (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), |
| | + | m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) |
| | + | })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); |
| | | | |
| − | <img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xpf1/v/t1.0-1/c3.0.160.160/p160x160/11012987_837961202954933_8011043740998938490_n.png?oh=a7923468802678158915746d51d9856f&oe=56338EDF&__gda__=1444695053_c0cc41228f96cc256abdf883df5eb1ca" style="width: 50px; height: 50px; margin-top: 13px;">
| + | ga('create', 'UA-66078098-1', 'auto'); |
| | + | ga('send', 'pageview'); |
| | | | |
| − | <a href="https://2015.igem.org/Team:UCL/Collaborations"><li>Collaborations</li></a>
| + | </script> |
| − | <a href="https://2015.igem.org/Team:UCL/Notebook"><li>Notebook</li></a>
| + | |
| − | <a href="https://2015.igem.org/Team:UCL/Team"><li>Team</li></a>
| + | |
| − | <a href="https://2015.igem.org/Team:UCL/Interlabstudy"><li>InterLab Study</li></a>
| + | |
| − | </ul>
| + | |
| | | | |
| − | </div> | + | <div id="logo"> |
| | + | <!--<a href="https://2015.igem.org/Team:UCL/Software#mark"><img src="https://static.igem.org/mediawiki/2015/f/f1/Mind_the_Mark_icon_black_and_white.png" class="interesting1"/></a> |
| | + | <a href="https://2015.igem.org/Team:UCL/Entrepreneurship"><img src="https://static.igem.org/mediawiki/2015/e/e6/Prokao_logo_black_and_white.png" class="interesting2"/></a> --> |
| | + | <img src="https://static.igem.org/mediawiki/2015/5/56/Mind_the_gut_logo_small_frontpage.png" id="logophoto" style="" alt="Mind the Gut"> |
| | | | |
| − | </nav> | + | <div class="intro-buttons" id="box-links" style="margin: 0 auto;"> |
| | + | <a data-scroll data-options='{ "easing": "linear" }' href="#introo2" class="buttonblack">Learn more</a> |
| | | | |
| | + | <br/> |
| | | | |
| − | <div id="header">
| |
| − | <div id="logo"> <img src="http://s8.postimg.org/vaknrdpid/mind_the_gut_logo.png" class="logophoto" />
| |
| − |
| |
| − |
| |
| − | <div class="intro-buttons" id="box-links">
| |
| − | <a href="#intro1" class="buttonc1">Intro</a>
| |
| − | <a data-scroll data-options='{ "easing": "linear" }' href="#abstract" class="buttonc2">Abstract</a>
| |
| − | <a data-scroll data-options='{ "easing": "linear" }' href="#motivation" class="buttonc3">Why to do it?</a>
| |
| | </div> | | </div> |
| − |
| |
| | </div> | | </div> |
| | | | |
| − | <div style="clear: both;"></div>
| |
| − |
| |
| − |
| |
| − | <div id="twit">
| |
| − | <a class="twitter-timeline" href="https://twitter.com/UCLiGEM" data-widget-id="615989246042742784">Tweets by @UCLiGEM</a>
| |
| − | <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
| |
| | </div> | | </div> |
| | | | |
| − | </div>
| |
| | | | |
| − | <div id="intro1">
| |
| | | | |
| − | <div class="first"> The number of <span style="color: #B66E74;">microorganisms</span> in human <img src="https://static.igem.org/mediawiki/2015/c/c2/UCL2015_gut.png" style="width: 32px; height: 25px"> is higher than the number of human cells in our body. Their <span style="color: #B66E74;">metabolic activity</span> equals that of <img src="https://static.igem.org/mediawiki/2015/d/df/UCL2015_liver.png" style="width: 45px; height: 32px;"> and plays crucial role in many key processes such as <span style="color: #B66E74;">digestion</span>, <span style="color: #B66E74;">drug metabolism</span>, or functioning of the <span style="color: #B66E74;">immune system</span>... <a data-scroll data-options='{ "easing": "linear" }' href="#intro2"><img src="http://icons.iconarchive.com/icons/graphicloads/100-flat-2/32/arrow-next-3-icon.png"/></a> | + | <div id="introo2"> |
| | | | |
| − | </div>
| + | <div id="introo2text"> |
| − | </div>
| + | <video width="100%" controls> |
| − | | + | <source src="https://static.igem.org/mediawiki/2015/b/b1/Mind_the_gut_UCL_iGEM_2015_Wiki.mp4"> |
| − | | + | </video> |
| − | | + | </div></div> |
| − | <div id="intro2"> | + | |
| − | | + | |
| − | <div class="second"> Studies in <img src="https://static.igem.org/mediawiki/2015/1/13/UCL2015_mice.png" style="width: 60px; height: 32px;"> have shown that the <span style="color: #1E6073;">gut microbiome</span> is also capable of influencing the chemistry of our <img src="https://static.igem.org/mediawiki/2015/0/09/UCL2015_brain.png" style="width: 38px; height: 32px;">, thus regulating our <span style="color: #1E6073;">behaviour</span> , <span style="color: #1E6073;">anxiety</span> , <span style="color: #1E6073;">mood</span> , <span style="color: #1E6073;">cognition</span> and <span style="color: #1E6073;">pain</span> ... <a data-scroll data-options='{ "easing": "linear" }' href="#intro3"><img src="http://cdn3.iconfinder.com/data/icons/arrows-25/137/Right-10-128.png" style="width: 32px; height: 32px;" /></a> | + | |
| | | | |
| | + | |
| | + | <div id="introo1"> |
| | + | <!-- |
| | + | <center> |
| | + | <a style="position:relative;bottom:100px;" href="https://2015.igem.org/Team:UCL/Description" class="buttonblack2">Project description</a></center> |
| | + | --> |
| | </div> | | </div> |
| | + | |
| | + | </div> |
| | + | <div id="introo3"> |
| | + | <div id="introo3text"> |
| | + | </div> |
| | + | </div> |
| | + | </div> |
| | + | |
| | | | |
| − | </div>
| |
| − |
| |
| − | <div id="intro3">
| |
| − | <div class="third">
| |
| − | Being inspired by this emerging research area, <span style="color: #019966;">UCL <img src="http://goo.gl/Bt86ec?gdriveurl" style="width: 40px; height: 32px"> 2015</span> team wants to explore the modulation of the gut bacteria as a strategy for developing <span style="color: #019966;">novel treatments</span> for <span style="color: #019966;">mental health</span> disorders. Ultimately, our goal is to harness <span style="color: #019966;">synthetic biology</span> to make people <span style="color: #019966;">happy</span>!
| |
| | | | |
| − | <div class="button-abstract" id="box-links">
| |
| − | <a data-scroll data-options='{ "easing": "linear" }' href="#abstract" id="buttonc4">Abstract</a>
| |
| − | </div>
| |
| | </div> | | </div> |
| | | | |
| − | </div>
| |
| | | | |
| − | <div style="clear: both;"></div>
| |
| | | | |
| − | <div id="abstract">
| |
| − | <div id="abstracttext">
| |
| − |
| |
| − | <p>
| |
| − | <h2> Mind the Gut: Abstract</h2>
| |
| − | Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji druków na komputerach osobistych, jak Aldus PageMaker
| |
| − | </p>
| |
| | | | |
| − |
| |
| − | <p> W przeciwieństwie do rozpowszechnionych opinii, Lorem Ipsum nie jest tylko przypadkowym tekstem. Ma ono korzenie w klasycznej łacińskiej literaturze z 45 roku przed Chrystusem, czyli ponad 2000 lat temu! Richard McClintock, wykładowca łaciny na uniwersytecie Hampden-Sydney w Virginii, przyjrzał się uważniej jednemu z najbardziej niejasnych słów w Lorem Ipsum – consectetur – i po wielu poszukiwaniach odnalazł niezaprzeczalne źródło: Lorem Ipsum pochodzi z fragmentów (1.10.32 i 1.10.33) „de Finibus Bonorum et Malorum”, czyli „O granicy dobra i zła”, napisanej właśnie w 45 p.n.e. przez Cycerona. Jest to bardzo popularna w czasach renesansu rozprawa na temat etyki. Pierwszy wiersz Lorem Ipsum, „Lorem ipsum dolor sit amet...” pochodzi właśnie z sekcji 1.10.32.
| |
| − |
| |
| − | </p>
| |
| − |
| |
| − | <div style="clear: both;"></div>
| |
| − |
| |
| − | <div id="why2">
| |
| − | <a data-scroll data-options='{ "easing": "linear" }' href="#motivation" class="buttonc2">Why to do it?</a>
| |
| | </div> | | </div> |
| | | | |
| − | </div>
| |
| | | | |
| − |
| |
| − | </div>
| |
| − |
| |
| − | <div id="motivation">
| |
| − |
| |
| − | <div class="why">
| |
| − | Why are we doing it? <br/>
| |
| − |
| |
| − |
| |
| − |
| |
| − | <div id="whitebox1"> <div class="icondiv"> <i class="glyphicon glyphicon-globe"></i> </div>
| |
| − | An estimated 450 million people world-wide suffer from mental health problem</div>
| |
| − |
| |
| − |
| |
| − |
| |
| − | <div id="whitebox2"> <div class="icondiv"> <i class="glyphicon glyphicon-stats"></i> </div>
| |
| − | By 2030, depression alone is likely to be highest contributon to global burden of disease</div>
| |
| − | <div id="whitebox3"> <div class="icondiv"> <i class="glyphicon glyphicon-piggy-bank"></i> </div> According to WHO, in low income countries, depression represents almost as large problem
| |
| − | as does malaria</div> <br/>
| |
| − |
| |
| − |
| |
| − | <div id="whitebox4"><div class="icondiv"> <i class="icon icon-user-md"></i></div> 80% of people with severe mental health con-dition do not have
| |
| − | access to needed treatment</div>
| |
| − | <div id="whitebox5"><div class="icondiv"> <i class="glyphicon glyphicon-blackboard"></i></div> 1 in 5 children suffers from mental health problems. Due to the lack of support, these problems lead to poorer school performance</div>
| |
| − | <div id="whitebox6"><div class="icondiv"> <i class="icon icon-group"></i></div> Fewer than 20% of countries have mental health service organizations that provide community and
| |
| − | individual assistance
| |
| − |
| |
| − | </div>
| |
| | <div style="clear: both;"></div> | | <div style="clear: both;"></div> |
| | | | |
| − |
| |
| − | <div id="why3">
| |
| − | <a data-scroll data-options='{ "easing": "linear" }' href="#header" class="buttonc3">Back to top</a>
| |
| | </div> | | </div> |
| | | | |
| − | </div>
| |
| | | | |
| | </div> | | </div> |
| | | | |
| − | </div>
| |
| | | | |
| − | </div>
| |
| | | | |
| − | </div>
| |
| | | | |
| | | | |
| | + | </body> |
| | | | |
| − | </div>
| |
| | | | |
| − | </body>
| |
| − | <script src="https://gist.github.com/galambalazs/6477177.js"></script>
| |
| | | | |
| − | <!--
| |
| − | <script src='https://cferdinandi.github.io/smooth-scroll/dist/js/smooth-scroll.js'></script>
| |
| | | | |
| | | | |
| − | <script>
| |
| − | smoothScroll.init({
| |
| − | speed: 1000,
| |
| − | easing: 'easeInOutCubic',
| |
| − | offset: 0,
| |
| − | updateURL: true,
| |
| − | callbackBefore: function ( toggle, anchor ) {},
| |
| − | callbackAfter: function ( toggle, anchor ) {}
| |
| − | });
| |
| − | </script>
| |
| − |
| |
| − | -->
| |
| | | | |
| | </html> | | </html> |
