Difference between revisions of "Team:DTU-Denmark"

Line 2: Line 2:
 
<html>
 
<html>
 
<head>
 
<head>
 +
 +
 
     <!-- title to be displayed in the tab -->
 
     <!-- title to be displayed in the tab -->
 
<title>DTU iGEM wiki 2017</title>
 
<title>DTU iGEM wiki 2017</title>
Line 7: Line 9:
 
<!-- importing style sheet -->
 
<!-- importing style sheet -->
 
<link rel="stylesheet" type="text/css" href="https://2017.igem.org/Team:DTU-Denmark/stylesheetmain?action=raw&ctype=text/css">
 
<link rel="stylesheet" type="text/css" href="https://2017.igem.org/Team:DTU-Denmark/stylesheetmain?action=raw&ctype=text/css">
 +
 +
<style>
 +
/*imports custom font (is not used, but works as an example if you find an awesome font)*/
 +
/*@font-face { font-family: League; src: url('../fonts/League/LeagueGothic-Regular.otf'); }*/
 +
 +
/*sets boxes so that the width and height properties (and min/max properties)
 +
  includes content, padding and border, but not the margin*/
 +
* {
 +
  box-sizing: border-box;
 +
  font-family: sans-serif, "Times New Roman", Times, serif;
 +
}
 +
 +
/*makes the website span from edge to edge of the viewport*/
 +
body {
 +
position: relative;
 +
  width: 100%;
 +
  margin: 0px;
 +
  padding:0px;
 +
}
 +
 +
/*centers all headlines as standard*/
 +
h1, h2, h3, h4, h5, h6 {
 +
  text-align: center;
 +
}
 +
 +
/*defines percentage columns used for layout so everything
 +
  but the main content spans from edge to edge of the viewport*/
 +
.col-1 {width: 08.33%;}
 +
.col-2 {width: 16.66%;}
 +
.col-3 {width: 25.00%;}
 +
.col-4 {width: 33.33%;}
 +
.col-5 {width: 41.66%;}
 +
.col-6 {width: 50.00%;}
 +
.col-7 {width: 58.33%;}
 +
.col-8 {width: 66.66%;}
 +
.col-9 {width: 75.00%;}
 +
.col-10 {width: 83.33%;}
 +
.col-11 {width: 91.66%;}
 +
.col-12 {width: 100.0%;}
 +
 +
/*defines columns in pixels used for main content area, so
 +
  user zoom will not affect the layout*/
 +
.colp-1 {width: calc(1000px/12);}
 +
.colp-2 {width: calc(1000px/12*2);}
 +
.colp-3 {width: calc(1000px/12*3);}
 +
.colp-4 {width: calc(1000px/12*4);}
 +
.colp-5 {width: calc(1000px/12*5);}
 +
.colp-6 {width: calc(1000px/12*6);}
 +
.colp-7 {width: calc(1000px/12*7);}
 +
.colp-8 {width: calc(1000px/12*8);}
 +
.colp-9 {width: calc(1000px/12*9);}
 +
.colp-10 {width: calc(1000px/12*10);}
 +
.colp-11 {width: calc(1000px/12*11);}
 +
.colp-12 {width: 1000px;}
 +
 +
/*makes all the columns go to the left of
 +
  the page and "stack" to the right if room*/
 +
[class*="col-"] {
 +
  float: left;
 +
  padding: 15px;
 +
}
 +
[class*="colp-"] {
 +
  float: left;
 +
  padding: 15px;
 +
}
 +
 +
/***********EACH ROW MUST BE 12 COLUMNS TOTAL*********/
 +
 +
/*(example col-4, col-6, col-2 is a row)
 +
  clears the row of other content*/
 +
.row::after {
 +
  content: "";
 +
  clear: both;
 +
  display: table;
 +
}
 +
 +
 +
 +
/****************************************************************************************************************/
 +
/******************************************* NAVBAR AND PROGRESS BAR  *******************************************/
 +
