Difference between revisions of "Team:Duesseldorf/Test2"

Line 2: Line 2:
  
 
<head>
 
<head>
−
 
−
<link rel="stylesheet" type="text/css"
 
−
href="https://2016.igem.org/Template:Duesseldorf/CSS?action=raw&ctype=text/css" />
 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximun-scale=1.0, user-scalable=no">
 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximun-scale=1.0, user-scalable=no">
 
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
Line 26: Line 23:
  
 
<style>
 
<style>
−
.frame {margin: 0; padding: 0;}
+
/***** Wiki CSS ******/
 +
 +
#sideMenu,
 +
#top_title {
 +
  display: none;
 +
}
 +
 +
#content {
 +
  width: 100%;
 +
  padding: 0px;
 +
  margin: 0px;
 +
  margin-top: -2px;
 +
  background-color: #e6e6e6;
 +
}
 +
 +
body {
 +
  background-color: #e6e6e6;
 +
  font-family: 'Roboto', sans-serif;
 +
  width: 100%
 +
  margin: 0px;
 +
  line-height: 1.5;
 +
  font-size: 15px;
 +
}
 +
/***** Normalize *****/
 +
 +
html {
 +
  -ms-text-size-adjust: 100%;
 +
  -webkit-text-size-adjust: 100%;
 +
}
 +
/***** Page CSS ******/
 +
 +
* {
 +
  -webkit-box-sizing: border-box;
 +
  -moz-box-sizing: border-box;
 +
  box-sizing: border-box
 +
}
 +
/* Fonts */
 +
 +
h1,
 +
h2,
 +
h3,
 +
h4,
 +
h5,
 +
h6 {
 +
  color: #0C9476;
 +
  padding-bottom: 5px;
 +
}
 +
 +
h1 {
 +
  font-size: 36px
 +
}
 +
 +
h2 {
 +
  font-size: 30px
 +
}
 +
 +
h3 {
 +
  font-size: 24px
 +
}
 +
 +
h4 {
 +
  font-size: 20px
 +
}
 +
 +
h5 {
 +
  font-size: 18px
 +
}
 +
 +
h6 {
 +
  font-size: 16px
 +
}
 +
 +
.page a:link {
 +
  color: #0C9476;
 +
  font-weight: bold;
 +
  -webkit-transition: all 0.4s ease;
 +
  -moz-transition: all 0.4s ease;
 +
  -ms-transition: all 0.4s ease;
 +
  -o-transition: all 0.4s ease;
 +
  transition: all 0.4s ease;
 +
  text-decoration: none;
 +
}
 +
 +
.page a:visited {
 +
  color: #0C9476;
 +
}
 +
 +
.page a:hover {
 +
  color: black;
 +
  text-decoration: underline;
 +
}
 +
 +
.page a:active {
 +
  color: #0C9476;
 +
}
 +
 +
.page p {padding-left: 3px; padding-right: 3px; font-size: 15px;}
 +
.page ul {padding-left: 3px; padding-right: 3px; font-size: 15px;}
 +
 +
dd {
 +
  font-size: 12px;
 +
}
 +
