service box style : demo 69

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: 60px 45px 25px 10px;
                            margin-top: 50px;
                            background: #48392a;
                            position: relative;
                            transition: all 0.5s ease 0s
                        }
                        .serviceBox:hover{
                            padding-left: 30px;
                            padding-right: 20px;
                            background: #eb514a;
                        }
                        .serviceBox .service-icon{
                            width: 100px;
                            height: 100px;
                            line-height: 100px;
                            border-radius: 10px;
                            background: #48392a;
                            font-size: 35px;
                            color: #fbf2c0;
                            text-align: center;
                            position: absolute;
                            top: -50px;
                            left: 0;
                            transition: all 0.5s ease 0s
                        }
                        .serviceBox:hover .service-icon{
                            background: #eb514a;
                            left: 30px;
                        }
                        .serviceBox .title{
                            font-size: 20px;
                            font-weight: 700;
                            color: #fbf2c0;
                            text-transform: uppercase;
                            margin: 0 0 10px 0;
                        }
                        .serviceBox .description{
                            font-size: 15px;
                            color: #fbf2c0;
                            line-height: 25px;
                            margin: 0;
                        }
                        @media only screen and (max-width:990px){
                            .serviceBox{ margin-bottom: 30px; }
                        }
                        @media only screen and (max-width:767px){
                            .serviceBox{ margin-bottom: 70px; }
                        }
                    
License Terms