Difference between revisions of "Team:Aalto-Helsinki"

Line 1: Line 1:
−
<html>
+
<!doctype html>
−
<style>
+
<html lang=''>
−
html {
+
<head>
−
    position: relative;
+
  <meta charset='utf-8'>
−
    height: 100%;
+
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
−
    min-width: 950px;
+
  <meta name="viewport" content="width=device-width, initial-scale=1">
−
    text-align: center;
+
  <link rel="stylesheet" href="styles.css">
−
    background-color: white;
+
  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
−
    background-size: cover;
+
  <script src="script.js"></script>
−
  -webkit-font-smoothing: antialiased; /* font smoothing */
+
  <!--MathJax hosted by iGEM-->
−
  -moz-osx-font-smoothing: grayscale;
+
  <script src="https://2017.igem.org/common/MathJax-2.5-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
−
  font-family: 'Quicksand', Work Sans; font-size:16px;
+
  <!--Vector social media icons provided by Pixeden-->
−
}
+
  <link rel="stylesheet" href="./pe-icon-social/css/pe-icon-social.css">
 +
  <link rel="stylesheet" href="./pe-icon-social/css/helper.css">
  
−
header, body {
+
    <!-- Quicksand font -->
−
     height: 100%;
+
     <link href='//fonts.googleapis.com/css?family=Quicksand' rel='stylesheet'>
−
     margin: 0 0 35px;
+
     <!-- Work Sans font -->
−
     padding: 0;
+
     <link href='https://fonts.googleapis.com/css?family=Work+Sans' rel='stylesheet'>
−
}
+
  
−
p {
+
  <title>Aalto-Helsinki</title>
−
  text-align: justify;
+
−
  font-family: Work Sans;
+
−
}
+
  
−
a {
+
</head>
−
  text-decoration: none;
+
<body>
−
  color: #000000;
+
−
  font-weight: bold;
+
−
}
+
  
−
a:hover {
+
<!-- The 'O' of PORIFI -->
−
  color: #363638;
+
<div id="roll-o">
−
   font-weight: bolder;
+
   <a href="https://igem-qsf.github.io/Aalto-Helsinki-wiki-17/index.html"><img class="o" src="../Aalto-Helsinki-wiki-17/logos-icons/O-people.png"></a>
−
}
+
</div>
  
−
img {
+
<br>
−
    padding: 0;
+
<br>
−
    display: block;
+
<img src="../Aalto-Helsinki-wiki-17/Aalto-Helsinki-wiki.png"><br>
−
    margin: auto;
+
<br>
−
    max-height: 100%;
+
<br>
−
    max-width: 100%;
+
−
}
+
  
−
/* Site Map styles */
 
−
.sitemap {
 
−
  background-color: #339999;
 
−
  color: #ffffff;
 
−
}
 
  
−
#map-column-styles {
+
<br>
−
  clear:left;
+
<div id="color-block-team"></div>
−
  float:left;
+
<br>
−
  text-align: left;
+
−
  width:100%;
+
−
  overflow:hidden;
+
−
  background:#339999;
+
−
  font-size: 14px;
+
−
}
+
−
#map-column-1 {
+
−
  float:left;
+
−
  min-width:16%;
+
−
  position:relative;
+
−
  left:14%;
+
−
  overflow:hidden;
+
−
}
+
−
#map-column-1 a {
+
−
  list-style: none;
+
−
  color: #ffffff;
+
−
}
+
−
#map-column-1 a:hover {
+
−
  color: #066;
+
−
}
+
−
#map-column-2 {
+
−
  float:left;
+
−
  min-width:16%;
+
−
  position:relative;
+
−
  left:14%;
+
−
  overflow:hidden;
+
−
}
+
−
#map-column-2 a {
+
−
  list-style: none;
+
−
  color: #ffffff;
+
−
}
+
−
#map-column-2 a:hover {
+
−
  color: #066;
+
−
}
+
−
#map-column-3 {
+
−
  float:left;
+
−
  min-width:16%;
+
−
  position:relative;
+
−
  left:14%;
+
−
  overflow:hidden;
+
−
}
+
−
#map-column-3 a {
+
−
  list-style: none;
+
−
  color: #ffffff;
+
−
}
+
−
#map-column-3 a:hover {
+
−
  color: #066;
+
−
}
+
−
#map-column-4 {
+
−
  float:left;
+
−
  min-width:16%;
+
−
  position:relative;
+
−
  left:14%;
+
−
  overflow:hidden;
+
−
}
+
−
#map-column-4 a {
+
−
  list-style: none;
+
−
  color: #ffffff;
+
−
}
+
−
#map-column-4 a:hover {
+
−
  color: #066;
+
−
}
+
−
#map-column-5 {
+
−
  float:left;
+
−
  min-width:16%;
+
−
  position:relative;
+
−
  left:14%;
+
−
  overflow:hidden;
+
−
}
+
−
#map-column-5 a {
+
−
  list-style: none;
+
−
  color: #ffffff;
+
−
}
+
−
#map-column-5 a:hover {
+
−
  color: #066;
+
−
}
+
  
