service box style : demo 10

Web Development

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum tincidunt.

Brand Building

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum tincidunt.

Responsive Design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum tincidunt.

Clean & Clear Design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum tincidunt.

HTML

                    

Web Development

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum tincidunt.

CSS

                    .serviceBox{
                        text-align: center;
                    }
                    .serviceBox .service-icon{
                        width:100px;
                        height:100px;
                        line-height: 100px;
                        font-size: 50px;
                        border: 1px solid #727cb6;
                        border-radius: 50%;
                        margin:0 auto 45px;
                        color:#727cb6;
                    }
                    .serviceBox.green .service-icon{
                        border: 1px solid #008b8b;
                        color: #008b8b;
                    }
                    .serviceBox.orange .service-icon{
                        border: 1px solid #e67e22;
                        color:#e67e22;
                    }
                    .serviceBox.pink .service-icon{
                        border: 1px solid #ed687c;
                        color: #ed687c;
                    }
                    .serviceBox .service-icon > i{
                        transition: all 0.3s ease 0s;
                    }
                    .serviceBox:hover .service-icon > i{
                        transform:scale(0.8);
                        transition: all 0.3s ease 0s;
                    }
                    .serviceBox .service-content h3{
                        font-size: 18px;
                        font-weight:400;
                        margin-bottom: 20px;
                        color:#727cb6;
                    }
                    .serviceBox.green .service-content h3{
                        color: #008b8b;
                    }
                    .serviceBox.orange .service-content h3{
                        color:#e67e22;
                    }
                    .serviceBox.pink .service-content h3{
                        color: #ed687c;
                    }
                    .serviceBox .service-content p{
                        color: hsl(0, 0%, 38%);
                        font-size: 14px;
                        line-height: 24px;
                    }
                    @media screen and (max-width: 990px){
                        .serviceBox{
                            margin-bottom: 25px;
                        }
                    }