/****************************************************************************************************************/
 +
 +
 +
 +
/*defines key properties of the nav bar*/
 +
nav {
 +
  margin: 0px;
 +
  padding: 0px;
 +
  overflow: hidden;
 +
  top: 0;
 +
  width: 100%;
 +
  height: 40px;
 +
}
 +
 +
/*hides list*/
 +
nav ul {
 +
  height: 0px;
 +
  list-style-type: none;
 +
}
 +
 +
/*sets color of nav bar when the page is scrolled to the top*/
 +
.navbar {
 +
  -webkit-transition: background 1s; /* Safari */
 +
  transition: background 1s;
 +
  background-image: -webkit-linear-gradient(180deg, rgba(40,40,40,0.6), rgba(150,150,150,0.3)); /* For Safari 5.1 to 6.0 */
 +
  background-image: -o-linear-gradient(180deg, rgba(40,40,40,0.6), rgba(150,150,150,0.3)); /* For Opera 11.1 to 12.0 */
 +
  background-image: -moz-linear-gradient(180deg, rgba(40,40,40,0.6), rgba(150,150,150,0.3)); /* For Firefox 3.6 to 15 */
 +
  background-image: linear-gradient(180deg, rgba(40,40,40,0.6), rgba(150,150,150,0.3)); /* Standard syntax (must be last) */
 +
  box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.3);
 +
}
 +
 +
/*sets the color of the nav bar when scrolled down to
 +
  the main text TRANSITIONS CANNOT BE USED HERE*/
 +
.navbar.scrolledpastnav {
 +
  -webkit-transition: background 1.5s; /* Safari */
 +
transition: background 1.5s;
 +
background-color: rgba(20,20,20,1);
 +
  box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.7);
 +
}
 +
 +
/*helps center navar. The sum of the nav bar choice
 +
  widths is 1000px (5*200px)*/
 +
.navbarcenter {
 +
    width: 1000px;
 +
    margin: auto;
 +
}
 +
 +
/*makes nav bar choices float next to each other*/
 +
.dropdown {
 +
    float: right;
 +
    height: 38px;
 +
}
 +
 +
/*layout of nav bar choice buttons*/
 +
.dropdown .dropbtn {
 +
  height: 38px;
 +
  display: inline-block;
 +
  color: white;
 +
  text-align: center;
 +
  padding: 10px 16px;
 +
  width: 200px;
 +
  text-decoration: none;
 +
  font-size: 1em;
 +
  font-family: sans-serif, "Times New Roman", Times, serif;
 +
}
 +
 +
/*sets background of navbar choice buttons when hovered*/
 +
.dropdown:hover .dropbtn {
 +
background: -webkit-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); /* For Safari 5.1 to 6.0 */
 +
  background: -o-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); /* For Opera 11.1 to 12.0 */
 +
  background: -moz-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); /* For Firefox 3.6 to 15 */
 +
  background: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); /* Standard syntax (must be last) */
 +
}
 +
 +
/*hides dropdown choices, sets background and shadows. makes sure that
 +
  the width is not less than the width of the nav bar choice buttons*/
 +
.dropdown-content {
 +
  -webkit-transition: background 1.5s; /* Safari */
 +
  transition: background 1.5s;
 +
 +
  /*border has same height as progress bar*/
 +
  border-top: 2px solid rgba(150,150,150,0.3);
 +
 +
  /*fixes layout issue with border rendering 3 px*/
 +
  margin-top: -0.1px;
 +
  display: none;
 +
  position: absolute;
 +
  background-color: transparent;
 +
  min-width: 200px;
 +
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 +
  z-index: 1;
 +
}
 +
 +
/*sets layout of dropdown menu when nav bar changes layout*/
 +
.dropdown-content.scrolledpastnav {
 +
  -webkit-transition: background 1.5s; /* Safari */
 +
  transition: background 1.5s;
 +
 +
  /*border has same height as progress bar*/
 +
  border-top: 2px solid transparent;
 +
}
 +
 +
 +
