Difference between revisions of "Template:Rotterdam HR/navbar"

 
(23 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
/* ----- color palet ----- */
+
<nav>
−
 
+
    <style>
−
:root {
+
      .menu svg {
−
--color-primary: #1B5E20;
+
        width: 24px;
−
--color-secondary: #C8E6C9;
+
        height: 24px;
−
 
+
      }
−
--color-dark: rgb(50, 50, 50);
+
    </style>
−
 
+
    <ul class="menu" style="margin: 0;">
−
--color-wetlab: #1B5E20;
+
      <!-- HOME -->
−
+
      <a class="main-item" id="index" href="https://2018.igem.org/Team:Rotterdam_HR">
−
--color-hardware: #3949AB;
+
        <svg style="width:24px;height:24px" viewBox="0 0 24 24">
−
 
+
          <path d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" />
−
--color-software: #424242;
+
        </svg>
−
--color-software-secondary: #8f8f8f;
+
        <span>Home</span>
−
}
+
      </a>
−
 
+
−
/* ------ PAGE ------ */
+
−
.page-index, .page-description {
+
−
background: var(--color-secondary);
+
−
}
+
−
.page-software {
+
−
background: var(--color-software-secondary);
+
−
}
+
−
 
+
−
/* ----- iGEM STYLE FIXES ----- */
+
−
 
+
−
ul {
+
−
list-style-image: none;
+
−
}
+
−
 
+
−
#content {
+
−
width: 100%;
+
−
margin: 0;
+
−
padding: 0;
+
−
background: none;
+
−
}
+
−
 
+
−
#bodyContent a[href ^="https://"], .link-https {
+
−
    background: whitesmoke;
+
−
    padding: 5px 0;
+
−
}
+
−
 
+
−
#HQ_page h1, #HQ_page h2, #HQ_page h3, #HQ_page p, #HQ_page span, #HQ_page a{
+
−
font-family: candara;
+
−
line-height: initial;
+
−
}
+
−
 
+
−
#bodyContent h3, #bodyContent h4, #bodyContent h5 {
+
−
margin-bottom: 0;
+
−
padding: 0 5px;
+
−
line-height: 1.1em;
+
−
}
+
−
 
+
−
#top_title, #top_menu_under {
+
−
display: none;
+
−
}
+
−
 
+
−
#top_menu_14 {
+
−
position: initial;
+
−
}
+
−
 
+
−
#top_menu_inside #user_item {
+
−
margin-right: 0;
+
−
float: none;
+
−
}
+
−
#top_menu_inside {
+
−
margin: 0 auto;
+
−
width: 90%;
+
−
}
+
−
 
+
−
body {
+
−
font-family: candara;
+
−
background: white;
+
−
  font-size: 13px;
+
−
}
+
−
 
+
−
/* ----- NAVBAR ----- */
+
−
.menu {
+
−
display: flex;
+
−
}
+
−
 
+
−
.menu,
+
−
.sub-menu {
+
−
  margin: 0;
+
−
  padding: 0;
+
−
  list-style: none;
+
−
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1);
+
−
}
+
−
 
+
−
.menu .main-item {
+
−
  position: relative;
+
−
  display: flex;
+
−
  flex-direction: column;
+
−
  align-items: center;
+
−
  flex: 1;
+
−
  height: 44px;
+
−
  padding: 5px;
+
−
  text-align: center;
+
−
  text-decoration: none;
+
−
  color: white;
+
−
  background: var(--color-dark);
+
−
fill: currentColor;
+
−
z-index: 1;
+
−
}
+
−
 
+
−
.menu .main-item::before {
+
−
  content: "";
+
−
  position: absolute;
+
−
  bottom: 0;
+
−
  left: 0;
+
−
  right: 0;
+
−
  height: 3px;
+
−
  background: currentColor;
+
−
  transform: scale(0, 1);
+
−
  transform-origin: left;
+
−
  transition: transform 200ms;
+
−
}
+
−
 
+
−
.menu .home-button {
+
−
  width: 200px;
+
−
  position: relative;
+
−
}
+
−
 
+
−
.menu .home-button a {
+
−
  position: absolute;
+
−
  top: 0;
+
−
  left: 0;
+
−
  right: 0;
+
−
  bottom: -80px;
+
−
  border-radius: 0 0 50% 50%;
+
−
  background: var(--color-dark);
+
−
}
+
−
 
+
−
.sub-menu {
+
−
  position: absolute;
+
−
  top: 54px;
+
−
  left: 0;
+
−
  right: 0;
+
−
  transform: scale(1, 0);
+
−
  transform-origin: top;
+
−
  transition: transform 250ms;
+
−
}
+
−
 
+
−
.sub-menu .sub-item {
+
−
  padding: 10px 5px;
+
−
  border-top: rgba(255, 255, 255, 0.25) solid 2px;
+
−
  color: var(--color-dark);
+
−
transition: color 200ms;
+
−
min-width: 96px;
+
−
max-height: fit-content;
+
−
}
+
−
 
+
−
.menu .construction::after {
+
−
  content: url('https://static.igem.org/mediawiki/2018/4/4a/T--Rotterdam_HR--wrench.svg');
+
−
  position: absolute;
+
−
  top: 5px;
+
−
  left: 0;
+
−
  right: 0;
+
−
  bottom: 5px;
+
−
  display: flex;
+
−
  flex-direction: column;
+
−
  align-items: center;
+
−
  font-size: 12px;
+
−
  color: orange;
+
−
  background: var(--color-dark);
+
−
  transform: scale(1, 0);
+
−
  transform-origin: bottom;
+
−
  transition: transform 250ms;
+
−
}
+
−
 
+
−
.menu .main-item:hover::before {
+
−
  transform: scale(1, 1);
+
−
}
+
−
 
+
−
 
+
−
.menu .construction:hover::after {
+
−
  transform: scale(1, 1);
+
−
}
+
−
 
+
−
.menu .main-item:hover .sub-menu {
+
−
  transform: scale(1, 1);
+
−
}
+
−
 
+
−
.menu .main-item:hover .sub-menu .sub-item {
+
−
  color: white;
+
−
  transition: color 200ms 100ms;
+
−
}
+
−
 
+
−
#menuToggle a {
+
−
  text-decoration: none;
+
−
  color: white;
+
−
  transition: color 0.3s ease;
+
−
}
+
−
 
+
−
#menuToggle a:hover {
+
−
  color: gray;
+
−
}
+
−
 
+
−
#menuToggle {
+
−
  display: none;
+
−
  position: relative;
+
−
  top: -35px;
+
−
left: 20px;
+
−
width: 50px;
+
−
  z-index: 1;
+
−
  -webkit-user-select: none;
+
−
  user-select: none;
+
−
}
+
−
 
+
−
#menuToggle input {
+
−
  display: block;
+
−
  width: 40px;
+
−
  height: 32px;
+
−
  position: absolute;
+
−
  top: -7px;
+
−
  left: -5px;
+
 
    
 
    
−
  cursor: pointer;
