Difference between revisions of "Team:Linkoping Sweden/Secret"

 
(179 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
+
{{Linkoping_Sweden/Header}}
 
<html>
 
<html>
    <head>
 
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
        <title>The Team</title>
 
  
        <style>
+
<body>
 
+
/********************************* DEFAULT WIKI SETTINGS  ********************************/
+
 
+
#sideMenu, #top_title {
+
    display: none;
+
}
+
 
+
#content {
+
    padding: 0;
+
    width: 100%;
+
    margin-top: -7px;
+
    margin: auto;
+
    background-color: #f9f9f9
+
}
+
 
+
body {
+
    background-color: #f9f9f9;
+
}
+
 
+
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 {
+
    margin-bottom: 0;
+
}
+
 
+
 
+
* {
+
    border: solid 1px;
+
}
+
/***************************************
+
******** Kod to be Removed *************
+
***************************************/
+
.provisorisk-header {
+
background: Firebrick;
+
padding: 1px;
+
}
+
 
+
.provisorisk-footer {
+
flex: 1 100%;
+
background: tomato;
+
}
+
 
+
/***************************************
+
****************************************
+
***************************************/
+
 
+
 
+
/***********************************************************************
+
************************************************************************
+
************************************************************************
+
******************* Allmänn kod till hela wikin ************************
+
************************************************************************
+
************************************************************************
+
***********************************************************************/
+
 
+
/*** fonts ***/
+
 
+
/* latin */
+
@font-face {
+
  font-family: 'Dosis';
+
  font-style: normal;
+
  font-weight: 400;
+
  src: local('Dosis Regular'), local('Dosis-Regular'),
+
url('Dosis400.woff') format('woff');
+
}
+
 
+
/* dosis light - latin */
+
@font-face {
+
  font-family: 'Dosis';
+
  font-style: normal;
+
  font-weight: 200;
+
  src: local('Dosis ExtraLight'), local('Dosis-ExtraLight'),
+
      url('Dosis200.woff') format('woff');
+
}
+
 
+
/* dosis bold - latin */
+
@font-face {
+
  font-family: 'Dosis';
+
  font-style: normal;
+
  font-weight: 600;
+
  src: local('Dosis Bold'), local('Dosis-Bold'),
+
      url('Dosis600.woff') format('woff');
+
}
+
 
+
 
+
/* Gives full screen width */
+
body {
+
  font-family: Dosis, verdana, calibri;
+
  color: #1a1a1a;
+
  margin: 0;
+
}
+
 
+
/* Makes all <a> links have this:*/
+
a:link {
+
    text-decoration: none; /* No underline on links! */
+
}
+
 
+
/*** text ***/
+
.text-center {
+
  text-align: center;
+
}
+
 
+
/******* img restrictions ********/
+
 
+
.content-img {
+
  max-width: 100%;
+
  height: auto;
+
  border-radius: 5px;
+
}
+
 
+
.personal-img {
+
  width: 100%;
+
  max-width: 210px;
+
max-height: 315px;
+
  border-radius: 10px;
+
  margin: auto;
+
}
+
 
+
 
+
/***********************************************************************
+
************************************************************************
+
************************************************************************
+
******************* Headerkod by Jonathan Bergqvist ********************
+
************************************************************************
+
************************************************************************
+
***********************************************************************/
+
 
+
 
+
/**********Logo and social media****************************************************************/
+
/* For background, LiU iGEM logo and social media icons*/
+
.logo-container {
+
background: url("https://static.igem.org/mediawiki/2017/2/2c/T--Linkoping_Sweden--bike_bg_cut.jpg") no-repeat center;
+
    background-size: cover;
+
height: 25vh;
+
width: 100%;
+
position: fixed;
+
top: 0;
+
}
+
 
+
/* Determine position for the LiU iGEM logo */
+
.liu_igem_logo {
+
float: left;
+
 
+
}
+
 
+
/* Determine size of the actual picture, within the size of .logo-container above */
+
.liu_igem_logo img{
+
height: 23vh;
+
width: auto;
+
    padding-left: 3%;
+
    padding-bottom: 1vh;
+
    padding-top: 1vh;
+
z-index: 10;
+
}
+
 
+
/* For social media only */
+
.social-container {
+
position: absolute;
+
right: 3%;
+
bottom: 0;
+
}
+
 
+
/* Link to social media, determine its position */
+
.social-container a {
+
/* Used as <a><img></img></a> */
+
margin: 1px;
+
 
+
}
+
 
+
/* Determine the size of the social media icons */
+
.social-container img {
+
/* Used as <a><img></img></a> */
+
height: 7vh;
+
width:auto;
+
}
+
 
+
 
+
/*********************Navigation Bar*******************************************************/
+
 
