Difference between revisions of "Team:RUM-UPRM/Members"

 
(23 intermediate revisions by 2 users not shown)
Line 2: Line 2:
 
{{RUM-UPRM}}
 
{{RUM-UPRM}}
 
{{RUM-UPRM/Nav}}
 
{{RUM-UPRM/Nav}}
 +
 
<html lang="en">
 
<html lang="en">
 +
<head>
 +
  <meta charset="utf-8">
 +
  <meta name="viewport" content="width=device-width, initial-scale=1">
 +
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
 +
  
 
<style>
 
<style>
 +
  body {
 +
    position: relative;
 +
     
  
#content { margin-left:0px; margin-top:0px; padding:0px; width:100%;}
+
  }
 +
  ul.nav-pills {
 +
    top: 150px;
  
</style>
+
position: sticky;
 +
top: 70px;
 +
    margin-left: 4em;
 +
    margin-top: 4em;
 +
    /*border-radius: 0px 15px 15px 0px;*/
 +
    max-width: 12vw;
 +
    overflow-wrap: break-word;
 +
    line-height: 1;
 +
    overflow: hidden;
 +
}
  
    <head>
+
ul.nav {
        <meta charset="utf-8">
+
position: sticky;
        <title>Stack Multipurpose HTML Template</title>
+
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
        <meta name="description" content="Site Description Here">
+
        <link href="https://fonts.googleapis.com/css?family=Open+Sans:200,300,400,400i,500,600,700%7CMerriweather:300,300i" rel="stylesheet">
+
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+
        <link href="https://fonts.googleapis.com/css?family=Lato:400,700,900" rel="stylesheet">
+
    </head>
+
  
<center>
+
  }
 +
  div.col-9 div {
 +
    height: 500px;
 +
width: 50px;
 +
    display: block;
 +
    text-decoration: none;
 +
    color: var(--dark);
 +
    font-size: 1em;
 +
    padding-left: 0.6em;
 +
    padding-top: 0.5em;
 +
    padding-bottom: 0.3em;
 +
    padding-right: 0.5em;
 +
    font-weight: 400;
 +
    position: relative;
 +
    z-index: 1;
 +
    overflow: hidden;
 +
    transition: all 0.5s
 +
  }
 +
.sticky {
 +
    position: relative;
 +
    top: 0;
 +
    width: 100%;
 +
}
 +
.myScrollspy {
 +
position: sticky;
 +
top: 70px;.scroll-spy
 +
    margin-left: 4em;
 +
    margin-top: 4em;
 +
    /*border-radius: 0px 15px 15px 0px;*/
 +
    max-width: 12vw;
 +
    overflow-wrap: break-word;
 +
    line-height: 1;
 +
    overflow: hidden;
 +
 
 +
}
 +
 
 +
.spy-list>a.selected {
 +
    border-left: 3px solid var(--accent2);
 +
    transition: all 0.2s;
 +
    font-weight: 700;
 +
}
 +
 
 +
 
 +
  </style>
 +
</head>
 +
<body data-spy="scroll" data-target="#myScrollspy" data-offset="1">
 +
 
 +
<div class="container-fluid" style= "background-color:#3BB9FF; height:100px; top: 200px">
 +
  <center><h1>Members</h1></center>
 +
</div>
 +
 
 +
 
 +
<div class="container-fluidtwo">
 +
  <div class="row">
 +
    <nav class="col-sm-2 col-3" id="myScrollspy">
 +
      <ul class="nav nav-pills">
 +
        <li class="nav-item">
 +
          <a class="nav-link active" href="#section1">Team Members </a>
 +
        </li>
 +
        <li class="nav-item">
 +
          <a class="nav-link" href="#section2">Advisors & PI's</a>
 +
        </li>
 +
        <li class="nav-item">
 +
          <a class="nav-link" href="#section3">Biographies</a>
 +
        </li>
 +
      </ul>
 +
    </nav>
 +
 
 +
 
 +
    <div class="col-sm-9 col-8; scroll"> <div align="justify">
 +
      <div id="section1">   
 +
        <center><h1>Team Members</h1></center>
 +
 
 +
        <center>
  
 
<style>
 
<style>
Line 114: Line 200:
  
  
<style>
 
 
 
// Crop thumbnail images.
 
#gallery {
 
 
 
  img {
 
    //height: 75vw;
 
    object-fit: cover;
 
   
 
    @media (min-width: $bootstrap-sm) {
 
      //height: 35vw;
 
    }
 
   
 
    @media (min-width: $bootstrap-lg) {
 
      //height: 18vw;
 
    }
 
  }
 
}
 
 
 
// Crop images in lightbox.
 
.carousel-item {
 
 
 
  img {
 
    //height: 60vw;
 
    object-fit: cover;
 
   
 
    @media (min-width: $bootstrap-sm) {
 
      //height: 350px;
 
    }
 
  }
 
}
 
 
// --- END: crop images --- //
 
 
 
