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

 
(30 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
<!--{{Calgary/Imposter-General}}-->
 +
{{Calgary/Imposter-Navbar-No-Logo}}
 +
<html>
  
  body {
+
<head>
    overflow-x: hidden;
+
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   }
+
   <link rel = "stylesheet" type = "text/css" href = "https://2020.igem.org/Template:Calgary/Team-Style?action=raw&ctype=text/css"/>
   #main-view {
+
   <link rel = "stylesheet" type = "text/css" href = "https://2020.igem.org/Template:Calgary/Imposter-Sidebar-2-Style?action=raw&ctype=text/css"/>
    justify-content: center;
+
  <!--<link rel = "stylesheet" type = "text/css" href = "https://2020.igem.org/Template:Calgary/Imposter-Content-Style?action=raw&ctype=text/css"/>-->
    margin-left: 250px;
+
</head>
padding: 0px 0px;
+
position: relative;
+
top: -100px; /* To override the odd
+
tag bug */
+
  }
+
  
  .main-teampage {
+
<body>
    padding: 0px;
+
  }
+
  
   .main-pics {
+
   <!-- SIDEBAR -->
     padding: 5px;
+
  <div class = "sidenav" id = "sidenav">
          }
+
     <a href="https://2020.igem.org/Team:Calgary">
 +
      <img src = "https://static.igem.org/mediawiki/2020/7/70/T--Calgary--Oviita-Mother-Logo.png" style = "height: 40px; width: auto"/>
 +
    </a>
 +
    <a href = "#drylab"> Dry Lab </a>
 +
    <a href = "#wetlab"> Wet Lab </a>
 +
    <a href = "#supervisors"> Supervisors </a>
 +
    <a href = "#slides"> Gallery </a>
 +
  </div>
  
  .single-content {
 
    position: relative;
 
    transition: .3s;
 
    cursor: pointer;
 
  }
 
  
  .single-content .text-content,
 
  .single-content:after{
 
    position: absolute;
 
    left: 20px;
 
    right: 20px;
 
  }
 
  
  .single-content:after{
 
    content: '';
 
    display: block;
 
    background: #2E2E2E;
 
    top: 0px;
 
    bottom: 0px;
 
    left: 0px;
 
    right: 0px;
 
    opacity: 0;
 
    transition: .4s;
 
    transition-timing-function: ease-out;
 
  }
 
  
  .single-content:hover:after{
 
    opacity: .4;
 
  }
 
  
   .text-content{
+
   <div id = "main-view">
    top: 40%;
+
    opacity: 0;
+
    z-index: 1;
+
    transition: .3s;
+
    text-align: center;
+
    color: #FFF;
+
  }
+
  
  .single-content:hover .text-content{
+
    <!--BANNER-->
     opacity: 1;
+
     <div class="banner-image">
    transition-delay: .3s;
+
      <div class="banner-text resp">
  }
+
        <h1 style="color: #F1C23F;
 +
      font-size: 3em; font-weight: 500; font-family: 'Public Sans', sans-serif; margin-top:25%;">THE TEAM</h1>
 +
      </div>
 +
    </div>
  
  .headers {
+
     <div class="d-flex justify-content-center headers" id = "drylab"> <h2> Dry Lab Team </h2> </div>
     padding-top: 50px;
+
  }
+
  
/*Banner styling section*/
 
  /* HEADER/BANNER */ body, html {
 
    height: 100%;
 
  }
 
  
/* The banner image */
+
    <div class = "d-flex justify-content-center">
 +
      <div class = "row main-teampage">
  
  .banner-image {
+
        <div class = "col-xs-3 main-pics">
    /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
+
          <a data-toggle = "modal" data-target = "#alexa_modal">
    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/a/a2/T--Calgary--Teamstairs-picture.jpeg");
+
            <div class = "single-content">
    /* Set a specific height */
+
              <img src = "https://static.igem.org/mediawiki/2020/a/a9/T--Calgary--alexa-img.jpeg" alt = "alexa" width = "200" height = "200">
    height: 65vh;
+
              <div class = "text-content">
    /* Position and center the image to scale nicely on all screens */
+
                <h4> Alexa Calkhoven </h4>
    background-position: center;
+
                <h6> Software Engineering </h6>
    background-repeat: no-repeat;
+
              </div>
    background-size: cover;
+
            </div>
    position: relative;
+
          </a>
    background-attachment: fixed;
+
        </div>
  }
+
  
/* Place text in the middle of the image */
+
        <div class = "col-xs-3 main-pics">
  .banner-text {
+
          <a data-toggle = "modal" data-target = "#andrew_modal">
    font-size: ;
+
            <div class = "single-content">
    font-weight: ;
+
              <img src = "https://static.igem.org/mediawiki/2020/2/27/T--Calgary--andrew-img.jpeg" alt = "andrew" width = "200" height = "200">
    color: ;
+
              <div class = "text-content">
    text-align: center;
+
                <h4> Andrew Symes </h4>
    position: absolute;
+
                <h6> Statistics </h6>
    left: 50%;
+
              </div>
    top: 50%;
+
            </div>
    transform: translate(-50%, -50%);
+
          </a>
  }
+
        </div>
  
.banner-text h1 {
+
        <div class = "col-xs-3 main-pics">
 +
          <a data-toggle = "modal" data-target = "#cedric_modal">
 +
            <div class = "single-content">
 +
              <img src = " https://static.igem.org/mediawiki/2020/1/15/T--Calgary--cedric-img.jpeg" alt = "cedric" width = "200" height = "200">
 +
              <div class = "text-content">
 +
                <h4> Cedric Acierto </h4>
 +
                <h6> Software Engineering </h6>
 +
              </div>
 +
            </div>
 +
          </a>
 +
        </div>
  
color: #F1C23F;
+
        <div class = "col-xs-3 main-pics">
font-size: 5em;
+
          <a data-toggle = "modal" data-target = "#randy_modal">
font-weight: 600;
+
            <div class = "single-content">
font-family: 'Public Sans', sans-serif;
+
              <img src = "https://static.igem.org/mediawiki/2020/4/44/T--Calgary--randy-img.png
margin-top:25%;
+
    " alt = "randy" width = "200" height = "200">
}
+
              <div class = "text-content">
 +
                <h4> Randy Moore </h4>
 +
                <h6> Electrical Engineering </h6>
 +
              </div>
 +
            </div>
 +
          </a>
 +
        </div>
  
/*Modal styling section*/
+
      </div>
 +
    </div>
  
  .modal-body {
+
     <br>
     background-color: #FFA600;
+
    <br>
  }
+
  
  .info {
+
     <!--WET LAB CONTAINERS-->
    position: relative;
+
     <div class="d-flex justify-content-center headers" id = "wetlab"> <h2> Wet Lab Team </h2> </div>
     background-color: #FFFFFF;
+
    margin-left: 2px;
+
    margin-right: 2px;
+
     margin-bottom: 5px;
+
  }
+
  
  .subproj {
+
      <div class="d-flex justify-content-sm-center">
    position: relative;
+
        <div class = "row main-teampage">
    background-color: #FFFFFF;
+
    margin-left: 2px;
+
    margin-right: 2px;
+
    margin-top: 0px;
+
    margin-bottom: 5px;
+
    justify-content: center;
+
  }
