service box style : demo 136

01

Web Design

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum.

read more
02

Web Development

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum.

read more
03

Responsive Design

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum.

read more
04

Brand Building

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum.

read more

HTML

(Icon Fonts Used : Fontawesome & CSS Framwork: Bootstrap)
                        
                        
01

Web Design

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum.

read more
02

Web Development

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum.

read more

CSS

(Fonts required: Montserrat.)
                        .serviceBox{
                            color: #555;
                            background-color: #fff;
                            font-family: 'Montserrat', sans-serif;
                            text-align: center;
                            padding: 0 0 15px;
                            margin: 15px 0 0;
                            border: 1px solid #e1e1e1;
                            border-radius: 20px 20px;
                            position: relative;
                            z-index: 1;
                            transition: all ease .3s;
                        }
                        .serviceBox:after{
                            content: "";
                            background: linear-gradient(to bottom,#FFC312,#F79F1F);
                            width: 100%;
                            height: 49px;
                            border-radius: 0 0 20px 20px;
                            box-shadow: 0 0 5px rgba(0,0,0,0.3) inset;
                            position: absolute;
                            left: 0;
                            bottom: 0;
                            z-index: -1;
                        }
                        .serviceBox .service-count{
                            color: #fff;
                            background: linear-gradient(to bottom,#FFC312,#F79F1F);
                            font-size: 45px;
                            line-height: 130px;
                            width: 80px;
                            height: 110px;
                            margin: -15px 0 20px;
                            border-radius: 40px 0 100px 100px;
                            position: relative;
                        }
                        .serviceBox .service-count:before,
                        .serviceBox .service-count:after{
                            content: "";
                            background: #F79F1F;
                            width: 25px;
                            height: 15px;
                            border-radius: 50px 50px 0 0;
                            position: absolute;
                            top: 0;
                            left: 80px;
                        }
                        .serviceBox .service-count:after{
                            background: #FFC312;
                            border-radius: 50px 0 0 0;
                            left: 65px;
                            z-index: -2;
                        }
                        .serviceBox .service-icon{
                            color: #afafaf;
                            font-size: 60px;
                            position: absolute;
                            right: 20px;
                            top: 10px;
                            transition: all 0.3s ease 0s;
                        }
                        .serviceBox:hover .service-icon{ transform: rotateY(360deg); }
                        .serviceBox .title{
                            font-size: 19px;
                            font-weight: 600;
                            text-transform: uppercase;
                            padding: 0 15px;
                            margin: 0 0 10px;
                        }
                        .serviceBox .description{
                            font-size: 15px;
                            text-align: center;
                            line-height: 25px;
                            padding: 0 15px;
                            margin: 0 0 23px;
                        }
                        .serviceBox .read-more{
                            color: #fff;
                            font-size: 16px;
                            font-weight: 600;
                            text-transform: capitalize;
                            border-bottom: 2px solid rgba(255,255,255,0.3);
                            transition: all 0.3s ease 0s;
                        }
                        .serviceBox .read-more:hover{ text-shadow: 0 0 5px #555; }
                        .serviceBox.purple:after,
                        .serviceBox.purple .service-count{
                            background: linear-gradient(to bottom, #B53471, #6F1E51);
                        }
                        .serviceBox.purple .service-count:before{ background: #6F1E51; }
                        .serviceBox.purple .service-count:after{ background: #B53471; }
                        .serviceBox.red:after,
                        .serviceBox.red .service-count{
                            background: linear-gradient(to bottom, #ee3838, #ce1500);
                        }
                        .serviceBox.red .service-count:before{ background: #ce1500; }
                        .serviceBox.red .service-count:after{ background: #ee3838; }
                        .serviceBox.blue:after,
                        .serviceBox.blue .service-count{
                            background: linear-gradient(to bottom, #00adef, #00689b);
                        }
                        .serviceBox.blue .service-count:before{ background: #00689b; }
                        .serviceBox.blue .service-count:after{ background: #00adef; }
                        @media only screen and (max-width:990px){
                            .serviceBox{ margin: 15px 0 50px; }
                        }
                    
License Terms