service box style : demo 66

Web Design

01

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dictum convallis suscipit. Donec finibus neque at mi volutpat ornare.

Web Development

02

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dictum convallis suscipit. Donec finibus neque at mi volutpat ornare.

Responsive Design

03

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dictum convallis suscipit. Donec finibus neque at mi volutpat ornare.

HTML

                        

Web Design

01

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dictum convallis suscipit. Donec finibus neque at mi volutpat ornare.

Web Development

02

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dictum convallis suscipit. Donec finibus neque at mi volutpat ornare.

CSS

                        .serviceBox{
                            padding-bottom: 40px;
                            position: relative;
                        }
                        .serviceBox:after{
                            content: "";
                            width: 100%;
                            height: 10px;
                            border-top: 1px solid #d6d6d6;
                            border-bottom: 1px solid #d6d6d6;
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            transition: all 0.5s ease 0s;
                        }
                        .serviceBox:hover:after{ border-color: #ef4789; }
                        .serviceBox i{
                            display: block;
                            font-size: 67px;
                            color: #cd4646;
                            text-align: left;
                            margin-bottom: 25px;
                        }
                        .serviceBox:hover i{ animation: 0.3s ease 0s normal forwards 1 running loading; }
                        .serviceBox .title{
                            display: inline-block;
                            font-size: 22px;
                            font-weight: bold;
                            color: #282727;
                            text-transform: capitalize;
                            margin: 0 0 35px 0;
                            float: left;
                        }
                        .serviceBox .number{
                            display: inline-block;
                            float: right;
                            font-size: 30px;
                            font-weight: bold;
                            line-height: 30px;
                            color: #d6d6d6;
                        }
                        .serviceBox .description{
                            font-size: 16px;
                            color: #8b8a8a;
                            margin: 0;
                            clear: both;
                        }
                        @keyframes loading{
                            49%{
                                transform: translateY(-100%);
                            }
                            50%{
                                opacity: 0;
                                transform: translateY(100%);
                            }
                            51%{
                                opacity: 1;
                            }
                        }
                        @media only screen and (max-width:990px){
                            .serviceBox{ margin-bottom: 20px; }
                        }
                    
License Terms