/*displays dropdown content when nav bar choice is hovered*/
 +
.dropdown:hover .dropdown-content, .dropdown:focus .dropdown-content {
 +
  display: block;
 +
}
 +
 +
/*defines nav bar dropdown link layout*/
 +
.dropdown-content a {
 +
  color: black;
 +
  background-color: white;
 +
  padding: 12px 16px;
 +
  text-decoration: none;
 +
  display: block;
 +
  text-align: left;
 +
}
 +
 +
/*changes navbar dropdown menu color when choice is hovered*/
 +
.dropdown-content a:hover, .dropdown-content a:focus {
 +
    background-color: rgb(235,235,235);
 +
}
 +
 +
/*********** PROGRESS BAR ************/
 +
 +
/*defines progress bar layout*/
 +
progress {
 +
  /* Positioning */
 +
  position: fixed;
 +
  left: 0;
 +
  top: 38px;
 +
 +
  /* Dimensions */
 +
  width: 100%;
 +
  height: 2px;
 +
 +
  /* Reset the apperance */ 
 +
  -webkit-appearance: none;
 +
    -moz-appearance: none;
 +
          appearance: none;
 +
 +
  /* Get rid of the default border in Firefox/Opera. */
 +
  border: none;
 +
 +
  /* For Firefox/IE10+ */
 +
  background-color: rgba(150,150,150,0.3);
 +
 +
  /* For IE10+, color of the progress bar */
 +
  color: white;
 +
}
 +
 +
/*changes progressbar when nav bar changes layout*/
 +
progress.scrolledpastnav {
 +
  -webkit-transition: background-color 1.5s; /* Safari */
 +
  transition: background-color 1.5s;
 +
  background-color: rgba(20,20,20,1);
 +
}
 +
 +
/*sets progress bar background for older browsers*/
 +
progress::-webkit-progress-bar {
 +
  background-color: rgba(150,150,150,0.3);
 +
}
 +
 +
/*sets color of progress bar value bar*/
 +
.flat::-webkit-progress-value {
 +
  -webkit-transition: background-color 1.5s; /* Safari */
 +
  transition: background-color 1.5s;
 +
  background-color: white;
 +
}
 +
 +
/*sets color of progress bar value bar*/
 +
.flat::-moz-progress-bar {
 +
  -webkit-transition: background-color 1.5s; /* Safari */
 +
  transition: background-color 1.5s;
 +
  background-color: white;
 +
}
 +
 +
/*sets the progress bar container (not so important for layout it seems)*/
 +
.progress-container {
 +
  width: 100%;
 +
  background-color: transparent;
 +
  position: fixed;
 +
  top: 38px;
 +
  left: 0;
 +
  height: 2px;
 +
  display: block;
 +
}
 +
 +
/******** END OF PROGRESS BAR ********/
 +
 +
 +
 +
/****************************************************************************************************************/
 +
/************************************* PARALLAX IMAGE (WHOLE SPLASH SCREEN) *************************************/
 +
/****************************************************************************************************************/
 +
 +
 +
 +
/*creates the parallax effect on main page when scrooling*/
 +
.parallax {
 +
position: relative;
 +
z-index: -1;
 +
  background-image: url("https://static.igem.org/mediawiki/2017/6/67/T--DTU-Denmark--Indian_Cobra.jpg");
 +
  width: inherit;
 +
 +
  /*height is viewport height +1.5% of viewport
 +
    height (matches with the height of .parralaxfade)*/
 +
  height: 101.5vh;
 +
  background-attachment: fixed;
 +
  background-position: center;
 +
  background-repeat: no-repeat;
 +
  background-size: cover;
 +
}
 +
 +
/*sets position and style for the headline text on main page*/
 +
