|
|
(145 intermediate revisions by 4 users not shown) |
Line 1: |
Line 1: |
− | {{CSS_UCL5}} | + | {{CSS_UCL6}} |
| <html> | | <html> |
| <head> | | <head> |
| | | |
− | <script language="JavaScript" type="text/javascript"> | + | <style> |
− | $(document).ready(function(){
| + | |
− |
| + | |
− | var imgArr = new Array( // relative paths of images
| + | |
− | 'https://static.igem.org/mediawiki/2015/7/7f/UCL_block2_2_texture.jpg',
| + | |
− | 'https://static.igem.org/mediawiki/2015/c/ca/UCL_block2_3_texture.jpg',
| + | |
− | 'https://static.igem.org/mediawiki/2015/c/c3/UCL_block2_1_texture.jpg'
| + | |
− | );
| + | |
− |
| + | |
− | var preloadArr = new Array();
| + | |
− | var i;
| + | |
− |
| + | |
− | /* preload images */
| + | |
− | for(i=0; i < imgArr.length; i++){
| + | |
− | preloadArr[i] = new Image();
| + | |
− | preloadArr[i].src = imgArr[i];
| + | |
− | }
| + | |
− |
| + | |
− | var currImg = 1;
| + | |
− | var intID = setInterval(changeImg, 2000);
| + | |
− |
| + | |
− | /* image rotator */
| + | |
− | function changeImg(){
| + | |
− | $('#introo2').animate({opacity: 1}, 1000, function(){
| + | |
− | $(this).css('background','url(' + preloadArr[currImg++%preloadArr.length].src +') no-repeat 1px 40px/100%');
| + | |
− | }).animate({opacity: 1}, 1000);
| + | |
− | }
| + | |
− |
| + | |
− | });
| + | |
− | </script>
| + | |
| | | |
| + | |
| + | |
| + | .buttonblack2 { |
| + | 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; } |
| | | |
− | | + | a.buttonblack2 { color: #fff !important; font-size: 12px;} |
− | | + | .buttonblack2:hover {border-color: #336666; color: #336666 !important; background-color: #fff !important;} |
− | | + | |
− | <style>
| + | |
− | | + | .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*/ | | /*references*/ |
| .content .tooltip { | | .content .tooltip { |
Line 89: |
Line 97: |
| | | |
| | | |
− | h5 {
| + | /*#logophoto {width: 500px; height: 433px; height: 100%; opacity: 1; z-index: 99999;}*/ |
− | font-size:500%;
| + | #logo { |
| + | padding-top:12%; |
| + | height: 100%; |
| } | | } |
− | | + | |
− | @media (max-width:696px){
| + | #logophoto { |
− | #twit {display:none;};
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | /*#logophoto {width: 500px; height: 433px; height: 100%; opacity: 1; z-index: 99999;}*/
| + | |
− | #logophoto { | + | |
| max-width: 500px; | | max-width: 500px; |
| opacity: 1; | | opacity: 1; |
− | width: 60%; | + | width: 360px; |
| z-index: 99999; | | z-index: 99999; |
| + | top:30%; |
| + | position:static; |
| transition-property: opacity; | | transition-property: opacity; |
| transition-duration: 2s;transition-timing-function: ease; | | transition-duration: 2s;transition-timing-function: ease; |
Line 116: |
Line 122: |
| | | |
| | | |
− | #introo1 {width: 100%; height: 100%; position: relative; | + | #introo1 {width: 100%; height: 100%; |
− | background: #FBFDFC; background-image: url('https://static.igem.org/mediawiki/2015/9/98/UCL_block1_texture.jpg'); background-repeat: no-repeat; background-position: 0% 0%; background-size: 100%;
| + | background-image: url('https://static.igem.org/mediawiki/2015/a/a5/UCLFRONTBLOCK_1_2015.png'); |
| + | position: relative; |
| + | -webkit-background-size: cover; |
| + | background-size: cover; |
| + | background-position: 0 -100px; |
| + | |
| + | display: block !important; |
| margin: 0; | | margin: 0; |
| padding: 0; | | padding: 0; |
| + | top: 0; |
| + | bottom: 0; |
| + | background-repeat: no-repeat; |
| + | |
| + | color:none; |
| + | -webkit-box-sizing: border-box; |
| + | -moz-box-sizing: border-box; |
| + | box-sizing: border-box; |
| + | |
| + | vertical-align: middle; |
| font-family: Raleway; | | font-family: Raleway; |
| letter-spacing: 1.1px; font-size: 13px; top: 0px; | | letter-spacing: 1.1px; font-size: 13px; top: 0px; |
− | z-index: 9995;
| + | padding-top: 50px; |
| + | padding-bottom: 50px; |
| + | |
| } | | } |
− | | + | #introo3 {width: 100%; |
− | #introo1text {position: absolute; bottom: 13%; padding-left: 10%; width: 65%; font-size: 20px; letter-spacing: 2px; line-height: 1.8; float: left; display: inline; z-index: 10000;} | + | background-image: url('https://static.igem.org/mediawiki/2015/c/c3/UCLFRONTBLOCK_2_2015.png'); |
− | | + | position: relative; |
− | #introo1arrow {width: 7%; height: 7%; float: right; display: inline; position: absolute; bottom: 20%; right: 10%; z-index: 10000; opacity: 0.8;}
| + | -webkit-background-size: cover; |
− | | + | background-size: cover; |
− | | + | background-position: 0 -100px; |
− | #introo1:after {
| + | |
− | content: "";
| + | display: block !important; |
− | position: absolute;
| + | |
− | right: 0px;
| + | |
− | left: 0px;
| + | |
− | bottom: 0px;
| + | |
− | height: 100px !important;
| + | |
− | background-image: url('https://static.igem.org/mediawiki/2015/c/c3/UCL_block2_1_texture.jpg'); | + | |
− | -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 100, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));
| + | |
− | | + | |
− | | + | |
− | background-size: 100%;
| + | |
− | background-position: 1px 0%; | + | |
− | background-repeat: no-repeat; | + | |
− | -webkit-transition: opacity 1s;
| + | |
− | -moz-transition: opacity 1s;
| + | |
− | transition: opacity 1s;
| + | |
− | opacity: 0.3;
| + | |
− | z-index: 9996;
| + | |
− | | + | |
− | display: block; | + | |
− | | + | |
− | }
| + | |
− | | + | |
− | #introo1:hover:after {
| + | |
− | opacity: 1; z-index: 9996;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | #introo2 {width: 100%; height: 110%; position: relative; top: -100px; /*margin-top: 100px;*/
| + | |
− | background-image: url('https://static.igem.org/mediawiki/2015/c/c3/UCL_block2_1_texture.jpg');
| + | |
− | -webkit-mask-image: -webkit-gradient(linear, 0 40, 0 80, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));
| + | |
− | | + | |
− | | + | |
− | background-repeat: no-repeat; background-position: 1px 40px; background-size: 100% ; background-color: no-color;
| + | |
| margin: 0; | | margin: 0; |
| padding: 0; | | padding: 0; |
− | font-family: Raleway;
| + | top: 0; |
− | letter-spacing: 1.1px; font-size: 13px;
| + | bottom: 0; |
| + | background-repeat: no-repeat; |
| | | |
| + | color:none; |
| + | -webkit-box-sizing: border-box; |
| + | -moz-box-sizing: border-box; |
| + | box-sizing: border-box; |
| | | |
− | transition-property: background-image, color, border-color;
| + | vertical-align: middle; |
− | transition-duration: 0.2s;
| + | font-family: Raleway; |
− | transition-timing-function: ease-in;
| + | letter-spacing: 1.1px; font-size: 13px; top: 0px; |
− | z-index: 9997;
| + | padding-top: 50px; |
| + | padding-bottom: 50px; |
| + | |
| } | | } |
| | | |
− | #introo2text {position: absolute; bottom: 20%; right: 10%; width: 65%; font-size: 23px; letter-spacing: 2.5px; line-height: 2.1; float: right; display: inline; z-index: 9999;} | + | #introo1text {background: #fff; |
| + | border-radius: 20px; |
| + | font-size: 17px; width: 70%; margin: 0 auto; line-height: 1.7; padding: 30px; text-align: justify;} |
| | | |
− | #introo2arrow {width: 7%; height: 17%; float: left; display: inline; position: absolute; bottom: 10%; left: 7%; z-index: 9999; opacity: 0.8;} | + | #introo2text {width: 60%; margin: 0 auto; padding-top: 50px;} |
− | | + | |
− | | + | #introo2 {width: 100%; height: 100%; |
− | #introo2:after { | + | background: #EBF2F8; |
− | content: "";
| + | position: relative; |
− | position: absolute;
| + | display: block !important; |
− | right: 0px;
| + | |
− | left: 0px;
| + | |
− | bottom: 0px;
| + | |
− | height: 100px !important; | + | |
− | background-image: url('https://static.igem.org/mediawiki/2015/1/15/UCL_block3_texture3.jpg');
| + | |
− | -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 80, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));
| + | |
− | display: block;
| + | |
− | background-size: 100%;
| + | |
− | background-position: 1px 55%; | + | |
− | background-repeat: no-repeat;
| + | |
− | -webkit-transition: opacity 1s;
| + | |
− | -moz-transition: opacity 1s;
| + | |
− | transition: opacity 1s;
| + | |
− | opacity: 0.3;
| + | |
− | z-index: 9998;
| + | |
− | }
| + | |
− | | + | |
− | #introo2:hover:after { | + | |
− | opacity: 1; z-index: 9998;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | | + | |
− | #introo3 {width: 100%; height: 110%; position: relative; top: -200px;
| + | |
− | | + | |
− | | + | |
− | background-image: url('https://static.igem.org/mediawiki/2015/1/15/UCL_block3_texture3.jpg');
| + | |
− | -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 80, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));
| + | |
− | | + | |
− | | + | |
− | background-repeat: no-repeat; background-position: left 0px bottom 0px; background-size: 100%;
| + | |
| margin: 0; | | margin: 0; |
| padding: 0; | | padding: 0; |
− | font-family: Raleway;
| + | top: 0; |
− | letter-spacing: 1.1px; font-size: 13px; z-index: 9999; margin-bottom: 118px; border-bottom: 10px solid #014c4b;
| + | bottom: 0; |
| + | background-repeat: no-repeat; |
| | | |
| + | background-size: cover; |
| + | background-position: top left; |
| + | color:none; |
| + | -webkit-box-sizing: border-box; |
| + | -moz-box-sizing: border-box; |
| + | box-sizing: border-box; |
| | | |
| + | vertical-align: middle; |
| + | font-family: Raleway; |
| + | letter-spacing: 1.1px; font-size: 13px; top: 0px; |
| + | padding-top: 100px; |
| + | padding-bottom: 50px; |
| + | |
| } | | } |
| | | |
− | #introo3text {position: absolute; top: 13%; right: 10%; width: 80%; font-size: 19px; letter-spacing: 2.2px; line-height: 1.8; float: right; display: inline; z-index: 10001;}
| |
| | | |
− | #introo3dna {background-image: url('https://static.igem.org/mediawiki/2015/a/ab/UCL_Gearicon.png'); background-size: 100%; background-repeat: no-repeat; background-position: center center; width: 8%; height: 15%; position: absolute; bottom: 35%; left: 24.5%; opacity: 0.5;
| |
| | | |
− | -webkit-animation-name: spinnerRotate;
| |
− | -webkit-animation-duration: 10s;
| |
− | -webkit-animation-iteration-count: infinite;
| |
− | -webkit-animation-timing-function: linear;
| |
− | -moz-animation-name: spinnerRotate;
| |
− | -moz-animation-duration: 10s;
| |
− | -moz-animation-iteration-count: infinite;
| |
− | -moz-animation-timing-function: linear;
| |
− | -ms-animation-name: spinnerRotate;
| |
− | -ms-animation-duration: 10s;
| |
− | -ms-animation-iteration-count: infinite;
| |
− | -ms-animation-timing-function: linear;
| |
− | z-index: 10001;
| |
− | }
| |
− |
| |
− | #introo3dna-img {width: 8%; height: 15%; line-height: 50%; position: absolute; bottom: 35%; left: 24.5%; opacity: 0.8;
| |
− | z-index: 10001;}
| |
− |
| |
− | #todescription {position: absolute; bottom: 10%; width: 100%;}
| |
− | #centerbutton {position: relative; margin: 0 auto; width: 17%; left: 10px; transition-property: opacity;
| |
− | transition-duration: 2s;transition-timing-function: ease;}
| |
− | #centerbutton:hover {opacity: 0.5; transition-property: opacity;
| |
− | transition-duration: 2s;transition-timing-function: ease; }
| |
| | | |
| @media (max-width:1024px){ | | @media (max-width:1024px){ |
Line 259: |
Line 214: |
| #introo3 {height: 100%; background-position: left 0px bottom -35px;} | | #introo3 {height: 100%; background-position: left 0px bottom -35px;} |
| #introo1text, #introo1arrow {font-size: 18px; line-height: 1.5;} | | #introo1text, #introo1arrow {font-size: 18px; line-height: 1.5;} |
− | #introo2text {font-size: 20px; line-height: 1.5; bottom: 15%;}
| |
− | #introo3text {font-size: 17px; line-height: 1.5; top: 20%;}
| |
− | #todescription {bottom: 3%;}
| |
| } | | } |
| | | |
Line 268: |
Line 220: |
| #introo1text {font-size: 18px; line-height: 1.5; bottom: 10%;} | | #introo1text {font-size: 18px; line-height: 1.5; bottom: 10%;} |
| #introo2text {font-size: 20px; line-height: 1.5; bottom: 10%;} | | #introo2text {font-size: 20px; line-height: 1.5; bottom: 10%;} |
− | #introo1arrow, #introo2arrow {width: 10%; height: 10%;}
| |
− | #introo3dna {bottom: 100px;}
| |
− | #introo3dna-img {bottom: 80px;}
| |
− | #todescription {bottom: 1%;}
| |
− | #introo1:hover:after, #introo2:hover:after, #introo3:hover:after {visibility: hidden;}
| |
− |
| |
| } | | } |
| | | |
Line 280: |
Line 226: |
| #introo1text {font-size: 15px; line-height: 1.5;} | | #introo1text {font-size: 15px; line-height: 1.5;} |
| #introo2text {font-size: 17px; line-height: 1.5; bottom: 20%;} | | #introo2text {font-size: 17px; line-height: 1.5; bottom: 20%;} |
− | #introo3text {font-size: 15px; line-height: 1.5; }
| |
− |
| |
− | #introo1arrow, #introo2arrow {width: 13%; height: 13%;}
| |
| | | |
| } | | } |
Line 291: |
Line 234: |
| #introo1text, #introo2text {font-size: 14px; line-height: 1.2;} | | #introo1text, #introo2text {font-size: 14px; line-height: 1.2;} |
| #introo2text {font-size: 15px; line-height: 1.5; bottom: 20%;} | | #introo2text {font-size: 15px; line-height: 1.5; bottom: 20%;} |
− | #introo1arrow, #introo2arrow {width: 15%; height: 15%;}
| |
− | #introo3text {font-size: 14px; line-height: 1.3;}
| |
| | | |
| } | | } |
| | | |
− |
| |
− | @-webkit-keyframes spinnerRotate
| |
− | {
| |
− | from{-webkit-transform:rotate(0deg);}
| |
− | to{-webkit-transform:rotate(360deg);}
| |
− | }
| |
− | @-moz-keyframes spinnerRotate
| |
− | {
| |
− | from{-moz-transform:rotate(0deg);}
| |
− | to{-moz-transform:rotate(360deg);}
| |
− | }
| |
− | @-ms-keyframes spinnerRotate
| |
− | {
| |
− | from{-ms-transform:rotate(0deg);}
| |
− | to{-ms-transform:rotate(360deg);}
| |
− | }
| |
− |
| |
− |
| |
− |
| |
− | #footer {background-image: url('https://static.igem.org/mediawiki/2015/d/d4/UCL_London_Quad_Frontpage.jpeg'); background-position: center 70%; background-size: cover; width: 100%; height: 120px; position: fixed; bottom: 0; left: 0; margin: 0 auto; z-index: -1; }
| |
| | | |
| | | |
Line 339: |
Line 260: |
| | | |
| <div id="logo"> | | <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"> | | <img src="https://static.igem.org/mediawiki/2015/5/56/Mind_the_gut_logo_small_frontpage.png" id="logophoto" style="" alt="Mind the Gut"> |
| | | |
− | <div class="intro-buttons" id="box-links"> | + | <div class="intro-buttons" id="box-links" style="margin: 0 auto;"> |
− | <a data-scroll data-options='{ "easing": "linear" }' href="#introo1" class="buttonblack">Learn more</a> | + | <a data-scroll data-options='{ "easing": "linear" }' href="#introo2" class="buttonblack">Learn more</a> |
| | | |
| <br/> | | <br/> |
| | | |
| </div> | | </div> |
− |
| |
| </div> | | </div> |
− |
| |
− |
| |
− |
| |
− |
| |
− | </div>
| |
− |
| |
− | <div id="introo1" class="bgswitch">
| |
− |
| |
− | <div style="clear: both;"></div>
| |
− |
| |
− | <div id="introo1text">
| |
− |
| |
− | The number of <span style="color: #FE6C68;">microorganisms</span> in human gut is higher than the number of human cells in our body. Their <span style="color: #FE6C68;">metabolic activity</span> equals that of liver and plays crucial role in many key processes such as <span style="color: #FE6C68;">digestion</span>, <span style="color: #FE6C68;">drug metabolism</span>, or functioning of the <span style="color: #FE6C68;">immune system</span>...
| |
− |
| |
− | </div>
| |
− |
| |
− | <div id="introo1arrow"> <a data-scroll data-options='{ "easing": "linear" }' href="#introo2"><img src="https://static.igem.org/mediawiki/2015/f/f7/UCL_Intro1arrow.jpg" style="width: 100%;"></a></div>
| |
− |
| |
− |
| |
| | | |
| </div> | | </div> |
Line 375: |
Line 277: |
| | | |
| <div id="introo2"> | | <div id="introo2"> |
− |
| |
− | <div style="clear: both;"></div>
| |
| | | |
| <div id="introo2text"> | | <div id="introo2text"> |
| + | <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> |
| | | |
− | Several studies have shown that the <span style="color: #1E6073;">gut microbiome</span> is also capable of influencing the chemistry of our brain, 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> ...
| + | |
− | | + | <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 id="introo2arrow"> <a data-scroll data-options='{ "easing": "linear" }' href="#introo3"><img src="https://static.igem.org/mediawiki/2015/b/b5/Intro2arrow.jpg" style="width: 100%;"></a></div>
| + | </div> |
− | </div>
| + | <div id="introo3"> |
− | | + | <div id="introo3text"> |
− | <div id="introo3"> | + | </div> |
− | | + | </div> |
− | | + | </div> |
− | <div id="introo3text"> | + | |
− | | + | |
− | Being inspired by this emerging research area, <span style="color: #019966;">UCL iGEM 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 <span style="font-size: 130%;">harness <span style="color: #019966;">synthetic biology</span> to make people <span style="color: #019966;">happy</span>! </span>
| + | |
− | | + | |
− | | + | |
− | </div> | + | |
− | | + | |
− | | + | |
− | <div id="introo3dna"></div>
| + | |
− | <div id="introo3dna-img"><img src="https://static.igem.org/mediawiki/2015/4/4a/UCL_Dnaicon.png" style="width: 100%;"></div>
| + | |
− | | + | |
− | <div id="todescription"><div id="centerbutton"><a href="https://2015.igem.org/Team:UCL/Description" ><img src="https://static.igem.org/mediawiki/2015/a/aa/UCL_mtg_green_project_description.png" style="width: 70%; position: relative;"></a></div> </div>
| + | |
− | | + | |
− | | + | |
− | </div>
| + | |
− | | + | |
− | <div style="clear: both;"></div>
| + | |
− | | + | |
− | <div id="footer">
| + | |
− | <div class="back">
| + | |
− | | + | |
− | <a href="http://twitter.com/UCLiGEM"><img src="https://static.igem.org/mediawiki/2015/6/64/Twitter-512.png" style="width: 40px; height: 40px;"></a>
| + | |
− | | + | |
− | <a href="http://www.facebook.com/UCLiGEM?fref=ts"><img src="https://static.igem.org/mediawiki/2015/6/69/UCL_fbicon.png" style="width: 35px; height: 35px;"></a>
| + | |
− | | + | |
− | <a href="mailto: ucligem2015@gmail.com"><img src="https://static.igem.org/mediawiki/2015/2/21/UCLEmailicom.png" style="width: 40px; height: 40px;"></a><br/><a data-scroll data-options='{ "easing": "linear" }' href="#headerr">Back to top</a>
| + | |
− | </div> | + | |
− | </div> | + | |
− | | + | |
| | | |
| | | |
Line 436: |
Line 316: |
| </div> | | </div> |
| | | |
− | </div>
| |
| | | |
− | </div>
| |
− |
| |
− |
| |
− |
| |
− | </div>
| |
| | | |
| | | |
Line 449: |
Line 323: |
| | | |
| | | |
− |
| |
− | <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>
| |
| | | |
| | | |