Widget:新样式：修订间差异

H萌娘，万物皆可H的百科全书！
跳到导航 跳到搜索
imported>=海豚=
无编辑摘要
imported>=海豚=
无编辑摘要
 
（未显示同一用户的21个中间版本）
第1行： 第1行：
 
{{Athens/Navbar}}
<html lang="en">
<html lang="en">
<head>
<head>
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Quicksand" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css2?family=Heebo:wght@800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!--<link rel="stylesheet" href="style.css">-->
    <!--<link rel="stylesheet" href="style.css">-->
    <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>  
  
   <title>iGEM Athens 2020 Wiki</title>
    <style>
    <style>
     *{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}


html{
   scroll-behavior: smooth;
   scroll-padding-top:80px;
}


body{
body{
    font-family: 'Quicksand', sans-serif;
    font-family: 'Quicksand', sans-serif;
    background-color: #000000;
    background-color: #000;
    color: #D5D5D5;
    color: #D5D5D5;
   line-height: 1.6;
    height: 100vh;
    height: 100vh;
   width: 90vw;
    overflow-x:hidden;
    overflow-x: hidden;
  
}
ol { text-align: left;
  font-size: 140%;}
ul { text-align: left;}
a:hover{
font-weight: bold;
text-decoration: none;
}
}
a{color: #D5D5D5;}
.lightBack {color: #d5d5d5;}


.display-1 { font-size: 40px;
.mw-body {
      position: left;
   background-color: black;
}
}
  
/*________________________________Parallax______________________________*/




#content { 
header{
width: 100%;
   width: 100%;
     min-height: 100vh;
   height: 100vh;
     margin: 0;
   position: relative;
     margin-top: -12vh;
   overflow: hidden;
     padding: 0;
}
     padding-top: 0px;
background-color:black;


header:after{
   content: '';
   position: absolute;
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
   background-color: rgba(0, 0, 0, 0.05);
   z-index: 25;
}
}


#top_title { 
.mountain1{
display: inline;
   position: absolute;
   bottom: -12%;
   width: 100%;
   right: 0;
   z-index: 19;
}
}


#navbar { 
.person{
display: inline;
   position: absolute;
 
   width: 100%;
   bottom: -12%;
   left: -70px;
   z-index: 20;
}
}


.navbar_ul  {
.mountain2{
list-style-type: none;
   position: absolute;
margin: 0;
   width: 100%;
padding: 0;
   bottom: -12%;
overflow: hidden;
   left: 0;
   z-index: 18;
}
}


.navbar_ul ul{
.mountain3{
list-style-type: none;
   position: absolute;
   width: 100%;
   bottom: -19%;
   right: 0;
   z-index: 17;
}
}


.navbar_ul.transparent {
.sky{
background-color:transparent;
   position: absolute;
   width: 100%;
   bottom: -24%;
   right: 0;
}
}
  .project,.wet,.dry,.human,.team,.judging,.achievements,.future{
 
  float: left;
  font-size: 7vh;
    justify-content: space-around;
    padding: 0px 0px 0px 1.5vh;
 
  }
  .logos{
 
   float: left;
   font-size: 7vh;
     justify-content: space-around;
     padding: 0px 0px 0px 2vh;
 
  }
  .project a,.wet a,.dry a,.human a,.team a,.judging a,.achievements a,.future a,.logos a, .project_dropdown_li a, .wet_dropdown_li a, .dry_dropdown_li a, .human_dropdown_li a, .team_dropdown_li a, .judging_dropdown_li a, .achievements_dropdown_li a, .future_dropdown_li a,.logos_dropdown_li a {
  display: block;
  color: #d5d5d5;
  font-family: "Quicksand", sans-serif;
  text-transform: uppercase;
  text-align: left;
  padding: 2vh 2vh;
  text-decoration: none;
  font-weight: 300;
  letter-spacing: 2px;
  font-size: 2vh;
 
  }
.logo img{
  background-color: transparent;
   width: 170px;
   height: auto;
   vertical-align: top;
   transition: transform 2s;
}


