Difference between revisions of "Team:UCL/Playingaround"

 
(231 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
{{CSS_UCL5}}
+
{{CSS_UCL6}}
 +
 
 
<html>
 
<html>
 
<head>
 
<head>
Line 45: Line 46:
  
  
−
/*#logophoto {width: 500px; height: 433px; height: 100%; opacity: 1; z-index: 99999;}*/
 
−
#logophoto {
 
−
  max-width: 500px;
 
−
  opacity: 1;
 
−
  width: 100%;
 
−
  z-index: 99999;
 
−
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 {
+
#topline { width: 100%; height: auto; position: relative; padding: 0; top: 0px; display: block; 
−
z-index:999;
+
 
 +
-webkit-mask-image: -webkit-gradient(linear, 0 0, 0 100, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,1)));
 +
animation: topanimation 1s ease-in 1;
 +
-webkit-animation: topanimation 1s ease-in 1;
 
}
 
}
  
  
 +
@-webkit-keyframes topanimation {
 +
    0%  {padding-top: 100px;}
 +
    100%  {padding-top: 0px;}}
  
 
#introo1 {width: 100%; height: 100%; position: relative;  
 
#introo1 {width: 100%; height: 100%; position: relative;  
−
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: #FBFDFC; background-image: url('https://static.igem.org/mediawiki/2015/e/e1/UCL_block1_texture3.png');  background-repeat: no-repeat; background-position: 0% 0%; background-size: 100%;
 
margin: 0;
 
margin: 0;
 
padding: 0;
 
padding: 0;
Line 83: Line 79:
 
     left: 0px;
 
     left: 0px;
 
bottom: 0px;
 
bottom: 0px;
−
height: 100px !important;
+
height: 100px;
 
background-image: url('https://static.igem.org/mediawiki/2015/c/c3/UCL_block2_1_texture.jpg');
 
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)));
 
-webkit-mask-image: -webkit-gradient(linear, 0 0, 0 100, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));
Line 168: Line 164:
 
padding: 0;
 
padding: 0;
 
font-family: Raleway;
 
font-family: Raleway;
−
letter-spacing: 1.1px; font-size: 13px; z-index: 9999; margin-bottom: 118px; border-bottom: 10px solid #014c4b;
+
letter-spacing: 1.1px; font-size: 13px; z-index: 9999; margin-bottom: 118px;
  
  
 
}
 
}
  
−
#introo3text {position: absolute; top: 16%; right: 10%; width: 80%; font-size: 19px; letter-spacing: 2.2px; line-height: 1.8; float: right; display: inline; z-index: 10001;}
+
#introo3text {position: absolute; top: 14%; right: 10%; width: 80%; font-size: 19px; letter-spacing: 2.2px; line-height: 1.5; float: right; display: inline; z-index: 10001;}
  
  
−
#intro3dnawrap {position: absolute; bottom: 38%; width: 100%; height: 15%;}  
+
#intro3dnawrap {position: absolute; bottom: 37%; width: 100%;}  
−
#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; margin: 0 auto; width: 8%; height: 100%; position: relative; left: -21%; opacity: 0.5;
+
#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; margin: 0 auto; width: 8%; position: relative; left: -21%; opacity: 0.7;  
  
 
  -webkit-animation-name: spinnerRotate;
 
  -webkit-animation-name: spinnerRotate;
Line 194: Line 190:
 
}
 
}
  
−
#introo3dna-img {width: 8%; height: 100%; top: -100%; line-height: 50%; position: relative; margin: 0 auto; left: -21%; opacity: 0.8
 
−
z-index: 10001;}
 
  
 
#todescription {position: absolute; bottom: 10%; width: 100%;}
 
#todescription {position: absolute; bottom: 10%; width: 100%;}
Line 209: Line 203:
 
#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%;}
 
#introo2text {font-size: 20px; line-height: 1.5; bottom: 15%;}
−
#introo3text {font-size: 17px; line-height: 1.5; top: 25%;}
+
#introo3text {font-size: 17px; line-height: 1.3; top: 22%;}
 
#todescription {bottom: 3%;}
 
#todescription {bottom: 3%;}
 +
#intro3dnawrap {bottom: 29%;}
 
}
 
}
  
Line 219: Line 214:
 
#introo1arrow, #introo2arrow {width: 10%; height: 10%;}
 
#introo1arrow, #introo2arrow {width: 10%; height: 10%;}
 
