service box style : demo 157

Web Design

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

Read More

Web Development

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

Read More

Responsive Design

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

Read More

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)
                        
                        

Web Design

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

Read More

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{
                            background: linear-gradient(to right,#fbdd13,#ff9901);
                            font-family: 'Montserrat', sans-serif;
                            text-align: center;
                            padding: 5px 30px 25px;
                            margin: 10px 0 0 0;
                            border-radius: 0 30px;
                            box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
                            position: relative;
                            z-index: 1;
                        }
                        .serviceBox:before{
                            content: "";
                            background: #fff;
                            width: calc(100% - 10px);
                            height: 100%;
                            border-radius: 0 30px 0 30px;
                            box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
                            position: absolute;
                            top: -10px;
                            left: 0;
                            z-index: -1;
                        }
                        .serviceBox .service-icon{
                            color: #fff;
                            background: linear-gradient(to right,#fbdd13 50%,#ff9901 130%);
                            font-size: 40px;
                            width: 70%;
                            padding: 8px 0 6px;
                            margin: 0 0 35px -30px;
                            border-radius: 0 50px 50px 0;
                            box-shadow: -5px 5px 5px 0px rgba(0,0,0,0.2) inset;
                        }
                        .serviceBox .title{
                            color: #ff9901;
                            font-size: 16px;
                            font-weight: 600;
                            text-transform: uppercase;
                            margin: 0 0 5px;
                        }
                        .serviceBox .title:after{
                            content: '';
                            background-color: #ff9901;
                            height: 2px;
                            width: 60%;
                            margin: 5px auto 0;
                            display: block;
                            clear: both;
                        }
                        .serviceBox .description{
                            color: #999;
                            font-size: 13px;
                            font-weight: 500;
                            line-height: 23px;
                            text-align: justify;
                            margin: 0 0 25px;
                        }
                        .serviceBox .read-more{
                            color: #999;
                            font-size: 13px;
                            transition: all 0.3s ease 0s;
                        }
                        .serviceBox .read-more i{ font-size: 11px; }
                        .serviceBox .read-more:hover{
                            color: #ff9901;
                            text-decoration: underline;
                        }
                        .serviceBox.green{ background: linear-gradient(to right,#ABED1A,#38AE3E); }
                        .serviceBox.green .service-icon{ background: linear-gradient(to right,#ABED1A 50%,#38AE3E 130%); }
                        .serviceBox.green .title{ color: #38AE3E; }
                        .serviceBox.green .title:after{ background-color: #38AE3E; }
                        .serviceBox.green .read-more:hover{ color: #38AE3E; }
                        @media only screen and (max-width:990px){
                            .serviceBox{ margin: 10px 0 40px; }
                        }
                    
License Terms