.homepageheadline {
 +
position: absolute;
 +
width: 850px;
 +
height: 150px;
 +
line-height: 60px;
 +
  text-align: center;
 +
top: 12%;
 +
left: 50%;
 +
margin: 0px 0px 0px -425px;
 +
}
 +
 +
/*styles line one in the headline text on main page*/
 +
#homepageheadline1 {
 +
font-size: 5em;
 +
color: white;
 +
margin: 0px;
 +
padding: 0px;
 +
line-height: normal;
 +
font-family: sans-serif;
 +
text-shadow: 2px 2px 6px #727272;
 +
}
 +
 +
/*styles line two in the headline text on main page*/
 +
#homepageheadline2 {
 +
font-size: 3em;
 +
color: white;
 +
margin: 0px;
 +
padding: 0px;
 +
line-height: normal;
 +
font-family: sans-serif;
 +
text-shadow: 0px 0px 5px #727272;
 +
}
 +
 +
/*creates a fade from parallax image to main content
 +
  Height fits extra height in .parallax*/
 +
.parallaxfade {
 +
width: inherit;
 +
height: 1.5vh;
 +
position: absolute;
 +
bottom: 0px;
 +
background: -webkit-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); /* For Safari 5.1 to 6.0 */
 +
  background: -o-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); /* For Opera 11.1 to 12.0 */
 +
  background: -moz-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); /* For Firefox 3.6 to 15 */
 +
  background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,1)); /* Standard syntax (must be last) */
 +
}
 +
 +
 +
 +
/****************************************************************************************************************/
 +
/************************************************* MAIN CONTENT *************************************************/
 +
/****************************************************************************************************************/
 +
 +
 +
/*styles main text area on main page*/
 +
.maincontainer {
 +
margin: 100px auto;
 +
  width: 1000px;
 +
  text-align: justify;
 +
  clear: both;
 +
  display: table;
 +
}
 +
 +
/*container for the two pictures in top of main content*/
 +
.imgmenu {
 +
  max-width: 100%;
 +
  margin: 70px auto 100px auto;
 +
  overflow: hidden;
 +
}
 +
 +
/*sets container for the individual pictures*/
 +
.imgmenuitem {
 +
  position: relative;
 +
  width: 100%;
 +
  max-width: 700px;
 +
  margin: 0px auto;
 +
  height: 400px;
 +
  border-radius: 20px;
 +
  overflow: hidden;
 +
  cursor: pointer;
 +
}
 +
 +
/*sets layout for the pictures themselves*/
 +
.imgmenucontent {
 +
  height: 100%;
 +
  width: 100%;
 +
  background-size: cover;
 +
  background-repeat: no-repeat;
 +
  -webkit-transition: all .5s;
 +
  -moz-transition: all .5s;
 +
  -o-transition: all .5s;
 +
  transition: all .5s;
 +
  font
 +
}
 +
 +
/*the different images are styled*/
 +
.img1 {
 +
  background-image: url("https://static.igem.org/mediawiki/2017/e/e1/T--DTU-Denmark--snake_problem.jpg");
 +
  opacity: 0.9;
 +
  -webkit-filter: brightness(1.2);
 +
  filter: brightness(1.2);
 +
  background-position: -200px center;
 +
}
 +
.img2 {
 +
  background-image: url("https://static.igem.org/mediawiki/2017/b/bc/T--DTU-Denmark--snake_map.jpg");
 +
  background-position: -200px -20px;
 +
}
 +
 +
/*zooms picture when hovered*/
 +
.imgmenuitem:hover .imgmenucontent, .imgmenuitem:focus .imgmenucontent {
 +
  -ms-transform: scale(1.1);
 +
  -moz-transform: scale(1.1);
 +
  -webkit-transform: scale(1.1);
 +
  -o-transform: scale(1.1);
 +
  transform: scale(1.1);
 +
  opacity: 0.5;
 +
}
 +
 +
/*sets layout of picture overlay*/
 +
