service box style : demo 35

Web Design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc magna tellus, tincidunt eu sem.

Web Development

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc magna tellus, tincidunt eu sem.

Brand Building

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc magna tellus, tincidunt eu sem.

Responsive Design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc magna tellus, tincidunt eu sem.

HTML

                        

Web Design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc magna tellus, tincidunt eu sem.

Web Development

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc magna tellus, tincidunt eu sem.

CSS

                        .serviceBox{
                            text-align: center;
                            margin-top: 20px;
                        }
                        .serviceBox .service-icon{
                            width: 150px;
                            height: 150px;
                            border-radius: 50%;
                            display: inline-block;
                            border: 1px solid #2395ec;
                            margin-bottom: 20px;
                            transition: all 0.5s ease 0s;
                        }
                        .serviceBox:hover .service-icon{
                            background: #2395ec;
                        }
                        .serviceBox .service-icon i{
                            font-size: 70px;
                            color: #2395ec;
                            line-height: 150px;
                            transition: all 0.5s ease 0s;
                        }
                        .serviceBox .title{
                            font-size: 24px;
                            color: #171819;
                            margin: 0 0 15px 0;
                            transition: all 0.5s ease 0s;
                        }
                        .serviceBox:hover .title{
                            color: #2395ec;
                        }
                        .serviceBox .title:after{
                            content: "\f00d";
                            display: block;
                            font-family: "fontawesome";
                            font-size: 15px;
                            margin-top: 14px;
                            color: #2395ec;
                        }
                        .serviceBox .description{
                            font-size: 14px;
                            color: #737577;
                            line-height: 25px;
                        }
                        .serviceBox.purple .service-icon{
                            border: 1px solid #8f8bd5;
                        }
                        .serviceBox.purple:hover .service-icon{
                            background: #8f8bd5;
                        }
                        .serviceBox.purple .service-icon i,
                        .serviceBox.purple .title:after,
                        .serviceBox.purple:hover .title{
                            color: #8f8bd5;
                        }
                        .serviceBox.green .service-icon{
                            border: 1px solid #98c830;
                        }
                        .serviceBox.green:hover .service-icon{
                            background: #98c830;
                        }
                        .serviceBox.green .service-icon i,
                        .serviceBox.green .title:after,
                        .serviceBox.green:hover .title{
                            color: #98c830;
                        }
                        .serviceBox.orange .service-icon{
                            border: 1px solid #e69020;
                        }
                        .serviceBox.orange:hover .service-icon{
                            background: #e69020;
                        }
                        .serviceBox.orange .service-icon i,
                        .serviceBox.orange .title:after,
                        .serviceBox.orange:hover .title{
                            color: #e69020;
                        }
                        .serviceBox:hover .service-icon i,
                        .serviceBox.purple:hover .service-icon i,
                        .serviceBox.green:hover .service-icon i,
                        .serviceBox.orange:hover .service-icon i{
                            transform: rotateY(360deg);
                            color: #fff;
                        }
                    
License Terms