// --- BEGIN: custom styling demo --- //
 
// An example of custom styling for gallery and lightbox, to show what's possible in terms of aesthetic customization.
 
 
* {
 
  transition: 0.75s;
 
}
 
 
#gallery {
 
  padding: 0 15px;
 
 
 
  img {
 
    display: block;
 
    margin: 15px 0;
 
    border-radius: 300px 30px 300px 300px;
 
   
 
    &:hover {
 
      border-radius: 30px 90px 30px 30px;
 
    }
 
  }
 
}
 
 
#exampleModal {
 
  .modal-content {
 
    background: none;
 
    border: none;
 
  }
 
 
 
  .modal-header {
 
    border:none;
 
   
 
    button {
 
      background: none;
 
      border-radius: 100px 100px 0 0;
 
      padding: 5px 10px;
 
      opacity: 1;
 
      position: relative;
 
      top: 3px;
 
      border: solid 2px white;
 
     
 
      @media (min-width: $bootstrap-lg) {
 
        top: 15px;
 
      }
 
     
 
      &:hover {
 
        top: 3px;
 
      }
 
    }
 
   
 
    span {
 
      color: white;
 
    }
 
  }
 
 
 
  .modal-body {
 
    padding: 0;
 
    border: none;
 
    position: relative;
 
   
 
    &::before, &::after {
 
      content: '';
 
      height: 50px;
 
      width: 50px;
 
      display: block;
 
      position: absolute;
 
      background: white;
 
      border-radius: 3px 10px;
 
     
 
      @media (min-width: $bootstrap-md) {
 
        border-radius: 3px 30px;
 
        height: 100px;
 
        width: 100px;
 
      }
 
    }
 
   
 
    &::before {
 
      top: -5px;
 
      left: -5px;
 
     
 
      @media (min-width: $bootstrap-md) {
 
        top: -15px;
 
        left: -15px;
 
      }
 
    }
 
   
 
    &::after {
 
      bottom: -5px;
 
      right: -5px;
 
      z-index: -1;
 
     
 
      @media (min-width: $bootstrap-md) {
 
        bottom: -15px;
 
        right: -15px;
 
      }
 
    }
 
  }
 
 
 
  .modal-footer {
 
    border: none;
 
    margin-top: 60px;
 
   
 
    @media (min-width: $bootstrap-lg) {
 
      margin-top: 40px;
 
    }
 
   
 
    .btn {
 
      margin: auto;
 
      border: solid 2px white;
 
      background: none;
 
      text-transform: uppercase;
 
      font-size: 0.8em;
 
      letter-spacing: 0.1em;
 
      font-weight: bold;
 
      padding: 0.2em 0.7em;
 
     
 
      &:hover {
 
        background: white;
 
        color: black;
 
      }
 
    }
 
  }
 
 
 
  .carousel-control-prev, .carousel-control-next {
 
    font-size: 2em;
 
    top: auto;
 
    opacity: 1;
 
    bottom: -52px;
 
   
 
    @media (min-width: $bootstrap-md) {
 
      top: 0;
 
      opacity: 1;
 
      bottom: 0;
 
    }
 
  }
 
 
 
  .carousel-control-next-icon,  .carousel-control-prev-icon {
 
    height: 30px;
 
    width: 30px;
 
  }
 
 
 
  .carousel-control-prev {
 
    @media (min-width: $bootstrap-md) {
 
      left: -90px;
 
    }
 
  }
 
 
 
  .carousel-control-next {
 
    @media (min-width: $bootstrap-md) {
 
      right: -90px;
 
    }
 
  }
 
 
 
  .carousel-indicators {
 
    bottom: -60px;
 
   
 
    @media (min-width: $bootstrap-lg) {
 
      bottom: -30px;
 
    }
 
   
 
    li {
 
      height: 30px;
 
      border-radius: 100px;
 
      background: none;
 
      border: solid 2px white;
 
     
 
      @media (min-width: $bootstrap-lg) {
 
        height: 10px;
 
      }
 
     
 
      &:hover {
 
        background: white;
 
      }
 
     
 
      &.active {
 
        background: white;
 
      }
 
    }
 
  }
 
}
 
</style>
 
<style>
 
    .switch {
 
  position: relative;
 
  display: inline-block;
 
  width: 60px;
 
  height: 34px;
 
 
 
  @media (min-width: $bootstrap-sm) {
 
    margin: 0;
 
  }
 
}
 
 
/* Hide default HTML checkbox */
 
.switch input {
 
  opacity: 0;
 
  width: 0;
 
  height: 0;
 
}
 
 
/* The slider */
 
