service box style : demo 52

Web Design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at sapien at erat hendrerit.

read more

Web Development

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at sapien at erat hendrerit.

read more

Brand Building

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at sapien at erat hendrerit.

read more

Responsive Design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at sapien at erat hendrerit.

read more

HTML

                        

Web Design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at sapien at erat hendrerit.

read more

Web Development

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at sapien at erat hendrerit.

read more

CSS

                        .serviceBox{
                            border: 1px solid #ddd;
                            text-align: center;
                            border-radius: 15px;
                            padding: 25px;
                            position: relative;
                            transition: all 0.4s ease-in-out 0s;
                        }
                        .serviceBox:hover{
                            transform: scale(1.05, 1.05);
                        }
                        .serviceBox .service-icon{
                            width: 80px;
                            height: 80px;
                            line-height: 70px;
                            border-radius: 50%;
                            border: 5px solid #d3ae36;
                            font-size: 42px;
                            color: #d3ae36;
                            margin: 0 auto 30px;
                            position: relative;
                            transition: all 0.2s ease-out 0s;
                        }
                        .serviceBox:hover .service-icon{
                            border-color: #a88500;
                        }
                        .serviceBox .service-icon i{
                            transform: rotate(0);
                            transition: all 0.2s ease-out 0s;
                        }
                        .serviceBox:hover .service-icon i{
                            transform: rotate(360deg);
                            color: #a88500;
                        }
                        .serviceBox .title{
                            font-size: 20px;
                            font-weight: bold;
                            color: #4a4a4a;
                            line-height: 40px;
                            margin: 0 0 35px 0;
                            position: relative;
                        }
                        .serviceBox .title:after{
                            content: "";
                            display: block;
                            width: 50px;
                            height: 4px;
                            background: #f1f1f1;
                            margin: 0 auto;
                            position: absolute;
                            bottom: -15px;
                            left: 0;
                            right: 0;
                            transition: all 0.2s ease-out 0s;
                        }
                        .serviceBox:hover .title:after{
                            width: 100%;
                        }
                        .serviceBox .description{
                            font-size: 12px;
                            color: #7a7a7a;
                            line-height: 24px;
                            margin-bottom: 20px;
                        }
                        .serviceBox .read-more{
                            display: inline-block;
                            padding: 8px 22px;
                            background: #d3ae36;
                            font-size: 14px;
                            font-weight: 500;
                            color: #fff;
                            text-transform: capitalize;
                            border-radius: 40px;
                            transform: scale(1);
                            transition: all 0.2s ease-out 0s;
                        }
                        .serviceBox .read-more:hover{
                            transform: scale(1.1, 1.1);
                        }
                        .serviceBox:hover .read-more{
                            background: #a88500;
                        }
                        @media only screen and (max-width: 990px){
                            .serviceBox{ margin-bottom: 40px; }
                        }
                    
License Terms