Difference between revisions of "Team:Calgary/Software"

Line 11: Line 11:
 
-->
 
-->
 
<html>
 
<html>
  <head>
 
 
<link href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@500;600;700&display=swap" rel="stylesheet">
 
 
<link
 
      rel="stylesheet"
 
      type="text/css"
 
      href="https://2020.igem.org/Template:Calgary/Imposter-Wet-Overview-Style?action=raw&ctype=text/css"
 
    />
 
 
  
 +
<head>
 +
    <link href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@500;600;700&display=swap" rel="stylesheet">
 +
    <link rel="stylesheet" type="text/css"
 +
        href="https://2020.igem.org/Template:Calgary/Imposter-Wet-Overview-Style?action=raw&ctype=text/css" />
 
     <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>
/* The banner image */
+
        /* The banner image */
.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 */
+
            /* 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(to bottom, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.5) 100%), url("https://static.igem.org/mediawiki/2020/d/da/T--Calgary--IHPbanner.jpeg");
+
            background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), url("https://static.igem.org/mediawiki/2020/d/da/T--Calgary--IHPbanner.jpeg");
  
  /* Set a specific height */
+
            /* Set a specific height */
  height: 65vh;
+
            height: 65vh;
  
  /* Position and center the image to scale nicely on all screens */
+
            /* Position and center the image to scale nicely on all screens */
  background-position: center;
+
            background-position: center;
  background-repeat: no-repeat;
+
            background-repeat: no-repeat;
  background-size: cover;
+
            background-size: cover;
  position: relative;
+
            position: relative;
  background-attachment: fixed;
+
            background-attachment: fixed;
}
+
        }
  
 +
        /*header font size for tablet*/
 +
        @media(max-width: 768px) {
 +
            .resp h1 {
 +
                font-size: 55px !important;
 +
            }
 +
        }
  
 +
        /*header font size for mobile*/
 +
        @media (max-width:525px) {
 +
            .resp h1 {
 +
                font-size: 50px !important;
 +
            }
 +
        }
  
/*header font size for tablet*/
+
        @media (max-width: 767px) {
@media(max-width: 768px){
+
  .resp h1{
+
    font-size:55px!important;
+
  }}
+
  
/*header font size for mobile*/
+
            .banner-image {
@media (max-width:525px){
+
                background-position: center;
  .resp h1{
+
            }
    font-size:50px!important;
+
        }
  }}
+
  
@media (max-width: 767px) {
+
        /*header4 font size for mobile*/
 +
        @media (max-width:525px) {
 +
            .resp2 h4 {
 +
                font-size: 15px !important;
 +
            }
 +
        }
  
.banner-image {
+
        /*header4 font size for tablet*/
  background-position: center;
+
        @media(max-width: 768px) {
}
+
            .resp2 h4 {
}
+
                font-size: 15px !important;
 +
            }
 +
        }
  
 +
        /* Style page content */
 +
        .main {
 +
            padding: 0px 0px;
 +
            position: relative;
 +
            top: -100px;
 +
            /* To override the odd <br> tag bug */
 +
        }
  
/*header4 font size for mobile*/
+
        .break h4 {
@media (max-width:525px){
+
            word-break: break-all;
  .resp2 h4{
+
        }
    font-size:15px!important;
+
  }}
+
  
 +
        /* References section of page slightly above the header */
 +
        #project-design,
 +
        #part-design,
 +
        #experimental-design,
 +
        #future-directions {
 +
            padding-top: 50px;
 +
            margin-top: -50px;
 +
        }
  
/*header4 font size for tablet*/
+
        /* Accordion styling */
@media(max-width: 768px){
+
        .btn {
  .resp2 h4{
+
            color: #882916;
    font-size:15px!important;
+
        }
  }}
+
  
 +
        /* mouse over button */
 +
        a.imglink {
 +
            background: #000;
 +
            display: inline-block;
 +
        }
  
/* Style page content */
+
        a.imglink img {
.main {
+
            vertical-align: middle;
  padding: 0px 0px;
+
            transition: opacity 0.3s;
  position: relative;
+
            -webkit-transition: opacity 0.3s;
  top: -100px; /* To override the odd <br> tag bug */
+
        }
}
+
  
 +
        a.imglink:hover img {
 +
            opacity: 0.5;
 +
        }
  
