Difference between revisions of "Template:UCopenhagen-header/CSS"

Line 1: Line 1:
−
<html>
+
<!DOCTYPE html>
  
 +
<html lang="en">
  
−
<!DOCTYPE html>
+
    <meta charset="utf-8">
−
<html>
+
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
−
 
+
     <meta name="viewport" content="width=device-width, initial-scale=1">
−
     <!-- Bootstrap Core CSS -->
+
    <meta name="description" content="UCPH - iGEM">
−
     <link href="https://2017.igem.org/wiki/index.php?title=Template:BOKU-Vienna-bootstrap.css&action=raw&ctype=text/css" rel="stylesheet"/>
+
    <meta name="author" content="InCell">
  
 
<head>
 
<head>
Line 13: Line 14:
 
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=open+Sans">
 
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=open+Sans">
 
</head>
 
</head>
−
 
  
 
<body>
 
<body>
Line 19: Line 19:
 
 
 
<ul id="rmenu">
 
<ul id="rmenu">
−
<li> <a class="menu-item" href="https://2017.igem.org/Team:Amsterdam"> HOME</a>
+
<li> <a class="menu-item" href="https://2017.igem.org/Team:UCopenhagen"> HOME</a>
 
 
 
</li>
 
</li>
−
<li> <a class="menu-item" href="https://2017.igem.org/Team:Amsterdam/team">TEAM</a>  
+
<li> <a class="menu-item" href="https://2017.igem.org/Team:UCopenhagen/team">TEAM</a>  
 
<div class="sub-content">
 
<div class="sub-content">
 
<div class="sub-drop">
 
<div class="sub-drop">
 
<ul>
 
<ul>
−
<li><a href="https://2017.igem.org/Team:Amsterdam/team" class="sub-item">The Team</a></li>
+
<li><a href="https://2017.igem.org/Team:UCopenhagen/Team" class="sub-item">The Team</a></li>
 
<li><a href="#" class="sub-item">Team Attribution</a></li>
 
<li><a href="#" class="sub-item">Team Attribution</a></li>
 
</ul>
 
</ul>
Line 32: Line 32:
 
</div>
 
</div>
 
</li>
 
</li>
−
<li> <a class="menu-item" href="https://2017.igem.org/Team:Amsterdam/Project">PROJECT</a>
+
<li> <a class="menu-item" href="https://2017.igem.org/Team:UCopenhagen/Project">PROJECT</a>
 
<div class="sub-content">
 
<div class="sub-content">
 
<div class="sub-drop">
 
<div class="sub-drop">
Line 38: Line 38:
  
  
−
<li><a href="https://2017.igem.org/Team:Amsterdam/Project" class="sub-item">The Project</a></li>
+
<li><a href="https://2017.igem.org/Team:UCopenhagen/Project" class="sub-item">The Project</a></li>
 
<li><a href="#" class="sub-item">Modeling</a>
 
<li><a href="#" class="sub-item">Modeling</a>
 
<ul id="subx-menu">
 
<ul id="subx-menu">
Line 55: Line 55:
  
 
</li>
 
</li>
−
<li> <a class="menu-item" href="https://2017.igem.org/Team:Amsterdam/News">NEWS</a>
+
<li> <a class="menu-item" href="https://2017.igem.org/Team:UCopenhagen/Parts">PARTS</a>
 
<div class="sub-content">
 
<div class="sub-content">
 
<div class="sub-drop">
 
<div class="sub-drop">
Line 67: Line 67:
 
</div>
 
</div>
 
</div> </li>
 
</div> </li>
−
<li> <a class="menu-item" href="https://2017.igem.org/Team:Amsterdam/Outreach">OUTREACH</a> </li>
+
<li> <a class="menu-item" href="https://2017.igem.org/Team:UCopenhagen/Outreach">OUTREACH</a> </li>
−
<li> <a class="menu-item" href="https://2017.igem.org/Team:Amsterdam/Sponsors">SPONSORS</a> </li>
+
<li> <a class="menu-item" href="https://2017.igem.org/Team:UCopenhagen/Sponsors">SPONSORS</a> </li>
−
<li> <a class="menu-item" href="https://2017.igem.org/Team:Amsterdam/Laporatory">LABORATORY</a>
+
<li> <a class="menu-item" href="https://2017.igem.org/Team:UCopenhagen/Safety">SAFETY</a>
 
