Difference between revisions of "Template:Copenhagen-Header"

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>

Revision as of 11:51, 3 September 2017