service box style : demo 71

Web Design

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium consequuntur, deleniti eaque excepturi.

Web Development

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium consequuntur, deleniti eaque excepturi.

Brand Building

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium consequuntur, deleniti eaque excepturi.

Responsive Design

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium consequuntur, deleniti eaque excepturi.

HTML

                        

Web Design

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium consequuntur, deleniti eaque excepturi.

Web Development

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium consequuntur, deleniti eaque excepturi.

CSS

                        .serviceBox{ text-align: center; }
                        .serviceBox .service-icon{
                            display: inline-block;
                            width: 100px;
                            height: 100px;
                            line-height: 100px;
                            border-radius: 50%;
                            background: #ff5449;
                            margin-bottom: 25px;
                            font-size: 40px;
                            color: #fff;
                            transition: all 0.5s ease 0s;
                        }
                        .serviceBox:hover .service-icon{ transform: scale(1.1); }
                        .serviceBox .title{
                            display: block;
                            font-size: 20px;
                            font-weight: 700;
                            color: #471437;
                            text-transform: uppercase;
                            margin: 0 0 12px 0;
                            position: relative;
                        }
                        .serviceBox .title:before,
                        .serviceBox .title:after{
                            content: "";
                            width: 5px;
                            height: 5px;
                            border-radius: 50%;
                            background: #ff5449;
                            position: absolute;
                            top: 40%;
                            left: 40%;
                            opacity: 0;
                            transition: all 0.5s ease 0s;
                        }
                        .serviceBox .title:after{
                            left: auto;
                            right: 40%;
                        }
                        .serviceBox:hover .title:before{
                            opacity: 1;
                            left: 5%;
                        }
                        .serviceBox:hover .title:after{
                            opacity: 1;
                            right: 5%;
                        }
                        .serviceBox .description{
                            font-size: 15px;
                            letter-spacing: 1px;
                            line-height: 27px;
                            color: #6f6f6f;
                        }
                        @media only screen and (max-width:990px){
                            .serviceBox{ margin-bottom: 30px; }
                        }
                    
License Terms