(39 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
<head> | <head> | ||
− | <!--/** | + | |
+ | <!--/** Load Libraries and Fonts **/--> | ||
<link href="https://2016.igem.org/Template:Edinburgh_OG/Bootstrap?action=raw&ctype=text/css" rel="stylesheet" type="text/css"> | <link href="https://2016.igem.org/Template:Edinburgh_OG/Bootstrap?action=raw&ctype=text/css" rel="stylesheet" type="text/css"> | ||
− | + | <!-- <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" >--> | |
+ | <link href="https://2016.igem.org/Team:Edinburgh_OG/lib/font-awesome-4_6_3/css/font-awesome_min_css?action=raw&ctype=text/css" rel="stylesheet" >--> | ||
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css"> | <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css"> | ||
<link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'> | <link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'> | ||
<link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'> | <link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'> | ||
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'> | <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'> | ||
− | + | ||
<style> | <style> | ||
/********************************* DEFAULT WIKI SETTINGS ********************************/ | /********************************* DEFAULT WIKI SETTINGS ********************************/ | ||
Line 74: | Line 76: | ||
background: white; | background: white; | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
/* Dropdown Menu Functionality */ | /* Dropdown Menu Functionality */ | ||
Line 97: | Line 95: | ||
display: none; | display: none; | ||
position: absolute; | position: absolute; | ||
− | background-color: rgba(249,249,249,0. | + | background-color: rgba(249,249,249,0.6); |
min-width: 160px; | min-width: 160px; | ||
} | } | ||
Line 124: | Line 122: | ||
} | } | ||
− | + | /**********************************Timeline********************************/ | |
+ | } | ||
+ | .timeline { | ||
+ | list-style: none; | ||
+ | padding: 0; | ||
+ | position: relative; | ||
+ | } | ||
+ | .timeline:before { | ||
+ | top: 0; | ||
+ | bottom: 0; | ||
+ | position: absolute; | ||
+ | content: ""; | ||
+ | width: 2px; | ||
+ | background-color: #f1f1f1; | ||
+ | left: 40px; | ||
+ | margin-left: -1.5px; | ||
+ | } | ||
+ | .timeline > li { | ||
+ | margin-bottom: 50px; | ||
+ | position: relative; | ||
+ | min-height: 50px; | ||
+ | } | ||
+ | .timeline > li:before, | ||
+ | .timeline > li:after { | ||
+ | content: " "; | ||
+ | display: table; | ||
+ | } | ||
+ | .timeline > li:after { | ||
+ | clear: both; | ||
+ | } | ||
+ | .timeline > li .timeline-panel { | ||
+ | width: 100%; | ||
+ | float: right; | ||
+ | padding: 0 20px 0 100px; | ||
+ | position: relative; | ||
+ | text-align: left; | ||
+ | } | ||
+ | .timeline > li .timeline-panel:before { | ||
+ | border-left-width: 0; | ||
+ | border-right-width: 15px; | ||
+ | left: -15px; | ||
+ | right: auto; | ||
+ | } | ||
+ | .timeline > li .timeline-panel:after { | ||
+ | border-left-width: 0; | ||
+ | border-right-width: 14px; | ||
+ | left: -14px; | ||
+ | right: auto; | ||
+ | } | ||
+ | .timeline > li .timeline-image { | ||
+ | left: 0; | ||
+ | margin-left: 0; | ||
+ | width: 80px; | ||
+ | height: 80px; | ||
+ | position: absolute; | ||
+ | z-index: 100; | ||
+ | background-color: #fed136; | ||
+ | color: white; | ||
+ | border-radius: 100%; | ||
+ | border: 7px solid #f1f1f1; | ||
+ | text-align: center; | ||
+ | } | ||
+ | .timeline > li .timeline-image h4 { | ||
+ | font-size: 10px; | ||
+ | margin-top: 12px; | ||
+ | line-height: 14px; | ||
+ | } | ||
+ | .timeline > li.timeline-inverted > .timeline-panel { | ||
+ | float: right; | ||
+ | text-align: left; | ||
+ | padding: 0 20px 0 100px; | ||
+ | } | ||
+ | .timeline > li.timeline-inverted > .timeline-panel:before { | ||
+ | border-left-width: 0; | ||
+ | border-right-width: 15px; | ||
+ | left: -15px; | ||
+ | right: auto; | ||
+ | } | ||
+ | .timeline > li.timeline-inverted > .timeline-panel:after { | ||
+ | border-left-width: 0; | ||
+ | border-right-width: 14px; | ||
+ | left: -14px; | ||
+ | right: auto; | ||
+ | } | ||
+ | .timeline > li:last-child { | ||
+ | margin-bottom: 0; | ||
+ | } | ||
+ | .timeline .timeline-heading h4 { | ||
+ | margin-top: 0; | ||
+ | color: inherit; | ||
+ | } | ||
+ | .timeline .timeline-heading h4.subheading { | ||
+ | text-transform: none; | ||
+ | } | ||
+ | .timeline .timeline-body > p, | ||
+ | .timeline .timeline-body > ul { | ||
+ | margin-bottom: 0; | ||
+ | } | ||
+ | @media (min-width: 768px) { | ||
+ | .timeline:before { | ||
+ | left: 50%; | ||
+ | } | ||
+ | .timeline > li { | ||
+ | margin-bottom: 100px; | ||
+ | min-height: 100px; | ||
+ | } | ||
+ | .timeline > li .timeline-panel { | ||
+ | width: 41%; | ||
+ | float: left; | ||
+ | padding: 0 20px 20px 30px; | ||
+ | text-align: right; | ||
+ | } | ||
+ | .timeline > li .timeline-image { | ||
+ | width: 100px; | ||
+ | height: 100px; | ||
+ | left: 50%; | ||
+ | margin-left: -50px; | ||
+ | } | ||
+ | .timeline > li .timeline-image h4 { | ||
+ | font-size: 13px; | ||
+ | margin-top: 16px; | ||
+ | line-height: 18px; | ||
+ | } | ||
+ | .timeline > li.timeline-inverted > .timeline-panel { | ||
+ | float: right; | ||
+ | text-align: left; | ||
+ | padding: 0 30px 20px 20px; | ||
+ | } | ||
+ | } | ||
+ | @media (min-width: 992px) { | ||
+ | .timeline > li { | ||
+ | min-height: 150px; | ||
+ | } | ||
+ | .timeline > li .timeline-panel { | ||
+ | padding: 0 20px 20px; | ||
+ | } | ||
+ | .timeline > li .timeline-image { | ||
+ | width: 150px; | ||
+ | height: 150px; | ||
+ | margin-left: -75px; | ||
+ | } | ||
+ | .timeline > li .timeline-image h4 { | ||
+ | font-size: 18px; | ||
+ | margin-top: 30px; | ||
+ | line-height: 26px; | ||
+ | } | ||
+ | .timeline > li.timeline-inverted > .timeline-panel { | ||
+ | padding: 0 20px 20px; | ||
+ | } | ||
+ | } | ||
+ | @media (min-width: 1200px) { | ||
+ | .timeline > li { | ||
+ | min-height: 170px; | ||
+ | } | ||
+ | .timeline > li .timeline-panel { | ||
+ | padding: 0 20px 20px 100px; | ||
+ | } | ||
+ | .timeline > li .timeline-image { | ||
+ | width: 170px; | ||
+ | height: 170px; | ||
+ | margin-left: -85px; | ||
+ | } | ||
+ | .timeline > li .timeline-image h4 { | ||
+ | margin-top: 40px; | ||
+ | } | ||
+ | .timeline > li.timeline-inverted > .timeline-panel { | ||
+ | padding: 0 100px 20px 20px; | ||
+ | } | ||
+ | } | ||
/********************************* Header ********************************/ | /********************************* Header ********************************/ | ||
.jumbotron { | .jumbotron { | ||
Line 146: | Line 312: | ||
#header-background { | #header-background { | ||
− | background-image: url('https:// | + | background-image: url('https://static.igem.org/mediawiki/2016/1/13/T--Edinburgh_OG--Matin_Background_Big.png'); |
height: 800px; | height: 800px; | ||
background-size: cover; | background-size: cover; | ||
Line 160: | Line 326: | ||
/********************************* pORTFOLIO ********************************/ | /********************************* pORTFOLIO ********************************/ | ||
− | .portfolio- | + | #portfolio .portfolio-item { |
− | + | margin: 0 0 15px; | |
+ | right: 0; | ||
+ | } | ||
+ | #portfolio .portfolio-item .portfolio-link { | ||
display: block; | display: block; | ||
− | max-width: | + | position: relative; |
+ | max-width: 400px; | ||
margin: 0 auto; | margin: 0 auto; | ||
} | } | ||
− | .portfolio- | + | #portfolio .portfolio-item .portfolio-link .portfolio-hover { |
− | + | background: rgba(254, 209, 54, 0.9); | |
− | + | ||
− | + | ||
− | background: rgba( | + | |
position: absolute; | position: absolute; | ||
− | |||
− | |||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
− | + | opacity: 0; | |
− | - | + | transition: all ease 0.5s; |
− | transition: all 0. | + | -webkit-transition: all ease 0.5s; |
+ | -moz-transition: all ease 0.5s; | ||
} | } | ||
− | .portfolio- | + | #portfolio .portfolio-item .portfolio-link .portfolio-hover:hover { |
+ | opacity: 1; | ||
+ | } | ||
+ | #portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content { | ||
+ | position: absolute; | ||
width: 100%; | width: 100%; | ||
+ | height: 20px; | ||
+ | font-size: 20px; | ||
text-align: center; | text-align: center; | ||
− | |||
top: 50%; | top: 50%; | ||
− | + | margin-top: -12px; | |
+ | color: white; | ||
} | } | ||
− | + | #portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i { | |
− | .portfolio- | + | margin-top: -12px; |
− | + | ||
− | + | ||
} | } | ||
− | .portfolio- | + | #portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3, |
− | + | #portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h4 { | |
− | + | margin: 0; | |
− | + | ||
} | } | ||
− | + | #portfolio .portfolio-item .portfolio-caption { | |
− | + | max-width: 400px; | |
+ | margin: 0 auto; | ||
+ | background-color: white; | ||
+ | text-align: center; | ||
+ | padding: 25px; | ||
} | } | ||
− | .portfolio- | + | #portfolio .portfolio-item .portfolio-caption h4 { |
− | + | text-transform: none; | |
+ | margin: 0; | ||
} | } | ||
− | .portfolio- | + | #portfolio .portfolio-item .portfolio-caption p { |
− | + | font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif; | |
+ | font-style: italic; | ||
+ | font-size: 16px; | ||
+ | margin: 0; | ||
} | } | ||
+ | #portfolio * { | ||
+ | z-index: 2; | ||
+ | } | ||
+ | @media (min-width: 767px) { | ||
+ | #portfolio .portfolio-item { | ||
+ | margin: 0 0 30px; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | .portfolio-modal .modal-dialog { | ||
+ | margin: 0; | ||
+ | height: 100%; | ||
+ | width: auto; | ||
+ | } | ||
+ | .portfolio-modal .modal-content { | ||
+ | border-radius: 0; | ||
+ | background-clip: border-box; | ||
+ | -webkit-box-shadow: none; | ||
+ | box-shadow: none; | ||
+ | border: none; | ||
+ | min-height: 100%; | ||
+ | padding: 100px 0; | ||
+ | text-align: center; | ||
+ | } | ||
+ | .portfolio-modal .modal-content h2 { | ||
+ | margin-bottom: 15px; | ||
+ | font-size: 3em; | ||
+ | } | ||
+ | .portfolio-modal .modal-content p { | ||
+ | margin-bottom: 30px; | ||
+ | } | ||
+ | .portfolio-modal .modal-content p.item-intro { | ||
+ | margin: 20px 0 30px; | ||
+ | font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif; | ||
+ | font-style: italic; | ||
+ | font-size: 16px; | ||
+ | } | ||
+ | .portfolio-modal .modal-content ul.list-inline { | ||
+ | margin-bottom: 30px; | ||
+ | margin-top: 0; | ||
+ | } | ||
+ | .portfolio-modal .modal-content img { | ||
+ | margin-bottom: 30px; | ||
+ | } | ||
+ | .portfolio-modal .close-modal { | ||
+ | position: absolute; | ||
+ | width: 75px; | ||
+ | height: 75px; | ||
+ | background-color: transparent; | ||
+ | top: 25px; | ||
+ | right: 25px; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | .portfolio-modal .close-modal:hover { | ||
+ | opacity: 0.3; | ||
+ | } | ||
+ | .portfolio-modal .close-modal .lr { | ||
+ | height: 75px; | ||
+ | width: 1px; | ||
+ | margin-left: 35px; | ||
+ | background-color: #222222; | ||
+ | transform: rotate(45deg); | ||
+ | -ms-transform: rotate(45deg); | ||
+ | /* IE 9 */ | ||
+ | -webkit-transform: rotate(45deg); | ||
+ | /* Safari and Chrome */ | ||
+ | z-index: 1051; | ||
+ | } | ||
+ | .portfolio-modal .close-modal .lr .rl { | ||
+ | height: 75px; | ||
+ | width: 1px; | ||
+ | background-color: #222222; | ||
+ | transform: rotate(90deg); | ||
+ | -ms-transform: rotate(90deg); | ||
+ | /* IE 9 */ | ||
+ | -webkit-transform: rotate(90deg); | ||
+ | /* Safari and Chrome */ | ||
+ | z-index: 1052; | ||
+ | } | ||
+ | .portfolio-modal .modal-backdrop { | ||
+ | opacity: 0; | ||
+ | display: none; | ||
+ | } | ||
+ | /** | ||
.no-padding { | .no-padding { | ||
padding: 0; | padding: 0; | ||
Line 222: | Line 483: | ||
div.polaroid { | div.polaroid { | ||
− | width: | + | width: 310px; |
height: 530px; | height: 530px; | ||
background-color: #c1e4ff; | background-color: #c1e4ff; | ||
Line 443: | Line 704: | ||
<body> | <body> | ||
− | |||
<header id="top" class="header"> | <header id="top" class="header"> | ||
<nav class="navbar navbar-default navbar-fixed-top"> | <nav class="navbar navbar-default navbar-fixed-top"> | ||
− | + | <div class="container-fluid paddedNav"> | |
<!-- Brand and toggle get grouped for better mobile display --> | <!-- Brand and toggle get grouped for better mobile display --> | ||
− | + | <div class="navbar-header"> | |
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> | <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> | ||
<span class="sr-only">Toggle navigation</span> | <span class="sr-only">Toggle navigation</span> | ||
Line 455: | Line 715: | ||
<span class="icon-bar"></span> | <span class="icon-bar"></span> | ||
</button> | </button> | ||
− | + | <a class="navbar-brand" href="https://2016.igem.org/Team:Edinburgh_OG"><img src="https://static.igem.org/mediawiki/2016/1/12/T--Edinburgh_OG--Matin_Logo_Small.png" height="80" width="95" style="display: inline-block; padding-right: 17px;"></a> | |
− | + | ||
</div> | </div> | ||
Line 466: | Line 725: | ||
<div class="dropdown-content"> | <div class="dropdown-content"> | ||
<a href="https://2016.igem.org/Team:Edinburgh_OG/Team">About Us</a> | <a href="https://2016.igem.org/Team:Edinburgh_OG/Team">About Us</a> | ||
− | <a href="https://2016.igem.org/Team:Edinburgh_OG/ | + | <a href="https://2016.igem.org/Team:Edinburgh_OG/Team#attributions">Attributions</a> |
− | <a href="https://2016.igem.org/Team:Edinburgh_OG/Collaborations"> | + | <a href="https://2016.igem.org/Team:Edinburgh_OG/Collaborations">Collaborations</a> |
</div> | </div> | ||
</li> | </li> | ||
Line 473: | Line 732: | ||
<a href="#" class="dropbtn">PROJECT</a> | <a href="#" class="dropbtn">PROJECT</a> | ||
<div class="dropdown-content"> | <div class="dropdown-content"> | ||
− | <a href="https://2016.igem.org/Team:Edinburgh_OG/Description"> | + | <a href="https://2016.igem.org/Team:Edinburgh_OG/Description">Description</a> |
− | <a href="https://2016.igem.org/Team:Edinburgh_OG/ | + | <a href="https://2016.igem.org/Team:Edinburgh_OG/Description#design">Design</a> |
<a href="https://2016.igem.org/Team:Edinburgh_OG/Experiments">Method</a> | <a href="https://2016.igem.org/Team:Edinburgh_OG/Experiments">Method</a> | ||
− | <a href="https://2016.igem.org/Team:Edinburgh_OG/Proof"> | + | <a href="https://2016.igem.org/Team:Edinburgh_OG/Proof">Proof of Concept</a> |
− | <a href="https://2016.igem.org/Team:Edinburgh_OG/Demonstrate">★ Demonstrate</a> | + | <!--<a href="https://2016.igem.org/Team:Edinburgh_OG/Demonstrate">★ Demonstrate</a>--> |
<a href="https://2016.igem.org/Team:Edinburgh_OG/Results">Results</a> | <a href="https://2016.igem.org/Team:Edinburgh_OG/Results">Results</a> | ||
</div> | </div> | ||
Line 491: | Line 750: | ||
</li> | </li> | ||
<li class="sliding-middle-out dropdown"> | <li class="sliding-middle-out dropdown"> | ||
− | <a href=" | + | <a href="https://2016.igem.org/Team:Edinburgh_OG/Parts" class="dropbtn">PARTS</a> |
− | <div class="dropdown-content"> | + | <!--<div class="dropdown-content"> |
<a href="https://2016.igem.org/Team:Edinburgh_OG/Parts">★Parts</a> | <a href="https://2016.igem.org/Team:Edinburgh_OG/Parts">★Parts</a> | ||
<a href="https://2016.igem.org/Team:Edinburgh_OG/Basic_Part">★ Basic Part</a> | <a href="https://2016.igem.org/Team:Edinburgh_OG/Basic_Part">★ Basic Part</a> | ||
<a href="https://2016.igem.org/Team:Edinburgh_OG/Composite_Part">★ Composite Part</a> | <a href="https://2016.igem.org/Team:Edinburgh_OG/Composite_Part">★ Composite Part</a> | ||
<a href="https://2016.igem.org/Team:Edinburgh_OG/Part_Collection">★ Part Collection</a> | <a href="https://2016.igem.org/Team:Edinburgh_OG/Part_Collection">★ Part Collection</a> | ||
− | </div> | + | </div>--> |
</li> | </li> | ||
<li class="sliding-middle-out dropdown"> | <li class="sliding-middle-out dropdown"> | ||
<a href="https://2016.igem.org/Team:Edinburgh_OG/Safety" class="dropbtn">SAFETY</a> | <a href="https://2016.igem.org/Team:Edinburgh_OG/Safety" class="dropbtn">SAFETY</a> | ||
− | |||
− | |||
− | |||
− | |||
</li> | </li> | ||
<li class="sliding-middle-out dropdown"> | <li class="sliding-middle-out dropdown"> | ||
Line 515: | Line 770: | ||
<a href="https://2016.igem.org/Team:Edinburgh_OG/HP/Gold">Gold</a> | <a href="https://2016.igem.org/Team:Edinburgh_OG/HP/Gold">Gold</a> | ||
<a href="https://2016.igem.org/Team:Edinburgh_OG/Integrated_Practices">Integrated Practices</a> | <a href="https://2016.igem.org/Team:Edinburgh_OG/Integrated_Practices">Integrated Practices</a> | ||
− | <a href="https://2016.igem.org/Team:Edinburgh_OG/Engagement">Engagement</a> | + | <!--<a href="https://2016.igem.org/Team:Edinburgh_OG/Engagement">Engagement</a>--> |
</div> | </div> | ||
</li> | </li> | ||
<li class="sliding-middle-out dropdown"> | <li class="sliding-middle-out dropdown"> | ||
− | <a href=" | + | <a href="https://2016.igem.org/Team:Edinburgh_OG/Awards" class="dropbtn">AWARDS</a> |
<!--<div class="dropdown-content"> | <!--<div class="dropdown-content"> | ||
<!--<a href="https://2016.igem.org/Team:Edinburgh_OG/Entrepreneurship"> ★ Entrepreneurship </a> | <!--<a href="https://2016.igem.org/Team:Edinburgh_OG/Entrepreneurship"> ★ Entrepreneurship </a> | ||
Line 534: | Line 789: | ||
</nav> | </nav> | ||
− | <div | + | <div id="header-background"></div> |
</body> | </body> | ||
+ | <!-- jQuery --> | ||
+ | <script type="text/javascript" src="https://2016.igem.org/Template:Edinburgh_OG/lib/jquery-1_12_4_min_js?action=raw&ctype=text/javascript"> | ||
+ | </script> | ||
+ | <!-- Bootstrap Core JavaScript --> | ||
+ | <script type="text/javascript" src="https://2016.igem.org/Template:Edinburgh_OG/lib/bootstrap-3_3_6-dist/js/bootstrap_min_js?action=raw&ctype=text/javascript"> | ||
+ | </script> | ||
<html> | <html> |
Latest revision as of 22:53, 19 October 2016
-->