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

                                    
Arrows Defense Game

Arrows Defense Game

Bootstrap 3 Popover avec html contenu

Bootstrap 3 Popover avec html contenu

Bootstrap4 datepicker

Bootstrap4 datepicker

Carousel Bootstrap3

Carousel Bootstrap3

Convertir une div en image

Convertir une div en image

Css Page grid layout

Css Page grid layout

Flat icon Responsive Boxes

Flat icon Responsive Boxes

Gallery images with bootstrap4 Flexbox

Gallery images with bootstrap4 Flexbox

Input range slider HTML style03

Input range slider HTML style03

Page construction avec compte à rebours style02

Page construction avec compte à rebours style02

SwiperJS Lazy Load Images

SwiperJS Lazy Load Images

toggle switch style01

toggle switch style01