−
/* Normal page styles */
+
<div class="container">
−
.container {
+
<div class="introtext">
−
  padding-top: 1%;
+
<h3 style="color: #336633">OUR TEAM</h3>
−
  padding-left: 13%;
+
<p>
−
  padding-right: 13%;
+
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book <a href="#refl1" name="ref1">[1]</a>. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
−
  font-family: Work Sans;
+
</p>
−
}
+
</div>
  
−
.basictext {
+
<div class="person-wrap">
−
  font-weight: lighter;
+
<div class="person-photo"><img src="./img/eve-square.png"></div>
−
  line-height: 32px;
+
<div class="person-texts">
−
  font-family: Work Sans;
+
<h3 style="color: #336633; font-size: 120%" >Eveliina Karjalainen</h3>
−
}
+
University of Helsinki<br>
 +
<br>
 +
Eveliina is a Master's student in Plant and Forest Biotechnology, currently has two minors in The Basics of Biochemistry and Molecular Biology as well as Microbe Biotechnology and Environmental Biotechnology. Finishing two other minors in Bioinformatics and Mycology. She is interested in the environment, plants, fungi and insects. In iGEM, she is the team captain and will take part in both laboratory work and modelling.<br>
 +
</div>
 +
<div style="clear: both;"></div>
 +
</div>
 +
<div class="person-wrap">
 +
<div class="person-photo"><img src="./img/jenny-square.png"></div>
 +
<div class="person-texts">
 +
<h3 style="color: #336633; font-size: 120%">Jenny Mujunen</h3>
 +
University of Helsinki<br>
 +
<br>
 +
Jenny is currently studying biology in the University of Helsinki. She also has a Bachelor’s degree in Culture and Arts, and has been working as a biology book illustrator in the past. On top of being part of the laboratory team she is the team’s treasurer and has taken care of Aalto-Helsinki team’s social media accounts.<br>
 +
</div>
 +
<div style="clear: both;"></div>
 +
</div>
 +
<div class="person-wrap">
 +
<div class="person-photo"><img src="./img/maisa-square.png"></div>
 +
<div class="person-texts">
 +
<h3 style="color: #336633; font-size: 120%">Maisa Vuorte</h3>
 +
Aalto University<br>
 +
<br>
 +
Maisa is a fourth year Master's student in Biosystems and Biomaterials Engineering at Aalto University, minoring in Physical Chemistry. She has Bachelor's in Bioinformation Technology with a Minor in Mathematics. She has worked in computational chemistry, mainly molecular modeling. In iGEM she is responsible for leading the modeling aspects of our project.<br>
 +
</div>
 +
<div style="clear: both;"></div>
 +
</div>
 +
<div class="person-wrap">
 +
<div class="person-photo"><img src="./img/matilda-square.png"></div>
 +
<div class="person-texts">
 +
<h3 style="color: #336633; font-size: 120%">Matilda Tuure</h3>
 +
Aalto University<br>
 +
<br>
 +
Matilda is studying her Master’s degree in Fashion, Clothing and Textile Design in Aalto University. She has several years working background as a functional clothing and sport wear designer. In iGEM team her main responsibilities are branding and graphic design.<br>
 +
</div>
 +
<div style="clear: both;"></div>
 +
</div>
 +
<div class="person-wrap">
 +
<div class="person-photo"><img src="./img/meo-square.png"></div>
 +
<div class="person-texts">
 +
<h3 style="color: #336633; font-size: 120%">Meo Ekroos</h3>
 +
Aalto University<br>
 +
<br>
 +
Meo is a 3rd year Bachelor's student of BioIT in Aalto University, and has computer science as a minor. He is interested in medicine, nutrition, sports, meditation and well-being. In iGEM he is the main person responsible for the team web pages. He will probably play a part in the modelling business and do some lab work, research and writing, as well.<br>
 +
</div>
 +
<div style="clear: both;"></div>
 +
</div>
 +
<div class="person-wrap">
 +
<div class="person-photo"><img src="./img/meryem-square.png"></div>
 +
<div class="person-texts">
 +
<h3 style="color: #336633; font-size: 120%">Meryem Ecem Kaya</h3>
 +
University of Helsinki<br>
 +
<br>
 +
Meryem is pursuing her Master's in Molecular Biotechnology at University of Helsinki. Her Bachelor’s degree is in Genetics and Bioengineering. Her future goal is to become a researcher who has an interdisciplinary background. In iGEM, she will be mostly do lab work during summer. She's also responsible for collaborations with other teams. Additionally, she will keep you updated of our iGEM journey with blog posts.<br>
 +
</div>
 +
<div style="clear: both;"></div>
 +
</div>
 +
<div class="person-wrap">
 +
<div class="person-photo"><img src="./img/michal-square.png"></div>
 +
<div class="person-texts">
 +
<h3 style="color: #336633; font-size: 120%">Michal Pasik</h3>
 +
Aalto University<br>
 +
<br>
 +
Michal is a final-year Master’s student of Mechanical Engineering at Aalto University. He is currently finalizing his thesis, which is related to 3D printing in the medical applications market. During his studies, he has developed great enthusiasm for Product Development. In iGEM he is responsible for potential device prototype development.<br>
 +
</div>
 +
<div style="clear: both;"></div>
 +
</div>
 +
<div class="person-wrap">
 +
