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

                                    
Bloc resizable with jquery

Bloc resizable with jquery

Dropdown right aligned B4

Dropdown right aligned B4

Flat icon Responsive Boxes

Flat icon Responsive Boxes

Image hover 06

Image hover 06

Lightbox gallery style01

Lightbox gallery style01

Page 404 exemple 01

Page 404 exemple 01

Page construction avec compte à rebours style02

Page construction avec compte à rebours style02

Radio button style

Radio button style

Timeline style05

Timeline style05

creation dune icone de prechargement avec css

creation dune icone de prechargement avec css

login page green one

login page green one

texte animate effects style 01

texte animate effects style 01