Difference between revisions of "Team:UCL"

 
(144 intermediate revisions by 4 users not shown)
Line 3: Line 3:
 
<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>
 
  
  

Latest revision as of 03:58, 19 September 2015

'