Difference between revisions of "Template:MIT/menu"

Line 1: Line 1:
 
{{Template:MIT/style}}
 
{{Template:MIT/style}}
 +
{{Template:MIT/menu}}
  
−
<html>
+
<html lang="en">
−
<head>
+
−
<style>
+
−
#home_logo, #sideMenu { display:none; }
+
−
#sideMenu, #top_title, .patrollink  {display:none;}
+
−
#content { margin:5px; padding:0px; width:100%;}
+
−
body {background-color: #fff;}
+
  
−
/* Menu Styling */
+
    <head>
  
−
ul {
+
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
−
list-style: none;
+
        <link href="https://2021.igem.org/wiki/index.php?title=Template:MIT/CSS&action=raw&ctype=text/css" rel="stylesheet">
−
font-size: 12px;
+
        <link href="https://2021.igem.org/wiki/index.php?title=Template:MIT/ScrollCSS&action=raw&ctype=text/css" rel="stylesheet">
−
}
+
        <link href="https://2021.igem.org/wiki/index.php?title=Template:MIT/Bootstrap&action=raw&ctype=text/css" rel="stylesheet">
 +
        <link rel="preconnect" href="https://fonts.googleapis.com">
 +
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 +
        <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@700&display=swap" rel="stylesheet">
 +
        <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap" rel="stylesheet">
 +
        <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400&display=swap" rel="stylesheet">
 +
        <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500&display=swap" rel="stylesheet">
 +
       
 +
        <style type="text/css">
 +
            .section p {width: 500px; text-align: center; margin: auto;}
 +
            .narration-bold{
 +
            font-family: Nunito, serif !important;
 +
            font-weight: 700;
 +
            text-align: justified !important;
 +
            font-size: 14px;
 +
            .bold_text {font-weight: 700;}
 +
            }
 +
            html, body
 +
            {
 +
            width: 100%;
 +
            height: 100%;
 +
            margin: 0px;
 +
            padding: 0px;
 +
            position: relative;
 +
            left: -2.5px;
 +
            }
 +
            .Contact{
 +
            padding-top: 16px;
 +
            }
 +
        </style>
  
−
nav {
+
    </head>
−
text-align: center !important;
+
 
−
display: flex;
+
<html>
−
padding-top: 8px;
+
    <div id="section0">
−
align-items: center;
+
      <div class="container section show-on-scroll">
−
vertical-align: middle !important;
+
        <br/>
−
min-height: 6vH;
+
        <br/>
−
background-color: #c2a593;
+
        <br/>
−
font-family: Lato, serif;
+
        <br/>
−
position: fixed;
+
        <h2 style = "text-align:center;">B. Syruptilis </h2>
−
width: 100%;
+
        <br/>
−
top: 2px;
+
        <p style="text-align:center;"><img src="https://static.igem.org/mediawiki/2021/7/76/T--MIT--flying_logo_2.gif" style="width: 300px;" background-repeat: repeat-x;"></p>
−
left: 0;
+
      </div>
−
z-index: 999;
+
    </div>
−
}
+
−
 
+
−
.logolink {
+
−
display: inline-block;
+
−
width: 8%;
+
−
margin-left: 50px !important;
+
−
margin-top: 300px !important;
+
−
margin-bottom: 10px !important;
+
−
}
+
−
 
+
−
.Navlogo {
+
−
display: inherit;
+
−
width: 100%;
+
−
}
+
−
+
−
.nav-links {
+
−
display: inline-flex;
+
−
justify-content: space-around;
+
−
width: 100%;
+
−
}
+
−
 
+
−
.nav-links a{
+
−
color: #fff;
+
−
text-decoration: none;
+
−
letter-spacing: 2px;
+
−
font-weight: bold;
+
−
font-size: 16px;
+
−
display: block;
+
−
}
+
−
 
+
−
/*Drop Down Menus for links at Computer Screen*/
+
−
.dropdown a{
+
−
padding: 2vh;
+
−
}
+
−
 
+
−
.dropdowncontent {
+
−
cursor: pointer;
+
−
display: none;
+
−
position: absolute;
+
−
background-color: #5e5656;
+
−
min-width: 150px;
+
−
z-index: 1;
+
−
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+
−
}
+
−
 
+
−
.dropdowncontent a{
+
−
color: #fff;
+
−
font-size: 12px;
+
−
text-align: left;
+
−
padding: 10px;
+
−
transition: all 0.5s ease;
+
−
}
+
−
 
+
−
.dropdown:hover .dropdowncontent{
+
−
display: block;
+
−
}
+
−
 
+
−
.dropdowncontent a:hover{
+
−
background-color: #8a8b8c !important;
+
−
}
+
−
 
+
−
/*Burger Buns*/
+
−
.burger {
+
−
display: none;
+
−
cursor: pointer;
+
−
right: 5px;
+
−
position: fixed;
+
−
}
+
−
 
+
−
.burger div{
+
−
width: 25px;
+
−
height: 5px;
+
−
background-color: white;
+
−
margin: 5px;
+
−
transition: background-color 400ms linear;
+
−
transition: all 0.3s ease;
+
−
}
+
  
−
@media screen {
+
    <div style = "background-color: #e3beb1;">
−
body {
+
    </div>
−
margin: auto;
+
−
}
+
−
}
+
  
−
/*Mobile Navigation Bar*/
+
    <div id="section1">
 +
      <div class="container section show-on-scroll">
 +
        <br/>
 +
        <br/>
 +
        <br/>
 +
        <p style = "font-size: 18px;" "margin: 10px">You and I and all other humans constantly consume food to obtain the nutrition we need to sustain our bodies.</p>
 +
        <br/>
 +
        <p style = "font-size: 18px">For many of us, at least one of the following are staples in our diet: <span class="narration-bold" style = "font-size: 18px">milk, soy, eggs, chicken, beef, fish, wheat, rice, and beans</span>, among many other foods.</p>
 +
        <br/>
 +
        <img src="https://static.igem.org/mediawiki/2021/a/af/T--MIT--food_sec.png" style="width: 500px;" class = "center";>
 +
      </div>
 +
    </div>
  
−
@media screen and (max-width: 1080px) {
+
    <div id="section2">
−
body {
+
      <div class="container section show-on-scroll">
−
overflow-x: hidden;
+
        <p>But for some people, eating any of those things would be <span class="narration-bold">fatal</span>. This is due to a condition called <span class="narration-bold">Maple Syrup Urine Disease (MSUD)</span>, which derives its name from the sweet-smelling urine and sweat of those who have the disease.</p>
−
}
+
        <br/>
 +
        <img src="https://static.igem.org/mediawiki/2021/c/c6/T--MIT--maple_sec_2.png" style="width: 300px;">
 +
      </div>
 +
    </div>
  
−
.logolink {
+
    <div style = "background-color: #6E352C;">
−
position: relative;
+
      <img src="https://static.igem.org/mediawiki/2021/3/3d/T--MIT--syrup_logo.jpg" style="width: 100%; background-repeat: repeat-x;">
−
display: block;
+
    </div>
−
width: 20%;
+
−
}
+
  
−
.nav-links {
+
    <div id="section3">
−
position: fixed;      
+
      <div class="container section show-on-scroll">
−
display: block;
+
        <h2 style="font-size: 60px;" class = "narration-extra-bold">What is Maple Syrup Urine Disease?</h2>
−
height: 100%;
+
        <br/>
−
right: 0px;
+
        <p>Maple Syrup Urine Disease (MSUD) is a genetic condition that prevents the body from breaking down <span class="narration-bold">branched-chain amino acids (BCAAs)</span>: leucine, isoleucine, and valine.</p>
−
top: 10vh;
+
        <br/>
−
background-color: #c2a593;
+
        <img src="https://static.igem.org/mediawiki/2021/b/b2/T--MIT--BCAAs_sec_3.png" style="width: 500px; padding-bottom: 100px;">
−
width: 30%;
+
        <p>This causes a harmful buildup of BCAAs and their alpha keto acids in the bloodstream, causing <span class="narration-bold">poor feeding, weakness, loss of muscle tone, brain damage, and eventually death</span>.</p>
−
transform: translateX(150%);
+
        <br/>
−
transition: transform 0.5s ease-in;
+
        <img src="https://static.igem.org/mediawiki/2021/3/3c/T--MIT--toxins_sec.jpg" style="width: 400px; padding-bottom: 100px;">
−
margin: inherit;
+
        <p>The current treatment involves careful dietary management, reducing the amount of BCAAs consumed while maintaining adequate nutrition. <span class="narration-bold">Dialysis, tube feeding, and hemofiltration</span> are needed in severe cases.</p>
−
padding-top: 10vh;
+
        <br/>
−
z-index: -1;
+
        <img src="https://static.igem.org/mediawiki/2021/2/2f/T--MIT--balance_sec.png" style="width: 400px;">
−
}
+
      </div>
 +
    </div>
  
−
.nav-links li{
+
    <div style = "background-color: #e3beb1;">
−
opacity: 0;
+
      <img src="https://static.igem.org/mediawiki/2021/a/ac/T--MIT--syrup_border_dark.jpg" style="width: 100%; background-repeat: repeat-x;">
−
display: block;
+
    </div>
−
}
+
  
−
.nav-links a{
+
    <div id="section4">
−
font-size:15px;
+
      <div class="container section show-on-scroll">
−
}
+
        <p style="font-size: 40px;">But what if there was a way to manage MSUD  <span class="narration-bold" style="font-size: 40px;">without</span> lifetime dietary management?</p>
 +
        <br/>
 +
        <img src="https://static.igem.org/mediawiki/2021/e/e2/T--MIT--question_sec.png" style="width: 200px;">
 +
      </div>
 +
    </div>
  
−
.burger {
+
    <div id="section5">
−
display: block;
+
      <div class="container section show-on-scroll">
−
}
+
        <p style="font-size: 40px;">Could MSUD patients live their life more  <span class="narration-bold" style="font-size: 40px;">freely</span>, without invasive treatments?</p>
 +
        <br/>
 +
        <img src="https://static.igem.org/mediawiki/2021/c/ce/T--MIT--no_invasive_sec.jpg" style="width: 300px;">
 +
      </div>
 +
    </div>
  
−
.dropdown {
+
    <div style = "background-color: #f2edeb;">
−
padding-top: 20px;
+
      <img src="https://static.igem.org/mediawiki/2021/3/3d/T--MIT--syrup_logo.jpg" style="width: 100%; background-repeat: repeat-x;">
−
}
+
    </div>
  
−
.dropdowncontent {
+
    <div id="section6">
−
display: none;
+
      <div class="container section show-on-scroll">
−
position: relative;
+
        <h1 style="font-size: 100px;">Introducing <em>B. syruptilis</em></h1>
−
}
+
        <br/>
−
.dropdowncontent a{
+
        <img src="https://static.igem.org/mediawiki/2021/a/a6/T--MIT--b_syruptilis.png" style="width: 600px;">
−
font-size: 10px;
+
      </div>
−
padding: 10px;
+
    </div>
−
}
+
−
}
+
  
−
.nav-active {
+
    <div style = "background-color: #e3beb1;">
−
transform: translateX(0%);
+
      <img src="https://static.igem.org/mediawiki/2021/3/33/T--MIT--syrup_border_light.jpg" style="width: 100%; background-repeat: repeat-x;">
−
padding-left: 0px;
+
    </div>
−
}
+
  
 +
    <div id="section7">
 +
      <div class="container section show-on-scroll">
 +
        <h2 style="font-size: 60px;" class = "narration-extra-bold">So what’s the deal with <em>B. syruptilis</em>?</h2>
 +
        <br/>
 +
        <p>Before each meal, an MSUD patient ingests a <span class="narration-bold">probiotic pill</span> containing bacteria that are engineered with <span class="narration-bold">special BCAA-breakdown properties.</span></p>
 +
        <br/>
 +
        <img src="images/ingest_sec_7.png" style="width: 400px;">
 +
      </div>
 +
    </div>
  
−
@keyframes navLinkFade {
+
    <div id="section8">
−
from {
+
      <div class="container section show-on-scroll">
−
opacity: 0;
+
        <p>The bacteria <em>(B. subtilis)</em> are ingested in the form of <span class="narration-bold">spores</span>, and once they reach the comfortable environment within the small intestines, they <span class="narration-bold">germinate into active cells.</span></p>
−
transform: translateX(25px);
+
        <br/>
−
}
+
        <img src="images/germinate_sec_8.png" style="width: 500px;">
−
to {
+
      </div>
−
opacity: 1;
+
    </div>
−
transform: translateX(0px);
+
−
}
+
−
}
+
  
−
.toggle .line1{
+
    <div id="section9">
−
background-color: #E2D264;
+
      <div class="container section show-on-scroll">
−
transform: rotate(180deg);
+
        <p>There, they <span class="narration-bold">absorb BCAAs</span> from the patient’s gut and <span class="narration-bold">break them down</span> into their normal metabolites.</p>
−
}
+
        <br/>
 +
        <img src="images/breakdown_sec_9.png" style="width: 500px;">
 +
      </div>
 +
    </div>
  
−
.toggle .line2{
+
    <div id="section10">
−
background-color: #E73C7E;
+
      <div class="container section show-on-scroll">
−
transform: rotate(180deg);
+
        <p style="padding-bottom: 30px;">As a result, the patient can <span class="narration-bold">safely consume BCAAs</span> without extensive dietary management and invasive treatments.</p>
−
}
+
        <img src="images/can_consume_sec_10.png" style="width: 400px; margin-bottom: 200px;">
 +
      </div>
 +
      <p><span class="narration-bold" style="font-size: 80px;">Pretty <img class = "show-on-scroll" src="images/sweet.png" style="width: 150px;"> right?</span></p>
 +
    </div>
  
−
.toggle .line3{
+
    <div style = "background-color: #f2edeb;">
−
background-color: #3E4A9E;
+
      <img src="https://static.igem.org/mediawiki/2021/3/3d/T--MIT--syrup_logo.jpg" style="width: 100%; background-repeat: repeat-x;">
−
transform: rotate(180deg);
+
    </div>
−
}
+
−
</style>
+
−
</head>
+
  
−
     <body>
+
     <div id="section11">
−
<nav>
+
      <div class="container section show-on-scroll">
−
<ul class="nav-links">
+
        <h2 style="font-size: 100px;" class = "narration-extra-bold">Let’s get started</h2>
−
<li class="dropdown"> 
+
        <br/>
−
<a href="https://2021.igem.org/Team:MIT">Home </a>
+
−
</li>
+
  
−
<li class="dropdown">
+
        <figure class="figure">
−
<a> Team </a>
+
          <img src="images/project_icon.png" style="width: 200px;">
−
<div class="dropdowncontent">
+
          <figcaption class="figure-caption" style="font-size: 25pt; color: #4b4b4b; font-family: 'Ubuntu', sans-serif; font-weight: 700;">PROJECT</figcaption>
−
<a href="https://2021.igem.org/Team:MIT/Team">Team </a>
+
        </figure>
−
<a href="https://2021.igem.org/Team:MIT/Attributions"> Attributions </a>
+
        <figure class="figure">
−
</div>
+
          <img src="images/wet_lab_icon.png" style="width: 200px;">
−
</li>
+
          <figcaption class="figure-caption" style="font-size: 25pt; color: #4b4b4b; font-family: 'Ubuntu', sans-serif; font-weight: 700;">EXPERIMENTS</figcaption>
 +
        </figure>
 +
        <figure class="figure">
 +
          <img src="images/model_icon.png" style="width: 200px;">
 +
          <figcaption class="figure-caption" style="font-size: 25pt; color: #4b4b4b; font-family: 'Ubuntu', sans-serif; font-weight: 700;">MODELING</figcaption>
 +
        </figure>
 +
        <br/>
 +
        <figure class="figure">
 +
          <img src="images/results_icon.png" style="width: 200px;">
 +
          <figcaption class="figure-caption" style="font-size: 25pt; color: #4b4b4b; font-family: 'Ubuntu', sans-serif; font-weight: 700;">RESULTS</figcaption>
 +
        </figure>
 +
        <figure class="figure">
 +
          <img src="images/human_practices_icon.png" style="width: 200px;">
 +
          <figcaption class="figure-caption" style="font-size: 25pt; color: #4b4b4b; font-family: 'Ubuntu', sans-serif; font-weight: 700;">HUMAN PRACTICES</figcaption>
 +
        </figure>
 +
      </div>
 +
    </div>
  
−
<li class="dropdown">  
+
    <footer class="footer">
−
<a> Project </a>
+
        <b>CONTACT US</b>
−
<div class="dropdowncontent">
+
        <br/> <br/>
−
<a class="link" href="https://2021.igem.org/Team:MIT/Description"> Description </a>
+
        <a href="https://www.facebook.com/MITiGEM" target="_blank">
−
<a href="https://2021.igem.org/Team:MIT/Design"> Design </a>
+
            <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
−
<a href="https://2021.igem.org/Team:MIT/Experiments"> Experiments </a>
+
                <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"/> <span style="padding: 5px;"></span>
−
<a href="https://2021.igem.org/Team:MIT/Model"> Model </a>
+
            </svg>
−
<a href="https://2021.igem.org/Team:MIT/Results"> Results </a>
+
        </a>
−
<a href="https://2021.igem.org/Team:MIT/Engineering"> Engineering Success </a>
+
−
<a href="https://2021.igem.org/Team:MIT/Contribution"> Contribution </a>
+
−
</div>
+
−
</li>
+
  
−
<li class="dropdown"> 
+
        <a href="https://www.instagram.com/igem_mit/" target="_blank">
−
<a> Parts </a>
+
            <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16">
−
<div class="dropdowncontent">
+
                <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"/> <span style="padding: 5px;"></span>
−
<a href="https://2021.igem.org/Team:MIT/Parts"> Parts Overview </a>
+
            </svg>
−
<a href="https://2021.igem.org/Team:MIT/Basic_Part"> Basic Parts </a>
+
        </a>
−
<a href="https://2021.igem.org/Team:MIT/Composite_Part"> Composite Parts </a>
+
−
</div>
+
−
</li>
+
−
<li class="dropdown"> 
+
−
<a> Safety </a>
+
−
<div class="dropdowncontent">
+
−
<a href="https://2021.igem.org/Team:MIT/Safety"> Safety </a>
+
−
<a href="https://2021.igem.org/Team:MIT/Implementation"> Implementation </a>
+
−
+
−
</div>
+
−
</li>
+
−
<li class="dropdown">
+
−
<a> Human Practices </a>
+
−
<div class="dropdowncontent">
+
−
<a href="https://2021.igem.org/Team:MIT/Human_Practices">Human Practices</a>
+
−
<a href="https://2021.igem.org/Team:MIT/Education"> Outreach & Engagement </a>
+
  
−
+
        <a href="mailto: mitigem2021@gmail.com">
−
</div>
+
            <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-envelope" viewBox="0 0 16 16">
−
</li>
+
                <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2zm13 2.383-4.758 2.855L15 11.114v-5.73zm-.034 6.878L9.271 8.82 8 9.583 6.728 8.82l-5.694 3.44A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.739zM1 11.114l4.758-2.876L1 5.383v5.73z"/> <span style="padding: 5px;"></span>
−
<li class="dropdown">
+
            </svg>
−
<a href="https://2021.igem.org/Team:MIT/Collaborations"> MIT Microbiome Meetup  </a>
+
        </a>
−
</li>
+
−
</ul>
+
−
+
−
<div class="burger">
+
−
<div class="line1"></div>
+
−
<div class="line2"></div>
+
−
<div class="line3"></div>
+
−
</div>
+
−
</u1>
+
−
</nav>
+
−
</body>
+
  
−
    <script>
+
         <a href="https://twitter.com/igem_mit?lang=en" target="_blank">
−
         /*Toggle Nav*/
+
             <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-twitter" viewBox="0 0 16 16">
−
        const navSlide = () => {
+
                <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/> <span style="padding: 5px;"></span>
−
             const burger = document.querySelector ('.burger');
+
             </svg>
−
            const nav = document.querySelector ('.nav-links');
+
        </a>
−
             const navLinks = document.querySelectorAll('.nav-links li');
+
    </footer>
 +
   
 +
    <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Template:MIT/ShowOnScrollJS&action=raw&ctype=text/javascript"</script>
  
−
            burger.addEventListener('click', () => {
+
</body>
−
                nav.classList.toggle('nav-active');
+
−
            /*Animate Menu links*/
+
−
                navLinks.forEach((link,index) => {
+
−
                if(link.style.animation) {
+
−
                    link.style.animation = '';
+
−
                }
+
−
                else {
+
−
                    link.style.animation = `navLinkFade 0.5s ease forwards ${index / 5 + 0.05}s`;
+
−
                }
+
−
            });
+
−
            /*Burger Animation*/
+
−
            burger.classList.toggle('toggle');
+
−
            });
+
−
        }
+
−
    navSlide();
+
−
    </script>
+
 
</html>
 
</html>

Revision as of 13:16, 12 October 2021





B. Syruptilis





You and I and all other humans constantly consume food to obtain the nutrition we need to sustain our bodies.


For many of us, at least one of the following are staples in our diet: milk, soy, eggs, chicken, beef, fish, wheat, rice, and beans, among many other foods.


But for some people, eating any of those things would be fatal. This is due to a condition called Maple Syrup Urine Disease (MSUD), which derives its name from the sweet-smelling urine and sweat of those who have the disease.


What is Maple Syrup Urine Disease?


Maple Syrup Urine Disease (MSUD) is a genetic condition that prevents the body from breaking down branched-chain amino acids (BCAAs): leucine, isoleucine, and valine.


This causes a harmful buildup of BCAAs and their alpha keto acids in the bloodstream, causing poor feeding, weakness, loss of muscle tone, brain damage, and eventually death.


The current treatment involves careful dietary management, reducing the amount of BCAAs consumed while maintaining adequate nutrition. Dialysis, tube feeding, and hemofiltration are needed in severe cases.


But what if there was a way to manage MSUD without lifetime dietary management?


Could MSUD patients live their life more freely, without invasive treatments?


Introducing B. syruptilis


So what’s the deal with B. syruptilis?


Before each meal, an MSUD patient ingests a probiotic pill containing bacteria that are engineered with special BCAA-breakdown properties.


The bacteria (B. subtilis) are ingested in the form of spores, and once they reach the comfortable environment within the small intestines, they germinate into active cells.


There, they absorb BCAAs from the patient’s gut and break them down into their normal metabolites.


As a result, the patient can safely consume BCAAs without extensive dietary management and invasive treatments.

Pretty right?

Let’s get started


PROJECT
EXPERIMENTS
MODELING

RESULTS
HUMAN PRACTICES