Bootstrap4 Snippets Category list using HTML

<div class="container-fluid">
        <div class="row">
            <div class="col-md-6">
                <div class="sale">
                <div class="saleA">
                    <div class="sale-inner">
                        <h6>Winter Sale</h6>
                        <div class="row">
                            <div class="col-sm-12">
                                    <div class="button-offer">
                                            <span>Sale</span>
                                            50% Off
                                        </div>
                            </div>
                        </div>
                        
                       <div class="mt-3">
                            <button type="button" class="btn btn-primary btn-lg">Shop Now</button>
                       </div>
                    </div>
                </div>
                </div>
            </div>
            <div class="col-md-6">
                    <div class="sale">
                        <div class="saleB">
                        <div class="sale-inner">
                            <h6>Winter Sale</h6>
                            <div class="row">
                                <div class="col-sm-12">
                                        <div class="button-offer">
                                                <span>Sale</span>
                                                50% Off
                                            </div>
                                </div>
                            </div>
                            
                           <div class="mt-3">
                                <button type="button" class="btn btn-primary btn-lg">Shop Now</button>
                           </div>
                        </div>
                    </div>
                </div>
                </div>
        </div>
    </div>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Poppins:400,500,700" rel="stylesheet">

body {
     font-family: 'Poppins', sans-serif;
}
 .sale {
     position:relative;
     overflow:hidden;
}
 .saleA {
     position:relative;
     overflow:hidden;
     background: url(sale-offer.jpg);
     min-height: 450px;
     max-height: 100%;
     width: 100%;
     background-size:cover;
}
 .saleB {
     position:relative;
     overflow:hidden;
     background: url(sale-offer2.jpg);
     min-height: 450px;
     max-height: 100%;
     width: 100%;
     background-size:cover;
}
 .sale:after {
     content: "";
     position: absolute;
     top: -110%;
     left: -210%;
     width: 200%;
     height: 200%;
     opacity: 0;
     transform: rotate(30deg);
     background: rgba(255, 255, 255, 0.13);
     background: linear-gradient( to right, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.13) 77%, rgba(255, 255, 255, 0.5) 92%, rgba(255, 255, 255, 0.0) 100% );
}
 .sale:hover:after {
     opacity: 1;
     top: -30%;
     left: -30%;
     transition-property: left, top, opacity;
     transition-duration: 0.7s, 0.7s, 0.15s;
     transition-timing-function: ease;
}
 sale:hover:after {
     opacity: 0;
}
 .sale-inner {
     text-align: center;
     position: relative;
     margin-top:25%;
     font-size: 25px;
}
 .sale-inner h6 {
     color: #000;
     text-transform: uppercase;
     letter-spacing: 10px;
}
 .sale-inner .button-offer {
     border: solid 4px #fff;
     display: inline-block;
     font-size: 2em;
     padding-right: 10px;
}
 .sale-inner .button-offer span {
     background: #fff;
     color: #000;
     text-transform: uppercase;
     font-weight: 500;
     padding:4px 12px;
}
 .btn-primary {
     z-index: 999;
     position: relative;
     border-radius: 0px;
}