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");
    }
  );
  
Vidéo background en html5 style02

Vidéo background en html5 style02

Timeline style08

Timeline style08

Timeline style05

Timeline style05

Pagination with Jquery

Pagination with Jquery

Page construction avec compte à rebours style02

Page construction avec compte à rebours style02

Input range slider HTML style03

Input range slider HTML style03

Input file style01

Input file style01

Flat icon Responsive Boxes

Flat icon Responsive Boxes

Dropdown right aligned B4

Dropdown right aligned B4

Double Scrollbar style in table 01

Double Scrollbar style in table 01

Convertir une div en image

Convertir une div en image

Asidebar Bootstrap4 style02

Asidebar Bootstrap4 style02