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;
}

                                    
Card Profile Style01

Card Profile Style01

Carousel Bootstrap4

Carousel Bootstrap4

Double Scrollbar style in table 01

Double Scrollbar style in table 01

Gallery images with bootstrap4 Flexbox

Gallery images with bootstrap4 Flexbox

Header with background animate 01

Header with background animate 01

Page 404 exemple 01

Page 404 exemple 01

Scroll to div ID

Scroll to div ID

SwiperJS style01

SwiperJS style01

SwiperJS style02 avec 6 colonnes

SwiperJS style02 avec 6 colonnes

Tablet style code texte

Tablet style code texte

Timeline style06

Timeline style06

texte animate effects style 01

texte animate effects style 01