Difference between revisions of "Team:Calgary/Imposter-Home"
| Line 24: | Line 24: | ||
<script src="https://2020.igem.org/Template:Calgary/DynamicSizeModelPage?action=raw&ctype=text/javascript"></script> | <script src="https://2020.igem.org/Template:Calgary/DynamicSizeModelPage?action=raw&ctype=text/javascript"></script> | ||
<style> | <style> | ||
| + | /* TEXT STYLING */ | ||
h1, | h1, | ||
h2, | h2, | ||
| Line 37: | Line 38: | ||
.sub-heading h1 { | .sub-heading h1 { | ||
color: #ff7700; | color: #ff7700; | ||
| − | font-weight: | + | font-weight: 500; |
} | } | ||
| Line 51: | Line 52: | ||
.intro-body p { | .intro-body p { | ||
color: #1e6273; | color: #1e6273; | ||
| − | font-size: | + | font-size: 22; |
font-weight: 400; | font-weight: 400; | ||
| + | text-align: left; | ||
} | } | ||
| Line 61: | Line 63: | ||
/* FOR THE FADE EFFECT ON THE HEADER TEXT */ | /* FOR THE FADE EFFECT ON THE HEADER TEXT */ | ||
| − | #fade | + | #fade h1 { |
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */ | -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */ | ||
-moz-animation: fadein 2s; /* Firefox < 16 */ | -moz-animation: fadein 2s; /* Firefox < 16 */ | ||
| Line 67: | Line 69: | ||
-o-animation: fadein 2s; /* Opera < 12.1 */ | -o-animation: fadein 2s; /* Opera < 12.1 */ | ||
animation: fadein 2s; | animation: fadein 2s; | ||
| − | animation-delay: | + | opacity: 0; |
| + | animation-fill-mode: forwards; | ||
| + | animation-delay: 0.5s; | ||
| + | } | ||
| + | |||
| + | #fade-with-delay p { | ||
| + | -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */ | ||
| + | -moz-animation: fadein 2s; /* Firefox < 16 */ | ||
| + | -ms-animation: fadein 2s; /* Internet Explorer */ | ||
| + | -o-animation: fadein 2s; /* Opera < 12.1 */ | ||
| + | animation: fadein 2s; | ||
| + | opacity: 0; | ||
| + | animation-fill-mode: forwards; | ||
| + | animation-delay: 1.5s; | ||
} | } | ||
| Line 117: | Line 132: | ||
opacity: 1; | opacity: 1; | ||
} | } | ||
| + | } | ||
| + | |||
| + | /* HEADER/BANNER */ | ||
| + | body, | ||
| + | html { | ||
| + | height: 100%; | ||
| + | } | ||
| + | |||
| + | /* The banner image */ | ||
| + | .banner-image { | ||
| + | /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */ | ||
| + | background-image: linear-gradient( | ||
| + | rgba(0, 0, 0, 0.5), | ||
| + | rgba(0, 0, 0, 0.5) | ||
| + | ), | ||
| + | url("https://i.redd.it/25s3kfr67ij31.png"); | ||
| + | |||
| + | /* Set a specific height */ | ||
| + | height: 50%; | ||
| + | |||
| + | /* Position and center the image to scale nicely on all screens */ | ||
| + | background-position: center; | ||
| + | background-repeat: no-repeat; | ||
| + | background-size: cover; | ||
| + | position: relative; | ||
| + | } | ||
| + | |||
| + | /* Place text in the middle of the image */ | ||
| + | .banner-text { | ||
| + | text-align: center; | ||
| + | position: absolute; | ||
| + | top: 50%; | ||
| + | left: 50%; | ||
| + | transform: translate(-50%, -50%); | ||
| + | color: #882916; | ||
| + | /* Simulates outlining the text */ | ||
| + | text-shadow: -0.5px -0.5px 0 #fff, 0.5px -0.5px 0 #fff, | ||
| + | -0.5px 0.5px 0 #fff, 0.5px 0.5px 0 #fff; | ||
| + | } | ||
| + | |||
| + | .banner-text h1 { | ||
| + | font-size: 13vh; | ||
| + | } | ||
| + | |||
| + | .banner-text p { | ||
| + | font-size: 9vh; | ||
} | } | ||
</style> | </style> | ||
| Line 123: | Line 184: | ||
<body style="background-color: #fffdff;" ;> | <body style="background-color: #fffdff;" ;> | ||
<div class="container-fluid"> | <div class="container-fluid"> | ||
| − | <!-- HEADER --> | + | <!-- HEADER/BANNER --> |
| − | <div class=" | + | <div class="banner-image"> |
| − | <div class=" | + | <div class="banner-text"> |
| − | <div | + | <div id="fade"><h1>Oviita</h1></div> |
| − | + | <div id="fade-with-delay"><p>Vitamin A Deficiency Solution</p></div> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
</div> | </div> | ||
| Line 137: | Line 194: | ||
<div class="sub-heading"> | <div class="sub-heading"> | ||
<h1>Vitamin A Deficiency: A major problem</h1> | <h1>Vitamin A Deficiency: A major problem</h1> | ||
| + | <br> | ||
<h2> | <h2> | ||
An estimated 250,000–500,000 vitamin A–deficient children become blind | An estimated 250,000–500,000 vitamin A–deficient children become blind | ||
| Line 150: | Line 208: | ||
<div class="intro-body"> | <div class="intro-body"> | ||
<h1>Our Solution</h1> | <h1>Our Solution</h1> | ||
| + | <br> | ||
<p> | <p> | ||
In order to provide a sustainable, community-based solution, we plan | In order to provide a sustainable, community-based solution, we plan | ||
Revision as of 22:26, 6 July 2020
Vitamin A Deficiency: A major problem
An estimated 250,000–500,000 vitamin A–deficient children become blind every year. Vitamin A Deficiency (VAD) is a significant global health concern, affecting those with undiversified and insubstantial diets. Current mitigative efforts have had limited success due to consumer reluctance and their failure to consider lipid deficiency, an equally concerning condition that impedes Vitamin A uptake. We're here to change that.
Our Solution
In order to provide a sustainable, community-based solution, we plan to genetically modify Rhodosporidium toruloides, an oleaginous yeast that naturally produces beta-carotene and lipids, to be more robust and resource-efficient. By modifying the yeast to produce cellulase, it can then use common agricultural waste products as an energy source for synthesizing its oil. It can then be eaten as a vitamin A supplement. The yeast strain, while naturally safe and non-pathogenic, will also be genetically modified to include a kill switch for bio-containment, and optimized for oil production.
