service box style : demo 81

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.

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{
                            padding: 25px 30px;
                            text-align: center;
                            background: #0a2d43;
                            border-top: 3px solid #eed956;
                            border-bottom: 3px solid #eed956;
                            position: relative;
                        }
                        .serviceBox:before{
                            content: "";
                            border-top: 0 solid #eed956;
                            border-right: 0 solid transparent;
                            position: absolute;
                            left: 0;
                            top: 0;
                            z-index: 1;
                            transition: all 0.3s ease 0s;
                        }
                        .serviceBox:hover:before{
                            border-top-width: 78px;
                            border-right-width: 78px;
                        }
                        .serviceBox:after{
                            content: "";
                            border-bottom: 0 solid #eed956;
                            border-left: 0 solid transparent;
                            position: absolute;
                            bottom: 0;
                            right: 0;
                            z-index: 1;
                            transition: all 0.3s ease 0s;
                        }
                        .serviceBox:hover:after{
                            border-bottom-width: 78px;
                            border-left-width: 78px;
                        }
                        .serviceBox .service-icon{
                            display: inline-block;
                            width: 100px;
                            height: 100px;
                            line-height: 100px;
                            border-radius: 20px;
                            border: 2px solid #eed956;
                            background: #0a2d43;
                            font-size: 40px;
                            color: #eed956;
                            margin-bottom: 20px;
                            position: relative;
                        }
                        .serviceBox .title{
                            font-size: 20px;
                            font-weight: 700;
                            color: #eed956;
                            letter-spacing: 1px;
                            margin: 0 0 12px 0;
                            text-transform: uppercase;
                            position: relative;
                            transition: all 0.3s ease 0s;
                        }
                        .serviceBox:hover .title{ letter-spacing: 3px; }
                        .serviceBox .description{
                            font-size: 15px;
                            color: #fff;
                            letter-spacing: 1px;
                            line-height: 27px;
                            margin: 0;
                        }
                        @media only screen and (max-width:990px){
                            .serviceBox{ margin-bottom: 30px; }
                        }
                    
License Terms