#todescription {bottom: 1%;}
 
#todescription {bottom: 1%;}
 +
#intro3dnawrap {bottom: 21%;}
 +
  
  
Line 225: Line 222:
 
@media (max-width:480px){
 
@media (max-width:480px){
 
#introo1 {background-position: 0 100px;}
 
#introo1 {background-position: 0 100px;}
−
#introo1text {font-size: 15px; line-height: 1.5;}
+
#introo1text {font-size: 15px; line-height: 1.3;}
 
#introo2text {font-size: 17px; line-height: 1.5; bottom: 20%;}
 
#introo2text {font-size: 17px; line-height: 1.5; bottom: 20%;}
 
#introo1arrow, #introo2arrow {width: 13%; height: 13%;}
 
#introo1arrow, #introo2arrow {width: 13%; height: 13%;}
 +
#introo2arrow {bottom: 20%;}
 +
#todescription {bottom: 5%;}
 +
#intro3dnawrap {bottom: 20%;}
 +
#introo1:after {background-image: none;}
 +
#centerbutton {width: 35%; bottom: -20px;}
 +
#introo3 {height: 110%; background-position: left 0px bottom 30px; background-color: #F2ECE4;}
 +
#introo3text {font-size: 14px; line-height: 1.4; top: 22%;}
 +
 +
  
 
}
 
}
Line 233: Line 239:
  
 
@media (max-width:360px){
 
@media (max-width:360px){
−
#introo1 {background-position: 0 60px;}
+
#introo1 {background-position: 0 50px; height: 110%;}
−
#introo1text, #introo2text {font-size: 14px; line-height: 1.2;}
+
#introo1:after {background-image: none;}
−
#introo2text {font-size: 15px; line-height: 1.5; bottom: 20%;}
+
#introo1text {font-size: 13px; line-height: 1.1; bottom: 16%;}
 +
#introo2text {font-size: 15px; line-height: 1.3; bottom: 17%;}
 
#introo1arrow, #introo2arrow {width: 15%; height: 15%;}
 
#introo1arrow, #introo2arrow {width: 15%; height: 15%;}
 +
#introo3text {font-size: 13px; line-height: 1.3; top: 22%;}
 +
#centerbutton {width: 50%; bottom: -20px;}
 +
#introo3 {height: 110%; background-position: left 0px bottom 30px; background-color: #F2ECE4;}
 +
#intro3dnawrap {bottom: 20%;}
 +
 
}
 
}
  
Line 258: Line 270:
  
  
−
#footer {background: #493C54; background-image: url('https://static.igem.org/mediawiki/2015/b/b0/UCL_University_College_London2.jpg'); background-position: center 70%; background-size: 100%;  width: 100%; height: 120px; position: fixed; bottom: 0; left: 0; margin: 0 auto; z-index: -1; }
+
#footer {background: #fff; background-size: 100%;  width: 100%; height: 120px; position: fixed; bottom: 0; left: 0; margin: 0 auto;  z-index: -1; }
 +
 
 +
 
 +
.intro-buttons2 {text-align: center; position: relative; margin: 0 auto; width: 100%; bottom: -30px; z-index: 9000; }
 +
 
 +
 
 +
 
 +
a.buttonblack2 {
 +
 
 +
text-transform: uppercase;
 +
  font-size: 30px;
 +
  font-weight: normal;
 +
  line-height: 1.428571429;
 +
  text-align: center;
 +
  white-space: nowrap;
 +
  vertical-align: middle;
 +
  border-radius: 10px;
 +
transition-property: background-color, color, border-color;
 +
  transition-duration: 1s;
 +
  transition-timing-function: ease;
 +
  border: solid 5px #19a07c;
 +
    padding: 10px 15px 35px 15px;
 +
  text-decoration: none;
 +
background: none;
 +
font-family: Raleway;
 +
letter-spacing: 4px;
 +
font-weight: bold;
 +
color: #19a07c;
 +
background-image: url('https://static.igem.org/mediawiki/2015/f/fa/UCL_Learnmorearrows.png');
 +
background-size: 15%;
 +
background-position: center bottom 4px;
 +
background-repeat: no-repeat;
 +
  animation: logophoto 4s ease-in 1;
 +
-webkit-animation: logophoto 4s ease-in 1;
 +
 
 +
}
 +
 
 +
 
 +
