imported>=海豚= |
|
| 第1行： |
第1行： |
| {{Athens/Navbar}}
| | [[ 分类: 漫畫截圖]][[ 分类: 作者:godletter]] |
| <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">
| |
| <!--<link rel="stylesheet" href="style.css">-->
| |
| <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>
| |
| | |
| <h1 class="big-title translate" data-speed="0.1" style="margin:0;
| |
| font-family: sans-serif;
| |
| font-size: 6em;
| |
| font-weight: 200;
| |
| color: transparent;
| |
| -webkit-text-stroke-width: 1px;
| |
| -webkit-text-stroke-color: rgb(255, 255, 255);">PROJECT DESCRIPTION</h1>
| |
| | |
| <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;"">
| |
| <h1 id="problem" style="font-family:'Quicksand',sans-serif;">The Problem: The dark side of colour</h1>
| |
| <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:
| |
| | |
| </p>
| |
| <div class="card-container">
| |
| <div class="card" style="float:left;position:relative;">
| |
| <div class="card-inner">
| |
| <div class="card-front">
| |
| <h1 style="font-family:'Quicksand',sans-serif;font-size:1.5vw;">Toxicity of Chemical Compounds</h1>
| |
| </div>
| |
| <div class="card-back">
| |
| <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>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| <div class="card" style="float:left;position:left;">
| |
| <div class="card-inner">
| |
| <div class="card-front">
| |
| | |
| <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>
| |
| </div>
| |
| </div>
| |
| <div class="card" style="float:left;position:relative;">
| |
| <div class="card-inner">
| |
| <div class="card-front">
| |
| <h1 style="font-family:'Quicksand',sans-serif;font-size:1.5vw;">Intensive Labour</h1>
| |
| </div>
| |
| <div class="card-back">
| |
| <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>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| | |
| </section>
| |
| <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: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.
| |
| </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="background">Theoretical Background</h1>
| |
| <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].
| |
| </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 class="mySlides fade">
| |
| <div class="numbertext">2 / 5</div>
| |
| <img src="https://2020.igem.org/wiki/images/2/2a/T--Athens--figure1_2.png" style="width:80%;position:relative;left:17%;">
| |
| <div class="text">Step 2</div>
| |
| </div>
| |
| | |
| <div class="mySlides fade">
| |
| <div class="numbertext">3 / 5</div>
| |
| <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)">❮</a>
| |
| <a class="next" onclick="plusSlides(1)">❯</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>
| |
| 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>
| |
| <p style="font-family:'Quicksand',sans-serif;font-size:2.5vh;"><center style="position:relative;left:0%">
| |
| <b>Figure 1.</b> Design steps or the production of the acellular structurally coloured biomaterial</center>
| |
| </p> <br><br>
| |
|
| |
| <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>
| |
| 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.
| |
| | |
| | |
| </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="applications" >Applications</h1>
| |
|
| |
| </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>
| |
| <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 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/0/0e/T--Athens--buildings.png" alt="Avatar" style="width:300px;height:300px;">
| |
| </div>
| |
| <div class="flip-card-back" style="background-color:#0D7BFD;">
| |
| <h1 style="font-family:'Quicksand',sans-serif;font-size:2vw;line-height:60px;" >New people</h1>
| |
| <p style="font-family:'Quicksand',sans-serif;font-size:1vw;"> 这里显示刚刚注册H萌娘的人</p>
| |
| </div>
| |
| </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/4/41/T--Athens--cosmetics.png" alt="Avatar" style="width:300px;height:300px;">
| |
| </div>
| |
| <div class="flip-card-back" style="background-color:#EC0074;">
| |
| <h1 style="font-family:'Quicksand',sans-serif;font-size:2vw;line-height:60px;">Cosmetics</h1>
| |
| <p style="font-family:'Quicksand',sans-serif;font-size:1vw;">Iridescent additive.</p>
| |
| </div>
| |
| </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/0/04/T--Athens--car.png" alt="Avatar" style="width:300px;height:300px;">
| |
| </div>
| |
| <div class="flip-card-back" style="background-color:#9E0814;">
| |
| <h1 style="font-family:'Quicksand',sans-serif;font-size:2vw;line-height:60px;">Vehicle Industry</h1>
| |
| <p style="font-family:'Quicksand',sans-serif;font-size:1vw;">Iridescent alternative to customary colouring techniques.</p>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| | |
| <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/2/2b/T--Athens--textile.png" alt="Avatar" style="width:300px;height:300px;">
| |
| </div>
| |
| <div class="flip-card-back" style="background-color:#3A908A;">
| |
| <h1 style="font-family:'Quicksand',sans-serif;font-size:2vw;line-height:60px;">Textile Industry</h1>
| |
| <p style="font-family:'Quicksand',sans-serif;font-size:1vw;">Alternative to toxic dyes.</p>
| |
| </div>
| |
| </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/4/4d/T--Athens--bioart.png" alt="Avatar" style="width:300px;height:300px;">
| |
| </div>
| |
| <div class="flip-card-back" style="background-color:#FA4430;">
| |
| <h1 style="font-family:'Quicksand',sans-serif;font-size:2vw;line-height:60px;">BioArt</h1>
| |
| <p style="font-family:'Quicksand',sans-serif;font-size:1vw;">Substitute for conventional paints.</p>
| |
| </div>
| |
| </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/7/74/T--Athens--authentication.png" alt="Avatar" style="width:300px;height:300px;">
| |
| </div>
| |
| <div class="flip-card-back" style="background-color:#FB0B4B;">
| |
| <h1 style="font-family:'Quicksand',sans-serif;font-size:2vw;line-height:60px;">Authentication</h1>
| |
| <p style="font-family:'Quicksand',sans-serif;font-size:1vw;">Authentication of banknotes and credit cards.</p>
| |
| </div>
| |
| </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>
| |
| | |
| <section style="width: 95%; position: relative; left: 5%;color:white;top:40px;" id="covid-19">
| |
| <h1 style="font-family:'Quicksand',sans-serif;" >Covid-19</h1>
| |
| <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>
| |
| 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.
| |
| </p>
| |
| </section>
| |
| <button class="collapsible" style="font-family:'Quicksand',sans-serif;font-size:2.5vh;">REFERENCES</button>
| |
| <div class="collapse-content">
| |
| <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>
| |
| <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>
| |
| <br>[3] Λινού Αθηνά (2006). Ιατρική της εργασίας: Επιδημιολογία και πρόληψη. Αθήνα: Βήτα Ιατρικές Εκδόσεις. ISBN: 978-960-8071-91-9 (Occupational medicine: Epidemiology and prevention)
| |
| <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>
| |
| <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>
| |
| <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>
| |
| <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>
| |
| </div>
| |
| <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>
| |
| {{Athens/Footer}}
| |
| <html>
| |
| <body>
| |
| | |
| <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>
| |
| </body>
| |
| </html>
| |
| {{Athens/Loader}}
| |