+
      <!-- TEAM -->
 +
      <div class="main-item" id="team-category">
 +
        <svg style="width:24px;height:24px" viewBox="0 0 24 24">
 +
          <path d="M12,6A3,3 0 0,0 9,9A3,3 0 0,0 12,12A3,3 0 0,0 15,9A3,3 0 0,0 12,6M6,8.17A2.5,2.5 0 0,0 3.5,10.67A2.5,2.5 0 0,0 6,13.17C6.88,13.17 7.65,12.71 8.09,12.03C7.42,11.18 7,10.15 7,9C7,8.8 7,8.6 7.04,8.4C6.72,8.25 6.37,8.17 6,8.17M18,8.17C17.63,8.17 17.28,8.25 16.96,8.4C17,8.6 17,8.8 17,9C17,10.15 16.58,11.18 15.91,12.03C16.35,12.71 17.12,13.17 18,13.17A2.5,2.5 0 0,0 20.5,10.67A2.5,2.5 0 0,0 18,8.17M12,14C10,14 6,15 6,17V19H18V17C18,15 14,14 12,14M4.67,14.97C3,15.26 1,16.04 1,17.33V19H4V17C4,16.22 4.29,15.53 4.67,14.97M19.33,14.97C19.71,15.53 20,16.22 20,17V19H23V17.33C23,16.04 21,15.26 19.33,14.97Z" />
 +
        </svg>
 +
        <span>Team</span>
 +
        <ul class="sub-menu" style="margin: 0;">
 +
          <a href="https://2018.igem.org/Team:Rotterdam_HR/Team" class="main-item sub-item" id="team">Team members</a>
 +
          <a href="https://2018.igem.org/Team:Rotterdam_HR/Attributions" class="main-item sub-item" id="attributions">Attributions</a>
 +
          <a href="https://2018.igem.org/Team:Rotterdam_HR/Collaborations" class="main-item sub-item" id="collaborations">Collaborations</a>
 +
          <a href="https://2018.igem.org/Team:Rotterdam_HR/Sponsors" class="main-item sub-item" id="sponsors">Sponsors</a>
 +
        </ul>
 +
      </div>
 
    
 
    
−
  opacity: 0; /* hide this */
+
      <!-- PROJECT -->
−
  z-index: 2; /* and place it over the hamburger */
+
      <div class="main-item" id="project-category">
 +
        <svg style="width:24px;height:24px" viewBox="0 0 24 24">
 +
          <path d="M9.46,6.28L11.05,9C8.47,9.26 6.5,11.41 6.5,14A5,5 0 0,0 11.5,19C13.55,19 15.31,17.77 16.08,16H13.5V14H21.5V16H19.25C18.84,17.57 17.97,18.96 16.79,20H19.5V22H3.5V20H6.21C4.55,18.53 3.5,16.39 3.5,14C3.5,10.37 5.96,7.2 9.46,6.28M12.74,2.07L13.5,3.37L14.36,2.87L17.86,8.93L14.39,10.93L10.89,4.87L11.76,4.37L11,3.07L12.74,2.07Z" />
 +
        </svg>
 +
        <span>Project</span>
 +
        <ul class="sub-menu" style="margin: 0;">
 +
          <a href="https://2018.igem.org/Team:Rotterdam_HR/Description" class="main-item sub-item" id="description">Description</a>
 +
          <a href="https://2018.igem.org/Team:Rotterdam_HR/Design" class="main-item sub-item" id="design">Design</a>
 +
          <a href="https://2018.igem.org/Team:Rotterdam_HR/Experiments" class="main-item sub-item" id="experiments">Experiments</a>
 +
          <a href="https://2018.igem.org/Team:Rotterdam_HR/Notebook" class="main-item sub-item" id="notebook">Notebook</a>
 +
          <!-- <a href="https://2018.igem.org/Team:Rotterdam_HR/Interlab" class="main-item sub-item" id="interlab">Interlab</a> -->
 +
          <!-- <a href="https://2018.igem.org/Team:Rotterdam_HR/Model" class="main-item sub-item" id="model">Model</a> -->
 +
          <a href="https://2018.igem.org/Team:Rotterdam_HR/Results" class="main-item sub-item" id="results">Results</a>
 +
          <!-- <a href="https://2018.igem.org/Team:Rotterdam_HR/Demonstrate" class="main-item sub-item" id="demonstrate">Demonstrate</a> -->
 +
          <!-- <a href="https://2018.igem.org/Team:Rotterdam_HR/Improve" class="main-item sub-item" id="improve">Improve</a> -->
 +
        </ul>
 +
      </div>
 
    
 
    
−
  -webkit-touch-callout: none;
+
      <!-- PARTS -->
−
}
+
      <a href="https://2018.igem.org/Team:Rotterdam_HR/Parts" class="main-item" id="parts">
−
 
+
        <svg style="width:24px;height:24px" viewBox="0 0 24 24">
−
/*
+
          <path d="M4,2H6V4C6,5.44 6.68,6.61 7.88,7.78C8.74,8.61 9.89,9.41 11.09,10.2L9.26,11.39C8.27,10.72 7.31,10 6.5,9.21C5.07,7.82 4,6.1 4,4V2M18,2H20V4C20,6.1 18.93,7.82 17.5,9.21C16.09,10.59 14.29,11.73 12.54,12.84C10.79,13.96 9.09,15.05 7.88,16.22C6.68,17.39 6,18.56 6,20V22H4V20C4,17.9 5.07,16.18 6.5,14.79C7.91,13.41 9.71,12.27 11.46,11.16C13.21,10.04 14.91,8.95 16.12,7.78C17.32,6.61 18,5.44 18,4V2M14.74,12.61C15.73,13.28 16.69,14 17.5,14.79C18.93,16.18 20,17.9 20,20V22H18V20C18,18.56 17.32,17.39 16.12,16.22C15.26,15.39 14.11,14.59 12.91,13.8L14.74,12.61M7,3H17V4L16.94,4.5H7.06L7,4V3M7.68,6H16.32C16.08,6.34 15.8,6.69 15.42,7.06L14.91,7.5H9.07L8.58,7.06C8.2,6.69 7.92,6.34 7.68,6M9.09,16.5H14.93L15.42,16.94C15.8,17.31 16.08,17.66 16.32,18H7.68C7.92,17.66 8.2,17.31 8.58,16.94L9.09,16.5M7.06,19.5H16.94L17,20V21H7V20L7.06,19.5Z" />
−
* Just a quick hamburger
+
        </svg>
−
*/
+
        <span>Parts</span>
−
#menuToggle span {
+
      </a>
−
  display: block;
+
      <!-- <div class="main-item" id="parts-category">
−
  width: 33px;
+
        <svg style="width:24px;height:24px" viewBox="0 0 24 24">
−
  height: 4px;
