service box style : demo 36

Web Design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu mi eget arcu rhoncus interdum. In.

Web Development

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu mi eget arcu rhoncus interdum. In.

Responsive Design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu mi eget arcu rhoncus interdum. In.

HTML

                        

Web Design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu mi eget arcu rhoncus interdum. In.

Web Development

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu mi eget arcu rhoncus interdum. In.

CSS

                        .serviceBox{
                            border: 1px solid #8a716a;
                            border-radius: 10px;
                            margin-top: 30px;
                            padding: 25px 20px;
                            position: relative;
                        }
                        .serviceBox .service-icon{
                            width: 60px;
                            height: 60px;
                            line-height: 60px;
                            border-radius: 5px;
                            background: #de6b48;
                            font-size: 40px;
                            color: #fff;
                            text-align: center;
                            position: absolute;
                            top: -30px;
                            right: 40px;
                        }
                        .serviceBox .service-icon:before{
                            content: "";
                            width: 100%;
                            height: 100%;
                            background: #fff;
                            position: absolute;
                            top: -20px;
                            left: -45px;
                            opacity: 0.1;
                            transform: rotate(137deg) scale(1.5) skew(29deg) translate(-1px);
                        }
                        .serviceBox .service-icon:after{
                            content: "";
                            border-top: 11px solid #de6b48;
                            border-right: 11px solid transparent;
                            position: absolute;
                            top: 100%;
                            left: 50%;
                            margin-left: -4px;
                        }
                        .serviceBox .title{
                            font-size: 24px;
                            color: #787472;
                        }
                        .serviceBox .description{
                            font-size: 16px;
                            color: #8a716a;
                            line-height: 25px;
                        }
                        @media only screen and (max-width: 990px){
                            .serviceBox{ margin-bottom: 30px; }
                        }
                        @media only screen and (max-width: 767px){
                            .serviceBox{ margin-bottom: 40px; }
                        }
                    
License Terms