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");
    }
  );
  
Ajouter supprimer dynamiquement des lignes sur un tableau

Ajouter supprimer dynamiquement des lignes sur un tableau

Animation 3d social icones avec css3

Animation 3d social icones avec css3

Buttons Styles Inspirations

Buttons Styles Inspirations

Card Panel Bootstrap4 with header and footer

Card Panel Bootstrap4 with header and footer

Chercher un mot sur la liste

Chercher un mot sur la liste

Create icon animate with svg

Create icon animate with svg

Form Création de compte style animée

Form Création de compte style animée

Organization Chart

Organization Chart

Simple Table With UIKIT

Simple Table With UIKIT

SwiperJS style02 avec 6 colonnes

SwiperJS style02 avec 6 colonnes

Table Responsive with css 01

Table Responsive with css 01

Triangle Background css 01

Triangle Background css 01