.slider {
 
  position: absolute;
 
  cursor: pointer;
 
  top: 0;
 
  left: 0;
 
  right: 0;
 
  bottom: 0;
 
  background-color: #ccc;
 
  -webkit-transition: .4s;
 
  transition: .4s;
 
}
 
 
.slider:before {
 
  position: absolute;
 
  content: "";
 
  height: 26px;
 
  width: 26px;
 
  left: 4px;
 
  bottom: 4px;
 
  background-color: white;
 
  -webkit-transition: .4s;
 
  transition: .4s;
 
}
 
 
input:checked + .slider {
 
  background-color: #2196F3;
 
}
 
 
input:focus + .slider {
 
  box-shadow: 0 0 1px #2196F3;
 
}
 
 
input:checked + .slider:before {
 
  -webkit-transform: translateX(26px);
 
  -ms-transform: translateX(26px);
 
  transform: translateX(26px);
 
}
 
 
 
.switch-wrap {
 
  text-align: center;
 
  background-color: #b1fbc1;
 
  padding: 30px;
 
  border-radius: 3px;
 
  margin: 30px 0 0;
 
 
 
  @media (min-width: $bootstrap-sm) {
 
    position: fixed;
 
    bottom: 0;
 
    display: flex;
 
    flex-direction: row-reverse;
 
    align-items: center;
 
    width: 100%;
 
    justify-content: center;
 
    padding: 10px;
 
  }
 
}
 
 
.switch-text {
 
  display: block;
 
  margin: 0.5em;
 
 
 
  @media (min-width: $bootstrap-sm) {
 
    margin: 0 1em 0 0;
 
  }
 
}
 
 
</style>
 
  
  
Line 428: Line 210:
 
           <h1 class="mx-auto my-0 text-center">The Team</h1>
 
           <h1 class="mx-auto my-0 text-center">The Team</h1>
 
       </div>
 
       </div>
       <div class="container" id="gallery" data-toggle="modal" data-target="#exampleModal">
+
       <div class="container" id="gallery"> <!-- data-toggle="modal" data-target="#exampleModal" -->
 
                 <!-- The Team -->   
 
                 <!-- The Team -->   
 
                  
 
                  
 
                   <div class="row">
 
                   <div class="row">
                     <!-- Team Member 1 -->  
+
                     <!-- Team Member 1 [DATA-TARGET="#carouselExample" DATA-SLIDE-TO="#"] -->  
 
                     <div class="col-xl-3 col-md-6 mb-4 card border-0 shadow">
 
                     <div class="col-xl-3 col-md-6 mb-4 card border-0 shadow">
 
                        
 
                        
                         <img src="https://static.igem.org/mediawiki/2020/0/09/T--RUM-UPRM--Claudia3.jpeg" class="card-img-top" alt="..." data-target="#carouselExample" data-slide-to="0">
+
                         <img src="https://static.igem.org/mediawiki/2020/0/09/T--RUM-UPRM--Claudia3.jpeg" class="card-img-top" alt="...">
 
                         <div class="card-body">
 
                         <div class="card-body">
 
                           <h5 class="card-title mb-0 text-center">Claudia Mañán Mejías</h5>
 
                           <h5 class="card-title mb-0 text-center">Claudia Mañán Mejías</h5>
Line 442: Line 224:
 
                         </div>
 
                         </div>
 
                   </div>  
 
                   </div>  
                    <div style="padding: 5px 5px 5px 5px;"> </div>
+
                 
 
                     <!-- Team Member 2 -->
 
                     <!-- Team Member 2 -->
 
                     <div class="col-xl-3 col-md-6 mb-4 card border-0 shadow">
 
                     <div class="col-xl-3 col-md-6 mb-4 card border-0 shadow">
Line 452: Line 234:
 
                    
 
                    
 
                     </div>
 
                     </div>
                    <div style="padding: 5px 5px 5px 5px;"> </div>
+
                 
 
                     <!-- Team Member 3 -->
 
                     <!-- Team Member 3 -->
 
                     <div class="col-xl-3 col-md-6 mb-4 card border-0 shadow">
 
                     <div class="col-xl-3 col-md-6 mb-4 card border-0 shadow">
                         <img src="https://static.igem.org/mediawiki/2020/thumb/9/9d/T--RUM-UPRM--PAU.jpg/600px-T--RUM-UPRM--PAU.jpg" class="card-img-top" alt="..." data-target="#carouselExample" data-slide-to="2">
+
                         <img src="https://static.igem.org/mediawiki/2020/thumb/9/9d/T--RUM-UPRM--PAU.jpg/600px-T--RUM-UPRM--PAU.jpg" class="card-img-top" alt="...">
 
                         <div class="card-body">
 
                         <div class="card-body">
 
                           <h5 class="card-title mb-0 text-center">Paula Mañán Mejías</h5>
 
                           <h5 class="card-title mb-0 text-center">Paula Mañán Mejías</h5>
Line 462: Line 244:
 
                        
 
                        
 
                     </div>
 
                     </div>
                     <div style="padding: 5px 5px 5px 5px;"> </div>