<div class="sub-content">
 
<div class="sub-content">
 
<div class="sub-drop">
 
<div class="sub-drop">
Line 80: Line 80:
 
</div>
 
</div>
 
</li>
 
</li>
−
<li> <a class="menu-item" href="https://2017.igem.org/Team:Amsterdam/Achievements">ACHIEVEMENTS</a> </li>
+
<li> <a class="menu-item" href="https://2017.igem.org/Team:UCopenhagen/Achievements">ACHIEVEMENTS</a> </li>
 
<li> <a class="menu-item" href="#">SAFETY</a> </li>
 
<li> <a class="menu-item" href="#">SAFETY</a> </li>
 
 
Line 98: Line 98:
 
margin: 0;
 
margin: 0;
 
padding: 0;
 
padding: 0;
−
font: 1em "open Sans", sans-serf;
+
font: 1em "Tahoma", Geneva, sans-serif;
 
}
 
}
 
body {
 
body {
  
−
background-color: #eee;
+
background-color: transparent;
 
}
 
}
 +
  
  
Line 116: Line 117:
 
box-shadow: -1px 15px 1px rgba(0,0,0,0.3);  
 
box-shadow: -1px 15px 1px rgba(0,0,0,0.3);  
 
width: 100%;
 
width: 100%;
−
background-color: #333;
+
background-color: #264653;
−
color: white;
+
        color: white;
−
height: 60px;
+
height: 60px;  
 
}
 
}
 
.myimg {
 
.myimg {
−
width: 100px;
+
width: 200px;
−
float: left;
+
float: right;
 
height: 30px;
 
height: 30px;
 
padding: 15px 30px;
 
padding: 15px 30px;
Line 145: Line 146:
 
float: left;
 
float: left;
 
}
 
}
−
 
  
 
.menu-item {
 
.menu-item {
Line 157: Line 157:
  
 
.menu-item:hover {
 
.menu-item:hover {
−
 
+
background-color: #2a9d8f;
−
background-color: #ff0055;
+
 
}
 
}
  
Line 196: Line 195:
  
 
.sub-drop ul li:hover {
 
.sub-drop ul li:hover {
−
 
 
background-color: #ff0055;
 
background-color: #ff0055;
 
}
 
}
Line 269: Line 267:
  
 
#content {
 
#content {
−
     width: 100vw;
+
     width:100%;
−
    padding: 0px;
+
      height: 100%;  
−
    border: none;
+
      padding: 0px;
−
    color: black;
+
      margin-top:-30px;  
−
    margin-left: auto;
+
      margin-left:0px;  
−
    margin-right: auto;
+
      background-color: #2A9D8F;  
−
    background-color: #fff;
+
      color: #264653;  
−
    position: relative;
+
      font-family: Tahoma, Geneva, sans-serif;
−
}
+
    }
  
−
#globalWrapper {
+
#globalWrapper{  
−
     font-size: inherit;
+
     height: 100%; }
−
     padding-bottom: 0;
+
    body { background-color: #2A9D8F; height: 100%; }
−
}
+
     #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
  
 
#top_menu_under {
 
#top_menu_under {
 
     height: 0px;
 
     height: 0px;
 +
      background: #2A9D8F;
 +
 
}
 
}
  
Line 291: Line 291:
 
     list-style-image: none; //removes the iGEM wiki bullets
 
     list-style-image: none; //removes the iGEM wiki bullets
 
}
 
}
 +
 +
.light {
 +
      font-weight: 400;
 +
      background: #2A9D8F;
 +
    }
 +
 +
