service box style : demo 68

Web Design

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam cumque, cupiditate debitis dolorem et fugit hic iusto maxime numquam officia.

Web Development

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam cumque, cupiditate debitis dolorem et fugit hic iusto maxime numquam officia.

Responsive Design

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam cumque, cupiditate debitis dolorem et fugit hic iusto maxime numquam officia.

HTML

                        

Web Design

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam cumque, cupiditate debitis dolorem et fugit hic iusto maxime numquam officia.

Web Development

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam cumque, cupiditate debitis dolorem et fugit hic iusto maxime numquam officia.

CSS

                        .serviceBox{
                            padding: 20px 20px 20px 60px;
                            margin-left: 40px;
                            position: relative;
                            transition: all 0.3s ease 0s;
                        }
                        .serviceBox:hover{ background: #e3e3e3; }
                        .serviceBox .service-icon{
                            width: 60px;
                            height: 60px;
                            line-height: 60px;
                            background: #e3e3e3;
                            font-size: 30px;
                            color: #676666;
                            text-align: center;
                            margin: auto 0;
                            position: absolute;
                            top: 0;
                            left: -30px;
                            bottom: 0;
                            transform: rotate(45deg);
                            transition: all 0.3s ease 0s;
                        }
                        .serviceBox:hover .service-icon{
                            color: #087ca7;
                            background: #e3e3e3;
                        }
                        .serviceBox .service-icon i{ transform: rotate(-45deg); }
                        .serviceBox .service-icon:after{
                            content: "";
                            width: 63px;
                            height: 63px;
                            border: 1px solid #e3e3e3;
                            position: absolute;
                            top: -4px;
                            left: -4px;
                            transition: all 0.3s ease 0s;
                        }
                        .serviceBox:hover .service-icon:after{ top: 1px; }
                        .serviceBox .title{
                            font-size: 20px;
                            color: #676666;
                            text-transform: uppercase;
                            margin: 0 0 15px 0;
                        }
                        .serviceBox .description{
                            font-size: 14px;
                            color: #676666;
                            line-height: 25px;
                            margin-bottom: 0;
                            position: relative;
                            transition: all 0.3s ease 0s;
                        }
                        @media only screen and (max-width:990px){
                            .serviceBox{ margin-bottom: 30px; }
                        }
                    
License Terms