service box style : demo 12

Web Development

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et pretium erat, nec.

Brand Building

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et pretium erat, nec.

Responsive Design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et pretium erat, nec.

HTML

                   

Web Development

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et pretium erat, nec.

CSS

                    .serviceBox{
                        display: flex;
                        min-height:150px;
                    }
                    .serviceBox .service-content{
                        background: hsl(192, 15%, 94%);
                        border-bottom: 3px solid hsl(194, 16%, 79%);
                        border-radius: 3px 0 0 3px;
                        padding: 25px;
                        min-height: 152px;
                    }
                    .serviceBox .service-content h3{
                        color: hsl(0, 0%, 7%);
                        font-size: 18px;
                        margin: 0;
                        padding: 0;
                        font-weight: 600;
                    }
                    .serviceBox .service-content .read a{
                        background: hsl(283, 39%, 53%);
                        color:#fff;
                        margin-top:8px;
                        border:none;
                        border-radius:0;
                    }
                    .serviceBox.blue .service-content .read a{
                        background:#2980B9;
                    }
                    .serviceBox.green .service-content .read a{
                        background:#27AE60;
                    }
                    .serviceBox.blue .service-icon{
                        background:#2980B9;
                        border-bottom:3px solid #20638F;
                    }
                    .serviceBox.green .service-icon{
                        background:#27AE60;
                        border-bottom:3px solid #1E8449;
                    }
                    .serviceBox .service-content p{
                        color: hsl(0, 0%, 40%);
                        font-family: arial,sans-serif;
                        font-size: 13px;
                        margin: 0;
                        padding: 5px 0 5px;
                        font-weight: 600;
                    }
                    .serviceBox .service-icon{
                        background: hsl(283, 39%, 53%);
                        border-bottom:3px solid hsl(283, 39%, 43%);
                        color: hsl(192, 15%, 94%);
                        font-size: 72px;
                        padding: 15px 0 0;
                        text-align: center;
                        width: 100px;
                    }
                    .serviceBox .service-icon i{
                        text-align: center;
                    }
                    @media only screen and (max-width: 990px){
                        .serviceBox{
                            margin-bottom: 20px;
                        }
                    }