b {color:#0C9476 }
 +
 +
.text-justify {
 +
  text-align: justify;
 +
}
 +
 +
.text-left {
 +
  text-align: left;
 +
  padding-right: 10px;
 +
}
 +
 +
.text-right {
 +
  text-align: right;
 +
  padding-left: 10px;
 +
}
 +
 +
img {
 +
  max-width: 100%;
 +
  height: auto
 +
}
 +
/* Nützliche Klassen*/
 +
 +
.middle {
 +
  margin: auto;
 +
}
 +
 +
.width {
 +
  width: 80%;
 +
  max-width: 1200px;
 +
}
 +
 +
.top-padding {
 +
  padding-top: 15px;
 +
}
 +
/*Responsive*/
 +
 +
.row {
 +
  width: 100%;
 +
  float: left;
 +
}
 +
 +
.row::after {
 +
  content: "";
 +
  clear: both;
 +
  display: table;
 +
}
 +
/* For mobile phones: */
 +
 +
[class*="col-"] {
 +
  width: 100%;
 +
  float: left;
 +
}
 +
 +
.colhalf {
 +
  width: 50%;
 +
}
 +
 +
@media only screen and (min-width: 600px) {
 +
  /* For tablets: */
 +
  .col-m-1 {
 +
    width: 8.33%;
 +
  }
 +
  .col-m-2 {
 +
    width: 16.66%;
 +
  }
 +
  .col-m-3 {
 +
    width: 25%;
 +
  }
 +
  .col-m-4 {
 +
    width: 33.33%;
 +
  }
 +
  .col-m-5 {
 +
    width: 41.66%;
 +
  }
 +
  .col-m-6 {
 +
    width: 50%;
 +
  }
 +
  .col-m-7 {
 +
    width: 58.33%;
 +
  }
 +
  .col-m-8 {
 +
    width: 66.66%;
 +
  }
 +
  .col-m-9 {
 +
    width: 75%;
 +
  }
 +
  .col-m-10 {
 +
    width: 83.33%;
 +
  }
 +
  .col-m-11 {
 +
    width: 91.66%;
 +
  }
 +
  .col-m-12 {
 +
    width: 100%;
 +
  }
 +
}
 +
 +
@media only screen and (min-width: 1024px) {
 +
  /* For desktop: */
 +
  .col-1 {
 +
    width: 8.33%;
 +
  }
 +
  .col-2 {
 +
    width: 16.66%;
 +
  }
 +
  .col-3 {
 +
    width: 25%;
 +
  }
 +
  .col-4 {
 +
    width: 33.33%;
 +
  }
 +
  .col-5 {
 +
    width: 41.66%;
 +
  }
 +
  .col-6 {
 +
    width: 50%;
 +
  }
 +
  .col-7 {
 +
    width: 58.33%;
 +
  }
 +
  .col-8 {
 +
    width: 66.66%;
 +
  }
 +
  .col-9 {
 +
    width: 75%;
 +
  }
 +
  .col-10 {
 +
    width: 83.33%;
 +
  }
 +
  .col-11 {
 +
    width: 91.66%;
 +
  }
 +
  .col-12 {
 +
    width: 100%;
 +
  }
 +
}
 +
/*Header*/
 +
 +
.banner {
 +
  background-color: #e6e6e6;
 +
margin-bottom: 2%
 +
}
 +
 +
.navigation {
 +
  background-color: #e6e6e6;
 +
  margin-bottom: 1%;
 +
}
 +
 +
ul.topnav {
 +
  list-style: none;
 +
  margin: 0;
 +
  padding: 0;
 +
  overflow: hidden;
 +
}
 +
 +
ul.topnav li {display:inline;}
 +
 +
ul.topnav li a {
 +
  display: inline-block;
 +
  color: grey;
 +
  text-align: center;
 +
  padding: 14px 16px;
 +
  text-decoration: none;
 +
  font-weight: normal;
 +
  font-size: 17px;
 +
  -webkit-transition: all 0.4s ease;
 +
  -moz-transition: all 0.4s ease;
 +
  -ms-transition: all 0.4s ease;
 +
  -o-transition: all 0.4s ease;
 +
  transition: all 0.4s ease;
 +
}
 +
 +
ul.topnav li a.active {
 +
  color: #0C9476;
 +
}
 +
 +
ul.topnav li a:hover {
 +
  color: #0C9476;
 +
  text-decoration: underline;
 +
}
 +
 +
ul.topnav li.icon {
 +
  display: none;
 +
}
 +
 +
@media screen and (max-width: 1024px) {
 +
  ul.topnav li:not(: last-child) {
 +
    display: none;
 +
  }
 +
  ul.topnav li {
 +
    float: left;
 +
  }
 +
  ul.topnav li.icon {
 +
    float: right;
 +
    display: inline-block;
 +
  }
 +
}
 +
 +
@media screen and (max-width: 1024px) {
 +
  ul.topnav.responsive {
 +
    position: relative;
 +
  }
 +
  ul.topnav.responsive li.icon {
 +
    position: absolute;
 +
    right: 0;
 +
    top: 0;
 +
  }
 +
  ul.topnav.responsive li {
 +
    float: none;
 +
    display: inline;
 +
  }
 +
  ul.topnav.responsive li a {
 +
    display: block;
 +
    text-align: left;
 +
  }
 +
}
 +
/*Page*/
 +
 +
.border {
 +
  border-radius: 10px;
 +
}
 +
 +
.shadow {
 +
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
 +
}
 +
 +
.page {
 +
  background-color: #ffffff;
 +
  margin-bottom: 6%;
 +
  padding-top: 4%;
 +
  padding-bottom: 2%;
 +
  overflow-x: auto
 +
}
 +
 +
.attention {
 +
  background-color: #0C9476;
 +
  border: 1px solid #09765e;
 +
  border-radius: 4px;
 +
  padding: 25px;
 +
  margin-bottom: 25px;
 +
}
 +
 +
.footer {
 +
  margin-top: 50px;
 +
}
 +
/* Footer Gallery */
 +
 +
.sponsor {
 +
  padding: 5px;
 +
}
 +
 +
.sponsor img {
 +
  -webkit-filter: grayscale(100%);
 +
  filter: grayscale(100%);
 +
}
 +
 +
.sponsor img:hover {
 +
  -webkit-filter: grayscale(0%);
 +
  filter: none;
 +
}
 +
/* Switch Gallery*/
 +
 +
.sg-container {
 +
  max-width: 100%;
 +
  float: left;
 +
  display: list-item;
 +
  list-style-type: none;
 +
  position: relative;
 +
  margin: 4px;
 +
  cursor: pointer
 +
}
 +
 +
.sg-container img {
 +
  max-width: 100%;
 +
  border-radius: 10px 10px 10px 10px;
 +
  -moz-border-radius: 10px 10px 10px 10px;
 +
  -webkit-border-radius: 10px 10px 10px 10px;
 +
  border: 0px solid #000000;
 +
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
 +
}
 +
 +
.img-hidden {
 +
  bottom: 0;
 +
  position: absolute;
 +
  opacity: 0;
 +
  filter: alpha(opacity=0);
 +
  width: 100%;
 +
  z-index: 1000;
 +
  transition: opacity 2s;
 +
  -moz-transition: opacity 2s;
 +
  -webkit-transition: opacity 2s;
 +
}
 +
 +
.sg-container.active .img-hidden {
 +
  opacity: 1;
 +
  filter: alpha(opacity=100);
 +
  transition: opacity 2s;
 +
  -moz-transition: opacity 2s;
 +
  -webkit-transition: opacity 2s;
 +
}
 +
/* Accordion */
 +
 +
button.accordion {
 +
  background-color: #eee;
 +
  color: #444;
 +
  cursor: pointer;
 +
  padding: 18px;
 +
  width: 100%;
 +
  border: none;
 +
  text-align: left;
 +
  outline: none;
 +
  font-size: 15px;
 +
  transition: 0.4s;
 +
}
 +
 +
button.accordion.active,
 +
button.accordion:hover {
 +
  background-color: #ddd;
 +
}
 +
 +
div.panel {
 +
  padding: 0 18px;
 +
  background-color: white;
 +
  max-height: 0;
 +
  overflow: hidden;
 +
  transition: 0.6s ease-in-out;
 +
  opacity: 0;
 +
}
 +
 +
div.panel.show {
 +
  opacity: 1;
 +
  max-height: 500px;
 +
}
 +
.sponsors img:hover {
 +
-webkit-filter: grayscale(0%);
 +
filter: none;
 +
}
 +
 
 +
.sponsors img {
 +
  display: inline-block;
 +
  vertical-align: middle; 
 +
  width: 25%;
 +
  transition: transform .2s ease-in-out;
 +
  -webkit-filter: grayscale(100%);
 +
  filter: grayscale(100%);
 +
}
 +
 
 +
/* Change number of boxes per row based on viewport width */
 +
@media all and (min-width: 600px) {
 +
  .sponsors img {
 +
    width: 20%;
 +
  }
 +
}
 +
@media all and (min-width: 1024px) {
 +
  .sponsors img {
 +
    width: 15%;
 +
  }
 +
}
  
 
nav ul {
 
nav ul {
Line 86: Line 542:
 
</head>
 
</head>
  
−
<div class="frame">
+
 
−
<nav style="margin: auto; padding: 0;">
+
<nav>
 
<ul>
 
<ul>
 
   <li><a href="#home">Home</a></li>
 
   <li><a href="#home">Home</a></li>
 
   <li><a href="#news">Project</a></li>
 
   <li><a href="#news">Project</a></li>
−
   <li class="dropdown"><a href="#" class="dropbtn">Achievements</a>
+
   <li class="dropdown"><a href="#" class="dropbtn">Achievements v</a>
 
     <div class="dropdown-content">
 
     <div class="dropdown-content">
 
       <a href="#">Results</a>
 
       <a href="#">Results</a>
Line 99: Line 555:
 
   </li>
 
   </li>
 
   <li><a href="#news">Cooperations</a></li>
 
   <li><a href="#news">Cooperations</a></li>
−
   <li class="dropdown"><a href="#" class="dropbtn">Outreach</a>
+
   <li class="dropdown"><a href="#" class="dropbtn">Outreach v</a>
 
     <div class="dropdown-content">
 
     <div class="dropdown-content">
 
       <a href="#">Results</a>
 
       <a href="#">Results</a>
Line 108: Line 564:
 
   <li><a href="#news">Lab book</a></li>
 
   <li><a href="#news">Lab book</a></li>
 
   <li><a href="#news">Safety</a></li>
 
   <li><a href="#news">Safety</a></li>
−
   <li class="dropdown"><a href="#" class="dropbtn">Team</a>
+
   <li class="dropdown"><a href="#" class="dropbtn">Team v</a>
 
     <div class="dropdown-content">
 
     <div class="dropdown-content">
 
       <a href="#">Results</a>
 
       <a href="#">Results</a>
Line 117: Line 573:
 
</ul>
 
</ul>
 
</nav>
 
</nav>
−
</div>
 
−
 
−
</body>
 
 
</html>
 
</html>

Revision as of 13:41, 27 September 2016