service box style : demo 9

Web Development

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis purus vitae dui efficitur facilisis non vitae metus. Phasellus.

Brand Building

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis purus vitae dui efficitur facilisis non vitae metus. Phasellus.

Responsive Design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis purus vitae dui efficitur facilisis non vitae metus. Phasellus.

HTML

                    

Web Development

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis purus vitae dui efficitur facilisis non vitae metus. Phasellus.

CSS

                    .serviceBox{
                        background: hsl(0, 0%, 100%) none repeat scroll 0 0;
                        border: 1px solid hsl(0, 0%, 82%);
                        box-shadow: 5px 5px 0 hsla(0, 0%, 0%, 0.07);
                        padding: 20px;
                    }
                    .serviceBox .service-icon{
                        float: left;
                    }
                    .serviceBox .service-content h3{
                        margin: 11px 0 30px 67px;
                        color: #000;
                        font-size: 16px;
                        font-weight: 600;
                    }
                    .serviceBox .service-content p{
                        font-size: 13px;
                        line-height: 22px;
                        margin: 0;
                    }
                    .serviceBox .service-icon i{
                        background: #e74c3c;
                        box-shadow: 5px 5px 0 hsla(0, 0%, 0%, 0.1);
                        color: hsl(0, 0%, 100%);
                        font-size: 26px;
                        font-weight: 600;
                        height: 50px;
                        line-height: 50px;
                        text-align: center;
                        width: 50px;
                        transition:all 0.2s ease-in-out;
                    }
                    .serviceBox:hover .service-icon i{
                        background: hsl(208, 17%, 20%) none repeat scroll 0 0;
                        border-radius: 50%;
                        transform: translate(0px, 3px);
                        transition:all 0.5s ease-in-out;
                    }
                    @media only screen and (max-width: 990px){
                        .serviceBox{
                            margin-bottom: 20px;
                        }
                    }