service box style : demo 6

Web Development

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mauris est, faucibus at.

Read more

Brand Building

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mauris est, faucibus at.

Read more

Responsive Design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mauris est, faucibus at.

Read more

Clean & Clear Design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mauris est, faucibus at.

Read more

HTML

                        

Web Development

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mauris est, faucibus at.

Read more

CSS

                        .serviceBox {
                            background:hsl(0, 0%, 100%);
                            border: 2px solid hsl(0, 0%, 100%);
                            border-radius: 4px;
                            margin-top: 40px;
                            padding: 0 30px 40px;
                            text-align: center;
                        }
                        .serviceBox .service-icon{
                            position: relative;
                        }
                        .serviceBox .service-icon::after {
                            border-radius: 50%;
                            box-sizing: content-box;
                            content: "";
                            height: 100%;
                            pointer-events: none;
                            position: absolute;
                            width: 100%;
                        }
                        .serviceBox .service-icon.purple i {
                            background:#7248F5;
                        }
                        .serviceBox .service-icon.light-blue i {
                            background:#1DCFD1;
                        }
                        .serviceBox .service-icon.orange i {
                            background:#F05135;
                        }
                        .serviceBox .service-icon.green i {
                            background:#92D11D;
                        }
                        .serviceBox .service-icon i {
                            border: 2px solid hsl(192, 24%, 96%);
                            border-radius: 50%;
                            color: hsl(0, 0%, 100%);
                            display: block;
                            font-size: 28px;
                            height: 80px ;
                            line-height: 80px;
                            margin: -40px auto 0;
                            position: relative;
                            top: 0;
                            width: 80px;
                        }
                        .serviceBox a{
                            border: none;
                        }
                        .serviceBox a:hover{
                            background: none;
                            color: #000000;
                        }
                        .serviceBox a.purple{
                            color:#7248F5;
                        }
                        .serviceBox a.light-blue{
                            color:#1DCFD1;
                        }
                        .serviceBox a.orange{
                            color:#F05135;
                        }
                        .serviceBox a.green{
                            color:#92D11D;
                        }
                        .serviceBox .service-content h3{
                            font-size:16px;
                            margin-top:35px;
                            color:#000000;
                        }
                        .serviceBox .service-content p{
                            line-height:25px;
                        }
                        @media only screen and (max-width: 990px){
                            .serviceBox{
                                margin-bottom: 20px;
                            }
                        }