Difference between revisions of "Team:Ruperto Carola/TestAlpaca2"

Line 2: Line 2:
  
 
<html>
 
<html>
 +
 +
<style>
 +
body {
 +
  background: black;
 +
}
 +
 +
.carousel-indicators {
 +
    position: static;
 +
 
 +
  .item {
 +
   
 +
    &.active {
 +
      background: transparent;
 +
     
 +
      img {
 +
        opacity: 0.7;
 +
      }
 +
    }
 +
  }
 +
}
 +
</style>
  
 
<div class="container-fluid" style="background-image: url(https://static.igem.org/mediawiki/2019/9/91/T--Ruperto_Carola--Illustration_Modelling.png);" id="banner">
 
<div class="container-fluid" style="background-image: url(https://static.igem.org/mediawiki/2019/9/91/T--Ruperto_Carola--Illustration_Modelling.png);" id="banner">
Line 15: Line 36:
 
<div class="container-fluid">
 
<div class="container-fluid">
  
−
Testing
+
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
 +
  <div class="carousel-inner">
 +
    <div class="carousel-item active">
 +
      <img class="d-block w-100" src="https://images.pexels.com/photos/954599/pexels-photo-954599.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="First slide">
 +
    </div>
 +
    <div class="carousel-item">
 +
      <img class="d-block w-100" src="https://images.pexels.com/photos/1166643/pexels-photo-1166643.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Second slide">
 +
    </div>
 +
    <div class="carousel-item">
 +
      <img class="d-block w-100" src="https://images.pexels.com/photos/551611/pexels-photo-551611.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Third slide">
 +
    </div>
 +
  </div>
 +
  <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
 +
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
 +
    <span class="sr-only">Next</span>
 +
  </a>
 +
<!--  <ol class="carousel-indicators">
 +
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active">
 +
      <img src="https://pbs.twimg.com/profile_images/905183271046193153/q_P1KBUJ_400x400.jpg" class="img-fluid"/>
 +
    </li>
 +
    <li data-target="#carouselExampleIndicators" data-slide-to="1">
 +
      <img src="https://pbs.twimg.com/profile_images/905183271046193153/q_P1KBUJ_400x400.jpg" class="img-fluid"/>
 +
    </li>
 +
    <li data-target="#carouselExampleIndicators" data-slide-to="2">
 +
      <img src="https://pbs.twimg.com/profile_images/905183271046193153/q_P1KBUJ_400x400.jpg" class="img-fluid"/>
 +
    </li>
 +
  </ol> -->
 +
  <div class="container pt-4 pb-5">
 +
    <div class="row carousel-indicators">
 +
      <div class="col-md-4 item">
 +
        <img src="https://pbs.twimg.com/profile_images/905183271046193153/q_P1KBUJ_400x400.jpg" class="img-fluid" data-target="#carouselExampleIndicators" data-slide-to="0"/>
 +
      </div>
 +
      <div class="col-md-4 item">
 +
        <img src="https://pbs.twimg.com/profile_images/905183271046193153/q_P1KBUJ_400x400.jpg" class="img-fluid" data-target="#carouselExampleIndicators" data-slide-to="1"/>
 +
      </div>
 +
      <div class="col-md-4 item">
 +
        <img src="https://pbs.twimg.com/profile_images/905183271046193153/q_P1KBUJ_400x400.jpg" class="img-fluid" data-target="#carouselExampleIndicators" data-slide-to="2"/>
 +
      </div>
 +
    </div>
 +
  </div>
 +
</div>
  
  

Revision as of 11:39, 21 October 2019