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;
    }
  }

                                    
Profile page with b4

Profile page with b4

Page 404 exemple 01

Page 404 exemple 01

Input range slider HTML style05

Input range slider HTML style05

Input range slider HTML style01

Input range slider HTML style01

Image hover 04

Image hover 04

Form login et créer un compte style01

Form login et créer un compte style01

Drag and drop or upload input file

Drag and drop or upload input file

Double Scrollbar with Plugin Jquery in table

Double Scrollbar with Plugin Jquery in table

Buttons Styles Inspirations

Buttons Styles Inspirations

Bloc resizable with jquery

Bloc resizable with jquery

Arrows Defense Game

Arrows Defense Game

Alert Bootstrap4 style02

Alert Bootstrap4 style02