If you want to add a beautiful “Why Shop With Us” section in your wordpress or html or php sites then this post is for you. It will help to increase your site’s credibility and popularity. Here I am sharing you the HTML and related CSS Codes. Just add the HTML code in the respective position where you want to add it, and put the CSS code in Custom CSS portion.
You can ask question regarding any issue you are facing.
You can take my personal help in skype : om2000_cuet
**** HTML CODES ****
<div id="omma"> <div class="features features_desctop hidden-xs hidden-sm"> <div class="p-heading1"> <section class="shopper-product-section shopper-recent-products" aria-label="Recent Products"> <h2 class="section-title"><span> Why shop with us</span></h2> </section> </div> <div class="col-md-15 col-sm-30"> <div class=""> <div class="img-feat"> .cls-1{fill:#222;fill-rule:evenodd} </div> <div class="text-feat"><b>700+</b> Clients Love Us!</div> </div> We offer best service and great prices on high quality products </div> <div class="col-md-15 col-sm-30"> <div class=""> <div class="img-feat"> .cls-1{fill:#222;fill-rule:evenodd} </div> <div class="text-feat">Shipping to <b>185</b> Countries</div> </div> Our store operates worldwide and you can enjoy free delivery of all orders </div> <div class="col-md-15 col-sm-30"> <div class=""> <div class="img-feat"> .cls-1{fill:#222;fill-rule:evenodd} </div> <div class="text-feat"><b>100%</b> Safe Payment</div> </div> Buy with confidence using the world’s most popular and secure payment methods </div> <div class="col-md-15 col-sm-30"> <div class=""> <div class="img-feat"> .cls-1{fill:#222;fill-rule:evenodd} </div> <div class="text-feat"><b>2000+</b> Successful Deliveries</div> </div> Our Buyer Protection covers your purchase from click to delivery </div> </div> </div>**** CSS CODES ****
.features,.features div{overflow:hidden}.features div .img-feat{float:left;text-align:left;margin:0 10px 0 0} .features div .text-feat{padding-right:45px;font-weight:400;font-size:13px;line-height:14px} .features div .text-feat b{color:#ae322f;font-weight:700} .features p{font-size:12px;line-height:18px;margin-bottom:0;margin-top:10px;padding-right:30px} .shopper-product-section .section-title span { position: relative; background: #ffffff; display: inline-block; padding: 0 15px; z-index: 2; } .shopper-product-section .section-title:before { content: ''; width: 100%; height: 3px; position: absolute; background-color: #ddd; left: 0; top: 50%; z-index: 1; } .shopper-product-section .section-title { text-align: center; margin-bottom: 1.618em; position: relative; font-size: 1.2135em; text-transform: uppercase; } .col-md-15.col-sm-30 { margin-bottom: 30px; } .features, .features div { overflow: hidden; /* margin-bottom: 32px; */ } @media (min-width: 768px){ .col-md-15 { width: 25%; float:left; } .p-heading { font-family: EB Garamond,serif; color: #2d2d2d; font-weight: 400; position: relative; line-height: 1; text-align: center; -webkit-border-radius: 0; border-radius: 0; margin-top: 20px; margin-bottom: 20px; overflow: hidden; } .p-heading:before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: block; margin: auto; height: 1px; background: #333; width: 100%; } .p-heading .p-title { margin: 0; display: inline-block; position: relative; font-size: 20px; line-height: 20px; text-align: center; text-transform: uppercase; -webkit-border-radius: 0; border-radius: 0; padding: 5px 10px; background: #fff; } div#omma { overflow: hidden; margin-bottom: 30px; margin-top: 30px; } }If you have any issue feel free to ask me question here in comments section
OR
You can take my personal help in skype : om2000_cuet