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

(Undo revision 403497 by Machgo (talk))
Line 1: Line 1:
 
{{Ruperto_Carola}}
 
{{Ruperto_Carola}}
 
<html>
 
<html>
 +
 +
<style>
 +
 +
body {
 +
  background: black;
 +
}
 +
 +
.carousel-indicators {
 +
    position: static;
 +
 
 +
  .item {
 +
   
 +
    &.active {
 +
      background: transparent;
 +
     
 +
      img {
 +
        opacity: 0.7;
 +
      }
 +
    }
 +
  }
 +
}
 +
 +
</style>
 +
 +
 +
 +
 +
 +
 +
 +
 +
  
  
Line 120: Line 152:
 
<div class="card-body">
 
<div class="card-body">
  
 +
<div class="product-slider">
 +
  <div id="carousel" class="carousel slide" data-ride="carousel">
 +
    <div class="carousel-inner">
 +
      <div class="item active" data-thumb="0"> <img src="http://placehold.it/1600x700?text=Product+01"> </div>
 +
      <div class="item" data-thumb="1"> <img src="http://placehold.it/1600x700?text=Product+02"> </div>
 +
      <div class="item" data-thumb="2"> <img src="http://placehold.it/1600x700?text=Product+03"> </div>
 +
      <div class="item" data-thumb="3"> <img src="http://placehold.it/1600x700?text=Product+04"> </div>
 +
      <div class="item" data-thumb="4"> <img src="http://placehold.it/1600x700?text=Product+05"> </div>
 +
      <div class="item" data-thumb="5"> <img src="http://placehold.it/1600x700?text=Product+06"> </div>
 +
      <div class="item" data-thumb="6"> <img src="http://placehold.it/1600x700?text=Product+07"> </div>
 +
      <div class="item" data-thumb="7"> <img src="http://placehold.it/1600x700?text=Product+08"> </div>
 +
      <div class="item" data-thumb="8"> <img src="http://placehold.it/1600x700?text=Product+09"> </div>
 +
      <div class="item" data-thumb="9"> <img src="http://placehold.it/1600x700?text=Product+10"> </div>
 +
    </div>
 +
  </div>
 +
  <div class="clearfix">
 +
    <div id="thumbcarousel" class="carousel slide" data-interval="false">
 +
      <div class="carousel-inner">
 +
        <div class="item active">
 +
          <div data-target="#carousel" data-slide-to="0" class="thumb showing"><img src="http://placehold.it/100x80?text=Thumb+01"></div>
 +
          <div data-target="#carousel" data-slide-to="1" class="thumb"><img src="http://placehold.it/100x80?text=Thumb+02"></div>
 +
          <div data-target="#carousel" data-slide-to="2" class="thumb"><img src="http://placehold.it/100x80?text=Thumb+03"></div>
 +
          <div data-target="#carousel" data-slide-to="3" class="thumb"><img src="http://placehold.it/100x80?text=Thumb+04"></div>
 +
          <div data-target="#carousel" data-slide-to="4" class="thumb"><img src="http://placehold.it/100x80?text=Thumb+05"></div>
 +
        </div>
 +
        <div class="item">
 +
          <div data-target="#carousel" data-slide-to="5" class="thumb"><img src="http://placehold.it/100x80?text=Thumb+06"></div>
 +
          <div data-target="#carousel" data-slide-to="6" class="thumb"><img src="http://placehold.it/100x80?text=Thumb+07"></div>
 +
          <div data-target="#carousel" data-slide-to="7" class="thumb"><img src="http://placehold.it/100x80?text=Thumb+08"></div>
 +
          <div data-target="#carousel" data-slide-to="8" class="thumb"><img src="http://placehold.it/100x80?text=Thumb+09"></div>
 +
          <div data-target="#carousel" data-slide-to="9" class="thumb"><img src="http://placehold.it/100x80?text=Thumb+10"></div>
 +
        </div>
 +
      </div>
 +
      <!-- /carousel-inner -->
 +
      <a class="left carousel-control" href="#thumbcarousel" role="button" data-slide="prev"> <i class="fa fa-angle-left" aria-hidden="true"></i> </a> <a class="right carousel-control" href="#thumbcarousel" role="button" data-slide="next"><i class="fa fa-angle-right" aria-hidden="true"></i> </a> </div>
 +
    <!-- /thumbcarousel -->
 +
   
 +
  </div>
 +
</div>
  
  

Revision as of 15:17, 20 October 2019

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel augue a nibh scelerisque hendrerit vitae vitae erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel augue a nibh scelerisque hendrerit vitae vitae erat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel augue a nibh scelerisque hendrerit vitae vitae erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel augue a nibh scelerisque hendrerit vitae vitae erat. \[ \binom{N}{k} \] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel augue a nibh scelerisque hendrerit vitae vitae erat.

This is some text within a card body.

This is the second paragraph.

This is some text within a card body. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel augue a nibh scelerisque hendrerit vitae vitae erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel augue a nibh scelerisque hendrerit vitae vitae
This is the second paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel augue a nibh scelerisque hendrerit vitae vitae erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel augue a nibh scelerisque hendrerit vitae vitae erat.

This is some text within a card body. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel augue a nibh scelerisque hendrerit vitae vitae erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel augue a nibh scelerisque hendrerit vitae vitae

This is some text used to test the expanding property. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel augue a nibh scelerisque hendrerit vitae vitae erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel augue a nibh scelerisque hendrerit vitae. Again.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel augue a nibh scelerisque hendrerit vitae vitae erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel augue a nibh scelerisque hendrerit vitae vitae erat.

Insert expandable description here

This is some text used to test the expanding property. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel augue a nibh scelerisque hendrerit vitae vitae erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel augue a nibh scelerisque hendrerit vitae. Again.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel augue a nibh scelerisque hendrerit vitae vitae erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel augue a nibh scelerisque hendrerit vitae vitae erat.

Insert expandable description here trinci1969

References