service box style : demo 76

Web Design

Lorem ipsum dolor sit amet, consectetur adipisicing elit Accusantium.

Web Development

Lorem ipsum dolor sit amet, consectetur adipisicing elit Accusantium.

Brand Building

Lorem ipsum dolor sit amet, consectetur adipisicing elit Accusantium.

Responsive Design

Lorem ipsum dolor sit amet, consectetur adipisicing elit Accusantium.

HTML

                        

Web Design

Lorem ipsum dolor sit amet, consectetur adipisicing elit Accusantium.

Web Development

Lorem ipsum dolor sit amet, consectetur adipisicing elit Accusantium.

CSS

                        .serviceBox{
                            text-align: center;
                            border-radius: 15px 15px 0 0;
                            box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
                            margin-bottom: 50px;
                            position: relative;
                            transition: all 0.3s ease 0s;
                        }
                        .serviceBox:hover{ transform: translateY(-20px); }
                        .serviceBox:before{
                            content: "";
                            display: block;
                            border-top: 30px solid #efefef;
                            border-left: 30px solid transparent;
                            border-bottom: 30px solid transparent;
                            position: absolute;
                            bottom: -57px;
                            right: 0;
                        }
                        .serviceBox:after{
                            content: "";
                            width: 100px;
                            height: 100px;
                            background: #000;
                            border-radius: 50%;
                            position: absolute;
                            bottom: -35%;
                            right: 0;
                            opacity: 0;
                            -webkit-filter: blur(10px);
                            -webkit-transform: scale(1, 0.2);
                            transition: all 0.3s ease 0s;
                        }
                        .serviceBox:hover:after{ opacity: 0.2; }
                        .serviceBox .service-icon{
                            padding: 25px 0;
                            font-size: 50px;
                            color: #fff;
                            border-radius: 15px 15px 0 0;
                            background: linear-gradient(90deg, rgba(230, 156, 170, 1) 20.182283912535816%, rgba(230, 155, 169, 1) 20.182283912535816%, rgba(240, 48, 137, 1) 80.18228771047744%);
                        }
                        .serviceBox .service-content{
                            padding: 20px 15px;
                            color: #f03089;
                        }
                        .serviceBox .title{
                            display: block;
                            font-size: 20px;
                            font-weight: 700;
                            letter-spacing: 1px;
                            text-transform: uppercase;
                            margin: 0 0 12px 0;
                        }
                        .serviceBox .description{
                            font-size: 15px;
                            letter-spacing: 1px;
                            line-height: 27px;
                            margin: 0;
                        }
                        .serviceBox.yellow .service-icon{
                            background: linear-gradient(90deg, rgba(232, 193, 135,1) 20.182283912535816%,rgba(232, 192, 134,1) 20.182283912535816%,rgba(237, 142, 0,1) 80.18228771047744%);
                        }
                        .serviceBox.blue .service-icon{
                            background: linear-gradient(90deg, rgba(164, 185, 224,1) 20.182283912535816%,rgba(164, 185, 224,1) 20.80728395209771%,rgba(100, 100, 237,1) 80.18228771047744%);
                        }
                        .serviceBox.green .service-icon{
                            background: linear-gradient(90deg, rgba(164, 224, 191,1) 20.182283912535816%,rgba(164, 224, 191,1) 20.80728395209771%,rgba(2, 163, 12,1) 80.18228771047744%);
                        }
                        .serviceBox.yellow .service-content{ color: #ed8e00; }
                        .serviceBox.blue .service-content{ color: #6464ed; }
                        .serviceBox.green .service-content{ color: #02a30c; }
                    
License Terms