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

Line 114: Line 114:
  
  
−
<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 124:
 
           <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 455: Line 151:
 
                     <!-- 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 636: Line 332:
 
                         <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 691: Line 387:
 
                 <!-- /.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>
 
  
 
<center><h2>Executive Board </h2></center>
 
<center><h2>Executive Board </h2></center>

Revision as of 03:24, 28 October 2020



RUM-UPRM Wiki Source Code

Stack Multipurpose HTML Template

The Team

Executive Board



Biology Team



Engineering Team



Social Impact Team



Graduate Advisors



Principal Investigators



Our Sponsors

Amgen Snapgene UPRM Goya Genscript PRABIA MolecularCloud MatLab IDT ReviveRestore Twist

Follows Us!