+
/* Overall navigation bar */
+
.topnav, uses {
+
background: #f9f9f9;
+
background: linear-gradient(to bottom right, #B8DFD2, #edf7f4, #f9f9f9, #f9f9f9, #f9f9f9, #edf7f4, #B8DFD2);
+
margin: auto;
+
    display: block;
+
font-size: 2.5vh;
+
width: 100%; /* Full screen width */
+
height: 8vh; /* 9.72 Equals 66px based on a total width of 1366px */
+
border-top: 2px solid #019966;
+
border-bottom: 2px solid #019966;
+
position: relative;
+
}
+
 
+
/* Style the links inside the navigation bar, used by non-lists/non-buttons */
+
.topnav a, .topnav span {
+
display: block;
+
text-align: center;
+
}
+
 
+
/* Change the color of the three bar menu on click to menu */
+
.topnav a:hover {
+
background-color: #fff;
+
color: black;
+
}
+
 
+
/* Hide the link that should open and close the topnav on small screens */
+
.topnav .icon {
+
display: none;
+
color: black;
+
}
+
 
+
/* Show the dropdown menu on hover */
+
.topnav .dropdown:hover .dropdown-content {
+
    display: block;
+
}
+
 
+
/************DEVICES, MAY BE DELETED FROM THIS PART OF CSS CODE!*************************************/
+
/* Shows the three bar icon */
+
@media screen and (max-device-width: 12cm) { /* Size based on Google Nexus 7 (7") width in portrait mode */
+
.dropdown {display: none;}
+
.topnav :not(:first-child) {display: none;}
+
.topnav .icon {
+
float: right; /* Shows the three bar icon to the right side */
+
margin: 0% 2% 0% 0%; /* Move the three bar icon to the correct position */
+
display: block;
+
color: black;
+
}
+
} /* End @media */
+
 
+
/* Show the vertical menu */
+
@media screen and (max-device-width: 12cm) { /* Size based on Google Nexus 7 (7") width in portrait mode */
+
.topnav.responsive {position: relative;}
+
.topnav.responsive .icon {
+
position: absolute;
+
right: 0;
+
top: 0;
+
}
+
+
/* What happens to .dropdown-content in mobile hover */
+
. topnav.responsive .dropdown:hover .dropdown-content {
+
position: relative;
+
display: block;
+
}
+
 
+
/* What happens to .dropdown in mobile */
+
.topnav.responsive .dropdown {
+
display: block;
+
text-align: center;
+
width: 100%;
+
}
+
 
+
/* What happens to <a> in mobile */
+
.topnav.responsive a {
+
float: none;
+
display: block;
+
text-align: center;
+
}
+
 
+
} /* End @media */
+
 
+
/****************** Menu buttons *****************/
+
center { /* together with topnav, the text is centered correctly */
+
position: absolute;
+
right: 0;
+
left: 0;
+
bottom: 0;
+
}
+
 
+
/* The general menu button */
+
.dropdown {
+
    display: inline-block;
+
    position: relative;
+
    text-align: center;
+
    width: 11%; /*19.5%; for =< 5 menu items!*/
+
    box-sizing: border-box;
+
}
+
 
+
/* What happens to <a> and <span> in .dropdown */
+
.dropdown a, .dropdown span {
+
    display: block;
+
padding-bottom: 1.2vh;
+
    color: #1a1a1a;
+
}
+
 
+
/* The dropdown menu-content */
+
.dropdown .dropdown-content {
+
    display: none;
+
    position: absolute;
+
    background: #f9f9f9;
+
    width: 100%; /*90% before, 98.5% used to align with width: 14% in dropdown*/
+
    border: 2px solid #019966;
+
    border-top: none;
+
    z-index: 10;
+
}
+
 
+
.dropdown .dropdown-content a {
+
    display: block;
+
    padding: 10px 0px; /*only 10px before*/
+
    border-bottom: 1px solid #019966; /* 1px if otherwise used */
+
    color: #1a1a1a;
+
    text-align: center;
+
    width: 100%; /* 90% for cut line, if used with margin: 0px 10px (not 0px only); (only works when in full screen) */
+
    margin: 0px;
+
}
+
 
+
.dropdown .dropdown-content a:first-child {
+
    border-top: 1px solid #019966; /* 1px if otherwise used, for cut line in <a> */
+
}
+
 
+
.dropdown .dropdown-content a:last-child {
+
    border-bottom: none;
+
}
+
 
+
/* What happens to link on hover */
+
.dropdown a:hover {
+
    color: #019966;
+
background: rgba(0,0,0,0);
+
}
+
 
+
/* What happens to .drop on hover */
+
.dropdown:hover .dropdown-content {
+
    display: block;
+
}
+
 
+
 
+
/**************** for stickyheader *******************/
+
.topnav-scrolled{  /*must be written after the headers css code*/
+
  position: fixed;
+
  top: 0;
+
  z-index: 15;
+
}
+
 
+
.header-outfill {
+
  height: 25vh;
+
  position: relative;
+
}
+
 
+
.header-outfill-plus {
+
  height: 33vh;
+
}
+
 
+
/***********************************************************************
+
************************************************************************
+
************************************************************************
+
*********************** Headerkod Avklarad *****************************
+
************************************************************************
+
************************************************************************
+
***********************************************************************/
+
 
+
/***********************************************************************
+
************************************************************************
+
************************************************************************
+
******************* Frontpagekod by Jonatan Baggman ********************
+
************************************************************************
+
************************************************************************
+
***********************************************************************/
+
 
+
/************************* allmänn frontpage (fp) *******************/
+
 
+
.fp h1 {
+
  font-size: 700%;
+
}
+
 
+
.fp h1, .fp h2, .fp h3{
+
  margin: 0px;
+
  font-weight: 200;
+
}
+
 
+
.fp h2{
+
  font-size: 500%;
+
}
+
 
+
.fp h3 {
+
  font-size: 300%;
+
}
+
 
+
.fp p {
+
  margin: 0;
+
  font-size: 150%;
+
}
+
 
+
 
+
/************************** frontpage images ************************/
+
 
+
.fp-bg-img-div {
+
  position: relative;
+
}
+
 
+
#fp-cover-img {
+
  Background: url("bilder/lab.jpg") no-repeat center;
+
  background-size: cover;
+
  height: 67vh;
+
}
+
 