.buttonblack2:hover {  border: solid 5px #065641; color: #19a07c; background: none; }
 +
 
 +
 
 +
#header2 {background-image: url('https://static.igem.org/mediawiki/2015/e/e7/UCL_MG_6312_2.png');
 +
text-align: center;
 +
height: 66%;
 +
width:100%;
 +
position: relative;
 +
display: block !important;
 +
margin: 0;
 +
padding: 0;
 +
top: 0;
 +
bottom: 0;
 +
  background-repeat: no-repeat;
 +
 
 +
  background-size: 100%;
 +
background-position: center center;
 +
background-attachment: fixed;
 +
margin-top: 100px;
 +
-webkit-box-sizing: border-box;
 +
-moz-box-sizing: border-box;
 +
box-sizing: border-box;
 +
 
 +
vertical-align: middle; }
 +
 
 +
 
 +
 
 +
#logo2 {
 +
padding: 0; position: absolute; height: 100%; left: 0; margin: 0; width: 100%; text-align: left;
 +
}
 +
 
 +
#logo3 {position: absolute; bottom: 20px; right: 20px;}
 +
 
 +
 
 +
 
 +
 
 +
#logophoto2 {
 +
margin: 0; padding: 0;
 +
  max-width: 500px;
 +
  width: 100%;
 +
  z-index: 99999;
 +
animation: logophoto 2s ease-in 1;
 +
-webkit-animation: logophoto 2s ease-in 1;
 +
}
 +
 
 +
@-webkit-keyframes logophoto
 +
{ 0% {opacity: 0;}
 +
100% {opacity: 1;}
 +
}
  
  
Line 265: Line 363:
 
</head>
 
</head>
 
<body>
 
<body>
−
<div id="header">
+
<div id="header2">
 
<script>
 
<script>
 
   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 
   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
Line 277: Line 375:
 
</script>
 
</script>
  
−
<div id="logo">
+
<div style="clear: both;"></div>
  
−
<img src="https://static.igem.org/mediawiki/2015/5/56/UCL_logooo_small.png" id="logophoto" style="" alt="Mind the Gut">  
+
<div id="logo2"><img src="https://static.igem.org/mediawiki/2015/5/56/UCL_logooo_small.png" id="logophoto2" style="" alt="Mind the Gut">  
  
−
       <div class="intro-buttons" id="box-links">
+
       <div class="intro-buttons2" id="box-links">
−
         <a data-scroll data-options='{ "easing": "linear" }' href="#introo1" class="buttonblack">Learn more</a>
+
         <a data-scroll data-options='{ "easing": "linear" }' href="#introo1" class="buttonblack2">Learn more</a>
 
   
 
   
 
<br/>
 
<br/>
Line 290: Line 388:
 
</div>
 
</div>
  
 +
<div id="logo3"><img src="https://static.igem.org/mediawiki/2015/e/ea/Ucllogo2.png" style="width: 100px;"></div>
  
  
  
 
</div>
 
</div>
 +
 +
 +
<div id="topline"><img src="https://static.igem.org/mediawiki/2015/d/d0/UCL_Topbar.png.png" style="width: 100%;">
 +
</div>
 +
  
 
<div id="introo1" class="bgswitch">
 
<div id="introo1" class="bgswitch">
Line 337: Line 441:
  
 
<div id="intro3dnawrap">
 
<div id="intro3dnawrap">
−
<div id="introo3dna"></div>
+
<div id="introo3dna"><img src="https://static.igem.org/mediawiki/2015/4/4a/UCL_Dnaicon.png" style="width: 100%;"></div>
−
<div id="introo3dna-img"><img src="https://static.igem.org/mediawiki/2015/4/4a/UCL_Dnaicon.png" style="width: 100%;"></div>
+
 
</div>
 
</div>
  

Latest revision as of 00:49, 26 August 2015

'

The number of microorganisms in human gut is higher than the number of human cells in our body. Their metabolic activity equals that of liver and plays crucial role in many key processes such as digestion, drug metabolism, or functioning of the immune system...
Studies in mice have shown that the gut microbiome is also capable of influencing the chemistry of our brain, thus regulating our behaviour , anxiety , mood , cognition and pain ...
Being inspired by this emerging research area, UCL iGEM 2015 team wants to explore the modulation of the gut bacteria as a strategy for developing novel treatments for mental health disorders. Ultimately, our goal is to harness synthetic biology to make people happy!