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

                                    
page scroll progress bar

page scroll progress bar

login page green one

login page green one

Texte Block Posts Style01

Texte Block Posts Style01

Input range slider HTML style03

Input range slider HTML style03

Input file style02

Input file style02

Image hover 03

Image hover 03

Form login 02

Form login 02

Form contact avec validation en css

Form contact avec validation en css

Css Page grid layout

Css Page grid layout

Calculatrice style01

Calculatrice style01

Bootstrap 3 Popover avec html contenu

Bootstrap 3 Popover avec html contenu

Add Remove dynamic rows with dynamic ID of input in HTML table

Add Remove dynamic rows with dynamic ID of input in HTML table