+
#fp-2nd-img {
+
  Background: url("http://wallpapercave.com/wp/Oodxphr.jpg") no-repeat top fixed;
+
  background-size: cover;
+
  min-height: 450px;
+
}
+
 
+
#fp-3rd-img {
+
  Background: url("http://wallpapercave.com/wp/e7kkOOq.jpg") no-repeat top fixed;
+
  background-size: cover;
+
  min-height: 500px;
+
}
+
 
+
#fp-4th-img {
+
  Background: url("http://wallpapercave.com/wp/IgiNWZt.jpg") no-repeat top fixed;
+
  background-size: cover;
+
  min-height: 500px;
+
}
+
 
+
#fp-5th-img {
+
  Background: url("http://wallpapercave.com/wp/ryQkr5b.jpg") no-repeat bottom fixed;
+
  background-size: cover;
+
  min-height: 700px;
+
}
+
 
+
 
+
.fp-content-img img {
+
  max-width: 100%;
+
}
+
 
+
.fp-content-img {
+
  position: absolute;
+
  width: 20%;
+
  top: 70px;
+
  /* kommande kod skrivs över för vissa fp-content-img */
+
  right: 10%;
+
  left: auto;
+
}
+
 
+
.fp-content:nth-child(3n) .fp-content-img {  /* Flyttar var 3e content-img-div till vänster (isch var 3e) */
+
  right: auto;
+
  left: 10%;
+
}
+
 
+
 
+
#fp-img-round {
+
border-radius: 100%;
+
}
+
 
+
 
+
 
+
/************************* frontpage text-content **************************/
+
 
+
 
+
 
+
.fp-content {
+
  position: relative;
+
  min-height: 200px;
+
  border-top: solid 1px #019966;
+
  border-bottom: solid 3px #019966;
+
  background: #FFF;
+
  background: linear-gradient(to left, #B8DFD2, #edf7f4, #f9f9f9);
+
}
+
 
+
.fp-content:nth-child(3n) {  /* Ändrar färgen på var 3e content-div (isch var 3e) */
+
  background: linear-gradient(to right, #B8DFD2, #edf7f4, #edf7f4, #f9f9f9);
+
}
+
 
+
.fp-content-text {
+
  padding: 3%;
+
  width: 50%;
+
  /* Kod som placerar texten i en ruta
+
  background-color: rgba(256, 256, 256, 0.3);
+
  border-radius: 10px;
+
  box-shadow: 0 0 4px rgba(0, 0, 0, .7); */
+
 
+
  /* kommande kod skrivs över för vissa fp-content-text */
+
  margin-right: auto;
+
  margin-left: 10%;
+
}
+
 
+
.fp-content:nth-child(3n) .fp-content-text{  /* Flyttar var 3e content-text-div till höger (isch var 3e) */
+
  margin-right: 10%;
+
  margin-left: auto;
+
}
+
 
+
 
+
.fp-img-content {  /* text på fp-bilderna */
+
  display: block;
+
  position: absolute;
+
  right:0;
+
  left:0;
+
 
+
  text-align: center;
+
  color: #1a1a1a;
+
}
+
 
+
#fp-1stimg-content {
+
  max-width: 100%;
+
  height: 67vh;
+
  line-height: 67vh;
+
}
+
 
+
#fp-1stimgcontent-align {
+
  display: inline-block;
+
  vertical-align: middle;
+
  line-height: normal;
+
}
+
 
+
.fp-img-button {
+
  display: inline-block;
+
  min-width: 20%;
+
  position: absolute;
+
  right: 10%;
+
  left: auto;
+
  top: 30%;
+
  padding: 5%;
+
 
+
  background-color: rgb( 200, 200, 200); /* ifall gammal browser*/
+
  border: 1px solid rgb( 200, 200, 200);
+
  background-color: rgba( 255, 255, 255 , 0.1);
+
  border: 2px solid rgba( 127, 219, 189 , 0);
+
  box-shadow: 0 0 4px rgba(0, 0, 0, 0);
+
  border-radius: 5px;
+
 
+
  font-size: 300%;
+
  text-align: center;
+
  color: #000;
+
  text-decoration: none;
+
}
+
 