+
  
  .modal-pic {
+
          <div class = "col-xs-3 main-pics">
    padding: 10px;
+
            <a data-toggle = "modal" data-target = "#nimaya_modal">
    padding-bottom: 20px;
+
              <div class = "single-content">
    left: 50px;
+
                <img src = "https://static.igem.org/mediawiki/2020/2/22/T--Calgary--nimaya-img.png" alt = "nimaya" width = "200" height = "200">
  }
+
                <div class = "text-content">
 +
                  <h4> Nimaya <br> De Silva </h4>
 +
                  <h6> Health Sciences </h6>
 +
                </div>
 +
              </div>
 +
            </a>
 +
          </div>
  
  .md-row1 {
+
          <div class = "col-xs-3 main-pics">
    padding-top: 10px;
+
            <a data-toggle = "modal" data-target = "#simran_modal">
    padding-left: 30px;
+
              <div class = "single-content">
    height: 11%;
+
                <img src = "https://static.igem.org/mediawiki/2020/9/9f/T--Calgary--simran-img.jpeg" alt = "simran" width = "200" height = "200">
  }
+
                <div class = "text-content">
 +
                  <h4> Simran Sandhu </h4>
 +
                  <h6> Health Sciences </h6>
 +
                </div>
 +
              </div>
 +
            </a>
 +
          </div>
  
  .md-row2 {
+
          <div class = "col-xs-3 main-pics">
    padding-left: 30px;
+
            <a data-toggle = "modal" data-target = "#allison_modal">
    margin-top: 5px;
+
              <div class = "single-content">
  }
+
                <img src = "https://static.igem.org/mediawiki/2020/2/2e/T--Calgary--allison-img.png" alt = "allison" width = "200" height = "200">
 +
                <div class = "text-content">
 +
                  <h4> Allison Guthrie </h4>
 +
                  <h6> Plant Biology </h6>
 +
                </div>
 +
              </div>
 +
            </a>
 +
          </div>
  
  .md-row3 {
+
          <div class = "col-xs-3 main-pics">
     padding-left: 30px;
+
            <a data-toggle = "modal" data-target = "#micha_modal">
  }
+
              <div class = "single-content">
 +
                <img src = " https://static.igem.org/mediawiki/2020/9/9e/T--Calgary--micha-img.png
 +
     " alt = "micha" width = "200" height = "200">
 +
                <div class = "text-content">
 +
                  <h4> Michaella Atienza </h4>
 +
                  <h6> Plant Biology </h6>
 +
                </div>
 +
              </div>
 +
            </a>
 +
          </div>
  
  .md-row4 {
+
        </div>
    padding-top: 15px;
+
      </div>
    padding-left: 30px;
+
    color: #969696;
+
  }
+
  
  .md-row5 {
+
      <div class = "d-flex justify-content-sm-center">
    padding-left: 30px;
+
        <div class = "row main-teampage">
    color: #000000;
+
    font-size: 20px;
+
  }
+
  
  .md-row6 {
+
          <div class = "col-xs-4 main-pics">
    position: absolute;
+
            <a data-toggle = "modal" data-target = "#arshia_modal">
    padding-top: 10px;
+
              <div class = "single-content">
    padding-left: 30px;
+
                <img src = "https://static.igem.org/mediawiki/2020/a/a3/T--Calgary--arshia-img.png" alt = "arshia" width = "200" height = "200">
    padding-right: 10px;
+
                <div class = "text-content">
    width: 70%;
+
                  <h4> Arshia Mostoufi </h4>
    top: 60%;
+
                  <h6> Cellular Biology </h6>
  }
+
                </div>
 +
              </div>
 +
            </a>
 +
          </div>
  
  .desc {
+
          <div class = "col-xs-4 main-pics">
    background-color: #606060;
+
            <a data-toggle = "modal" data-target = "#sravya_modal">
    margin-left: 2px;
+
              <div class = "single-content">
    margin-right: 2px;
+
                <img src = "https://static.igem.org/mediawiki/2020/a/ae/T--Calgary--sravya-img.png" alt = "sravya" width = "200" height = "200">
    color: #FFFFFF;
+
                <div class = "text-content">
    border-radius: 5px;
+
                  <h4> Sravya Kakumanu </h4>
    padding-left: 2px;
+
                  <h6> Microbiology </h6>
    padding-right: 2px;
+
                </div>
  }
+
              </div>
 +
            </a>
 +
          </div>
  
  .title-row {
+
          <div class = "col-xs-4 main-pics">
    margin: 0 auto;
+
            <a data-toggle = "modal" data-target = "#anika_modal">
    padding-top: 20px;
+
              <div class = "single-content">
    height: 18%;
+
                <img src = "https://static.igem.org/mediawiki/2020/c/c5/T--Calgary--anika-img.png" alt = "anika" width = "200" height = "200">
  }
+
                <div class = "text-content">
 +
                  <h4> Anika Zaman </h4>
 +
                  <h6> Cellular Biology </h6>
 +
                </div>
 +
              </div>
 +
            </a>
 +
          </div>
  
  .proj-row {
+
        </div>
    padding-bottom: 10px;
+
      </div>
  }
+
  
  .subproj-box {
+
     <br>
     margin-bottom: 10px;
+
     <br>
     padding-bottom:10px;
+
  }
+
  
  /*Gallery styling section*/
+
     <!--SUPERVISOR CONTAINERS-->
  .slideshow-container {
+
     max-width: 600px;
+
    position: relative;
+
    margin: auto;
+
  }
+
  
  .mySlides {
+
     <div class="d-flex justify-content-center headers" id = "supervisors"> <h2> Supervisors </h2> </div>
     display: none;
+
    width: 600px;
+
  }
+
  
  .prev, .next {
+
      <div class = "d-flex justify-content-center">
    cursor: pointer;
+
        <div class = "row main-teampage">
    position: absolute;
+
    top: 50%;
+
    width: auto;
+
    margin-top: -22px;
+
    padding: 16px;
+
    color: #fbf6f3;
+
    font-weight: bold;
+
    font-size: 18px;
+
    transition: 0.6s ease;
+
    border-radius: 0 3px 3px 0;
+
    user-select: none;
+
  }
+
  
  .next {
+
          <div class = "col-xs-4 main-pics">
    right: 0;
+
            <a data-toggle = "modal" data-target = "#chris_modal">
    border-radius: 3px 0 0 3px;
+
              <div class = "single-content">
  }
+
                <img src = "https://static.igem.org/mediawiki/2020/f/f9/T--Calgary--chris-img.png" alt = "chris" width = "200" height = "200">
 +
                <div class = "text-content">
 +
                  <h4> Christian Emond </h4>
 +
                  <h6> Cellular Biology </h6>
 +
                </div>
 +
              </div>
 +
            </a>
 +
          </div>
  
  .prev:hover, .next:hover {
+
          <div class = "col-xs-4 main-pics">
    background-color: #423636;
+
            <a data-toggle = "modal" data-target = "#jadon_modal">
  }
