service box style : demo 116

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

(Icon Fonts Used : Fontawesome & CSS Framwork: Bootstrap)
                        
                        

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

(Fonts required: Lato.)
                        .serviceBox{
                            font-family: 'Lato', sans-serif;
                            text-align: center;
                            padding: 0 10px;
                        }
                        .serviceBox .service-icon{
                            color: #DC007E;
                            font-size: 45px;
                            text-shadow: 3px 3px 2px #fff,-3px 0 2px #fff,0 -3px 2px #fff;
                            margin: 0 0 100px;
                            position: relative;
                            z-index: 1;
                        }
                        .serviceBox .service-icon i{
                            transform: rotateY(0);
                            transition: all 0.3s ease;
                        }
                        .serviceBox:hover .service-icon i{ transform: rotateY(360deg); }
                        .serviceBox .service-icon:before,
                        .serviceBox .service-icon:after{
                            content: "";
                            background: linear-gradient(to right,#DC007E 49%,#AF0072 50%);
                            width: 153px;
                            height: 100px;
                            transform: translateX(-50%) translateY(50%);
                            position: absolute;
                            top: 6px;
                            left: 50%;
                            -webkit-clip-path: polygon(50% 37%, 100% 0, 50% 100%, 50% 100%, 0 0);
                            clip-path: polygon(50% 37%, 100% 0, 50% 100%, 50% 100%, 0 0);
                        }
                        .serviceBox .service-icon:after{
                            background: #DC007E;
                            width: 150px;
                            height: 150px;
                            transform-origin: center center;
                            transform: translateX(-50%) translateY(-50%) rotateX(63deg);
                            top: 53px;
                            left: 50%;
                            z-index: -1;
                            -webkit-clip-path: polygon(50% 0, 0 50%, 50% 100%, 50% 10%, 90% 50%, 50% 90%, 10% 50%, 50% 10%, 50% 100%, 100% 50%);
                            clip-path: polygon(50% 0, 0 50%, 50% 100%, 50% 10%, 90% 50%, 50% 90%, 10% 50%, 50% 10%, 50% 100%, 100% 50%);
                        }
                        .serviceBox .title{
                            color: #AF0072;
                            font-size: 20px;
                            font-weight: 600;
                            text-transform: uppercase;
                            margin: 0 0 10px;
                        }
                        .serviceBox .description{
                            color: #666;
                            font-size: 15px;
                            text-align: center;
                            line-height: 25px;
                        }
                        .serviceBox.orange .service-icon{ color: #EC3C00; }
                        .serviceBox.orange .service-icon:before{ background: linear-gradient(to right,#EC3C00 49%,#BE2D0E 50%); }
                        .serviceBox.orange .service-icon:after{ background:#EC3C00; }
                        .serviceBox.orange .title{ color: #EC3C00; }
                        .serviceBox.purple .service-icon{ color: #8907DC; }
                        .serviceBox.purple .service-icon:before{ background: linear-gradient(to right,#8907DC 49%,#5000AD 50%); }
                        .serviceBox.purple .service-icon:after{ background:#8907DC; }
                        .serviceBox.purple .title{ color: #8907DC; }
                        .serviceBox.blue .service-icon{ color: #00CFD5; }
                        .serviceBox.blue .service-icon:before{ background: linear-gradient(to right,#00CFD5 49%,#22a6b3 50%); }
                        .serviceBox.blue .service-icon:after{ background:#00CFD5; }
                        .serviceBox.blue .title{ color: #00CFD5; }
                        @media only screen and (max-width:990px){
                            .serviceBox{ margin: 0 0 30px; }
                        }
                    
License Terms