+
.fp-bg-img-div:nth-of-type(3n+2) .fp-img-button {
+
  right:auto;
+
  left: 10%;
+
}
+
+
.fp-img-button:hover {
+
  background-color: rgb( 155, 155, 155); /* ifall gammal browser  48, 180, 137 */
+
  border: 1px solid rgb( 155, 155, 155);
+
  background-color: rgba( 0,0,0 , 0.1);
+
  border: 2px solid rgba( 127, 219, 189 , 0);
+
}
+
 
+
 
+
/***********************************************************************
+
************************************************************************
+
************************************************************************
+
**************************** Normal Content ****************************
+
************************************************************************
+
************************************************************************
+
***********************************************************************/
+
 
+
 
+
/**************************** Text Content *****************************/
+
 
+
 
+
h1, h2, h3{
+
  font-weight: 200;
+
}
+
 
+
h1 {
+
  font-size: 500%;
+
}
+
 
+
h2{
+
  font-size: 300%;
+
}
+
 
+
h3 {
+
  font-size: 200%;
+
}
+
 
+
 
+
/*********************** Content templates *********************/
+
 
+
 
+
 
+
.content-container {
+
  width: 80%;
+
  margin: auto;
+
  position: relative;
+
 
+
}
+
 
+
 
+
 
+
/*********************************Style for footer*************************/
+
 
+
.footer {
+
    background-color: white;
+
width: 100%;
+
align-items: stretch;
+
}
+
 
+
#foot_text {
+
border-top: 3px solid #019966;
+
background: #fff;
+
margin: 0px;
+
text-size: 2em;
+
}
+
 
+
.sponsors {
+
display: table;
+
width: 100%;
+
}
+
 
+
.sponsors a {
+
display: table-cell;
+
text-align: center;
+
width: 20%;
+
 
+
}
+
 
+
.sponsors img {
+
width: 90%;
+
max-width: 250px;
+
max-height: 250px;
+
vertical-align: middle;
+
 
+
}
+
 
+
.bottom-footer {
+
display: flex;
+
background: #019966;
+
height: auto;
+
flex-flow: row wrap;
+
}
+
+
.liu {
+
height: auto;
+
order: 1;
+
margin: auto;
+
max-width: 100%;
+
 
+
}
+
 
+
.foot-1 {
+
 
+
color: white;
+
height: auto;
+
order: 2;
+
margin: auto;
+
}
+
 
+
.foot-2 {
+
 
+
color: white;
+
height: auto;
+
order: 3;
+
margin: auto;
+
}
+
 
+
.bottom-footer a {
+
font-size: 150%
+
margin: auto;
+
}
+
 
+
.bottom-footer a:link {
+
color: white;
+
text-decoration: none;
+
}
+
 
+
.bottom-footer a:visited {
+
color: white;
+
text-decoration: none;
+
}
+
 
+
.bottom-footer a:hover {
+
color: white;
+
text-decoration: underline;
+
}
+
 
+
/***********************************************************************
+
************************************************************************
+
************************************************************************
+
**************************** Flex /Baggman *****************************
+
************************************************************************
+
************************************************************************
+
***********************************************************************/
+
 
+
/*** flex main ***/
+
#flex-wrapper {
+
display: flex;
+
flex-flow: row wrap;
+
}
+
 
+
.aside {
+
display: none; /* gömmer asidesen i mobil och plattvy */
+
flex: 1 auto;
+
}
+
 
+
.flex-container {
+
flex: 1 100%; /* bredd i mobil och plattvy */
+
}
+
 
+
/** flexitem templates **/
+
 
+
.flex-flipper, .flex-sidebyside, .flex-sidebyside-reverse { /* flexcontainers i .flex-container */
+
display: flex;
+
flex: 1 100%;
+
align-items: center;
+
}
+
 
+
.flex-img-100, .flex-text-100 {
+
  flex: 1 90%;
+
}
+
 
+
.flex-img-70, .flex-text-70 {
+
  flex: 1 65%;
+
}
+
 
+
.flex-img-50, .flex-text-50 {
+
  flex: 1 45%;
+
}
+
 
+
.flex-img-30, .flex-text-30 {
+
  flex: 1 25%;
+
}
+
 
+
.flex-img-30, .flex-text-30, .flex-img-50, .flex-text-50, .flex-img-70, .flex-text-70, .flex-img-100, .flex-text-100 {
+
margin: 2%;
+
}
+
 
+
.flex-img-30, .flex-img-50, .flex-img-70, .flex-img-100 {
+
display: flex;
+
align-content: center;
+
        align-items: center;
+
}
+
/************** för olika skärmar ****************/
+
 
+
@media all and (max-width: 600px) { /*** mobil ***/
+
+
.flex-flipper {
+
flex-flow: column nowrap;
+
}
+
+
.flex-sidebyside, .flex-sidebyside-reverse {
+
flex-flow: column nowrap;
+
}
+
+
}
+
 
+
@media all and (min-width: 600px) { /****** platta ******/
+
 
+
.flex-sidebyside {
+
flex-flow: row wrap;
+
}
+
+
.flex-sidebyside-reverse {
+
flex-flow: row-reverse wrap;
+
}
+
+
.flex-flipper {
+
flex-flow: row nowrap;
+
}
+
+
.flex-flipper:nth-of-type(odd) { /* ändrar riktining på varannan flex-flipper */
+
flex-direction: row-reverse;
+
}
+
+
}
+
+
@media all and (min-width: 900px) { /***********  Dator ***************/
+
+
.aside{
+
display: block; /*visar asidsen*/
+
}
+
+
.flex-container {
+
flex: 1 80%; /*bredd på containern när asidsen är med*/
+
order: 2;
+
}
+
+
.aside-l { order: 1;}
+
.aside-r { order: 3;}
+
.provisorisk-footer  { order: 4;} 
+
}
+
 