+
                      
 
                     <!-- Team Member 4 -->
 
                     <!-- Team Member 4 -->
 
                     <div class="col-xl-3 col-md-6 mb-4 card border-0 shadow">
 
                     <div class="col-xl-3 col-md-6 mb-4 card border-0 shadow">
Line 636: Line 418:
 
                         <img src="https://static.igem.org/mediawiki/2020/c/c0/T--RUM-UPRM--CARLOSSS.jpg" class="card-img-top" alt="...">
 
                         <img src="https://static.igem.org/mediawiki/2020/c/c0/T--RUM-UPRM--CARLOSSS.jpg" class="card-img-top" alt="...">
 
                         <div class="card-body text-center">
 
                         <div class="card-body text-center">
                           <h5 class="card-title mb-0">Carlos Leyva Capote</h5>
+
                           <h5 class="card-title mb-0">Carlos A. Leyva Capote</h5>
 
                           <div class="card-text text-black-50">Wiki Programmer & Designer</div>
 
                           <div class="card-text text-black-50">Wiki Programmer & Designer</div>
 
                         </div>
 
                         </div>
Line 643: Line 425:
 
                   </div>
 
                   </div>
 
                   <!-- /.row -->
 
                   <!-- /.row -->
                <br></br> <h4>Graduate Advisors</h4>
+
</div>
 +
 
 +
      <div id="section2">
 +
  <center><h1>Advisors & PI's</h1> </center>
 +
<br></br> <h4>Graduate Advisors</h4>
 
                   <div class="row">
 
                   <div class="row">
 
                     <!-- Team Member 21 -->  
 
                     <!-- Team Member 21 -->  
Line 667: Line 453:
 
                 <!-- /.row -->
 
                 <!-- /.row -->
 
                   <h4>Primary Investigators</h4>
 
                   <h4>Primary Investigators</h4>
                  <div class="row">
+
                <center>  <div class="row">
 
                     <!-- Team Member 23 -->
 
                     <!-- Team Member 23 -->
 
                     <div class="col-md-3 card border-0 shadow">
 
                     <div class="col-md-3 card border-0 shadow">
Line 682: Line 468:
 
                         <div class="card-body text-center">
 
                         <div class="card-body text-center">
 
                           <h5 class="card-title mb-0">Dr. Patricia Ortiz Bermúdez</h5>
 
                           <h5 class="card-title mb-0">Dr. Patricia Ortiz Bermúdez</h5>
                           <div class="card-text text-black-50">Co-Primary Investigator</div>
+
                           <div class="card-text text-black-50">Co-Primary Investigator</div> </center>
 
                         </div>
 
                         </div>
 
                        
 
                        
Line 690: Line 476:
 
                 </div>
 
                 </div>
 
                 <!-- /.container -->
 
                 <!-- /.container -->
 
<!-- Modal -->
 
<!--
 
This part is straight out of Bootstrap docs. Just a carousel inside a modal.
 
-->
 
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-hidden="true">
 
  <div class="modal-dialog" role="document">
 
    <div class="modal-content">
 
      <div class="modal-header">
 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 
          <span aria-hidden="true">&times;</span>
 
        </button>
 
      </div>
 
      <div class="modal-body">
 
        <div id="carouselExample" class="carousel slide" data-ride="carousel">
 
          <ol class="carousel-indicators">
 
            <li data-target="#carouselExample" data-slide-to="0" class="active"></li>
 
            <li data-target="#carouselExample" data-slide-to="1"></li>
 
            <li data-target="#carouselExample" data-slide-to="2"></li>
 
            <li data-target="#carouselExample" data-slide-to="3"></li>
 
            <li data-target="#carouselExample" data-slide-to="4"></li>
 
            <li data-target="#carouselExample" data-slide-to="5"></li>
 
            <li data-target="#carouselExample" data-slide-to="6"></li>
 
          </ol>
 
          <div class="carousel-inner">
 
            <div class="carousel-item active">
 
              <img class="d-block w-100" src="https://static.igem.org/mediawiki/2020/9/93/T--RUM-UPRM--Paula.png" alt="First slide">
 
            </div>
 
            <div class="carousel-item">
 
              <img class="d-block w-100" src="https://static.igem.org/mediawiki/2020/d/df/T--RUM-UPRM--natalia.png" alt="Second slide">
 
            </div>
 
            <div class="carousel-item">
 
              <img class="d-block w-100" src="https://static.igem.org/mediawiki/2020/3/35/T--RUM-UPRM--rigo.png" alt="Third slide">
 
            </div>
 
            <div class="carousel-item">
 
              <img class="d-block w-100" src="https://static.igem.org/mediawiki/2020/e/e2/T--RUM-UPRM--elmer.png" alt="Fourth slide">
 
            </div>
 
          </div>
 
          <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
 
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
 
            <span class="sr-only">Previous</span>
 
          </a>
 
          <a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
 
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
 
            <span class="sr-only">Next</span>
 
          </a>
 
        </div>
 
      </div>
 
      <div class="modal-footer">
 
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
 
      </div>
 
    </div>
 
  </div>
 
 
