service box style : demo 140

Web Design

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

Web Development

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

Responsive Design

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

Brand Building

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

HTML

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

Web Design

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

Web Development

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

CSS

(Fonts required: Raleway.)
                        .serviceBox{
                            color: #666;
                            background: linear-gradient(to right,#f1c40f 49%,#f39c12 50%);
                            font-family: 'Raleway', sans-serif;
                            text-align: center;
                            padding: 2px 10px 12px;
                            border-radius: 150px 0 50px 50px;
                            transition: all 0.3s ease 0s;
                        }
                        .serviceBox .service-content{
                            background: linear-gradient(to top left, #fff,#fff,rgba(255,255,255,0.8));
                            padding: 20px 13px;
                            border-radius: 0 130px 50px 50px;
                            box-shadow: 3px 3px 5px rgba(0,0,0,0.4);
                        }
                        .serviceBox .service-icon{
                            color: #f1c40f;
                            font-size: 50px;
                            margin: 0 0 10px 0;
                        }
                        .serviceBox:hover .service-icon i{
                            color: #da8219;
                            transform: rotateY(360deg);
                            transition: all 0.3s;
                        }
                        .serviceBox .title{
                            color: #da8219;
                            font-size: 18px;
                            font-weight: 600;
                            text-transform: uppercase;
                            margin: 0 0 10px;
                        }
                        .serviceBox .description{
                            font-size: 15px;
                            line-height: 25px;
                        }
                        .serviceBox.green{ background: linear-gradient(to right,#01acb3 49%,#007687 50%); }
                        .serviceBox.green .service-icon{ color: #01acb3; }
                        .serviceBox.green:hover .service-icon i,
                        .serviceBox.green .title{
                            color: #007687;
                        }
                        .serviceBox.purple{ background: linear-gradient(to right, #ae3de2 49%, #8622d5 50%); }
                        .serviceBox.purple .service-icon{ color: #ae3de2; }
                        .serviceBox.purple:hover .service-icon i,
                        .serviceBox.purple .title{
                            color: #8622d5;
                        }
                        .serviceBox.blue{ background: linear-gradient(to right, #02aff1 49%,#0179e9 50%); }
                        .serviceBox.blue .service-icon{ color: #02aff1; }
                        .serviceBox.blue:hover .service-icon i,
                        .serviceBox.blue .title{
                            color: #0179e9;
                        }
                        @media only screen and (max-width:990px){
                            .serviceBox{ margin: 0 0 30px; }
                        }
                    
License Terms