+
/***********************************************************************
+
************************************************************************
+
************************************************************************
+
**************************** End Flex /Baggman *************************
+
************************************************************************
+
************************************************************************
+
***********************************************************************/
+
 
+
 
+
</style>
+
 
+
 
+
 
+
 
+
 
+
 
+
    </head>
+
    <body>
+
 
+
 
+
<div class="fp"> <!-- omsluter hela frontpagen -->
+
+
<div class="header-outfill">
+
+
</div>
+
 
+
<!-- Header 1.32 -->
+
<!---------------Logo and social media------------------------------->
+
<div class="logo-container">
+
<div class="liu_igem_logo">
+
<a href="https://2017.igem.org/Team:Linkoping_Sweden">
+
<img alt="LiU iGEM" id="liu_igem_logo" src="https://static.igem.org/mediawiki/2017/c/c3/T--Linkoping_Sweden--Logo.jpg"/>
+
</a>
+
</div> <!--class="liu_igem_logo"-->
+
+
<div class="social-container">
+
<a href="https://twitter.com/liuigem" target="_blank" title="Follow us on Twitter!">
+
<img src="https://static.igem.org/mediawiki/2017/b/b9/T--Linkoping_Sweden--social_tweet_icon.png"/>
+
</a>
+
<a href="https://www.facebook.com/LiuIgem" target="_blank" title="Go give us a thumbs-up on Facebook!">
+
<img src="https://static.igem.org/mediawiki/2017/d/d8/T--Linkoping_Sweden--social_fb_icon.png"/>
+
</a>
+
<a href="https://www.instagram.com/liu_igem/" target="_blank" title="Follow us on Instagram!">
+
<img src="https://static.igem.org/mediawiki/2017/0/06/T--Linkoping_Sweden--social_insta_icon.png"/>
+
</a>
+
</div> <!--class="social-container"-->
+
</div> <!--class="logo-container"-->
+
 
+
<!------------------------------Navigation Bar----------------------------------------------------------->
+
<div class="topnav" id="myTopnav"> <!-- For the entire menu bar, with the borders -->
+
<center> <!-- Center the following dropdown-buttons -->
+
+
<!-- Home! -->
+
<div class="dropdown">
+
<a href="https://2017.igem.org/Team:Linkoping_Sweden">Home</a>
+
</div>
+
 
+
<!-- The Team! -->
+
<div class="dropdown">
+
<span>Team</span>
+
<div class="dropdown-content">
+
<a href="https://2017.igem.org/Team:Linkoping_Sweden/Team">Team</a>
+
<a href="https://2017.igem.org/Team:Linkoping_Sweden/Colaborations">Collaborations</a>
+
</div>
+
</div>
+
+
<!-- The Project! -->
+
<div class="dropdown">
+
<span>Project</span>
+
<div class="dropdown-content">
+
<!--FEL LÄNKNAMN!!! <a href="https://2017.igem.org/Team:Linkoping_Sweden/Modeling">Model</a>-->
+
<!--INGEN STANDARDLÄNK <a href="https://2017.igem.org/Team:Linkoping_Sweden/Project">The Project</a>-->
+
<!--<a href="https://2017.igem.org/Team:Linkoping_Sweden/Protocols>Protocols</a>-->
+
<a href="https://2017.igem.org/Team:Linkoping_Sweden/Description">Description</a>
+
<a href="https://2017.igem.org/Team:Linkoping_Sweden/Design">Design</a>
+
<a href="https://2017.igem.org/Team:Linkoping_Sweden/Experiments">Experiments</a>
+
<a href="https://2017.igem.org/Team:Linkoping_Sweden/Notebook">Notebook</a>
+
<a href="https://2017.igem.org/Team:Linkoping_Sweden/Contribution">Contribution</a>
+
<a href="https://2017.igem.org/Team:Linkoping_Sweden/Model">Model</a>
+
<a href="https://2017.igem.org/Team:Linkoping_Sweden/Results">Results</a>
+
<a href="https://2017.igem.org/Team:Linkoping_Sweden/Demonstrate">Demonstrate</a>
+
<a href="https://2017.igem.org/Team:Linkoping_Sweden/Improve">Improve</a>
+
<a href="https://2017.igem.org/Team:Linkoping_Sweden/Attributions">Attributions</a>
+
+
</div>
+
</div>
+
+
<!-- Parts! -->
+
<div class="dropdown">
+
<span>Parts</span>
+
<div class="dropdown-content">
+
<!--<a href="https://2017.igem.org/Team:Linkoping_Sweden/construct">Constructs</a>-->
+
<!--CONSTRUCTS SHALL BE INCLUDED IN ANY OF THE FOLLOWING LINKS BELOW!-->
+
<a href="https://2017.igem.org/Team:Linkoping_Sweden/Parts">Parts</a>
+
<a href="https://2017.igem.org/Team:Linkoping_Sweden/Basic_Part">Basic Parts</a>
+
<a href="https://2017.igem.org/Team:Linkoping_Sweden/Composite_Part">Composite Parts</a>
+
<a href="https://2017.igem.org/Team:Linkoping_Sweden/Part_Collection">Part Collection</a>
+
</div>
+
</div>
+
 
