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

Line 1: Line 1:
{{Calgary/Imposter-General}}
 
{{Calgary/Imposter-Navbar-No-Logo}}
 
  
<html>
+
  body {
 +
    overflow-x: hidden;
 +
  }
 +
  #main-view {
 +
    justify-content: center;
 +
    margin-left: 250px;
 +
padding: 0px 0px;
 +
position: relative;
 +
top: -100px; /* To override the odd
 +
tag bug */
 +
  }
  
<head>
+
   .main-teampage {
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
    padding: 0px;
  <link rel = "stylesheet" type = "text/css" href = "https://2020.igem.org/Template:Calgary/Team-Style?action=raw&ctype=text/css"/>
+
   }
  <link rel = "stylesheet" type = "text/css" href = "https://2020.igem.org/Template:Calgary/Imposter-Sidebar-2-Style?action=raw&ctype=text/css"/>
+
   <!--<link rel = "stylesheet" type = "text/css" href = "https://2020.igem.org/Template:Calgary/Imposter-Content-Style?action=raw&ctype=text/css"/>-->
+
</head>
+
  
<body>
+
  .main-pics {
 +
    padding: 5px;
 +
          }
  
   <!-- SIDEBAR -->
+
   .single-content {
  <div class = "sidenav" id = "sidenav">
+
     position: relative;
     <a href="https://2020.igem.org/Team:Calgary">
+
    transition: .3s;
      <img src = "https://static.igem.org/mediawiki/2020/7/70/T--Calgary--Oviita-Mother-Logo.png" style = "height: 40px; width: auto"/>
+
     cursor: pointer;
     </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 .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{
 +
    top: 40%;
 +
    opacity: 0;
 +
    z-index: 1;
 +
    transition: .3s;
 +
    text-align: center;
 +
    color: #FFF;
 +
  }
  
   <div id = "main-view">
+
   .single-content:hover .text-content{
 +
    opacity: 1;
 +
    transition-delay: .3s;
 +
  }
  
    <!--BANNER-->
+
  .headers {
     <div class="banner-image">
+
     padding-top: 50px;
      <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>
+
  
    <div class="d-flex justify-content-center headers" id = "drylab"> <h2> Dry Lab Team </h2> </div>
+
/*Banner styling section*/
 +
  /* HEADER/BANNER */ body, html {
 +
    height: 100%;
 +
  }
  
 +
/* The banner image */
  
     <div class = "d-flex justify-content-center">
+
  .banner-image {
      <div class = "row main-teampage">
+
     /* 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/a/a2/T--Calgary--Teamstairs-picture.jpeg");
 +
    /* Set a specific height */
 +
    height: 65vh;
 +
    /* Position and center the image to scale nicely on all screens */
 +
    background-position: center;
 +
    background-repeat: no-repeat;
 +
    background-size: cover;
 +
    position: relative;
 +
    background-attachment: fixed;
 +
  }
  
        <div class = "col-xs-3 main-pics">
+
/* Place text in the middle of the image */
          <a data-toggle = "modal" data-target = "#alexa_modal">
+
  .banner-text {
            <div class = "single-content">
+
    font-size: ;
              <img src = "https://static.igem.org/mediawiki/2020/a/a9/T--Calgary--alexa-img.jpeg" alt = "alexa" width = "200" height = "200">
+
    font-weight: ;
              <div class = "text-content">
+
    color: ;
                <h4> Alexa Calkhoven </h4>
+
    text-align: center;
                <h6> Software Engineering </h6>
+
    position: absolute;
              </div>
+
    left: 50%;
            </div>
+
    top: 50%;
          </a>
+
    transform: translate(-50%, -50%);
        </div>
+
  }
  
        <div class = "col-xs-3 main-pics">
+
.banner-text h1 {
          <a data-toggle = "modal" data-target = "#andrew_modal">
+
            <div class = "single-content">
+
              <img src = "https://static.igem.org/mediawiki/2020/2/27/T--Calgary--andrew-img.jpeg" alt = "andrew" width = "200" height = "200">
+
              <div class = "text-content">
+
                <h4> Andrew Symes </h4>
+
                <h6> Statistics </h6>
+
              </div>
+
            </div>
+
          </a>
+
        </div>
+
  
        <div class = "col-xs-3 main-pics">
+
color: #F1C23F;
          <a data-toggle = "modal" data-target = "#cedric_modal">
+
font-size: 5em;
            <div class = "single-content">
+
font-weight: 600;
              <img src = " https://static.igem.org/mediawiki/2020/1/15/T--Calgary--cedric-img.jpeg" alt = "cedric" width = "200" height = "200">
+
font-family: 'Public Sans', sans-serif;
              <div class = "text-content">
+
margin-top:25%;
                <h4> Cedric Acierto </h4>
+
}
                <h6> Software Engineering </h6>
+
              </div>
+
            </div>
+
          </a>
+
        </div>
+
  
        <div class = "col-xs-3 main-pics">
+
/*Modal styling section*/
          <a data-toggle = "modal" data-target = "#randy_modal">
+
            <div class = "single-content">
+
              <img src = "https://static.igem.org/mediawiki/2020/4/44/T--Calgary--randy-img.png
+
    " alt = "randy" width = "200" height = "200">
+
              <div class = "text-content">
+
                <h4> Randy Moore </h4>
+
                <h6> Electrical Engineering </h6>
+
              </div>
+
            </div>
+
          </a>
+
        </div>
+
  
      </div>
+
  .modal-body {
     </div>
+
     background-color: #FFA600;
 +
  }
  
     <br>
+
  .info {
     <br>
+
     position: relative;
 +
     background-color: #FFFFFF;
 +
    margin-left: 2px;
 +
    margin-right: 2px;
 +
    margin-bottom: 5px;
 +
  }
  
     <!--WET LAB CONTAINERS-->
+
  .modal-pic {
     <div class="d-flex justify-content-center headers" id = "wetlab"> <h2> Wet Lab Team </h2> </div>
+
     padding: 10px;
 +
    padding-bottom: 20px;
 +
     left: 50px;
 +
  }
  
      <div class="d-flex justify-content-sm-center">
+
  .md-row1 {
        <div class = "row main-teampage">
+
    padding-top: 10px;
 +
    padding-left: 30px;
 +
    height: 11%;
 +
  }
  
          <div class = "col-xs-3 main-pics">
+
  .md-row2 {
            <a data-toggle = "modal" data-target = "#nimaya_modal">
+
    padding-left: 30px;
              <div class = "single-content">
+
    margin-top: 5px;
                <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>
+
  
          <div class = "col-xs-3 main-pics">
+
  .md-row3 {
            <a data-toggle = "modal" data-target = "#simran_modal">
+
    padding-left: 30px;
              <div class = "single-content">
+
  }
                <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>
+
  
          <div class = "col-xs-3 main-pics">
+
  .md-row4 {
            <a data-toggle = "modal" data-target = "#allison_modal">
+
    padding-top: 15px;
              <div class = "single-content">
+
    padding-left: 30px;
                <img src = "https://static.igem.org/mediawiki/2020/2/2e/T--Calgary--allison-img.png" alt = "allison" width = "200" height = "200">
+
    color: #969696;
                <div class = "text-content">
+
  }
                  <h4> Allison Guthrie </h4>
+
                  <h6> Plant Biology </h6>
+
                </div>
+
              </div>
+
            </a>
+
          </div>
+
  
          <div class = "col-xs-3 main-pics">
+
  .md-row5 {
            <a data-toggle = "modal" data-target = "#micha_modal">
+
    padding-left: 30px;
              <div class = "single-content">
+
    color: #000000;
                <img src = " https://static.igem.org/mediawiki/2020/9/9e/T--Calgary--micha-img.png
+
     font-size: 20px;
     " alt = "micha" width = "200" height = "200">
+
  }
                <div class = "text-content">
+
                  <h4> Michaella Atienza </h4>
+
                  <h6> Plant Biology </h6>
+
                </div>
+
              </div>
+
            </a>
+
          </div>
+
  
        </div>
+
  .md-row6 {
      </div>
+
    position: absolute;
 +
    padding-top: 10px;
 +
    padding-left: 30px;
 +
    padding-right: 10px;
 +
    width: 70%;
 +
    top: 60%;
 +
  }
  
      <div class = "d-flex justify-content-sm-center">
+
  .md-row7 {
        <div class = "row main-teampage">
+
    position: absolute;
 +
    padding-top: 30px;
 +
  }
  
          <div class = "col-xs-4 main-pics">
+
  .desc {
            <a data-toggle = "modal" data-target = "#arshia_modal">
+
    background-color: #606060;
              <div class = "single-content">
+
    margin-left: 2px;
                <img src = "https://static.igem.org/mediawiki/2020/a/a3/T--Calgary--arshia-img.png" alt = "arshia" width = "200" height = "200">
+
    margin-right: 2px;
                <div class = "text-content">
+
    color: #FFFFFF;
                  <h4> Arshia Mostoufi </h4>
+
    border-radius: 5px;
                  <h6> Cellular Biology </h6>
+
    padding-left: 2px;
                </div>
+
    padding-right: 2px;
              </div>
+
  }
            </a>
+
          </div>
+
  
          <div class = "col-xs-4 main-pics">
+
  .title-row {
            <a data-toggle = "modal" data-target = "#sravya_modal">
+
    margin: 0 auto;
              <div class = "single-content">
+
  }
                <img src = "https://static.igem.org/mediawiki/2020/a/ae/T--Calgary--sravya-img.png" alt = "sravya" width = "200" height = "200">
+
                <div class = "text-content">
+
                  <h4> Sravya Kakumanu </h4>
+
                  <h6> Microbiology </h6>
+
                </div>
+
              </div>
+
            </a>
+
          </div>
+
  
          <div class = "col-xs-4 main-pics">
+
  .subproj-img {
            <a data-toggle = "modal" data-target = "#anika_modal">
+
    width: 200px;
              <div class = "single-content">
+
    height: 300px;
                <img src = "https://static.igem.org/mediawiki/2020/c/c5/T--Calgary--anika-img.png" alt = "anika" width = "200" height = "200">
+
    padding-top: 5px;
                <div class = "text-content">
+
    padding-left: auto;
                  <h4> Anika Zaman </h4>
+
    padding-right: auto;
                  <h6> Cellular Biology </h6>
+
  }
                </div>
+
              </div>
+
            </a>
+
          </div>
+
  
        </div>
+
  .title-row {
      </div>
+
    padding-top: 20px;
 +
    height: 18%;
 +
  }
  
    <br>
+
  .proj-row {
     <br>
+
     padding-bottom: 20px;
 +
  }
  
     <!--SUPERVISOR CONTAINERS-->
+
  /*Gallery styling section*/
 +
  .slideshow-container {
 +
     max-width: 600px;
 +
    position: relative;
 +
    margin: auto;
 +
  }
  
     <div class="d-flex justify-content-center headers" id = "supervisors"> <h2> Supervisors </h2> </div>
+
  .mySlides {
 +
     display: none;
 +
    width: 600px;
 +
  }
  
      <div class = "d-flex justify-content-center">
+
  .prev, .next {
        <div class = "row main-teampage">
+
    cursor: pointer;
 +
    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;
 +
  }
  
          <div class = "col-xs-4 main-pics">
+
  .next {
            <a data-toggle = "modal" data-target = "#chris_modal">
+
    right: 0;
              <div class = "single-content">
+
    border-radius: 3px 0 0 3px;
                <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>
+
  
          <div class = "col-xs-4 main-pics">
+
  .prev:hover, .next:hover {
            <a data-toggle = "modal" data-target = "#jadon_modal">
+
    background-color: #423636;
              <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>
+
  
          <div class = "col-xs-4 main-pics">
+
  .dot {
            <a data-toggle = "modal" data-target = "#mac_modal">
+
    cursor: pointer;
              <div class = "single-content">
+
    height: 15px;
                <img src = "https://static.igem.org/mediawiki/2020/2/27/T--Calgary--mac.jpeg" alt = "mac" width = "200" height = "200">
+
    width: 15px;
                <div class = "text-content">
+
    margin: 0 2px;
                  <h4> Mackenzie Sampson </h4>
+
    background-color: #bbb;
                  <h6> Electrical Engineering </h6>
+
    border-radius: 50%;
                </div>
+
    display: inline-block;
              </div>
+
    transition: background-color 0.6s ease;
            </a>
+
  }
          </div>
+
  
        </div>
+
  .active, .dot:hover {
      </div>
+
    background-color: #423636;
 +
  }
  
      <div class = "d-flex justify-content-center">
+
  .fade {
        <div class = "row main-teampage">
+
    -webkit-animation-name: fade;
 +
    -webkit-animation-duration: 1.5s;
 +
    animation-name: fade;
 +
    animation-duration: 1.5s;
 +
  }
  
          <div class = "col-xs-6 main-pics">
+
   @-webkit-keyframes fade {
            <a data-toggle = "modal" data-target = "#dr_mayi_modal">
+
     from {
              <div class = "single-content">
+
   opacity: 0.4;
                <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> Insert Program Here </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 class = "row md-row7"> <!--EDITABLE-->
+
                  <img src = "https://static.igem.org/mediawiki/2020/c/c1/T--Calgary--newproj_placeholder.png" alt = "subproj" width = "400px">
+
                </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-->
+
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+
                </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/2c/T--Calgary--modal_profile.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"> Insert Field Here </div> <!--EDITABLE-->
+
                <div class = "row md-row4">  </div>
+
                <div class = "row md-row5">  </div> <!--EDITABLE-->
+
 
+
                <div class = "row md-row6"> <!--EDITABLE-->
+
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
                  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+
                  Excepteur sint occaecat cupidatat non proident,
+
                </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" role = "document">
+
        <div class = "modal-content">
+
          <div class = "modal-header">
+
            <h5 class = "modal-title"> Tian Zhao </h5>
+
            <button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close">
+
              <span aria-hidden = "true">&times;</span>
+
            </button>
+
          </div>
+
          <div class = "modal-body">
+
            <p> Put in description about Tian here. </p>
+
          </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">
+
 
+
 
+
      <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
+
      <a class="next" onclick="plusSlides(1)">&#10095;</a>
+
 
+
      <span class = "dots-div">
+
        <span class="dot" onclick="currentSlide(1)"></span>
+
        <span class="dot" onclick="currentSlide(2)"></span>
+
        <span class="dot" onclick="currentSlide(3)"></span>
+
      </span> <!--Maybe change back to div?-->
+
    </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;
 +
    }
 +
  }
  
    // Thumbnail image controls
+
  @keyframes fade {
     function currentSlide(n) {
+
     from {
      showSlides((slideIndex = n));
+
  opacity: 0.4;
 
     }
 
     }
 +
    to {
 +
  opacity: 1;
 +
    }
 +
  }
  
    function showSlides(n) {
+
  /*change modal properties when screen is less than 1000px*/
      var i;
+
  @media screen and (max-width: 992px){
      var slides = document.getElementsByClassName("mySlides");
+
    .md-row6 {
       var dots = document.getElementsByClassName("dot");
+
       padding-top: 10px;
       if (n > slides.length) {
+
       padding-left: 30px;
        slideIndex = 1;
+
       padding-right: 10px;
       }
+
       width: 70%;
      if (n < 1) {
+
       top: 60%;
        slideIndex = slides.length;
+
       position: static;
       }
+
      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>
+
  
{{Calgary/Imposter-Footer}}
+
  .dots-div {
 +
    justify-content: center;
 +
  }

Revision as of 01:14, 26 September 2020

 body {
   overflow-x: hidden;
 }
 #main-view {
   justify-content: center;
   margin-left: 250px;
padding: 0px 0px;
position: relative;
top: -100px; /* To override the odd
tag bug */
 }
 .main-teampage {
   padding: 0px;
 }
 .main-pics {
   padding: 5px;
         }
 .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{
   top: 40%;
   opacity: 0;
   z-index: 1;
   transition: .3s;
   text-align: center;
   color: #FFF;
 }
 .single-content:hover .text-content{
   opacity: 1;
   transition-delay: .3s;
 }
 .headers {
   padding-top: 50px;
 }

/*Banner styling section*/

 /* HEADER/BANNER */ body, html {
   height: 100%;
 }

/* The banner image */

 .banner-image {
   /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
   background-image: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.5) 100%), url("T--Calgary--Teamstairs-picture.jpeg");
   /* Set a specific height */
   height: 65vh;
   /* Position and center the image to scale nicely on all screens */
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   background-attachment: fixed;
 }

/* Place text in the middle of the image */

 .banner-text {
   font-size: ;
   font-weight: ;
   color: ;
   text-align: center;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
 }

.banner-text h1 {

color: #F1C23F;
font-size: 5em;
font-weight: 600;
font-family: 'Public Sans', sans-serif;
margin-top:25%;

}

/*Modal styling section*/

 .modal-body {
   background-color: #FFA600;
 }
 .info {
   position: relative;
   background-color: #FFFFFF;
   margin-left: 2px;
   margin-right: 2px;
   margin-bottom: 5px;
 }
 .modal-pic {
   padding: 10px;
   padding-bottom: 20px;
   left: 50px;
 }
 .md-row1 {
   padding-top: 10px;
   padding-left: 30px;
   height: 11%;
 }
 .md-row2 {
   padding-left: 30px;
   margin-top: 5px;
 }
 .md-row3 {
   padding-left: 30px;
 }
 .md-row4 {
   padding-top: 15px;
   padding-left: 30px;
   color: #969696;
 }
 .md-row5 {
   padding-left: 30px;
   color: #000000;
   font-size: 20px;
 }
 .md-row6 {
   position: absolute;
   padding-top: 10px;
   padding-left: 30px;
   padding-right: 10px;
   width: 70%;
   top: 60%;
 }
 .md-row7 {
   position: absolute;
   padding-top: 30px;
 }
 .desc {
   background-color: #606060;
   margin-left: 2px;
   margin-right: 2px;
   color: #FFFFFF;
   border-radius: 5px;
   padding-left: 2px;
   padding-right: 2px;
 }
 .title-row {
   margin: 0 auto;
 }
 .subproj-img {
   width: 200px;
   height: 300px;
   padding-top: 5px;
   padding-left: auto;
   padding-right: auto;
 }
 .title-row {
   padding-top: 20px;
   height: 18%;
 }
 .proj-row {
   padding-bottom: 20px;
 }
 /*Gallery styling section*/
 .slideshow-container {
   max-width: 600px;
   position: relative;
   margin: auto;
 }
 .mySlides {
   display: none;
   width: 600px;
 }
 .prev, .next {
   cursor: pointer;
   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 {
   right: 0;
   border-radius: 3px 0 0 3px;
 }
 .prev:hover, .next:hover {
    background-color: #423636;
 }
 .dot {
   cursor: pointer;
   height: 15px;
   width: 15px;
   margin: 0 2px;
   background-color: #bbb;
   border-radius: 50%;
   display: inline-block;
   transition: background-color 0.6s ease;
 }
 .active, .dot:hover {
   background-color: #423636;
 }
 .fade {
   -webkit-animation-name: fade;
   -webkit-animation-duration: 1.5s;
   animation-name: fade;
   animation-duration: 1.5s;
 }
 @-webkit-keyframes fade {
   from {
  opacity: 0.4;
   }
   to {
  opacity: 1;
   }
 }
 @keyframes fade {
   from {
  opacity: 0.4;
   }
   to {
  opacity: 1;
   }
 }
 /*change modal properties when screen is less than 1000px*/
 @media screen and (max-width: 992px){
   .md-row6 {
     padding-top: 10px;
     padding-left: 30px;
     padding-right: 10px;
     width: 70%;
     top: 60%;
     position: static;
   }
 }
 .dots-div {
   justify-content: center;
 }