+
            <path d="M4,2H6V4C6,5.44 6.68,6.61 7.88,7.78C8.74,8.61 9.89,9.41 11.09,10.2L9.26,11.39C8.27,10.72 7.31,10 6.5,9.21C5.07,7.82 4,6.1 4,4V2M18,2H20V4C20,6.1 18.93,7.82 17.5,9.21C16.09,10.59 14.29,11.73 12.54,12.84C10.79,13.96 9.09,15.05 7.88,16.22C6.68,17.39 6,18.56 6,20V22H4V20C4,17.9 5.07,16.18 6.5,14.79C7.91,13.41 9.71,12.27 11.46,11.16C13.21,10.04 14.91,8.95 16.12,7.78C17.32,6.61 18,5.44 18,4V2M14.74,12.61C15.73,13.28 16.69,14 17.5,14.79C18.93,16.18 20,17.9 20,20V22H18V20C18,18.56 17.32,17.39 16.12,16.22C15.26,15.39 14.11,14.59 12.91,13.8L14.74,12.61M7,3H17V4L16.94,4.5H7.06L7,4V3M7.68,6H16.32C16.08,6.34 15.8,6.69 15.42,7.06L14.91,7.5H9.07L8.58,7.06C8.2,6.69 7.92,6.34 7.68,6M9.09,16.5H14.93L15.42,16.94C15.8,17.31 16.08,17.66 16.32,18H7.68C7.92,17.66 8.2,17.31 8.58,16.94L9.09,16.5M7.06,19.5H16.94L17,20V21H7V20L7.06,19.5Z" />
−
  margin-bottom: 5px;
+
        </svg>
−
  position: relative;
+
        <span>Parts</span>
−
  background: white;
+
        <ul class="sub-menu" style="margin: 0;">
−
  border-radius: 3px;
+
          <a href="https://2018.igem.org/Team:Rotterdam_HR/Parts" class="main-item sub-item construction" id="parts-overview">Parts Overview</a>
 +
          <a href="https://2018.igem.org/Team:Rotterdam_HR/Basic_Part" class="main-item sub-item construction" id="basic-parts">Basic parts</a>
 +
          <a href="https://2018.igem.org/Team:Rotterdam_HR/Composite_Part" class="main-item sub-item construction" id="composite-parts">Composite parts</a>
 +
          <a href="https://2018.igem.org/Team:Rotterdam_HR/Part_Collection" class="main-item sub-item construction" id="part-collection">Part Collection</a>
 +
        </ul>
 +
      </div> -->
 
    
 
    
−
  z-index: 1;
+
      <!-- LOGO -->
 +
      <div class="home-button">
 +
        <a href="https://2018.igem.org/Team:Rotterdam_HR">
 +
          <img src="https://static.igem.org/mediawiki/2018/5/58/T--Rotterdam_HR--logo.jpeg" alt="iGEM Rotterdam logo" style="width: 100%; height: 75%;">
 +
        </a>
 +
      </div>
 
    
 
    
−
  transform-origin: 4px 0px;
+
      <!-- SAFETY -->
 +
      <a href="https://2018.igem.org/Team:Rotterdam_HR/Safety" class="main-item" id="safety">
 +
        <svg style="width:24px;height:24px" viewBox="0 0 24 24">
 +
          <path d="M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z" />
 +
        </svg>
 +
        <span>Safety</span>
 +
      </a>
 
    
 
    
−
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
+
      <!-- HUMAN PRACTICES -->
−
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
+
      <div class="main-item" id="humanpractices-category">
−
              opacity 0.55s ease;
+
        <svg style="width:24px;height:24px" viewBox="0 0 24 24">
−
}
+
          <path d="M1.5,4V5.5C1.5,9.65 3.71,13.28 7,15.3V20H22V18C22,15.34 16.67,14 14,14C14,14 13.83,14 13.75,14C9,14 5,10 5,5.5V4M14,4A4,4 0 0,0 10,8A4,4 0 0,0 14,12A4,4 0 0,0 18,8A4,4 0 0,0 14,4Z" />
−
 
+
        </svg>
−
#menuToggle span:first-child
+
        <span>Human Practices</span>
−
{
+
        <ul class="sub-menu" style="margin: 0;">
−
  transform-origin: 0% 0%;
+
          <a href="https://2018.igem.org/Team:Rotterdam_HR/Human_Practices" class="main-item sub-item" id="human_practices">Human Practices</a>
−
}
+
          <a href="https://2018.igem.org/Team:Rotterdam_HR/Public_Engagement" class="main-item sub-item" id="public_engagement">Public Engagement</a>
−
 
+
          <a href="https://2018.igem.org/Team:Rotterdam_HR/Outreach" class="main-item sub-item" id="outreach">Outreach</a>
−
#menuToggle span:nth-last-child(2)
+
        </ul>
−
{
+
      </div>
−
  transform-origin: 0% 100%;
+
−
}
+
−
 
+
−
/*
+
−
* Transform all the slices of hamburger
+
−
* into a crossmark.
+
−
*/
+
−
#menuToggle input:checked ~ span
+
−
{
+
−
  opacity: 1;
+
−
  transform: rotate(45deg) translate(-2px, -1px);
+
−
  background: white;
+
−
}
+
−
 
+
−
/*
+
−
* But let's hide the middle one.
+
−
*/
+
−
#menuToggle input:checked ~ span:nth-last-child(3)
+
−
{
+
−
  opacity: 0;
+
−
  transform: rotate(0deg) scale(0.2, 0.2);
+
−
}
+
−
 
+
−
/*
+
−
* Ohyeah and the last one should go the other direction
+
−
*/
+
−
#menuToggle input:checked ~ span:nth-last-child(2)
+
−
{
+
−
  transform: rotate(-45deg) translate(0, -1px);
+
−
}
+
−
 