+
<!-- Safety! -->
+
<div class="dropdown">
+
<a href="https://2017.igem.org/Team:Linkoping_Sweden/Safety">Safety</a>
+
</div>
+
+
<!-- Human Practices! -->
+
<div class="dropdown">
+
<span>Human Practices</span>
+
<div class="dropdown-content">
+
<a href="https://2017.igem.org/Team:Linkoping_Sweden/Human_Practices">Overview</a>
+
<a href="https://2017.igem.org/Team:Linkoping_Sweden/HP/Silver">Silver HP</a>
+
<a href="https://2017.igem.org/Team:Linkoping_Sweden/HP/Gold_Integrated">Integrated and Gold</a>
+
<a href="https://2017.igem.org/Team:Linkoping_Sweden/HP/Engagement">Public Engagement</a>
+
</div>
+
</div>
+
+
<!-- Contact us! -->
+
<div class="dropdown">
+
<a href="#">Contact us</a>
+
</div>
+
+
<!-- JavaScript that is placed after all class="dropdown"! -->
+
<a href="javascript:void(0);" style="font-size:2em;" class="icon" onclick="myFunction()">&#9776;</a> <!-- font-size gives the size of the three bar -->
+
</center>
+
</div> <!-- <div class="topnav" id="myTopnav"> -->
+
+
 
<div id="flex-wrapper">
 