.imgmenuoverlay {
 +
  position: absolute;
 +
  transition: 0.5s ease;
 +
  background-color: rgba(50,50,50,0.6);
 +
  padding: 16px 12px;
 +
  width: 100%;
 +
  height: 40%;
 +
  bottom: 0px;
 +
}
 +
 +
/*changes layout of overlay on pictures when hovered*/
 +
.imgmenuitem:hover .imgmenuoverlay, .imgmenuitem:focus .imgmenuoverlay {
 +
  background-color: rgba(50,50,50,0.9);
 +
}
 +
 +
/*sets style of the text in the overlay*/
 +
.imgmenuoverlay a {
 +
  color: white;
 +
  cursor: pointer;
 +
  text-decoration: none;
 +
}
 +
 +
/*sets style of the header in the overlay*/
 +
.imgmenuoverlay a *:first-child {
 +
  width: 100%;
 +
  border-bottom: 1px solid white;
 +
  text-align: center;
 +
}
 +
 +
/*styles the paragraph in the overlay*/
 +
.imgmenuoverlay a p {
 +
  font-size: 14px;
 +
}
 +
 +
 +
 +
/****************************************************************************************************************/
 +
/**************************************************** FOOTER ****************************************************/
 +
/****************************************************************************************************************/
 +
 +
 +
 +
/*styles main footer area*/
 +
footer {
 +
  background: #848282;
 +
  color: white;
 +
  margin: 0px;
 +
  padding: 0px;
 +
  width: 100%;
 +
  min-width: 1000px;
 +
  position: absolute;
 +
  text-align: center;
 +
  color: white;
 +
  font-size:x-small;
 +
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
 +
}
 +
 +
/*defines a container of same width as main content
 +
  that contains footer content*/
 +
.footercontainer {
 +
  width: 1000px;
 +
  margin: auto;
 +
}
 +
 +
/*centers footer content in the individual columns*/
 +
.footercolstyle {
 +
  align-content: center;
 +
}
 +
 +
/*styles left footer column*/
 +
.leftfootercol {
 +
  float: left;
 +
}
 +
 +
/*styles right footer column*/
 +
.rightfootercol {
 +
  float: right;
 +
}
 +
 +
/*gives space between the "find us at" icons*/
 +
footer img {
 +
  margin: 10px;
 +
}
 +
 +
 +
 +
/****************************************************************************************************************/
 +
/*************************** HELPING CLASSES - OVERWRITES OTHER PREDEFINED PROPERTIES ***************************/
 +
/****************************************************************************************************************/
 +
 +
 +
 +
/*removes margin and padding*/
 +
.rmvpadmarg {
 +
    margin: 0px;
 +
    padding: 0px;
 +
}
 +
 +
/*removes vertical lines on links*/
 +
.rmvlinkstyle a {
 +
text-decoration: none;
 +
}
 +
 +
/*brings element to front of page, used to bring nav bar
 +
  in front of everything else*/
 +
.tofront {
 +
  position: relative;
 +
  z-index: 9999;
 +
}
 +
 +
/*sets the position of the element to be given a bottom border*/
 +
.bottomborder {
 +
  position: relative;
 +
}
 +
 +
/*styles borders for h1 elements*/
 +
h1.bottomborder:after {
 +
  content:"";
 +
  background: black;
 +
  position: absolute;
 +
  bottom: -5px;
 +
  left: 150px;
 +
  height: 1px;
 +
  width: 700px;
 +
}
 +
 +
/*styles borders for h2 elements*/
 +
h2.bottomborder:after {
 +
  content:"";
 +
  background: black;
 +
  position: absolute;
 +
  bottom: -5px;
 +
  left: 300px;
 +
  height: 1px;
 +
  width: 400px;
 +
}
 +
<\style>
 +
  
 
<!-- first javascript jquery is imported for local use, then js files are loaded -->
 
<!-- first javascript jquery is imported for local use, then js files are loaded -->

Revision as of 07:34, 12 July 2017

<!DOCTYPE html> DTU iGEM wiki 2017