.break h4{word-break: break-all;}
+
        .grid-container {
 +
            display: inline-grid;
 +
            grid-row-gap: 15px;
 +
            grid-column-gap: 5vw;
 +
            grid-template-columns: 30vw 50vw;
 +
            grid-template-rows: 20vh 20vh 20vh 20vh 20vh;
 +
            align-items: center;
 +
            justify-items: center;
 +
            margin: auto;
 +
        }
  
 +
        /*
 +
        GRID:
 +
        1 2
 +
        3 4
 +
        5 6
 +
        7 8
 +
        9 10
 +
        */
 +
        .grid1 {
 +
            grid-column-start: 1;
 +
            grid-column-end: 2;
 +
            grid-row-start: 1;
 +
            grid-row-end: 2;
 +
        }
  
 +
        .grid2 {
 +
            grid-column-start: 2;
 +
            grid-column-end: 3;
 +
            grid-row-start: 1;
 +
            grid-row-end: 2;
 +
        }
  
/* References section of page slightly above the header */
+
        .grid3 {
#project-design, #part-design, #experimental-design, #future-directions {
+
            grid-column-start: 1;
    padding-top: 50px;
+
            grid-column-end: 2;
    margin-top: -50px;
+
            grid-row-start: 2;
}
+
            grid-row-end: 3;
 +
        }
  
 +
        .grid4 {
 +
            grid-column-start: 2;
 +
            grid-column-end: 3;
 +
            grid-row-start: 2;
 +
            grid-row-end: 3;
 +
        }
  
 +
        .grid5 {
 +
            grid-column-start: 1;
 +
            grid-column-end: 2;
 +
            grid-row-start: 3;
 +
            grid-row-end: 4;
 +
        }
  
 +
        .grid6 {
 +
            grid-column-start: 2;
 +
            grid-column-end: 3;
 +
            grid-row-start: 3;
 +
            grid-row-end: 4;
 +
        }
  
