Cards box with title

<!DOCTYPE html>
<html>
<head>
<title>CARDS BOX WITH TITLE | 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 href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <div class="row mt-5">
		<div class="cards-list">
			<div class="card 1">
			  <div class="card_image"> <img src="https://www.nglesson.com/jeux-en-ligne/Game_Memory/screen.png" /> </div>
			  <div class="card_title title-white">
				<p>Jeux un</p>
			  </div>
			</div>
			<div class="card 2">
				<div class="card_image"> <img src="https://www.nglesson.com/jeux-en-ligne/2048/screen.png" /> </div>
				<div class="card_title title-white">
				  <p>Jeux deux</p>
				</div>
			</div>
			<div class="card 3">
				<div class="card_image"> <img src="https://www.nglesson.com/jeux-en-ligne/tic-tac-toe/screen.png" /> </div>
				<div class="card_title title-white">
				  <p>Jeux deux</p>
				</div>
			</div>
		</div>
	</div>
  </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
.cards-list {
    z-index: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }
  
  .card {
    margin: 30px auto;
    width: 300px;
    height: 300px;
    border-radius: 40px;
  box-shadow: 5px 5px 30px 7px rgba(0,0,0,0.25), -5px -5px 30px 7px rgba(0,0,0,0.22);
    cursor: pointer;
    transition: 0.4s;
  }
  
  .card .card_image {
    width: inherit;
    height: inherit;
    border-radius: 40px;
  }
  
  .card .card_image img {
    width: inherit;
    height: inherit;
    border-radius: 40px;
    object-fit: cover;
  }
  
  .card .card_title {
    text-align: center;
    border-radius: 0px 0px 40px 40px;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 30px;
    margin-top: -80px;
    height: 40px;
    color: #000;
  }
  
  .card:hover {
    transform: scale(0.9, 0.9);
    box-shadow: 5px 5px 30px 15px rgba(0,0,0,0.25), 
      -5px -5px 30px 15px rgba(0,0,0,0.22);
  }
  
  .title-white {
    color: white;
  }
  
  .title-black {
    color: black;
  }
  
  @media all and (max-width: 500px) {
    .card-list {
      /* On small screens, we are no longer using row direction but column */
      flex-direction: column;
    }
  }

                                    
toggle switch style02

toggle switch style02

texte animate css

texte animate css

Vidéo background en html5 style02

Vidéo background en html5 style02

Simple Table With UIKIT

Simple Table With UIKIT

Planète animée style01

Planète animée style01

Page construction avec compte à rebours style01

Page construction avec compte à rebours style01

Lightbox gallery style01

Lightbox gallery style01

Image hover 02

Image hover 02

Create icon animate with svg

Create icon animate with svg

Cards box with title

Cards box with title

Card Bootstrap4 E commerce 01

Card Bootstrap4 E commerce 01

Ajouter supprimer dynamiquement des lignes sur un tableau

Ajouter supprimer dynamiquement des lignes sur un tableau