Difference between revisions of "Team:UCL/Advisors"
Superjack15 (Talk | contribs) |
Superjack15 (Talk | contribs) |
||
(47 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
− | {{ | + | {{CSS_UCL6}} |
<html> | <html> | ||
<head> | <head> | ||
− | + | ||
− | + | <style> | |
− | + | ||
− | + | #header2 { | |
+ | width: 100%; | ||
+ | background-color: #000; | ||
+ | min-height: 100%; | ||
+ | height: auto; | ||
+ | position: relative; | ||
+ | margin: 0 auto; | ||
+ | padding: 0; | ||
+ | top: 0; | ||
+ | vertical-align: middle; | ||
+ | font-family: Raleway; | ||
+ | letter-spacing: 1.1px; font-size: 13px; | ||
+ | padding-bottom: 100px; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | #header2:before | ||
+ | { | ||
+ | content: ""; | ||
+ | background-image: url('https://static.igem.org/mediawiki/2015/5/52/MG_0233.jpg'); | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: 0 0 0 0; | ||
+ | background-attachment: fixed !important; | ||
+ | -webkit-background-size: cover; | ||
+ | -moz-background-size: cover; | ||
+ | -o-background-size: cover; | ||
+ | background-size: cover; | ||
+ | -webkit-box-sizing: border-box; | ||
+ | -moz-box-sizing: border-box; | ||
+ | box-sizing: border-box; | ||
+ | -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 2000, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0.4))); | ||
+ | position: absolute; | ||
+ | top: 0px; | ||
+ | left: 0px; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | border: none; | ||
+ | } | ||
+ | |||
+ | |||
+ | #mobilebackground { | ||
+ | background-image: url('https://static.igem.org/mediawiki/2015/9/94/UCL_MG_0797.jpg'); | ||
+ | top: 0; | ||
+ | right: 0; | ||
+ | left: 0; | ||
+ | background-position: 0 0 0 0; | ||
+ | position: fixed; | ||
+ | background-repeat: no-repeat; | ||
+ | -webkit-background-size: cover; | ||
+ | -moz-background-size: cover; | ||
+ | -o-background-size: cover; | ||
+ | background-size: cover; | ||
+ | -webkit-box-sizing: border-box; | ||
+ | -moz-box-sizing: border-box; | ||
+ | box-sizing: border-box; | ||
+ | display: none; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | padding: 0; | ||
+ | margin: 0; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | #wrapper {width: 80%; height: 100%; background: none; margin: 0 auto; position: relative; padding: 0; padding-top: 80px; margin-bottom: 200px; overflow: auto;} | ||
+ | |||
+ | |||
+ | |||
+ | .bigtitle {width: 42%; top: 0; margin: 0 auto; font-size: 16px; background-image: url('https://static.igem.org/mediawiki/2015/e/e3/UCL_headercircle3.png'); text-align: center; line-height: 2; | ||
+ | background-position: top center; background-repeat: no-repeat; background-size: contain; padding: 9%; position: relative; margin-bottom: 100px; color: #0a0111;} | ||
+ | |||
+ | .bigtitle a {color: #493C54; text-decoration: none;} | ||
+ | |||
+ | |||
+ | #members { width: 100%; height: auto; position: relative;} | ||
.memberwrapper { | .memberwrapper { | ||
− | + | margin: 0 auto; | |
+ | margin-bottom: 50px; | ||
+ | width: 90%; | ||
+ | position: relative; | ||
+ | background: #fff; | ||
+ | border-radius: 8px; | ||
+ | padding: 14px; | ||
+ | height: auto; | ||
+ | overflow: auto; | ||
+ | opacity: 0.9; | ||
} | } | ||
+ | |||
+ | |||
+ | .memberwrapper h2 {font-size: 13px; text-decoration: none; border-bottom: 0px; display: block; background-color: #493C54; color: #fff; font-weight: bold; padding: 14px; letter-spacing: 4px; text-transform: uppercase; margin: 5px;} | ||
+ | |||
.portraitL { | .portraitL { | ||
− | left: | + | float: left; |
− | + | display: inline-block; | |
+ | width: 30%; | ||
+ | opacity:1; | ||
+ | |||
} | } | ||
.portraitL img{ | .portraitL img{ | ||
− | + | padding: 5px; | |
− | + | float: left; | |
+ | width: 100%; | ||
+ | } | ||
.memberdescriptionL { | .memberdescriptionL { | ||
− | float: | + | float: right; |
− | + | width: 65%; | |
+ | display: inline-block; | ||
+ | padding: 0px; | ||
} | } | ||
+ | |||
.portraitR { | .portraitR { | ||
− | float:right; | + | float: right; |
+ | display: inline-block; | ||
+ | width: 30%; | ||
+ | opacity:1; | ||
} | } | ||
.portraitR img{ | .portraitR img{ | ||
− | + | padding: 5px; | |
− | + | float: right; | |
+ | width: 100%; | ||
+ | } | ||
.memberdescriptionR { | .memberdescriptionR { | ||
− | float: | + | float: left; |
− | + | width: 65%; | |
+ | display: inline-block; | ||
+ | padding: 0px; | ||
} | } | ||
+ | |||
+ | .bigtitle p {font-size: 15px; | ||
+ | line-height: 1.6; letter-spacing: 1.2px;} | ||
+ | |||
+ | .memberwrapper p { | ||
+ | text-align:justify; | ||
+ | padding: 0 8px !important; | ||
+ | font-size: 15px; | ||
+ | line-height: 1.6; | ||
+ | letter-spacing: 1.2px; | ||
+ | color: #0a0111; | ||
+ | margin: 0 !important; | ||
+ | |||
+ | } | ||
+ | |||
+ | .titlecircle {width: 85%; margin: 0 auto; padding-top: 8%;} | ||
+ | .title2 {font-size: 380%;} | ||
+ | |||
+ | |||
+ | |||
+ | .arrow {font-size: 50px;} | ||
+ | |||
+ | @media(max-width:1280px){ | ||
+ | .bigtitle {font-size: 15px;} | ||
+ | .bigtitle {width: 50%;} | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | @media(max-width:1152px){ | ||
+ | |||
+ | .bigtitle {font-size: 14px;} | ||
+ | .bigtitle {width: 52%;} | ||
+ | .titlecircle {width: 80%;} | ||
+ | .portraitR, .portraitL {width: 43%;} | ||
+ | .memberdescriptionL, .memberdescriptionR {width: 55%;} | ||
+ | .memberdescriptionL p, .memberdescriptionR p {line-height: 1.5;} | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | @media(max-width:1024px){ | ||
+ | .bigtitle {width: 58%;} | ||
+ | .titlecircle {padding-top: 10%; width: 75%;} | ||
+ | .memberwrapper {padding: 18px;} | ||
+ | #header2:before {background-image: none; } | ||
+ | #header2 {background: none;} | ||
+ | #mobilebackground {display: block;} | ||
+ | |||
+ | } | ||
+ | |||
+ | @media(max-width:960px){ | ||
+ | .bigtitle {font-size: 13px; width: 65%;} | ||
+ | .arrow {font-size: 40px;} | ||
+ | .memberdescriptionL, .memberdescriptionR {width: 90%; display: inline; float: none;} | ||
+ | .portraitR {margin-left: 20px; margin-bottom: -6px; width: 42%;} | ||
+ | .portraitL {margin-right: 20px; margin-bottom: -6px; width: 42%;} | ||
+ | .memberdescriptionL p, .memberdescriptionR p {line-height: 1.6;} | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | @media(max-width:850px){ | ||
+ | |||
+ | .bigtitle p {line-height: 1.7 !important; margin-top: -25px !important;} | ||
+ | } | ||
+ | |||
+ | @media(max-width:820px){ | ||
+ | .titlecircle {padding-top: 4%;} | ||
+ | } | ||
+ | |||
+ | |||
+ | @media(max-width: 768px){ | ||
+ | |||
+ | .bigtitle {width: 80%; font-size: 13px; padding: 14%; margin-left: -4%;} | ||
+ | .bigtitle p { font-size: 14px; margin-top: -20px !important;} | ||
+ | .titlecircle {width: 70%; padding-top: 8%;} | ||
+ | .memberwrapper {width: 100%; margin-left: -3%;} | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | @media(max-width:670px){ | ||
+ | .bigtitle {margin-left: -4%;} | ||
+ | #wrapper {width: 100%;} | ||
+ | |||
+ | .memberwrapper {width: 80%; margin: 0 auto; margin-bottom: 30px;} | ||
+ | .memberwrapper p {font-size: 14px;} | ||
+ | .bigtitle p { font-size: 14px; } | ||
+ | .titlecircle {width: 65%;} | ||
+ | |||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | @media(max-width:640px){ | ||
+ | .arrow {font-size: 30px;} | ||
+ | .titlecircle {width: 65%;} | ||
+ | .portraitR, .portraitL {width: 50%;} | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | @media(max-width:530px){ | ||
+ | .titlecircle {width: 75%;} | ||
+ | .bigtitle {padding: 14%;} | ||
+ | .memberdescriptionL p, .memberdescriptionR p {font-size: 13px; line-height: 1.5;} | ||
+ | |||
+ | } | ||
+ | |||
+ | @media(max-width: 480px) { | ||
+ | |||
+ | |||
+ | |||
+ | .bigtitle {padding: 13%;} | ||
+ | .bigtitle p { font-size: 13px; text-align: center;} | ||
+ | .titlecircle {width: 70%; padding-top: 0; } | ||
+ | .portraitR, .portraitL {width: 97%; float: none; margin: 0 auto; padding-bottom: 10px; display: block;} | ||
+ | .portraitR img, .portraitL img {float: none; padding: 0;} | ||
+ | .memberdescriptionL, .memberdescriptionR {width: 98%; display: block; margin: 0 auto !important; padding: 0 !important;} | ||
+ | .memberdescriptionL p, .memberdescriptionR p {font-size: 14px; line-height: 1.5;} | ||
+ | |||
+ | } | ||
+ | |||
+ | @media(max-width: 460px) { | ||
+ | |||
+ | .titlecircle {width: 75%; padding-top: 0; margin-top: -4%;} | ||
+ | .memberdescriptionL p, .memberdescriptionR p {font-size: 13px; line-height: 1.5; letter-spacing: 1;} | ||
+ | } | ||
+ | |||
+ | @media(max-width: 420px) { | ||
+ | |||
+ | .titlecircle {width: 80%; padding-top: 0; margin-top: -6%;} | ||
+ | .title2 {font-size: 320%;} | ||
+ | .bigtitle p {line-height: 1.5 !important;} | ||
+ | |||
+ | } | ||
+ | |||
+ | @media(max-width: 380px) { | ||
+ | |||
+ | .titlecircle {width: 80%;} | ||
+ | .bigtitle p {font-size: 12px; } | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | @media(max-width: 360px) { | ||
+ | |||
+ | .titlecircle {width: 80%;} | ||
+ | .bigtitle p {line-height: 1.3 !important;} | ||
+ | .title2 {font-size: 280%;} | ||
+ | } | ||
+ | |||
+ | |||
</style> | </style> | ||
− | + | </head> | |
− | + | ||
− | + | ||
− | + | <div id="mobilebackground"></div> | |
− | <div style="height: | + | |
+ | <div id="header2"> | ||
+ | |||
+ | <div id="wrapper"> | ||
+ | |||
+ | <div class="bigtitle"> | ||
+ | <div class="titlecircle"> | ||
+ | |||
+ | |||
+ | <br> | ||
+ | <span class="title2">Advisors & Instructors</span> <p style="margin-top: -30px; line-height: 2; text-align: center;"> | ||
+ | <br> <span class="arrow"> <a data-scroll data-options='{ "easing": "linear" }' href="#members" >▼ </a> </span> </p> </div> </div> | ||
+ | |||
+ | <div id="members"> | ||
+ | |||
+ | <div style="height: 100px"></div> | ||
+ | |||
<div class="memberwrapper"> | <div class="memberwrapper"> | ||
− | <h2> | + | <h2>Edoardo Gianni</h2> |
<div class="portraitL"> | <div class="portraitL"> | ||
− | <img src=" | + | <img src="https://static.igem.org/mediawiki/2015/3/34/UCL_Edoardo.jpg" alt="Edoardo Gianni"></div> |
<div class="memberdescriptionL"><p></p></div> | <div class="memberdescriptionL"><p></p></div> | ||
</div> | </div> | ||
Line 53: | Line 335: | ||
<h2>Georgia Bondy</h2> | <h2>Georgia Bondy</h2> | ||
<div class="portraitR"> | <div class="portraitR"> | ||
− | <img src=" | + | <img src="https://static.igem.org/mediawiki/2015/c/ce/UCL_Lewis.jpg" alt="Georgia Bondy"></div> |
<div class="memberdescriptionR"><p></p></div> | <div class="memberdescriptionR"><p></p></div> | ||
</div> | </div> | ||
Line 59: | Line 341: | ||
<h2>Roberto Chiocchio</h2> | <h2>Roberto Chiocchio</h2> | ||
<div class="portraitL"> | <div class="portraitL"> | ||
− | <img src=" | + | <img src="https://static.igem.org/mediawiki/2015/c/ce/UCL_Lewis.jpg" alt="Roberto Chioicchio"> |
</div> | </div> | ||
<div class="memberdescriptionL"><p></p></div> | <div class="memberdescriptionL"><p></p></div> | ||
Line 66: | Line 348: | ||
<h2>Lewis Moffat</h2> | <h2>Lewis Moffat</h2> | ||
<div class="portraitR"> | <div class="portraitR"> | ||
− | <img src=" | + | <img src="https://static.igem.org/mediawiki/2015/c/ce/UCL_Lewis.jpg" alt="Lewis Moffat"></div> |
<div class="memberdescriptionR"><p></p></div> | <div class="memberdescriptionR"><p></p></div> | ||
</div> | </div> | ||
Line 72: | Line 354: | ||
<h2>Steffi Braun Galleani</h2> | <h2>Steffi Braun Galleani</h2> | ||
<div class="portraitL"> | <div class="portraitL"> | ||
− | <img src=" | + | <img src="https://static.igem.org/mediawiki/2015/c/ce/UCL_Lewis.jpg" alt="Steffi Braun Galleani"></div> |
<div class="memberdescriptionL"><p></p></div> | <div class="memberdescriptionL"><p></p></div> | ||
</div> | </div> | ||
Line 78: | Line 360: | ||
<h2>Yan-Kay Ho</h2> | <h2>Yan-Kay Ho</h2> | ||
<div class="portraitR"> | <div class="portraitR"> | ||
− | <img src="- | + | <img src="https://static.igem.org/mediawiki/2015/c/ce/UCL_Lewis.jpg" alt="Yan-Kay Ho"></div> |
<div class="memberdescriptionR"><p></p></div> | <div class="memberdescriptionR"><p></p></div> | ||
</div> | </div> | ||
Line 84: | Line 366: | ||
<h2>María José Henríquez</h2> | <h2>María José Henríquez</h2> | ||
<div class="portraitL"> | <div class="portraitL"> | ||
− | <img src=" | + | <img src="https://static.igem.org/mediawiki/2015/c/ce/UCL_Lewis.jpg" alt="María José Henríquez"></div> |
<div class="memberdescriptionL"><p></p></div> | <div class="memberdescriptionL"><p></p></div> | ||
</div> | </div> | ||
Line 90: | Line 372: | ||
<h2>Tom Johnson</h2> | <h2>Tom Johnson</h2> | ||
<div class="portraitR"> | <div class="portraitR"> | ||
− | <img src="-- | + | <img src="https://static.igem.org/mediawiki/2015/c/ce/UCL_Lewis.jpg" alt="Tom Johnson"></div> |
+ | <div class="memberdescriptionR"><p></p></div> | ||
+ | </div> | ||
+ | <h5 style="font-size:300%;text-align:left;">Instructors</h5> | ||
+ | <div class="memberwrapper"> | ||
+ | <h2>Darren Nesbeth</h2> | ||
+ | <div class="portraitL"> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/c/ce/UCL_Lewis.jpg" alt="Darren Nesbeth"></div> | ||
+ | <div class="memberdescriptionL"><p></p></div> | ||
+ | </div> | ||
+ | <div class="memberwrapper"> | ||
+ | <h2>Vitor Pinheiro</h2> | ||
+ | <div class="portraitR"> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/c/ce/UCL_Lewis.jpg" alt="Vitor Pinheiro"></div> | ||
<div class="memberdescriptionR"><p></p></div> | <div class="memberdescriptionR"><p></p></div> | ||
</div> | </div> | ||
</body> | </body> | ||
</html> | </html> |
Latest revision as of 20:17, 17 September 2015
'