Card Profile Style01

<!DOCTYPE html>
<html>
<head>
  <title>CARD PROFILE STYLE01 | 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="row mt-5 mb-5">
        <div class="col-lg-4 col-md-4 col-sm-6 col-12 mb-5">
            <figure class="snip1336">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample87.jpg" alt="sample87" />
                <figcaption>
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/profile-sample4.jpg" alt="profile-sample4" class="profile" />
                <h2>Mezgani said<span>Engineer</span></h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur illo temporibus harum sed aspernatur quidem voluptates odit qua </p>
                <a href="https://www.mezganisaid.com/" class="follow">Follow</a>
                <a href="https://www.mezganisaid.com/" class="info">More Info</a>
                </figcaption>
            </figure>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-6 col-12 mb-5">
            <figure class="snip1336 hover">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample87.jpg" alt="sample87" />
                <figcaption>
                  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/profile-sample4.jpg" alt="profile-sample4" class="profile" />
                  <h2>Mezgani said<span>Engineer</span></h2>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur illo temporibus harum sed aspernatur quidem voluptates odit qua </p>
                  <a href="https://www.mezganisaid.com/" class="follow">Follow</a>
                  <a href="https://www.mezganisaid.com/" class="info">More Info</a>
                </figcaption>
            </figure>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-6 col-12 mb-5">
            <figure class="snip1336">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample87.jpg" alt="sample87" />
                <figcaption>
                  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/profile-sample4.jpg" alt="profile-sample4" class="profile" />
                  <h2>Mezgani said<span>Engineer</span></h2>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur illo temporibus harum sed aspernatur quidem voluptates odit qua </p>
                  <a href="https://www.mezganisaid.com/" class="follow">Follow</a>
                  <a href="https://www.mezganisaid.com/" class="info">More Info</a>
                </figcaption>
            </figure>
        </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>  
  <script src="script.js"></script>  
</body>
</html>
@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,600);
.snip1336 {
  font-family: 'Roboto', Arial, sans-serif;
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 230px;
  max-width: 315px;
  width: 100%;
  color: #ffffff;
  text-align: left;
  line-height: 1.4em;
  background-color: #141414;
}
.snip1336 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
.snip1336 img {
  max-width: 100%;
  vertical-align: top;
  opacity: 0.85;
}
.snip1336 figcaption {
  width: 100%;
  background-color: #141414;
  padding: 25px;
  position: relative;
}
.snip1336 figcaption:before {
  position: absolute;
  content: '';
  bottom: 100%;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 55px 0 0 400px;
  border-color: transparent transparent transparent #141414;
}
.snip1336 figcaption a {
  padding: 5px;
  border: 1px solid #ffffff;
  color: #ffffff;
  font-size: 0.7em;
  text-transform: uppercase;
  margin: 10px 0;
  display: inline-block;
  opacity: 0.65;
  width: 47%;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 1px;
}
.snip1336 figcaption a:hover {
  opacity: 1;
}
.snip1336 .profile {
  border-radius: 50%;
  position: absolute;
  bottom: 100%;
  left: 25px;
  z-index: 1;
  max-width: 90px;
  opacity: 1;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}
.snip1336 .follow {
  margin-right: 4%;
  border-color: #2980b9;
  color: #2980b9;
}
.snip1336 h2 {
  margin: 0 0 5px;
  font-weight: 300;
}
.snip1336 h2 span {
  display: block;
  font-size: 0.5em;
  color: #2980b9;
}
.snip1336 p {
  margin: 0 0 10px;
  font-size: 0.8em;
  letter-spacing: 1px;
  opacity: 0.8;
}
/* Demo purposes only */
$(".hover").mouseleave(
    function () {
      $(this).removeClass("hover");
    }
  );
  
input file récupérer le nom du fichier

input file récupérer le nom du fichier

Timeline style07

Timeline style07

Timeline style01

Timeline style01

Radio Input Image Checkbox 01

Radio Input Image Checkbox 01

Pie Charts

Pie Charts

Input range slider HTML style02

Input range slider HTML style02

Form login with background image changed style01

Form login with background image changed style01

Créer des tds dynamiquement dans une table html

Créer des tds dynamiquement dans une table html

Compteur avec b4

Compteur avec b4

Bootstrap4 datepicker

Bootstrap4 datepicker

Background overlay

Background overlay

Background div gradient

Background div gradient