service box style : demo 170

Web Design

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

Web Development

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

Responsive Design

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

Brand Building

Lorem ipsum dolor sit amet conse ctetur 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 conse ctetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum.

Web Development

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

CSS

(Fonts required: Poppins.)
                        .serviceBox{
                            color: #fff;
                            font-family: 'Poppins', sans-serif;
                            text-align: center;
                            padding: 35px 18px 0;
                            position: relative;
                            z-index: 1;
                        }
                        .serviceBox:before{
                            content: '';
                            background: linear-gradient(to right bottom, #EA2027 50%, #ce181e 50%);
                            width: 100%;
                            height: calc(100% - 40px);
                            position: absolute;
                            left: 0;
                            top: 0;
                            z-index: -1;
                        }
                        .serviceBox .service-icon{
                            color: #333;
                            background: #fff;
                            font-size: 42px;
                            line-height: 80px;
                            width: 120px;
                            height: 80px;
                            margin: 0 auto 15px;
                            border-radius: 20px/50px;
                            box-shadow: 0 0 10px rgba(0,0,0,0.5),0 0 10px rgba(0,0,0,0.5) inset;
                        }
                        .serviceBox .title{
                            font-size: 18px;
                            font-weight: 600;
                            letter-spacing: 0.5px;
                            text-transform: uppercase;
                            margin: 0 0 10px;
                        }
                        .serviceBox .description{
                            color: rgba(255,255,255,0.75);
                            font-size: 14px;
                            line-height: 21px;
                            letter-spacing: 1px;
                            margin: 0 0 30px;
                        }
                        .serviceBox.green:before{
                            background: linear-gradient(to right bottom, #009432 50%, #0f8434 50%);
                        }
                        @media only screen and (max-width:990px){
                            .serviceBox{ margin: 0 0 30px; }
                        }
                    
License Terms