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

                                    
Ajouter une pagination1

Ajouter une pagination1

Asidebar Bootstrap4 style01

Asidebar Bootstrap4 style01

Card Panel Bootstrap4 with header and footer

Card Panel Bootstrap4 with header and footer

Create icon animate with svg

Create icon animate with svg

Dropdown right aligned B4

Dropdown right aligned B4

Input range slider HTML style01

Input range slider HTML style01

Input range slider HTML style03

Input range slider HTML style03

Manual Slideshow

Manual Slideshow

Planète animée style01

Planète animée style01

Radio Input Image Checkbox 01

Radio Input Image Checkbox 01

Radio button style

Radio button style

Up Down Animation With CSS Style01

Up Down Animation With CSS Style01