(125 intermediate revisions by the same user not shown) | |||
Line 3: | Line 3: | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet"> | <link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet"> | ||
+ | |||
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" | <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" | ||
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> | integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> | ||
− | + | <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"> | |
− | + | ||
+ | <link rel="stylesheet" type="text/css" | ||
+ | href="https://2018.igem.org/wiki/index.php?title=Template:Imperial_College/CSS2&action=raw&ctype=text/css" /> | ||
+ | <script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:Imperial_College/CSS&action=raw&ctype=text/javascript"></script> | ||
+ | <script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:Imperial_college/script&action=raw&ctype=text/javascript"></script> | ||
+ | <link rel="stylesheet" type="text/css" | ||
+ | href="https://2018.igem.org/wiki/index.php?title=Template:Imperial College/CSS3&action=raw&ctype=text/css" /> | ||
+ | <link rel="stylesheet" type="text/css" | ||
+ | href="https://2018.igem.org/wiki/index.php?title=Template:Template:Imperial College/CSS4&action=raw&ctype=text/css" /> | ||
+ | <script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:Imperial_College/javascript&action=raw&ctype=text/javascript"></script> | ||
+ | |||
+ | |||
<script> | <script> | ||
Line 24: | Line 36: | ||
}); | }); | ||
} | } | ||
− | + | ||
− | + | ||
</script> | </script> | ||
Line 63: | Line 74: | ||
.center{ | .center{ | ||
text-align: center; | text-align: center; | ||
+ | } | ||
+ | |||
+ | .floatleft{ | ||
+ | font-size:25px; | ||
+ | text-align: center; | ||
+ | margin-top:0 !important; | ||
+ | float:right !important; | ||
+ | width:30%; | ||
+ | font-size:20px; | ||
+ | margin-bottom:4%; | ||
+ | font-family: 'Varela Round', sans-serif; | ||
+ | color:#24305E; | ||
+ | |||
+ | } | ||
+ | .floatright2{ | ||
+ | text-align: center; | ||
+ | margin-top:0 !important; | ||
+ | float:right !important; | ||
+ | width:50%; | ||
+ | margin-bottom:4%; | ||
+ | font-family: 'Varela Round', sans-serif; | ||
+ | color:#24305E; | ||
+ | } | ||
+ | |||
+ | .floatleft2{ | ||
+ | float:left; | ||
+ | width:50%; | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | .underbold{ | ||
+ | font-weight: bold; | ||
+ | text-decoration: underline; | ||
} | } | ||
.marginbottom{ | .marginbottom{ | ||
Line 69: | Line 114: | ||
hr{ | hr{ | ||
− | + | margin:auto; | |
− | + | margin-top:2%; | |
− | + | border-top: 4px dashed #F5D76E; | |
} | } | ||
− | |||
.container{ | .container{ | ||
Line 127: | Line 171: | ||
font-size: 27px; | font-size: 27px; | ||
transition: 0.4s; | transition: 0.4s; | ||
− | border-radius: | + | border-radius: 10px; |
+ | margin-bottom: 4%; | ||
} | } | ||
Line 143: | Line 188: | ||
transition: max-height 0.3s linear; | transition: max-height 0.3s linear; | ||
overflow:hidden; | overflow:hidden; | ||
+ | background:none; | ||
} | } | ||
Line 149: | Line 195: | ||
display: none; | display: none; | ||
overflow: hidden; | overflow: hidden; | ||
− | background-color: | + | background-color: none; |
border-radius: 20px; | border-radius: 20px; | ||
+ | } | ||
+ | |||
+ | .row { | ||
+ | display: table; | ||
+ | margin: auto; | ||
+ | height:100%; | ||
+ | width: 100%; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | border: 0; | ||
+ | } | ||
+ | |||
+ | .row [class*="col-"] { | ||
+ | width: 50%; | ||
+ | float: none; | ||
+ | display: table-cell; | ||
+ | vertical-align: top; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | #display-pic{ | ||
+ | vertical-align: middle; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | #display-pic img{ | ||
+ | width: 40%; | ||
+ | margin-right:5%; | ||
+ | border-radius: 50%; | ||
+ | border: solid 10px #A8D0E6; | ||
+ | box-sizing: border-box; | ||
+ | transition: border 0.2s ease; | ||
} | } | ||
− | + | #display-pic img:hover{ | |
+ | border: solid 10px #F5D76E; | ||
+ | cursor:pointer; | ||
+ | } | ||
− | |||
− | + | .row [class*="col-"] h2{ | |
− | + | font-size: 20px; | |
− | + | font-family:"Varela Round", sans-serif; | |
− | + | color: #374785; | |
− | + | font-weight: bold; | |
− | + | transition: color 0.2s ease; | |
} | } | ||
+ | |||
+ | .row [class*="col-"] h2:hover{ | ||
+ | color:#F76C6C; | ||
+ | } | ||
+ | |||
+ | .row [class*="col-"] p{ | ||
+ | width: 100%; | ||
+ | font-size: 18px; | ||
+ | font-family: "Varela Round", sans-serif; | ||
+ | color:#374785; | ||
+ | text-align:justify; | ||
+ | |||
+ | } | ||
+ | #guard:hover{ | ||
+ | color:#F76C6C; | ||
+ | } | ||
+ | |||
+ | .display-pic{ | ||
+ | float: right; | ||
+ | text-align: left; | ||
+ | clear: both; | ||
+ | } | ||
+ | .display-pic img{ | ||
+ | width: 20%; | ||
+ | margin-right:5%; | ||
+ | float: left; | ||
+ | border-radius: 50%; | ||
+ | border: solid 10px #A8D0E6; | ||
+ | box-sizing: border-box; | ||
+ | transition: border 0.2s ease; | ||
+ | } | ||
+ | |||
+ | .display-pic img:hover{ | ||
+ | border: solid 10px #F5D76E; | ||
+ | cursor:pointer; | ||
+ | } | ||
+ | |||
+ | |||
+ | /********************************* NAVBAR ********************************/ | ||
.logo{ | .logo{ | ||
+ | margin-top:1%; | ||
width: 20%; | width: 20%; | ||
float: left; | float: left; | ||
height: 80px; | height: 80px; | ||
− | background-color: | + | background-color:white; |
+ | margin-right:5%; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
} | } | ||
Line 188: | Line 310: | ||
} | } | ||
− | . | + | .navigation { |
+ | top: 0; | ||
+ | margin:auto; | ||
+ | height: 70px; | ||
+ | background: white; | ||
+ | position:fixed; | ||
+ | z-index: 40; | ||
+ | } | ||
+ | |||
+ | .nav-container { | ||
+ | width: 100%; | ||
+ | margin: 0 auto; | ||
+ | height:auto; | ||
+ | background:white; | ||
+ | margin-bottom: 0; | ||
+ | position:fixed; | ||
+ | z-index: 40; | ||
+ | } | ||
+ | |||
+ | |||
+ | nav { | ||
+ | margin:auto; | ||
float: right; | float: right; | ||
− | width: | + | padding-top:2%; |
− | text-align: center; | + | width: 65%; |
− | background-color: | + | text-align:center; |
+ | background-color:white; | ||
+ | |||
} | } | ||
− | + | nav ul { | |
margin:0; | margin:0; | ||
− | + | list-style: none; | |
− | + | padding: 0; | |
− | + | ||
− | + | ||
} | } | ||
− | + | nav li { | |
float: left; | float: left; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
position: relative; | position: relative; | ||
− | + | ||
+ | |||
} | } | ||
− | + | nav a, a:visited { | |
− | padding:0; | + | padding: 0 15px 0; |
− | + | line-height: 50px; | |
− | + | color: #24305E; | |
− | + | ||
− | + | ||
− | + | ||
text-shadow: 1px 1px lightgrey; | text-shadow: 1px 1px lightgrey; | ||
transition:0.65s; | transition:0.65s; | ||
+ | text-decoration: none; | ||
} | } | ||
− | + | nav ul li a:hover { | |
− | padding: | + | text-shadow:1px 1px #D0FADE; |
− | + | color: #7EF397; | |
+ | } | ||
+ | |||
+ | dropdown-menu ul li { | ||
+ | min-width: 190px; | ||
+ | } | ||
+ | dropdown-menu a { | ||
+ | padding: 15px; | ||
+ | line-height: 20px; | ||
+ | |||
+ | } | ||
+ | dropdown-item :hover{ | ||
+ | color: rgb(248, 59, 122); | ||
+ | text-shadow: lightpink ; | ||
+ | |||
+ | } | ||
+ | |||
+ | .dropdown-menu { | ||
+ | position: absolute; | ||
+ | display: none; | ||
+ | z-index: 1; | ||
+ | box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15); | ||
} | } | ||
− | + | #navbarDropdown{ | |
− | + | text-decoration: none; | |
− | + | font-size:15px; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
+ | /* Mobile navigation */ | ||
+ | .nav-mobile { | ||
+ | display: none; | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | right: 0; | ||
+ | background: white; | ||
+ | height: 70px; | ||
+ | width: 70px; | ||
+ | } | ||
+ | @media only screen and (max-width: 798px) { | ||
+ | .nav-mobile { | ||
+ | display: block; | ||
+ | } | ||
− | + | nav{ | |
− | + | ||
width:100%; | width:100%; | ||
− | + | height:auto; | |
− | + | background:white; | |
− | + | margin-bottom: 2%; | |
− | + | position:fixed; | |
+ | z-index: 40; | ||
} | } | ||
− | ul | + | nav ul{ |
− | + | display: none; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | a{ | |
− | + | text-decoration: none; | |
− | + | ||
− | + | ||
} | } | ||
+ | .nav-list{ | ||
+ | margin: auto; | ||
+ | display: block !important; | ||
+ | |||
+ | } | ||
− | . | + | .nav-list li { |
− | + | ||
− | + | float: none; | |
+ | |||
+ | } | ||
+ | .nav-list a { | ||
+ | padding: 15px; | ||
+ | line-height: 25px; | ||
+ | |||
+ | } | ||
+ | nav ul li a { | ||
+ | padding-left: 30px; | ||
+ | } | ||
+ | |||
+ | .dropdown-menu { | ||
+ | position: static; | ||
+ | } | ||
} | } | ||
− | + | @media screen and (min-width: 799px) { | |
− | + | .nav-list { | |
− | + | display: block !important; | |
+ | } | ||
} | } | ||
− | + | #nav-toggle { | |
− | + | position: absolute; | |
+ | left: 18px; | ||
+ | top: 22px; | ||
+ | cursor: pointer; | ||
+ | padding: 10px 35px 16px 0px; | ||
} | } | ||
− | + | #nav-toggle span, | |
+ | span:before, | ||
+ | span:after { | ||
+ | cursor: pointer; | ||
+ | border-radius: 1px; | ||
+ | height: 5px; | ||
+ | width: 35px; | ||
+ | background: white; | ||
+ | position: absolute; | ||
+ | display: block; | ||
+ | content: ''; | ||
+ | transition: all 300ms ease-in-out; | ||
+ | } | ||
+ | #nav-toggle span:before { | ||
+ | top: -10px; | ||
+ | } | ||
+ | #nav-toggle span:after { | ||
+ | bottom: -10px; | ||
+ | } | ||
+ | #nav-toggle.active span { | ||
+ | background-color: transparent; | ||
+ | } | ||
+ | #nav-toggle:before, | ||
+ | #nav-toggle:after { | ||
+ | top: 0; | ||
+ | } | ||
+ | #nav-toggle:before { | ||
+ | transform: rotate(45deg); | ||
+ | } | ||
+ | #nav-toggle:after { | ||
+ | transform: rotate(-45deg); | ||
+ | } | ||
+ | |||
/********************************* CONTENT OF THE PAGE ********************************/ | /********************************* CONTENT OF THE PAGE ********************************/ | ||
Line 290: | Line 502: | ||
margin: auto; | margin: auto; | ||
padding: 20px; | padding: 20px; | ||
− | margin-top: | + | margin-top: 6%; |
− | font-size: | + | font-size: 70px; |
background-color:none; | background-color:none; | ||
text-align: center; | text-align: center; | ||
font-family: 'Varela Round', sans-serif !important; | font-family: 'Varela Round', sans-serif !important; | ||
− | + | color:#24305E; | |
overflow: visible; | overflow: visible; | ||
} | } | ||
Line 312: | Line 524: | ||
} | } | ||
h3{ | h3{ | ||
+ | font-weight: bold; | ||
text-align: center; | text-align: center; | ||
− | font-size: | + | font-size: 35px; |
margin:3% 2% 2% 2%; | margin:3% 2% 2% 2%; | ||
font-family: 'Varela Round', sans-serif; | font-family: 'Varela Round', sans-serif; | ||
Line 321: | Line 534: | ||
h4{ | h4{ | ||
+ | |||
font-size: 30px; | font-size: 30px; | ||
font-family: 'Varela Round', sans-serif; | font-family: 'Varela Round', sans-serif; | ||
− | + | color:#24305E; | |
overflow: visible; | overflow: visible; | ||
Line 362: | Line 576: | ||
p2{ | p2{ | ||
width:30%; | width:30%; | ||
− | font-size: | + | font-size: 22px; |
− | line-height: | + | line-height: 24px; |
text-align: center; | text-align: center; | ||
background: none; | background: none; | ||
Line 382: | Line 596: | ||
</head> | </head> | ||
− | |||
− | |||
− | |||
+ | <body> | ||
+ | <section class="navigation"> | ||
+ | <div class="nav-container"> | ||
+ | <div class="logo"> | ||
+ | <a href="https://2018.igem.org/Team:Imperial_College"> <img class="pixcell" src="https://static.igem.org/mediawiki/2018/8/80/T--Imperial_College--pixcell.png"></a> | ||
+ | <a href="#"> <img class="iclogo " src="https://static.igem.org/mediawiki/2018/8/8b/T--Imperial_College--college.png"></a> | ||
+ | </div> | ||
+ | <nav> | ||
+ | <div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div> | ||
+ | <div class="menu"> | ||
+ | <ul class="nav-list"> | ||
+ | <li class="nav-item dropdown"> | ||
+ | <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> | ||
+ | PROJECT<i class="fa fa-caret-down" aria-hidden="true"></i> | ||
+ | </a> | ||
+ | |||
+ | <ul class="dropdown-menu"> | ||
+ | <li><a href="https://2018.igem.org/Team:Imperial_College/Project">DESCRIPTION</a> | ||
+ | <li><a href="https://2018.igem.org/Team:Imperial_College/Mechanisms">DESIGN</a> | ||
+ | <li><a href="https://2018.igem.org/Team:Imperial_College/Applied_Design">APPLICATIONS</a> | ||
+ | <li><a href="https://2018.igem.org/Team:Imperial_College/Achievements">ACHIEVEMENTS</a> | ||
+ | <li><a href="https://2018.igem.org/Team:Imperial_College/Future">FUTURE WORK</a> | ||
+ | <li><a href="https://2018.igem.org/Team:Imperial_College/Brainstorming">BRAINSTORM</a> | ||
+ | |||
− | < | + | </li> |
− | < | + | </ul> |
− | < | + | </li> |
+ | <li> | ||
− | < | + | <li class="nav-item dropdown"> |
− | + | <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> | |
− | < | + | DRY LAB |
− | < | + | <i class="fa fa-caret-down" aria-hidden="true"></i> |
− | <a href=" | + | </a> |
− | + | ||
− | + | <ul class="dropdown-menu"> | |
− | + | <li><a href="https://2018.igem.org/Team:Imperial_College/Dryover">OVERVIEW</a> | |
− | + | <li><a href=" https://2018.igem.org/Team:Imperial_College/Model">MODELLING</a> | |
− | + | <li><a href="https://2018.igem.org/Team:Imperial_College/Hardware">HARDWARE</a> | |
− | + | <li><a href="https://2018.igem.org/Team:Imperial_College/Software">SOFTWARE</a> | |
− | + | </ul> | |
− | + | <li> | |
− | + | <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> | |
− | + | WET LAB | |
− | + | <i class="fa fa-caret-down" aria-hidden="true"></i> | |
− | + | </a> | |
− | + | <ul class="dropdown-menu"> | |
− | + | <li><a href="https://2018.igem.org/Team:Imperial_College/Wetover">OVERVIEW</a> | |
+ | <li><a href=" https://2018.igem.org/Team:Imperial_College/Demonstrate">RESULTS</a></li> | ||
+ | <li><a href="https://2018.igem.org/Team:Imperial_College/Experiments">METHODS</a></li> | ||
+ | <li><a href="https://2018.igem.org/Team:Imperial_College/Protocols">REFERENCES</a></li> | ||
+ | <li><a href="https://2018.igem.org/Team:Imperial_College/Parts">PARTS</a></li> | ||
+ | <li><a href="https://2018.igem.org/Team:Imperial_College/Measurement">BASIC</a></li> | ||
+ | <li><a href="https://2018.igem.org/Team:Imperial_College/Supplementary">SUPPLEMENTARY</a></li> | ||
− | + | </li> | |
− | + | </ul> | |
− | + | </li> | |
− | + | <li> | |
− | + | <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> | |
− | + | HUMAN PRACTICES | |
− | + | <i class="fa fa-caret-down" aria-hidden="true"></i> | |
− | + | </a> | |
− | + | <ul class="dropdown-menu"> | |
− | + | <li><a href="https://2018.igem.org/Team:Imperial_College/Human_Practices">OVERVIEW</a></li> | |
− | + | <li><a href="https://2018.igem.org/Team:Imperial_College/Communication">COMMUNICATION</a></li> | |
− | + | <li><a href="https://2018.igem.org/Team:Imperial_College/IHP">INTEGRATED HP</a></li> | |
− | + | <li><a href="https://2018.igem.org/Team:Imperial_College/Public_Engagement">OUTREACH</a></li> | |
− | + | <li><a href="https://2018.igem.org/Team:Imperial_College/Collaborations">COLLABORATIONS</a></li> | |
− | + | </ul> | |
− | + | </li> | |
− | + | <li> | |
− | + | <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> | |
− | + | PEOPLE | |
− | + | <i class="fa fa-caret-down" aria-hidden="true"></i> | |
− | + | </a> | |
− | + | <ul class="dropdown-menu"> | |
− | + | <li><a href="https://2018.igem.org/Team:Imperial_College/Team">TEAM</a></li> | |
− | + | <li><a href="https://2018.igem.org/Team:Imperial_College/Attributions">ATTRIBUTIONS</a></li> | |
− | + | <li><a href="https://2018.igem.org/Team:Imperial_College/Sponsors">SPONSORS</a></li> | |
− | + | </ul> | |
− | + | </li> | |
− | + | <li> | |
− | + | <a id="navbarDropdown" href="https://2018.igem.org/Team:Imperial_College/Judges">FOR JUDGES</a> | |
− | + | </li> | |
− | + | <li> | |
− | + | <a id="navbarDropdown" href="https://2018.igem.org/Team:Imperial_College/Journal">JOURNAL</a> | |
− | + | </li> | |
− | + | </ul> | |
− | + | </div> | |
− | + | </nav> | |
− | + | </div> | |
− | + | </section> | |
− | + | ||
− | + | ||
</body> | </body> | ||
+ | |||
+ | |||
<!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------> | <!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------> | ||
<!--- Content of the page ---> | <!--- Content of the page ---> | ||
<!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------> | <!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------> |
Latest revision as of 03:49, 18 October 2018