service box style : demo 187

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{
                            font-family: 'Poppins', sans-serif;
                            text-align: center;
                        }
                        .serviceBox .service-icon{
                            color: #fff;
                            background: linear-gradient(to right bottom, #ff00cc 35%, #333399 65%);
                            font-size: 45px;
                            line-height: 80px;
                            height: 95px;
                            width: 95px;
                            margin: 0 auto 25px;
                            border-radius: 10px;
                            box-shadow: 0 0 10px rgba(0, 0, 0, 0.05) inset, 0 0 5px rgba(0, 0, 0, 0.1);
                            border: 10px solid #f9f9f9;
                            background-clip: text;
                            -webkit-background-clip: text;
                            text-fill-color: transparent; 
                            -webkit-text-fill-color: transparent; 
                        }
                        .serviceBox .title{
                            color: #777;
                            font-size: 18px;
                            font-weight: 600;
                            letter-spacing: 0.5px;
                            text-transform: uppercase;
                            margin: 0 0 8px;
                        }
                        .serviceBox .description{
                            color: #999;
                            font-size: 14px;
                            line-height: 22px;
                            margin: 0 15px;
                        }
                        .serviceBox.green .service-icon{
                            background: linear-gradient(to right bottom, #38ef7d 35%, #11998e 65%);
                            background-clip: text;
                            -webkit-background-clip: text;
                            text-fill-color: transparent;
                            -webkit-text-fill-color: transparent;
                        }
                        .serviceBox.blue .service-icon{
                            background: linear-gradient(to right bottom, #91EAE4 35%, #86A8E7 65%);
                            background-clip: text;
                            -webkit-background-clip: text;
                            text-fill-color: transparent;
                            -webkit-text-fill-color: transparent;
                        }
                        .serviceBox.orange .service-icon{
                            background: linear-gradient(to right bottom, #ffae00 35%, #f83600 65%);
                            background-clip: text;
                            -webkit-background-clip: text;
                            text-fill-color: transparent;
                            -webkit-text-fill-color: transparent;
                        }
                        @media only screen and (max-width: 990px){
                            .serviceBox{ margin: 0 0 30px; }
                        }
                    
License Terms