service box style : demo 63

Web Development

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod pharetra arcu, quis tincidunt dolor euismod in. Ut pellentesque a.

Brand Building

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod pharetra arcu, quis tincidunt dolor euismod in. Ut pellentesque a.

Responsive Design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod pharetra arcu, quis tincidunt dolor euismod in. Ut pellentesque a.

HTML

                        

Web Development

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod pharetra arcu, quis tincidunt dolor euismod in. Ut pellentesque a.

Brand Building

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod pharetra arcu, quis tincidunt dolor euismod in. Ut pellentesque a.

CSS

                        .serviceBox{ text-align: center; }
                        .serviceBox .service-icon{
                            display: inline-block;
                            width: 100px;
                            height: 100px;
                            border-radius: 50%;
                            background: #f3a422;
                            margin-bottom: 15px;
                        }
                        .serviceBox .service-icon i{
                            font-size: 35px;
                            color: #fff;
                            line-height: 100px;
                            transition: all 0.3s ease 0s;
                        }
                        .serviceBox:hover .service-icon i{
                            transform: rotateY(180deg);
                        }
                        .serviceBox .title{
                            display: block;
                            width: 190px;
                            font-size: 24px;
                            color: #433b3b;
                            line-height: 30px;
                            text-align: center;
                            text-transform: uppercase;
                            border-bottom: 1px solid #175faa;
                            padding-bottom: 20px;
                            margin: 0 auto 20px;
                            position: relative;
                        }
                        .serviceBox .title:before,
                        .serviceBox .title:after{
                            content: "";
                            width: 10px;
                            height: 10px;
                            border-radius: 50%;
                            background: #175faa;
                            margin: 0 -5px 0 0;
                            position: absolute;
                            bottom: -5px;
                            right: 50%;
                            transition: all 0.4s ease 0s;
                        }
                        .serviceBox .title:before{
                            left: 50%;
                            margin: 0 0 0 -5px;
                        }
                        .serviceBox:hover .title:before{ left: 100%; }
                        .serviceBox:hover .title:after{ right: 100%; }
                        .serviceBox .description{
                            font: 14px;
                            color: #808080;
                            line-height: 27px;
                            padding: 0 15px;
                            margin: 0;
                        }
                        @media only screen and (max-width:990px){
                            .serviceBox{ margin-bottom: 30px; }
                        }
                    
License Terms