service box style : demo 13

Web Development

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id lorem id libero tincidunt finibus eget.

Brand Building

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id lorem id libero tincidunt finibus eget.

Responsive Design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id lorem id libero tincidunt finibus eget.

HTML

                        

Web Development

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id lorem id libero tincidunt finibus eget.

CSS

                        .serviceBox{
                            text-align:center;
                            background-color: hsl(0, 0%, 25%);
                            box-shadow: 0 0.0625em 0.1875em 0 hsla(0, 0%, 0%, 0.1), 0 0.5em 0 -0.25em hsl(0, 0%, 24%), 0 0.5em 0.1875em -0.25em hsla(0, 0%, 0%, 0.1), 0 1em 0 -0.5em hsl(0, 0%, 22%), 0 1em 0.1875em -0.5em hsla(0, 0%, 0%, 0.1);
                            padding: 25px;
                            color: #fff;
                        }
                        .serviceBox.orange{
                            background-color: hsl(9, 100%, 64%);
                            box-shadow: 0 0.0625em 0.1875em 0 hsla(0, 0%, 0%, 0.1), 0 0.5em 0 -0.25em hsl(9, 87%, 61%), 0 0.5em 0.1875em -0.25em hsla(0, 0%, 0%, 0.1), 0 1em 0 -0.5em hsl(9, 76%, 57%), 0 1em 0.1875em -0.5em hsla(0, 0%, 0%, 0.1);
                        }
                        .serviceBox.light-blue{
                            background-color: hsl(189, 100%, 64%);
                            box-shadow: 0 0.0625em 0.1875em 0 hsla(0, 0%, 0%, 0.1), 0 0.5em 0 -0.25em hsl(189, 87%, 61%), 0 0.5em 0.1875em -0.25em hsla(0, 0%, 0%, 0.1), 0 1em 0 -0.5em hsl(189, 76%, 57%), 0 1em 0.1875em -0.5em hsla(0, 0%, 0%, 0.1);
                        }
                        .serviceBox .service-icon i{
                            font-size: 33px;
                        }
                        .serviceBox .service-content h3{
                            margin: 7px 0 10px 0;
                            text-transform:capitalize;
                        }
                        .serviceBox .service-content p{
                            margin-bottom:12px;
                            line-height:24px;
                        }
                        @media only screen and (max-width: 990px){
                            .serviceBox{
                                margin-bottom: 25px;
                            }
                        }
                    
License Terms