+
−
/*
+
−
* Make this absolute positioned
+
−
* at the top left of the screen
+
−
*/
+
−
#mobile-menu
+
−
{
+
−
  position: absolute;
+
−
width: 200px;
+
−
  margin: -100px 0 0 -50px;
+
−
  padding: 50px;
+
−
  padding-top: 125px;
+
−
  background: var(--color-dark);
+
−
  list-style-type: none;
+
−
  -webkit-font-smoothing: antialiased;
+
−
/* to stop flickering of text in safari */
+
 
    
 
    
−
  transform-origin: 0% 0%;
+
      <!-- HARDWARE -->
−
  transform: translate(-100%, 0);
+
      <div class="main-item" id="hardware-category">
 +
        <svg style="width:24px;height:24px" viewBox="0 0 24 24">
 +
          <path fill="currentColor" d="M15.9,18.45C17.25,18.45 18.35,17.35 18.35,16C18.35,14.65 17.25,13.55 15.9,13.55C14.54,13.55 13.45,14.65 13.45,16C13.45,17.35 14.54,18.45 15.9,18.45M21.1,16.68L22.58,17.84C22.71,17.95 22.75,18.13 22.66,18.29L21.26,20.71C21.17,20.86 21,20.92 20.83,20.86L19.09,20.16C18.73,20.44 18.33,20.67 17.91,20.85L17.64,22.7C17.62,22.87 17.47,23 17.3,23H14.5C14.32,23 14.18,22.87 14.15,22.7L13.89,20.85C13.46,20.67 13.07,20.44 12.71,20.16L10.96,20.86C10.81,20.92 10.62,20.86 10.54,20.71L9.14,18.29C9.05,18.13 9.09,17.95 9.22,17.84L10.7,16.68L10.65,16L10.7,15.31L9.22,14.16C9.09,14.05 9.05,13.86 9.14,13.71L10.54,11.29C10.62,11.13 10.81,11.07 10.96,11.13L12.71,11.84C13.07,11.56 13.46,11.32 13.89,11.15L14.15,9.29C14.18,9.13 14.32,9 14.5,9H17.3C17.47,9 17.62,9.13 17.64,9.29L17.91,11.15C18.33,11.32 18.73,11.56 19.09,11.84L20.83,11.13C21,11.07 21.17,11.13 21.26,11.29L22.66,13.71C22.75,13.86 22.71,14.05 22.58,14.16L21.1,15.31L21.15,16L21.1,16.68M6.69,8.07C7.56,8.07 8.26,7.37 8.26,6.5C8.26,5.63 7.56,4.92 6.69,4.92A1.58,1.58 0 0,0 5.11,6.5C5.11,7.37 5.82,8.07 6.69,8.07M10.03,6.94L11,7.68C11.07,7.75 11.09,7.87 11.03,7.97L10.13,9.53C10.08,9.63 9.96,9.67 9.86,9.63L8.74,9.18L8,9.62L7.81,10.81C7.79,10.92 7.7,11 7.59,11H5.79C5.67,11 5.58,10.92 5.56,10.81L5.4,9.62L4.64,9.18L3.5,9.63C3.41,9.67 3.3,9.63 3.24,9.53L2.34,7.97C2.28,7.87 2.31,7.75 2.39,7.68L3.34,6.94L3.31,6.5L3.34,6.06L2.39,5.32C2.31,5.25 2.28,5.13 2.34,5.03L3.24,3.47C3.3,3.37 3.41,3.33 3.5,3.37L4.63,3.82L5.4,3.38L5.56,2.19C5.58,2.08 5.67,2 5.79,2H7.59C7.7,2 7.79,2.08 7.81,2.19L8,3.38L8.74,3.82L9.86,3.37C9.96,3.33 10.08,3.37 10.13,3.47L11.03,5.03C11.09,5.13 11.07,5.25 11,5.32L10.03,6.06L10.06,6.5L10.03,6.94Z"></path>
 +
        </svg>
 +
        <span>Hardware</span>
 +
        <ul class="sub-menu" style="margin: 0;">
 +
          <a href="https://2018.igem.org/Team:Rotterdam_HR/Hardware" class="main-item sub-item" id="hardware">Hardware Overview</a>
 +
          <a href="https://2018.igem.org/Team:Rotterdam_HR/Hardware_Peristaltic_Pump" class="main-item sub-item" id="peristaltic_pump">Peristaltic Pump</a>
 +
          <a href="https://2018.igem.org/Team:Rotterdam_HR/Hardware_Temperature_Controller" class="main-item sub-item" id="temperature_controller">Temperature Controller</a>
 +
          <a href="https://2018.igem.org/Team:Rotterdam_HR/Hardware_Test_Tube_Shaker" class="main-item sub-item" id="test_tube_shaker">Test Tube Shaker</a>
 +
        </ul>
 +
      </div>
 
    
 
    
−
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
+
      <!-- SOFTWARE -->
−
}
+
      <div href="https://2018.igem.org/Team:Rotterdam_HR/Software" class="main-item" id="software-category">
−
 
+
        <svg style="width:24px;height:24px" viewBox="0 0 24 24">
−
#mobile-menu li
+
          <path d="M14.6,16.6L19.2,12L14.6,7.4L16,6L22,12L16,18L14.6,16.6M9.4,16.6L4.8,12L9.4,7.4L8,6L2,12L8,18L9.4,16.6Z" />
−
{
+
        </svg>
−
  padding: 5px 0;
+
        <span>Software</span>
−
  font-size: 16px;
+
        <ul class="sub-menu" style="margin: 0;">
−
  height: 0.75em;
+
          <a href="https://2018.igem.org/Team:Rotterdam_HR/Software" class="main-item sub-item" id="software">Software Overview</a>
−
  display: flex;
+
          <a href="https://2018.igem.org/Team:Rotterdam_HR/Wikistat" class="main-item sub-item" id="wikistat">Wiki Statistics</a>
−
  align-items: center;
+
        </ul>
−
}
+
      </div>
−
 
+
     </ul>
−
#mobile-menu li svg {
+
−
  width: 1em;
+
−
  height: 1em;
+
−
  margin-right: 10px;
+
−
  fill: currentColor;
+
−
}
+
−
 
+
−
#mobile-menu li span {
+
−
  width: 100%;
+
−
  height: 0.75em;
+
−
  background: none;
+
−
}
+
−
 
+
−
/*
+
−
* And let's slide it in from the left
+
−
*/
+
−
#menuToggle input:checked ~ ul
+
−
{
+
−
  transform: none;
+
−
}
+
−
 
+
−
@media only screen and (max-width: 1230px) {
+
−
  .main-item {
+
−
    font-size: smaller;
+
−
  }
+
−
 
+
−
}
+
−
 
+
−
@media only screen and (max-width: 1060px) {
+
−
.home-button {
+
−
display: none;
+
−
}
+
−
 
+
−
}
+
−
 
+
−
@media only screen and (max-width: 900px) {
+
−
  .menu {
+
−
    height: 50px;
+
−
     width: 100%;
+
−
    background: var(--color-dark);
+
−
  }
+
 
    
 
    
−
  .menu .main-item {
+
     <div id="menuToggle">
−
     display: none;
+
      <input type="checkbox" />
−
}
+
      <span></span>
−
+
      <span></span>
−
#menuToggle {
+
      <span></span>
−
display: block;
+
−
  }
+
 
    
 
    
−
}
+
      <ul id="mobile-menu">
−
 
+
        <form action="">
−
/* ------ HEADER ------ */
+
          <a href="https://2018.igem.org/Team:Rotterdam_HR">
−
 
+
            <li>
−
.header {
+
              <svg viewBox="0 0 24 24">
−
  position: relative;
+
                <path d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z"></path>
−
  height: 40vh;
+
              </svg><span>Home</span>
−
  width: 100%;
+
            </li>
−
  background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.5), rgba(255,255,255,0.3));
+
          </a>
−
  display: flex;
+
          <div style="height: 1em"></div>
−
  align-items: center;
+
          <a href="https://2018.igem.org/Team:Rotterdam_HR/Team">
−
  text-shadow: 2px 2px 20px rgba(0, 0, 0, 0.4);
+
            <li>
−
}
+
              <svg viewBox="0 0 24 24">
−
 
+
                <path d="M16,13C15.71,13 15.38,13 15.03,13.05C16.19,13.89 17,15 17,16.5V19H23V16.5C23,14.17 18.33,13 16,13M8,13C5.67,13 1,14.17 1,16.5V19H15V16.5C15,14.17 10.33,13 8,13M8,11A3,3 0 0,0 11,8A3,3 0 0,0 8,5A3,3 0 0,0 5,8A3,3 0 0,0 8,11M16,11A3,3 0 0,0 19,8A3,3 0 0,0 16,5A3,3 0 0,0 13,8A3,3 0 0,0 16,11Z"></path>