<div class="person-photo"><img src="./img/oona-square.png"></div>
 +
<div class="person-texts">
 +
<h3 style="color: #336633; font-size: 120%">Oona Kinnunen</h3>
 +
University of Helsinki<br>
 +
<br>
 +
Oona is studying for her Master’s degree in Molecular Biosciences at the University of Helsinki, majoring in Genetics. She also has Minors in Chemistry, and Physiology and Neuroscience. During her studies she has worked in a research group which studies Drosophila genetics related to nutrient sensing. Her main responsibilities in iGEM are planning and performing experiments in the lab.<br>
 +
</div>
 +
<div style="clear: both;"></div>
 +
</div>
 +
<div class="person-wrap">
 +
<div class="person-photo"><img src="./img/usha-square.png"></div>
 +
<div class="person-texts">
 +
<h3 style="color: #336633; font-size: 120%">Ushanandini Mohanraj</h3>
 +
University of Helsinki<br>
 +
<br>
 +
Usha is currently pursuing her Master's in Translational Medicine at University of Helsinki. She has a Bachelor's in Biotechnology. Apart from research she also has interests in entrepreneurship. In iGEM she is one of the responsible people for lab work and experimental design and will contribute to human outreach practices and blog contents.<br>
 +
</div>
 +
<div style="clear: both;"></div>
 +
</div>
 +
</div>
  
−
.introtext {
+
<!--Space for footer-->
−
  font-weight: lighter;
+
<br>
−
  line-height: 32px;
+
<br>
−
}
+
<br>
 +
<br>
 +
<br>
  
−
/* Team page styles */
+
<!-- FOOTER -->
 +
        <footer>
 +
            <div class="footer-social">
 +
                      <div class="texts">
 +
                        <ul class="pe-social">
 +
                        <a href="index.html">HOME</a>
 +
                        <a href="http://www.aalto.fi/en/">AALTO UNIVERSITY</a>
 +
                        <a href="http://www.aaltohelsinki.com/2017/index.html"><img class="some" src="./logos-icons/home_icon.png"></a>
 +
                        <li><a href="https://www.facebook.com/AaltoHelsinki/"><i class="pe-so-facebook pe-hover pe-2x"></i></a></li>
 +
                        <li><a href="https://www.instagram.com/aaltohelsinki_igem/"><i class="pe-so-instagram pe-hover pe-2x"></i></a></li>
 +
                        <li><a href="https://twitter.com/aaltohelsinki?lang=en"><i class="pe-so-twitter pe-hover pe-2x"></i></a></li>
 +
                        <li><a href="https://www.linkedin.com/company-beta/16253263/"><i class="pe-so-linkedin pe-hover pe-2x"></i></a></li>
 +
                        <a href="https://www.helsinki.fi/en">UNIVERSITY OF HELSINKI</a>
 +
                        <a href="../Aalto-Helsinki-wiki-17/Map.html">SITE MAP</a>
 +
                        </ul>
 +
                    </div>
 +
                </div>
 +
        </footer>
  
−
.person-wrap {
+
</body>
−
  width: 100%;
+
<html>
−
  padding-top: 1%;
+
−
  padding-bottom: 5%;
+
−
  padding-left: 2%;
+
−
  padding-right: 0.5%;
+
−
  font-family: Work Sans;
+
−
}
+
−
.person-photo {
+
−
  padding: 2% 0 2% 0;
+
−
  float: left;
+
−
  width: 25%;
+
−
}
+
−
.person-texts {
+
−
  float: right;
+
−
  width: 68%;
+
−
  font-weight: lighter;
+
−
  line-height: 28px;
+
−
  font-family: Work Sans;
+
−
  text-align: justify;
+
−
  margin-right: 2%;
+
−
}
+
−
 
+
−
/* Icons and porifi styles */
+
−
.some {
+
−
  display: inline-block;
+
−
  width: 30px;
+
−
  vertical-align: middle;
+
−
}
+
−
 
+
−
.some:hover {
+
−
  content: url('https://igem-qsf.github.io/Aalto-Helsinki-wiki-17/logos-icons/home_icon_hover.png');
+
−
}
+
−
 
+
−
p.porify {
+
−
  padding-top: 6%;
+
−
  text-align: center;
+
−
  width: 30%;
+
−
  margin: auto;
+
−
}
+
−
 
+
−
#roll-o {
+
−
    position: absolute; /* Sit on top of the page content */
+
−
    display: block; /* none: Hidden by default */
+
−
    width: 6%;
+
−
    top: 5%;
+
−
    left: 9%;
+
−
    right: 0;
+
−
    bottom: 0;
+
−
    background-color: rgba(0,0,0,0);
+
−
    z-index: 2000; /* Specify a stack order in case you're using a different order for other elements */
+
−
    cursor: default;
+
−
}
+
−
 
+
−
.o {
+
−
  position: relative;
+
−
  top: 0 !important;
+
−
  left: 0 !important;
+
−
}
+
−
 
+
−
#quote-block {
+
−
  width: 100%;
+
−
  top: 2%;
+
−
  padding: 30px 0px;
+
−
  text-align: left;
+
−
  background-color: #339999;
+
−
  overflow: hidden;
+
−
  font-family: Work Sans;
