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

                                    
Add Remove dynamic rows with dynamic ID of input in HTML table

Add Remove dynamic rows with dynamic ID of input in HTML table

Bloc resizable with jquery

Bloc resizable with jquery

Cards box with title

Cards box with title

Carousel 8 bloc with B4

Carousel 8 bloc with B4

Convertir une div en image

Convertir une div en image

Form Création de compte style animée

Form Création de compte style animée

Form login with background image changed style01

Form login with background image changed style01

Menu aside style01 slide out

Menu aside style01 slide out

Texte Block Posts Style01

Texte Block Posts Style01

Transitions Animations SVG Style01

Transitions Animations SVG Style01

Vidéo background en html5 style02

Vidéo background en html5 style02

up down tr in table with js

up down tr in table with js