−
.header::before {
+
              </svg>
−
  content: '';
+
              <span>Team Members</span>
−
  position: absolute;
+
            </li>
−
  z-index: -1;
+
          </a>
−
  top: 0;
+
          <a href="https://2018.igem.org/Team:Rotterdam_HR/Collaborations">
−
  left: 0;
+
            <li>
−
  right: 0;
+
              <svg viewBox="0 0 24 24">
−
  bottom: 0;
+
                <path d="M12,6A3,3 0 0,0 9,9A3,3 0 0,0 12,12A3,3 0 0,0 15,9A3,3 0 0,0 12,6M6,8.17A2.5,2.5 0 0,0 3.5,10.67A2.5,2.5 0 0,0 6,13.17C6.88,13.17 7.65,12.71 8.09,12.03C7.42,11.18 7,10.15 7,9C7,8.8 7,8.6 7.04,8.4C6.72,8.25 6.37,8.17 6,8.17M18,8.17C17.63,8.17 17.28,8.25 16.96,8.4C17,8.6 17,8.8 17,9C17,10.15 16.58,11.18 15.91,12.03C16.35,12.71 17.12,13.17 18,13.17A2.5,2.5 0 0,0 20.5,10.67A2.5,2.5 0 0,0 18,8.17M12,14C10,14 6,15 6,17V19H18V17C18,15 14,14 12,14M4.67,14.97C3,15.26 1,16.04 1,17.33V19H4V17C4,16.22 4.29,15.53 4.67,14.97M19.33,14.97C19.71,15.53 20,16.22 20,17V19H23V17.33C23,16.04 21,15.26 19.33,14.97Z"></path>
−
}
+
              </svg>
−
 
+
              <span>Collaborations</span>
−
.header div {
+
            </li>
−
  margin: auto;
+
          </a>
−
  display: flex;
+
          <a href="https://2018.igem.org/Team:Rotterdam_HR/Attributions">
−
  flex-direction: column;
+
            <li>
−
align-items: center;
+
              <svg viewBox="0 0 24 24">
−
}
+
                <path d="M12,6A3,3 0 0,0 9,9A3,3 0 0,0 12,12A3,3 0 0,0 15,9A3,3 0 0,0 12,6M6,8.17A2.5,2.5 0 0,0 3.5,10.67A2.5,2.5 0 0,0 6,13.17C6.88,13.17 7.65,12.71 8.09,12.03C7.42,11.18 7,10.15 7,9C7,8.8 7,8.6 7.04,8.4C6.72,8.25 6.37,8.17 6,8.17M18,8.17C17.63,8.17 17.28,8.25 16.96,8.4C17,8.6 17,8.8 17,9C17,10.15 16.58,11.18 15.91,12.03C16.35,12.71 17.12,13.17 18,13.17A2.5,2.5 0 0,0 20.5,10.67A2.5,2.5 0 0,0 18,8.17M12,14C10,14 6,15 6,17V19H18V17C18,15 14,14 12,14M4.67,14.97C3,15.26 1,16.04 1,17.33V19H4V17C4,16.22 4.29,15.53 4.67,14.97M19.33,14.97C19.71,15.53 20,16.22 20,17V19H23V17.33C23,16.04 21,15.26 19.33,14.97Z"></path>
−
 
+
              </svg>
−
.header div svg {
+
              <span>Attributions</span>
−
  width: 160px;
+
            </li>
−
  height: 160px;
+
          </a>
−
}
+
          <a href="https://2018.igem.org/Team:Rotterdam_HR/Sponsors">
−
 
+
            <li>
−
.header div h1 {
+
              <svg viewBox="0 0 24 24">
−
padding: 0;
+
                <path d="M11.5,1L2,6V8H21V6M16,10V17H19V10M2,22H21V19H2M10,10V17H13V10M4,10V17H7V10H4Z"></path>
−
  margin-top: 0;
+
              </svg>
−
  font-size: 50px;
+
              <span>Sponsors</span>
−
}
+
            </li>
−
 
+
          </a>
−
/* ------ FOOTER ------ */
+
          <div style="height: 1em"></div>
−
 
+
          <a href="https://2018.igem.org/Team:Rotterdam_HR/Description">
−
.multiple-items-footer {
+
            <li>
−
margin: 0 auto;
+
              <svg viewBox="0 0 24 24">
−
display: flex;
+
                <path d="M9.46,6.28L11.05,9C8.47,9.26 6.5,11.41 6.5,14A5,5 0 0,0 11.5,19C13.55,19 15.31,17.77 16.08,16H13.5V14H21.5V16H19.25C18.84,17.57 17.97,18.96 16.79,20H19.5V22H3.5V20H6.21C4.55,18.53 3.5,16.39 3.5,14C3.5,10.37 5.96,7.2 9.46,6.28M12.74,2.07L13.5,3.37L14.36,2.87L17.86,8.93L14.39,10.93L10.89,4.87L11.76,4.37L11,3.07L12.74,2.07Z"></path>
−
justify-content: space-around;
+
              </svg>
−
width: 250px;
+
              <span>Project Description</span>
−
}
+
            </li>
−
 
+
          </a>
−
.item-footer {
+
          <a href="https://2018.igem.org/Team:Rotterdam_HR/Design">
−
width: 50px;
+
            <li>
−
height: 50px;
+
              <svg viewBox="0 0 24 24">
−
margin: 5px;
+
                <path d="M5,3C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19H5V5H12V3H5M17.78,4C17.61,4 17.43,4.07 17.3,4.2L16.08,5.41L18.58,7.91L19.8,6.7C20.06,6.44 20.06,6 19.8,5.75L18.25,4.2C18.12,4.07 17.95,4 17.78,4M15.37,6.12L8,13.5V16H10.5L17.87,8.62L15.37,6.12Z"></path>
−
filter: invert(50%);
+
              </svg>
−
transition: 0.4s;
+
              <span>Project Design</span>
−
}
+
            </li>
−
 
+
          </a>
−
.item-footer:hover {
+
          <!-- <a href="https://2018.igem.org/Team:Rotterdam_HR/Model"><li><svg viewBox="0 0 24 24">
−
filter: invert(100%);
+
    <path d="M22,21H2V3H4V19H6V10H10V19H12V6H16V19H18V14H22V21Z"></path>
−
transition: 0.1s;
+
   </svg><span>Modelling</span></li></a> -->
−
}
+
          <a href="https://2018.igem.org/Team:Rotterdam_HR/Notebook">
−
 
+
            <li>
−
#footer {
+
              <svg viewBox="0 0 24 24">
−
padding: 40px 0;
+
                <path d="M21,5C19.89,4.65 18.67,4.5 17.5,4.5C15.55,4.5 13.45,4.9 12,6C10.55,4.9 8.45,4.5 6.5,4.5C4.55,4.5 2.45,4.9 1,6V20.65C1,20.9 1.25,21.15 1.5,21.15C1.6,21.15 1.65,21.1 1.75,21.1C3.1,20.45 5.05,20 6.5,20C8.45,20 10.55,20.4 12,21.5C13.35,20.65 15.8,20 17.5,20C19.15,20 20.85,20.3 22.25,21.05C22.35,21.1 22.4,21.1 22.5,21.1C22.75,21.1 23,20.85 23,20.6V6C22.4,5.55 21.75,5.25 21,5M21,18.5C19.9,18.15 18.7,18 17.5,18C15.8,18 13.35,18.65 12,19.5V8C13.35,7.15 15.8,6.5 17.5,6.5C18.7,6.5 19.9,6.65 21,7V18.5Z"></path>
−
background: rgb(50, 50, 50);
+
              </svg>
−
text-align: center;
+
              <span>Notebook</span>
−
color: white;
+
            </li>
−
font-size: 20px;
+
          </a>