+
−
}
+
−
#quote-block-mod {
+
−
  width: 100%;
+
−
  top: 2%;
+
−
  padding: 30px 0px;
+
−
  text-align: left;
+
−
  background-color: #CC9933;
+
−
  overflow: hidden;
+
−
  font-family: Work Sans;
+
−
}
+
−
#quote-block-hp {
+
−
  width: 100%;
+
−
  top: 2%;
+
−
  padding: 30px 0px;
+
−
  text-align: left;
+
−
  background-color: #c63;
+
−
  overflow: hidden;
+
−
  font-family: Work Sans;
+
−
}
+
−
#quote-block-com {
+
−
  width: 100%;
+
−
  top: 2%;
+
−
  padding: 30px 0px;
+
−
  text-align: left;
+
−
  background-color: #006699;
+
−
  overflow: hidden;
+
−
  font-family: Work Sans;
+
−
}
+
−
#quote-block-peo {
+
−
  width: 100%;
+
−
  top: 2%;
+
−
  padding: 30px 0px;
+
−
  text-align: left;
+
−
  background-color: #336633;
+
−
  overflow: hidden;
+
−
  font-family: Work Sans;
+
−
}
+
−
 
+
−
q {
+
−
  quotes: "“" "”" "‘" "’";
+
−
}
+
−
 
+
−
q:before {
+
−
  content: open-quote;
+
−
  font-size: 150px;
+
−
}
+
−
 
+
−
q:after {
+
−
  content: no-close-quote;
+
−
}
+
−
 
+
−
.quote-mark {
+
−
  width: 0%;
+
−
  float: left;
+
−
  text-align: left;
+
−
  font-weight: bolder;
+
−
  font-size: 0px;
+
−
  padding: 0 8%;
+
−
  color: #000000;
+
−
  margin-bottom:-100px;
+
−
  margin-top:-40px;
+
−
}
+
−
 
+
−
.quote-text {
+
−
  width: 70%;
+
−
  text-align: left;
+
−
  font-weight: bolder;
+
−
  font-size: 30px;
+
−
  padding: 0 18%;
+
−
  color: #000000;
+
−
}
+
−
 
+
−
.quote-person {
+
−
  width: 69%;
+
−
  text-align: right;
+
−
  font-weight: lighter;
+
−
  font-size: 25px;
+
−
  padding: 0 18%;
+
−
  color: #000000;
+
−
}
+
−
 
+
−
#color-block {
+
−
  width: 100%;
+
−
  top: 2%;
+
−
  padding: 30px 0px;
+
−
  text-align: left;
+
−
  background-color: #339999;
+
−
  overflow: hidden;
+
−
}
+
−
 
+
−
#color-block-mod {
+
−
  width: 100%;
+
−
  top: 2%;
+
−
  padding: 30px 0px;
+
−
  text-align: left;
+
−
  background-color: #CC9933;
+
−
  overflow: hidden;
+
−
}
+
−
 
+
−
#color-block-com {
+
−
  width: 100%;
+
−
  top: 2%;
+
−
  padding: 30px 0px;
+
−
  text-align: left;
+
−
  background-color: #006699;
+
−
  overflow: hidden;
+
−
}
+
−
#parts-text {
+
−
  padding: 1% 0% 1% 13%;
+
−
  color: #ffffff;
+
−
  width: 46%;
+
−
  float: left;
+
−
  text-align: justify;
+
−
  font-weight: bold;
+
−
  overflow: hidden;
+
−
}
+
−
#parts-photo {
+
−
  padding: 1% 13% 1% 5%;
+
−
  float: right;
+
−
  width: 23%;
+
−
}
+
−
 
+
−
.color-block-container {
+
−
  min-height: 68%; /*fills the remaining space of the page*/
+
−
  display: flex;
+
−
  flex-direction: column;
+
−
  /*position: relative;
+
−
  width: 100%;*/
+
−
  background-color: #f36;
+
−
}
+
−
.color-block-container > div {
+
−
  flex: 1 1 auto;
+
−
  display: flex;
+
−
}
+
−
.color-block-container > div > div {
+
−
  flex: 1 1 auto;
+
−
}
+
−
.color-block-hp > div {
+
−
  padding: 1rem;
+
−
}
+
−
.color-block-hp > div:nth-child(1) {
+
−
  background-color: #c63;
+
−
}
+
−
.color-block-hp > div:nth-child(2) {
+
−
  background-color: #c63;
+
−
}
+
−
.color-block-hp > div:nth-child(3) {
+
−
  background-color: #c63;
+
−
}
+
−
.color-block-hp > div:hover {
+
−
  padding: 1rem;
+
−
}
+
−
.color-block-hp > div:hover:nth-child(1) {
+
−
  background-color: #b85c2e;
+
−
  /*on hover darker shade of same color*/
+
−
}
+
−
.color-block-hp > div:hover:nth-child(2) {
+
−
  background-color: #b85c2e;
+
−
  /*on hover darker shade of same color*/
+
−
}
+
−
.color-block-hp > div:hover:nth-child(3) {
+
−
  background-color: #b85c2e;
+
−
  /*on hover darker shade of same color*/
+
−
}
+
−
#color-block-hp {
+
−
  /*height: 200px;*/