+
              <div class = "single-content">
 +
                <img src = "https://static.igem.org/mediawiki/2020/2/26/T--Calgary--jadon-img.jpeg" alt = "jadon" width = "200" height = "200">
 +
                <div class = "text-content">
 +
                  <h4> Jadon Duby </h4>
 +
                  <h6> Mathematics </h6>
 +
                </div>
 +
              </div>
 +
            </a>
 +
          </div>
  
  .dot {
+
          <div class = "col-xs-4 main-pics">
    cursor: pointer;
+
            <a data-toggle = "modal" data-target = "#mac_modal">
    height: 15px;
+
              <div class = "single-content">
    width: 15px;
+
                <img src = "https://static.igem.org/mediawiki/2020/2/27/T--Calgary--mac.jpeg" alt = "mac" width = "200" height = "200">
    margin: 0 2px;
+
                <div class = "text-content">
    background-color: #bbb;
+
                  <h4> Mackenzie Sampson </h4>
    border-radius: 50%;
+
                  <h6> Electrical Engineering </h6>
    display: inline-block;
+
                </div>
    transition: background-color 0.6s ease;
+
              </div>
  }
+
            </a>
 +
          </div>
  
  .active, .dot:hover {
+
        </div>
    background-color: #423636;
+
      </div>
  }
+
  
  .fade {
+
      <div class = "d-flex justify-content-center">
    -webkit-animation-name: fade;
+
        <div class = "row main-teampage">
    -webkit-animation-duration: 1.5s;
+
    animation-name: fade;
+
    animation-duration: 1.5s;
+
  }
