service box style : demo 89

Web Design

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum.

Web Development

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum.

Brand Building

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum.

Responsive Design

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum.

HTML

                        

Web Design

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum.

Web Development

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum.

CSS

                        .serviceBox{
                            padding-bottom: 20px;
                            text-align: center;
                            position: relative;
                        }
                        .serviceBox:before{
                            content: "";
                            width: 100%;
                            height: 2px;
                            background: #1d1a3f;
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            transform: scale(0);
                            transition: all 0.5s ease 0s;
                        }
                        .serviceBox:hover:before{ transform: scale(1); }
                        .serviceBox .title{
                            font-size: 22px;
                            font-weight: 700;
                            color: #1d1a3f;
                            text-transform: uppercase;
                            margin: 0 0 5px 0;
                        }
                        .serviceBox .service-icon{
                            display: inline-block;
                            width: 150px;
                            height: 150px;
                            border-radius: 50%;
                            border: 3px solid #1d1a3f;
                            border-left: 3px solid transparent;
                            border-right: 3px solid transparent;
                            margin: 50px 0;
                            position: relative;
                        }
                        .serviceBox .service-icon:before,
                        .serviceBox .service-icon:after{
                            content: "";
                            width: 3px;
                            height: 40px;
                            background: #1d1a3f;
                            margin: 0 auto;
                            position: absolute;
                            top: -40px;
                            left: 0;
                            right: 0;
                        }
                        .serviceBox .service-icon:after{
                            top: auto;
                            bottom: -40px;
                        }
                        .serviceBox .service-icon span{
                            display: block;
                            font-size: 50px;
                            color: #fff;
                            line-height: 130px;
                            position: absolute;
                            top: 10px;
                            left: 10px;
                            bottom: 10px;
                            right: 10px;
                            z-index: 999 ;
                        }
                        .serviceBox .service-icon span:before{
                            content: "";
                            width: 100%;
                            height: 100%;
                            border-radius: 50%;
                            background: #fa5f69;
                            position: absolute;
                            top: 0;
                            left: 0;
                            z-index: -1;
                            transition: all 0.5s ease 0s;
                        }
                        .serviceBox:hover .service-icon span:before{ transform: rotateY(180deg); }
                        .serviceBox .description{
                            font-size: 15px;
                            color: #505050;
                            line-height: 27px;
                            margin: 0;
                        }
                        .serviceBox.blue .service-icon span:before{ background: #0babc7; }
                        .serviceBox.yellow .service-icon span:before{ background: #f5b43b; }
                        .serviceBox.green .service-icon span:before{ background: #2e9749; }
                        @media only screen and (max-width:990px){
                            .serviceBox{ margin-bottom: 30px; }
                        }
                    
License Terms