</div>
 
</div>
 +
       
 +
      <div id="section3">       
 +
        <center> <h1>Biographies</h1> </center>
  
 +
<center>
  
 
<center>
 
  
 
<style>
 
<style>
Line 799: Line 534:
 
</style>
 
</style>
  
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="false">
+
<div id="carouseldir" class="carousel slide" data-ride="carousel" data-interval="false">
 
   <ol class="carousel-indicators">
 
   <ol class="carousel-indicators">
 
     <li data-target="#carouseldir" data-slide-to="0" class="active"></li>
 
     <li data-target="#carouseldir" data-slide-to="0" class="active"></li>
Line 815: Line 550:
 
     </div>
 
     </div>
 
     <div class="carousel-item">
 
     <div class="carousel-item">
       <img class="d-block w-100" img src="https://static.igem.org/mediawiki/2020/c/ca/T--RUM-UPRM--LuisG.png" alt="Second slide">
+
       <img class="d-block w-100" img src="https://static.igem.org/mediawiki/2020/e/e8/T--RUM-UPRM--LuisM.png" alt="Second slide">
 
     </div>
 
     </div>
 
     <div class="carousel-item">
 
     <div class="carousel-item">
Line 833: Line 568:
 
       <img class="d-block w-100" img src="https://static.igem.org/mediawiki/2020/b/bd/T--RUM-UPRM--Marieli.png" alt="Second slide">
 
       <img class="d-block w-100" img src="https://static.igem.org/mediawiki/2020/b/bd/T--RUM-UPRM--Marieli.png" alt="Second slide">
 
     </div>
 
     </div>
<div class="carousel-item">
+
 
 
   
 
   
  
Line 848: Line 583:
 
</div>
 
</div>
 
</center>
 
</center>
 +
<center><h2>Executive Board </h2></center>
 +
<br></br>
  
  
 +
<center>
  
 +
<style>
 +
.carousel {
 +
width: 60%; height:50%;
 +
}
  
 +
.carousel-inner > .item > img,
 +
.carousel-inner > .item > a > img{
 +
width: 90;
 +
margin: auto;
 +
}
 +
.container{
 +
border: 3px;
 +
}
 +
.carousel-control-next,
 +
.carousel-control-prev {
 +
    filter:invert(100%);
 +
}
 +
ol.carousel-indicators {
 +
  position: absolute;
 +
  bottom: 5px;
 +
  margin: 0;
 +
  left: 0;
 +
  right: 0;
 +
  width: auto;
 +
}
  
 +
ol.carousel-indicators li,
 +
ol.carousel-indicators li.active {
 +
  width: 1rem;
 +
  height: 1rem;
 +
  margin: 0;
 +
  border-radius: 50%;
 +
  border: 0;
 +
  background: transparent;
 +
}
  
 +
ol.carousel-indicators li {
 +
  background: rgba(192,192,192,0.7);
 +
  margin-left: .5rem;
 +
  margin-right: .5rem;
 +
}
  
 +
ol.carousel-indicators li.active {
 +
  background: gray;
 +
}
  
  
  
 +
</style>
  
 +
<div id="carouselbiol" class="carousel slide" data-ride="carousel" data-interval="false">
 +
  <ol class="carousel-indicators">
 +
    <li data-target="#carouselbiol" data-slide-to="0" class="active"></li>
 +
    <li data-target="#carouselbiol" data-slide-to="1"></li>
 +
    <li data-target="#carouselbiol" data-slide-to="2"></li>
 +
<li data-target="#carouselbiol" data-slide-to="3"></li>
 +
<li data-target="#carouselbiol" data-slide-to="4"></li>
 +
<li data-target="#carouselbiol" data-slide-to="5"></li>
 +
<li data-target="#carouselbiol" data-slide-to="6"></li>
 +
<li data-target="#carouselbiol" data-slide-to="7"></li>
 +
<li data-target="#carouselbiol" data-slide-to="8"></li>
 +
  </ol>
 +
  <div class="carousel-inner">
 +
    <div class="carousel-item active">
 +
      <img class="d-block w-100" img src="https://static.igem.org/mediawiki/2020/0/02/T--RUM-UPRM--patricia.png" alt="First slide">
 +
    </div>
 +
    <div class="carousel-item">
 +
      <img class="d-block w-100" img src="https://static.igem.org/mediawiki/2020/e/e2/T--RUM-UPRM--elmer.png" alt="Second slide">
 +
    </div>
 +
    <div class="carousel-item">
 +
      <img class="d-block w-100" img src="https://static.igem.org/mediawiki/2020/b/be/T--RUM-UPRM--amanda.png" alt="Third slide">
 +
    </div>
 +
 +