+
  
   @-webkit-keyframes fade {
+
          <div class = "col-xs-6 main-pics">
     from {
+
            <a data-toggle = "modal" data-target = "#dr_mayi_modal">
   opacity: 0.4;
+
              <div class = "single-content">
 +
                <img src = "https://static.igem.org/mediawiki/2020/f/f7/T--Calgary--dr_mayi-img.png" alt = "dr_mayi" width = "200" height = "200">
 +
                <div class = "text-content">
 +
                  <h5> Dr. Mayi Arcellana-Panlilio </h5>
 +
                </div>
 +
              </div>
 +
            </a>
 +
          </div>
 +
 
 +
          <div class = "col-xs-6 main-pics">
 +
            <a data-toggle = "modal" data-target = "#tian_modal">
 +
              <div class = "single-content">
 +
                <img src = "https://static.igem.org/mediawiki/2020/6/68/T--Calgary--tian-img.png" alt = "tian" width = "200" height = "200">
 +
                <div class = "text-content">
 +
                  <h4> Tian Zhao </h4>
 +
                  <h6> Biochemistry </h6>
 +
                </div>
 +
              </div>
 +
            </a>
 +
          </div>
 +
 
 +
        </div> <!--end tag for last row-->
 +
      </div>
 +
 
 +
 
 +
 
 +
    <!---MODALS---->
 +
      <!--Dry Lab Modals-->
 +
 
 +
    <!--Alexa's Modal-->
 +
    <div class="modal fade" id="alexa_modal" tabindex="-1" role="dialog" aria-labelledby="ModalCenterTitle" aria-hidden="true">   <!--EDITABLE-->
 +
      <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
 +
        <div class="modal-content">
 +
          <div class="modal-body">
 +
 
 +
            <div class = "row info">    <!--START COPY-->
 +
 
 +
              <div class = "col-xs-4 modal-pic">
 +
                <img src = "https://static.igem.org/mediawiki/2020/e/eb/T--Calgary--ncalexa.jpg" alt = "alexa modal img" width = "225px" height = "400px">    <!--EDITABLE-->
 +
              </div>
 +
 
 +
              <div class = "col-xs-8 modal-txt">
 +
 
 +
                <div class = "row md-row1"> <h1> Alexa Calkhoven </h1> </div> <!--EDITABLE-->
 +
                <div class = "row md-row2"> <h3> Dry Lab </h3> </div>  <!--EDITABLE-->
 +
                <div class = "row md-row3">
 +
                  <div class="desc"> Calm </div> <div class="desc"> Quiet </div> <div class="desc"> Knowledgeable </div>  <!--EDITABLE-->
 +
                </div>
 +
 
 +
                <div class = "row md-row4"> Major: </div>
 +
                <div class = "row md-row5"> Software Engineering </div> <!--EDITABLE-->
 +
                <div class = "row md-row4"> Year: </div>
 +
                <div class = "row md-row5"> Third </div> <!--EDITABLE-->
 +
 
 +
                <div class = "row md-row6"> <!--EDITABLE-->
 +
                  Watch out gamers, the best skribbl.io player is here!
 +
                  What got her into the exciting world of iGEM is the huge potential it has to help people, especially in the medical field.
 +
                  Being the resident wiki expert, Alexa offers great advice and solutions to the dry lab team when there are coding issues.
 +
                  She also takes initiative by taking great meeting notes for the team.
 +
                </div>
 +
 
 +
              </div>
 +
 
 +
            </div>
 +
 
 +
          </div>
 +
        </div>
 +
      </div>
 +
    </div>
 +
 
 +
    <!--Andrew's Modal-->
 +
    <div class="modal fade" id="andrew_modal" tabindex="-1" role="dialog" aria-labelledby="ModalCenterTitle" aria-hidden="true">
 +
      <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
 +
        <div class="modal-content">
 +
          <div class="modal-body">
 +
 
 +
            <div class = "row info">    <!--START COPY-->
 +
 
 +
              <div class = "col-xs-4 modal-pic">
 +
                <img src = "https://static.igem.org/mediawiki/2020/b/b9/T--Calgary--ncandrew.jpg" alt = "andrew modal img" width = "225px" height = "400px">  <!--EDITABLE-->
 +
              </div>
 +
 
 +
              <div class = "col-xs-8 modal-txt">
 +
 
 +
                <div class = "row md-row1"> <h1> Andrew Symes </h1> </div> <!--EDITABLE-->
 +
                <div class = "row md-row2"> <h3> Dry Lab </h3> </div>
 +
                <div class = "row md-row3">
 +
                  <div class="desc"> Sweet </div> <div class="desc"> Sensitive </div> <div class="desc"> Charismatic </div>  <!--EDITABLE-->
 +
                </div>
 +
 
 +
                <div class = "row md-row4"> Major: </div>
 +
                <div class = "row md-row5"> Statistics </div> <!--EDITABLE-->
 +
                <div class = "row md-row4"> Year: </div>
 +
                <div class = "row md-row5"> Fourth (?) </div> <!--EDITABLE-->
 +
 
 +
                <div class = "row md-row6"> <!--EDITABLE-->
 +
                  Andrew is the team’s expert in protein modelling.
 +
                  His deadpan, straight-faced humour lightens up everyone’s mood even on the most stressful days.
 +
                  He keeps the team morale up with his cheery attitude and off-the-charts optimism.
 +
                  He speaks English, ASL, and just enough French to order a bagel.
 +
                  In his free time, he is a runner, swimmer, and an equestrian.
 +
                </div>
 +
 
 +
              </div>
 +
 
 +
            </div>
 +
 
 +
          </div>
 +
        </div>
 +
      </div>
 +
     </div>
 +
 
 +
    <!--Cedric's Modal-->
 +
    <div class="modal fade" id="cedric_modal" tabindex="-1" role="dialog" aria-labelledby="ModalCenterTitle" aria-hidden="true">
 +
      <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
 +
        <div class="modal-content">
 +
          <div class="modal-body">
 +
 
 +
            <div class = "row info">    <!--START COPY-->
 +
 
 +
              <div class = "col-xs-4 modal-pic">
 +
                <img src = "https://static.igem.org/mediawiki/2020/6/6a/T--Calgary--nccedric.jpg" alt = "cedric modal img" width = "225px" height = "400px">
 +
              </div>
 +
 
 +
              <div class = "col-xs-8 modal-txt">
 +
 
 +
                <div class = "row md-row1"> <h1> Cedric Acierto </h1> </div> <!--EDITABLE-->
 +
                <div class = "row md-row2"> <h3> Dry Lab </h3> </div>  <!--EDITABLE-->
 +
                <div class = "row md-row3">
 +
                  <div class="desc"> Witty </div> <div class="desc"> Dedicated </div> <div class="desc"> Friendly </div>  <!--EDITABLE-->
 +
                </div>
 +
 
 +
                <div class = "row md-row4"> Major: </div>
 +
                <div class = "row md-row5"> Software Engineering </div> <!--EDITABLE-->
 +
                <div class = "row md-row4"> Year: </div>
 +
                <div class = "row md-row5"> Second </div> <!--EDITABLE-->
 +
 
 +
                <div class = "row md-row6"> <!--EDITABLE-->
 +
                  When you are looking for a laugh, or someone able to run a 100m in 12.8 seconds then Cedric is your man.
 +
                  Along with a crazy workload and running schedule Cedric enjoys listening to vintage songs, with a real and undying love for The Beatles.
 +
                  In the end though there is no way our team would be anywhere near as happy or productive as we are without our Cedric.
 +
                </div>
 +
 
 +
              </div>
 +
 
 +
            </div>
 +
 
 +
          </div>
 +
        </div>
 +
      </div>
 +
    </div>
 +
 
 +
    <!--Randy's Modal-->
 +
    <div class="modal fade" id="randy_modal" tabindex="-1" role="dialog" aria-labelledby="ModalCenterTitle" aria-hidden="true">  <!--EDITABLE-->
 +
      <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
 +
        <div class="modal-content">
 +
          <div class="modal-body">
 +
 
 +
            <div class = "row info">
 +
 
 +
              <div class = "col-xs-4 modal-pic">
 +
                <img src = "https://static.igem.org/mediawiki/2020/6/6e/T--Calgary--ncrandy.jpg" alt = "randy modal img" width = "225px" height = "400px">    <!--EDITABLE-->
 +
              </div>
 +
 
 +
              <div class = "col-xs-8 modal-txt">
 +
 
 +
                <div class = "row md-row1"> <h1> Randy Moore </h1> </div> <!--EDITABLE-->
 +
                <div class = "row md-row2"> <h3> Dry Lab </h3> </div>  <!--EDITABLE-->
 +
                <div class = "row md-row3">
 +
                  <div class="desc"> Approachable </div> <div class="desc"> Confident </div> <div class="desc"> Enthusiastic </div>  <!--EDITABLE-->
 +
                </div>
 +
 
 +
                <div class = "row md-row4"> Major: </div>
 +
                <div class = "row md-row5"> Electrical Engineering </div> <!--EDITABLE-->
 +
                <div class = "row md-row4"> Year: </div>
 +
                <div class = "row md-row5"> Third </div> <!--EDITABLE-->
 +
 
 +
                <div class = "row md-row6"> <!--EDITABLE-->
 +
                  He may be scared of pandas, but he is never afraid to take on any challenge!
 +
                  Randy possesses a great voice to use in a post-apocalyptic movie trailer.
 +
                  He likes to spend his free time in the mountains, playing music, in a game of soccer, or working on high-powered rockets.
 +
                  He has always believed that anything worth doing, is worth doing right.
 +
                </div>
 +
 
 +
              </div>
 +
 
 +
            </div>
 +
 
 +
          </div>
 +
        </div>
 +
      </div>
 +
    </div>    <!--END COPY-->
 +
 
 +
      <!--Wet Lab Modals-->
 +
 
 +
    <!--Nimaya's Modal-->
 +
    <div class="modal fade" id="nimaya_modal" tabindex="-1" role="dialog" aria-labelledby="ModalCenterTitle" aria-hidden="true">  <!--EDITABLE-->
 +
      <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
 +
        <div class="modal-content">
 +
          <div class="modal-body">
 +
 
 +
            <div class = "row info">
 +
 
 +
              <div class = "col-xs-4 modal-pic">
 +
                <img src = "https://static.igem.org/mediawiki/2020/8/8d/T--Calgary--ncnimaya.jpg" alt = "nimaya modal img" width = "225px" height = "400px">    <!--EDITABLE-->
 +
              </div>
 +
 
 +
              <div class = "col-xs-8 modal-txt">
 +
 
 +
                <div class = "row md-row1"> <h1> Nimaya De Silva </h1> </div> <!--EDITABLE-->
 +
                <div class = "row md-row2"> <h3> Wet Lab </h3> </div>  <!--EDITABLE-->
 +
                <div class = "row md-row3">
 +
                  <div class="desc"> Skillful </div> <div class="desc"> Wise </div> <div class="desc"> Kind </div>  <!--EDITABLE-->
 +
                </div>
 +
 
 +
                <div class = "row md-row4"> Major: </div>
 +
                <div class = "row md-row5"> Health Sciences </div> <!--EDITABLE-->
 +
                <div class = "row md-row4"> Year: </div>
 +
                <div class = "row md-row5"> Third </div> <!--EDITABLE-->
 +
 
 +
                <div class = "row md-row6"> <!--EDITABLE-->
 +
                  Everything she says is worth saying and she does not waste words.
 +
                  Nimaya first learned of iGEM in high school, when she heard about the Lethbridge high school iGEM team.
 +
                  She was interested in getting hands-on laboratory experience before entering university.
 +
                  She also gives great advice and guides the team in the right direction.
 +
                </div>
 +
 
 +
              </div>
 +
 
 +
            </div>
 +
 
 +
          </div>
 +
        </div>
 +
      </div>
 +
    </div>    <!--END COPY-->
 +
 
 +
    <!--Simran's Modal-->
 +
    <div class="modal fade" id="simran_modal" tabindex="-1" role="dialog" aria-labelledby="ModalCenterTitle" aria-hidden="true">  <!--EDITABLE-->
 +
      <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
 +
        <div class="modal-content">
 +
          <div class="modal-body">
 +
 
 +
            <div class = "row info">
 +
 
 +
              <div class = "col-xs-4 modal-pic">
 +
                <img src = "https://static.igem.org/mediawiki/2020/2/2e/T--Calgary--ncsimran.jpg" alt = "simran modal img" width = "225px" height = "400px">    <!--EDITABLE-->
 +
              </div>
 +
 
 +
              <div class = "col-xs-8 modal-txt">
 +
 
 +
                <div class = "row md-row1"> <h1> Simran Sandhu </h1> </div> <!--EDITABLE-->
 +
                <div class = "row md-row2"> <h3> Wet Lab </h3> </div>  <!--EDITABLE-->
 +
                <div class = "row md-row3">
 +
                  <div class="desc"> Organized </div> <div class="desc"> Intelligent </div> <div class="desc"> Initiative </div>  <!--EDITABLE-->
 +
                </div>
 +
 
 +
                <div class = "row md-row4"> Major: </div>
 +
                <div class = "row md-row5"> Health Sciences </div> <!--EDITABLE-->
 +
                <div class = "row md-row4"> Year: </div>
 +
                <div class = "row md-row5"> Second </div> <!--EDITABLE-->
 +
 
 +
                <div class = "row md-row6"> <!--EDITABLE-->
 +
                  Her eloquence in debates will crush any opponents who dare stand in her way.
 +
                  She is a great leader with great attention to detail.
 +
                  Simran helped solidify the vision for the project and continuously offers support in many areas of the project.
 +
                  She believes that 1% growth each day can slowly build up to significant change, and this motivates her to work hard.
 +
                </div>
 +
 
 +
              </div>
 +
 
 +
            </div>
 +
 
 +
          </div>
 +
        </div>
 +
      </div>
 +
    </div>    <!--END COPY-->
 +
 
 +
    <!--Allison's Modal-->
 +
    <div class="modal fade" id="allison_modal" tabindex="-1" role="dialog" aria-labelledby="ModalCenterTitle" aria-hidden="true">  <!--EDITABLE-->
 +
      <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
 +
        <div class="modal-content">
 +
          <div class="modal-body">
 +
 
 +
            <div class = "row info">
 +
 
 +
              <div class = "col-xs-4 modal-pic">
 +
                <img src = "https://static.igem.org/mediawiki/2020/8/87/T--Calgary--ncallison.jpg" alt = "allison modal img" width = "225px" height = "400px">    <!--EDITABLE-->
 +
              </div>
 +
 
 +
              <div class = "col-xs-8 modal-txt">
 +
 
 +
                <div class = "row md-row1"> <h1> Allison Guthrie </h1> </div> <!--EDITABLE-->
 +
                <div class = "row md-row2"> <h3> Wet Lab </h3> </div>  <!--EDITABLE-->
 +
                <div class = "row md-row3">
 +
                  <div class="desc"> Empathetic </div> <div class="desc"> Enthusiastic </div> <div class="desc"> Inspired </div>  <!--EDITABLE-->
 +
                </div>
 +
 
 +
                <div class = "row md-row4"> Major: </div>
 +
                <div class = "row md-row5"> Plant Biology </div> <!--EDITABLE-->
 +
                <div class = "row md-row4"> Year: </div>
 +
                <div class = "row md-row5"> Second </div> <!--EDITABLE-->
 +
 
 +
                <div class = "row md-row6"> <!--EDITABLE-->
 +
                  Her dedication and passion for the project drives the team to greater heights.
 +
                  She is the team’s social butterfly and always has a lively and friendly attitude evident to everyone in the team.
 +
                  Synthetic biology is her dream and she loves to apply her knowledge into real life.
 +
                  Outside of iGEM, Allison also takes interests in anthropology, writing, music, and painting.
 +
                </div>
 +
 
 +
              </div>
 +
 
 +
            </div>
 +
 
 +
          </div>
 +
        </div>
 +
      </div>
 +
    </div>    <!--END COPY-->
 +
 
 +
 
 +
    <!--Micha's Modal-->
 +
    <div class="modal fade" id="micha_modal" tabindex="-1" role="dialog" aria-labelledby="ModalCenterTitle" aria-hidden="true">  <!--EDITABLE-->
 +
      <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
 +
        <div class="modal-content">
 +
          <div class="modal-body">
 +
 
 +
            <div class = "row info">
 +
 
 +
              <div class = "col-xs-4 modal-pic">
 +
                <img src = "https://static.igem.org/mediawiki/2020/2/23/T--Calgary--ncmicha.jpg" alt = "micha modal img" width = "225px" height = "400px">    <!--EDITABLE-->
 +
              </div>
 +
 
 +
              <div class = "col-xs-8 modal-txt">
 +
 
 +
                <div class = "row md-row1"> <h1> Michaella Atienza </h1> </div> <!--EDITABLE-->
 +
                <div class = "row md-row2"> <h3> Wet Lab </h3> </div>  <!--EDITABLE-->
 +
                <div class = "row md-row3">
 +
                  <div class="desc"> Kind </div> <div class="desc"> Warm-hearted </div> <div class="desc"> Funny </div>  <!--EDITABLE-->
 +
                </div>
 +
 
 +
                <div class = "row md-row4"> Major: </div>
 +
                <div class = "row md-row5"> Plant Biology </div> <!--EDITABLE-->
 +
                <div class = "row md-row4"> Year: </div>
 +
                <div class = "row md-row5"> Fourth(?) </div> <!--EDITABLE-->
 +
 
 +
                <div class = "row md-row6"> <!--EDITABLE-->
 +
                  Whether you need help remembering that one scene from the first Shrek movie or need someone to keep everyone in check,
 +
                  Micha is always ready to help out! She constantly brings humour to the team with her fun stories.
 +
                  As a plant biology student, she aims to make plant biotechnology a widely recognized field of science.
 +
                </div>
 +
 
 +
              </div>
 +
 
 +
            </div>
 +
 
 +
          </div>
 +
        </div>
 +
      </div>
 +
    </div>   <!--END COPY-->
 +
 
 +
    <!--Arshia's Modal-->
 +
    <div class="modal fade" id="arshia_modal" tabindex="-1" role="dialog" aria-labelledby="ModalCenterTitle" aria-hidden="true">  <!--EDITABLE-->
 +
      <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
 +
        <div class="modal-content">
 +
          <div class="modal-body">
 +
 
 +
            <div class = "row info">
 +
 
 +
              <div class = "col-xs-4 modal-pic">
 +
                <img src = "https://static.igem.org/mediawiki/2020/c/cc/T--Calgary--ncarshia.jpg" alt = "arshia modal img" width = "225px" height = "400px">    <!--EDITABLE-->
 +
              </div>
 +
 
 +
              <div class = "col-xs-8 modal-txt">
 +
 
 +
                <div class = "row md-row1"> <h1> Arshia Mostoufi </h1> </div> <!--EDITABLE-->
 +
                <div class = "row md-row2"> <h3> Wet Lab </h3> </div>  <!--EDITABLE-->
 +
                <div class = "row md-row3">
 +
                  <div class="desc"> Analytical </div> <div class="desc"> Funny </div> <div class="desc"> Creative </div>  <!--EDITABLE-->
 +
                </div>
 +
 
 +
                <div class = "row md-row4"> Major: </div>
 +
                <div class = "row md-row5"> Cellular Biology </div> <!--EDITABLE-->
 +
                <div class = "row md-row4"> Year: </div>
 +
                <div class = "row md-row5"> Third </div> <!--EDITABLE-->
 +
 
 +
                <div class = "row md-row6"> <!--EDITABLE-->
 +
                  He is a quiet genius.
 +
                  What attracted him to the world of synthetic biology is its limitless applications and great potential in solving real world problems.
 +
                  Arshia always knows what to do and sticks by his work without help or support.
 +
                  Arshia enjoys playing video games, playing and watching soccer, and watching movies in his free time.
 +
                </div>
 +
 
 +
              </div>
 +
 
 +
            </div>
 +
 
 +
          </div>
 +
        </div>
 +
      </div>
 +
    </div>    <!--END COPY-->
 +
 
 +
    <!--Sravya's Modal-->
 +
    <div class="modal fade" id="sravya_modal" tabindex="-1" role="dialog" aria-labelledby="ModalCenterTitle" aria-hidden="true">  <!--EDITABLE-->
 +
      <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
 +
        <div class="modal-content">
 +
          <div class="modal-body">
 +
 
 +
            <div class = "row info">
 +
 
 +
              <div class = "col-xs-4 modal-pic">
 +
                <img src = "https://static.igem.org/mediawiki/2020/d/dc/T--Calgary--ncsravya.jpg" alt = "sravya modal img" width = "225px" height = "400px">    <!--EDITABLE-->
 +
              </div>
 +
 
 +
              <div class = "col-xs-8 modal-txt">
 +
 
 +
                <div class = "row md-row1"> <h1> Sravya Kakumanu </h1> </div> <!--EDITABLE-->
 +
                <div class = "row md-row2"> <h3> Wet Lab </h3> </div>  <!--EDITABLE-->
 +
                <div class = "row md-row3">
 +
                  <div class="desc"> Born Leader </div> <div class="desc"> Brilliant </div> <div class="desc"> Rational </div>  <!--EDITABLE-->
 +
                </div>
 +
 
 +
                <div class = "row md-row4"> Major: </div>
 +
                <div class = "row md-row5"> Microbiology </div> <!--EDITABLE-->
 +
                <div class = "row md-row4"> Year: </div>
 +
                <div class = "row md-row5"> Fourth </div> <!--EDITABLE-->
 +
 
 +
                <div class = "row md-row6"> <!--EDITABLE-->
 +
                  She takes up leadership while respecting and taking into consideration everyone’s ideas.
 +
                  She is also a highly talented pianist and artist.
 +
                  She once won first place in a painting contest with professional artists!
 +
                  Quite an adventurer, she has travelled to at least 24 countries across 4 continents.
 +
                  She can speak English, Telugu, and understands Hindi pretty well.
 +
                </div>
 +
 
 +
              </div>
 +
 
 +
            </div>
 +
 
 +
          </div>
 +
        </div>
 +
      </div>
 +
    </div>    <!--END COPY-->
 +
 
 +
    <!--Anika's Modal-->
 +
    <div class="modal fade" id="anika_modal" tabindex="-1" role="dialog" aria-labelledby="ModalCenterTitle" aria-hidden="true">  <!--EDITABLE-->
 +
      <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
 +
        <div class="modal-content">
 +
          <div class="modal-body">
 +
 
 +
            <div class = "row info">
 +
 
 +
              <div class = "col-xs-4 modal-pic">
 +
                <img src = "https://static.igem.org/mediawiki/2020/2/2f/T--Calgary--ncanika.jpg" alt = "anika modal img" width = "225px" height = "400px">    <!--EDITABLE-->
 +
              </div>
 +
 
 +
              <div class = "col-xs-8 modal-txt">
 +
 
 +
                <div class = "row md-row1"> <h1> Anika Zaman </h1> </div> <!--EDITABLE-->
 +
                <div class = "row md-row2"> <h3> Wet Lab </h3> </div>  <!--EDITABLE-->
 +
                <div class = "row md-row3">
 +
                  <div class="desc"> Enthusiastic </div> <div class="desc"> Welcoming </div> <div class="desc"> Bubbly </div>  <!--EDITABLE-->
 +
                </div>
 +
 
 +
                <div class = "row md-row4"> Major: </div>
 +
                <div class = "row md-row5"> Cellular Biology </div> <!--EDITABLE-->
 +
                <div class = "row md-row4"> Year: </div>
 +
                <div class = "row md-row5"> Third </div> <!--EDITABLE-->
 +
 
 +
                <div class = "row md-row6"> <!--EDITABLE-->
 +
                  She’s the bubbliest person you’ll ever meet.
 +
                  She also increases the team’s collective average cheerfulness by three degrees.
 +
                  Anika likes to drive around and discover new places.
 +
                  When she heard about last year’s project on the green seed problem, Anika did some research on synthetic biology and the team itself.
 +
                  The rest, as they say, is history.
 +
                </div>
 +
 
 +
              </div>
 +
 
 +
            </div>
 +
 
 +
          </div>
 +
        </div>
 +
      </div>
 +
    </div>    <!--END COPY-->
 +
 
 +
    <!--Chris's Modal-->
 +
    <div class="modal fade" id="chris_modal" tabindex="-1" role="dialog" aria-labelledby="ModalCenterTitle" aria-hidden="true">  <!--EDITABLE-->
 +
      <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
 +
        <div class="modal-content">
 +
          <div class="modal-body">
 +
 
 +
            <div class = "row info">
 +
 
 +
              <div class = "col-xs-4 modal-pic">
 +
                <img src = "https://static.igem.org/mediawiki/2020/3/3b/T--Calgary--ncchris.jpg" alt = "chris modal img" width = "225px" height = "400px">    <!--EDITABLE-->
 +
              </div>
 +
 
 +
              <div class = "col-xs-8 modal-txt">
 +
 
 +
                <div class = "row md-row1"> <h1> Christian Emond </h1> </div> <!--EDITABLE-->
 +
                <div class = "row md-row2"> <h3> Research Assistant </h3> </div>  <!--EDITABLE-->
 +
                <div class = "row md-row3">
 +
                  <div class="desc"> Sweet </div> <div class="desc"> Trustworthy </div> <div class="desc"> Wise </div>  <!--EDITABLE-->
 +
                </div>
 +
 
 +
                <div class = "row md-row4"> Degree: </div>
 +
                <div class = "row md-row5"> BSc in Cellular, Molecular, and Microbial Biology(?) </div> <!--EDITABLE-->
 +
 
 +
 
 +
                <div class = "row md-row6"> <!--EDITABLE-->
 +
                  He is the team’s deliverer of wisdom.
 +
                  Chris got into synthetic biology to fulfill a desire to use biology to disrupt industry standards that would create real solutions for real people.
 +
                  Chris continues to support others and maintain a compassionate and kind personality in the face of adversity.
 +
                  His motivation to work hard in life is his constant desire to be better.
 +
 
 +
                </div>
 +
 
 +
              </div>
 +
 
 +
            </div>
 +
 
 +
          </div>
 +
        </div>
 +
      </div>
 +
    </div>    <!--END COPY-->
 +
 
 +
    <!--Jadon's Modal-->
 +
    <div class="modal fade" id="jadon_modal" tabindex="-1" role="dialog" aria-labelledby="ModalCenterTitle" aria-hidden="true">  <!--EDITABLE-->
 +
      <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
 +
        <div class="modal-content">
 +
          <div class="modal-body">
 +
 
 +
            <div class = "row info">
 +
 
 +
              <div class = "col-xs-4 modal-pic">
 +
                <img src = "https://static.igem.org/mediawiki/2020/2/2c/T--Calgary--modal_profile.png" alt = "jadon modal img" width = "225px" height = "400px">    <!--EDITABLE-->
 +
              </div>
 +
 
 +
              <div class = "col-xs-8 modal-txt">
 +
 
 +
                <div class = "row md-row1"> <h1> Jadon Duby </h1> </div> <!--EDITABLE-->
 +
                <div class = "row md-row2"> <h3> Supervisor </h3> </div>  <!--EDITABLE-->
 +
                <div class = "row md-row3">
 +
                  <div class="desc"> Friendly </div> <div class="desc"> Helpful </div> <div class="desc"> Does Great Backflips </div>  <!--EDITABLE-->
 +
                </div>
 +
 
 +
                <div class = "row md-row4"> Major: </div>
 +
                <div class = "row md-row5"> Mathematics </div> <!--EDITABLE-->
 +
                <div class = "row md-row4"> Year: </div>
 +
                <div class = "row md-row5"> Fourth(?) </div> <!--EDITABLE-->
 +
 
 +
                <div class = "row md-row6"> <!--EDITABLE-->
 +
                  He is a very talented gymnast.
 +
                  He has been a great help to the wiki development team and overall loves to collaborate on projects.
 +
                  He is always willing to learn and is the go-to person for help with mathematics.
 +
                  He is always open to opportunity. His hobbies include growing succulents, playing banjo, and snowboarding.
 +
                </div>
 +
 
 +
              </div>
 +
 
 +
            </div>
 +
 
 +
          </div>
 +
        </div>
 +
      </div>
 +
    </div>    <!--END COPY-->
 +
 
 +
    <!--Mac's Modal-->
 +
    <div class="modal fade" id="mac_modal" tabindex="-1" role="dialog" aria-labelledby="ModalCenterTitle" aria-hidden="true">  <!--EDITABLE-->
 +
      <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
 +
        <div class="modal-content">
 +
          <div class="modal-body">
 +
 
 +
            <div class = "row info">
 +
 
 +
              <div class = "col-xs-4 modal-pic">
 +
                <img src = "https://static.igem.org/mediawiki/2020/c/cd/T--Calgary--ncmac.jpg" alt = "mac modal img" width = "225px" height = "400px">    <!--EDITABLE-->
 +
              </div>
 +
 
 +
              <div class = "col-xs-8 modal-txt">
 +
 
 +
                <div class = "row md-row1"> <h1> Mackenzie Sampson </h1> </div> <!--EDITABLE-->
 +
                <div class = "row md-row2"> <h3> Supervisor </h3> </div>  <!--EDITABLE-->
 +
                <div class = "row md-row3">
 +
                  <div class="desc"> Risk-taker </div> <div class="desc"> Visionary </div> <div class="desc"> Cheerful </div>  <!--EDITABLE-->
 +
                </div>
 +
 
 +
                <div class = "row md-row4"> Major: </div>
 +
                <div class = "row md-row5"> Electrical Engineering </div> <!--EDITABLE-->
 +
                <div class = "row md-row4"> Year: </div>
 +
                <div class = "row md-row5"> First </div> <!--EDITABLE-->
 +
 
 +
                <div class = "row md-row6"> <!--EDITABLE-->
 +
                  Tinkerer of all things inanimate, he is the team’s go-to guy for hardware ideas.
 +
                  Mac is also working towards a career in human augmentation.
 +
                  He has been actively working on keeping the team morale high by hosting fun team social events online.
 +
                  Mac has a constant drive to push the boundaries of accepted ideas and wants to challenge what people think is possible.
 +
                </div>
 +
 
 +
              </div>
 +
 
 +
            </div>
 +
 
 +
          </div>
 +
        </div>
 +
      </div>
 +
    </div>    <!--END COPY-->
 +
 
 +
    <!--Dr. Mayi's Modal-->
 +
    <div class="modal fade" id="dr_mayi_modal" tabindex="-1" role="dialog" aria-labelledby="ModalCenterTitle" aria-hidden="true">  <!--EDITABLE-->
 +
      <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
 +
        <div class="modal-content">
 +
          <div class="modal-body">
 +
 
 +
            <div class = "row info">
 +
 
 +
              <div class = "col-xs-4 modal-pic">
 +
                <img src = "https://static.igem.org/mediawiki/2020/2/2a/T--Calgary--ncdrmayi.png" alt = "mac modal img" width = "225px" height = "400px">    <!--EDITABLE-->
 +
              </div>
 +
 
 +
              <div class = "col-xs-8 modal-txt">
 +
 
 +
                <div class = "row md-row1"> <h1> Dr. Mayi Arcellana-Panlilio </h1> </div> <!--EDITABLE-->
 +
                <div class = "row md-row2"> <h3> Supervisor </h3> </div>  <!--EDITABLE-->
 +
                <div class = "row md-row3">
 +
                  <div class="desc"> Gentle </div> <div class="desc"> Caring </div> <div class="desc"> Motherly </div>  <!--EDITABLE-->
 +
                </div>
 +
 
 +
                <div class = "row md-row4"> Field: </div>
 +
                <div class = "row md-row5"> Biochemistry and Molecular Biology </div> <!--EDITABLE-->
 +
                <div class = "row md-row4">  </div>
 +
                <div class = "row md-row5">  </div> <!--EDITABLE-->
 +
 
 +
                <div class = "row md-row6"> <!--EDITABLE-->
 +
                  Kind, reassuring, and a total sweetheart. Brilliant but never intimidating.
 +
                  Dr Mayi has been involved in fields like neural stem cell research, cancer biology, and functional genomics.
 +
                  She is always there to support and make sure that the team is on track.
 +
                  She is someone that everyone looks up to and adores. Our iGEM team would not be the same without Dr Mayi.
 +
                </div>
 +
 
 +
              </div>
 +
 
 +
            </div>
 +
 
 +
          </div>
 +
        </div>
 +
      </div>
 +
    </div>    <!--END COPY-->
 +
 
 +
    <!--Tian's Modal-->
 +
    <div class = "modal fade" id = "tian_modal" tabindex = "-1" role = "dialog" aria-labelledby = "ModalCenterTitle" aria-hidden = "true">
 +
      <div class = "modal-dialog modal-dialog-centered modal-lg" role = "document">
 +
        <div class = "modal-content">
 +
          <div class = "modal-body">
 +
            <div class = "row info">
 +
 
 +
              <div class = "col-xs-4 modal-pic">
 +
                <img src = "https://static.igem.org/mediawiki/2020/1/1f/T--Calgary--nctian.png" alt = "mac modal img" width = "225px" height = "400px">    <!--EDITABLE-->
 +
              </div>
 +
 
 +
              <div class = "col-xs-8 modal-txt">
 +
 
 +
                <div class = "row md-row1"> <h1> Tian Zhao </h1> </div> <!--EDITABLE-->
 +
                <div class = "row md-row2"> <h3> Research Assistant </h3> </div>  <!--EDITABLE-->
 +
                <div class = "row md-row3">
 +
                  <div class="desc"> Resilient </div> <div class="desc"> Encouraging </div> <div class="desc"> Helpful </div>  <!--EDITABLE-->
 +
                </div>
 +
 
 +
                <div class = "row md-row4"> Field: </div>
 +
                <div class = "row md-row5"> Biochemistry and Molecular Biology </div> <!--EDITABLE-->
 +
                <div class = "row md-row4">  </div>
 +
                <div class = "row md-row5">  </div> <!--EDITABLE-->
 +
 
 +
                <div class = "row md-row6"> <!--EDITABLE-->
 +
                  He is always there to answer questions and explain concepts when students do not understand.
 +
                  He gives great advice and heads up for when the team is on the wrong track.
 +
                  His research focuses on the study of mitochondrial function in the context of mitochondrial disease.
 +
                  Tian likes climbing and is involved in a non-profit that offers indoor climbing for kids with special needs.
 +
                </div>
 +
 
 +
              </div>
 +
 
 +
            </div>
 +
          </div>
 +
        </div>
 +
      </div>
 +
    </div>
 +
 
 +
    <!--END OF MODALS-->
 +
    <!--nice-->
 +
 
 +
    <!--Start of Gallery-->
 +
    <br>
 +
    <br>
 +
    <div class="d-flex justify-content-center headers" id = "slides"> <h2> Gallery </h2> </div>
 +
 
 +
    <div class = "slideshow-container justify-content-center">
 +
 
 +
 
 +
      <img class = "mySlides" src = "https://static.igem.org/mediawiki/2020/d/de/T--Calgary--gallerypic1.jpg" alt = "gallery image">
 +
      <img class = "mySlides" src = "https://static.igem.org/mediawiki/2020/3/38/T--Calgary--gallerypic2.jpg" alt = "gallery image">
 +
      <img class = "mySlides" src = "https://static.igem.org/mediawiki/2020/a/ac/T--Calgary--gallerypic3.jpg" alt = "gallery image">
 +
      <img class = "mySlides" src = "https://static.igem.org/mediawiki/2020/2/23/T--Calgary--gallerypic4.jpg" alt = "gallery image">
 +
      <img class = "mySlides" src = "https://static.igem.org/mediawiki/2020/a/a8/T--Calgary--gallerypic5.jpg" alt = "gallery image">
 +
      <img class = "mySlides" src = "https://static.igem.org/mediawiki/2020/4/47/T--Calgary--gallerypic6.jpg" alt = "gallery image">
 +
      <img class = "mySlides" src = "https://static.igem.org/mediawiki/2020/b/b0/T--Calgary--gallerypic7.jpg" alt = "gallery image">
 +
      <img class = "mySlides" src = "https://static.igem.org/mediawiki/2020/7/77/T--Calgary--gallerypic8.jpg" alt = "gallery image">
 +
      <img class = "mySlides" src = "https://static.igem.org/mediawiki/2020/3/32/T--Calgary--gallerypic9.jpg" alt = "gallery image">
 +
      <img class = "mySlides" src = "https://static.igem.org/mediawiki/2020/8/80/T--Calgary--gallerypic10.jpg" alt = "gallery image">
 +
      <img class = "mySlides" src = "https://static.igem.org/mediawiki/2020/d/d1/T--Calgary--Team_picture.jpeg" alt = "gallery image">
 +
      <img class = "mySlides" src = "https://static.igem.org/mediawiki/2020/5/5e/T--Calgary--gallerypic11.jpg" alt = "gallery image">
 +
      <img class = "mySlides" src = "https://static.igem.org/mediawiki/2020/c/c8/T--Calgary--gallerypic12.jpg" alt = "gallery image">
 +
      <img class = "mySlides" src = "https://static.igem.org/mediawiki/2020/7/7b/T--Calgary--gallerypic13.jpg" alt = "gallery image">
 +
      <img class = "mySlides" src = "https://static.igem.org/mediawiki/2020/0/06/T--Calgary--gallerypic14.jpg" alt = "gallery image">
 +
      <img class = "mySlides" src = "https://static.igem.org/mediawiki/2020/f/fd/T--Calgary--gallerypic15.jpg" alt = "gallery image">
 +
      <img class = "mySlides" src = "https://static.igem.org/mediawiki/2020/5/5f/T--Calgary--gallerypic16.jpg" alt = "gallery image">
 +
      <img class = "mySlides" src = "https://static.igem.org/mediawiki/2020/e/ef/T--Calgary--gallerypic17.jpg" alt = "gallery image">
 +
      <img class = "mySlides" src = "https://static.igem.org/mediawiki/2020/3/31/T--Calgary--gallerypic18.jpg" alt = "gallery image">
 +
      <img class = "mySlides" src = "https://static.igem.org/mediawiki/2020/4/49/T--Calgary--gallerypic19.jpg" alt = "gallery image">
 +
      <img class = "mySlides" src = "https://static.igem.org/mediawiki/2020/4/45/T--Calgary--gallerypic20.jpg" alt = "gallery image">
 +
      <img class = "mySlides" src = "https://static.igem.org/mediawiki/2020/9/9e/T--Calgary--gallerypic21.jpg" alt = "gallery image">
 +
      <img class = "mySlides" src = "https://static.igem.org/mediawiki/2020/2/25/T--Calgary--gallerypic22.jpg" alt = "gallery image">
 +
      <img class = "mySlides" src = "https://static.igem.org/mediawiki/2020/5/57/T--Calgary--gallerypic23.jpg" alt = "gallery image">
 +
      <img class = "mySlides" src = "https://static.igem.org/mediawiki/2020/6/6e/T--Calgary--gallerypic24.jpg" alt = "gallery image">
 +
      <img class = "mySlides" src = "https://static.igem.org/mediawiki/2020/a/a7/T--Calgary--gallerypic25.jpg" alt = "gallery image">
 +
      <img class = "mySlides" src = "https://static.igem.org/mediawiki/2020/b/b9/T--Calgary--gallerypic26.jpg" alt = "gallery image">
 +
      <img class = "mySlides" src = "https://static.igem.org/mediawiki/2020/b/b5/T--Calgary--themplates.jpg" alt = "gallery image">
 +
      <img class = "mySlides" src = "https://static.igem.org/mediawiki/2020/1/18/T--Calgary--gallerypic27.jpg" alt = "gallery image">
 +
      <img class = "mySlides" src = "https://static.igem.org/mediawiki/2020/0/0e/T--Calgary--gallerypic28.jpg" alt = "gallery image">
 +
 
 +
 
 +
      <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
 +
      <a class="next" onclick="plusSlides(1)">&#10095;</a>
 +
 
 +
 
 +
    </div>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
</div>  <!--main-view closing tag-->
 +
 
 +
 
 +
</body>
 +
 
 +
  <script>
 +
    var slideIndex = 1;
 +
    showSlides(slideIndex);
 +
 
 +
    // Next/previous controls
 +
    function plusSlides(n) {
 +
      showSlides((slideIndex += n));
 
     }
 
     }
    to {
 
  opacity: 1;
 
    }
 
  }
 
  
  @keyframes fade {
+
    // Thumbnail image controls
     from {
+
     function currentSlide(n) {
  opacity: 0.4;
+
      showSlides((slideIndex = n));
 
     }
 
     }
    to {
 
  opacity: 1;
 
    }
 
  }
 
  
  /*change modal properties when screen is less than 1000px*/
+
    function showSlides(n) {
  @media screen and (max-width: 992px){
+
      var i;
    .md-row6 {
+
      var slides = document.getElementsByClassName("mySlides");
       padding-top: 10px;
+
       var dots = document.getElementsByClassName("dot");
       padding-left: 30px;
+
       if (n > slides.length) {
       padding-right: 10px;
+
        slideIndex = 1;
       width: 70%;
+
       }
       top: 60%;
+
      if (n < 1) {
       position: static;
+
        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>
 +
 
 +
</html>
  
  .dots-div {
+
{{Calgary/Imposter-Footer}}
    justify-content: center;
+
  }
+

Latest revision as of 20:49, 25 October 2020



Dry Lab Team



Wet Lab Team



Supervisors



Gallery