Difference between revisions of "Team:UCL"
Superjack15 (Talk | contribs) |
Superjack15 (Talk | contribs) |
||
Line 1: | Line 1: | ||
− | {{ | + | {{CSS_UCL6}} |
− | <html | + | <html> |
<head> | <head> | ||
− | < | + | <style> |
+ | |||
+ | |||
+ | .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;} | ||
+ | |||
+ | |||
+ | .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; | ||
+ | } | ||
+ | |||
+ | .tooltip a {color: #22343C;} | ||
+ | .tooltip {color: #22343C;} | ||
+ | |||
+ | .content { | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | .content {color: #d67166;} | ||
+ | |||
+ | /* end-of-references */ | ||
+ | |||
+ | #headerr {background-image: url('https://static.igem.org/mediawiki/2015/d/d4/UCL_London_Quad_Frontpage.jpeg'); | ||
+ | text-align: center; width: 100%; | ||
+ | height: 100%; | ||
+ | position: relative; | ||
+ | display: block !important; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | top: 0; | ||
+ | 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; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /*#logophoto {width: 500px; height: 433px; height: 100%; opacity: 1; z-index: 99999;}*/ | ||
+ | #logo { | ||
+ | padding-top:12%; | ||
+ | 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; | ||
+ | -webkit-background-size: cover; | ||
+ | background-size: cover; | ||
+ | background-position: 0 -100px; | ||
+ | |||
+ | display: block !important; | ||
+ | margin: 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; | ||
+ | letter-spacing: 1.1px; font-size: 13px; top: 0px; | ||
+ | padding-top: 50px; | ||
+ | padding-bottom: 50px; | ||
+ | |||
+ | } | ||
+ | #introo3 {width: 100%; | ||
+ | background-image: url('https://static.igem.org/mediawiki/2015/c/c3/UCLFRONTBLOCK_2_2015.png'); | ||
+ | position: relative; | ||
+ | -webkit-background-size: cover; | ||
+ | background-size: cover; | ||
+ | background-position: 0 -100px; | ||
+ | |||
+ | display: block !important; | ||
+ | margin: 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; | ||
+ | letter-spacing: 1.1px; font-size: 13px; top: 0px; | ||
+ | padding-top: 50px; | ||
+ | padding-bottom: 50px; | ||
+ | |||
+ | } | ||
+ | |||
+ | #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; | ||
+ | padding: 0; | ||
+ | top: 0; | ||
+ | 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; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | @media (max-width:1024px){ | ||
+ | #introo1 {} | ||
+ | #introo2 { height: 100%;} | ||
+ | #introo3 {height: 100%; background-position: left 0px bottom -35px;} | ||
+ | #introo1text, #introo1arrow {font-size: 18px; line-height: 1.5;} | ||
+ | } | ||
+ | |||
+ | @media (max-width:768px){ | ||
+ | #introo1 {background-position: 0 100px;} | ||
+ | #introo1text {font-size: 18px; line-height: 1.5; bottom: 10%;} | ||
+ | #introo2text {font-size: 20px; line-height: 1.5; bottom: 10%;} | ||
+ | } | ||
+ | |||
+ | @media (max-width:480px){ | ||
+ | #introo1 {background-position: 0 100px;} | ||
+ | #introo1text {font-size: 15px; line-height: 1.5;} | ||
+ | #introo2text {font-size: 17px; line-height: 1.5; bottom: 20%;} | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | @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%;} | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | </style> | ||
</head> | </head> | ||
+ | |||
+ | |||
+ | |||
+ | |||
<body> | <body> | ||
+ | <div id="headerr"> | ||
+ | <script> | ||
+ | (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ | ||
+ | (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'); | ||
+ | |||
+ | ga('create', 'UA-66078098-1', 'auto'); | ||
+ | ga('send', 'pageview'); | ||
+ | |||
+ | </script> | ||
+ | |||
+ | <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"> | ||
+ | |||
+ | <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> | ||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <div id="introo2"> | ||
+ | |||
+ | <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> | ||
+ | |||
+ | |||
+ | <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="introo3"> | ||
+ | <div id="introo3text"> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | <div style="clear: both;"></div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
− | |||
− | |||
</body> | </body> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
</html> | </html> |
Latest revision as of 03:58, 19 September 2015
'