<div class="carousel-item">
 +
      <img class="d-block w-100" img src="https://static.igem.org/mediawiki/2020/3/35/T--RUM-UPRM--rigo.png
 +
" alt="Third slide">
 +
    </div>
 +
<div class="carousel-item">
 +
      <img class="d-block w-100" img src="https://static.igem.org/mediawiki/2020/0/0c/T--RUM-UPRM--elimar.png" alt="Second slide">
 +
    </div>
 +
<div class="carousel-item">
 +
      <img class="d-block w-100" img src="https://static.igem.org/mediawiki/2020/6/63/T--RUM-UPRM--miguel.png" alt="Second slide">
 +
    </div>
 +
<div class="carousel-item">
 +
      <img class="d-block w-100" img src="https://static.igem.org/mediawiki/2020/c/ca/T--RUM-UPRM--LuisG.png" alt="Second slide">
 +
    </div>
 +
<div class="carousel-item">
 +
      <img class="d-block w-100" img src="https://static.igem.org/mediawiki/2020/4/43/T--RUM-UPRM--melissa.png" alt="Second slide">
 +
    </div>
 +
<div class="carousel-item">
 +
      <img class="d-block w-100" img src="https://static.igem.org/mediawiki/2020/7/70/T--RUM-UPRM--elan.png" alt="Second slide">
 +
    </div>
 +
 +
 +
 +
 +
  </div>
 +
  <a class="carousel-control-prev" href="#carouselbiol" role="button" data-slide="prev">
 +
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
 +
    <span class="sr-only">Previous</span>
 +
</a>
 +
  <a class="carousel-control-next" href="#carouselbiol" role="button" data-slide="next">
 +
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
 +
    <span class="sr-only">Next</span>
 +
  </a>
 +
</div>
 +
</center>
 +
<center><h2>Biology Team </h2></center>
 +
<br></br>
 +
 +
 +
<center>
 +
 +
<style>
 +
.carousel {
 +
width: 60%; height:50%;
 +
}
 +
 +
.carousel-inner > .item > img,
 +
.carousel-inner > .item > a > img{
 +
width: 90;
 +
margin: auto;
 +
}
 +
.container{
 +
border: 3px;
 +
}
 +
.carousel-control-next,
 +
.carousel-control-prev {
 +
    filter:invert(100%);
 +
}
 +
ol.carousel-indicators {
 +
  position: absolute;
 +
  bottom: 5px;
 +
  margin: 0;
 +
  left: 0;
 +
  right: 0;
 +
  width: auto;
 +
}
 +
 +
ol.carousel-indicators li,
 +
ol.carousel-indicators li.active {
 +
  width: 1rem;
 +
  height: 1rem;
 +
  margin: 0;
 +
  border-radius: 50%;
 +
  border: 0;
 +
  background: transparent;
 +
}
 +
 +
ol.carousel-indicators li {
 +
  background: rgba(192,192,192,0.7);
 +
  margin-left: .5rem;
 +
  margin-right: .5rem;
 +
}
 +
 +
ol.carousel-indicators li.active {
 +
  background: gray;
 +
}
 +
 +
 +
 +
</style>
 +
 +
<div id="carouselinge" class="carousel slide" data-ride="carousel" data-interval="false">
 +
  <ol class="carousel-indicators">
 +
    <li data-target="#carouselinge" data-slide-to="0" class="active"></li>
 +
    <li data-target="#carouselinge" data-slide-to="1"></li>
 +
    <li data-target="#carouselinge" data-slide-to="2"></li>
 +
<li data-target="#carouseldir" data-slide-to="3"></li>
 +
 +
 +
  </ol>
 +
  <div class="carousel-inner">
 +
    <div class="carousel-item active">
 +
      <img class="d-block w-100" img src="https://static.igem.org/mediawiki/2020/e/e9/T--RUM-UPRM--mariela.png" alt="First slide">
 +
    </div>
 +
    <div class="carousel-item">
 +
      <img class="d-block w-100" img src="https://static.igem.org/mediawiki/2020/d/df/T--RUM-UPRM--natalia.png" alt="Second slide">
 +
    </div>
 +
    <div class="carousel-item">
 +
      <img class="d-block w-100" img src="https://static.igem.org/mediawiki/2020/2/26/T--RUM-UPRM--claudia.png" alt="Third slide">
 +
    </div>
 +
 +
<div class="carousel-item">
 +
      <img class="d-block w-100" img src="https://static.igem.org/mediawiki/2020/a/ac/T--RUM-UPRM--Carlos.png" alt="Third slide">
 +
    </div>
 +
 +
 +
 +
  </div>
 +
  <a class="carousel-control-prev" href="#carouselinge" role="button" data-slide="prev">
 +
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
 +
    <span class="sr-only">Previous</span>
 +
</a>
 +
  <a class="carousel-control-next" href="#carouselinge" role="button" data-slide="next">
 +
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
 +
    <span class="sr-only">Next</span>
 +
  </a>
 +
