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

                                    
toggle switch style01

toggle switch style01

input file récupérer le nom du fichier

input file récupérer le nom du fichier

bootstrap4 tabs

bootstrap4 tabs

Pure CSS Percentage Circle

Pure CSS Percentage Circle

Page 404 exemple 01

Page 404 exemple 01

Input range slider HTML style05

Input range slider HTML style05

Image hover style border top

Image hover style border top

Image hover 06

Image hover 06

Header with background animate 01

Header with background animate 01

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é

Creation dune icone de prechargement avec css

Creation dune icone de prechargement avec css

Alert Bootstrap4 style02

Alert Bootstrap4 style02