Difference between revisions of "Team:Lethbridge HS/Team"

Line 15: Line 15:
 
<link href="https://fonts.googleapis.com/css?family=Libre+Franklin:100|Quicksand|Roboto" rel="stylesheet">
 
<link href="https://fonts.googleapis.com/css?family=Libre+Franklin:100|Quicksand|Roboto" rel="stylesheet">
 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
−
   </head>
+
    
 +
<style>
 +
 
 +
h1,h2,h3{font-family: 'Montserrat', sans-serif;}
 +
p{font-family:'open sans', sans-serif;}
 +
 
 +
 
 +
 
 +
.justify{text-align: justify;
 +
    text-justify: inter-word;}
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
.animate {
 +
  -webkit-transition: all 0.3s ease-in-out;
 +
  -moz-transition: all 0.3s ease-in-out;
 +
  -o-transition: all 0.3s ease-in-out;
 +
  -ms-transition: all 0.3s ease-in-out;
 +
  transition: all 0.3s ease-in-out;
 +
}
 +
.info-card {
 +
  width: 100%;
 +
  border: 1px solid rgb(215, 215, 215);
 +
  position: relative;
 +
  font-family: 'Lato', sans-serif;
 +
  margin-bottom: 20px;
 +
  overflow: hidden;
 +
}
 +
.info-card > img {
 +
  width: 100px;
 +
  margin-bottom: 60px;
 +
  height:200px;
 +
}
 +
.info-card .info-card-details,
 +
.info-card .info-card-details .info-card-header  {
 +
  width: 100%;
 +
  height: 100%;
 +
  position: absolute;
 +
  bottom: -100%;
 +
  left: 0;
 +
  padding: 0 15px;
 +
  background: rgb(255, 255, 255);
 +
  text-align: center;
 +
}
 +
.info-card .info-card-details::-webkit-scrollbar {
 +
  width: 8px;
 +
}
 +
.info-card .info-card-details::-webkit-scrollbar-button {
 +
  width: 8px;
 +
  height: 0px;
 +
}
 +
.info-card .info-card-details::-webkit-scrollbar-track {
 +
  background: transparent;
 +
}
 +
.info-card .info-card-details::-webkit-scrollbar-thumb {
 +
  background: rgb(160, 160, 160);
 +
}
 +
.info-card .info-card-details::-webkit-scrollbar-thumb:hover {
 +
  background: rgb(130, 130, 130);
 +
}
 +
 
 +
.info-card .info-card-details .info-card-header {
 +
  height: auto;
 +
  bottom: 100%;
 +
  padding: 10px 5px;
 +
}
 +
.info-card:hover .info-card-details {
 +
  bottom: 0px;
 +
  overflow: auto;
 +
  padding-bottom: 25px;
 +
}
 +
.info-card:hover .info-card-details .info-card-header {
 +
  position: relative;
 +
  bottom: 0px;
 +
  padding-top: 45px;
 +
  padding-bottom: 25px;
 +
}
 +
.info-card .info-card-details .info-card-header h1,
 +
.info-card .info-card-details .info-card-header h3 {
 +
  color: rgb(62, 62, 62);
 +
  font-size: 22px;
 +
  font-weight: 900;
 +
  text-transform: uppercase;
 +
  margin: 0 !important;
 +
  padding: 0 !important;
 +
}
 +
.info-card .info-card-details .info-card-header h3 {
 +
  color: rgb(142, 182, 52);
 +
  font-size: 15px;
 +
  font-weight: 400;
 +
  margin-top: 5px;
 +
}
 +
.info-card .info-card-details .info-card-detail .social {
 +
  list-style: none;
 +
  padding: 0px;
 +
  margin-top: 25px;
 +
  text-align: center;
 +
}
 +
