Card Bootstrap4 02

<!DOCTYPE html>
<html>
<head>
  <title>Card Bootstrap4 02 | par NGLESSON</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Mezgani said">
  <meta name="copyright" content="NGLESSON">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <header></header>
    <main>
      <section class="cinco mb-5">
        <div class="container mt-5">
          <div class="row">

            <div class="col-sm-12 col-md-6 col-lg-4 ">
              <div class="card" style="width: 18rem;">
                <img src="http://placeimg.com/600/400/cars" class="card-img-top" alt="...">
                <div class="card-body">
                  <h3 class="card-title">Artcile </h3>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn btn-primary float-right">Go somewhere </a>
                  <div class="clearfix"></div>
                </div>
              </div>
            </div>
            <div class="col-sm-12 col-md-6 col-lg-4 ">
              <div class="card" style="width: 18rem;">
                <img src="http://placeimg.com/600/400/cars" class="card-img-top" alt="...">
                <div class="card-body">
                  <h3 class="card-title">Artcile </h3>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn btn-primary float-right">Go somewhere </a>
                  <div class="clearfix"></div>
                </div>
              </div>
            </div>
            <div class="col-sm-12 col-md-6 col-lg-4 ">
              <div class="card" style="width: 18rem;">
                <img src="http://placeimg.com/600/400/cars" class="card-img-top" alt="...">
                <div class="card-body">
                  <h3 class="card-title">Artcile </h3>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn btn-primary float-right">Go somewhere </a>
                  <div class="clearfix"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
       </section> 
      </main>
      <footer></footer>
    </body>
  </html>
img{
    height:150px;
    width:100%;
  }
  
  .item{
    padding-left:5px;
    padding-right:5px;
  }
  .item-card{
    transition:0.5s;
    cursor:pointer;
  }
  .item-card-title{  
    font-size:15px;
    transition:1s;
    cursor:pointer;
  }
  .item-card-title i{  
    font-size:15px;
    transition:1s;
    cursor:pointer;
    color:#ffa710
  }
  .card-title i:hover{
    transform: scale(1.25) rotate(100deg); 
    color:#18d4ca;
    
  }
  .card:hover{
    transform: scale(1.05);
    box-shadow: 10px 10px 15px rgba(0,0,0,0.3);
  }
  .card-text{
    height:80px;  
  }
  
  .card::before, .card::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: scale3d(0, 0, 1);
    transition: transform .3s ease-out 0s;
    background: rgba(255, 255, 255, 0.1);
    content: '';
    pointer-events: none;
  }
  .card::before {
    transform-origin: left top;
  }
  .card::after {
    transform-origin: right bottom;
  }
  .card:hover::before, .card:hover::after, .card:focus::before, .card:focus::after {
    transform: scale3d(1, 1, 1);
  }

                                    
texte animate effects style 01

texte animate effects style 01

page scroll progress bar

page scroll progress bar

login page green one

login page green one

Menu aside style01 slide out

Menu aside style01 slide out

Login Bootstrap3

Login Bootstrap3

Image hover 03

Image hover 03

Geocoded Locations

Geocoded Locations

Form login b4 01

Form login b4 01

Elastic Content Slider

Elastic Content Slider

Background div gradient

Background div gradient

Ajouter supprimer dynamiquement des lignes sur un tableau

Ajouter supprimer dynamiquement des lignes sur un tableau

3D Gallery with CSS3 and jQuery

3D Gallery with CSS3 and jQuery