</div>
 +
</center>
 +
<center><h2>Engineering Team </h2></center>
 +
<br></br>
 +
 +
<center>
 +
 +
<style>
 +
.carousel {
 +
width: 60%; height:50%;
 +
}
 +
 +
.carousel-inner > .item > img,
 +
.carousel-inner > .item > a > img{
 +
width: 90;
 +
margin: auto;
 +
}
 +
.container{
 +
border: 3px;
 +
}
 +
.carousel-control-next,
 +
.carousel-control-prev {
 +
    filter:invert(100%);
 +
}
 +
ol.carousel-indicators {
 +
  position: absolute;
 +
  bottom: 5px;
 +
  margin: 0;
 +
  left: 0;
 +
  right: 0;
 +
  width: auto;
 +
}
 +
 +
ol.carousel-indicators li,
 +
ol.carousel-indicators li.active {
 +
  width: 1rem;
 +
  height: 1rem;
 +
  margin: 0;
 +
  border-radius: 50%;
 +
  border: 0;
 +
  background: transparent;
 +
}
 +
 +
ol.carousel-indicators li {
 +
  background: rgba(192,192,192,0.7);
 +
  margin-left: .5rem;
 +
  margin-right: .5rem;
 +
}
 +
 +
ol.carousel-indicators li.active {
 +
  background: gray;
 +
}
 +
 +
 +
 +
</style>
 +
 +
<div id="carouselsocial" class="carousel slide" data-ride="carousel" data-interval="false">
 +
  <ol class="carousel-indicators">
 +
    <li data-target="#carouselsocial" data-slide-to="0" class="active"></li>
 +
    <li data-target="#carouselsocial" data-slide-to="1"></li>
 +
    <li data-target="#carouselsocial" data-slide-to="2"></li>
 +
 +
 +
 +
  </ol>
 +
  <div class="carousel-inner">
 +
    <div class="carousel-item active">
 +
      <img class="d-block w-100" img src="https://static.igem.org/mediawiki/2020/d/d1/T--RUM-UPRM--gabriela.png" alt="First slide">
 +
    </div>
 +
    <div class="carousel-item">
 +
      <img class="d-block w-100" img src="https://static.igem.org/mediawiki/2020/3/3b/T--RUM-UPRM--emily.png" alt="Second slide">
 +
    </div>
 +
    <div class="carousel-item">
 +
      <img class="d-block w-100" img src="https://static.igem.org/mediawiki/2020/c/cb/T--RUM-UPRM--ana.png" alt="Third slide">
 +
    </div>
 +
 +
 +
 +
 +
 +
  </div>
 +
  <a class="carousel-control-prev" href="#carouselsocial" role="button" data-slide="prev">
 +
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
 +
    <span class="sr-only">Previous</span>
 +
</a>
 +
  <a class="carousel-control-next" href="#carouselsocial" role="button" data-slide="next">
 +
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
 +
    <span class="sr-only">Next</span>
 +
  </a>
 +
</div>
 +
</center>
 +
<center><h2>Social Impact Team </h2></center>
 +
<br></br>
 +
 +
<center>
 +
 +
<style>
 +
.carousel {
 +
width: 60%; height:50%;
 +
}
 +
 +
.carousel-inner > .item > img,
 +
.carousel-inner > .item > a > img{
 +
width: 90;
 +
margin: auto;
 +
}
 +
.container{
 +
border: 3px;
 +
}
 +
.carousel-control-next,
 +
.carousel-control-prev {
 +
    filter:invert(100%);
 +
}
 +
ol.carousel-indicators {
 +
  position: absolute;
 +
  bottom: 5px;
 +
  margin: 0;
 +
  left: 0;
 +
  right: 0;
 +
  width: auto;
 +
}
 +
 +
ol.carousel-indicators li,
 +
ol.carousel-indicators li.active {
 +
  width: 1rem;
 +
  height: 1rem;
 +
  margin: 0;
 +
  border-radius: 50%;
 +
  border: 0;
 +
  background: transparent;
 +
}
 +
 +
ol.carousel-indicators li {
 +
  background: rgba(192,192,192,0.7);
 +
  margin-left: .5rem;
 +
  margin-right: .5rem;
 +
}
 +
 +
ol.carousel-indicators li.active {
 +
  background: gray;
 +
}
 +
 +
 +
 +
</style>
 +
 +
