Why_choose_section
Mega Menu / Button Hover Effect
July 2, 2022
Scroll Section
July 23, 2022
Why Choose Us
Improve Shipping Quality
- Reap the benefits of Courier Recommendation Engine
- Reduce undelivery with NDR and RTO dashboards
- Process bulk orders in a few clicks
Superior experience for your customers
- Effective order tracking via SMS and Email notifications
- White labeled shipment tracking page
- Easy pickup for return order requests
.container{
padding-inline: 12em;
}
.custom_row{
display: grid;
grid-template-columns: repeat(2,50%);
column-gap: 5em;
}
.ns_sec1_btn{
border: 1px solid #a27df6;
color: #a27df6;
border-radius: 50px;
font-size: 16px;
font-weight: 500;
padding: 10px 20px;
background-color: #fff;
}
.ns_sec1_btn:hover{
background-color: #5405c2;
color: #fff;
}
.ns_sec_btn{
padding-left: 3em;
}
.ns_sec_list{
padding-left: 5em;
}
.ns_span_color{
font-weight: 500;
color:#a27df6;
}
.ns_sec_subhead i{
color:#a27df6;
font-size: 35px;
vertical-align: middle;
padding-right: 10px;
}
.ns_sec_subhead{
font-size: 18px;
}
.ns_sec_head{
text-align: center;
padding: 40px 0px;
}
.ns_sec_list li{
font-weight: bold;
color: #666;
line-height: 30px;
}
.ns_sec1_link{
text-decoration: none;
color: #5405c2;
}
.ns_sec1_link:hover{
color: #5405c2;
}
.ns_sec1_img{
width: 80%;
height: auto;
}
.ns_custom{
margin-top: 5em;
}
/* body{
background-image: url("assets/images/bg-1.jpg");
} */
.ns_custom2{
margin-top: 10em;
}
.ns_circle{
position: absolute;
left: 530px;
top: 350px;
width: 70px;
height: 70px;
background: #a27df6;
border-radius: 50%;
opacity: 0.5;
}
HTML
<section id="ns_why_us">
<div class="container">
<h2 class="ns_sec_head">Why Choose Us</h2>
<div class="custom_row">
<div class=" ns_custom">
<p class="ns_sec_subhead">
<i class="fa-solid fa-circle-check"></i>
<span class="ns_span_color">Improve </span>Shipping Quality
</p>
<ul class="ns_sec_list">
<li>Reap the benefits of <a href="" class="ns_sec1_link">Courier Recommendation Engine</a></li>
<li>Reduce undelivery with NDR and RTO dashboards</li>
<li>Process bulk orders in a few clicks</li>
</ul>
<div class="ns_sec_btn">
<button class="ns_sec1_btn btn ">Know More</button>
</div>
</div>
<!-- Image-1 -->
<img src="assets\images\img-1.jpg" class="ns_sec1_img" alt="">
</div>
<!-- sec-2 -->
<div class="custom_row">
<!-- image2 -->
<img src="assets\images\img-2.jpg" class="ns_sec1_img" alt="">
<div class="ns_custom2">
<p class="ns_sec_subhead">
<i class="fa fa-mobile" aria-hidden="true"></i>
<span class="ns_span_color">Superior experience </span>for your customers
</p>
<ul class="ns_sec_list">
<li>Effective order tracking via SMS and Email notifications</li>
<li>White labeled shipment tracking page</li>
<li>Easy pickup for return order requests</li>
</ul>
<div class="ns_sec_btn">
<button class="ns_sec1_btn btn ">Know More</button>
</div>
</div>
</div>
</div>
</section>
CSS
.container{
padding-inline: 12em;
}
.custom_row{
display: grid;
grid-template-columns: repeat(2,50%);
column-gap: 5em;
}
.ns_sec1_btn{
border: 1px solid #a27df6;
color: #a27df6;
border-radius: 50px;
font-size: 16px;
font-weight: 500;
padding: 10px 20px;
background-color: #fff;
}
.ns_sec1_btn:hover{
background-color: #5405c2;
color: #fff;
}
.ns_sec_btn{
padding-left: 3em;
}
.ns_sec_list{
padding-left: 5em;
}
.ns_span_color{
font-weight: 500;
color:#a27df6;
}
.ns_sec_subhead i{
color:#a27df6;
font-size: 35px;
vertical-align: middle;
padding-right: 10px;
}
.ns_sec_subhead{
font-size: 18px;
}
.ns_sec_head{
text-align: center;
padding: 40px 0px;
}
.ns_sec_list li{
font-weight: bold;
color: #666;
line-height: 30px;
}
.ns_sec1_link{
text-decoration: none;
color: #5405c2;
}
.ns_sec1_link:hover{
color: #5405c2;
}
.ns_sec1_img{
width: 80%;
height: auto;
}
.ns_custom{
margin-top: 5em;
}
/* body{
background-image: url("assets/images/bg-1.jpg");
} */
.ns_custom2{
margin-top: 10em;
}
.ns_circle{
position: absolute;
left: 530px;
top: 350px;
width: 70px;
height: 70px;
background: #a27df6;
border-radius: 50%;
opacity: 0.5;
}
