service box style : demo 87

Web Design

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum? Eos autem natus et veniam perspiciatis.

Web Development

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum? Eos autem natus et veniam perspiciatis.

Brand Building

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum? Eos autem natus et veniam perspiciatis.

Responsive Design

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum? Eos autem natus et veniam perspiciatis.

HTML

                        

Web Design

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum? Eos autem natus et veniam perspiciatis.

Web Development

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum? Eos autem natus et veniam perspiciatis.

CSS

                        .serviceBox{
                            text-align: center;
                            position: relative;
                        }
                        .serviceBox .service-icon{
                            display: inline-block;
                            width: 170px;
                            height: 170px;
                            line-height: 70px;
                            border-radius: 50%;
                            border: 3px solid #e53947;
                            padding: 50px;
                            margin-bottom: 50px;
                            font-size: 50px;
                            color: #fff;
                            z-index: 1;
                            position: relative;
                            transition: all 0.5s ease 0s;
                        }
                        .serviceBox:hover .service-icon{ transform: rotateY(360deg); }
                        .serviceBox .service-icon:before{
                            content: "";
                            background: #e53947;
                            border-radius: 50%;
                            position: absolute;
                            top: 30px;
                            left: 30px;
                            bottom: 30px;
                            right: 30px;
                            z-index: -1;
                            transition: all 0.5s ease 0.5s;
                        }
                        .serviceBox:hover .service-icon:before{ transform: rotateX(360deg); }
                        .serviceBox .service-content{
                            padding: 40px 15px 20px;
                            border: 3px solid #e53947;
                            border-left: 2px solid transparent;
                            color: #706e6e;
                            line-height: 27px;
                            position: relative;
                        }
                        .serviceBox .service-content:before{
                            content: "";
                            width: 15px;
                            height: 15px;
                            border-radius: 50%;
                            background: #e53947;
                            margin: 0 auto;
                            position: absolute;
                            top: 10px;
                            left: 0;
                            right: 0;
                        }
                        .serviceBox .service-content:after{
                            content: "";
                            width: 3px;
                            height: 70px;
                            background: #e53947;
                            margin: 0 auto;
                            position: absolute;
                            top: -54px;
                            left: 0;
                            right: 0;
                        }
                        .serviceBox .title{
                            font-size: 20px;
                            font-weight:600;
                            color: #fff;
                            background: #e53947;
                            border-radius: 10px;
                            padding: 7px 5px;
                            margin: 0 0 10px 0;
                        }
                        .serviceBox.green .service-icon{ border-color: #93aa01; }
                        .serviceBox.green .service-icon:before,
                        .serviceBox.green .service-content:before,
                        .serviceBox.green .service-content:after,
                        .serviceBox.green .title{ background: #93aa01; }
                        .serviceBox.green .service-content{
                            border-color: #93aa01;
                            border-left-color: transparent;
                        }
                        .serviceBox.blue .service-icon{ border-color: #02a2ad; }
                        .serviceBox.blue .service-icon:before,
                        .serviceBox.blue .service-content:before,
                        .serviceBox.blue .service-content:after,
                        .serviceBox.blue .title{ background: #02a2ad; }
                        .serviceBox.blue .service-content{
                            border-color: #02a2ad;
                            border-left-color: transparent;
                        }
                        .serviceBox.orange .service-icon{ border-color: #eb700c; }
                        .serviceBox.orange .service-icon:before,
                        .serviceBox.orange .service-content:before,
                        .serviceBox.orange .service-content:after,
                        .serviceBox.orange .title{ background: #eb700c; }
                        .serviceBox.orange .service-content{
                            border-color: #eb700c;
                            border-left-color: transparent;
                        }
                        @media only screen and (max-width:990px){
                            .serviceBox{ margin-bottom: 30px; }
                        }
                    
License Terms