+
−
  /*min-height: 100px;*/
+
−
  /*width: 100%;
+
−
  top: 0%;
+
−
  height: 80%;
+
−
  padding: 3% 0px;*/
+
−
  text-align: left;
+
−
  background-color: #c63;
+
−
  /*overflow: hidden;*/
+
−
}
+
−
#color-block-team {
+
−
  /*scroll effect: background: url("./img/1group crop+.jpg") no-repeat center center fixed;*/
+
−
  background: url("./img/1group crop+.jpg") no-repeat center center; /* attention, no dash */
+
−
  /*background-size: 100%;*/
+
−
  background-size: cover;
+
−
  height: 55%;
+
−
  /*width: 100%;
+
−
  top: 2%;
+
−
  padding: 30px 0px;
+
−
  text-align: left;
+
−
  background-color: #c63;
+
−
  overflow: hidden;*/
+
−
}
+
−
#color-block:hover {
+
−
  background-color: #066;
+
−
  /*on hover darker shade of same color*/
+
−
}
+
−
#color-block-mod:hover {
+
−
  background-color: #b88a2e;
+
−
  /*on hover darker shade of same color*/
+
−
}
+
−
#color-block-hp:hover {
+
−
  background-color: #b85c2e;
+
−
  /*on hover darker shade of same color*/
+
−
}
+
−
#color-block-com:hover {
+
−
  background-color: #036;
+
−
  /*on hover darker shade of same color*/
+
−
}
+
−
.text1 {
+
−
  width: 60%;
+
−
  /*text closer to center*/
+
−
  float: left;
+
−
  padding: 2% 0;
+
−
  text-align: center;
+
−
  font-weight: bolder;
+
−
  font-size: 30px;
+
−
  color: #fff;
+
−
}
+
−
.text2 {
+
−
  left: 50%;
+
−
  width: 40%;
+
−
  /*so the text doesn't start immediately from 50% of page*/
+
−
  float: right;
+
−
  font-size: 16px;
+
−
  color: #fff;
+
−
  text-decoration: none;
+
−
}
+
−
.text2-hp {
+
−
  /*left: 50%;*/
+
−
  /*padding: 2% 0;*/
+
−
  width: 40%;
+
−
  text-align: left;
+
−
  /*so the text doesn't start immediately from 50% of page*/
+
−
  /*float: right;
+
−
  font-size: 16px;
+
−
  color: #ffffff;*/
+
−
  text-decoration: none;
+
−
  display: flex;
+
−
  /*The links will flex in the vertical direction*/
+
−
  flex-direction: column;
+
−
  justify-content: center;
+
−
}
+
−
 
+
−
.text2 a {
+
−
  font-weight: bold;
+
−
  color: #ffffff;
+
−
  text-decoration: none;
+
−
  display: block;
+
−
}
+
−
 
+
−
.text2-hp a {
+
−
  font-weight: bold;
+
−
  color: #ffffff;
+
−
  line-height: 6px;
+
−
  text-decoration: none;
+
−
  display: block;
+
−
}
+
−
 
+
−
.text2 a:hover {
+
−
  color: #eeeeee;
+
−
  text-decoration: none;
+
−
}
+
−
 
+
−
.text2-hp a:hover {
+
−
  color: #eeeeee;
+
−
  text-decoration: none;
+
−
}
+
−
 
+
−
@font-face {
+
−
  font-family: Quicksand;
+
−
  src: url(Adam.otf);
+
−
}
+
−
 
+
−
h1 {
+
−
  color: #000000;
+
−
  padding: 10px;
+
−
  font-size: 250%;
+
−
  text-align: center;
+
−
  font-weight: normal;
+
−
}
+
−
 
+
−
h2 {
+
−
  color: #000000;
+
−
  padding: 10px;
+
−
  font-size: 80px;
+
−
}
+
−
 
+
−
h3 {
+
−
  color: #000000;
+
−
  font-size: 200%;
+
−
  text-align: left;
+
−
}
+
−
 
+
−
h4 {
+
−
  color: #000000;
+
−
  font-size: 130%;
+
−
  text-align: left;
+
−
}
+
−
 
+
−
h5 {
+
−
  color: #ffffff;
+
−
  font-size: 130%;
+
−
  text-align: left;
+
−
}
+
−
 
+
−
#dropdown {
+
−
  position: relative;
+
−
  height: 24px;
+
−
  background: #ffffff;
+
−
  width: auto;
+
−
}
+
−
#dropdown ul {
+
−
  list-style: none;
+
−
  padding: 0;
+
−
  margin: auto; /*this was 0*/
+
−
  /*text-align: center; this was added*/
+
−
  line-height: 1;
+
−
}
+
−
#dropdown > ul {
+
−
  position: relative;
+
−
  display: block;
+
−
  text-align: center; /*test, this was added*/
+
−
  background: #ffffff; /*This is the heading1 background*/
+
−
  width: 100%;
+
−
  z-index: 500;
+
−
}
+
−
#dropdown:after,
+
−
#dropdown > ul:after {
+
−
  content: ".";
+
−
  display: block;
+
−
  clear: both;
+
−
  visibility: hidden;
+
−
  line-height: 0;
+
−
  height: 0;
