Difference between revisions of "Team:Calgary/Imposter-Home"

(Created page with "{{Calgary/imposter-general-code}} <html> <head> <link rel="stylesheet" type="text/css" href="https://2020.igem.org/Template:Calgary/Model-Styling?action=raw&ctype...")
 
 
(4 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
{{Calgary/imposter-general-code}}
 
{{Calgary/imposter-general-code}}
 +
 +
<!--
 +
    Final Colours:
 +
    menu bar (red-brown): #882916
 +
    progress bar (light orange-yellow): #FFA600
 +
    light blue: #0197AE
 +
    dark blue: #1E6273
 +
    dark orange: #FF7700
 +
    light red: #FBF6F3
 +
-->
  
 
<html>
 
<html>
−
    <head>
+
  <head>
−
        <link rel="stylesheet" type="text/css" href="https://2020.igem.org/Template:Calgary/Model-Styling?action=raw&ctype=text/css">
+
    <link
−
        <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@100&display=swap" rel="stylesheet">
+
      rel="stylesheet"
−
        <script src="https://2020.igem.org/Template:Calgary/DynamicSizeModelPage?action=raw&ctype=text/javascript"></script>
+
      type="text/css"
−
        <style>
+
      href="https://2020.igem.org/Template:Calgary/Model-Styling?action=raw&ctype=text/css"
−
            h1{font-family:barlow;}
+
    />
−
            h2{font-family:barlow;}
+
    <link
−
        </style>
+
      href="https://fonts.googleapis.com/css2?family=Barlow:wght@100&display=swap"
−
  </head>
+
      rel="stylesheet"
 +
    />
 +
    <script src="https://2020.igem.org/Template:Calgary/DynamicSizeModelPage?action=raw&ctype=text/javascript"></script>
 +
    <style>
 +
      /* TEXT STYLING */
 +
      h1,
 +
      h2,
 +
      p {
 +
        font-family: barlow;
 +
      }
  
−
  <body style = "background-color:#FFFDFF"; >
+
      .sub-heading {
−
    <div class="container-fluid">
+
        background: #1e6273;
 +
        padding: 7vw 15vw;
 +
      }
  
−
        <div class="desktop-banner-back">
+
      .sub-heading h1 {
−
            <div class="text-area">
+
        color: #ff7700;
−
                <div class="page-banner">
+
        font-weight: 500;
−
                    <h1 class="page-title"><mark>Oviita</mark></h1>
+
      }
−
                    <h2 class="page-title"><mark>Vitamin A Deficiency Solution</mark></h2>
+
−
                </div>
+
−
            </div>
+
−
        </div>
+
  
−
         <div class="interface-group">
+
      .sub-heading h2 {
−
            <div class="content-area" id="textual-content">
+
         color: #fbf6f3;
−
                <div class="page">
+
      }
−
                    <div class="row">
+
 
−
                        <div class="col-lg-2 col-md-2 col-sm-0 col-xs-0"></div>
+
      .intro-body {
−
                        <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
+
        background: #fbf6f3;
−
                            <div class="header-area">
+
        padding: 4vw 15vw;
−
                                <div class="emphasis">
+
      }
−
                                    <h1>Problem</h1>
+
 
−
                                    <h2>Vitamin A Deficiency</h2>
+
      .intro-body p {
−
                                </div>
+
        color: #1e6273;
−
                                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.  
+
        font-size: 22;
−
                                <br><br>
+
        font-weight: 400;
−
                                In order to provide a sustainable, community-based solution, we plan to genetically modify <i>Rhodosporidium toruloides </i>, 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.
+
        text-align: left;
−
                            </div>
+
      }
−
                        </div>
+
 
−
                        <div class="col-lg-2 col-md-2 col-sm-0 col-xs-0"></div>
+
      .intro-body h1 {
−
                    </div>
+
        color: #ff7700;
−
                </div>
+
        font-weight: 600;
−
            </div>
+
      }
 +
 
 +
      /* FOR THE FADE EFFECT ON THE HEADER TEXT */
 +
      #fade {
 +
        -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: 0.5s;
 +
      }
 +
 
 +
      #fade-with-delay {
 +
        -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;
 +
      }
 +
 
 +
      @keyframes fadein {
 +
        from {
 +
          opacity: 0;
 +
        }
 +
        to {
 +
          opacity: 1;
 +
        }
 +
      }
 +
 
 +
      /* Firefox < 16 */
 +
      @-moz-keyframes fadein {
 +
        from {
 +
          opacity: 0;
 +
        }
 +
        to {
 +
          opacity: 1;
 +
        }
 +
      }
 +
 
 +
      /* Safari, Chrome and Opera > 12.1 */
 +
      @-webkit-keyframes fadein {
 +
        from {
 +
          opacity: 0;
 +
        }
 +
        to {
 +
          opacity: 1;
 +
        }
 +
      }
 +
 
 +
      /* Internet Explorer */
 +
      @-ms-keyframes fadein {
 +
        from {
 +
          opacity: 0;
 +
        }
 +
        to {
 +
          opacity: 1;
 +
        }
 +
      }
 +
 
 +
      /* Opera < 12.1 */
 +
      @-o-keyframes fadein {
 +
        from {
 +
          opacity: 0;
 +
        }
 +
        to {
 +
          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://static.igem.org/mediawiki/2020/1/1e/T--Calgary--temp-banner.png");
 +
 
 +
        /* Set a specific height */
 +
        height: 50vh;
 +
 
 +
        /* 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;
 +
        left: 50%;
 +
        top: 50%;
 +
        transform: translate(-50%, -50%);
 +
        color: #882916;
 +
        /* Simulates outlining the text */
 +
        text-shadow: -0.5px -0.5px 0 #FBF6F3, 0.5px -0.5px 0 #FBF6F3,
 +
          -0.5px 0.5px 0 #FBF6F3, 0.5px 0.5px 0 #FBF6F3;
 +
      }
 +
 
 +
      .banner-text h1 {
 +
        font-size: 11vh;
 +
      }
 +
 
 +
      .banner-text h2 {
 +
        font-size: 5vh;
 +
      }
 +
    </style>
 +
  </head>
 +
 
 +
  <body style="background-color: #FBF6F3;" ;>
 +
    <div class="container-fluid">
 +
      <!-- HEADER/BANNER -->
 +
      <div class="banner-image">
 +
        <div class="banner-text">
 +
          <div id="fade"><h1>Oviita</h1></div>
 +
          <div id="fade-with-delay"><h2>Vitamin A Deficiency Solution</h2></div>    
 
         </div>
 
         </div>
 +
      </div>
 +
      <!-- SUB HEADER -->
 +
      <div class="sub-heading">
 +
        <h1>Vitamin A Deficiency: A major problem</h1>
 +
        <br>
 +
        <h2>
 +
          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.
 +
          <span class="emphasis">We're here to change that.</span>
 +
        </h2>
 +
      </div>
 +
      <!-- BODY -->
 +
      <div class="intro-body">
 +
        <h1>Our Solution</h1>
 +
        <br>
 +
        <p>
 +
          In order to provide a sustainable, community-based solution, we plan
 +
          to genetically modify <i>Rhodosporidium toruloides</i>, 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.
 +
        </p>
 +
      </div>
 +
    </div>
 
   </body>
 
   </body>
 
</html>
 
</html>
 
{{Calgary/Footer}}
 
{{Calgary/Footer}}

Latest revision as of 21:01, 7 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.

Project
Human Centered Design
Modelling
Parts
Journal
Team