Difference between revisions of "Team:UCL/Advisors"

Line 2: Line 2:
 
<html>
 
<html>
 
<head>
 
<head>
−
<style>
+
<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>
 +
<style>
  
−
#main {
+
#header2 {
−
padding-left: 10%;
+
width: 100%;
−
padding-right: 10%;
+
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/9/94/UCL_MG_0797.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 {
−
min-height:300px;
+
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:0px;
+
float: left;
−
float:left;
+
display: inline-block;
 +
width: 30%;
 +
opacity:1;
 +
 
 
}
 
}
  
 
.portraitL img{
 
.portraitL img{
−
width:300px;
+
padding: 5px;
−
height:200px;}
+
float: left;
 +
width: 100%;
 +
}
  
 
.memberdescriptionL {
 
.memberdescriptionL {
−
float:left;
+
float: right;
−
margin-left:30px;
+
width: 65%;
 +
display: inline-block;
 +
padding: 0px;
 
}
 
}
 +
  
 
.portraitR {
 
.portraitR {
−
float:right;
+
float: right;
 +
display: inline-block;
 +
width: 30%;
 +
opacity:1;
 
}
 
}
  
 
.portraitR img{
 
.portraitR img{
−
width:300px;
+
padding: 5px;
−
height:200px;}
+
float: right;
 +
width: 100%;
 +
}
  
 
.memberdescriptionR {
 
.memberdescriptionR {
−
float:right;
+
float: left;
−
margin-right:30px;
+
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-family: League Script; 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>
−
</head>
+
 
−
<body>
+
 
 +
<div id="mobilebackground"></div>
 +
 
 +
<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;"> consists of a lively mix of UCL posgradauates, lecturers, etc.
 +
<br> <span class="arrow"> <a data-scroll data-options='{ "easing": "linear" }' href="#members" >&#x25BC; </a> </span>  </p> </div> </div>  
  
−
<div id="main">
+
<div id="members">
  
 +
<div style="height: 100px"></div>
  
−
<h5>Advisors & Instructors</h5>
 
−
<div style="height:40px"></div>
 
−
<h5 style="font-size:300%;text-align:left;">Advisors</h5>
 
 
<div class="memberwrapper">
 
<div class="memberwrapper">
 
<h2>Edoardo Gianni</h2>
 
<h2>Edoardo Gianni</h2>

Revision as of 19:25, 11 September 2015


Advisors & Instructors

consists of a lively mix of UCL posgradauates, lecturers, etc.
▼

Edoardo Gianni

Edoardo Gianni

Georgia Bondy

Georgia Bondy

Roberto Chiocchio

Roberto Chioicchio

Lewis Moffat

Lewis Moffat

Steffi Braun Galleani

Steffi Braun Galleani

Yan-Kay Ho

Yan-Kay Ho

María José Henríquez

María José Henríquez

Tom Johnson

Tom Johnson

Instructors

Darren Nesbeth

Darren Nesbeth

Vitor Pinheiro

Vitor Pinheiro