service box style : demo 75

Web Design

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium consequuntur, deleniti eaque excepturi.

Web Development

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium consequuntur, deleniti eaque excepturi.

Brand Building

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium consequuntur, deleniti eaque excepturi.

Responsive Design

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium consequuntur, deleniti eaque excepturi.

HTML

                        

Web Design

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium consequuntur, deleniti eaque excepturi.

Web Development

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium consequuntur, deleniti eaque excepturi.

CSS

                        .serviceBox{ text-align: center; }
                        .serviceBox .service-icon{
                            display: inline-block;
                            width: 120px;
                            height: 120px;
                            line-height: 120px;
                            border-radius: 50%;
                            background: #1a9fab;
                            font-size: 40px;
                            color: #fff;
                            margin-bottom: 40px;
                            position: relative;
                        }
                        .serviceBox .service-icon:before{
                            content: "";
                            border: 3px solid #fff;
                            border-radius: 50%;
                            position: absolute;
                            top: 10px;
                            left: 10px;
                            bottom: 10px;
                            right: 10px;
                            opacity: 1;
                            transition: all 0.3s ease 0s;
                        }
                        .serviceBox:hover .service-icon:before{
                            top: 0;
                            left: 0;
                            bottom: 0;
                            right: 0;
                            opacity: 0;
                        }
                        .serviceBox .service-icon:after{
                            content: "";
                            border-top: 25px solid #1a9fab;
                            border-left: 15px solid transparent;
                            border-right: 15px solid transparent;
                            position: absolute;
                            bottom: -22px;
                            left: 40%;
                        }
                        .serviceBox .service-content{
                            padding: 20px 25px;
                            background: #1a9fab;
                            border-radius: 15px;
                            color: #fff;
                            position: relative;
                        }
                        .serviceBox .service-content:before{
                            content: "";
                            border: 3px solid #fff;
                            border-radius: 10px;
                            position: absolute;
                            top: 0;
                            left: 0;
                            bottom: 0;
                            right: 0;
                            opacity: 0;
                            transition: all 0.3s ease 0s;
                        }
                        .serviceBox:hover .service-content:before{
                            top: 10px;
                            left: 10px;
                            bottom: 10px;
                            right: 10px;
                            opacity: 1;
                        }
                        .serviceBox .title{
                            display: block;
                            font-size: 20px;
                            font-weight: 700;
                            text-transform: uppercase;
                            margin: 0 0 12px 0;
                            position: relative;
                        }
                        .serviceBox .description{
                            font-size: 15px;
                            line-height: 27px;
                            letter-spacing: 1px;
                        }
                        .serviceBox.yellow .service-icon,
                        .serviceBox.yellow .service-content{ background: #e3a325; }
                        .serviceBox.pink .service-icon,
                        .serviceBox.pink .service-content{ background: #dc55bc; }
                        .serviceBox.green .service-icon,
                        .serviceBox.green .service-content{ background: #63bb54; }
                        .serviceBox.yellow .service-icon:after{ border-top-color: #e3a325; }
                        .serviceBox.pink .service-icon:after{ border-top-color: #dc55bc; }
                        .serviceBox.green .service-icon:after{ border-top-color: #63bb54; }
                        @media only screen and (max-width:990px){
                            .serviceBox{ margin-bottom: 30px; }
                        }
                    
License Terms