/*.....................................*/
 +
 +
a:link {
 +
    color: white;
 +
    background-color: transparent;
 +
    text-decoration: none;
 +
}
 +
 +
a:visited {
 +
    color: white;
 +
    background-color: transparent;
 +
    text-decoration: none;
 +
}
 +
 +
    html {
 +
      width: 100%;
 +
      height: 100%;
 +
    }
 +
    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: white;
 +
      -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: white;
 +
    }
 +
 +
 +
/*.....................................*/
 +
  .myintro {
 +
      display: table;
 +
      width: 100%;
 +
      height: 100%;
 +
      padding: 200px 0;
 +
      text-align: center;
 +
      color: #E8DBD7;
 +
      background-color: #264653;
 +
      -webkit-background-size: cover;
 +
      -moz-background-size: cover;
 +
      background-size: cover;
 +
      -o-background-size: cover;
 +
    }
 +
    .myintro .myintro-body {
 +
      display: table-cell;
 +
      vertical-align: middle;
 +
    }
 +
    .myintro .myintro-body .brand-heading {
 +
      font-size: 40px;
 +
    }
 +
    .myintro .myintro-body .myintro-text {
 +
      font-size: 18px;
 +
      font-family: Tahoma, Geneva, sans-serif;
 +
    }
 +
 +
@media (min-width: 768px) {
 +
      .myintro {
 +
        height: 100%;
 +
        padding: 0;
 +
      }
 +
      .myintro .myintro-body .brand-heading {
 +
        font-size: 100px;
 +
      }
 +
      .myintro .myintro-body .myintro-text {
 +
        font-size: 26px;
 +
      }
 +
    }
 +
    .btn-circle {
 +
      width: 70px;
 +
      height: 70px;
 +
      margin-top: 15px;
 +
      padding: 7px 16px;
 +
      border: 2px solid black;
 +
      border-radius: 100% !important;
 +
      font-size: 40px;
 +
      color: black;
 +
      background: transparent;
 +
      -webkit-transition: background 0.3s ease-in-out;
 +
      -moz-transition: background 0.3s ease-in-out;
 +
      transition: background 0.3s ease-in-out;
 +
    }
 +
    #downarrow img {
 +
      border: 2px solid black;
 +
      padding: 10px 10px;
 +
      border-radius: 100% !important;
 +
      height: 55px;
 +
      display: block;
 +
      margin: auto;
 +
    }
 +
    .btn-circle:hover,
 +
    .btn-circle:focus {
 +
      outline: none;
 +
      color: white;
 +
      background: rgba(255, 255, 255, 0.1);
 +
    }
 +
    .btn-circle i.animated {
 +
      -webkit-transition-property: -webkit-transform;
 +
      -webkit-transition-duration: 1s;
 +
      -moz-transition-property: -moz-transform;
 +
      -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: 100px;
 +
      padding-bottom: 100px;
 +
      height: auto;
 +
      min-height: 100% !important;
 +
    }
 +
 +
    #map {
 +
      width: 100%;
 +
      height: 100px;
 +
      margin-top: 100px;
 +
    }
 +
    @media (min-width: 767px) {
 +
      .content-section {
 +
        height: auto;
 +
        padding-top: 100px;
 +
        padding-bottom: 100px;
 +
        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;
 +
        margin-bottom: 20px;
 +
        padding: 0;
 +
      }
 +
      ul.banner-social-buttons li:last-child {
 +
        margin-bottom: 0;
 +
      }
 +
    }
 +
    footer {
 +
      padding: 50px 0;
 +
    }
 +
    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);
 +
    }
 +
 +
/*.....................................*/
 +
 +
.sup-drop:hover .dropdown-content {
 +
    display: block;
 +
}
 +
 +
    .sponsor-section {
 +
      background-color: white;
 +
      color: black;
 +
    }
 +
  
 
</style>
 
</style>

Revision as of 12:16, 19 August 2017

<!DOCTYPE html>

inCell