+
−
}
+
−
#dropdown.align-right > ul > li {
+
−
  float: right;
+
−
}
+
−
#dropdown.align-center ul {
+
−
  text-align: center;
+
−
}
+
−
#dropdown.align-center ul ul {
+
−
  text-align: center; /*this was left*/
+
−
}
+
−
#dropdown > ul > li {
+
−
  display: inline-block;
+
−
  position: relative;
+
−
  margin: 0;
+
−
  padding: 0;
+
−
}
+
−
#dropdown > ul > #menu-button {
+
−
  display: none;
+
−
}
+
−
#dropdown ul li a {
+
−
  display: block;
+
−
  font-family: 'Quicksand', Work Sans;
+
−
  src: url(Adam.otf);
+
−
  font-weight: bold;
+
−
  text-decoration: none;
+
−
}
+
−
#dropdown > ul > li > a {
+
−
  font-size: 18px;
+
−
  font-weight: bold;
+
−
  text-align: center; /* this was added */
+
−
  padding: 5px 45px; /* heading sizes */
+
−
  color: #363638; /*previous color #7a8189;*/
+
−
  -webkit-transition: color 0.25s ease-out;
+
−
  -moz-transition: color 0.25s ease-out;
+
−
  -ms-transition: color 0.25s ease-out;
+
−
  -o-transition: color 0.25s ease-out;
+
−
  transition: color 0.25s ease-out;
+
−
}
+
−
#dropdown > ul > li.has-sub > a {
+
−
  padding-right: 40px;
+
−
}
+
−
/*Dropdown parent links give different colours when hovered*/
+
−
#dropdown > ul > li:hover > a.lab {
+
−
  color: #339999;
+
−
  border-bottom: 3px solid currentColor;
+
−
}
+
−
#dropdown > ul > li:hover > a.mod {
+
−
  color: #CC9933;
+
−
  border-bottom: 3px solid currentColor;
+
−
}
+
−
#dropdown > ul > li:hover > a.hp {
+
−
  color: #CC6633;
+
−
  border-bottom: 3px solid currentColor;
+
−
}
+
−
#dropdown > ul > li:hover > a.com {
+
−
  color: #336699;
+
−
  border-bottom: 3px solid currentColor;
+
−
}
+
−
#dropdown > ul > li:hover > a.peo {
+
−
  color: #336633;
+
−
  border-bottom: 3px solid currentColor;
+
−
}
+
−
#dropdown li.has-sub::after {
+
−
  display: block;
+
−
  content: "";
+
−
  position: absolute;
+
−
  width: 0;
+
−
  height: 0;
+
−
}
+
−
 
+
−
#dropdown ul ul {
+
−
  position: absolute;
+
−
  left: -9999px;
+
−
  top: 70px;
+
−
  opacity: 0;
+
−
  -webkit-transition: opacity .3s ease, top .25s ease;
+
−
  -moz-transition: opacity .3s ease, top .25s ease;
+
−
  -ms-transition: opacity .3s ease, top .25s ease;
+
−
  -o-transition: opacity .3s ease, top .25s ease;
+
−
  transition: opacity .3s ease, top .25s ease;
+
−
  z-index: 1000;
+
−
}
+
−
#dropdown ul ul ul {
+
−
  top: 37px;
+
−
  padding-left: 5px;
+
−
}
+
−
#dropdown ul ul li {
+
−
  position: relative;
+
−
}
+
−
/* This defines how much space between heading and drop down menu */
+
−
#dropdown > ul > li:hover > ul {
+
−
  width: 95%; /* this makes the dropdown menus widths 100% */
+
−
  left: auto;
+
−
  right: auto;
+
−
  top: 31px; /*this was 44px -> too far away, 31px is right under */
+
−
  opacity: 1;
+
−
}
+
−
#dropdown.align-right > ul > li:hover > ul {
+
−
  left: auto;
+
−
  right: 0;
+
−
  opacity: 1;
+
−
}
+
−
/*Specifies how the link opened by hovering dropdown looks*/
+
−
#dropdown ul ul li:hover > ul {
+
−
  left: 175px; /* how far from the dropdown menu the submenu opens */
+
−
  top: 0;
+
−
  opacity: 1;
+
−
}
+
−
#dropdown.align-right ul ul li:hover > ul {
+
−
  left: auto;
+
−
  /*right: 170px;*/
+
−
  width: 100%; /*added*/
+
−
  top: 0;
+
−
  opacity: 1;
+
−
  padding-right: 5px;
+
−
}
+
−
#dropdown ul ul li a {
+
−
  /*width: 170px;*/
+
−
  width: 100%; /*the width of the subelement of subheadings */
+
−
  border-bottom: 1px solid #eeeeee; /* horiz. line colour */
+
−
  padding: 4px 2.6%;
+
−
  font-size: 13px;
+
−
  font-weight: bold;
+
−
  color: #363638; /* colour of the drop down menu subheadings */
+
−
  background: #ffffff;
+
−
  -webkit-transition: all .5s ease;
+
−
  -moz-transition: all .5s ease;
+
−
  -ms-transition: all .5s ease;
+
−
  -o-transition: all .5s ease;
+
−
  transition: all .5s ease;