<div id="flex-wrapper">
+
<div class="flex-container">
<div class="flex-container">  
+
 
 
<article class="flex-text-100">
+
<article class="flex-text-100">
<h1> Our Team </h1>
+
<h2> Oh you sneaky bastard! </h2>
<hr>
+
<p class="text-big">
<h2> History: </h2>
+
You found our secret page!
<p>
+
</p>
LiU iGEM was founded in 2013 at Linköping University and has been active with different projects ever since. The projects between 2013 and 2015 focused on different biosensors for allergy, while the project for 2016 focused on the production of lipids in <i>Chlamydomonas reinhardtii</i>.
+
</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
</p>
+
<p class="text-small">
<p>
+
psssst. we used this to test out code during the summer and fall!
This year we are a group of 11 students participating in the group, all studying different aspects of biology. Our project can you read about <a href="#">here</a>.
+
</p>
</p>
+
</article>
<hr>
+
<h2> Members: </h2>
+
</article>
+
+
<div class="flex-img-100">
+
<img class="content-img" alt="Our team" src="https://static.igem.org/mediawiki/2017/4/45/T--Linkoping_Sweden--Gruppbild.jpg">
+
</div>
+
<hr>
+
<article class="flex-text-100">
+
<h3 class="text-center"> Max Lindberg </h3>
+
</article>
+
<div class="flex-flipper">
+
<div class="flex-img-30">
+
<img class="personal-img" alt="Max Lindberg" src="https://static.igem.org/mediawiki/2017/5/56/T--Linkoping_Sweden--Max.jpg">
+
</div>
+
<article class="flex-text-70">
+
<p>  
+
<b> Education: </b> 4th year of MSc in Protein Science </br>
+
<b> Responsible for: </b> Project </br>
+
<b> Works with: </b> Project leader </br>
+
<b> Why iGEM? </b> Because synthetic biology is f*cking awesome! :D
+
</p>
+
</article>
+
</div>
+
<hr>
+
<article class="flex-text-100">
+
<h3 class="text-center"> Moa Nilsson </h3>
+
</article>
+
<div class="flex-flipper">
+
<div class="flex-img-30">
+
<img class="personal-img" alt="Moa Nilsson" src="https://static.igem.org/mediawiki/2017/8/8b/T--Linkoping_Sweden--Moa.jpg">
+
</div>
+
<article class="flex-text-70">
+
<p>
+
<b> Education: </b> 3rd year of BSc in Medical Biology </br>
+
<b> Works with: </b> Laboratory, sponsorship, human practices </br>
+
<b> Why iGEM? </b> To increase my knowledge and competence within laboratory work and research in practice.
+
</p>
+
</article>
+
</div>
+
<hr>
+
<article class="flex-text-100">
+
<h3 class="text-center"> Jonatan Baggman </h3>
+
</article>
+
<div class="flex-flipper">
+
<div class="flex-img-30">
+
<img class="personal-img" alt="Jonatan Baggman" src="https://static.igem.org/mediawiki/2017/3/36/T--Linkoping_Sweden--Jonatan.jpg">
+
</div>
+
<article class="flex-text-70">
+
<p>
+
<b> Education: </b> 3rd year of MSc in Engineering Biology </br>
+
<b> Responsible for: </b> Wiki </br>
+
<b> Works with: </b> Laboratory, wiki </br>
+
<b> Why iGEM? </b> To test my experiences from my education and to get a deeper view into the field of synthetic biology.
+
</p>
+
</article>
+
</div>
+
<hr>
+
<article class="flex-text-100">
+
<h3 class="text-center"> Johan Larsson </h3>
+
</article>
+
<div class="flex-flipper">
+
<div class="flex-img-30">
+
<img class="personal-img" alt="Johan Larsson" src="https://static.igem.org/mediawiki/2017/3/38/T--Linkoping_Sweden--Johan.jpg">
+
</div>
+
<article class="flex-text-70">
+
<p>
+
<b> Education: </b> 3rd year of BSc in Medical Biology </br>
+
<b> Responsible for: </b> Laboratory </br>
+
<b> Works with: </b> Laboratory, sponsorship, human practices </br>
+
<b> Why iGEM? </b> It seemed like a fun way to spend my summer.
+
</p>
+
</article>
+
</div>
+
<hr>
+
<article class="flex-text-100">
+
<h3 class="text-center"> Jonathan Bergqvist </h3>
+
</article>
+
<div class="flex-flipper">
+
<div class="flex-img-30">
+
<img class="personal-img" alt="Jonathan Bergqvist" src="https://static.igem.org/mediawiki/2017/1/18/T--Linkoping_Sweden--Jonathan.jpg">
+
</div>
+
<article class="flex-text-70">
+
<p>
+
<b> Education: </b> 5th year of MSc in Chemical Biology </br>
+
<b> Works with: </b> Wiki, modeling, human practices </br>
+
<b> Why iGEM? </b> The project seemed interesting and I wanted to do something new.
+
</p>
+
</article>
+
</div>
+
<hr>
+
<article class="flex-text-100">
+
<h3 class="text-center"> Marie Peterson </h3>
+
</article>
+
<div class="flex-flipper">
+
<div class="flex-img-30">
+
<img class="personal-img" alt="Marie Peterson" src="https://static.igem.org/mediawiki/2017/c/c6/T--Linkoping_Sweden--Marie.jpg">
+
</div>
+
<article class="flex-text-70">
+
<p>
+
<b> Education: </b> 3rd year of BSc in Chemical Biology</br>
+
<b> Works with: </b> Laboratory, wiki, sponsorship and human practice </br>
+
<b> Why iGEM? </b> The project seemed interesting and I wanted to meet new people.
+
</p>
+
</article>
+
</div>
+
<hr>
+
<article class="flex-text-100">
+
<h3 class="text-center"> Sophie Stridh Karppinen </h3>
+
</article>
+
<div class="flex-flipper">
+
<div class="flex-img-30">
+
<img class="personal-img" alt="Sophie Stridh Karppinen" src="https://static.igem.org/mediawiki/2017/3/3e/T--Linkoping_Sweden--Sophie.jpg">
+
</div>
+
<article class="flex-text-70">
+
<p>
+
<b> Education: </b> 3rd year of MSc in Engineering Biology </br>
+
<b> Works with: </b> Laboratory, wiki, modeling, human practices </br>
+
<b> Why iGEM? </b> I wanted to see if my education has taught me anything useful.
+
</p>
+
</article>
+
</div>
+
<hr>
+
<article class="flex-text-100">
+
<h3 class="text-center"> Oskar Reinhed Gustafsson </h3>
+
</article>
+
<div class="flex-flipper">
+
<div class="flex-img-30">
+
<img class="personal-img" alt="Oskar Reinhed Gustafsson" src="https://static.igem.org/mediawiki/2017/1/1c/T--Linkoping_Sweden--Oskar.jpg">
+
</div>
+
<article class="flex-text-70">
+
<p>
+
<b> Education: </b> 3rd year of BSc in Medical Biology </br>
+
<b> Works with: </b> Laboratory, human practices </br>
+
<b> Why iGEM? </b> Fun.
+
</p>
+
</article>
+
</div>
+
<hr>
+
<article class="flex-text-100">
+
<h3 class="text-center"> Lovisa Karlsson </h3>
+
</article>
+
<div class="flex-flipper">
+
<div class="flex-img-30">
+
<img class="personal-img" alt="Lovisa Karlsson" src="https://static.igem.org/mediawiki/2017/5/5e/T--Linkoping_Sweden--Lovisa.jpg">
+
</div>
+
<article class="flex-text-70">
+
<p>
+
<b> Education: </b> 3rd year of BSc in Medical Biology </br>
+
<b> Responsible for: </b> Human Practices </br>
+
<b> Works with: </b> Laboratory, wiki and human practices </br>
+
<b> Why iGEM? </b> To get more experience in laboratory work and get a more diverse education.
+
</p>
+
</article>
+
</div>
+
<hr>
+
<article class="flex-text-100">
+
<h3 class="text-center"> Henrik Karlsson </h3>
+
</article>
+
<div class="flex-flipper">
+
<div class="flex-img-30">
+
<img class="personal-img" alt="Henrik Karlsson" src="https://static.igem.org/mediawiki/2017/e/e3/T--Linkoping_Sweden--Henrik.jpg">
+
</div>
+
<article class="flex-text-70">
+
<p>
+
<b> Education: </b> 3rd year of MSc in Engineering Biology </br>
+
<b> Responsible for: </b> Sponsorship </br>
+
<b> Works with: </b> Laboratory, modeling, sponsorship </br>
+
<b> Why iGEM? </b> The whole project seemed interesting and a good experience.
+
</p>
+
</article>
+
</div>
+
<hr>
+
<article class="flex-text-100">
+
<h3 class="text-center"> Jan Ybrahim </h3>
+
</article>
+
<div class="flex-flipper">
+
<div class="flex-img-30">
+
<img class="personal-img" alt="Jan Ybrahim" src="https://static.igem.org/mediawiki/2017/d/d0/T--Linkoping_Sweden--Jan.jpg">
+
</div>
+
<article class="flex-text-70">
+
<p>
+
<b> Education: </b> 4th year of MSc in Engineering Biology </br>
+
<b> Responsible for: </b> Modeling </br>
+
<b> Works with: </b> Modeling, sponsorship </br>
+
<b> Why iGEM? </b> To work with something relevant to my education during the summer.
+
</p>
+
</article>
+
</div>
+
 