/* Accordion styling */
+
        .grid7 {
.btn {color:#882916;}
+
            grid-column-start: 1;
 +
            grid-column-end: 2;
 +
            grid-row-start: 4;
 +
            grid-row-end: 5;
 +
        }
  
 +
        .grid8 {
 +
            grid-column-start: 2;
 +
            grid-column-end: 3;
 +
            grid-row-start: 4;
 +
            grid-row-end: 5;
 +
        }
  
 +
        .grid9 {
 +
            grid-column-start: 1;
 +
            grid-column-end: 2;
 +
            grid-row-start: 5;
 +
            grid-row-end: 6;
 +
        }
  
/* mouse over button */
+
        .grid10 {
a.imglink{
+
            grid-column-start: 2;
  background:         #000;
+
            grid-column-end: 3;
  display:            inline-block;
+
            grid-row-start: 5;
}
+
            grid-row-end: 6;
a.imglink img{
+
        }
  vertical-align:     middle;
+
  transition:         opacity 0.3s;
+
  -webkit-transition: opacity 0.3s;
+
}
+
a.imglink:hover img{
+
  opacity:            0.5;
+
}
+
 
     </style>
 
     </style>
  </head>
+
</head>
 +
 
  
 
 
 
<body style="background-color: #FFFFFF;">
 
<body style="background-color: #FFFFFF;">
<div class="main">
+
    <div class="main">
    <div class="container-fluid">
+
        <div class="container-fluid">
 +
            <!-- HEADER/BANNER -->
 +
            <div class="banner-image">
 +
                <div class="banner-text resp">
 +
                    <h1 style="font-weight: 600; font-family: 'Public Sans', sans-serif;">SOFTWARE</h1>
 +
                </div>
 +
            </div>
 +
            <!-- BODY -->
 +
            <div style="margin-bottom:-200px; background-color:#f0eadfff;" class="intro-body">
 +
                <div style="background-color:#FFFFFF; padding-left: 60px; padding-right: 50px; padding-bottom: 60px;"
 +
                    class="project-design" id="project-design">
 +
                    <center>
 +
                        <h2><b>SOFTWARE OVERVIEW</b></h2>
 +
                    </center>
 +
                    <br>
 +
                    <p>
 +
                        Oviita has three main wet lab components that allow <span style="font-style: italic;"
 +
                            class="italic">Yarrowia lipolytica</span> to be easy and safe to work with in communities,
 +
                        and be
 +
                        as nutritionally valuable as possible. This year we did extensive planning of experiments,
 +
                        including trouble-shooting plans. Check out our work below!
 +
                    </p>
  
 +
                    <div style="background-color:#f5b984; border-radius: 25px; padding-bottom: 30px;" class="row resp2">
 +
                        <div class="grid-container;">
 +
                            <div class="grid1">
 +
                                <a href="https://2020.igem.org/Team:Calgary/Bellatrix" class="imglink">
 +
                                    <center><img style="padding-bottom:20px;" class="img-fluid"
 +
                                            src="https://static.igem.org/mediawiki/2020/3/3a/T--Calgary--partcollection.jpg">
 +
                                    </center>
 +
                                </a>
 +
                                <h4>BELLATRIX</h4>
 +
                            </div>
 +
                            <div class="grid2">
 +
                                <p>Integrating cellulase genes into the <span style="font-style: italic;class="
 +
                                        italic">Y. lipolytica</span> genome, thus allowing the yeast to use
 +
                                    agricultural waste as a carbon source for energy. </p>
 +
                            </div>
 +
                        </div>
 +
                        <div class="col-sm-4" style="padding-top:30px;"><a
 +
                                href="https://2020.igem.org/Team:Calgary/Cellulase_General" class="imglink">
 +
                                <center><img style="padding-bottom:20px;" class="img-fluid"
 +
                                        src="https://static.igem.org/mediawiki/2020/f/ff/T--Calgary--validate.jpg">
 +
                                    <h4>GAUSHAUS</h4>
 +
                                    <p>Integrating cellulase genes into the <span style="font-style: italic;class="
 +
                                            italic">Y. lipolytica</span> genome, thus allowing the yeast to use
 +
                                        agricultural waste as a carbon source for energy. </p>
 +
                                </center>
 +
                            </a>
 +
                        </div>
  
 +
                        <div style="padding-top:30px;" class="col-sm-4"><a
 +
                                href="https://2020.igem.org/Team:Calgary/Gaushaus" class="imglink">
 +
                                <center><img style="padding-bottom:20px;" class="img-fluid"
 +
                                        src="https://static.igem.org/mediawiki/2020/7/79/T--Calgary--characterize.jpg">
 +
                                    <h4>STICKS</h4>
 +
                                    <p>Engineering the different strains to be dependent on each other so they can
 +
                                        only
 +
                                        survive within the bioreactor and not in the environment </p>
 +
                                </center>
 +
                            </a>
 +
                        </div>
  
      <!-- HEADER/BANNER -->
+
                        <div style="padding-top:30px;" class="col-sm-4"><a
      <div class="banner-image">
+
                                href="https://2020.igem.org/Team:Calgary/Metabolic_Flux" class="imglink">
        <div class="banner-text resp">
+
                                <center><img style="padding-bottom:20px;" class="img-fluid"
        <h1 style="font-weight: 600; font-family: 'Public Sans', sans-serif;">SOFTWARE</h1>
+
                                        src="https://static.igem.org/mediawiki/2020/7/79/T--Calgary--characterize.jpg">
        </div>
+
                                    <h4>METABOLIC FLUX</h4>
      </div>
+
                                    <p>Engineering the different strains to be dependent on each other so they can
 +
                                        only
 +
                                        survive within the bioreactor and not in the environment </p>
 +
                                </center>
 +
                            </a>
 +
                        </div>
  
      <!-- BODY -->
+
                        <div style="padding-top:30px;" class="col-sm-4"><a
      <div style="margin-bottom:-200px; background-color:#f0eadfff;"class="intro-body">
+
                                href="https://2020.igem.org/Team:Calgary/Cellobiohydrolase" class="imglink">
<div style="background-color:#FFFFFF; padding-left: 60px; padding-right: 50px; padding-bottom: 60px; border-radius: ;"class = "project-design" id="project-design">
+
                                <center><img style="padding-bottom:20px;" class="img-fluid"
        <center><h2><b>SOFTWARE OVERVIEW</b></h2></center>
+
                                        src="https://static.igem.org/mediawiki/2020/7/79/T--Calgary--characterize.jpg">
        <br>
+
                                    <h4>HARDWARE</h4>
        <p>
+
                                    <p>Engineering the different strains to be dependent on each other so they can
          Oviita has three main wet lab components that allow <span style="font-style: italic;class="italic">Yarrowia lipolytica</span> to be easy and safe to work with in communities, and be as nutritionally valuable as possible. This year we did extensive planning of experiments, including trouble-shooting plans. Check out our work below!
+
                                        only
        </p>
+
                                        survive within the bioreactor and not in the environment </p>
 +
                                </center>
 +
                            </a>
 +
                        </div>
  
 
+
                        <div style="padding-top:30px;" class="col-sm-4"><a
 
+
                                href="https://2020.igem.org/Team:Calgary/Endoglucanase1" class="imglink">
  <div style="background-color:#f5b984; border-radius: 25px; padding-bottom: 30px;"class="row resp2">
+
                                <center><img style="padding-bottom:20px;" class="img-fluid"
   
+
                                        src="https://static.igem.org/mediawiki/2020/7/79/T--Calgary--characterize.jpg">
    <div style="padding-top:30px;"class="col-sm-4"><a href="https://2020.igem.org/Team:Calgary/Bellatrix" class="imglink">
+
                                    <h4>ENDOGLUCANASE</h4>
    <center><img style="padding-bottom:20px;"class="img-fluid"src="https://static.igem.org/mediawiki/2020/3/3a/T--Calgary--partcollection.jpg">
+
                                    <p>Engineering the different strains to be dependent on each other so they can
 
+
                                        only
<h4>BELLATRIX</h4>
+
                                        survive within the bioreactor and not in the environment </p>
      <p>Integrating cellulase genes into the <span style="font-style: italic;class="italic">Y. lipolytica</span> genome, thus allowing the yeast to use agricultural waste as a carbon source for energy. </p></center></a>
+
                                </center>
 +
                            </a>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
                <!--End of round div tag-->
 +
            </div>
 +
        </div>
 
     </div>
 
     </div>
      
+
     </div> <!-- add in new section of CONTENT above this -->
  <div style="padding-top:30px;"class="col-sm-4"><a href="https://2020.igem.org/Team:Calgary/Cellulase_General" class="imglink">
+
 
+
<center><img style="padding-bottom:20px;"class="img-fluid"src="https://static.igem.org/mediawiki/2020/f/ff/T--Calgary--validate.jpg">
+
 
+
<h4>GAUSHAUS</h4>
+
      <p>Integrating cellulase genes into the <span style="font-style: italic;class="italic">Y. lipolytica</span> genome, thus allowing the yeast to use agricultural waste as a carbon source for energy. </p></center></a>
+
 
     </div>
 
     </div>
   
+
</body>
  <div style="padding-top:30px;"class="col-sm-4"><a href="https://2020.igem.org/Team:Calgary/Gaushaus" class="imglink">
+
 
+
    <center><img style="padding-bottom:20px;"class="img-fluid"src="https://static.igem.org/mediawiki/2020/7/79/T--Calgary--characterize.jpg">
+
<h4>STICKS</h4>
+
  <p>Engineering the different strains to be dependent on each other so they can only survive within the bioreactor and not in the environment </p></center></a>
+
    </div>
+
 
+
    <div style="padding-top:30px;"class="col-sm-4"><a href="https://2020.igem.org/Team:Calgary/Metabolic_Flux" class="imglink">
+
+
      <center><img style="padding-bottom:20px;"class="img-fluid"src="https://static.igem.org/mediawiki/2020/7/79/T--Calgary--characterize.jpg">
+
<h4>METABOLIC FLUX</h4>
+
  <p>Engineering the different strains to be dependent on each other so they can only survive within the bioreactor and not in the environment </p></center></a>
+
    </div>
+
 
+
    <div style="padding-top:30px;"class="col-sm-4"><a href="https://2020.igem.org/Team:Calgary/Cellobiohydrolase" class="imglink">
+
 
+
      <center><img style="padding-bottom:20px;"class="img-fluid"src="https://static.igem.org/mediawiki/2020/7/79/T--Calgary--characterize.jpg">
+
  <h4>HARDWARE</h4>
+
    <p>Engineering the different strains to be dependent on each other so they can only survive within the bioreactor and not in the environment </p></center></a>
+
      </div>
+
 
+
      <div style="padding-top:30px;"class="col-sm-4"><a href="https://2020.igem.org/Team:Calgary/Endoglucanase1" class="imglink">
+
 
+
        <center><img style="padding-bottom:20px;"class="img-fluid"src="https://static.igem.org/mediawiki/2020/7/79/T--Calgary--characterize.jpg">
+
  <h4>ENDOGLUCANASE</h4>
+
    <p>Engineering the different strains to be dependent on each other so they can only survive within the bioreactor and not in the environment </p></center></a>
+
      </div>
+
 
+
   
+
    </div> <!--End of round div tag-->
+
 
+
  
</div>
 
          </div> <!-- add in new section of CONTENT above this -->
 
      </div>
 
    </div>
 
  </body>
 
 
</html>
 
</html>
 
{{Calgary/Imposter-Footer}}
 
{{Calgary/Imposter-Footer}}

Revision as of 02:20, 27 October 2020