<div id="carouselad" class="carousel slide" data-ride="carousel" data-interval="false">
 +
  <ol class="carousel-indicators">
 +
    <li data-target="#carouselad" data-slide-to="0" class="active"></li>
 +
    <li data-target="#carouselad" data-slide-to="1"></li>
 +
 
 +
 +
 +
 +
  </ol>
 +
  <div class="carousel-inner">
 +
    <div class="carousel-item active">
 +
      <img class="d-block w-100" img src="https://static.igem.org/mediawiki/2020/8/80/T--RUM-UPRM--VictorbioOFICIAL.png" alt="First slide">
 +
    </div>
 +
    <div class="carousel-item">
 +
      <img class="d-block w-100" img src="https://static.igem.org/mediawiki/parts/b/bc/T--RUM-UPRM--alejandro24.png" alt="Second slide">
 +
    </div>
 +
 +
 +
 +
 +
 +
 +
  </div>
 +
  <a class="carousel-control-prev" href="#carouselad" role="button" data-slide="prev">
 +
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
 +
    <span class="sr-only">Previous</span>
 +
</a>
 +
  <a class="carousel-control-next" href="#carouselad" role="button" data-slide="next">
 +
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
 +
    <span class="sr-only">Next</span>
 +
  </a>
 +
</div>
 +
</center>
 +
<center><h2>Graduate Advisors </h2></center>
 +
<br></br>
 +
 +
<center>
 +
 +
<style>
 +
.carousel {
 +
width: 60%; height:50%;
 +
}
 +
 +
.carousel-inner > .item > img,
 +
.carousel-inner > .item > a > img{
 +
width: 90;
 +
margin: auto;
 +
}
 +
.container{
 +
border: 3px;
 +
}
 +
.carousel-control-next,
 +
.carousel-control-prev {
 +
    filter:invert(100%);
 +
}
 +
ol.carousel-indicators {
 +
  position: absolute;
 +
  bottom: 5px;
 +
  margin: 0;
 +
  left: 0;
 +
  right: 0;
 +
  width: auto;
 +
}
 +
 +
ol.carousel-indicators li,
 +
ol.carousel-indicators li.active {
 +
  width: 1rem;
 +
  height: 1rem;
 +
  margin: 0;
 +
  border-radius: 50%;
 +
  border: 0;
 +
  background: transparent;
 +
}
 +
 +
ol.carousel-indicators li {
 +
  background: rgba(192,192,192,0.7);
 +
  margin-left: .5rem;
 +
  margin-right: .5rem;
 +
}
 +
 +
ol.carousel-indicators li.active {
 +
  background: gray;
 +
}
 +
 +
 +
 +
</style>
 +
 +
<div id="carouselpi" class="carousel slide" data-ride="carousel" data-interval="false">
 +
  <ol class="carousel-indicators">
 +
    <li data-target="#carouselpi" data-slide-to="0" class="active"></li>
 +
    <li data-target="#carouselpi" data-slide-to="1"></li>
 +
 
 +
 +
 +
 +
  </ol>
 +
  <div class="carousel-inner">
 +
    <div class="carousel-item active">
 +
      <img class="d-block w-100" img src="https://static.igem.org/mediawiki/parts/9/96/T--RUM-UPRM--Dr.Rios21.png" alt="First slide">
 +
    </div>
 +
    <div class="carousel-item">
 +
      <img class="d-block w-100" img src="https://static.igem.org/mediawiki/2020/c/c7/T--RUM-UPRM--Victorbio.png" alt="Second slide">
 +
    </div>
 +
 +
 +
 +
 +
 +
 +
  </div>
 +
  <a class="carousel-control-prev" href="#carouselpi" role="button" data-slide="prev">
 +
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
 +
    <span class="sr-only">Previous</span>
 +
</a>
 +
  <a class="carousel-control-next" href="#carouselpi" role="button" data-slide="next">
 +
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
 +
    <span class="sr-only">Next</span>
 +
  </a>
 +
</div>
 +
</center>
 +
</div>
 +
 +
</div>
 +
    </div>
 +
  </div>
 +
</div>
 +
</div>
 +
<center><h2>Principal Investigators</h2></center>
 +
<br></br>
 +
<script>
 +
window.onscroll = function() {myFunction()};
 +
 +
var myScrollspy = document.getElementById("myScrollspy");
 +
var sticky = myScrollspy.offsetTop+70px;
 +
 +
function myFunction() {
 +
  if (window.pageYOffset >= sticky) {
 +
    myScrollspy.classList.add("sticky")
 +
  } else {
 +
    myScrollspy.classList.remove("sticky");
 +
  }
 +
}
 +
</script>
 
 +
</body>
 +
</html>
  
</section>
+
{{RUM-UPRM/Footer}}
</html>{{RUM-UPRM/Footer}}
+

Latest revision as of 04:00, 28 October 2020



RUM-UPRM Wiki Source Code

Members

Team Members

The Team

Advisors & PI's



Graduate Advisors

...
Alejandro J. Mercado Capote
Graduate Student Advisor


...
Victor O. López Ramirez
Graduate Student Advisor


Primary Investigators

...
Dr. Carlos Ríos Velázquez
Co-Primary Investigator
...
Dr. Patricia Ortiz Bermúdez
Co-Primary Investigator

Biographies

Executive Board



Biology Team



Engineering Team



Social Impact Team



Graduate Advisors



Principal Investigators