+
−
}
+
−
#dropdown.align-right ul ul li a {
+
−
  text-align: center; /* this was right prev. */
+
−
}
+
−
 
+
−
#dropdown ul ul li:hover > a {
+
−
  background: #f2f2f2; /* colour of dropdown menu links when hovered - light grey */
+
−
  color: #363638;
+
−
}
+
−
 
+
−
#dropdown ul ul li:last-child > a,
+
−
#dropdown ul ul li.last > a {
+
−
  border-bottom: 0;
+
−
}
+
−
 
+
−
footer .footer-social {
+
−
  position: static;
+
−
  width: 100%;
+
−
  text-align: center;
+
−
  padding: 5px 0;
+
−
  bottom: 0;
+
−
  background-color: #339999;
+
−
  overflow: hidden;
+
−
}
+
−
footer .footer-social ul {
+
−
  list-style: none;
+
−
  margin: 0;
+
−
  padding: 0;
+
−
}
+
−
footer .footer-social ul li {
+
−
  display: inline-block;
+
−
}
+
−
footer .footer-social ul li a {
+
−
  display: block;
+
−
  font-size: 16px;
+
−
  color: #ffffff;
+
−
  -webkit-transition: background-color 0.3s;
+
−
          transition: background-color 0.3s;
+
−
}
+
−
footer .footer-social ul li a:hover {
+
−
  color: #363638 !important;
+
−
  font-weight: bold;
+
−
}
+
−
 
+
−
footer .footer-social a:hover {
+
−
  color: #363638 !important;
+
−
  font-weight: bold;
+
−
}
+
−
 
+
−
/*Footer for main page*/
+
−
 
+
−
footer .footer-mainpage {
+
−
  position: absolute;
+
−
  width: 100%;
+
−
  text-align: center;
+
−
  padding: 5px 0;
+
−
  bottom: 0;
+
−
  background-color: #339999;
+
−
  overflow: hidden;
+
−
}
+
−
 
+
−
footer .footer-mainpage ul {
+
−
  list-style: none;
+
−
  margin: 0;
+
−
  padding: 0;
+
−
}
+
−
footer .footer-mainpage ul li {
+
−
  display: inline-block;
+
−
}
+
−
footer .footer-mainpage ul li a {
+
−
  display: block;
+
−
  font-size: 16px;
+
−
  color: #ffffff;
+
−
  -webkit-transition: background-color 0.3s;
+
−
          transition: background-color 0.3s;
+
−
}
+
−
footer .footer-mainpage ul li a:hover {
+
−
  color: #363638 !important;
+
−
  font-weight: bold;
+
−
}
+
−
 
+
−
footer .footer-mainpage a:hover {
+
−
  color: #363638 !important;
+
−
  font-weight: bold;
+
−
}
+
−
 
+
−
footer .texts ul a {
+
−
  font-weight: bold;
+
−
  text-decoration: none;
+
−
  color: #ffffff;
+
−
  padding: 15px 30px;
+
−
}
+
−
 
+
−
 
+
−
@media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
+
−
  #dropdown {
+
−
    width: auto;
+
−
  }
+
−
  #dropdown.align-center ul {
+
−
    text-align: center; /* this was left */
+
−
  }
+
−
  #dropdown.align-right > ul > li {
+
−
    float: none;
+
−
  }
+
−
  #dropdown ul {
+
−
    width: auto;
+
−
  }
+
−
  #dropdown .submenuArrow,
+
−
  #dropdown #indicatorContainer {
+
−
    display: none;
+
−
  }
+
−
  #dropdown > ul {
+
−
    height: auto;
+
−
    display: block;
+
−
  }
+
−
  #dropdown > ul > li {
+
−
    float: none;
+
−
  }
+
−
  #dropdown li,
+
−
  #dropdown > ul > li {
+
−
    display: none;
+
−
  }
+
−
  #dropdown ul ul,
+
−
  #dropdown ul ul ul,
+
−
  #dropdown ul > li:hover > ul,
+
−
  #dropdown ul ul > li:hover > ul,
+
−
  #dropdown.align-right ul ul,
+
−
  #dropdown.align-right ul ul ul,
+
−
  #dropdown.align-right ul > li:hover > ul,
+
−
  #dropdown.align-right ul ul > li:hover > ul {
+
−
    position: relative;
+
−
    width: 100%; /*added*/
+
−
    left: auto;
+
−
    top: auto;
+
−
    opacity: 1;
+
−
    padding-left: 0;
+
−
    padding-right: 0;
+
−
    right: auto;
+
−
  }
+
−
  #dropdown ul .has-sub::after {
+
−
    display: none;
+
−
  }
+
−
  #dropdown ul li a {
+
−
    padding: 12px 20px;
+
−
  }
+
−
  #dropdown ul ul li a {
+
−
    border: 0;
+
−
    background: none;
+
−
    width: auto;
+
−
    padding: 28px 35px;
+
−
  }
+
−
  #dropdown.align-right ul ul li a {
+
−
    text-align: center; /*this was left*/
+
−
  }
+
−
  #dropdown ul ul li:hover > a.lab > a.mod {
+
−
    background: none;
+
−
    color: #363638;
+
−
  }
+
−
  #dropdown ul ul ul a {
