Stylish Border Color Service Component

This is another stylish services component to our great collection of Bootstrap service components. You choose our right and suitable one for your website many more service components will be added soon

Copy and Paste the code or Download and Use

You can use this Stylish Border Color Service Component web Component by simply copy and past the HTML code to the HTML File and copy Past the CSS to the CSS file. You also Download the Project Folder on the Stylish Border Color Service Component by Clicking the Download button at the bottom

1, Add the CSS Files at the Header of the Document
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
2, Add the HTML Files to the Document
<section id="features" class="features container-fluid">
         <div class="container">
            <div class="row session-title">
                <h2>Smart Account Features</h2>
                <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered</p>
            </div>
             <div class="row feature-row">
                 <div class="col-md-4">
                     <div class="feature-col">
                         <i class="far fa-newspaper"></i>
                         <h4>Fully Transparent</h4>
                         <p>Accurate information of work. Visualization achieved through the board.</p>
                     </div>
                 </div>
                 <div class="col-md-4">
                     <div class="feature-col">
                         <i class="fas fa-chart-bar"></i>
                         <h4>Continuous Improvement</h4>
                         <p>Accurate information of work. Visualization achieved through the board.</p>
                     </div>
                 </div>

                 <div class="col-md-4">
                     <div class="feature-col">
                        <i class="far fa-window-restore"></i>
                         <h4>Fully Responsive</h4>
                         <p>Accurate information of work. Visualization achieved through the board.</p>
                     </div>
                 </div>

                 <div class="col-md-4">
                     <div class="feature-col">
                         <i class="fas fa-cloud"></i>
                         <h4>Cloud Based</h4>
                         <p>Accurate information of work. Visualization achieved through the board.</p>
                     </div>
                 </div>

                 <div class="col-md-4">
                     <div class="feature-col">
                        <i class="far fa-thumbs-up"></i>
                         <h4>Easy to Use</h4>
                         <p>Accurate information of work. Visualization achieved through the board.</p>
                     </div>
                 </div>

                 <div class="col-md-4">
                     <div class="feature-col">
                         <i class="far fa-life-ring"></i>
                         <h4>24 x 7 Support</h4>
                         <p>Accurate information of work. Visualization achieved through the board.</p>
                     </div>
                 </div>
             </div>
         </div>
</section>
3, Add the CSS Files at the Header of the Document
.session-title {
  padding: 30px;
  margin: 0px;
}
.session-title h2 {
  width: 100%;
  text-align: center;
}
.session-title p {
  width: 100%;
  text-align: center;
}

.features {
  padding: 50px;
}
@media screen and (max-width: 940px) {
  .features {
    padding: 30px 10px;
  }
}
.features .feature-row {
  margin-top: 30px;
}
.features .feature-row .feature-col {
  background-color: #FFF;
  padding: 40px 30px;
  margin-bottom: 30px;
  text-align: center;
  box-shadow: 0 2px 3px 0 rgba(218, 218, 253, 0.35), 0 0px 3px 0 rgba(206, 206, 238, 0.35);
  border-bottom: 2px solid rgba(60, 8, 118, 0.8);
}
.features .feature-row .feature-col i {
  font-size: 2.5rem;
  margin-bottom: 20px;
}
.features .feature-row .feature-col i::before {
  color: #fc73b4;
  background: -moz-linear-gradient(top, #9477b4 0%, #fc73b4 100%);
  background: -webkit-linear-gradient(top, #9477b4 0%, #fc73b4 100%);
  background: linear-gradient(to bottom, #9477b4 0%, #fc73b4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.features .feature-row .feature-col:hover {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.feature-2 {
  background-color: #faf6fb;
  padding: 50px;
  padding-top: 80px;
}
@media screen and (max-width: 940px) {
  .feature-2 {
    padding: 30px 10px;
  }
}
.feature-2 .feat-detail .fet-det-row {
  margin-bottom: 40px;
}
.feature-2 .feat-detail .fet-det-row h1 {
  font-size: 2.5rem;
  font-weight: 300;
}
.feature-2 .feat-detail .fet-det-row .count-cov {
  width: 90px;
  height: 90px;
  background-color: #FFF;
  margin: auto;
  text-align: center;
  font-weight: 400;
  font-size: 2.5rem;
  border-radius: 50px;
  box-shadow: 0px 9px 32px 0px rgba(0, 0, 0, 0.07);
  padding-top: 19px;
  margin-top: 8px;
  color: #f5378e;
}
.feature-2 .feat-detail .fet-det-row:hover .count-cov {
  background-image: -moz-linear-gradient(122deg, #e6388e 0%, #fb378e 100%);
  background-image: -webkit-linear-gradient(122deg, #e6388e 0%, #fb378e 100%);
  background-image: -ms-linear-gradient(122deg, #e6388e 0%, #fb378e 100%);
  background-image: linear-gradient(122deg, #e6388e 0%, #fb378e 100%);
  box-shadow: 0px 9px 32px 0px rgba(0, 0, 0, 0.09);
  color: #FFF;
}
.feature-2 .feat-detail .fet-det-row .feat-image {
  text-align: center;
}

Copyright © 2018 Smarteyeapps.com Design & Developed by Smarteye Technologies