|
|
Line 1: |
Line 1: |
− | <html> | + | <head> |
| | | |
− | <style> | + | <meta charset="utf-8"> |
− | #sideMenu, #top_title {display:none;}
| + | <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
− | #content { padding:0px; width:1000px; margin-top:-7px; margin-left:0px;}
| + | <meta name="viewport" content="width=device-width, initial-scale=1"> |
− | body {background-color:white; }
| + | <meta name="description" content=""> |
− | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
| + | <meta name="author" content=""> |
− | #contentSub, #footer-box, #catlinks, #search-controls,
| + | |
− | #p-logo, .printfooter, .firstHeading, .visualClear {
| + | |
− | display: none;
| + | |
− | }
| + | |
| | | |
− | #top-section {
| + | <title>Landing Page - Start Bootstrap Theme</title> |
− | border: 0 none;
| + | |
− | height: 14px;
| + | |
− | z-index: 100;
| + | |
− | top: 0;
| + | |
− | position: fixed;
| + | |
− | width: 975px;
| + | |
− | left: 50%;
| + | |
− | margin-left: -487px;
| + | |
− | }
| + | |
− |
| + | |
− | #globalWrapper, #content {
| + | |
− | width: 100%;
| + | |
− | height: 100%;
| + | |
− | border: 0px;
| + | |
− | background-color: transparent;
| + | |
− | margin: 0px;
| + | |
− | padding: 0px;
| + | |
− | font-size: 100%;
| + | |
− | }
| + | |
− |
| + | |
− | html, body, .wrapper {
| + | |
− | width: 100%;
| + | |
− | height: 100%;
| + | |
− | background-color: transparent;
| + | |
− | }
| + | |
− | .top-pad{
| + | |
− | padding-top: 50px;
| + | |
− | }
| + | |
− | .sidebar-nav {
| + | |
− | padding: 9px 0;
| + | |
− | }
| + | |
| | | |
− | .dropdown-menu .sub-menu {
| + | <!-- Bootstrap Core CSS --> |
− | left: 100%;
| + | <link href="css/bootstrap.min.css" rel="stylesheet"> |
− | position: absolute;
| + | |
− | top: 0;
| + | |
− | visibility: hidden;
| + | |
− | margin-top: -1px;
| + | |
− | background-color:#7E4232; | + | |
− | }
| + | |
| | | |
− | .dropdown-menu li:hover .sub-menu {
| + | <!-- Custom CSS --> |
− | visibility: visible; | + | <link href="css/landing-page.css" rel="stylesheet"> |
− | }
| + | |
| | | |
− | .dropdown:hover .dropdown-menu { | + | <!-- Custom Fonts --> |
− | display: block; | + | <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> |
− | }
| + | <link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css"> |
| | | |
− | .nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
| + | <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> |
− | margin-top: 0; | + | <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> |
− | }
| + | <!--[if lt IE 9]> |
| + | <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> |
| + | <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> |
| + | <![endif]--> |
| | | |
− |
| |
− | /********************************* CONTENT OF THE PAGE ********************************/
| |
− |
| |
− | /* Wrapper for the content */
| |
− | .content_wrapper {
| |
− | width: 85%;
| |
− | margin-left:150px;
| |
− | padding:10px 0px;
| |
− | float:left;
| |
− | background-color:white;
| |
− | }
| |
− |
| |
− | /*LAYOUT */
| |
− | .column {
| |
− | padding: 10px 25px;
| |
− | float:left;
| |
− | background-color:white;
| |
− | }
| |
− |
| |
− | .full_size {
| |
− | width:100%;
| |
− | }
| |
− |
| |
− | .full_size img {
| |
− | padding: 10px 15px;
| |
− | width:96.5%;
| |
− | }
| |
− |
| |
− | .half_size {
| |
− | width: 50%;
| |
− | }
| |
− | .half_size img {
| |
− | padding: 10px 15px;
| |
− | width: 50%;
| |
− | }
| |
− | .quater_size img {
| |
− | padding: 10px 15px;
| |
− | width: 25%;
| |
− | }
| |
− |
| |
− |
| |
− | .clear {
| |
− | clear:both;
| |
− | }
| |
− |
| |
− | .highlight {
| |
− | width: 90%;
| |
− | margin: auto;
| |
− | padding: 15px 5px;
| |
− | background-color: #000000;
| |
− | }
| |
− |
| |
− | .judges-will-not-evaluate {
| |
− | border: 4px solid #72c9b6;
| |
− | display: block;
| |
− | margin: 5px 15px;
| |
− | width: 95%;
| |
− | font-weight:bold;
| |
− | }
| |
− |
| |
− |
| |
− | /*STYLING */
| |
− |
| |
− | /* styling for the titles */
| |
− | .content_wrapper h1, .content_wrapper h2 {
| |
− | padding:5px 15px;
| |
− | border-bottom:0px;
| |
− | color:#003E74;
| |
− |
| |
− | }
| |
− | .content_wrapper h3, .content_wrapper h4, .content_wrapper h5, .content_wrapper h6 {
| |
− | padding:5px 15px;
| |
− | border-bottom:0px;
| |
− | color: #000000;
| |
− | }
| |
− |
| |
− |
| |
− | /* font and text */
| |
− | .content_wrapper p {
| |
− | padding:0px 15px;
| |
− | font-size: 13px;
| |
− | font-family:Arial, Helvetica, sans-serif;
| |
− | }
| |
− |
| |
− | /* Links */
| |
− | .content_wrapper a {
| |
− | font-weight: bold;
| |
− | text-decoration: underline;
| |
− | text-decoration-color:#72c9b6;
| |
− | color: #72c9b6;
| |
− | -webkit-transition: all 0.4s ease;
| |
− | -moz-transition: all 0.4s ease;
| |
− | -ms-transition: all 0.4s ease;
| |
− | -o-transition: all 0.4s ease;
| |
− | transition: all 0.4s ease;
| |
− | }
| |
− |
| |
− | /* hover for the links */
| |
− | .content_wrapper a:hover {
| |
− | text-decoration:none;
| |
− | color:#000000;
| |
− | }
| |
− |
| |
− | /* non numbered lists */
| |
− | .content_wrapper ul {
| |
− | padding:0px 20px;
| |
− | font-size: 13px;
| |
− | font-family:Arial, Helvetica, sans-serif;
| |
− | }
| |
− |
| |
− | /* numbered lists */
| |
− | .content_wrapper ol {
| |
− | padding:0px;
| |
− | font-size: 13px;
| |
− | font-family:Arial, Helvetica, sans-serif;
| |
− | }
| |
− |
| |
− | /* Table */
| |
− | .content_wrapper table {
| |
− | width: 97%;
| |
− | margin:15px 10px;
| |
− | border: 1px solid #d3d3d3;
| |
− | border-collapse: collapse;
| |
− | }
| |
− |
| |
− | /* table cells */
| |
− | .content_wrapper td {
| |
− | padding: 10px;
| |
− | vertical-align: text-top;
| |
− | border: 1px solid #d3d3d3;
| |
− | border-collapse: collapse;
| |
− | }
| |
− |
| |
− | /* table headers */
| |
− | .content_wrapper th {
| |
− | padding: 10px;
| |
− | vertical-align: text-top;
| |
− | border: 1px solid #d3d3d3;
| |
− | border-collapse: collapse;
| |
− | background-color:#f2f2f2;
| |
− | }
| |
− |
| |
− | /* Button class */
| |
− | .button_click {
| |
− | margin: 10px auto;
| |
− | padding: 15px; width:12%;
| |
− | text-align:center;
| |
− | font-weight:bold;
| |
− | background-color: #72c9b6;
| |
− | cursor:pointer;
| |
− | -webkit-transition: all 0.4s ease;
| |
− | -moz-transition: all 0.4s ease;
| |
− | -ms-transition: all 0.4s ease;
| |
− | -o-transition: all 0.4s ease;
| |
− | transition: all 0.4s ease;
| |
− | }
| |
− |
| |
− | /* button class on hover */
| |
− | .button_click:hover {
| |
− | background-color:#000000;
| |
− | color:#72c9b6;
| |
− | }
| |
− | .navbar-header h4, .dropdown-toggle h4{
| |
− | padding:5px 15px;
| |
− | border-bottom:0px;
| |
− | color: #FFFFFF;
| |
− | }
| |
− | .navbar-light .dropdown-toggle:hover {
| |
− | background-color:#E40043;
| |
− | }
| |
− | .dropdown-toggle h4:hover{
| |
− | color:#7E4232;
| |
− | }
| |
− |
| |
− |
| |
− |
| |
− | /********************************* RESPONSIVE STYLING ********************************/
| |
− |
| |
− | /* IF THE SCREEN IS LESS THAN 1000PX */
| |
− |
| |
− | @media only screen and (max-width: 1000px) {
| |
− |
| |
− | #content {width:100%; }
| |
− | .menu_wrapper {width:15%;}
| |
− | .content_wrapper {margin-left: 15%;}
| |
− | .menu_item {display:block;}
| |
− | .icon {display:none;}
| |
− | .highlight {padding:10px 0px;}
| |
− | }
| |
− |
| |
− |
| |
− | /* IF THE SCREEN IS LESS THAN 680PX */
| |
− |
| |
− | @media only screen and (max-width: 680px) {
| |
− | .collapsable_menu_control { display:block;}
| |
− | .menu_item {display:none;}
| |
− | .menu_wrapper { width:100%; height: 15%; position:relative;}
| |
− | .content_wrapper {width:100%; margin-left:0px;}
| |
− | .column.half_size {width:100%; }
| |
− | .column img { width: 100%; padding: 5px 0px;}
| |
− | .icon {display:block;}
| |
− | .highlight {padding:15px 5px;}
| |
− | }
| |
− |
| |
− |
| |
− | </style>
| |
− |
| |
− | <head>
| |
− |
| |
− | <link rel="stylesheet" href="https://2016.igem.org/Team:Imperial_College/Resources/CSS:Bootstrap?action=raw&ctype=text/css">
| |
− | <meta name="viewport" content="width=device-width, initial-scale=1">
| |
| </head> | | </head> |
| | | |
| + | <body> |
| | | |
− | <nav class="navbar navbar-light navbar-fixed-top" style="background-color: #E40043;"> | + | <!-- Navigation --> |
− | <div class="container-fluid">
| + | <nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation"> |
− | <ul class="nav nav-pills">
| + | <div class="container topnav"> |
− | <ul class="nav navbar-nav navbar-left">
| + | <!-- Brand and toggle get grouped for better mobile display --> |
− | <li class="dropdown">
| + | <div class="navbar-header"> |
− | <a href="https://2016.igem.org/Team:Imperial_College" data-toggle="dropdown" class="dropdown-toggle"><h4> Imperial College </h4></a></li></ul>
| + | <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> |
− | <ul class="nav navbar-nav navbar-right">
| + | <span class="sr-only">Toggle navigation</span> |
− | <li class="dropdown">
| + | <span class="icon-bar"></span> |
− | <a href="#" data-toggle="dropdown" class="dropdown-toggle"><h4>Project <b class="caret"></b></h4></a>
| + | <span class="icon-bar"></span> |
− | <ul class="dropdown-menu" id="menu1">
| + | <span class="icon-bar"></span> |
− | <li><a href="https://2016.igem.org/Team:Imperial_College/Description">Description</a></li>
| + | </button> |
− | <li><a href="https://2016.igem.org/Team:Imperial_College/Design">Design</a></li>
| + | <a class="navbar-brand topnav" href="#">iGEM 2016</a> |
− | <li><a href="https://2016.igem.org/Team:Imperial_College/Experiments">Experiments</a></li>
| + | </div> |
− | <li><a href="https://2016.igem.org/Team:Imperial_College/Proof">Proof</a></li>
| + | <!-- Collect the nav links, forms, and other content for toggling --> |
− | <li><a href="https://2016.igem.org/Team:Imperial_College/Demonstrate">Demonstrate</a></li>
| + | <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> |
− | <li><a href="https://2016.igem.org/Team:Imperial_College/Results">Results</a></li>
| + | <ul class="nav navbar-nav navbar-right"> |
− | </ul>
| + | <li> |
− | </li>
| + | <a href="#about">Project</a> |
− | | + | </li> |
− | <li class="dropdown">
| + | <li> |
− | <a href="#" data-toggle="dropdown" class="dropdown-toggle"><h4>Parts<b class="caret"></b></h4></a>
| + | <a href="#services">Parts</a> |
− | <ul class="dropdown-menu" id="menu1">
| + | </li> |
− | <li><a href="https://2016.igem.org/Team:Imperial_College/Parts">Parts</a></li>
| + | <li> |
− | <li><a href="https://2016.igem.org/Team:Imperial_College/Basic_Part">Basic Parts</a></li>
| + | <a href="#contact">Notebook</a> |
− | <li><a href="https://2016.igem.org/Team:Imperial_College/Composite_Part">Composite Parts</a></li>
| + | </li> |
− | <li><a href="https://2016.igem.org/Team:Imperial_College/Part_Collection">Part Collection</a></li>
| + | <li> |
− | </ul>
| + | <a href="#contact">Human Practices</a> |
− | </li>
| + | </li> |
− | | + | <li> |
− | <li class="dropdown">
| + | <a href="#contact">Team</a> |
− | <a href="#" data-toggle="dropdown" class="dropdown-toggle"><h4>Notebook<b class="caret"></b></h4></a>
| + | </li> |
− | <ul class="dropdown-menu" id="menu1">
| + | </ul> |
− | <li><a href="https://2016.igem.org/Team:Imperial_College/BrainStorm">Brainstorm</a></li>
| + | </div> |
− | <li><a href="https://2016.igem.org/Team:Imperial_College/LabBook">Lab book</a></li>
| + | <!-- /.navbar-collapse --> |
− | <li><a href="https://2016.igem.org/Team:Imperial_College/Protocols">Protocols</a></li>
| + | </div> |
− | <li><a href="https://2016.igem.org/Team:Imperial_College/Safety">Safety</a></li>
| + | <!-- /.container --> |
− | </ul>
| + | </nav> |
− | </li>
| + | |
− | | + | |
− | <li class="dropdown">
| + | |
− | <a href="#" data-toggle="dropdown" class="dropdown-toggle"><h4>Human Practices<b class="caret"></b></h4></a>
| + | |
− | <ul class="dropdown-menu" id="menu1">
| + | |
− | <li><a href="https://2016.igem.org/Team:Imperial_College/Human_Practices">Human Practices</a></li>
| + | |
− | <li><a href="https://2016.igem.org/Team:Imperial_College/HP/Silver">Silver</a></li>
| + | |
− | <li><a href="https://2016.igem.org/Team:Imperial_College/HP/Gold">Gold</a></li>
| + | |
− | <li><a href="https://2016.igem.org/Team:Imperial_College/Integrated_Practices">Integrated Practices</a></li>
| + | |
− | <li><a href="https://2016.igem.org/Team:Imperial_College/Engagement">Engagement</a></li>
| + | |
− | </ul>
| + | |
− | </li>
| + | |
− | | + | |
− | <li class="dropdown">
| + | |
− | <a href="#" data-toggle="dropdown" class="dropdown-toggle"><h4>Team<b class="caret"></b></h4></a>
| + | |
− | <ul class="dropdown-menu" id="menu1">
| + | |
− | <li><a href="https://2016.igem.org/Team:Imperial_College/Team">Students</a></li>
| + | |
− | <li><a href="https://2016.igem.org/Team:Imperial_College/PI">Advisors</a></li>
| + | |
− | <li><a href="https://2016.igem.org/Team:Imperial_College/Attributions">Attributions</a></li>
| + | |
− | <li><a href="https://2016.igem.org/Team:Imperial_College/Sponsors">Sponsors</a></li>
| + | |
− | </ul>
| + | |
− | </li>
| + | |
− | </ul>
| + | |
− | </ul>
| + | |
− | </div>
| + | |
− | </nav> | + | |
| | | |
− | </html> | + | </body> |