+
−
    padding: 8px 50px;
+
−
  }
+
−
  #dropdown ul ul ul ul a {
+
−
    padding: 8px 65px;
+
−
  }
+
−
  #dropdown ul ul ul ul ul a {
+
−
    padding: 8px 80px;
+
−
  }
+
−
  #dropdown ul ul ul ul ul ul a {
+
−
    padding: 8px 95px;
+
−
  }
+
−
  #dropdown > ul > #menu-button {
+
−
    display: block;
+
−
    cursor: pointer;
+
−
  }
+
−
  #dropdown #menu-button > a {
+
−
    padding: 14px 20px;
+
−
  }
+
−
  #dropdown ul.open li,
+
−
  #dropdown > ul.open > li {
+
−
    display: block;
+
−
  }
+
−
  #dropdown > ul.open > li#menu-button > a {
+
−
    color: #fff;
+
−
    border-bottom: 1px solid rgba(150, 150, 150, 0.1);
+
−
  }
+
−
  #dropdown ul ul::after {
+
−
    display: none;
+
−
  }
+
−
  #dropdown #menu-button::after {
+
−
    display: block;
+
−
    content: '';
+
−
    position: absolute;
+
−
    height: 3px;
+
−
    width: 22px;
+
−
    border-top: 2px solid #7a8189;
+
−
    border-bottom: 2px solid #7a8189;
+
−
    right: 20px;
+
−
    top: 0px; /* this was 15px */
+
−
  }
+
−
  #dropdown #menu-button::before {
+
−
    display: block;
+
−
    content: '';
+
−
    position: absolute;
+
−
    height: 3px;
+
−
    width: 22px;
+
−
    border-top: 2px solid #7a8189;
+
−
    right: 20px;
+
−
    top: 0px; /*this was 25px*/
+
−
  }
+
−
  #dropdown ul.open #menu-button::after,
+
−
  #dropdown ul.open #menu-button::before {
+
−
    border-color: #fff;
+
−
  }
+
−
}
+
−
</style>
+
−
</html>
+

Revision as of 14:16, 18 September 2017

<!doctype html> Aalto-Helsinki








OUR TEAM

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book [1]. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Eveliina Karjalainen

University of Helsinki

Eveliina is a Master's student in Plant and Forest Biotechnology, currently has two minors in The Basics of Biochemistry and Molecular Biology as well as Microbe Biotechnology and Environmental Biotechnology. Finishing two other minors in Bioinformatics and Mycology. She is interested in the environment, plants, fungi and insects. In iGEM, she is the team captain and will take part in both laboratory work and modelling.

Jenny Mujunen

University of Helsinki

Jenny is currently studying biology in the University of Helsinki. She also has a Bachelor’s degree in Culture and Arts, and has been working as a biology book illustrator in the past. On top of being part of the laboratory team she is the team’s treasurer and has taken care of Aalto-Helsinki team’s social media accounts.

Maisa Vuorte

Aalto University

Maisa is a fourth year Master's student in Biosystems and Biomaterials Engineering at Aalto University, minoring in Physical Chemistry. She has Bachelor's in Bioinformation Technology with a Minor in Mathematics. She has worked in computational chemistry, mainly molecular modeling. In iGEM she is responsible for leading the modeling aspects of our project.

Matilda Tuure

Aalto University

Matilda is studying her Master’s degree in Fashion, Clothing and Textile Design in Aalto University. She has several years working background as a functional clothing and sport wear designer. In iGEM team her main responsibilities are branding and graphic design.

Meo Ekroos

Aalto University

Meo is a 3rd year Bachelor's student of BioIT in Aalto University, and has computer science as a minor. He is interested in medicine, nutrition, sports, meditation and well-being. In iGEM he is the main person responsible for the team web pages. He will probably play a part in the modelling business and do some lab work, research and writing, as well.

Meryem Ecem Kaya

University of Helsinki

Meryem is pursuing her Master's in Molecular Biotechnology at University of Helsinki. Her Bachelor’s degree is in Genetics and Bioengineering. Her future goal is to become a researcher who has an interdisciplinary background. In iGEM, she will be mostly do lab work during summer. She's also responsible for collaborations with other teams. Additionally, she will keep you updated of our iGEM journey with blog posts.

Michal Pasik

Aalto University

Michal is a final-year Master’s student of Mechanical Engineering at Aalto University. He is currently finalizing his thesis, which is related to 3D printing in the medical applications market. During his studies, he has developed great enthusiasm for Product Development. In iGEM he is responsible for potential device prototype development.

Oona Kinnunen

University of Helsinki

Oona is studying for her Master’s degree in Molecular Biosciences at the University of Helsinki, majoring in Genetics. She also has Minors in Chemistry, and Physiology and Neuroscience. During her studies she has worked in a research group which studies Drosophila genetics related to nutrient sensing. Her main responsibilities in iGEM are planning and performing experiments in the lab.

Ushanandini Mohanraj

University of Helsinki

Usha is currently pursuing her Master's in Translational Medicine at University of Helsinki. She has a Bachelor's in Biotechnology. Apart from research she also has interests in entrepreneurship. In iGEM she is one of the responsible people for lab work and experimental design and will contribute to human outreach practices and blog contents.