Widget:新样式
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">
<a href="#problem">
<a href="#background">
<a href="#solution">
<a href="#applications">
<a href="#covid-19">
</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).
<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>
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