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");
    }
  );
  
up down tr in table with js

up down tr in table with js

page scroll progress bar

page scroll progress bar

input radio checkbox b4 style

input radio checkbox b4 style

Scroll down button 01

Scroll down button 01

Input range slider HTML style02

Input range slider HTML style02

Image hover 07

Image hover 07

Header Aside Footer Admin

Header Aside Footer Admin

Elastic Content Slider

Elastic Content Slider

Créer une input search animée

Créer une input search animée

Convertir une div en image

Convertir une div en image

Calculatrice style01

Calculatrice style01

Bloc resizable with jquery

Bloc resizable with jquery