.img-container {
.big-title{
  position: fixed;
  z-index: 99 !important;
  top: 3%; /* required */
  left: 2%;
  width: 170px;
  height: auto;
}
.myimage0 { /*text only always opaque*/
  width: 170px;
  height: auto;
  position: relative;
  margin-top:3vh;
  margin-left:0vh;
  opacity: 1;
}
.myimage1 {
   width: 170px;
   height: auto;
    position: absolute;
    position: absolute;
    opacity: 0;
    z-index: 30;
}
   line-height: 4rem;
.myimage2 {
   top: calc(50% - 2rem);
  width: 170px;
   width: 100%;
  height: auto;
   text-align: center;
  position: absolute;
   font-size: 3rem;
  opacity: 0;
   font-weight: 600;
}
   color: #fff;
.myimage3 {
  width: 170px;
  height: auto;
  position: absolute;
  opacity: 0;
}
.myimage4 {
  width: 170px;
  height: auto;
  position: absolute;
  opacity: 0;
}
.myimage5 {
  width: 170px;
  height: auto;
  position:absolute;
  opacity: 0;
}
.myvideo5 { /*this is the complete one*/
  width: 170px;
  height: auto;
  position: absolute;
  opacity: 0;
}
}
.logo:hover {
  -ms-transform: scale(1.05); /* IE 9 */
  -webkit-transform: scale(1.05); /* Safari 3-8 */
  transform: scale(1.05);


.main{
   width: 100%;
   background-color: #000;
   position: relative;
}
}
.myimage1:hover , .myimage2:hover, .myimage3:hover, .myimage4:hover,.myimage5:hover,.myvideo5:hover{
-ms-transform: scale(1.05); /* IE 9 */
-webkit-transform: scale(1.05); /* Safari 3-8 */
transform: scale(1.05);


.shadow{
   position: absolute;
   bottom:0;
  
   height: 300px;
   width:110vw;
   left: -1%;
   z-index: 20;
   background: linear-gradient(to top, #000, transparent);
}
}
.myimage0:hover{
-ms-transform: scale(1.05); /* IE 9 */
-webkit-transform: scale(1.05); /* Safari 3-8 */
transform: scale(1.05);


.opacity{
   opacity: 0;
}
}
.toggle {
  background-color: white;
  color: #3C3A3A;
  text-indent: 0px;
  position: relative;
  top: 150%;


@media (max-width: 850px){
   section .par_container{
     grid-template-columns: 1fr;
   }
}
}


.toggle:hover {
@media(max-width: 600px){
background-color: #eec53f;
   .big-title{
}
     font-size: 3rem
   }


   .text{
     font-size: .8rem;
   }


.project a:hover:not(.active),.wet a:hover:not(.active),.dry a:hover:not(.active),.human a:hover:not(.active),.team a:hover:not(.active),.judging a:hover:not(.active),.achievements a:hover:not(.active),.future a:hover:not(.active) {
   .title{
color: #ffffff;
     font-size: 1.2rem;
font-weight: bold;
   }
}
}


.project_dropdown_content,.wet_dropdown_content,.dry_dropdown_content,.human_dropdown_content,.team_dropdown_content,.judging_dropdown_content,.achievements_dropdown_content,.future_dropdown_content {
display: none;
position: absolute;
z-index: 1;
}


.project_dropdown_content a:hover{
background-color: #ce34fdc9;
color: #ffffff;
}
.wet_dropdown_content a:hover{
background-color: #3437fdc9;
color: #ffffff;
}
.dry_dropdown_content a:hover{
background-color: #fd3434c9;
color: #ffffff;
}
.human_dropdown_content a:hover{
background-color: #13ff32c9;
color: #ffffff;
}
.team_dropdown_content a:hover{
background-color: #fdb734c9;
color: #ffffff;
}
.judging_dropdown_content a:hover{
background-color: #fc4fc2c9;
color: #ffffff;
}
.achievements_dropdown_content a:hover{
background-color: #34dffdc9;
color: #ffffff;
}
.future_dropdown_content a:hover{
background-color: #fdfa34c9;
color: #ffffff;
}


.project_dropdown_content a,.wet_dropdown_content a,.dry_dropdown_content a,.human_dropdown_content a,.team_dropdown_content a,.judging_dropdown_content a,.achievements_dropdown_content a,.future_dropdown_content a{
/*________________________________Buttons______________________________*/
color: white;
 
text-align: center;
.buttons{
padding: 18px 14px;
background-color: black;
text-decoration: none;
color: white;
font-size: 30px;
min-height:85vh;
width: 100%;
float: left;
padding:100px 10px;
     position:static;
     margin-top:3%;
}
}


.project:hover .project_dropdown_content {
.container{
display: block;
max-width: 1300px;
}
margin: auto;
.wet:hover .wet_dropdown_content {
align-items: center;
  display: block;
     position:static;
}
     margin-left:10%;
.dry:hover .dry_dropdown_content {
  display: block;
}
.human:hover .human_dropdown_content {
  display: block;
}
.team:hover .team_dropdown_content {
  display: block;
}
.judging:hover .judging_dropdown_content {
  display: block;
}
.achievements:hover .achievements_dropdown_content {
  display: block;
}
.future:hover .future_dropdown_content {
  display: block;
}
}






/*________________________________First Animation________________________________*/
.buttons .content{
.clip-circle {
float: left;
   clip-path: circle(60px at center);
width: 100%;
  }
.video-container {
   position:relative;
  }
 
 
.myvideo {
   width: 80%;
   height: auto;
   position: absolute;
   filter: grayscale(100%);
   margin-left: 5%;
   margin-top: 5%;
}
.myvideo-clipped{
   filter: grayscale(100%);
   width: 65%;
   height: auto;
   position: absolute;
   margin-top: 11.8%;
   left:27.8%;
   clip-path:circle(34vh at 50% 50%);
}
.video-container h1 {
   margin:0;
   font-family: sans-serif;
   font-size: 7vw;
   font-weight: 200;
   color: transparent;
   -webkit-text-stroke: 1px white;
   -webkit-text-fill-color: transparent;
   margin-top: 0%;
   left: 20%;
   position: absolute;
   padding:40vh;
}
.video-container h2 {
   margin:0;
   font-family: sans-serif;
   font-size: 7vw;
   font-weight: 200;
   color: transparent;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: white;
   margin-top: 7.5%;
   left: 35%;
   position: absolute;
   padding:40vh;
}
}


.video-container h3 {
.buttons .content .box{
   margin:0;
width: 16.66%;
   font-family: sans-serif;
float: left;
   font-size: 7vw;
padding:0px;
   font-weight: 200;
     position:static;
   color: transparent;
   margin-top: 15%;
   left: 35%;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: white;
   position: absolute;
   padding:40vh;
}
}


.circle{
   position: absolute;
   display: block;
   /*margin: 100px auto;*/
   width: 75vh;
   height: 75vh;
   left:78vh;
   margin-top: 19.7vh;
   background: linear-gradient(#a1a1a1,#4b4a4b);  
   border-radius: 50%;
   animation: animate 2000ms linear infinite;
}


@keyframes animate{
.buttons .content .box .inner{
   from{
padding: 20px;
     transform: rotate(0deg);
text-align: center;
   }
position: static;
 
   to{
     transform: rotate(360deg);
   }
}
}


.circle:after{
.buttons .content .box .inner:hover{
   content: '';
background-color:blueviolet;
   position: fixed;
   top: 35px;
   right: 35px;
   bottom: 35px;
   left: 35px;
   border-radius: 50%;
   background-color: black;


}


.circle span{
   position: absolute;
   width: 100%;
   height: 100%;
   background: linear-gradient(#33ccff,#CB01FF);
   border-radius: 50%;
}


.circle span:nth-child(1){
   filter: blur(5px);
}
}


.circle span:nth-child(2){
.buttons .content a{
   filter: blur(10px);
    color: white;
    line-height:30px;
}
}


.circle span:nth-child(3){
.buttons .content .box .inner a{
   filter: blur(20px);
color:white;
     line-height:30px;
}
}


.circle span:nth-child(4){
.buttons .content .box .inner a::before{
   filter: blur(55px);
position: absolute;
left:0;
bottom:0;
width:0px;
box-sizing: border-box;
height: 0px;
border-bottom:3px solid transparent;
border-left: 3px solid transparent;
transition: all .8s ease;
}
}
 
.buttons .content .box  .inner a::after{
 
position: static;
 
right:0;
.footer{ 
top:0;
   width:80%; 
width:230px;
   height:200px; 
box-sizing: border-box;
   border-top: 3px solid #3D3B3B  ;
height:75px;
   margin:auto;
border-top:3px solid transparent;
   margin-top: 3%;
border-right: 3px solid transparent;
   left: 3%;
transition: all .8s ease;
}
 
.footer ul{
  
   margin:0%  50%;
   text-align:right;
   display:flex;
   position:absolute;
   transform: translate(-40%, -50%);
   color: white;
   margin-left: 3%;
}
}
.footer ul li{
.buttons .content .box .inner hover::after,
   list-style: none;
.buttons .content .box .inner hover::before{
   position:relative;
border-color: purple;
   margin-left: 17%;
  width: 100%;
  height: 100%;
}
}
.footer h4{


@keyframes slide{
   0%{
     background-position-x: 0%;


    text-align: center;
    }
   background-color:none;
    100%{
   position: absolute;
     background-position-x: 600vw;
    margin: 120px 0 0 36%;
   font-size: 12px;
}
 
.footer ul li a{
   text-align: center;
   line-height: 70px;
   font-size:30px;
   margin:0 10px;
   display:block;
   position: relative;
   z-index: 1;


   }
}
}


.footer ul li a .fa{
@media(max-width: 767px){
    position: relative;
.buttons .content .box {
   color: white;
    width:100%;
    transition: 0.5s;
    
 
}
}
.f1 a:hover .fa{
   color: #3b5998;
   transform: rotateY(360deg);
}
}
 
  hr {
.f1 a:before{
    display: block;
    content:'';
    height: 1px;
    position: absolute;
    border: 0;
    top:100%;
    border-top: 1px solid #d5d5d5;
   left:0;
    margin: 1em 0;
    background: #3b5998;
    padding: 0;
    transition:0.5s;
    z-index: 2;
}
}




.f1 a:before{
   content:'';
   position: absolute;
   top:100%;
   left:0;
   background: #3b5998;
   transition:0.5s;
   z-index: 2;
}
.t2 a:hover .fa{
   color:  #55acee;
   transform: rotateY(360deg);
}
.t2 a:before{
   content:'';
   position: absolute;
   top:100%;
   left:0;
   background:  #55acee;
   transition:0.5s;
   z-index: 2;
}
.i3 a:hover .fa{
   color: #C32AA3;
   transform: rotateY(360deg);
}
.i3 a:before{
   content:'';
   position: absolute;
   top:100%;
   left:0;
   background: #C32AA3;
   transition:0.5s;
   z-index: 2;
}
.g4 a:hover .fa{
   color: #dd4b39;
   transform: rotateY(360deg);
}


.g4 a:before{
   content:'';
   position: absolute;
   top:100%;
   left:0;
   background: #dd4b39;
   transition:0.5s;
   z-index: 2;
}


.x5 a:hover .fa{
   color: #9ACD99;
   transform: rotateY(360deg);
}
.x5 a:before{
   content:'';
   position: absolute;
   top:100%;
   left:0;
   background: lightgoldenrodyellow;
   transition:0.5s;
   z-index: 2;
}
@keyframes slide{
@keyframes slide{
    0%{
    0%{
第549行： 第279行：
}
}


/*-----------------------COLOUR FOR CHANGE ANIMATION-----------*/
 
.fade-in1 {
/*________________________________Main Text______________________________*/
   animation: fadeIn1 ease 2s;
section{
   -webkit-animation: fadeIn1 ease 2s;
     font-family:'Quicksand',sans-serif;
   -moz-animation: fadeIn1 ease 2s;
   -o-animation: fadeIn1 ease 2s;
   -ms-animation: fadeIn1 ease 2s;
  }
  @keyframes fadeIn1 {
   0% {
    opacity:0;
   }
   100% {
    opacity:1;
   }
  }
 
  @-moz-keyframes fadeIn1 {
   0% {
    opacity:0;
   }
   100% {
    opacity:1;
   }
  }
 
  @-webkit-keyframes fadeIn1 {
   0% {
    opacity:0;
   }
   100% {
    opacity:1;
   }
  }
 
  @-o-keyframes fadeIn1 {
   0% {
    opacity:0;
   }
   100% {
    opacity:1;
   }
  }
 
  @-ms-keyframes fadeIn1 {
   0% {
    opacity:0;
   }
   100% {
    opacity:1;
  }
}
  .fade-in2 {
   animation: fadeIn2 ease 4s;
   -webkit-animation: fadeIn2 ease 4s;
   -moz-animation: fadeIn2 ease 4s;
   -o-animation: fadeIn2 ease 4s;
   -ms-animation: fadeIn2 ease 4s;
  }
  @keyframes fadeIn2 {
   0% {
    opacity:0;
   }
   100% {
    opacity:1;
   }
  }
 
  @-moz-keyframes fadeIn2 {
   0% {
    opacity:0;
   }
   100% {
    opacity:1;
   }
  }
 
  @-webkit-keyframes fadeIn2 {
   0% {
    opacity:0;
   }
   100% {
    opacity:1;
   }
  }
 
  @-o-keyframes fadeIn2 {
   0% {
    opacity:0;
   }
   100% {
    opacity:1;
   }
  }
 
  @-ms-keyframes fadeIn2 {
   0% {
    opacity:0;
   }
   100% {
    opacity:1;
  }
}
.fade-in3 {
   animation: fadeIn3 ease 6s;
   -webkit-animation: fadeIn3 ease 6s;
   -moz-animation: fadeIn3 ease 6s;
   -o-animation: fadeIn3 ease 6s;
   -ms-animation: fadeIn3 ease 6s;
  }
  @keyframes fadeIn3 {
   0% {
    opacity:0;
   }
   100% {
    opacity:1;
   }
  }
 
  @-moz-keyframes fadeIn3 {
   0% {
    opacity:0;
   }
   100% {
    opacity:1;
   }
  }
 
  @-webkit-keyframes fadeIn3 {
   0% {
    opacity:0;
   }
   100% {
    opacity:1;
   }
  }
 
  @-o-keyframes fadeIn3 {
   0% {
    opacity:0;
   }
   100% {
    opacity:1;
   }
  }
 
  @-ms-keyframes fadeIn3 {
   0% {
    opacity:0;
   }
   100% {
    opacity:1;
  }}
  /*------------------text with button words--------------*/
  .main-header{
   font-family: "Quicksand",sans-serif;
   position: relative;
   top: 50%;
   height: 40vh;
    display: flex;
    display: flex;
    flex-direction: column;
    flex-direction: column;
   align-items: center;
    justify-content: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    padding: 2rem;
   height: 100%;
    margin-bottom: 10vh;
}
}


.main-header h4 {
section h1{
   font-size: 4rem;
   margin-bottom: 2rem;
   line-height: 1.2;
   color: white;
}


.main-header h4 span {
   color:white;
    color: #CB01FF;
   font-size: 33px;
    text-align: left;
   margin-left: 100px;
   padding: 10px 0px;
}
}
section h3{


.main-header p{
   font-size: 2rem;
    color:white;
    color:white;
   font-size: 27px;
   text-align: left;
   margin-left: 100px;
   padding: 10px 0px;
}
}


.item {
section p{
  width: 200px;
   font-size: 10rem;
  height: 200px;
   margin: 10px 100px;
  margin: 50px auto;
  padding-top: 75px;
  text-align: center;
  color: #FFF;
  font-size: 3em;
}
}
 
.flip-container{
.test {
max-width: 1200px;
  height: 50vh;
margin: auto;
  margin-top: 120vh;
align-items: center;
  display: flex;
     position:static;
  flex-direction: row;
}
}
.test2 {
.flip-container .flip-card {
   height: 50vh;
   background-color: transparent;
   margin-top: -500vh;
   width: 300px;
   display: flex;
   height: 300px;
   flex-direction: row;
   perspective: 1000px;
}
}


.parallax {
.flip-container .flip-card-inner {
   width: 50%;
   position: relative;
   height: 50%;
   width: 100%;
   color: #d5d5d5;
   height: 100%;
  font-size: 4vh;
   text-align: center;
   text-align: center;
   font-family: 'Quicksand',sans-serif;
   transition: transform 0.6s;
  display: flex;
   transform-style: preserve-3d;
   flex-direction: row;
   box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  justify-content: center;
   align-items: center;
}
}


.p1 { /*less indented*/
.flip-container .flip-card:hover .flip-card-inner {
  position: relative;
   transform: rotateY(180deg);
  left: 5%;
   background-color:transparent;
}
}


.p2 { /* more indented*/
.flip-container .flip-card-front, .flip-card-back {
   background-color: transparent;
   position: absolute;
   position: relative;
   width: 100%;
   left: 15%;
   height: 100%;
}
  -webkit-backface-visibility: hidden;
.p3 { /* not indented*/
   backface-visibility: hidden;
   background-color: transparent;
}
}


.slidein2 {
.flip-container .flip-card-front {
  font-family: "Quicksand",sans-serif;
   background-color: #bbb;
  display: flex;
   color: black;
  justify-content: center;
   align-items: center;
  height: 10vh;
  color: #f0eeee;
   text-align: center;
  background:transparent;
  z-index:50 !important;
}
}


.slidein2 .row {
.flip-container .flip-card-back {
   position: absolute;
   background-color: #2980b9;
   justify-content: space-around;
  color: white;
   transform: rotateY(180deg);
}
}
.slidein2 h4{
.flip-container h1{
   font-size: 2.5vh;
  font-family:'Quicksand',sans-serif;
   margin-top: -860vh;
  color:white;
   /*margin-bottom: 2rem;*/
  font-size:5vh;
   line-height: 1.2;
  text-align:center;
   color: #d5d5d5;
  position:relative;
  top:30%;
  padding: 10px 10px;
}
}
.slidein2 h5{
.flip-container p{
   font-size: 2.5vh;
  font-family:'Quicksand',sans-serif;
   margin-top: -750vh;
  color:white;
   /*margin-bottom: 2rem;*/
   font-size:5vh;
   line-height: 1.2;
  text-align:center;
   color: #d5d5d5;
  position:relative;
   margin-left:20px;
   margin-right:20px;
   top:30%;
   width:80%;
}
}
.slidein2 h6{
.collapsible {
   font-size: 2.5vh;
   background-color: #CD01FF85;
   margin-top: -640vh;
  color: white;
   /*margin-bottom: 2rem;*/
  cursor: pointer;
   line-height: 1.2;
  padding: 18px;
   color: #d5d5d5;
  width: 80%;
  border: none;
   text-align: left;
  outline: none;
   font-size: 15px;
   position:relative;
   margin-left:12%;
}
}


.collapse-active, .collapsible:hover {
  background-color: #CD01FF;
}


.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}


.collapse-active:after {
  content: "\2212";
}


.text-button {
.collapse-content {
   color: #f0eeee;
   padding: 0 18px;
  font-family: "Quicksand",sans-serif;
   max-height: 0;
  font-size: 2rem;
   width:80%;
   background-color: rgba(168, 39, 168, 0.87);
  background-repeat:no-repeat;
  border: none;
   cursor:pointer;
   overflow: hidden;
   overflow: hidden;
   outline:none;
   transition: max-height 0.2s ease-out;
   display: block;
   background-color: black;
  position:relative;
  margin-left:12%;
}
}
.text-button:hover{
.card-container{
  -ms-transform: scale(1.05); /* IE 9 */
max-width: 1200px;
  -webkit-transform: scale(1.05); /* Safari 3-8 */
margin: auto;
  transform: scale(1.05);
align-items: center;
 
     position:static;
  }
}
 
.card-container .card {
  .video-container-parallax{
  background-color: transparent;
   position: relative;
   width: 19vw;
 
  height: 35vw;
  }
  perspective: 1000px;
  .video-parallax-left{
   border: 10px solid blueviolet;
   width: 60%;
   height: auto;
   position: absolute;
   left: 15%;
   opacity: 0;
   }
  .video-parallax-right{
   width: 57%;
   height: auto;
   position: absolute;
   margin-top: 12%;
   left: 50%;
   opacity: 0;
   }
  .morphae { /*this is the complete one*/
   width: 500px;
   height: auto;
   position: absolute;
   opacity: 1;
   }
  hr {
   display: block;
   height: 1px;
   border: 0;
   border-top: 1px solid #d5d5d5;
   margin: 1em 0;
   padding: 0;
}
}


/* i have to fix the videos on ezgif and maybe compress them cause theyre too big*/
.card-container .card-inner {
.loader-wrapper {
  position: relative;
   width: 100%;
   width: 100%;
   height: 100%;
   height: 100%;
   position: fixed;
   text-align: center;
  z-index: 100 !important;
   transition: transform 0.6s;
  top: 0;
   transform-style: preserve-3d;
   left: 0;
   box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
   background-color: #000000;
  display:flex;
  justify-content: center;
   align-items: center;
}
}
.loader {
 
  display: inline-block;
.card-container .card:hover .card-inner {
  width: 30px;
   transform: rotateY(180deg);
   height: 30px;
   
   position: relative;
  top:0%;
  left:0%;
  border: 4px solid #Fff;
  animation: loader 2s infinite ease;
}
}
.loader-wrapper h1{
.card-container .card:hover h1 {
position:fixed;
  display:none;  
top:10%;
left:5%;
color:white;
font-size:4vh;
font-family:"Quicksand",sans-serif;
  opacity:0;
}
}
.loader-inner {
 
   vertical-align: top;
.card-container .card-front {
  display: inline-block;
   position: absolute;
   width: 100%;
   width: 100%;
   background-color: #fff;
   height: 100%;
   animation: loader-inner 2s infinite ease-in;
  -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
}
}
@keyframes loader {
 
  0% { transform: rotate(0deg);}
.card-container .card-front {
  25% { transform: rotate(180deg);}
   background-color: transparent;
  50% { transform: rotate(180deg);}
   color: white;
   75% { transform: rotate(360deg);}
   100% { transform: rotate(360deg);}
}
}
@keyframes loader-inner {
.container .card-front, .card-back {
   0% { height: 0%;}
   position: absolute;
   25% { height: 0%;}
   width: 100%;
   50% { height: 100%;}
   height: 100%;
   75% { height: 100%;}
   -webkit-backface-visibility: hidden;
   100% { height: 0%;}
   backface-visibility: hidden;
}
.scrolldown{
   position: relative;
   left: 56.5%;
   margin-top: 13%;
   width: 40px;
   height: 40px;
   transform: translateY(-80px) translateX(-50%) rotate(45deg);
}
}
.scrolldown span{
   position: absolute;
   top:0px;
   left: 0;
   display:block;
   width:100%;
   height:100%;
   border-top: 2px solid white;
   border-left: 2px solid white;
   animation: animate 1.5s linear infinite;
   opacity: 0;


.card-container .card-front {
  background-color: transparent;
  color: black;
}
}


.scrolldown span:nth-child(1){
.card-container .card-back {
   transform: translate(-15px,-15px);
  background-color: transparent;
   animation-delay: 0s;
  color: white;
  transform: rotateY(180deg);
}
}
.scrolldown span:nth-child(2){
.card-container h1{
   transform: translate(0,0);
  font-family:'Quicksand',sans-serif;
   animation-delay: -0.2s;
  color:white;
  font-size:2vw;
  text-align:center;
  position:relative;
  top:25%;
  left:-14%;
  padding: 30px 30px;
  line-height:30px;
}
}
.scrolldown span:nth-child(3){
.card-container p{
   transform: translate(15px,15px);
  font-family:'Quicksand',sans-serif;
   animation-delay: -0.4s;
  color:white;
  font-size:5vw;
  text-align:center;
  position:relative;
  margin-left:20px;
  margin-right:20px;
  top:25%;
  left:2%
  width:80%;
}
}
 
/* Slideshow container */
@keyframes animate {
.slideshow-container {
   0%{
  max-width: 1000px;
     top:5px;
  position: relative;
     left:5px;
  margin: auto;
     opacity: 0;
   }
   25%{
     top: 0;
     left: 0;
     opacity: 1;
   }
   100%{
     top:-5px;
     left:-5px;
     opacity: 0;
   }
}
}
.footer{
   width:80%;
   height:200px;
   border-top: 3px solid #3D3B3B  ;
   margin:auto;
   margin-top: 3%;
   margin-left: 12%;
}


.footer ul{
/* Next & previous buttons */
   margin:4%  39%;
.prev, .next {
   text-align:right;
  cursor: pointer;
   display:flex;
  position: absolute;
   position:absolute;
  top: 50%;
   transform: translate(-50%, -50%);
  width: auto;
   color: white;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}
}
.footer ul li{
   list-style: none;
   margin-right: 10%;
}
.footer h4{


 
/* Position the "next button" to the right */
   text-align: center;
.next {
   background-color:none;
  right: 0;
   position: absolute;
  border-radius: 3px 0 0 3px;
   margin: 120px 0 0 36%;
   font-size: 12px;
}
}


.footer ul li a{
/* On hover, add a black background color with a little bit see-through */
   text-align: center;
.prev:hover, .next:hover {
   line-height: 70px;
  background-color: rgba(0,0,0,0.8);
   font-size:30px;
   margin:0 10px;
   display:block;
   position: relative;
   z-index: 1;
 
}
}


.footer ul li a .fa{
/* Caption text */
   position: relative;
.text {
   color: white;
  color: #f2f2f2;
   transition: 0.5s;
  font-size: 15px;
 
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}
}


.f1 a:hover .fa{
/* Number text (1/3 etc) */
   color: #3b5998;
.numbertext {
   transform: rotateY(360deg);
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
}


.f1 a:before{
/* The dots/bullets/indicators */
   content:'';
.dot {
   position: absolute;
  cursor: pointer;
   top:100%;
  height: 15px;
   left:0;
  width: 15px;
   background: #3b5998;
  margin: 0 2px;
   transition:0.5s;
  background-color: #bbb;
   z-index: 2;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
}


 
.active, .dot:hover {
.f1 a:before{
  background-color: #717171;
   content:'';
   position: absolute;
   top:100%;
   left:0;
   background: #3b5998;
   transition:0.5s;
   z-index: 2;
}
.t2 a:hover .fa{
   color: #55acee;
   transform: rotateY(360deg);
}
}


.t2 a:before{
/* Fading animation */
   content:'';
.fade {
   position: absolute;
  -webkit-animation-name: fade;
   top:100%;
  -webkit-animation-duration: 1.5s;
   left:0;
  animation-name: fade;
   background:  #55acee;
  animation-duration: 1.5s;
   transition:0.5s;
   z-index: 2;
}
.i3 a:hover .fa{
   color: #C32AA3;
   transform: rotateY(360deg);
}
}


.i3 a:before{
@-webkit-keyframes fade {
   content:'';
  from {opacity: .4} 
   position: absolute;
  to {opacity: 1}
   top:100%;
   left:0;
   background: #C32AA3;
   transition:0.5s;
   z-index: 2;
}
.g4 a:hover .fa{
   color: #dd4b39;
   transform: rotateY(360deg);
}
}


.g4 a:before{
@keyframes fade {
   content:'';
  from {opacity: .4}
   position: absolute;
  to {opacity: 1}
   top:100%;
   left:0;
   background: #dd4b39;
   transition:0.5s;
   z-index: 2;
}
}


.x5 a:hover .fa{
/* On smaller screens, decrease text size */
   color: #9ACD99;
@media only screen and (max-width: 300px) {
   transform: rotateY(360deg);
  .prev, .next,.text {font-size: 11px}
}
}
.x5 a:before{
   content:'';
   position: absolute;
   top:100%;
   left:0;
   background: lightgoldenrodyellow;
   transition:0.5s;
   z-index: 2;
}
    </style>
    </style>
</head>
</head>
<body>
<body>
  <div class="video-container">
    <header>
    <video class="myvideo" id="intro" autoplay loop muted>
 
    <source src="https://2020.igem.org/wiki/images/4/45/T--Athens--intro.mp4" type="video/mp4">
     <h1 class="big-title translate" data-speed="0.1" style="margin:0;
   </video>
       font-family: sans-serif;
   <div class="fade-in1"><h1 id="this">THIS</h1>
       font-size: 6em;
   <script type="text/javascript">
        font-weight: 200;
   
       color: transparent;
    $(document).on('scroll',function(){
       -webkit-text-stroke-width: 1px;
      $('h1').css("left",Math.max(20 - 0.02*scrollY)+"%");
       -webkit-text-stroke-color: rgb(255, 255, 255);">PROJECT DESCRIPTION</h1>
    })
   </script></div>
   <div class="fade-in2"><h2 id="is">ISN'T</h2>
  
   <script type="text/javascript">
    $(document).on('scroll',function(){
      $('h2').css("left",Math.max(35 + 0.02*scrollY)+"%");
    })
   </script></div>
   <div class="fade-in3"><h3 id="temporary">FINAL</h3>
    <script type="text/javascript">
     $(document).on('scroll',function(){
        $('h3').css("left",Math.max(35 - 0.02*scrollY)+"%");
     })
    </script></div>
   <h5 id="hint" style="position: absolute; margin-top: 120vh; left: 45%; color: #ffffff73;">CLICK THE COLOURED BOXES TO COMPLETE THE PUZZLES</h5>
  </div>
 


    
     <img src="https://2020.igem.org/wiki/images/0/0a/T--Athens--person.png" class="person translate" data-speed="-0.05" alt="">
     <img src="https://2020.igem.org/wiki/images/a/a3/T--Athens--mountain1.png" class="mountain1 translate" data-speed="-0.1" alt="">
     <img src="https://2020.igem.org/wiki/images/4/43/T--Athens--mountain2.png" class="mountain2 translate" data-speed="0.4" alt="">
     <img src="https://2020.igem.org/wiki/images/5/5d/T--Athens--mountain3.png" class="mountain3 translate" data-speed="0.3" alt="">
     <img src="https://2020.igem.org/wiki/images/4/47/T--Athens--sky.png" class="sky translate" data-speed="0.5" alt="">
<div class="shadow"></div>  
</header>
      <div class="main">
      <section class="buttons">
      
       <div class="container">
         <div class="content">
          <a href="#inspiration">
           <div class="box">
             <div class="inner">Inspiration</div>
           </div></a>
           <a href="#problem">
           <div class="box">
             <div class="inner">The Problem</div>
           </div></a>
           <a href="#background">
           <div class="box">
             <div class="inner">Theoretical Background</div>
           </div></a>
           <a href="#solution"> 
           <div class="box">
             <div class="inner">Our Solution</div>
           </div></a>
           <a href="#applications">
           <div class="box">
             <div class="inner">Applications</div>
           </div></a>
           <a href="#covid-19">
           <div class="box">
             <div class="inner">Covid-19</div></a>
           </div>
         </div>
       </div>
     </section>
     </div>
     <section style="width: 95%; position: relative; left: 5%; color:white;style="font-family:'Quicksand',sans-serif;"">
     <p style="font-family:'Quicksand',sans-serif;font-size:3vh; font-style:italic;">Morphae is a rendering of the ancient greek word “μορφαί”, which means “forms”, combined with the name of our main project inspiration, the butterfly Morpho menelaus. Morphae expresses how we imagine the reformation of colour: inspired by <b>nature</b>, based on <b>shape</b> and optimised to apply to different <b>aspects</b> of artificial colour.    
         </p></section>
     <section style="width: 95%; position: relative; left: 5%; color:white;style="font-family:'Quicksand',sans-serif;"">
         <h1 style="font-family:'Quicksand',sans-serif;" id="inspiration">Inspiration</h1>
         <p style="font-family:'Quicksand',sans-serif;font-size:2.5vh;">Inspiration for our project was drawn from an idea our wet lab coordinator had after watching a video that intrigued him [1]. He introduced us to a type of colour that we were not aware of: structural colour. The observation of the impressive colours on the wings of the Morpho butterfly was our starting point. Our excitement was immediately followed by questioning: “What if we explore natural mechanisms behind structural colour properties to address a real world problem inspired by nature’s wondrous solutions”. One of our wet lab members, who studies at the Agricultural University of Athens, kept reminding us that no matter how fascinating lab work is, nothing compares to the knowledge obtained from the natural world. Our Human Practices enthusiasts, mindful of ethical fashion and motivated by the consequences of dyeing and treatment of textiles, highlighted them as a significant reason in support of this project idea: the harmful properties of chemical dyes. Taking into consideration the presence of dyes in a wide range of industries and thus in different forms in our everyday life, we concluded that providing an alternative to chemical colour would be a multi-dimensional, ethical approach to an overlooked worldwide issue.
         </p>
     </section>


 
     <section style="width: 95%; position: relative; left: 5%;color:white;style="font-family:'Quicksand',sans-serif;"">
  <div style="position: fixed; top: 16px; left:0%; width:100%; height:80px; z-index:100">
          <h1 id="problem" style="font-family:'Quicksand',sans-serif;">The Problem: The dark side of colour</h1>
   <ul id="navbar" class="navbar_ul" style="margin:0px;list-style:none">
          <p style="font-family:'Quicksand',sans-serif;font-size:2.5vh;">Most colours seen today come in the form of either synthetic or natural dyes. In our project, we focus on tackling the consequences of synthetic dyes as they are not only the most widely used, but also the most harmful. Their dark side, presented below, is actually three-fold: 
    <li class="logos"><a class="logo" style="padding:0px" href="https://2020.igem.org/Team:Athens">
     <img src="https://2020.igem.org/wiki/images/9/97/T--Athens--transparent.png" width="170px">
          </a></li>
  
  
    <li class="project"><a href="#">Project</a>
      <div class="project_dropdown_content">
       
        <a href="/Team:Athens/Description">Description</a>  
   <a href="/Team:Athens/Implementation">Implementation</a>
   <a href="/Team:Athens/Contribution">Contribution</a>
   <a href="/Team:Athens/Engineering">Engineering Success</a>
      </div>
    </li>
  
  
    <li class="wet"><a href="#">Wet Lab</a>
      <div class="wet_dropdown_content">
       
              <a href="/Team:Athens/Design">Design</a>
  
              <a href="/Team:Athens/Biobricks">Biobricks</a>
              <a href="/Team:Athens/Safety">Safety</a>
  
      </div>
  
    </li>
  
  
    <li class="dry"><a href="#">Dry Lab</a>
      <div class="dry_dropdown_content">
              <a href="/Team:Athens/Background">Background</a>
              <a href="/Team:Athens/Timeline">Timeline</a>
              <a href="/Team:Athens/Model">Model</a>
      </div>
    </li>
  
    <li class="human"><a href="#">Human Practices</a>
      <div class="human_dropdown_content">
        <a href="/Team:Athens/Human_Practices">Human Practices</a>
          <a href="/Team:Athens/Partnership">Partnership</a>
              <a href="/Team:Athens/Education">Science Communication</a>
        <a href="/Team:Athens/Collaborations">Collaborations</a>
  
  
      </div>
    </li>
  
  
  
    <li class="team"><a href="#">People</a>
      <div class="team_dropdown_content">
   <a href="/Team:Athens/Team">Team</a>
              <a href="/Team:Athens/Attributions">Attributions</a>
   
             </div>          </li>
  
    <li class="judging"><a href="#">Judging</a>
     <div class="judging_dropdown_content">
       <a href="https://igem.org/2020_Judging_Form?id=3520">Form</a>


       
         </p>
                 </div>  
<div class="card-container">
   </li>
<div class="card" style="float:left;position:relative;">
  
  <div class="card-inner">
    <li class="achievements"><a href="#">Achievements</a>
   <div class="card-front">
     <div class="achievements_dropdown_content">
    <h1 style="font-family:'Quicksand',sans-serif;font-size:1.5vw;">Toxicity of Chemical Compounds</h1>
       <a href="/Team:Athens/Achievements">Medal Criteria</a>
   </div>
       
    <div class="card-back">
                 </div> 
    <p style="font-family:'Quicksand',sans-serif;font-size:1vw;">The main compounds involved in the production of synthetic colour dyes, such as heavy metals (aluminium, cadmium oxides, chromium, lead), iron oxides, aromatic amines as well as pigment dust, are indicated to have harmful effects to humans and other organisms. Irritation of the skin, mucosa, digestive and respiratory systems, neurotoxicity, kidney diseases and carcinogenicity are the most typical health problems caused by synthetic dyes [2-3].</p>
   </li>
    <li class="future"><a href="#">Future</a>
     <div class="future_dropdown_content">
       <a href="/Team:Athens/Future">Goals</a>
       
                 </div>  
    </li>
   </ul>
  
    </div>
    </div>
   <script>
  </div>
         function myScroll() {
</div>
         var scrolled = document.documentElement.scrollTop; // Firefox & IE
<div class="card" style="float:left;position:left;">
         var SCROLLED = document.body.scrollTop // Chrome, Safari & Opera
  <div class="card-inner">
         var project = document.querySelector('.project');
   <div class="card-front">
         var project_dropdown = document.querySelector('.project_dropdown_content');
         var dry = document.querySelector('.dry');
var dry_dropdown = document.querySelector('.dry_dropdown_content');
var wet = document.querySelector('.wet');
var wet_dropdown = document.querySelector('.wet_dropdown_content');
         var human = document.querySelector('.human');
var human_dropdown = document.querySelector('.human_dropdown_content');
         var team = document.querySelector('.team');
var team_dropdown = document.querySelector('.team_dropdown_content');
         var judging = document.querySelector('.judging');
var judging_dropdown = document.querySelector('.judging_dropdown_content');
         var achievements = document.querySelector('.achievements');
var achievements_dropdown = document.querySelector('.achievements_dropdown_content');
         var future = document.querySelector('.future');
var future_dropdown = document.querySelector('.future_dropdown_content');
         var opac = (1.4-800/scrolled);
         var OPAC = (1.4-800/SCROLLED);
         project.style.backgroundColor = "rgba(0,0,0,"+opac+")";
         project.style.backgroundColor = "rgba(0,0,0,"+OPAC+")";
         dry.style.backgroundColor = "rgba(0,0,0,"+opac+")";
         dry.style.backgroundColor = "rgba(0,0,0,"+OPAC+")";
         wet.style.backgroundColor = "rgba(0,0,0,"+opac+")";
         wet.style.backgroundColor = "rgba(0,0,0,"+OPAC+")";
         human.style.backgroundColor = "rgba(0,0,0,"+opac+")";
         human.style.backgroundColor = "rgba(0,0,0,"+OPAC+")";
         team.style.backgroundColor = "rgba(0,0,0,"+opac+")";
         team.style.backgroundColor = "rgba(0,0,0,"+OPAC+")";
         judging.style.backgroundColor = "rgba(0,0,0,"+opac+")";
         judging.style.backgroundColor = "rgba(0,0,0,"+OPAC+")";
         achievements.style.backgroundColor = "rgba(0,0,0,"+opac+")";
         achievements.style.backgroundColor = "rgba(0,0,0,"+OPAC+")";
         future.style.backgroundColor = "rgba(0,0,0,"+opac+")";
         future.style.backgroundColor = "rgba(0,0,0,"+OPAC+")";
future_dropdown.style.backgroundColor = "rgba(0,0,0,"+opac+")";
         future_dropdown.style.backgroundColor = "rgba(0,0,0,"+OPAC+")";
         achievements_dropdown.style.backgroundColor = "rgba(0,0,0,"+opac+")";
         achievements_dropdown.style.backgroundColor = "rgba(0,0,0,"+OPAC+")";
judging_dropdown.style.backgroundColor = "rgba(0,0,0,"+opac+")";
         judging_dropdown.style.backgroundColor = "rgba(0,0,0,"+OPAC+")";        
team_dropdown.style.backgroundColor = "rgba(0,0,0,"+opac+")";
         team_dropdown.style.backgroundColor = "rgba(0,0,0,"+OPAC+")";
human_dropdown.style.backgroundColor = "rgba(0,0,0,"+opac+")";
         human_dropdown.style.backgroundColor = "rgba(0,0,0,"+OPAC+")";
dry_dropdown.style.backgroundColor = "rgba(0,0,0,"+opac+")";
         dry_dropdown.style.backgroundColor = "rgba(0,0,0,"+OPAC+")";
wet_dropdown.style.backgroundColor = "rgba(0,0,0,"+opac+")";
         wet_dropdown.style.backgroundColor = "rgba(0,0,0,"+OPAC+")";
project_dropdown.style.backgroundColor = "rgba(0,0,0,"+opac+")";
         project_dropdown.style.backgroundColor = "rgba(0,0,0,"+OPAC+")";
}
       document.addEventListener("scroll", myScroll);


       </script>
    <h1 style="font-family:'Quicksand',sans-serif;position:relative;margin-left:15%;text-align:center;font-size:1.5vw;">Environmentally Harmful Production</h1>
 
    </div>
    
    <div class="card-back">
 
     <p style="font-family:'Quicksand',sans-serif;font-size:1vw;margin-top:-3%;">The textile industry is considered one of the largest colour-related polluters globally. The dyeing and treatment of textiles demands high consumption of fuel and water, accounting for 20% of industrial water pollution [5]. The resulting wastewater, from the production process of textiles, contains residues, such as non-biodegradable organic compounds, which irreversibly affect aquatic life[4]. </p>
    <div class="img-container">
   </div>
   
  </div>
     <img class="myimage1" src ="https://2020.igem.org/wiki/images/8/8e/T--Athens--incomplete1.png" />
</div>
    <img class="myimage2" src ="https://2020.igem.org/wiki/images/8/82/T--Athens--incomplete2.png" />
<div class="card" style="float:left;position:relative;">
    <img class="myimage3" src ="https://2020.igem.org/wiki/images/f/f3/T--Athens--incomplete3.png" />
  <div class="card-inner">
    <img class="myimage4" src ="https://2020.igem.org/wiki/images/1/1c/T--Athens--incomplete4.png"/>
   <div class="card-front">
    <img class="myimage5" src ="https://2020.igem.org/wiki/images/0/0a/T--Athens--thebestlogo-purple.png"/>
    <h1 style="font-family:'Quicksand',sans-serif;font-size:1.5vw;">Intensive Labour</h1>
    <video class="myvideo5" autoplay loop muted>
     <source src="https://2020.igem.org/wiki/images/b/ba/T--Athens--logo2.mp4" type="video/mp4">
    </video>
    </div>
    </div>
    <div id="button1"><button class="toggle" style="position: relative; left: -20%;" onclick="unfade1()"> </button></div>
    <div class="card-back">
  <div id="button2"><button class="toggle" style="position: relative; left: -20%;" onclick="unfade2()"> </button></div>
    <p style="font-family:'Quicksand',sans-serif;font-size:1vw;">The production of paints is often performed under poor working conditions. High exposure to chemicals, time-consuming and complex dyeing processes, frequent working accidents, noise, thermal exposure, insufficient ventilation combined with inadequate personal protective equipment are only a few of the issues faced by workers daily [2].</p>
  <div id="button3"><button class="toggle" style="position: relative; left: -20%;" onclick="unfade3()"> </button></div>
  <div id="button4"><button class="toggle" style="position: relative; left: -20%;" onclick="unfade4()"> </button></div>
  <div id="button5"><button class="toggle" style="position: relative; left: -20%;" onclick="unfade5()"> </button></div>
  <div id="button6"><button class="toggle" style="position: relative; left: -20%;" onclick="unfade6()"> </button></div>
  <script>
   function unfade1() {
   var op = 0.1;  // initial opacity
   var x = document.querySelector(".myimage1");
   x.style.display = 'block';
   var timer = setInterval(function () {
     if (op >= 1){
       clearInterval(timer);
     }
     x.style.opacity = op;
     x.style.filter = 'alpha(opacity=' + op * 100 + ")";
     op += op * 0.1;
   }, 10);
}
   </script>
   <script>
      function unfade2() {
   var op = 0.1;  // initial opacity
   var x = document.querySelector(".myimage2");
   x.style.display = 'block';
   var timer = setInterval(function () {
     if (op >= 1){
       clearInterval(timer);
     }
     x.style.opacity = op;
     x.style.filter = 'alpha(opacity=' + op * 100 + ")";
     op += op * 0.1;
   }, 10);
}
    </script>
    <script>
       function unfade3() {
   var op = 0.1;  // initial opacity
   var x = document.querySelector(".myimage3");
   x.style.display = 'block';
   var timer = setInterval(function () {
     if (op >= 1){
       clearInterval(timer);
     }
     x.style.opacity = op;
     x.style.filter = 'alpha(opacity=' + op * 100 + ")";
     op += op * 0.1;
   }, 10);
}
     </script>
     <script>
        function unfade4() {
   var op = 0.1;  // initial opacity
   var x = document.querySelector(".myimage4");
   x.style.display = 'block';
   var timer = setInterval(function () {
     if (op >= 1){
       clearInterval(timer);
     }
     x.style.opacity = op;
     x.style.filter = 'alpha(opacity=' + op * 100 + ")";
     op += op * 0.1;
   }, 10);
}
      </script>
      <script>
         function unfade5() {
   var op = 0.1;  // initial opacity
   var x = document.querySelector(".myimage5");
   x.style.display = 'block';
   var timer = setInterval(function () {
     if (op >= 1){
       clearInterval(timer);
     }
     x.style.opacity = op;
     x.style.filter = 'alpha(opacity=' + op * 100 + ")";
     op += op * 0.1;
   }, 10);
}
       </script>
       <script>
          function unfade6() {
   var op = 0.1;  // initial opacity
   var x = document.querySelector(".myvideo5");
   x.style.display = 'block';
   var timer = setInterval(function () {
     if (op >= 1){
       clearInterval(timer);
     }
     x.style.opacity = op;
     x.style.filter = 'alpha(opacity=' + op * 100 + ")";
     op += op * 0.1;
   }, 10);
}
        </script>
    <!--PARALLAX FOR IMAGES AND TEXT-->
   
     <div class="video-container-parallax">
      <section class="test">
      <video class="video-parallax-left" id="mwv1" autoplay loop muted>
       <source src="https://2020.igem.org/wiki/images/9/9c/T--Athens--mwv1.mp4" type="video/mp4">
      </video>
      <video class="video-parallax-right" id="mwv2" autoplay loop muted>
       <source src="https://2020.igem.org/wiki/images/a/ac/T--Athens--mwv2.mp4" type="video/mp4">
      </video>
      <div class="parallax p2" id="sentence1" data-parallax="0.75">HAVE YOU EVER THOUGHT OF</div>
      <div class="parallax p3" id="sentence2" data-parallax="1.7">THE DARK SIDE OF</div>
    </section>
    </div>
    <div class="video-container-parallax" style="position:relative; margin-top:-50vh;">
     <section class="test">
     <video class="video-parallax-left" id="mwv3" autoplay loop muted>
      <source src="https://2020.igem.org/wiki/images/a/af/T--Athens--mwv3.mp4" type="video/mp4">
     </video>
     <video class="video-parallax-right" id="mwv4" autoplay loop muted>
      <source src="https://2020.igem.org/wiki/images/4/4f/T--Athens--mwv4.mp4" type="video/mp4">
     </video>
     <div class="parallax p2" id="sentence3" data-parallax="0.75">IT'S A SIDE OF HUMAN</div>
     <div class="parallax p1" style="left:10%;" id="sentence4" data-parallax="1.7">AND ENVIRONMENTAL</div>
   </section>
    </div>
    </div>
   </div>
   </div>
  <div class="video-container-parallax" style="position: relative; margin-top:-50vh;">
   <section class="test">
   <video class="video-parallax-left" id="mwv5" autoplay loop muted>
    <source src="https://2020.igem.org/wiki/images/2/2f/T--Athens--mwv5.mp4" type="video/mp4">
   </video>
   <video class="video-parallax-right" id="mwv6" autoplay loop muted>
    <source src="https://2020.igem.org/wiki/images/9/99/T--Athens--mwv6.mp4" type="video/mp4">
   </video>
   <div class="parallax p2" id="sentence5" data-parallax="0.75">WHERE THE THINGS WE DON'T SEE</div>
   <div class="parallax p1" id="sentence6" data-parallax="1.7">ARE THE ONES THAT</div>
</section>
</div>
</div>
<div class="video-container-parallax" style="position: relative; margin-top:-50vh;">
  <section class="test">
  <video class="video-parallax-left" id="mwv7" autoplay loop muted>
   <source src="https://2020.igem.org/wiki/images/4/46/T--Athens--mwv8.mp4" type="video/mp4">
  </video>
  <video class="video-parallax-right" id="mwv8" autoplay loop muted>
   <source src="https://2020.igem.org/wiki/images/1/1e/T--Athens--pnas2.mp4" type="video/mp4">
  </video>
  <div class="parallax p1" style="left: 12%;" id="sentence7" data-parallax="0.75">WHERE TOXICITY AND POLLUTION </div>
  <div class="parallax p2" style="left: 8%;" id="sentence8" data-parallax="1.9">ARE OVERSHADOWED BY LIGHT</div>
</section>
</div>
</div>
<div class="video-container-parallax" style="position: relative; margin-top:-50vh;">
 
  <section class="test">
     </section>
  <video class="video-parallax-left" id="mwv9" autoplay loop muted>
     <section style="width: 95%; position: relative; left: 5%;color:white;style="font-family:'Quicksand',sans-serif;"">
   <source src="https://2020.igem.org/wiki/images/9/99/T--Athens--mwv10.mp4" type="video/mp4">
        
  </video>
         <p style="font-family:'Quicksand',sans-serif;font-size:2.5vh;">On the other hand,  natural dyes come from natural sources and are environmentally friendly. However, their production is non-standardised, time-consuming, and expensive. Moreover, they are harder to stabilise into a working, commercial product, because they are based on non-homogeneous raw materials.
  <video class="video-parallax-right" id="mwv10" autoplay loop muted>
         </p>
   <source src="https://2020.igem.org/wiki/images/6/6b/T--Athens--domiko2.mp4" type="video/mp4">
     </section>
  </video>
     <section style="width: 95%; position: relative; left: 5%;color:white;style="font-family:'Quicksand',sans-serif;"">
  <div class="parallax p1" style="left: 10%;" id="sentence9" data-parallax="0.75">BUT THE COLOUR WE NEED </div>
         <h1 style="font-family:'Quicksand',sans-serif;" id="background">Theoretical Background</h1>
   <div class="parallax p1"  data-parallax="1.5" id="sentence10">GOES BEYOND THE COLOUR WE</div>
         <p style="font-family:'Quicksand',sans-serif;font-size:2.5vh;">In order to understand the nature of colour, we first have to delineate how light interacts with objects. There are two main mechanisms governing the production and perception of light. The first one involves the exchange of energy between light and electrons of a substance, that emits certain wavelengths back to the observer. These wavelengths are characteristic to each substance, which include the conventional dyes, pigments, and metals we are familiar with. The second mechanism of colour production is based only on the optical interactions (e.g. reflection, diffraction) of light with spatial arrangements that exhibit periodicities in the micro and sub-micro scale. This is due to the visible wavelength range (or spectrum), which is also located in the micron scale (approximately from 400 to 750 nm), hence the  interesting results defined as “structural colour” [6].
</section>
         </p>
     </section>
 
     <section style="width: 95%; position: relative; left: 5%;color:white;style="font-family:'Quicksand',sans-serif;"">
         <h1 style="font-family:'Quicksand',sans-serif;" id="solution">Our Solution</h1>
         <p style="font-family:'Quicksand',sans-serif; font-size:2.5vh;" >After brainstorming ways that we could provide a solution to this prevalent problem, we settled on the production of bio-inspired materials that exhibit structural colour. Guided by the formation of structural colour, we envisioned the design of a biological system, in which cells have a well-defined arrangement in the micron scale and therefore are able to reflect certain wavelengths of light. Further literature search pointed us to the direction of bacterial biofilms, as they are able to maintain such spatial arrangements [7].<br><br>
In our project, we genetically manipulate bacteria from the <i>Flavobacterium</i> genus, that form structurally coloured biofilms, in order to produce cellulose and release it extracellularly. If the spatial structure of the biofilm is retained by the cellulose produced, cellulose will also appear coloured. Therefore, by isolating the extracellular matrix from the bacteria, we will obtain an acellular coloured biomaterial. After proper processing, the material can be used as a colourful coating for a variety of products and surfaces (Figure 1).
 
         </p>
    
     <div class="slideshow-container">
 
<div class="mySlides fade">
  <div class="numbertext">1 / 5</div>
  <img src="https://2020.igem.org/wiki/images/a/a9/T--Athens--figure1_1.png" style="width:80%;position:relative;left:17%;">
   <div class="text">Step 1</div>
</div>
</div>
<div class="video-container-parallax" style="position: relative; margin-top:-50vh;">
 
   <section class="test">
<div class="mySlides fade">
  <video class="video-parallax-left" id="mwv11" autoplay loop muted>
   <div class="numbertext">2 / 5</div>
   <source src="https://2020.igem.org/wiki/images/9/91/T--Athens--mwv11.mp4" type="video/mp4">
   <img src="https://2020.igem.org/wiki/images/2/2a/T--Athens--figure1_2.png" style="width:80%;position:relative;left:17%;">
  </video>
   <div class="text">Step 2</div>
   <video class="video-parallax-right" id="mwv12" autoplay loop muted>
   <source src="https://2020.igem.org/wiki/images/4/4c/T--Athens--domiko1.mp4" type="video/mp4">
  </video>
   <div class="parallax p2" id="sentence11" data-parallax="0.75">AND ITS FUTURE</div>
  <div class="parallax p3" id="sentence12" data-parallax="1.7">HAS TO BE</div>
</section>
</div>
</div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<div class="mySlides fade">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
  <div class="numbertext">3 / 5</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>
  <img src="https://2020.igem.org/wiki/images/1/16/T--Athens--figure1_3.png" style="width:80%;position:relative;left:17%;">
  <div class="text">Step 3</div>
</div>
 
<div class="mySlides fade">
  <div class="numbertext">4 / 5</div>
  <img src="https://2020.igem.org/wiki/images/c/ce/T--Athens--figure1_4.png" style="width:80%;position:relative;left:17%;">
  <div class="text">Step 4</div>
</div>
 
<div class="mySlides fade">
  <div class="numbertext">5 / 5</div>
  <img src="https://2020.igem.org/wiki/images/c/c1/T--Athens--figure1_5.png" style="width:80%;position:relative;left:17%;">
  <div class="text">Step 5</div>
</div>
 
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>
 
</div>
<br>
 
<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span>
  <span class="dot" onclick="currentSlide(2)"></span>
  <span class="dot" onclick="currentSlide(3)"></span>
  <span class="dot" onclick="currentSlide(4)"></span>
  <span class="dot" onclick="currentSlide(5)"></span> 
</div>
 
<script>
<script>
  function parallax() {
var slideIndex = 1;
   var parallaxController = new ScrollMagic.Controller({globalSceneOptions: {triggerHook: "onEnter", duration: "200%"}});
showSlides(slideIndex);
 
function plusSlides(n) {
   showSlides(slideIndex += n);
}


  $('.parallax').each(function() {
function currentSlide(n) {
   var trig = this.parentNode,
  showSlides(slideIndex = n);
     parallax = this.getAttribute('data-parallax'),
}
     speed = parallax * 110 + '%';


   new ScrollMagic.Scene({triggerElement: trig})
function showSlides(n) {
     .setTween(this, {y: speed, ease: Linear.easeNone})
  var i;
     .addTo(parallaxController);
  var slides = document.getElementsByClassName("mySlides");
   })
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}  
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none"; 
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
   }
  slides[slideIndex-1].style.display = "block"; 
  dots[slideIndex-1].className += " active";
}
}
parallax();
</script>
</script>
<div class="slidein2 slide" id="slidein2">
<p style="font-family:'Quicksand',sans-serif;font-size:2.5vh;"><center style="position:relative;left:0%">
  <div class="row">
<b>Figure 1.</b> Design steps or the production of the acellular structurally coloured biomaterial</center>
    <div id="opacity">
         </p> <br><br>
      <h4><div><button id="word1" class="text-button" style=" margin-left: 20vh; margin-top:250vh;" onclick="unfade1() ">COLOUR</button></div></h4>
        
      <script>
         <p style="font-family:'Quicksand',sans-serif;font-size:2.5vh;">This method will not only produce a more environmentally-friendly and non-toxic colouring material, compared to synthetic dyes, but also a more standardised and less expensive colouring technique, compared to natural dyes. <br><br>
       function unfade1() {
Making use of structural colour that is produced in the lab unlocks an uncharted territory for synthetic biology and provides an unexplored area for future research and innovation. It also offers the opportunity to rethink raw materials used in manufacturing and has an impact on the entire consumer culture associated with it.
       var op = 0.1; // initial opacity
 
       var x = document.querySelector(".myimage1");
 
       x.style.display = 'block';
         </p>
       var timer = setInterval(function () {
     </section>
         if (op >= 1){
<section  style="width: 95%; position: relative; left:5%;color:white;style="font-family:'Quicksand',sans-serif;"">
           clearInterval(timer);
         <h1 style="font-family:'Quicksand',sans-serif;" id="applications" >Applications</h1>
         }
   
         x.style.opacity = op;
    </section>
         x.style.filter = 'alpha(opacity=' + op * 100 + ")";
    
         op += op * 0.1;
   <script>
       }, 10);
     const translate = document.querySelectorAll(".translate");
     }
const big_title = document.querySelector(".big-title");
       </script>
const header = document.querySelector("header");
     </div>
const shadow = document.querySelector(".shadow");
const content = document.querySelector(".content");
const main = document.querySelector(".main");
const opacity = document.querySelectorAll(".opacity");
 
let header_height = header.offsetHeight;
let main_height = main.offsetHeight;
 
window.addEventListener('scroll', () => {
   let scroll = window.pageYOffset;
 
  
   translate.forEach(element => {
     let speed = element.dataset.speed;
     element.style.transform = `translateY(${scroll * speed}px)`;
   });
 
   opacity.forEach(element => {
     element.style.opacity = scroll / (mainY.top + main_height);
   })
 
   big_title.style.opacity = - scroll / (header_height / 2) + 1;
   shadow.style.height = `${scroll * 0.1 + 300}px`;
 
  
})
   </script>
<div class="flip-container">
<div class="flip-card" style="float:left;position:relative;">
  <div class="flip-card-inner">
   <div class="flip-card-front">
    <img src="https://2020.igem.org/wiki/images/9/91/T--Athens--paper.png" alt="Avatar" style="width:300px;height:300px;">
   </div>
   <div class="flip-card-back" style="background-color:#BD4598;">
    <h1 style="font-family:'Quicksand',sans-serif;font-size:2vw;line-height:60px;">New page</h1> 
     <p style="font-family:'Quicksand',sans-serif;font-size:1vw;">这里显示最新页面</p>
   </div>
   </div>
   </div>
</div>
</div>
<div class="slidein2 slide" id="slidein2">
<div class="flip-card" style="float:left;position:relative;">
   <div class="row">
   <div class="flip-card-inner">
    <div id="opacity2">
   <div class="flip-card-front">
      <h5><div><button class="text-button" id="word2" style="background-color: rgba(40, 139, 252, 0.788); margin-left: 20vh; margin-top:250vh;" onclick="unfade2()">HARM</button></div></h5>
    <img src="https://2020.igem.org/wiki/images/0/0e/T--Athens--buildings.png" alt="Avatar" style="width:300px;height:300px;">
      <script>
   </div>
       function unfade2() {
   <div class="flip-card-back" style="background-color:#0D7BFD;">
       var op = 0.1;  // initial opacity
    <h1 style="font-family:'Quicksand',sans-serif;font-size:2vw;line-height:60px;" >New people</h1>
       var x = document.querySelector(".myimage2");
    <p style="font-family:'Quicksand',sans-serif;font-size:1vw;"> 这里显示刚刚注册H萌娘的人</p>
       x.style.display = 'block';
   </div>
       var timer = setInterval(function () {
         if (op >= 1){
           clearInterval(timer);
         }
         x.style.opacity = op;
         x.style.filter = 'alpha(opacity=' + op * 100 + ")";
         op += op * 0.1;
       }, 10);
     }
       </script>
    </div>
   </div>
   </div>
</div>
</div>
<div class="slidein2 slide" id="slidein2">
<div class="flip-card" style="float:left;position:relative;">
   <div class="row">
   <div class="flip-card-inner">
    <div id="opacity3">
   <div class="flip-card-front">
      <h6><div><button id="word3" class="text-button" style="background-color: rgba(179, 51, 238, 0.808); margin-left: 20vh; margin-top:250vh;" onclick="unfade3()">MATTER MOST</button></div></h6>
    <img src="https://2020.igem.org/wiki/images/4/41/T--Athens--cosmetics.png" alt="Avatar" style="width:300px;height:300px;">
      <script>
   </div>
       function unfade3() {
   <div class="flip-card-back" style="background-color:#EC0074;">
       var op = 0.1;  // initial opacity
    <h1 style="font-family:'Quicksand',sans-serif;font-size:2vw;line-height:60px;">Cosmetics</h1> 
       var x = document.querySelector(".myimage3");
    <p style="font-family:'Quicksand',sans-serif;font-size:1vw;">Iridescent additive.</p>
       x.style.display = 'block';
   </div>
       var timer = setInterval(function () {
         if (op >= 1){
           clearInterval(timer);
         }
         x.style.opacity = op;
         x.style.filter = 'alpha(opacity=' + op * 100 + ")";
         op += op * 0.1;
       }, 10);
     }
       </script>
    </div>
   </div>
   </div>
</div>
</div>
<div class="slidein2 slide" id="slidein2">
<div class="flip-card" style="float:left;position:relative;">
  <div class="row">
<div class="flip-card-inner">
    <div id="opacity4">
   <div class="flip-card-front">
      <h6><div><button id="word4" class="text-button" style="background-color: rgba(30, 126, 11, 0.808); margin-top: +365vh; margin-left: 20vh;" onclick="unfade4()">SHADES</button></div></h6>
    <img src="https://2020.igem.org/wiki/images/0/04/T--Athens--car.png" alt="Avatar" style="width:300px;height:300px;">
      <script>
   </div>
       function unfade4() {
   <div class="flip-card-back" style="background-color:#9E0814;">
       var op = 0.1;  // initial opacity
    <h1 style="font-family:'Quicksand',sans-serif;font-size:2vw;line-height:60px;">Vehicle Industry</h1> 
       var x = document.querySelector(".myimage4");
    <p style="font-family:'Quicksand',sans-serif;font-size:1vw;">Iridescent alternative to customary colouring techniques.</p>
       x.style.display = 'block';
   </div>
       var timer = setInterval(function () {
         if (op >= 1){
           clearInterval(timer);
         }
         x.style.opacity = op;
         x.style.filter = 'alpha(opacity=' + op * 100 + ")";
         op += op * 0.1;
       }, 10);
     }
       </script>
    </div>
   </div>
   </div>
</div>
</div>
<div class="slidein2 slide" id="slidein2">
</div>
   <div class="row">
 
    <div id="opacity5">
<div class="flip-container" >
      <h6><div><button id="word5" class="text-button" style="background-color: rgba(49, 46, 216, 0.808); margin-top: +475vh; margin-left: 20vh;" onclick="unfade5()">KNOW</button></div></h6>
<div class="flip-card" style="float:left;position:relative;">
      <script>
   <div class="flip-card-inner">
       function unfade5() {
   <div class="flip-card-front">
       var op = 0.1;  // initial opacity
    <img src="https://2020.igem.org/wiki/images/2/2b/T--Athens--textile.png" alt="Avatar" style="width:300px;height:300px;">
       var x = document.querySelector(".myimage5");
   </div>
       x.style.display = 'block';
   <div class="flip-card-back" style="background-color:#3A908A;">
       var timer = setInterval(function () {
    <h1 style="font-family:'Quicksand',sans-serif;font-size:2vw;line-height:60px;">Textile Industry</h1> 
         if (op >= 1){
    <p style="font-family:'Quicksand',sans-serif;font-size:1vw;">Alternative to toxic dyes.</p>
           clearInterval(timer);
   </div>
         }
         x.style.opacity = op;
         x.style.filter = 'alpha(opacity=' + op * 100 + ")";
         op += op * 0.1;
       }, 10);
     }
       </script>
    </div>
   </div>
   </div>
</div>
</div>
<div class="slidein2 slide" id="slidein2">
 
   <div class="row">
 
    <div id="opacity6">
<div class="flip-card" style="float:left;position:relative;">
      <h6><div><button id="word6" class="text-button" style="background-color: rgba(30, 176, 243, 0.795); margin-top: +575vh; margin-left: 20vh;" onclick="unfade6()">RESHAPED</button></div></h6>
   <div class="flip-card-inner">
      <script>
   <div class="flip-card-front">
       function unfade6() {
    <img src="https://2020.igem.org/wiki/images/4/4d/T--Athens--bioart.png" alt="Avatar" style="width:300px;height:300px;">
       var op = 0.1;  // initial opacity
   </div>
       var x = document.querySelector(".myvideo5");
   <div class="flip-card-back" style="background-color:#FA4430;">
       x.style.display = 'block';
    <h1 style="font-family:'Quicksand',sans-serif;font-size:2vw;line-height:60px;">BioArt</h1> 
       var timer = setInterval(function () {
    <p style="font-family:'Quicksand',sans-serif;font-size:1vw;">Substitute for conventional paints.</p>
         if (op >= 1){
   </div>
           clearInterval(timer);
         }
         x.style.opacity = op;
         x.style.filter = 'alpha(opacity=' + op * 100 + ")";
         op += op * 0.1;
       }, 10);
     }
       </script>
    </div>
   </div>
   </div>
</div>
</div>


<div style="font-family: sans-serif;
<div class="flip-card" style="float:left;position:relative;">
font-size: 4vw;
   <div class="flip-card-inner">
font-weight: 200;
    <div class="flip-card-front" >
color: transparent;
    <img src="https://2020.igem.org/wiki/images/7/74/T--Athens--authentication.png" alt="Avatar" style="width:300px;height:300px;">
-webkit-text-stroke-width: 1px;
   </div>
-webkit-text-stroke-color: white;
   <div class="flip-card-back" style="background-color:#FB0B4B;">
position: relative;
    <h1 style="font-family:'Quicksand',sans-serif;font-size:2vw;line-height:60px;">Authentication</h1>
margin-top: 30vh;
    <p style="font-family:'Quicksand',sans-serif;font-size:1vw;">Authentication of banknotes and credit cards.</p>
left: 15%;
   </div>
width: 100%;
   </div>
align-self: center;
line-height:2vw;
"><h4>COLOUR IS GIVING WAY TO NEW</h4></div>
<div class="video-container" style="position:relative;>
   <div class="slidein2 slide" id="slidein2">
    <div class="row">
    <div><video id="logo-chroma" style="width: 40%; height: auto; position: alsolute; opacity: 0; margin-left: 36% ; margin-top: 0vh;" autoplay loop muted>
  <source src="https://2020.igem.org/wiki/images/d/dd/T--Athens--animation_but_with_actual_circle.mp4" type="video/mp4">
</video>
<img class="morphae" style="position:absolute; top: 50%;left: 50%;margin-left:-162px;margin-top:-250px;"src="https://2020.igem.org/wiki/images/e/e7/T--Athens--justtext.png" />
<button id="morphae-button" class="text-button" onclick="unfade10()" style="color:transparent;height: 200px;width: 200px;background-color: transparent; position: absolute; left: 50%; top: 50%; margin-left:-00px;margin-top:-100px;">  </button>
</div>
</div>
<div class="flip-card" style="float:left;position:relative;">
  <div class="flip-card-inner">
   <div class="flip-card-front" >
    <img src="https://2020.igem.org/wiki/images/3/3d/T--Athens--biosensor.png" alt="Avatar" style="width:300px;height:300px;">
   </div>
   <div class="flip-card-back" style="background-color:#377A97;">
    <h1 style="font-family:'Quicksand',sans-serif;font-size:2vw;line-height:60px;">Biosensors</h1> 
    <p style="font-family:'Quicksand',sans-serif;font-size:1vw;"> Colour-changing material in response to environmental stimuli.</p>
   </div>
  </div>
</div>
</div>
</div>
</div>


<h5 id="hint2" style="position: absolute; margin-top: -77vh;margin-left:65vw;color: #ffffff80;">CLICK ON MORPHÆ BELOW TO ACTIVATE IT AND</h5>
<section style="width: 95%; position: relative; left: 5%;color:white;top:40px;" id="covid-19">
<h4 id="hint3" style="position: absolute; margin-top: -75vh;margin-left:65vw;color: #ffffff;">SCROLL BACK UP</h4>
         <h1 style="font-family:'Quicksand',sans-serif;" >Covid-19</h1>
  <script>
         <p style="font-family:'Quicksand',sans-serif;font-size:2.5vh;">Joining an iGEM team sounded like one of the most wonderful experiences! The passion for Synthetic Biology with science-fiction vibes and projects applied to solve real-life problems seemed fascinating for each of our members. Nothing could possibly disappoint us or make us think twice about participating in the competition. However, a global pandemic happened and everyday life around the world has not been the same ever since. That’ s how this paragraph would end if iGEM spirit had been affected! Bazinga! iGEM found a way to adapt to the new conditions in a creative way!<br><br>
   function unfade10() {
However, inconveniences were indeed noticeable. Difficulties with fundraising, limited access to the lab, and delayed delivery of the <i>Flavobacteria</i> strains were the most significant ones. Under these circumstances, we decided to follow the two-year plan proposed by the iGEM Foundation, focusing on experimental design and modelling in 2020 and concluding the wet lab work in 2021. It was then when we decided to welcome new members to our team, doubling its size from six to twelve members. Not only did these changes lift up our spirit even further, but also made it possible for Morphæ to develop into what it is today. Reflecting back on this year, it is safe to say that it has been undoubtedly as surreal as Synthetic Biology would be without iGEM.
   var op = 0.1;
         </p>
   var x = document.querySelector("#logo-chroma");
     </section>
   var mwv1 = document.querySelector("#mwv1");
<button class="collapsible" style="font-family:'Quicksand',sans-serif;font-size:2.5vh;">REFERENCES</button>
   var mwv2 = document.querySelector("#mwv2");
<div class="collapse-content">
   var mwv3 = document.querySelector("#mwv3");
  <p style="font-family:'Quicksand',sans-serif;font-size:2vh;"><cite><a style="text-decoration:none;" href="https://www.youtube.com/watch?v=x4I9mmd-2Rc&ab_channel=Veritasium">[1] “How to make colour with holes” video</a></cite>
   var mwv4 = document.querySelector("#mwv4");
<br><cite><a style="text-decoration:none;" href="https://www.ailevecalisma.gov.tr/medias/5015/aysegulozturk.pdf">[2] Ayşegül Öztürk. Determination of Occupational Health and Safety Risks and Solution Proposals in Paint Manufacturing Plants and Evaluation of Chemical Exposure at a Workplace. Ministry of Labor and Social Security, Directorate General of Occupational Health and Safety. Thesis for Occupational Health and Safety Expertise. Ankara, 2016 </a></cite>
   var mwv5 = document.querySelector("#mwv5");
<br>[3] Λινού Αθηνά (2006). Ιατρική της εργασίας: Επιδημιολογία και πρόληψη. Αθήνα: Βήτα Ιατρικές Εκδόσεις. ISBN: 978-960-8071-91-9 (Occupational medicine: Epidemiology and prevention)
   var mwv6 = document.querySelector("#mwv6");
<br><cite><a style="text-decoration:none;" href="https://www.hilarispublisher.com/open-access/sustainability-and-biotechnology--natural-or-bio-dyes-resources-intextiles-2165-8064-1000239.pdf">[4] Carvalho C, Santos G (2016). Sustainability and Biotechnology – Natural or Bio Dyes Resources in Textiles. J Textile Sci Eng 6(1): 239. doi:10.4172/2165-8064.1000239 </a></cite>
   var mwv7 = document.querySelector("#mwv7");
<br><cite><a style="text-decoration:none;" href="http://documents1.worldbank.org/curated/en/614901468768707543/pdf/922610WP0P11950DEL0FOR0GREEN0GROWTH.pdf">[5] The Bangladesh Responsible Sourcing Initiative (2014). South Asia Environment and Water Resources Unit. The world bank</a></cite>
   var mwv8 = document.querySelector("#mwv8");
<br><cite><a style="text-decoration:none;" href="https://iopscience.iop.org/article/10.1088/0034-4885/71/7/076401/meta">[6]  Str.color part: Kinoshita S, Yoshioka S and Miyazaki J (2008). Physics of structural colors. Reports on Progress in Physics. 71(7). doi: 10.1088/0034-4885/71/7/076401</a></cite>
   var mwv9 = document.querySelector("#mwv9");
<br><cite><a style="text-decoration:none;" href="https://www.pnas.org/content/115/11/2652">[7] Villads Egede Johansen, Laura Catón, Raditijo Hamidjaja, Els Oosterink, Bodo D. Wilts, Torben Sølbeck Rasmussen, Michael Mario Sherlock, Colin J. Ingham and Silvia Vignolini (2018). Genetic manipulation of structural color in bacterial colonies. Proceedings of the National Academy of Sciences. 115(11): 2652-2657. doi: 10.1073/pnas.1716214115</a></cite></p>
   var mwv10 = document.querySelector("#mwv10");
   var mwv11 = document.querySelector("#mwv11");
   var mwv12 = document.querySelector("#mwv12");
   var hint = document.querySelector("#hint");
   var hint2 = document.querySelector("#hint2");
   var hint3 = document.querySelector("#hint3");
   var this_word = document.querySelector('#this');
   var is = document.querySelector('#is');
   var temporary = document.querySelector('#temporary');
   var word1 = document.querySelector('#word1');
   var word2 = document.querySelector('#word2');
   var word3 = document.querySelector('#word3');
   var word4 = document.querySelector('#word4');
   var word5 = document.querySelector('#word5');
   var word6 = document.querySelector('#word6');
   var morphae_button = document.querySelector('#morphae-button');
   var sent1 = document.querySelector('#sentence1');
   var sent2 = document.querySelector('#sentence2');
   var sent3 = document.querySelector('#sentence3');
   var sent4 = document.querySelector('#sentence4');
   var sent5 = document.querySelector('#sentence5');
   var sent6 = document.querySelector('#sentence6');
   var sent7 = document.querySelector('#sentence7');
   var sent8 = document.querySelector('#sentence8');
   var sent9 = document.querySelector('#sentence9');
   var sent10 = document.querySelector('#sentence10');
   var sent11 = document.querySelector('#sentence11');
   var sent12 = document.querySelector('#sentence12');
   var intro = document.querySelector('#intro');
   word1.disabled = true;
   word2.disabled = true;
   word3.disabled = true;
   word4.disabled = true;
   word5.disabled = true;
   word6.disabled = true;
   morphae_button.disabled = true;
   x.style.display = 'block';
   mwv1.style.display = 'block';
   mwv2.style.display = 'block';
   mwv3.style.display = 'block';
   mwv4.style.display = 'block';
   mwv5.style.display = 'block';
   mwv6.style.display = 'block';
   mwv7.style.display = 'block';
   mwv8.style.display = 'block';
   mwv9.style.display = 'block';
   mwv10.style.display = 'block';
   mwv11.style.display = 'block';
   mwv12.style.display = 'block';
   hint.style.opacity = '0';
   hint2.style.opacity = '0';
   hint3.style.opacity = '0';
   intro.style.webkitFilter = "grayscale(0)";
   intro.style.filter = "grayscale(0)";
   sent11.innerHTML = "HAVE YOU HEARD OF";
   sent12.innerHTML = "STRUCTURAL";
   word6.innerHTML = "COLOUR";
   sent9.innerHTML = "IT'S A COLOUR";
   sent10.innerHTML = "BASED COMPLETELY ON";
   word5.innerHTML = "STRUCTURE";
   sent7.innerHTML = "WE USE FLAVOBACTERIA THAT";
   sent8.innerHTML = "PRESENT STRUCTURAL COLOUR";
   word4.innerHTML = "NATURALLY";
   sent5.innerHTML = "AND ENGINEER THEM";
   sent6.innerHTML = "TO BE TURNED INTO A";
   word3.innerHTML = "BIOMATERIAL";
   sent3.innerHTML = "THAT CAN REPLACE CHEMICAL DYES";
   sent4.innerHTML = "AND IS IN ITS ENTIRETY";
   word2.innerHTML = "SUSTAINABLE";
   sent1.innerHTML = "LET'S RE-IMAGINE COLOUR";
   sent2.innerHTML = "IT'S DO OR DYE";
   word1.innerHTML = " ";
   word1.style.backgroundColor = "transparent";
   this_word.innerHTML = "COLOUR";
   this_word.style.left = "-5vw";
   is.innerHTML = "FOR";
   is.style.left = "10vw";
   temporary.innerHTML = "CHANGE";
   var timer = setInterval(function () {
     if (op >= 1){
       clearInterval(timer);
     }
     x.style.opacity = op;
     x.style.filter = 'alpha(opacity=' + op * 100 + ")";
     mwv1.style.opacity = op;
     mwv1.style.filter = 'alpha(opacity' + op*100 + ")";
     mwv2.style.opacity = op;
     mwv2.style.filter = 'alpha(opacity' + op*100 + ")";
     mwv3.style.opacity = op;
     mwv3.style.filter = 'alpha(opacity' + op*100 + ")";
     mwv4.style.opacity = op;
     mwv4.style.filter = 'alpha(opacity' + op*100 + ")";
     mwv5.style.opacity = op;
     mwv5.style.filter = 'alpha(opacity' + op*100 + ")";
     mwv6.style.opacity = op;
     mwv6.style.filter = 'alpha(opacity' + op*100 + ")";
     mwv7.style.opacity = op;
     mwv7.style.filter = 'alpha(opacity' + op*100 + ")";
     mwv8.style.opacity = op;
     mwv8.style.filter = 'alpha(opacity' + op*100 + ")";
     mwv9.style.opacity = op;
     mwv9.style.filter = 'alpha(opacity' + op*100 + ")";
     mwv10.style.opacity = op;
     mwv10.style.filter = 'alpha(opacity' + op*100 + ")";
     mwv11.style.opacity = op;
     mwv11.style.filter = 'alpha(opacity' + op*100 + ")";
     mwv12.style.opacity = op;
     mwv12.style.filter = 'alpha(opacity' + op*100 + ")";
     op += op * 0.1;
   }, 10);
}
   </script>
</div>
</div>
<script>
<script>
  var controller = new ScrollMagic.Controller();
var coll = document.getElementsByClassName("collapsible");
  // Fade in
var i;
var fadeInTimeline = new TimelineMax();
 
var fadeInFrom = TweenMax.from("#opacity", 1, {
for (i = 0; i < coll.length; i++) {
   autoAlpha: 0
  coll[i].addEventListener("click", function() {
});
   this.classList.toggle("collapse-active");
var fadeInTo = TweenMax.to("#opacity", 1, {
   var content = this.nextElementSibling;
   autoAlpha: 1
   if (content.style.maxHeight){
});
    content.style.maxHeight = null;
fadeInTimeline
   } else {
   .add(fadeInFrom)
    content.style.maxHeight = content.scrollHeight + "px";
   .add(fadeInTo);
   } 
  });
new ScrollMagic.Scene({
}
     triggerElement: "#slidein2",
     offset: -5300,
   })
   .setTween(fadeInTimeline)
   .duration(400)
   //.reverse(false)
   //.addIndicators() // add indicators (requires plugin)
   .addTo(controller);
   var fadeInTimeline2 = new TimelineMax();
   var fadeInFrom2 = TweenMax.from("#opacity2", 1, {
     autoAlpha: 0
   });
   var fadeInTo2 = TweenMax.to("#opacity2", 1, {
     autoAlpha: 1
   });
   fadeInTimeline2
     .add(fadeInFrom2)
     .add(fadeInTo2);
  
   new ScrollMagic.Scene({
       triggerElement: "#slidein2",
       offset: -4200,
     })
     .setTween(fadeInTimeline2)
     .duration(400)
     //.reverse(false)
     //.addIndicators() // add indicators (requires plugin)
     .addTo(controller);
     var fadeInTimeline3 = new TimelineMax();
     var fadeInFrom3 = TweenMax.from("#opacity3", 1, {
       autoAlpha: 0
     });
     var fadeInTo3 = TweenMax.to("#opacity3", 1, {
       autoAlpha: 1
     });
     fadeInTimeline3
       .add(fadeInFrom3)
       .add(fadeInTo3);
    
     new ScrollMagic.Scene({
         triggerElement: "#slidein2",
         offset: -3100,
       })
       .setTween(fadeInTimeline3)
       .duration(400)
       //.reverse(false)
       //.addIndicators() // add indicators (requires plugin)
       .addTo(controller);
       var fadeInTimeline4 = new TimelineMax();
       var fadeInFrom4 = TweenMax.from("#opacity4", 1, {
         autoAlpha: 0
       });
       var fadeInTo4 = TweenMax.to("#opacity4", 1, {
         autoAlpha: 1
       });
       fadeInTimeline4
         .add(fadeInFrom4)
         .add(fadeInTo4);
      
       new ScrollMagic.Scene({
           triggerElement: "#slidein2",
           offset: -2300,
         })
         .setTween(fadeInTimeline4)
         .duration(400)
         //.reverse(false)
         //.addIndicators() // add indicators (requires plugin)
         .addTo(controller);
         var fadeInTimeline5 = new TimelineMax();
         var fadeInFrom5 = TweenMax.from("#opacity5", 1, {
           autoAlpha: 0
         });
         var fadeInTo5 = TweenMax.to("#opacity5", 1, {
           autoAlpha: 1
         });
         fadeInTimeline5
           .add(fadeInFrom5)
           .add(fadeInTo5);
        
         new ScrollMagic.Scene({
             triggerElement: "#slidein2",
             offset: -1350,
           })
           .setTween(fadeInTimeline5)
           .duration(400)
           //.reverse(false)
           //.addIndicators() // add indicators (requires plugin)
           .addTo(controller);
           var fadeInTimeline6 = new TimelineMax();
           var fadeInFrom6 = TweenMax.from("#opacity6", 1, {
             autoAlpha: 0
           });
           var fadeInTo6 = TweenMax.to("#opacity6", 1, {
             autoAlpha: 1
           });
           fadeInTimeline6
             .add(fadeInFrom6)
             .add(fadeInTo6);
          
           new ScrollMagic.Scene({
               triggerElement: "#slidein2",
               offset: -250,
             })
             .setTween(fadeInTimeline6)
             .duration(400)
             //.reverse(false)
             //.addIndicators() // add indicators (requires plugin)
             .addTo(controller); 
             var fadeInTimeline7 = new TimelineMax();
             var fadeInFrom7 = TweenMax.from("#morphae", 1, {
               autoAlpha: 0
             });
             var fadeInTo7 = TweenMax.to("#morphae", 1, {
               autoAlpha: 1
             });
             fadeInTimeline7
               .add(fadeInFrom7)
               .add(fadeInTo7);
            
             new ScrollMagic.Scene({
                 triggerElement: "#slidein2",
                 offset: -300,
               })
               .setTween(fadeInTimeline7)
               .duration(400)
               //.reverse(false)
               //.addIndicators() // add indicators (requires plugin)
               .addTo(controller); 
</script>
</script>
<div class="scrolldown">
</body>
         <span></span>
</html>
         <span></span>
{{Athens/Footer}}
         <span></span>
<html>
<body>


       </div>
<p style="font-size: 0.9rem;font-style: italic;position:absolute;bottom:-2%;"><a href="https://www.flickr.com/photos/35734278@N05/3974986714">"Crystals like butterfly wings"</a><span> by <a href="https://www.flickr.com/photos/35734278@N05">Argonne National Laboratory</a></span> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/2.0/?ref=ccsearch&atype=html" style="margin-right: 5px;">CC BY-NC-SA 2.0</a><a href="https://creativecommons.org/licenses/by-nc-sa/2.0/?ref=ccsearch&atype=html" target="_blank" rel="noopener noreferrer" style="display: inline-block;white-space: none;margin-top: 2px;margin-left: 3px;height: 22px !important;"><img style="height: inherit;margin-right: 3px;display: inline-block;" src="https://search.creativecommons.org/static/img/cc_icon.svg?image_id=bd5c6562-2c02-459f-94f1-6893f612555f" /><img style="height: inherit;margin-right: 3px;display: inline-block;" src="https://search.creativecommons.org/static/img/cc-by_icon.svg" /><img style="height: inherit;margin-right: 3px;display: inline-block;" src="https://search.creativecommons.org/static/img/cc-nc_icon.svg" /><img style="height: inherit;margin-right: 3px;display: inline-block;" src="https://search.creativecommons.org/static/img/cc-sa_icon.svg" /></a></p>
<div class="footer" style="position:absolute;">
     <div class="socialicons">
         <ul>
           <li class="f1"><a href="https://www.facebook.com/iGEM.Athens/" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
           <li class="t2"><a href="https://twitter.com/igemathens?lang=en" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
           <li class="i3"><a href="https://www.instagram.com/igemathens/" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
           <li class="g4"><a href="mailto:igemathens2020@gmail.com" target="_blank"><i class="fa fa-envelope" aria-hidden="true"></i></a></li>
           <li class="x5"><a href="https://github.com/iGEM-Athens-2020/iGEM_Athens_2020" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a></li>
         </ul>
           <h4 style="color:white;font-family:'Quicksand',sans-serif;position:absolute;margin-left:45%;"><i class="fa fa-envelope" aria-hidden="true"></i> igemathens2020@gmail.com</h4>
         </div>
 
    
       </div>
     </div>
</body>
</body>
</html>
</html>
{{Athens/Loader}}
{{Athens/Loader}}

2021年4月23日 (五) 23:46的最新版本

Template:Athens/Navbar <html lang="en"> <head> 

   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="https://fonts.googleapis.com/css2?family=Quicksand" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css2?family=Heebo:wght@800&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
   <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
   <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>    
   <style>
       *{
   margin: 0;
   padding: 0;
   box-sizing: border-box;

}

html{ 

   scroll-behavior: smooth;
   scroll-padding-top:80px;

}

body{ 

   font-family: 'Quicksand', sans-serif;
   background-color: #000;
   color: #D5D5D5;
   line-height: 1.6;
   height: 100vh;
   overflow-x:hidden;

}

.mw-body { 

   background-color: black;

}

/*________________________________Parallax______________________________*/


header{ 

   width: 100%;
   height: 100vh;
   position: relative;
   overflow: hidden;

}

header:after{ 

   content: ;
   position: absolute;
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
   background-color: rgba(0, 0, 0, 0.05);
   z-index: 25;

}

.mountain1{ 

   position: absolute;
   bottom: -12%;
   width: 100%;
   right: 0;
   z-index: 19;

}

.person{ 

   position: absolute;
   width: 100%;
   bottom: -12%;
   left: -70px;
   z-index: 20;

}

.mountain2{ 

   position: absolute;
   width: 100%;
   bottom: -12%;
   left: 0;
   z-index: 18;

}

.mountain3{ 

   position: absolute;
   width: 100%;
   bottom: -19%;
   right: 0;
   z-index: 17;

}

.sky{ 

   position: absolute;
   width: 100%;
   bottom: -24%;
   right: 0;

}

.big-title{ 

   position: absolute;
   z-index: 30;
   line-height: 4rem;
   top: calc(50% - 2rem);
   width: 100%;
   text-align: center;
   font-size: 3rem;
   font-weight: 600;
   color: #fff;

}

.main{ 

   width: 100%;
   background-color: #000;
   position: relative;

}

.shadow{ 

   position: absolute;
   bottom:0;
   
   height: 300px;
   width:110vw;
   left: -1%;
   z-index: 20;
   background: linear-gradient(to top, #000, transparent);

}

.opacity{ 

   opacity: 0;

}

@media (max-width: 850px){ 

   section .par_container{
       grid-template-columns: 1fr;
   }

}

@media(max-width: 600px){ 

   .big-title{
       font-size: 3rem
   }

   .text{
       font-size: .8rem;
   }

   .title{
       font-size: 1.2rem;
   }

}


/*________________________________Buttons______________________________*/

.buttons{ background-color: black; color: white; font-size: 30px; min-height:85vh; width: 100%; float: left; padding:100px 10px; 

       position:static;
       margin-top:3%;

}

.container{ max-width: 1300px; margin: auto; align-items: center; 

       position:static;
       margin-left:10%;

}


.buttons .content{ float: left; width: 100%; }

.buttons .content .box{ width: 16.66%; float: left; padding:0px; 

       position:static;

}


.buttons .content .box .inner{ padding: 20px; text-align: center; position: static; }

.buttons .content .box .inner:hover{ background-color:blueviolet;


}

.buttons .content a{ 

      color: white;
      line-height:30px;

}

.buttons .content .box .inner a{ color:white; 

       line-height:30px;

}

.buttons .content .box .inner a::before{ position: absolute; left:0; bottom:0; width:0px; box-sizing: border-box; height: 0px; border-bottom:3px solid transparent; border-left: 3px solid transparent; transition: all .8s ease; } .buttons .content .box .inner a::after{ position: static; right:0; top:0; width:230px; box-sizing: border-box; height:75px; border-top:3px solid transparent; border-right: 3px solid transparent; transition: all .8s ease; } .buttons .content .box .inner hover::after, .buttons .content .box .inner hover::before{ border-color: purple; 

  	width: 100%;
  	height: 100%;

}

@keyframes slide{ 

   0%{
       background-position-x: 0%;

   }
   100%{
       background-position-x: 600vw;

   }

}

@media(max-width: 767px){ .buttons .content .box { 

   width:100%;

} } 

 hr {
   display: block;
   height: 1px;
   border: 0;
   border-top: 1px solid #d5d5d5;
   margin: 1em 0;
   padding: 0;

}



@keyframes slide{ 

   0%{
       background-position-x: 0%;

   }
   100%{
       background-position-x: 600vw;

   }

}


/*________________________________Main Text______________________________*/ section{ 

       font-family:'Quicksand',sans-serif;
   display: flex;
   flex-direction: column;
   justify-content: center;
   width: 100%;
   height: 100%;
   margin-bottom: 10vh;

}

section h1{ 

   color:white;
   font-size: 33px;
   text-align: left;
   margin-left: 100px;
   padding: 10px 0px;

} section h3{ 

   color:white;
   font-size: 27px;
   text-align: left;
   margin-left: 100px;
   padding: 10px 0px;

}

section p{ 

   font-size: 10rem;
   margin: 10px 100px;

} .flip-container{ max-width: 1200px; margin: auto; align-items: center; 

       position:static;

} .flip-container .flip-card { 

 background-color: transparent;
 width: 300px;
 height: 300px;
 perspective: 1000px;

}

.flip-container .flip-card-inner { 

 position: relative;
 width: 100%;
 height: 100%;
 text-align: center;
 transition: transform 0.6s;
 transform-style: preserve-3d;
 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);

}

.flip-container .flip-card:hover .flip-card-inner { 

 transform: rotateY(180deg);

}

.flip-container .flip-card-front, .flip-card-back { 

 position: absolute;
 width: 100%;
 height: 100%;
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;

}

.flip-container .flip-card-front { 

 background-color: #bbb;
 color: black;

}

.flip-container .flip-card-back { 

 background-color: #2980b9;
 color: white;
 transform: rotateY(180deg);

} .flip-container h1{ 

 font-family:'Quicksand',sans-serif;
 color:white;
 font-size:5vh;
 text-align:center;
 position:relative;
 top:30%;
 padding: 10px 10px;

} .flip-container p{ 

 font-family:'Quicksand',sans-serif;
 color:white;
 font-size:5vh;
 text-align:center;
 position:relative;
 margin-left:20px;
 margin-right:20px;
 top:30%;
 width:80%;

} .collapsible { 

 background-color: #CD01FF85;
 color: white;
 cursor: pointer;
 padding: 18px;
 width: 80%;
 border: none;
 text-align: left;
 outline: none;
 font-size: 15px;
 position:relative;
 margin-left:12%;

}

.collapse-active, .collapsible:hover { 

 background-color: #CD01FF;

}

.collapsible:after { 

 content: '\002B';
 color: white;
 font-weight: bold;
 float: right;
 margin-left: 5px;

}

.collapse-active:after { 

 content: "\2212";

}

.collapse-content { 

 padding: 0 18px;
 max-height: 0;
 width:80%;
 overflow: hidden;
 transition: max-height 0.2s ease-out;
 background-color: black;
 position:relative;
 margin-left:12%;

} .card-container{ max-width: 1200px; margin: auto; align-items: center; 

       position:static;

} .card-container .card { 

 background-color: transparent;
 width: 19vw;
 height: 35vw;
 perspective: 1000px;
 border: 10px solid blueviolet;

}

.card-container .card-inner { 

 position: relative;
 width: 100%;
 height: 100%;
 text-align: center;
 transition: transform 0.6s;
 transform-style: preserve-3d;
 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);

}

.card-container .card:hover .card-inner { 

 transform: rotateY(180deg);

} .card-container .card:hover h1 { 

 display:none;

}

.card-container .card-front { 

 position: absolute;
 width: 100%;
 height: 100%;
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;

}

.card-container .card-front { 

 background-color: transparent;
 color: white;

} .container .card-front, .card-back { 

 position: absolute;
 width: 100%;
 height: 100%;
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;

}

.card-container .card-front { 

 background-color: transparent;
 color: black;

}

.card-container .card-back { 

 background-color: transparent;
 color: white;
 transform: rotateY(180deg);

} .card-container h1{ 

 font-family:'Quicksand',sans-serif;
 color:white;
 font-size:2vw;
 text-align:center;
 position:relative;
 top:25%;
 left:-14%;
 padding: 30px 30px;
 line-height:30px;

} .card-container p{ 

 font-family:'Quicksand',sans-serif;
 color:white;
 font-size:5vw;
 text-align:center;
 position:relative;
 margin-left:20px;
 margin-right:20px;
 top:25%;
 left:2%
 width:80%;

} /* Slideshow container */ .slideshow-container { 

 max-width: 1000px;
 position: relative;
 margin: auto;

}

/* Next & previous buttons */ .prev, .next { 

 cursor: pointer;
 position: absolute;
 top: 50%;
 width: auto;
 padding: 16px;
 margin-top: -22px;
 color: white;
 font-weight: bold;
 font-size: 18px;
 transition: 0.6s ease;
 border-radius: 0 3px 3px 0;
 user-select: none;

}

/* Position the "next button" to the right */ .next { 

 right: 0;
 border-radius: 3px 0 0 3px;

}

/* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { 

 background-color: rgba(0,0,0,0.8);

}

/* Caption text */ .text { 

 color: #f2f2f2;
 font-size: 15px;
 padding: 8px 12px;
 position: absolute;
 bottom: 8px;
 width: 100%;
 text-align: center;

}

/* Number text (1/3 etc) */ .numbertext { 

 color: #f2f2f2;
 font-size: 12px;
 padding: 8px 12px;
 position: absolute;
 top: 0;

}

/* The dots/bullets/indicators */ .dot { 

 cursor: pointer;
 height: 15px;
 width: 15px;
 margin: 0 2px;
 background-color: #bbb;
 border-radius: 50%;
 display: inline-block;
 transition: background-color 0.6s ease;

}

.active, .dot:hover { 

 background-color: #717171;

}

/* Fading animation */ .fade { 

 -webkit-animation-name: fade;
 -webkit-animation-duration: 1.5s;
 animation-name: fade;
 animation-duration: 1.5s;

}

@-webkit-keyframes fade { 

 from {opacity: .4} 
 to {opacity: 1}

}

@keyframes fade { 

 from {opacity: .4} 
 to {opacity: 1}

}

/* On smaller screens, decrease text size */ @media only screen and (max-width: 300px) { 

 .prev, .next,.text {font-size: 11px}

} 

   </style>

</head> <body> 

   <header>

PROJECT DESCRIPTION

       <img src="https://2020.igem.org/wiki/images/0/0a/T--Athens--person.png" class="person translate" data-speed="-0.05" alt="">
       <img src="https://2020.igem.org/wiki/images/a/a3/T--Athens--mountain1.png" class="mountain1 translate" data-speed="-0.1" alt="">
       <img src="https://2020.igem.org/wiki/images/4/43/T--Athens--mountain2.png" class="mountain2 translate" data-speed="0.4" alt="">
       <img src="https://2020.igem.org/wiki/images/5/5d/T--Athens--mountain3.png" class="mountain3 translate" data-speed="0.3" alt="">
       <img src="https://2020.igem.org/wiki/images/4/47/T--Athens--sky.png" class="sky translate" data-speed="0.5" alt="">

</header> 

          <section class="buttons">
           

                  <a href="#inspiration">
Inspiration
</a> 
                   <a href="#problem">
The Problem
</a> 
                   <a href="#background">
Theoretical Background
</a> 
                   <a href="#solution">
Our Solution
</a> 
                   <a href="#applications">
Applications
</a> 
                   <a href="#covid-19">
Covid-19
</a> 
       </section>

       <section style="width: 95%; position: relative; left: 5%; color:white;style="font-family:'Quicksand',sans-serif;"">

Morphae is a rendering of the ancient greek word “μορφαί”, which means “forms”, combined with the name of our main project inspiration, the butterfly Morpho menelaus. Morphae expresses how we imagine the reformation of colour: inspired by nature, based on shape and optimised to apply to different aspects of artificial colour.

</section> 

       <section style="width: 95%; position: relative; left: 5%; color:white;style="font-family:'Quicksand',sans-serif;"">

Inspiration

Inspiration for our project was drawn from an idea our wet lab coordinator had after watching a video that intrigued him [1]. He introduced us to a type of colour that we were not aware of: structural colour. The observation of the impressive colours on the wings of the Morpho butterfly was our starting point. Our excitement was immediately followed by questioning: “What if we explore natural mechanisms behind structural colour properties to address a real world problem inspired by nature’s wondrous solutions”. One of our wet lab members, who studies at the Agricultural University of Athens, kept reminding us that no matter how fascinating lab work is, nothing compares to the knowledge obtained from the natural world. Our Human Practices enthusiasts, mindful of ethical fashion and motivated by the consequences of dyeing and treatment of textiles, highlighted them as a significant reason in support of this project idea: the harmful properties of chemical dyes. Taking into consideration the presence of dyes in a wide range of industries and thus in different forms in our everyday life, we concluded that providing an alternative to chemical colour would be a multi-dimensional, ethical approach to an overlooked worldwide issue. 

       </section>

       <section style="width: 95%; position: relative; left: 5%;color:white;style="font-family:'Quicksand',sans-serif;"">

The Problem: The dark side of colour

Most colours seen today come in the form of either synthetic or natural dyes. In our project, we focus on tackling the consequences of synthetic dyes as they are not only the most widely used, but also the most harmful. Their dark side, presented below, is actually three-fold:

Toxicity of Chemical Compounds

The main compounds involved in the production of synthetic colour dyes, such as heavy metals (aluminium, cadmium oxides, chromium, lead), iron oxides, aromatic amines as well as pigment dust, are indicated to have harmful effects to humans and other organisms. Irritation of the skin, mucosa, digestive and respiratory systems, neurotoxicity, kidney diseases and carcinogenicity are the most typical health problems caused by synthetic dyes [2-3].

Environmentally Harmful Production

The textile industry is considered one of the largest colour-related polluters globally. The dyeing and treatment of textiles demands high consumption of fuel and water, accounting for 20% of industrial water pollution [5]. The resulting wastewater, from the production process of textiles, contains residues, such as non-biodegradable organic compounds, which irreversibly affect aquatic life[4].

Intensive Labour

The production of paints is often performed under poor working conditions. High exposure to chemicals, time-consuming and complex dyeing processes, frequent working accidents, noise, thermal exposure, insufficient ventilation combined with inadequate personal protective equipment are only a few of the issues faced by workers daily [2].

       </section>
       <section style="width: 95%; position: relative; left: 5%;color:white;style="font-family:'Quicksand',sans-serif;"">

On the other hand, natural dyes come from natural sources and are environmentally friendly. However, their production is non-standardised, time-consuming, and expensive. Moreover, they are harder to stabilise into a working, commercial product, because they are based on non-homogeneous raw materials. 

       </section>
       <section  style="width: 95%; position: relative; left: 5%;color:white;style="font-family:'Quicksand',sans-serif;"">

Theoretical Background

In order to understand the nature of colour, we first have to delineate how light interacts with objects. There are two main mechanisms governing the production and perception of light. The first one involves the exchange of energy between light and electrons of a substance, that emits certain wavelengths back to the observer. These wavelengths are characteristic to each substance, which include the conventional dyes, pigments, and metals we are familiar with. The second mechanism of colour production is based only on the optical interactions (e.g. reflection, diffraction) of light with spatial arrangements that exhibit periodicities in the micro and sub-micro scale. This is due to the visible wavelength range (or spectrum), which is also located in the micron scale (approximately from 400 to 750 nm), hence the interesting results defined as “structural colour” [6]. 

       </section>

       <section style="width: 95%; position: relative; left: 5%;color:white;style="font-family:'Quicksand',sans-serif;"">

Our Solution

After brainstorming ways that we could provide a solution to this prevalent problem, we settled on the production of bio-inspired materials that exhibit structural colour. Guided by the formation of structural colour, we envisioned the design of a biological system, in which cells have a well-defined arrangement in the micron scale and therefore are able to reflect certain wavelengths of light. Further literature search pointed us to the direction of bacterial biofilms, as they are able to maintain such spatial arrangements [7].

In our project, we genetically manipulate bacteria from the Flavobacterium genus, that form structurally coloured biofilms, in order to produce cellulose and release it extracellularly. If the spatial structure of the biofilm is retained by the cellulose produced, cellulose will also appear coloured. Therefore, by isolating the extracellular matrix from the bacteria, we will obtain an acellular coloured biomaterial. After proper processing, the material can be used as a colourful coating for a variety of products and surfaces (Figure 1).

1 / 5
 <img src="https://2020.igem.org/wiki/images/a/a9/T--Athens--figure1_1.png" style="width:80%;position:relative;left:17%;">
Step 1
2 / 5
 <img src="https://2020.igem.org/wiki/images/2/2a/T--Athens--figure1_2.png" style="width:80%;position:relative;left:17%;">
Step 2
3 / 5
 <img src="https://2020.igem.org/wiki/images/1/16/T--Athens--figure1_3.png" style="width:80%;position:relative;left:17%;">
Step 3
4 / 5
 <img src="https://2020.igem.org/wiki/images/c/ce/T--Athens--figure1_4.png" style="width:80%;position:relative;left:17%;">
Step 4
5 / 5
 <img src="https://2020.igem.org/wiki/images/c/c1/T--Athens--figure1_5.png" style="width:80%;position:relative;left:17%;">
Step 5

<a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a>

<script> var slideIndex = 1; showSlides(slideIndex);

function plusSlides(n) { 

 showSlides(slideIndex += n);

}

function currentSlide(n) { 

 showSlides(slideIndex = n);

}

function showSlides(n) { 

 var i;
 var slides = document.getElementsByClassName("mySlides");
 var dots = document.getElementsByClassName("dot");
 if (n > slides.length) {slideIndex = 1}    
 if (n < 1) {slideIndex = slides.length}
 for (i = 0; i < slides.length; i++) {
     slides[i].style.display = "none";  
 }
 for (i = 0; i < dots.length; i++) {
     dots[i].className = dots[i].className.replace(" active", "");
 }
 slides[slideIndex-1].style.display = "block";  
 dots[slideIndex-1].className += " active";

} </script>

Figure 1. Design steps or the production of the acellular structurally coloured biomaterial



This method will not only produce a more environmentally-friendly and non-toxic colouring material, compared to synthetic dyes, but also a more standardised and less expensive colouring technique, compared to natural dyes.

Making use of structural colour that is produced in the lab unlocks an uncharted territory for synthetic biology and provides an unexplored area for future research and innovation. It also offers the opportunity to rethink raw materials used in manufacturing and has an impact on the entire consumer culture associated with it. 

       </section>
<section  style="width: 95%; position: relative; left:5%;color:white;style="font-family:'Quicksand',sans-serif;"">

Applications

     </section>  
       
   <script>
       const translate = document.querySelectorAll(".translate");

const big_title = document.querySelector(".big-title"); const header = document.querySelector("header"); const shadow = document.querySelector(".shadow"); const content = document.querySelector(".content"); const main = document.querySelector(".main"); const opacity = document.querySelectorAll(".opacity");

let header_height = header.offsetHeight; let main_height = main.offsetHeight;

window.addEventListener('scroll', () => { 

   let scroll = window.pageYOffset;



   translate.forEach(element => {
       let speed = element.dataset.speed;
       element.style.transform = `translateY(${scroll * speed}px)`;
   });

   opacity.forEach(element => {
       element.style.opacity = scroll / (mainY.top + main_height);
   })

   big_title.style.opacity = - scroll / (header_height / 2) + 1;
   shadow.style.height = `${scroll * 0.1 + 300}px`;


}) 

   </script>

     <img src="https://2020.igem.org/wiki/images/9/91/T--Athens--paper.png" alt="Avatar" style="width:300px;height:300px;">

New page

这里显示最新页面

     <img src="https://2020.igem.org/wiki/images/0/0e/T--Athens--buildings.png" alt="Avatar" style="width:300px;height:300px;">

New people

这里显示刚刚注册H萌娘的人

     <img src="https://2020.igem.org/wiki/images/4/41/T--Athens--cosmetics.png" alt="Avatar" style="width:300px;height:300px;">

Cosmetics

Iridescent additive.

     <img src="https://2020.igem.org/wiki/images/0/04/T--Athens--car.png" alt="Avatar" style="width:300px;height:300px;">

Vehicle Industry

Iridescent alternative to customary colouring techniques.

     <img src="https://2020.igem.org/wiki/images/2/2b/T--Athens--textile.png" alt="Avatar" style="width:300px;height:300px;">

Textile Industry

Alternative to toxic dyes.


     <img src="https://2020.igem.org/wiki/images/4/4d/T--Athens--bioart.png" alt="Avatar" style="width:300px;height:300px;">

BioArt

Substitute for conventional paints.

     <img src="https://2020.igem.org/wiki/images/7/74/T--Athens--authentication.png" alt="Avatar" style="width:300px;height:300px;">

Authentication

Authentication of banknotes and credit cards.

     <img src="https://2020.igem.org/wiki/images/3/3d/T--Athens--biosensor.png" alt="Avatar" style="width:300px;height:300px;">

Biosensors

Colour-changing material in response to environmental stimuli.

<section style="width: 95%; position: relative; left: 5%;color:white;top:40px;" id="covid-19">

Covid-19

Joining an iGEM team sounded like one of the most wonderful experiences! The passion for Synthetic Biology with science-fiction vibes and projects applied to solve real-life problems seemed fascinating for each of our members. Nothing could possibly disappoint us or make us think twice about participating in the competition. However, a global pandemic happened and everyday life around the world has not been the same ever since. That’ s how this paragraph would end if iGEM spirit had been affected! Bazinga! iGEM found a way to adapt to the new conditions in a creative way!

However, inconveniences were indeed noticeable. Difficulties with fundraising, limited access to the lab, and delayed delivery of the Flavobacteria strains were the most significant ones. Under these circumstances, we decided to follow the two-year plan proposed by the iGEM Foundation, focusing on experimental design and modelling in 2020 and concluding the wet lab work in 2021. It was then when we decided to welcome new members to our team, doubling its size from six to twelve members. Not only did these changes lift up our spirit even further, but also made it possible for Morphæ to develop into what it is today. Reflecting back on this year, it is safe to say that it has been undoubtedly as surreal as Synthetic Biology would be without iGEM. 

       </section>

<button class="collapsible" style="font-family:'Quicksand',sans-serif;font-size:2.5vh;">REFERENCES</button>

<a style="text-decoration:none;" href="https://www.youtube.com/watch?v=x4I9mmd-2Rc&ab_channel=Veritasium">[1] “How to make colour with holes” video</a>
<a style="text-decoration:none;" href="https://www.ailevecalisma.gov.tr/medias/5015/aysegulozturk.pdf">[2] Ayşegül Öztürk. Determination of Occupational Health and Safety Risks and Solution Proposals in Paint Manufacturing Plants and Evaluation of Chemical Exposure at a Workplace. Ministry of Labor and Social Security, Directorate General of Occupational Health and Safety. Thesis for Occupational Health and Safety Expertise. Ankara, 2016 </a>
[3] Λινού Αθηνά (2006). Ιατρική της εργασίας: Επιδημιολογία και πρόληψη. Αθήνα: Βήτα Ιατρικές Εκδόσεις. ISBN: 978-960-8071-91-9 (Occupational medicine: Epidemiology and prevention)
<a style="text-decoration:none;" href="https://www.hilarispublisher.com/open-access/sustainability-and-biotechnology--natural-or-bio-dyes-resources-intextiles-2165-8064-1000239.pdf">[4] Carvalho C, Santos G (2016). Sustainability and Biotechnology – Natural or Bio Dyes Resources in Textiles. J Textile Sci Eng 6(1): 239. doi:10.4172/2165-8064.1000239 </a>
<a style="text-decoration:none;" href="http://documents1.worldbank.org/curated/en/614901468768707543/pdf/922610WP0P11950DEL0FOR0GREEN0GROWTH.pdf">[5] The Bangladesh Responsible Sourcing Initiative (2014). South Asia Environment and Water Resources Unit. The world bank</a>
<a style="text-decoration:none;" href="https://iopscience.iop.org/article/10.1088/0034-4885/71/7/076401/meta">[6] Str.color part: Kinoshita S, Yoshioka S and Miyazaki J (2008). Physics of structural colors. Reports on Progress in Physics. 71(7). doi: 10.1088/0034-4885/71/7/076401</a>
<a style="text-decoration:none;" href="https://www.pnas.org/content/115/11/2652">[7] Villads Egede Johansen, Laura Catón, Raditijo Hamidjaja, Els Oosterink, Bodo D. Wilts, Torben Sølbeck Rasmussen, Michael Mario Sherlock, Colin J. Ingham and Silvia Vignolini (2018). Genetic manipulation of structural color in bacterial colonies. Proceedings of the National Academy of Sciences. 115(11): 2652-2657. doi: 10.1073/pnas.1716214115</a>

<script> var coll = document.getElementsByClassName("collapsible"); var i;

for (i = 0; i < coll.length; i++) { 

 coll[i].addEventListener("click", function() {
   this.classList.toggle("collapse-active");
   var content = this.nextElementSibling;
   if (content.style.maxHeight){
     content.style.maxHeight = null;
   } else {
     content.style.maxHeight = content.scrollHeight + "px";
   } 
 });

} </script> </body> </html> Template:Athens/Footer <html> <body>

<a href="https://www.flickr.com/photos/35734278@N05/3974986714">"Crystals like butterfly wings"</a> by <a href="https://www.flickr.com/photos/35734278@N05">Argonne National Laboratory</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/2.0/?ref=ccsearch&atype=html" style="margin-right: 5px;">CC BY-NC-SA 2.0</a><a href="https://creativecommons.org/licenses/by-nc-sa/2.0/?ref=ccsearch&atype=html" target="_blank" rel="noopener noreferrer" style="display: inline-block;white-space: none;margin-top: 2px;margin-left: 3px;height: 22px !important;"><img style="height: inherit;margin-right: 3px;display: inline-block;" src="https://search.creativecommons.org/static/img/cc_icon.svg?image_id=bd5c6562-2c02-459f-94f1-6893f612555f" /><img style="height: inherit;margin-right: 3px;display: inline-block;" src="https://search.creativecommons.org/static/img/cc-by_icon.svg" /><img style="height: inherit;margin-right: 3px;display: inline-block;" src="https://search.creativecommons.org/static/img/cc-nc_icon.svg" /><img style="height: inherit;margin-right: 3px;display: inline-block;" src="https://search.creativecommons.org/static/img/cc-sa_icon.svg" /></a>

</body> </html> Template:Athens/Loader

取自“https://hmoegirl.com/index.php?title=Widget:新样式&oldid=59196”