+
+
</div>
+
<aside class="aside aside-l"> </aside>
+
<aside class="aside aside-r"> </aside>
+
 
+
  
 
 
 
</div>
 
</div>
<footer class="footer">
+
<aside class="aside aside-l"> </aside>
 
+
<aside class="aside aside-r"> </aside>
<div id="foot_text">
+
</body>
<p style="text-align: center;">LiU iGEM is proudly sponsored by</p>
+
</div>
+
 
+
<div class="sponsors">
+
   
+
<a href="http://www.bioarctic.se/" title="Check out bioarctic, our awesome sponsor!" target="_blank" >
+
    <img src="https://static.igem.org/mediawiki/2017/8/80/T--Linkoping_Sweden--bioartic.png"/>
+
    </a>
+
   
+
  <a href="https://eu.idtdna.com/site" title="Check out IDT, our awesome sponsor!" target="_blank">
+
  <img src="https://static.igem.org/mediawiki/2017/b/b6/T--Linkoping_Sweden--idt.jpg"/>
+
  </a>
+
   
+
  <a href="https://www.eppendorf.com/NC-en/" title="Check out eppendorf, our awesome sponsor!" target="_blank">
+
  <img src="https://static.igem.org/mediawiki/2017/1/19/T--Linkoping_Sweden--eppendorf.jpg"/>
+
  </a>
+
 
+
  <a href="https://www.labteamet.com/" title="Check out labteamet, our awesome sponsor!" target="_blank">
+
  <img src="https://static.igem.org/mediawiki/2017/c/cf/T--Linkoping_Sweden--Labteamet.jpg"/>
+
  </a>
+
</div>
+
+
<div class="bottom-footer">
+
+
<div class="liu"
+
<a href="https://liu.se/en" target="_blank">
+
<img src="https://static.igem.org/mediawiki/2017/b/b3/T--Linkoping_Sweden--LiU_logo.png"/>
+
        </a>
+
</div>
+
+
+
<div class="foot-1">
+
    LiU iGEM
+
    <br>
+
    Kårallen, Linköpings Universitet
+
    <br>
+
    581 83 Linköping
+
    <br><br>
+
    <a href="mailto:igem.linkoping@gmail.com" target="_blank">igem.linkoping@gmail.com</a>
+
</div>
+
 
+
<div class="foot-2">
+
    <a href="https://liu.se/en/about-liu" target="_blank">About LiU</a>
+
    <br>
+
    <a href="https://liu.se/en/education" target="_blank">Study in Linköping</a>
+
    <br>
+
    <a href="https://liu.se/en/research" target="_blank">Research</a>
+
    <br><br>
+
    <a href="https://liu.se/en" target="_blank">www.liu.se</a>
+
</div>
+
</div>
+
</footer>
+
 
+
 
+
<!------------JAVASCRIPT FOR NAVIGATION BAR------------------------------>
+
<script>
+
 
+
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
+
function myFunction() {
+
var x = document.getElementById("myTopnav");
+
if (x.className === "topnav") {
+
x.className += " responsive";
+
+
} else {
+
x.className = "topnav";
+
}
+
}
+
 
+
</script>
+
+
<script> <!-- script för sticky header! lägger till klassen header-scrolled till header när man skrollat mer än pre-header -->
+
var  tn = $(".topnav");
+
ofn = $(".header-outfill");
+
tns = "topnav-scrolled";
+
ofp = "header-outfill-plus";
+
hdr = $('.logo-container').height();
+
 
+
$(window).scroll(function() {
+
  if( $(this).scrollTop() > hdr ) {
+
tn.addClass(tns);
+
ofn.addClass(ofp);
+
  } else {
+
tn.removeClass(tns);
+
ofn.removeClass(ofp);
+
  }
+
});
+
</script>
+
 
+
</body>
+
 
</html>
 
</html>
 +
{{Linkoping_Sweden/Footer}}

Latest revision as of 17:02, 1 November 2017

Oh you sneaky bastard!

You found our secret page!







































psssst. we used this to test out code during the summer and fall!