service box style : demo 48

1

Web Design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec accumsan risus. Etiam vel viverra nunc, vel.

read more
2

Brand Building

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec accumsan risus. Etiam vel viverra nunc, vel.

read more
3

Responsive Design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec accumsan risus. Etiam vel viverra nunc, vel.

read more

HTML

                        
1

Web Design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec accumsan risus. Etiam vel viverra nunc, vel.

read more
2

Brand Building

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec accumsan risus. Etiam vel viverra nunc, vel.

read more

CSS

                        .demo{ background: #eef7f9; }
                        .serviceBox{
                            border-bottom: 4px solid #d0dde4;
                            border-right: 4px solid #d0dde4;
                            background: #fff;
                            padding: 30px 40px 27px;
                            transition: all 0.3s ease-in-out 0s;
                        }
                        .serviceBox:hover{
                            border-color: #27c9c6;
                        }
                        .serviceBox .service-icon{
                            display: block;
                            width: 35px;
                            height: 35px;
                            line-height: 35px;
                            border-radius: 50%;
                            background: #27c9c6;
                            text-align: center;
                            float: left;
                            font-size: 20px;
                            color: #fff;
                            margin: 0 20px 0 0;
                            transition: all 0.3s ease-in-out 0s;
                        }
                        .serviceBox .title{
                            display: inline-block;
                            font-size: 20px;
                            color: #041829;
                            border-bottom: 3px solid #d9e7ed;
                            padding-bottom: 6px;
                            margin: 0 0 20px 0;
                            transition: all 0.3s ease-in-out 0s;
                        }
                        .serviceBox:hover .title{
                            border-color: #27c9c6;
                        }
                        .serviceBox .description{
                            font-size: 18px;
                            color: #929a9c;
                            margin: 0 0 11px 0;
                        }
                        .serviceBox .read-more{
                            display: inline-block;
                            font-size: 16px;
                            font-weight: 500;
                            color: #27c9c6;
                            text-transform: capitalize;
                        }
                        .serviceBox .read-more:hover{
                            letter-spacing: 0.3px;
                            color: #27c9c6;
                        }
                        .serviceBox .read-more:after{
                            content: "\f0da";
                            font-family: "Font Awesome 5 Free"; font-weight: 900;
                            font-size: 16px;
                            color: #27c9c6;
                            margin-left: 7px;
                            transition: all 0.2s ease 0s;
                        }
                        @media only screen and (max-width: 990px){
                            .serviceBox{ margin-bottom: 30px; }
                        }
                    
License Terms