−
}
+
          <a href="https://2018.igem.org/Team:Rotterdam_HR/Experiments">
−
 
+
            <li>
−
/* ------ CONTAINERS ------ */
+
              <svg viewBox="0 0 24 24">
−
 
+
                <path d="M7,2V4H8V18A4,4 0 0,0 12,22A4,4 0 0,0 16,18V4H17V2H7M11,16C10.4,16 10,15.6 10,15C10,14.4 10.4,14 11,14C11.6,14 12,14.4 12,15C12,15.6 11.6,16 11,16M13,12C12.4,12 12,11.6 12,11C12,10.4 12.4,10 13,10C13.6,10 14,10.4 14,11C14,11.6 13.6,12 13,12M14,7H10V4H14V7Z"></path>
−
.nav-cards {
+
              </svg>
−
  display: flex;
+
              <span>Experiments</span>
−
  flex-wrap: wrap;
+
            </li>
−
   justify-content: center;
+
          </a>
−
  margin: 20px auto;
+
          <a href="https://2018.igem.org/Team:Rotterdam_HR/Results">
−
}
+
            <li>
−
 
+
              <svg viewBox="0 0 24 24">
−
.nav-card {
+
                <path d="M19,3H14.82C14.4,1.84 13.3,1 12,1C10.7,1 9.6,1.84 9.18,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M12,3A1,1 0 0,1 13,4A1,1 0 0,1 12,5A1,1 0 0,1 11,4A1,1 0 0,1 12,3M7,7H17V5H19V19H5V5H7V7M7.5,13.5L9,12L11,14L15.5,9.5L17,11L11,17L7.5,13.5Z"></path>
−
  width: 180px;
+
              </svg>
−
  height: 180px;
+
              <span>Results</span>
−
  margin: 10px;
+
            </li>
−
  position: relative;
+
          </a>
−
  color: white;
+
          <div style="height: 1em"></div>
−
  text-align: center;
+
          <a href="https://2018.igem.org/Team:Rotterdam_HR/Basic_Part">
−
  background: var(--color-software);
+
            <li>
−
  box-shadow: 2px 2px 10px rgba(0,0,0,0.25);
+
              <svg viewBox="0 0 24 24">
−
  transition: 200ms;
+
                <path d="M4,2H6V4C6,5.44 6.68,6.61 7.88,7.78C8.74,8.61 9.89,9.41 11.09,10.2L9.26,11.39C8.27,10.72 7.31,10 6.5,9.21C5.07,7.82 4,6.1 4,4V2M18,2H20V4C20,6.1 18.93,7.82 17.5,9.21C16.09,10.59 14.29,11.73 12.54,12.84C10.79,13.96 9.09,15.05 7.88,16.22C6.68,17.39 6,18.56 6,20V22H4V20C4,17.9 5.07,16.18 6.5,14.79C7.91,13.41 9.71,12.27 11.46,11.16C13.21,10.04 14.91,8.95 16.12,7.78C17.32,6.61 18,5.44 18,4V2M14.74,12.61C15.73,13.28 16.69,14 17.5,14.79C18.93,16.18 20,17.9 20,20V22H18V20C18,18.56 17.32,17.39 16.12,16.22C15.26,15.39 14.11,14.59 12.91,13.8L14.74,12.61M7,3H17V4L16.94,4.5H7.06L7,4V3M7.68,6H16.32C16.08,6.34 15.8,6.69 15.42,7.06L14.91,7.5H9.07L8.58,7.06C8.2,6.69 7.92,6.34 7.68,6M9.09,16.5H14.93L15.42,16.94C15.8,17.31 16.08,17.66 16.32,18H7.68C7.92,17.66 8.2,17.31 8.58,16.94L9.09,16.5M7.06,19.5H16.94L17,20V21H7V20L7.06,19.5Z"></path>
−
  border-radius: 3px;
+
              </svg>
−
}
+
              <span>Parts</span>
−
 
+
            </li>
−
.nav-card svg {
+
          </a>
−
  position: absolute;
+
          <div style="height: 1em"></div>
−
  fill: white;
+
          <a href="https://2018.igem.org/Team:Rotterdam_HR/Human_Practices">
−
  width: 50%;
+
            <li>
−
  height: 50%;
+
              <svg viewBox="0 0 24 24">
−
  top: 10%;
+
                <path d="M1.5,4V5.5C1.5,9.65 3.71,13.28 7,15.3V20H22V18C22,15.34 16.67,14 14,14C14,14 13.83,14 13.75,14C9,14 5,10 5,5.5V4M14,4A4,4 0 0,0 10,8A4,4 0 0,0 14,12A4,4 0 0,0 18,8A4,4 0 0,0 14,4Z"></path>
−
  left: 25%;
+
              </svg>
−
}
+
              <span>Human Practices</span>
−
 
+
            </li>
−
.nav-card h2 {
+
          </a>
−
  position: absolute;
+
          <a href="https://2018.igem.org/Team:Rotterdam_HR/Public_Engagement">
−
  bottom: 0;
+
            <li>
−
  left: 5px;
+
              <svg>
−
right: 5px;
+
                <path></path>
−
color: white;
+
              </svg>
−
}
+
              <span>Public Engagement</span>
−
 
+
            </li>
−
.nav-card::before, .nav-card::after {
+
          </a>
−
  content: '';
+
          <a href="https://2018.igem.org/Team:Rotterdam_HR/Outreach">
−
  position: absolute;
+
            <li>
−
  top: 5px;
+
              <svg>
−
  left: 5px;
+
                <path></path>
−
  right: 5px;
+
              </svg>
−
  bottom: 5px;
+
              <span>Outreach</span>
−
  transition: transform 400ms;
+
            </li>
−
}
+
          </a>
−
 
+
          <div style="height: 1em"></div>
−
.nav-card::before {
+
          <a href="https://2018.igem.org/Team:Rotterdam_HR/Safety">
−
  border-top: white solid 1px;
+
            <li>
−
  border-bottom: white solid 1px;
+
              <svg viewBox="0 0 24 24">
−
  transform: scale(0, 1);
+
                <path d="M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z"></path>
−
}
+
              </svg>
−
 
+
              <span>Safety</span>
−
.nav-card::after {
+
            </li>
−
  border-left: white solid 1px;
+
          </a>
−
  border-right: white solid 1px;
+
          <div style="height: 1em"></div>
−
  transform: scale(1, 0);
+
          <a href="https://2018.igem.org/Team:Rotterdam_HR/Hardware">
−
}
+
            <li>
−
 
+
              <svg viewBox="0 0 24 24">
