Multiple Services cards Section

Multiple Services cards Section bootstrap 4 snippet

Download Files

Download Files contains - HTML,CSS,JS,Images Files

With cover and overlapped profile picture

                                        
                                      @import url(//fonts.googleapis.com/css?family=Montserrat:300,400,500);
.service-24 {
  font-family: "Montserrat", sans-serif;
 color: #8d97ad;
  font-weight: 300;
}

.service-24 h1, .service-24 h2, .service-24 h3, .service-24 h4, .service-24 h5, .service-24 h6 {
  color: #3e4555;
}

.service-24 .card.card-shadow {
    -webkit-box-shadow: 0px 0px 30px rgba(115, 128, 157, 0.1);
    box-shadow: 0px 0px 30px rgba(115, 128, 157, 0.1);
}

.service-24 a {
 text-decoration: none;
}

.service-24 .card-hover:hover {
   background: #2cdd9b;
    background: -webkit-linear-gradient(legacy-direction(to right), #2cdd9b 0%, #1dc8cc 100%);
    background: -webkit-gradient(linear, left top, right top, from(#2cdd9b), to(#1dc8cc));
    background: -webkit-linear-gradient(left, #2cdd9b 0%, #1dc8cc 100%);
    background: -o-linear-gradient(left, #2cdd9b 0%, #1dc8cc 100%);
    background: linear-gradient(to right, #2cdd9b 0%, #1dc8cc 100%);
}

.service-24 .card-hover:hover .bg-success-grediant {
   color: #ffffff;
    text-fill-color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

.service-24 .card-hover:hover .ser-title {
 color: #ffffff;
}

.service-24 .bg-success-grediant {
  background: #2cdd9b;
    background: -webkit-linear-gradient(legacy-direction(to right), #2cdd9b 0%, #1dc8cc 100%);
    background: -webkit-gradient(linear, left top, right top, from(#2cdd9b), to(#1dc8cc));
    background: -webkit-linear-gradient(left, #2cdd9b 0%, #1dc8cc 100%);
    background: -o-linear-gradient(left, #2cdd9b 0%, #1dc8cc 100%);
    background: linear-gradient(to right, #2cdd9b 0%, #1dc8cc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    font-size: 50px;
}

.service-24 .wrap-service-24 .card {
    -o-transition: 0.3s ease-out;
    transition: 0.3s ease-out;
    -webkit-transition: 0.3s ease-out;
}

.service-24 .wrap-service-24 .card:hover {
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
}

.service-24 .btn-outline-success {
  color: #2cdd9b !important;
    background-color: transparent;
    border-color: #2cdd9b;
}

.service-24 .btn-outline-success:hover {
  background: #2cdd9b;
    border-color: #2cdd9b;
    color: #ffffff !important;
}

.service-24 .btn-md {
    padding: 15px 45px;
    font-size: 16px;
}      
                                        
                                    

                                        
                                      Js      
                                        
                                    

Credits

Wrappixel.com

More Bootstrap UI Components

Hero Block with Illustration

206 0 hero,BS4

SAAS Hero Section

135 0 hero,BS3

Want to work with us Form

154 0 contact us,BS4

Simple Pricing Block

142 0 pricing,BS4

Stunning Animated Bannner

179 0 banner,BS4

Nice Contact Us

206 0 contact us,BS4

Elegant About Us Section

182 0 about,BS3

Elegant Navigation

154 0 navigation.BS4

Tired of Opening One Strap After Another?

Go to Pricing and start using AJAX Filter Options, no need to open multiple pages.

Get Started