.info-card .info-card-details .info-card-detail .social a {
 +
  position: relative;
 +
  display: inline-block;
 +
  min-width: 40px;
 +
  padding: 10px 0px;
 +
  margin: 0px 5px;
 +
  overflow: hidden;
 +
  text-align: center;
 +
  background-color: rgb(215, 215, 215);
 +
  border-radius: 40px;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
</style>
 +
 
 +
</head>
  
 
<body>
 
<body>
 +
 +
<!--carousel-->
  
 
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
 
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
Line 46: Line 181:
 
   </a>
 
   </a>
 
</div>
 
</div>
 +
 +
 +
<!--Team bios-->
 +
 +
<h1>
 +
Students
 +
</h1>
 +
  <div class="container-fluid">
 +
    <div class="row">
 +
      <div class="col-sm-3">
 +
        <div class="[ info-card ]">
 +
        <img style="width: 100%" src="https://static.igem.org/mediawiki/2017/7/7b/T--Lethbridge_HS--Nimayabio.jpg"/>
 +
        <div class="[ info-card-details ] animate">
 +
          <div class="[ info-card-header ]">
 +
            <h1> Nimaya De Silva</h1>
 +
            <h3> something funny??? or grade? </h3>
 +
          </div>
 +
          <div style="text-align: justify;
 +
    text-justify: inter-word;" class="[ info-card-detail ] justify">
 +
            <!-- Description -->
 +
            <p>Hello! My name is Nimaya De Silva, and I am 18 years old. I just graduated from Winston Churchill High School. Starting this fall, I will be entering the biomedical sciences program at the University of Calgary. This is now my third year of iGEM. I joined iGEM to gain more experience in the lab, and to venture more into the world of biology. But I have also found myself working on human practices, and coding the wiki which has been very enjoyable! I hope to continue my experiences in iGEM in post secondary as well! Besides iGEM, I love to read anything and everything to do with dystopia and Harry Potter and love to recreate pop songs on the piano! </p>
 +
          </div>
 +
        </div>
 +
      </div>
 +
      </div>
 +
      <div class="col-sm-3">
 +
        <div class="[ info-card ]">
 +
        <img style="width: 100%" src="https://static.igem.org/mediawiki/2017/7/7b/T--Lethbridge_HS--Nimayabio.jpg" />
 +
        <div class="[ info-card-details ] animate">
 +
          <div class="[ info-card-header ]">
 +
            <h1> Name </h1>
 +
            <h3> grade? </h3>
 +
          </div>
 +
          <div class="[ info-card-detail ] justify">
 +
            <!-- Description -->
 +
            <p>insert bio here</p>
 +
          </div>
 +
        </div>
 +
      </div>
 +
      </div>
 +
      <div class="col-sm-3">
 +
        <div class="[ info-card ]">
 +
        <img style="width: 100%" src="https://static.igem.org/mediawiki/2017/7/7b/T--Lethbridge_HS--Nimayabio.jpg" />
 +
        <div class="[ info-card-details ] animate">
 +
          <div class="[ info-card-header ]">
 +
            <h1> Name </h1>
 +
            <h3> grade? </h3>
 +
          </div>
 +
          <div class="[ info-card-detail ] justify">
 +
            <!-- Description -->
 +
            <p>insert bio here</p>
 +
          </div>
 +
        </div>
 +
      </div>
 +
      </div>
 +
      <div class="col-sm-3">
 +
        <div class="[ info-card ]">
 +
        <img style="width: 100%" src="https://static.igem.org/mediawiki/2017/7/7b/T--Lethbridge_HS--Nimayabio.jpg" />
 +
        <div class="[ info-card-details ] animate">
 +
          <div class="[ info-card-header ]">
 +
            <h1> Name </h1>
 +
            <h3> grade? </h3>
 +
          </div>
 +
          <div class="[ info-card-detail ] justify">
 +
            <!-- Description -->
 +
            <p>insert bio here</p>
 +
          </div>
 +
        </div>
 +
      </div>
 +
      </div>
 +
    </div>
 +
 +
    <div class="row">
 +
      <div class="col-sm-3">
 +
        <div class="[ info-card ]">
 +
        <img style="width: 100%" src="https://static.igem.org/mediawiki/2017/7/7b/T--Lethbridge_HS--Nimayabio.jpg" />
 +
        <div class="[ info-card-details ] animate">
 +
          <div class="[ info-card-header ]">
 +
            <h1> Name </h1>
 +
            <h3> grade? </h3>
 +
          </div>
 +
          <div class="[ info-card-detail ] justify">
 +
            <!-- Description -->
 +
            <p>insert bio here</p>
 +
          </div>
 +
        </div>
 +
      </div>
 +
      </div>
 +
      <div class="col-sm-3">
 +
        <div class="[ info-card ]">
 +
        <img style="width: 100%" src="https://static.igem.org/mediawiki/2017/7/7b/T--Lethbridge_HS--Nimayabio.jpg" />
 +
        <div class="[ info-card-details ] animate">
 +
          <div class="[ info-card-header ]">
 +
            <h1> Name </h1>
 +
            <h3> grade? </h3>
 +
          </div>
 +
          <div class="[ info-card-detail ] justify">
 +
            <!-- Description -->
 +
            <p>insert bio here</p>
 +
          </div>
 +
        </div>
 +
      </div>
 +
      </div>
 +
      <div class="col-sm-3">
 +
        <div class="[ info-card ]">
 +
        <img style="width: 100%" src="https://static.igem.org/mediawiki/2017/7/7b/T--Lethbridge_HS--Nimayabio.jpg" />
 +
        <div class="[ info-card-details ] animate">
 +
          <div class="[ info-card-header ]">
 +
            <h1> Name </h1>
 +
            <h3> grade? </h3>
 +
          </div>
 +
          <div class="[ info-card-detail ] justify">
 +
            <!-- Description -->
 +
            <p>insert bio here</p>
 +
          </div>
 +
        </div>
 +
      </div>
 +
      </div>
 +
      <div class="col-sm-3">
 +
        <div class="[ info-card ]">
 +
        <img style="width: 100%" src="https://static.igem.org/mediawiki/2017/7/7b/T--Lethbridge_HS--Nimayabio.jpg" />
 +
        <div class="[ info-card-details ] animate">
 +
          <div class="[ info-card-header ]">
 +
            <h1> Name </h1>
 +
            <h3> grade? </h3>
 +
          </div>
 +
          <div class="[ info-card-detail ] justify">
 +
            <!-- Description -->
 +
            <p>insert bio here</p>
 +
          </div>
 +
        </div>
 +
      </div>
 +
      </div>
 +
    </div>
 +
    <div class="row">
 +
      <div class="col-sm-3">
 +
        <div class="[ info-card ]">
 +
        <img style="width: 100%" src="https://static.igem.org/mediawiki/2017/7/7b/T--Lethbridge_HS--Nimayabio.jpg" />
 +
        <div class="[ info-card-details ] animate">
 +
          <div class="[ info-card-header ]">
 +
            <h1> Name </h1>
 +
            <h3> grade?</h3>
 +
          </div>
 +
          <div class="[ info-card-detail ] justify">
 +
            <!-- Description -->
 +
            <p>insert bio here</p>
 +
          </div>
 +
        </div>
 +
      </div>
 +
      </div>
 +
      <div class="col-sm-3">
 +
        <div class="[ info-card ]">
 +
        <img style="width: 100%" src="https://static.igem.org/mediawiki/2017/7/7b/T--Lethbridge_HS--Nimayabio.jpg" />
 +
        <div class="[ info-card-details ] animate">
 +
          <div class="[ info-card-header ]">
 +
            <h1> Name </h1>
 +
            <h3> grade? </h3>
 +
          </div>
 +
          <div class="[ info-card-detail ] justify">
 +
            <!-- Description -->
 +
            <p>insert bio here</p>
 +
          </div>
 +
        </div>
 +
      </div>
 +
      </div>
 +
      <div class="col-sm-3">
 +
        <div class="[ info-card ]">
 +
        <img style="width: 100%" src="https://static.igem.org/mediawiki/2017/7/7b/T--Lethbridge_HS--Nimayabio.jpg" />
 +
        <div class="[ info-card-details ] animate">
 +
          <div class="[ info-card-header ]">
 +
            <h1> Name </h1>
 +
            <h3> grade? </h3>
 +
          </div>
 +
          <div class="[ info-card-detail ] justify">
 +
            <!-- Description -->
 +
            <p>insert bio here</p>
 +
          </div>
 +
        </div>
 +
      </div>
 +
      </div>
 +
      <div class="col-sm-3">
 +
        <div class="[ info-card ]">
 +
        <img style="width: 100%" src="https://static.igem.org/mediawiki/2017/7/7b/T--Lethbridge_HS--Nimayabio.jpg" />
 +
        <div class="[ info-card-details ] animate">
 +
          <div class="[ info-card-header ]">
 +
            <h1> Name </h1>
 +
            <h3> grade? </h3>
 +
          </div>
 +
          <div class="[ info-card-detail ] justify">
 +
            <!-- Description -->
 +
            <p>insert bio here</p>
 +
          </div>
 +
        </div>
 +
      </div>
 +
      </div>
 +
    </div>
 +
    <div class="row">
 +
      <div class="col-sm-3">
 +
        <div class="[ info-card ]">
 +
        <img style="width: 100%" src="https://static.igem.org/mediawiki/2017/7/7b/T--Lethbridge_HS--Nimayabio.jpg" />
 +
        <div class="[ info-card-details ] animate">
 +
          <div class="[ info-card-header ]">
 +
            <h1> Name </h1>
 +
            <h3> grade?</h3>
 +
          </div>
 +
          <div class="[ info-card-detail ] justify">
 +
            <!-- Description -->
 +
            <p>insert bio here</p>
 +
          </div>
 +
        </div>
 +
      </div>
 +
      </div>
 +
      <div class="col-sm-3">
 +
        <div class="[ info-card ]">
 +
        <img style="width: 100%" src="https://static.igem.org/mediawiki/2017/7/7b/T--Lethbridge_HS--Nimayabio.jpg" />
 +
        <div class="[ info-card-details ] animate">
 +
          <div class="[ info-card-header ]">
 +
            <h1> Name</h1>
 +
            <h3> grade? </h3>
 +
          </div>
 +
          <div class="[ info-card-detail ] justify">
 +
            <!-- Description -->
 +
            <p>insert bio here</p>
 +
          </div>
 +
        </div>
 +
      </div>
 +
      </div>
 +
 +
 +
      <div class="col-sm-3">
 +
        <div class="[ info-card ]">
 +
        <img style="width: 100%" src="https://static.igem.org/mediawiki/2017/7/7b/T--Lethbridge_HS--Nimayabio.jpg" />
 +
        <div class="[ info-card-details ] animate">
 +
          <div class="[ info-card-header ]">
 +
            <h1> Name </h1>
 +
            <h3> grade? </h3>
 +
          </div>
 +
          <div class="[ info-card-detail ] justify">
 +
            <!-- Description -->
 +
            <p>insert bio here</p>
 +
          </div>
 +
        </div>
 +
      </div>
 +
      </div>
 +
 +
 +
 +
      <div class="col-sm-3">
 +
        <div class="[ info-card ]">
 +
        <img style="width: 100%" src="https://static.igem.org/mediawiki/2017/7/7b/T--Lethbridge_HS--Nimayabio.jpg" />
 +
        <div class="[ info-card-details ] animate">
 +
          <div class="[ info-card-header ]">
 +
            <h1> Name </h1>
 +
            <h3> grade? </h3>
 +
          </div>
 +
          <div class="[ info-card-detail ] justify">
 +
            <!-- Description -->
 +
            <p>insert bio here</p>
 +
          </div>
 +
        </div>
 +
      </div>
 +
 +
    </div>
 +
</div>
 +
 +
<h1>
 +
Advisors
 +
</h1>
 +
 +
<div class="row">
 +
  <div class="col-sm-3">
 +
    <div class="[ info-card ]">
 +
    <img style="width: 100%" src="https://static.igem.org/mediawiki/2017/7/7b/T--Lethbridge_HS--Nimayabio.jpg" />
 +
    <div class="[ info-card-details ] animate">
 +
      <div class="[ info-card-header ]">
 +
        <h1> Name </h1>
 +
        <h3> grade? </h3>
 +
      </div>
 +
      <div class="[ info-card-detail ] justify">
 +
        <!-- Description -->
 +
        <p>insert bio here</p>
 +
      </div>
 +
    </div>
 +
  </div>
 +
  </div>
 +
  <div class="col-sm-3">
 +
    <div class="[ info-card ]">
 +
    <img style="width: 100%" src="https://static.igem.org/mediawiki/2017/7/7b/T--Lethbridge_HS--Nimayabio.jpg" />
 +
    <div class="[ info-card-details ] animate">
 +
      <div class="[ info-card-header ]">
 +
        <h1> Name </h1>
 +
        <h3> grade? </h3>
 +
      </div>
 +
      <div class="[ info-card-detail ] justify">
 +
        <!-- Description -->
 +
        <p>insert bio here</p>
 +
      </div>
 +
    </div>
 +
  </div>
 +
  </div>
 +
  <div class="col-sm-3">
 +
    <div class="[ info-card ]">
 +
    <img style="width: 100%" src="https://static.igem.org/mediawiki/2017/7/7b/T--Lethbridge_HS--Nimayabio.jpg" />
 +
    <div class="[ info-card-details ] animate">
 +
      <div class="[ info-card-header ]">
 +
        <h1> Name </h1>
 +
        <h3> grade? </h3>
 +
      </div>
 +
      <div class="[ info-card-detail ] justify">
 +
        <!-- Description -->
 +
        <p>insert bio here</p>
 +
      </div>
 +
    </div>
 +
  </div>
 +
  </div>
 +
  <div class="col-sm-3">
 +
    <div class="[ info-card ]">
 +
    <img style="width: 100%" src="https://static.igem.org/mediawiki/2017/7/7b/T--Lethbridge_HS--Nimayabio.jpg" />
 +
    <div class="[ info-card-details ] animate">
 +
      <div class="[ info-card-header ]">
 +
        <h1> Name </h1>
 +
        <h3> grade? </h3>
 +
      </div>
 +
      <div class="[ info-card-detail ] justify">
 +
        <!-- Description -->
 +
        <p>insert bio here</p>
 +
      </div>
 +
    </div>
 +
  </div>
 +
  </div>
 +
</div>
 +
<div class="row">
 +
  <div class="col-sm-3">
 +
    <div class="[ info-card ]">
 +
    <img style="width: 100%" src="https://static.igem.org/mediawiki/2017/7/7b/T--Lethbridge_HS--Nimayabio.jpg" />
 +
    <div class="[ info-card-details ] animate">
 +
      <div class="[ info-card-header ]">
 +
        <h1> Name </h1>
 +
        <h3> grade? </h3>
 +
      </div>
 +
      <div class="[ info-card-detail ] justify">
 +
        <!-- Description -->
 +
        <p>insert bio here</p>
 +
      </div>
 +
    </div>
 +
  </div>
 +
  </div>
 +
  <div class="col-sm-3">
 +
    <div class="[ info-card ]">
 +
    <img style="width: 100%" src="https://static.igem.org/mediawiki/2017/7/7b/T--Lethbridge_HS--Nimayabio.jpg" />
 +
    <div class="[ info-card-details ] animate">
 +
      <div class="[ info-card-header ]">
 +
        <h1> Name </h1>
 +
        <h3> grade? </h3>
 +
      </div>
 +
      <div class="[ info-card-detail ] justify">
 +
        <!-- Description -->
 +
        <p>insert bio here</p>
 +
      </div>
 +
    </div>
 +
  </div>
 +
  </div>
 +
 +
  <div class="col-sm-3">
 +
    <div class="[ info-card ]">
 +
    <img style="width: 100%" src="https://static.igem.org/mediawiki/2017/7/7b/T--Lethbridge_HS--Nimayabio.jpg" />
 +
    <div class="[ info-card-details ] animate">
 +
      <div class="[ info-card-header ]">
 +
        <h1> Name</h1>
 +
        <h3> grade? </h3>
 +
      </div>
 +
      <div class="[ info-card-detail ] justify">
 +
        <!-- Description -->
 +
        <p>insert bio here</p>
 +
      </div>
 +
    </div>
 +
  </div>
 +
  </div>
 +
</div>
 +
 +
  </div>
 +
<br>
 +
 +
 +
 +
 +
 +
<div class="container-fluid" style="text-align:left; background-image: url(homepage1.png);background-color: white; background-size: cover; background-position: center;  background-size: 100% 100%;
 +
width: 100%; margin: 0; border-bottom: ; opacity: 0.9;
 +
      ">
 +
<center> <h1 style="color:white;">And a big thank you to our sponsors! </h1>
 +
<img src="sponsors1.png" class="img-fluid" alt="Responsive image">
 +
 +
 +
 +
</center>
 +
</div>
 +
  
  

Revision as of 23:24, 9 August 2018

Students

Nimaya De Silva

something funny??? or grade?

Hello! My name is Nimaya De Silva, and I am 18 years old. I just graduated from Winston Churchill High School. Starting this fall, I will be entering the biomedical sciences program at the University of Calgary. This is now my third year of iGEM. I joined iGEM to gain more experience in the lab, and to venture more into the world of biology. But I have also found myself working on human practices, and coding the wiki which has been very enjoyable! I hope to continue my experiences in iGEM in post secondary as well! Besides iGEM, I love to read anything and everything to do with dystopia and Harry Potter and love to recreate pop songs on the piano!

Name

grade?

insert bio here

Name

grade?

insert bio here

Name

grade?

insert bio here

Name

grade?

insert bio here

Name

grade?

insert bio here

Name

grade?

insert bio here

Name

grade?

insert bio here

Name

grade?

insert bio here

Name

grade?

insert bio here

Name

grade?

insert bio here

Name

grade?

insert bio here

Name

grade?

insert bio here

Name

grade?

insert bio here

Name

grade?

insert bio here

Name

grade?

insert bio here

Advisors

Name

grade?

insert bio here

Name

grade?

insert bio here

Name

grade?

insert bio here

Name

grade?

insert bio here

Name

grade?

insert bio here

Name

grade?

insert bio here

Name

grade?

insert bio here


And a big thank you to our sponsors!

Responsive image