−
.nav-card:hover::before {
+
                <path d="M15.9,18.45C17.25,18.45 18.35,17.35 18.35,16C18.35,14.65 17.25,13.55 15.9,13.55C14.54,13.55 13.45,14.65 13.45,16C13.45,17.35 14.54,18.45 15.9,18.45M21.1,16.68L22.58,17.84C22.71,17.95 22.75,18.13 22.66,18.29L21.26,20.71C21.17,20.86 21,20.92 20.83,20.86L19.09,20.16C18.73,20.44 18.33,20.67 17.91,20.85L17.64,22.7C17.62,22.87 17.47,23 17.3,23H14.5C14.32,23 14.18,22.87 14.15,22.7L13.89,20.85C13.46,20.67 13.07,20.44 12.71,20.16L10.96,20.86C10.81,20.92 10.62,20.86 10.54,20.71L9.14,18.29C9.05,18.13 9.09,17.95 9.22,17.84L10.7,16.68L10.65,16L10.7,15.31L9.22,14.16C9.09,14.05 9.05,13.86 9.14,13.71L10.54,11.29C10.62,11.13 10.81,11.07 10.96,11.13L12.71,11.84C13.07,11.56 13.46,11.32 13.89,11.15L14.15,9.29C14.18,9.13 14.32,9 14.5,9H17.3C17.47,9 17.62,9.13 17.64,9.29L17.91,11.15C18.33,11.32 18.73,11.56 19.09,11.84L20.83,11.13C21,11.07 21.17,11.13 21.26,11.29L22.66,13.71C22.75,13.86 22.71,14.05 22.58,14.16L21.1,15.31L21.15,16L21.1,16.68M6.69,8.07C7.56,8.07 8.26,7.37 8.26,6.5C8.26,5.63 7.56,4.92 6.69,4.92A1.58,1.58 0 0,0 5.11,6.5C5.11,7.37 5.82,8.07 6.69,8.07M10.03,6.94L11,7.68C11.07,7.75 11.09,7.87 11.03,7.97L10.13,9.53C10.08,9.63 9.96,9.67 9.86,9.63L8.74,9.18L8,9.62L7.81,10.81C7.79,10.92 7.7,11 7.59,11H5.79C5.67,11 5.58,10.92 5.56,10.81L5.4,9.62L4.64,9.18L3.5,9.63C3.41,9.67 3.3,9.63 3.24,9.53L2.34,7.97C2.28,7.87 2.31,7.75 2.39,7.68L3.34,6.94L3.31,6.5L3.34,6.06L2.39,5.32C2.31,5.25 2.28,5.13 2.34,5.03L3.24,3.47C3.3,3.37 3.41,3.33 3.5,3.37L4.63,3.82L5.4,3.38L5.56,2.19C5.58,2.08 5.67,2 5.79,2H7.59C7.7,2 7.79,2.08 7.81,2.19L8,3.38L8.74,3.82L9.86,3.37C9.96,3.33 10.08,3.37 10.13,3.47L11.03,5.03C11.09,5.13 11.07,5.25 11,5.32L10.03,6.06L10.06,6.5L10.03,6.94Z"></path>
−
  transform: scale(1, 1);
+
              </svg>
−
}
+
              <span>Hardware</span>
−
 
+
            </li>
−
.nav-card:hover::after {
+
          </a>
−
  transform: scale(1, 1);
+
          <a href="https://2018.igem.org/Team:Rotterdam_HR/Hardware_Peristaltic_Pump">
−
}
+
            <li>
−
 
+
              <svg>
−
.text-container {
+
                <path></path>
−
  position: relative;
+
              </svg>
−
  text-align: center;
+
              <span>Peristaltic Pump</span>
−
  margin: 60px auto;
+
            </li>
−
  padding: 10px;
+
          </a>
−
  max-width: 1000px;
+
          <a href="https://2018.igem.org/Team:Rotterdam_HR/Hardware_Temperature_Controller">
−
}
+
            <li>
−
 
+
              <svg>
−
.text-container h1 {
+
                <path></path>
−
  font-size: 40px;
+
              </svg>
−
  position: relative;
+
              <span>Temperature Controller</span>
−
  color: var(--color-primary);
+
            </li>
−
}
+
          </a>
−
 
+
          <a href="https://2018.igem.org/Team:Rotterdam_HR/Hardware_Test_Tube_Shaker">
−
.text-container h1::after {
+
            <li>
−
  content: '';
+
              <svg>
−
  position: absolute;
+
                <path></path>
−
  bottom: 0;
+
              </svg>
−
  left: 10%;
+
              <span>Test Tube Shaker</span>
−
  right: 10%;
+
            </li>
−
  height: 4px;
+
          </a>
−
  border-radius: 2px;
+
          <div style="height: 1em"></div>
−
  background: currentColor;
+
          <a href="https://2018.igem.org/Team:Rotterdam_HR/Software">
−
}
+
            <li>
−
 
+
              <svg viewBox="0 0 24 24">
−
.text-container p {
+
                <path d="M14.6,16.6L19.2,12L14.6,7.4L16,6L22,12L16,18L14.6,16.6M9.4,16.6L4.8,12L9.4,7.4L8,6L2,12L8,18L9.4,16.6Z"></path>
−
  margin-bottom: 20px;
+
              </svg>
−
  font-size: 24px !important;
+
              <span>Software</span>
−
  text-align: center !important;
+
            </li>
−
}
+
          </a>
−
 
+
          <a href="https://2018.igem.org/Team:Rotterdam_HR/Wikistat">
−
.nav-button {
+
            <li>
−
position: relative;
+
              <svg>
−
  padding: 10px 20px;
+
                <path></path>
−
  background: var(--color-primary);
+
              </svg>
−
  color: white;
+
              <span>Wiki Statistics</span>
−
  text-decoration: none;
+
            </li>
−
  box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
+
          </a>
−
  font-size: 20px !important;
+
        </form>
−
}
+
      </ul>
−
 
+
    </div>
−
.nav-button::before {
+
   </nav>
−
  content: '> ';
+
−
}
+
−
 
+
−
.nav-button::after {
+
−
  content: '';
+
−
  position: absolute;
+
−
  left: 0;
+
−
  right: 0;
+
−
  bottom: 0;
+
−
  height: 3px;
+
−
  background: white;
+
−
  transform: scale(0, 1);
+
−
  transform-origin: left;
+
−
  transition: transform 200ms;
+
−
}
+
−
 
+
−
.nav-button:hover::after {
+
−
   transform: scale(1, 1);
+
−
}
+

Latest revision as of 09:44, 2 November 2018

