Card Bootstrap4 01

<!DOCTYPE html>
<html>
<head>
  <title>Card-Bootstrap-01 | 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>
    <div class="container">
        <div class="col-md-12 d-md-flex cardarea">
          <div class="col-md-4">
            <div class="card" style="width: 18rem;">
              <img src="https://raw.githubusercontent.com/Barracuda1337/simplebootstrapcard/master/assets/img/1.jpg" class="card-img-top" alt="...">
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <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="newbutton btn btn-mauve"><i class="fa fa-link"></i> More</a>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card" style="width: 18rem;">
              <img src="https://raw.githubusercontent.com/Barracuda1337/simplebootstrapcard/master/assets/img/2.jpg" class="card-img-top" alt="...">
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <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="newbutton btn btn-mauve"><i class="fa fa-link"></i> More</a>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card" style="width: 18rem;">
              <img src="https://raw.githubusercontent.com/Barracuda1337/simplebootstrapcard/master/assets/img/3.jpg" class="card-img-top" alt="...">
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <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="newbutton btn btn-mauve"><i class="fa fa-link"></i> More</a>
              </div>
            </div>
          </div>
        </div>
      </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>  
</body>
</html>
@import "https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap";

.cardarea {
    padding-top: 100px;
}

body {
    width: auto;
    height: 100vh;
    top: 0px;
    left: 0px;
    background: rgba(140, 0, 255, .81);
}

.card {
    margin-top: 10px;
    border: 0px transparent !important;
    -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.35);
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.35);
    text-align: center !important;
}

.card img {
    width: auto;
    height: 160px !important;
}

body {
    font-weight: 300;
    line-height: 1.7;
    font-family: poppins, sans-serif !important;
}

.card .newbutton {
    transition: all 0.3s ease-out;
    border: 0px transparent !important;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);
    text-align: center !important;
}

.card .newbutton:hover {
    transition: all 0.3s ease-in;
    -webkit-box-shadow: 0 5px 13px 0px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 0 5px 13px 0px rgba(0, 0, 0, 0.35);
    box-shadow: 0 5px 13px 0px rgba(0, 0, 0, 0.35);
}

.btn,
.btn-mauve {
    border: none !important;
    background: rgba(140, 0, 255, .81);
    color: #FFF;
}

.btn-mauve:hover {
    color: rgba(140, 0, 255, .81);
    background: #FFF;
}

                                    
Texte Block Posts Style01

Texte Block Posts Style01

SwiperJS style01

SwiperJS style01

Social Media Icons

Social Media Icons

Profile page with b4

Profile page with b4

Organization Chart

Organization Chart

Loading Style snake

Loading Style snake

Input range slider HTML style02

Input range slider HTML style02

Image hover 07

Image hover 07

Form Création de compte style animée

Form Création de compte style animée

Carousel Bootstrap3

Carousel Bootstrap3

Ajouter supprimer une tr dans une table

Ajouter supprimer une tr dans une table

Ajouter multiple input dynamique

Ajouter multiple input dynamique