Card 4 Product Style01

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 4 and CCS3 Product Cards with Transition  | 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 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" id="ads">
    <!-- Category Card -->
    <div class="col-lg-6 col-md-6 col-sm-6 col-12 mb-5">
        <div class="card rounded">
            <div class="card-image">
                <span class="card-notify-badge">ESSENCE</span>
                <span class="card-notify-year">Sales</span>
                <img class="img-responsive img-fluid" src="https://imageonthefly.autodatadirect.com/images/?USER=eDealer&PW=edealer872&IMG=USC80HOC011A021001.jpg&width=440&height=262" alt="Alternate Text" />
            </div>
            <div class="card-image-overlay m-auto">
                <span class="card-detail-badge">Used</span>
                <span class="card-detail-badge">$28,000.00</span>
                <span class="card-detail-badge">13000 Kms</span>
            </div>
            <div class="card-body text-center">
                <div class="ad-title m-auto">
                    <h5>Honda Accord LX</h5>
                </div>
                <a class="ad-btn" href="#">View</a>
            </div>
        </div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-12 mb-5">
        <div class="card rounded">
            <div class="card-image">
                <span class="card-notify-badge">ESSENCE</span>
                <span class="card-notify-year">Sales</span>
                <img class="img-responsive img-fluid" src="https://imageonthefly.autodatadirect.com/images/?USER=eDealer&PW=edealer872&IMG=CAC80HOC021B121001.jpg&width=440&height=262" alt="Alternate Text" />
            </div>
            <div class="card-image-overlay m-auto">
                <span class="card-detail-badge">Used</span>
                <span class="card-detail-badge">$28,000.00</span>
                <span class="card-detail-badge">13000 Kms</span>
            </div>
            <div class="card-body text-center">
                <div class="ad-title m-auto">
                    <h5>Honda CIVIC HATCHBACK LS</h5>
                </div>
                <a class="ad-btn" href="#">View</a>
            </div>
        </div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-12 mb-5">
        <div class="card rounded">
            <div class="card-image">
                <span class="card-notify-badge">ESSENCE</span>
                <span class="card-notify-year">Sales</span>
                <img class="img-responsive img-fluid" src="https://imageonthefly.autodatadirect.com/images/?USER=eDealer&PW=edealer872&IMG=USC80HOC091A021001.jpg&width=440&height=262" alt="Alternate Text" />
            </div>
            <div class="card-image-overlay m-auto">
                <span class="card-detail-badge">Used</span>
                <span class="card-detail-badge">$22,000.00</span>
                <span class="card-detail-badge">8000 Kms</span>
            </div>
            <div class="card-body text-center">
                <div class="ad-title m-auto">
                    <h5>Honda Accord Hybrid LT</h5>
                </div>
                <a class="ad-btn" href="#">View</a>
            </div>
        </div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-12 mb-5">
        <div class="card rounded">
            <div class="card-image">
                <span class="card-notify-badge">DIESEL</span>
                <span class="card-notify-year">Sales</span>
                <img class="img-responsive img-fluid" src="https://imageonthefly.autodatadirect.com/images/?USER=eDealer&PW=edealer872&IMG=USC80HOC091A021001.jpg&width=440&height=262" alt="Alternate Text" />
            </div>
            <div class="card-image-overlay m-auto">
                <span class="card-detail-badge">Used</span>
                <span class="card-detail-badge">$22,000.00</span>
                <span class="card-detail-badge">8000 Kms</span>
            </div>
            <div class="card-body text-center">
                <div class="ad-title m-auto">
                    <h5>Honda Accord Hybrid LT</h5>
                </div>
                <a class="ad-btn" href="#">View</a>
            </div>
        </div>
    </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>  
</body>
</html>

#ads {
    /* margin: 30px 0 30px 0;*/
    
 }
 
 #ads .card-notify-badge {
         position: absolute;
         left: -10px;
         top: -20px;
         background: #f2d900;
         text-align: center;
         border-radius: 30px 30px 30px 30px; 
         color: #000;
         padding: 5px 10px;
         font-size: 14px;
 
     }
 
 #ads .card-notify-year {
         position: absolute;
         right: -10px;
         top: -20px;
         background: #ff4444;
         border-radius: 50%;
         text-align: center;
         color: #fff;      
         font-size: 14px;      
         width: 50px;
         height: 50px;    
         padding: 15px 0 0 0;
 }
 
 
 #ads .card-detail-badge {      
         background: #f2d900;
         text-align: center;
         border-radius: 30px 30px 30px 30px;
         color: #000;
         padding: 5px 10px;
         font-size: 14px;        
     }
 
    
 
 #ads .card:hover {
             background: #fff;
             box-shadow: 1px 15px 25px 8px rgba(46,61,73,0.15);
             border-radius: 4px;
             transition: all 0.3s ease;
         }
 
 #ads .card-image-overlay {
         font-size: 20px;
         
     }
 
 
 #ads .card-image-overlay span {
             display: inline-block;              
         }
 
 
 #ads .ad-btn {
         text-transform: uppercase;
         width: 150px;
         height: 40px;
         border-radius: 80px;
         font-size: 16px;
         line-height: 35px;
         text-align: center;
         border: 3px solid #e6de08;
         display: block;
         text-decoration: none;
         margin: 20px auto 1px auto;
         color: #000;
         overflow: hidden;        
         position: relative;
         background-color: #e6de08;
     }
 
 #ads .ad-btn:hover {
             background-color: #e6de08;
             color: #1e1717;
             border: 2px solid #e6de08;
             background: transparent;
             transition: all 0.3s ease;
             box-shadow: 12px 15px 20px 0px rgba(46,61,73,0.15);
         }
 
 #ads .ad-title h5 {
         text-transform: uppercase;
         font-size: 18px;
     }

                                    
Timeline style02

Timeline style02

Texte Block Posts Style01

Texte Block Posts Style01

Nav Menu style01

Nav Menu style01

Manual Slideshow

Manual Slideshow

Input range slider HTML style01

Input range slider HTML style01

Image hover style border top

Image hover style border top

Form login et créer un compte style01

Form login et créer un compte style01

Form Création de compte

Form Création de compte

Créer un effet de défilement vers le bas de la souris animé

Créer un effet de défilement vers le bas de la souris animé

Buttons Styles Inspirations

Buttons Styles Inspirations

Bootstrap modal avec un formulaire newsletter

Bootstrap modal avec un formulaire newsletter

Asidebar Bootstrap4 style02

Asidebar Bootstrap4 style02