<nav> 

   <style>
     .menu svg {
       width: 24px;
       height: 24px;
     }
   </style>
    <a class="main-item" id="index" href="https://2018.igem.org/Team:Rotterdam_HR"> <svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" /> </svg> Home </a> 
           <svg style="width:24px;height:24px" viewBox="0 0 24 24">
         <path d="M12,6A3,3 0 0,0 9,9A3,3 0 0,0 12,12A3,3 0 0,0 15,9A3,3 0 0,0 12,6M6,8.17A2.5,2.5 0 0,0 3.5,10.67A2.5,2.5 0 0,0 6,13.17C6.88,13.17 7.65,12.71 8.09,12.03C7.42,11.18 7,10.15 7,9C7,8.8 7,8.6 7.04,8.4C6.72,8.25 6.37,8.17 6,8.17M18,8.17C17.63,8.17 17.28,8.25 16.96,8.4C17,8.6 17,8.8 17,9C17,10.15 16.58,11.18 15.91,12.03C16.35,12.71 17.12,13.17 18,13.17A2.5,2.5 0 0,0 20.5,10.67A2.5,2.5 0 0,0 18,8.17M12,14C10,14 6,15 6,17V19H18V17C18,15 14,14 12,14M4.67,14.97C3,15.26 1,16.04 1,17.33V19H4V17C4,16.22 4.29,15.53 4.67,14.97M19.33,14.97C19.71,15.53 20,16.22 20,17V19H23V17.33C23,16.04 21,15.26 19.33,14.97Z" />
       </svg>
       Team

           <svg style="width:24px;height:24px" viewBox="0 0 24 24">
         <path d="M9.46,6.28L11.05,9C8.47,9.26 6.5,11.41 6.5,14A5,5 0 0,0 11.5,19C13.55,19 15.31,17.77 16.08,16H13.5V14H21.5V16H19.25C18.84,17.57 17.97,18.96 16.79,20H19.5V22H3.5V20H6.21C4.55,18.53 3.5,16.39 3.5,14C3.5,10.37 5.96,7.2 9.46,6.28M12.74,2.07L13.5,3.37L14.36,2.87L17.86,8.93L14.39,10.93L10.89,4.87L11.76,4.37L11,3.07L12.74,2.07Z" />
       </svg>
       Project

         <a href="https://2018.igem.org/Team:Rotterdam_HR/Parts" class="main-item" id="parts">
       <svg style="width:24px;height:24px" viewBox="0 0 24 24">
         <path d="M4,2H6V4C6,5.44 6.68,6.61 7.88,7.78C8.74,8.61 9.89,9.41 11.09,10.2L9.26,11.39C8.27,10.72 7.31,10 6.5,9.21C5.07,7.82 4,6.1 4,4V2M18,2H20V4C20,6.1 18.93,7.82 17.5,9.21C16.09,10.59 14.29,11.73 12.54,12.84C10.79,13.96 9.09,15.05 7.88,16.22C6.68,17.39 6,18.56 6,20V22H4V20C4,17.9 5.07,16.18 6.5,14.79C7.91,13.41 9.71,12.27 11.46,11.16C13.21,10.04 14.91,8.95 16.12,7.78C17.32,6.61 18,5.44 18,4V2M14.74,12.61C15.73,13.28 16.69,14 17.5,14.79C18.93,16.18 20,17.9 20,20V22H18V20C18,18.56 17.32,17.39 16.12,16.22C15.26,15.39 14.11,14.59 12.91,13.8L14.74,12.61M7,3H17V4L16.94,4.5H7.06L7,4V3M7.68,6H16.32C16.08,6.34 15.8,6.69 15.42,7.06L14.91,7.5H9.07L8.58,7.06C8.2,6.69 7.92,6.34 7.68,6M9.09,16.5H14.93L15.42,16.94C15.8,17.31 16.08,17.66 16.32,18H7.68C7.92,17.66 8.2,17.31 8.58,16.94L9.09,16.5M7.06,19.5H16.94L17,20V21H7V20L7.06,19.5Z" />
       </svg>
       Parts
     </a>
 

           <a href="https://2018.igem.org/Team:Rotterdam_HR">
         <img src="T--Rotterdam_HR--logo.jpeg" alt="iGEM Rotterdam logo" style="width: 100%; height: 75%;">
       </a>

         <a href="https://2018.igem.org/Team:Rotterdam_HR/Safety" class="main-item" id="safety">
       <svg style="width:24px;height:24px" viewBox="0 0 24 24">
         <path d="M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z" />
       </svg>
       Safety
     </a>
 

           <svg style="width:24px;height:24px" viewBox="0 0 24 24">
         <path d="M1.5,4V5.5C1.5,9.65 3.71,13.28 7,15.3V20H22V18C22,15.34 16.67,14 14,14C14,14 13.83,14 13.75,14C9,14 5,10 5,5.5V4M14,4A4,4 0 0,0 10,8A4,4 0 0,0 14,12A4,4 0 0,0 18,8A4,4 0 0,0 14,4Z" />
       </svg>
       Human Practices

           <svg style="width:24px;height:24px" viewBox="0 0 24 24">
         <path fill="currentColor" d="M15.9,18.45C17.25,18.45 18.35,17.35 18.35,16C18.35,14.65 17.25,13.55 15.9,13.55C14.54,13.55 13.45,14.65 13.45,16C13.45,17.35 14.54,18.45 15.9,18.45M21.1,16.68L22.58,17.84C22.71,17.95 22.75,18.13 22.66,18.29L21.26,20.71C21.17,20.86 21,20.92 20.83,20.86L19.09,20.16C18.73,20.44 18.33,20.67 17.91,20.85L17.64,22.7C17.62,22.87 17.47,23 17.3,23H14.5C14.32,23 14.18,22.87 14.15,22.7L13.89,20.85C13.46,20.67 13.07,20.44 12.71,20.16L10.96,20.86C10.81,20.92 10.62,20.86 10.54,20.71L9.14,18.29C9.05,18.13 9.09,17.95 9.22,17.84L10.7,16.68L10.65,16L10.7,15.31L9.22,14.16C9.09,14.05 9.05,13.86 9.14,13.71L10.54,11.29C10.62,11.13 10.81,11.07 10.96,11.13L12.71,11.84C13.07,11.56 13.46,11.32 13.89,11.15L14.15,9.29C14.18,9.13 14.32,9 14.5,9H17.3C17.47,9 17.62,9.13 17.64,9.29L17.91,11.15C18.33,11.32 18.73,11.56 19.09,11.84L20.83,11.13C21,11.07 21.17,11.13 21.26,11.29L22.66,13.71C22.75,13.86 22.71,14.05 22.58,14.16L21.1,15.31L21.15,16L21.1,16.68M6.69,8.07C7.56,8.07 8.26,7.37 8.26,6.5C8.26,5.63 7.56,4.92 6.69,4.92A1.58,1.58 0 0,0 5.11,6.5C5.11,7.37 5.82,8.07 6.69,8.07M10.03,6.94L11,7.68C11.07,7.75 11.09,7.87 11.03,7.97L10.13,9.53C10.08,9.63 9.96,9.67 9.86,9.63L8.74,9.18L8,9.62L7.81,10.81C7.79,10.92 7.7,11 7.59,11H5.79C5.67,11 5.58,10.92 5.56,10.81L5.4,9.62L4.64,9.18L3.5,9.63C3.41,9.67 3.3,9.63 3.24,9.53L2.34,7.97C2.28,7.87 2.31,7.75 2.39,7.68L3.34,6.94L3.31,6.5L3.34,6.06L2.39,5.32C2.31,5.25 2.28,5.13 2.34,5.03L3.24,3.47C3.3,3.37 3.41,3.33 3.5,3.37L4.63,3.82L5.4,3.38L5.56,2.19C5.58,2.08 5.67,2 5.79,2H7.59C7.7,2 7.79,2.08 7.81,2.19L8,3.38L8.74,3.82L9.86,3.37C9.96,3.33 10.08,3.37 10.13,3.47L11.03,5.03C11.09,5.13 11.07,5.25 11,5.32L10.03,6.06L10.06,6.5L10.03,6.94Z"></path>
       </svg>
       Hardware

           <svg style="width:24px;height:24px" viewBox="0 0 24 24">
         <path d="M14.6,16.6L19.2,12L14.6,7.4L16,6L22,12L16,18L14.6,16.6M9.4,16.6L4.8,12L9.4,7.4L8,6L2,12L8,18L9.4,16.6Z" />
       </svg>
       Software

 </nav>