|
|
Line 12: |
Line 12: |
| <!-- Theme CSS --> | | <!-- Theme CSS --> |
| <style> | | <style> |
− | a:link {
| + | |
− | color: black;
| + | /***************************************************** DEFAULT WIKI SETTINGS ****************************************************/ |
− | background-color: transparent;
| + | /* Clear the default wiki settings */ |
− | text-decoration: none;
| + | #home_logo, #sideMenu { display:none; } |
| + | #sideMenu, #top_title, .patrollink {display:none;} |
| + | #content { width:100%; padding:0px; margin-top:-7px; margin-left:0px;} |
| + | body {background-color:white; } |
| + | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; } |
| + | |
| + | |
| + | /***************************************************** CUSTOM WIKI SETTINGS ****************************************************/ |
| + | |
| + | body, |
| + | html { |
| + | width: 100%; |
| + | height: 100%; |
| } | | } |
| | | |
− | a:visited {
| + | body, |
− | color: black; | + | h1, |
− | background-color: transparent;
| + | h2, |
− | text-decoration: none; | + | h3, |
| + | h4, |
| + | h5, |
| + | h6 { |
| + | font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif; |
| + | font-weight: 700; |
| } | | } |
− | #bars_item {display: none; }
| |
− | #home_logo, #sideMenu { display:none; }
| |
− | #sideMenu, #top_title, .patrollink {display:none;}
| |
− | #HQ_page p {
| |
− | text-align: center;
| |
− | font-family: Tahoma, Geneva, sans-serif;
| |
− | font-size: 17px;
| |
− | }
| |
− | #page-top { height: 100% ; }
| |
− | .mw-content-ltr { height: 100%; }
| |
− | #bodyContent { height: 100%; }
| |
− | #HQ_page {
| |
− | height: 100%;
| |
− | }
| |
− | #HQ_page h1 {
| |
− | font-size: 100px;
| |
− | font-family: Tahoma, Geneva, sans-serif;
| |
− | }
| |
− | #content {
| |
− | width:100%;
| |
− | height: 100%;
| |
− | padding: 0px;
| |
− | margin-top:-30px;
| |
− | margin-left:0px;
| |
− | background-color: #7DB6A0;
| |
− | color: white;
| |
− | font-family: Tahoma, Geneva, sans-serif;
| |
− | }
| |
− | #globalWrapper{ height: 100%; }
| |
− | body { background-color: #7DB6A0; height: 100%; }
| |
− | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
| |
| | | |
− | #top_menu_14 {
| + | .topnav { |
− | height: 12px;
| + | font-size: 14px; |
− | color: white;
| + | min-height:50px; |
− | background: black;
| + | } |
− | } | + | |
− | #top_menu_under {
| + | |
− | height: 12px;
| + | |
− | background: black;
| + | |
− | }
| + | |
| | | |
− | #top_menu_inside {
| + | .lead { |
− | border-left: 0px;
| + | font-size: 18px; |
− | border-right: 0px;
| + | font-weight: 400; |
− | width: 100%;
| + | } |
− | }
| + | |
| | | |
− | li.has_submenu a {
| + | .intro-header { |
− | color: grey;
| + | padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */ |
− | }
| + | padding-bottom: 50px; |
− | html { | + | text-align: center; |
− | width: 100%;
| + | color: #f8f8f8; |
− | height: 100%;
| + | background: url(../img/intro-bg.jpg) no-repeat center center; |
− | }
| + | background-size: cover; |
− | h1,
| + | } |
− | h2,
| + | |
− | h3,
| + | |
− | h4,
| + | |
− | h5,
| + | |
− | h6 {
| + | |
− | margin: 0 0 35px;
| + | |
− | text-transform: uppercase;
| + | |
− | font-family: Tahoma, Geneva, sans-serif;
| + | |
− | font-weight: 700;
| + | |
− | letter-spacing: 1px;
| + | |
− | } | + | |
− | p {
| + | |
− | margin: 0 0 25px;
| + | |
− | font-size: 18px;
| + | |
− | line-height: 1.5;
| + | |
− | } | + | |
− | @media (min-width: 768px) {
| + | |
− | p {
| + | |
− | margin: 0 0 35px;
| + | |
− | font-size: 20px;
| + | |
− | line-height: 1.6;
| + | |
− | }
| + | |
− | } | + | |
− | a {
| + | |
− | color: #42DCA3;
| + | |
− | -webkit-transition: all 0.2s ease-in-out;
| + | |
− | -moz-transition: all 0.2s ease-in-out;
| + | |
− | transition: all 0.2s ease-in-out;
| + | |
− | } | + | |
− | a:hover,
| + | |
− | a:focus {
| + | |
− | text-decoration: none;
| + | |
− | color: #862F08;
| + | |
− | }
| + | |
− | .light {
| + | |
− | font-weight: 400;
| + | |
− | }
| + | |
− | .navbar-custom {
| + | |
− | margin-top:12px;
| + | |
− | margin-bottom: 0;
| + | |
− | border-bottom: 0px solid rgba(255, 255, 255, 0.3);
| + | |
− | text-transform: uppercase;
| + | |
− | font-family: Tahoma, Geneva, sans-serif;
| + | |
− | background-color: black;
| + | |
− | }
| + | |
− | .navbar-custom .navbar-toggle {
| + | |
− | color: black;
| + | |
− | background-color: rgba(255, 255, 255, 0.2);
| + | |
− | font-size: 12px;
| + | |
− | }
| + | |
− | .navbar-custom .navbar-toggle:focus,
| + | |
− | .navbar-custom .navbar-toggle:active {
| + | |
− | outline: none;
| + | |
− | }
| + | |
− | .navbar-custom .navbar-brand {
| + | |
− | font-weight: 700;
| + | |
− | }
| + | |
− | .navbar-custom .navbar-brand img {
| + | |
− | height: 40px;
| + | |
− | }
| + | |
− | .navbar-custom .navbar-brand:focus {
| + | |
− | outline: none;
| + | |
− | }
| + | |
− | .navbar-custom a {
| + | |
− | color: black;
| + | |
− | }
| + | |
− | .navbar-custom .nav li a {
| + | |
− | -webkit-transition: background 0.3s ease-in-out;
| + | |
− | -moz-transition: background 0.3s ease-in-out;
| + | |
− | transition: background 0.3s ease-in-out;
| + | |
− | }
| + | |
− | .navbar-custom .nav li a:hover {
| + | |
− | color: rgba(255, 255, 255, 0.8);
| + | |
− | outline: none;
| + | |
− | background-color: transparent;
| + | |
− | } | + | |
− | .navbar-custom .nav li a:focus,
| + | |
− | .navbar-custom .nav li a:active {
| + | |
− | outline: none;
| + | |
− | background-color: transparent;
| + | |
− | }
| + | |
− | .navbar-custom .nav li.active {
| + | |
− | outline: none;
| + | |
− | }
| + | |
− | .navbar-custom .nav li.active a {
| + | |
− | background-color: rgba(255, 255, 255, 0.3);
| + | |
− | }
| + | |
− | .navbar-custom .nav li.active a:hover {
| + | |
− | color: white;
| + | |
− | }
| + | |
| | | |
− | .navbar-custom {
| + | .intro-header2 { |
− | padding: 20px 0;
| + | padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */ |
− | border-bottom: none;
| + | padding-bottom: 50px; |
− | letter-spacing: 1px;
| + | text-align: center; |
− | background: transparent;
| + | color: #f8f8f8; |
− | -webkit-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
| + | background: url(../img/intro2-bg.jpg) no-repeat center center; |
− | -moz-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
| + | background-size: cover; |
− | transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
| + | |
− | }
| + | |
− | .navbar-custom .top-nav-collapse {
| + | |
− | padding: 1;
| + | |
− | background: green;
| + | |
− | border-bottom: 1px solid rgba(255, 255, 255, 0.3);
| + | |
− |
| + | |
| } | | } |
− | @media (min-width: 768px) {
| + | |
− | .myintro {
| + | .intro-header3 { |
− | height: 100%;
| + | padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */ |
− | padding: 0;
| + | padding-bottom: 50px; |
− | }
| + | text-align: center; |
− | .myintro .myintro-body .brand-heading {
| + | color: #f8f8f8; |
− | font-size: 100px;
| + | background: url(../img/intro3-bg.jpg) no-repeat center center; |
− | }
| + | background-size: cover; |
− | .myintro .myintro-body .myintro-text {
| + | } |
− | font-size: 26px;
| + | |
− | }
| + | .intro-header4 { |
− | }
| + | padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */ |
− | .btn-circle {
| + | padding-bottom: 50px; |
− | width: 70px;
| + | text-align: center; |
− | height: 70px;
| + | color: #f8f8f8; |
− | margin-top: 15px;
| + | background: url(../img/LKD.jpg) no-repeat center center; |
− | padding: 7px 16px;
| + | background-size: cover; |
− | border: 2px solid black;
| + | } |
− | border-radius: 100% !important;
| + | |
− | font-size: 40px;
| + | .intro-message { |
− | color: #862F08;
| + | position: relative; |
− | background: transparent;
| + | padding-top: 20%; |
− | -webkit-transition: background 0.3s ease-in-out;
| + | padding-bottom: 20%; |
− | -moz-transition: background 0.3s ease-in-out;
| + | } |
− | transition: background 0.3s ease-in-out;
| + | |
− | }
| + | .intro-message > h1 { |
− | #downarrow img {
| + | margin: 0; |
− | border: 2px solid #862F08;
| + | text-shadow: 2px 2px 3px rgba(0,0,0,0.6); |
− | padding: 10px 10px;
| + | font-size: 5em; |
− | border-radius: 100% !important;
| + | } |
− | height: 55px;
| + | |
− | display: block;
| + | .intro-divider { |
− | margin: auto;
| + | width: 400px; |
− | }
| + | border-top: 1px solid #f8f8f8; |
− | .btn-circle:hover,
| + | border-bottom: 1px solid rgba(0,0,0,0.2); |
− | .btn-circle:focus {
| + | } |
− | outline: none;
| + | |
− | color: white;
| + | .intro-message > h3 { |
− | background: rgba(255, 255, 255, 0.1);
| + | text-shadow: 2px 2px 3px rgba(0,0,0,0.6); |
− | } | + | } |
− | .btn-circle i.animated {
| + | |
− | -webkit-transition-property: -webkit-transform;
| + | @media(max-width:767px) { |
− | -webkit-transition-duration: 1s;
| + | .intro-message { |
− | -moz-transition-property: -moz-transform;
| + | padding-bottom: 15%; |
− | -moz-transition-duration: 1s;
| + | |
− | }
| + | |
− | .btn-circle:hover i.animated {
| + | |
− | -webkit-animation-name: pulse;
| + | |
− | -moz-animation-name: pulse;
| + | |
− | -webkit-animation-duration: 1.5s;
| + | |
− | -moz-animation-duration: 1.5s;
| + | |
− | -webkit-animation-iteration-count: infinite;
| + | |
− | -moz-animation-iteration-count: infinite;
| + | |
− | -webkit-animation-timing-function: linear;
| + | |
− | -moz-animation-timing-function: linear;
| + | |
− | } | + | |
− | @-webkit-keyframes pulse {
| + | |
− | 0% {
| + | |
− | -webkit-transform: scale(1);
| + | |
− | transform: scale(1);
| + | |
− | }
| + | |
− | 50% {
| + | |
− | -webkit-transform: scale(1.2);
| + | |
− | transform: scale(1.2);
| + | |
− | }
| + | |
− | 100% {
| + | |
− | -webkit-transform: scale(1);
| + | |
− | transform: scale(1);
| + | |
− | }
| + | |
− | }
| + | |
− | @-moz-keyframes pulse {
| + | |
− | 0% {
| + | |
− | -moz-transform: scale(1);
| + | |
− | transform: scale(1);
| + | |
− | }
| + | |
− | 50% {
| + | |
− | -moz-transform: scale(1.2);
| + | |
− | transform: scale(1.2);
| + | |
− | }
| + | |
− | 100% {
| + | |
− | -moz-transform: scale(1);
| + | |
− | transform: scale(1);
| + | |
− | }
| + | |
− | }
| + | |
− | .content-section { | + | |
− | padding-top: 250px;
| + | |
− | padding-bottom: 250px;
| + | |
− | height: auto;
| + | |
− | min-height: 100% !important;
| + | |
| } | | } |
| | | |
− | #map { | + | .intro-message > h1 { |
− | width: 100%;
| + | font-size: 3em; |
− | height: 200px;
| + | |
− | margin-top: 100px;
| + | |
| } | | } |
− | @media (min-width: 767px) {
| + | |
− | .content-section {
| + | ul.intro-social-buttons > li { |
− | height: auto;
| + | |
− | padding-top: 250px;
| + | |
− | padding-bottom: 250px;
| + | |
− | min-height: 100% !mportant;
| + | |
− | }
| + | |
− | } | + | |
− | .btn {
| + | |
− | text-transform: uppercase;
| + | |
− | font-family: Tahoma, Geneva, sans-serif;
| + | |
− | font-weight: 400;
| + | |
− | -webkit-transition: all 0.3s ease-in-out;
| + | |
− | -moz-transition: all 0.3s ease-in-out;
| + | |
− | transition: all 0.3s ease-in-out;
| + | |
− | border-radius: 0;
| + | |
− | }
| + | |
− | .btn-default {
| + | |
− | border: 1px solid #42DCA3;
| + | |
− | color: #42DCA3;
| + | |
− | background-color: transparent;
| + | |
− | }
| + | |
− | .btn-default:hover,
| + | |
− | .btn-default:focus {
| + | |
− | border: 1px solid #42DCA3;
| + | |
− | outline: none;
| + | |
− | color: black;
| + | |
− | background-color: #42DCA3;
| + | |
− | }
| + | |
− | ul.banner-social-buttons {
| + | |
− | margin-top: 0;
| + | |
− | }
| + | |
− | @media (max-width: 1199px) {
| + | |
− | ul.banner-social-buttons {
| + | |
− | margin-top: 15px;
| + | |
− | }
| + | |
− | }
| + | |
− | @media (max-width: 767px) {
| + | |
− | ul.banner-social-buttons li {
| + | |
| display: block; | | display: block; |
| margin-bottom: 20px; | | margin-bottom: 20px; |
| padding: 0; | | padding: 0; |
− | }
| + | } |
− | ul.banner-social-buttons li:last-child {
| + | |
| + | ul.intro-social-buttons > li:last-child { |
| margin-bottom: 0; | | margin-bottom: 0; |
− | }
| |
| } | | } |
− | footer {
| + | |
− | padding: 50px 0;
| + | .intro-divider { |
− | } | + | width: 100%; |
− | footer p {
| + | |
− | margin: 0;
| + | |
− | }
| + | |
− | ::-moz-selection {
| + | |
− | text-shadow: none;
| + | |
− | background: #fcfcfc;
| + | |
− | background: rgba(255, 255, 255, 0.2);
| + | |
− | }
| + | |
− | ::selection {
| + | |
− | text-shadow: none;
| + | |
− | background: #fcfcfc;
| + | |
− | background: rgba(255, 255, 255, 0.2);
| + | |
− | }
| + | |
− | img::selection {
| + | |
− | background: transparent;
| + | |
− | }
| + | |
− | img::-moz-selection {
| + | |
− | background: transparent;
| + | |
− | }
| + | |
− | body {
| + | |
− | webkit-tap-highlight-color: rgba(255, 255, 255, 0.2);
| + | |
| } | | } |
| + | } |
| | | |
| + | .network-name { |
| + | text-transform: uppercase; |
| + | font-size: 14px; |
| + | font-weight: 400; |
| + | letter-spacing: 2px; |
| + | } |
| | | |
| + | .content-section-a { |
| + | padding: 50px 0; |
| + | background-color: #f8f8f8; |
| + | } |
| | | |
| + | .content-section-b { |
| + | padding: 50px 0; |
| + | border-top: 1px solid #e7e7e7; |
| + | border-bottom: 1px solid #e7e7e7; |
| + | } |
| | | |
| + | .section-heading { |
| + | margin-bottom: 30px; |
| + | } |
| | | |
| + | .section-heading-spacer { |
| + | float: left; |
| + | width: 200px; |
| + | border-top: 3px solid #e7e7e7; |
| + | } |
| | | |
| + | .banner { |
| + | padding: 100px 0; |
| + | color: #f8f8f8; |
| + | background: url(../img/intro2-bg.jpg) no-repeat center center; |
| + | background-size: cover; |
| + | } |
| | | |
| + | .banner h2 { |
| + | margin: 0; |
| + | text-shadow: 2px 2px 3px rgba(0,0,0,0.6); |
| + | font-size: 3em; |
| + | } |
| | | |
| + | .banner ul { |
| + | margin-bottom: 0; |
| + | } |
| | | |
| + | .banner-social-buttons { |
| + | float: right; |
| + | margin-top: 0; |
| + | } |
| | | |
− | .scrollnav-custom { | + | @media(max-width:1199px) { |
− | margin-bottom: 0;
| + | ul.banner-social-buttons { |
− | border-bottom: 0px solid rgba(255, 255, 255, 0.3);
| + | float: left; |
− | font-family: Tahoma, Geneva, sans-serif
| + | margin-top: 15px; |
− | background-color: black;
| + | |
| } | | } |
− | .scrollnav-custom .scrollnav-toggle { | + | } |
− | color: white;
| + | |
− | background-color: rgba(255, 255, 255, 0.2);
| + | @media(max-width:767px) { |
− | font-size: 12px;
| + | .banner h2 { |
− | }
| + | margin: 0; |
− | .scrollnav-custom .scrollnav-toggle:focus,
| + | text-shadow: 2px 2px 3px rgba(0,0,0,0.6); |
− | .scrollnav-custom .scrollnav-toggle:active {
| + | font-size: 3em; |
− | outline: none;
| + | |
− | }
| + | |
− | .scrollnav-custom .scrollnav-brand {
| + | |
− | font-weight: 700;
| + | |
− | }
| + | |
− | .scrollnav-custom .scrollnav-brand img {
| + | |
− | height: 40px;
| + | |
| } | | } |
− | .scrollnav-custom .scrollnav-brand:focus {
| + | |
− | outline: none;
| + | ul.banner-social-buttons > li { |
− | }
| + | display: block; |
− | .scrollnav-custom a { | + | margin-bottom: 20px; |
− | color: white;
| + | |
− | }
| + | |
− | .scrollnav-custom .nav li a {
| + | |
− | -webkit-transition: background 0.3s ease-in-out;
| + | |
− | -moz-transition: background 0.3s ease-in-out;
| + | |
− | transition: background 0.3s ease-in-out;
| + | |
− | }
| + | |
− | .scrollnav-custom .nav li a:hover {
| + | |
− | color: rgba(255, 255, 255, 0.8);
| + | |
− | outline: none;
| + | |
− | background-color: transparent;
| + | |
− | }
| + | |
− | .scrollnav-custom .nav li a:focus,
| + | |
− | .scrollnav-custom .nav li a:active {
| + | |
− | outline: none;
| + | |
− | background-color: transparent;
| + | |
− | }
| + | |
− | .scrollnav-custom .nav li.active {
| + | |
− | outline: none;
| + | |
− | }
| + | |
− | .scrollnav-custom .nav li.active a {
| + | |
− | background-color: rgba(255, 255, 255, 0.3);
| + | |
− | }
| + | |
− | .scrollnav-custom .nav li.active a:hover {
| + | |
− | color: white;
| + | |
− | }
| + | |
− | @media (min-width: 768px) {
| + | |
− | .scrollnav-custom {
| + | |
| padding: 0; | | padding: 0; |
− | letter-spacing: 1px;
| |
− | background: black;
| |
− | border-bottom: 1px solid rgba(255, 255, 255, 0.3);
| |
− | }
| |
− | }
| |
− | .navbar-brand img {
| |
− | height: 100%;
| |
− | }
| |
− | .sponsor-section {
| |
− | background-color: white;
| |
− | color: black;
| |
| } | | } |
| | | |
− | .dropdown-li { | + | ul.banner-social-buttons > li:last-child { |
− | padding-top: 11px;
| + | margin-bottom: 0; |
− | padding-bottom: 15px;
| + | |
− | margin-left: 10px;
| + | |
− | margin-right: 10px;
| + | |
| } | | } |
| + | } |
| | | |
− | .navbar-custom .nav li a:hover{
| + | footer { |
− | cursor: pointer;
| + | padding: 50px 0; |
− | } | + | background-color: #f8f8f8; |
| + | } |
| | | |
− | .navbar-right .dropdown-menu {
| + | p.copyright { |
− | right: auto;
| + | margin: 15px 0 0; |
− | position-left: 0px;
| + | } |
− | position-right: 0px;
| + | |
− | margin-left: 0px;
| + | |
− | }
| + | |
| | | |
− | .dropdown-menu {
| + | /* Dropdown Button */ |
− | background-color: black;
| + | .dropbtn { |
− | border-radius: 0px;
| + | background-color: #f8f8f8; |
− | } | + | color: gray; |
| + | padding: 16px; |
| + | font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif; |
| + | font-size: 14px; |
| + | border: none; |
| + | cursor: pointer; |
| + | } |
| | | |
− | .dropdown-a {
| + | /* The container <div> - needed to position the dropdown content */ |
− | color: white !important;
| + | .dropdown { |
− | } | + | position: relative; |
| + | display: inline-block; |
| + | } |
| | | |
− | .nav .open > a {
| + | /* Dropdown Content (Hidden by Default) */ |
− | background: transparent;
| + | .dropdown-content { |
− | } | + | display: none; |
− | </style> | + | position: absolute; |
| + | background-color: #f9f9f9; |
| + | min-width: 160px; |
| + | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); |
| + | z-index: 1; |
| + | } |
| | | |
| + | /* Links inside the dropdown */ |
| + | .dropdown-content a { |
| + | color: black; |
| + | padding: 12px 16px; |
| + | text-decoration: none; |
| + | display: block; |
| + | } |
| | | |
− | <!-- Navigation -->
| + | /* Change color of dropdown links on hover */ |
− | <nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
| + | .dropdown-content a:hover {background-color: #f1f1f1} |
− | <div class="container">
| + | |
− | <div class="navbar-header">
| + | |
− | <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
| + | |
− | Menu <i class="fa fa-bars"></i>
| + | |
− | </button>
| + | |
− | <a class="navbar-brand page-scroll" href="https://2017.igem.org/Team:UCopenhagen">
| + | |
− | inCell
| + | |
− | </a>
| + | |
− | </div>
| + | |
| | | |
− | <!-- Collect the nav links, forms, and other content for toggling -->
| + | /* Show the dropdown menu on hover */ |
− | <div class="collapse navbar-collapse navbar-right navbar-main-collapse">
| + | .dropdown:hover .dropdown-content { |
− | <ul class="nav navbar-nav">
| + | display: block; |
− | <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
| + | } |
− | <li class="hidden">
| + | |
− | <a href="#page-top"></a>
| + | /* Change the background color of the dropdown button when the dropdown content is shown */ |
− | </li>
| + | .dropdown:hover .dropbtn { |
− | <li class="dropdown-li">
| + | background-color: #595858; |
− | <div class="dropdown">
| + | color: white; |
− | <a class="dropdown-toggle" type="button" id="dropdown2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
| + | } |
− | Project
| + | |
− | </a>
| + | .home { |
− | <ul class="dropdown-menu" aria-labelledby="dropdown2">
| + | padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */ |
− | <li>
| + | padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */ |
− | <a href="https://2017.igem.org/Team:UCopenhagen/Project" class="dropdown-a"> Overview </a>
| + | padding-bottom: 50px; |
− | </li>
| + | text-align: center; |
− | <li>
| + | color: #f8f8f8; |
− | <a href="https://2017.igem.org/Team:UCopenhagen/Project/Interdependence" class="dropdown-a"> Interdependence </a>
| + | } |
− | </li>
| + | |
− | <li>
| + | #df-header { |
− | <a href="https://2017.igem.org/Team:UCopenhagen/Project/Number-control" class="dropdown-a">Number control</a>
| + | background: transparent!important; |
− | </li>
| + | overflow: hidden; |
− | <li>
| + | } |
− | <a href="https://2017.igem.org/Team:UCopenhagen/Project/Protein-import" class="dropdown-a">Protein Import</a>
| + | |
− | </li>
| + | #df-bg { |
− | <li>
| + | background: transparent; |
− | <a href="https://2017.igem.org/Team:UCopenhagen/Results" class="dropdown-a">Results</a>
| + | } |
− | </li>
| + | |
− | <li>
| + | #bg-video { |
− | <a href="https://2017.igem.org/Team:UCopenhagen/Parts" class="dropdown-a">Parts</a>
| + | background: url('dansk-lacrosse.jpg') no-repeat; |
− | </li>
| + | background-size: cover; |
− | <li>
| + | position: absolute; |
− | <a href="https://2017.igem.org/Team:UCopenhagen/Model" class="dropdown-a">Modelling</a>
| + | z-index: -1; |
− | </li>
| + | } |
− | </ul>
| + | |
− | </div>
| + | .thumbnails img { |
− | </li>
| + | height: 80px; |
− | <li class="dropdown-li">
| + | border: 4px solid #555; |
− | <div class="dropdown">
| + | padding: 1px; |
− | <a class="dropdown-toggle" type="button" id="dropdown3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
| + | margin: 0 10px 10px 0; |
− | Safety
| + | } |
− | </a>
| + | |
− | <ul class="dropdown-menu" aria-labelledby="dropdown3">
| + | .thumbnails img:hover { |
− | <li>
| + | border: 4px solid #00ccff; |
− | <a href="https://2017.igem.org/Team:UCopenhagen/Safety'" class="dropdown-a"> Overview </a>
| + | cursor:pointer; |
− | </li>
| + | } |
− | <li>
| + | |
− | <a href="https://2017.igem.org/Team:UCopenhagen/Notebook" class="dropdown-a">Notebook</a>
| + | .map-responsive{ |
− | </li>
| + | margin-top: 50px; |
− | <li>
| + | overflow:hidden; |
− | <a href="https://2017.igem.org/Team:UCopenhagen/Protocols" class="dropdown-a">Protocols</a>
| + | padding-bottom:56.25%; |
− | </li>
| + | position:relative; |
− | </ul>
| + | height:450px; |
− | </div>
| + | } |
− | </li>
| + | |
− | <li class="dropdown-li">
| + | .map-responsive iframe{ |
− | <div class="dropdown">
| + | left:0; |
− | <a class="dropdown-toggle" type="button" id="dropdown4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
| + | top:0; |
− | Team
| + | height:100%; |
− | </a>
| + | width:100%; |
− | <ul class="dropdown-menu" aria-labelledby="dropdown4">
| + | position:absolute; |
− | <li>
| + | } |
− | <a href="https://2017.igem.org/Team:UCopenhagen/Team'" class="dropdown-a"> Overview </a>
| + | |
− | </li>
| + | .logo-navigation{ |
− | <li>
| + | float: right; |
− | <a href="https://2017.igem.org/Team:UCopenhagen/Attributions" class="dropdown-a">Attributions</a>
| + | margin: -20px 5px; |
− | </li>
| + | } |
− | <li>
| + | |
− | <a href="https://2017.igem.org/Team:UCopenhagen/Collaborations" class="dropdown-a">Collaborations</a>
| + | .img-responsive{ |
− | </li>
| + | align-content: center; |
− | </ul>
| + | width:450px; |
− | </div>
| + | height:400px; |
− | </li>
| + | } |
− | <li class="dropdown-li">
| + | |
− | <div class="dropdown">
| + | .img-responsive1{ |
− | <a class="dropdown-toggle" type="button" id="dropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
| + | width:400px; |
− | Human Practices
| + | height:100px; |
− | </a>
| + | } |
− | <ul class="dropdown-menu" aria-labelledby="dropdown1">
| + | |
− | <li>
| + | .img-responsive2{ |
− | <a href="https://2017.igem.org/Team:UCopenhagen/HP'" class="dropdown-a"> Overview </a>
| + | width:500px; |
− | </li>
| + | height:350px; |
− | <li>
| + | } |
− | <a href="https://2017.igem.org/Team:UCopenhagen/Ethics">Ethics</a>
| + | |
− | </li>
| + | .img-responsive3{ |
− | <li>
| + | width:350px; |
− | <a href="https://2017.igem.org/Team:UCopenhagen/Social-media" class="dropdown-a">Social Media</a>
| + | height:300px; |
− | </li>
| + | } |
− | <li>
| + | |
− | <a href="https://2017.igem.org/Team:UCopenhagen/Events" class="dropdown-a">Events</a>
| + | .img-responsive4{ |
− | </li>
| + | width:325px; |
− | <li>
| + | height:490px; |
− | <a href="https://2017.igem.org/Team:UCopenhagen/Podcast" class="dropdown-a">Podcast</a>
| + | } |
− | </li>
| + | |
− | </ul>
| + | .img-responsive5{ |
− | </div>
| + | width:350px; |
− | </li>
| + | height:400px; |
| + | } |
| + | |
| + | .img-responsive6{ |
| + | width:400px; |
| + | height:325px; |
| + | } |
| + | |
| + | .img-responsive7{ |
| + | width:100% !important; |
| + | } |
| + | |
| + | .arrow-wrap { |
| + | position:absolute; |
| + | z-index:1; |
| + | left:50%; |
| + | top:-5em; |
| + | margin-left:-5em; |
| + | background:#111; |
| + | width:10em; |
| + | height:10em; |
| + | padding:4em 2em; |
| + | border-radius:50%; |
| + | font-size:0.5em; |
| + | display:block; |
| + | } |
| + | |
| + | .arrow { |
| + | float:left; |
| + | position:relative; |
| + | width: 0px; |
| + | height: 0px; |
| + | border-style: solid; |
| + | border-width: 3em 3em 0 3em; |
| + | border-color: #ffffff transparent transparent transparent; |
| + | -webkit-transform:rotate(360deg) |
| + | } |
| + | |
| + | .arrow:after { |
| + | content:''; |
| + | position:absolute; |
| + | top:-3.2em; |
| + | left:-3em; |
| + | width: 0px; |
| + | height: 0px; |
| + | border-style: solid; |
| + | border-width: 3em 3em 0 3em; |
| + | border-color: #111 transparent transparent transparent; |
| + | -webkit-transform:rotate(360deg) |
| + | } |
| + | </style> |
| | | |
− | <li class="dropdown-li">
| |
− | <div class="dropdown">
| |
− | <a class="dropdown-toggle" type="button" id="dropdown6" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
| |
− | Future Plans
| |
− | </a>
| |
− | <ul class="dropdown-menu" aria-labelledby="dropdown6">
| |
− | <li>
| |
− | <a href="https://2017.igem.org/Team:UCopenhagen/HP'" class="dropdown-a"> Overview </a>
| |
− | </li>
| |
− | <li>
| |
− | <a href="https://2017.igem.org/Team:UCopenhagen/Additional-work" class="dropdown-a">Additional work needed</a>
| |
− | </li>
| |
− | <li>
| |
− | <a href="https://2017.igem.org/Team:UCopenhagen/Limitations" class="dropdown-a">Limitations</a>
| |
− | </li>
| |
− | <li>
| |
− | <a href="https://2017.igem.org/Team:UCopenhagen/Ethical-concerns" class="dropdown-a">Ethical concerns</a>
| |
− | </li>
| |
− | <li>
| |
− | <a href="https://2017.igem.org/Team:UCopenhagen/Final-words" class="dropdown-a">Final words</a>
| |
− | </li>
| |
− |
| |
− | </ul>
| |
− | </div>
| |
− | </li>
| |
− |
| |
− | </ul>
| |
− | </div>
| |
− | <!-- /.navbar-collapse -->
| |
− | </div>
| |
− | <!-- /.container -->
| |
− | </nav>
| |
| </html> | | </html> |