service box style : demo 59

Web Design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus nunc.

Read More

Web Development

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus nunc.

Read More

Brand Building

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus nunc.

Read More

Responsive Design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus nunc.

Read More

HTML

                        

Web Design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus nunc.

Read More

Web Development

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus nunc.

Read More

CSS

                        .serviceBox{
                            padding: 0 20px;
                            text-align: center;
                            border: 1px solid #ccc;
                            margin: 50px 0;
                            position: relative;
                            transition: all 0.3s linear 0s;
                        }
                        .serviceBox .service-icon{
                            display: inline-block;
                            width: 90px;
                            height: 90px;
                            line-height: 90px;
                            border-radius: 5px;
                            background: #4ca8e8;
                            font-size: 30px;
                            color: #fff;
                            margin: -45px 0 30px;
                            position: relative;
                            transition: all 0.3s linear 0s;
                        }
                        .serviceBox:hover .service-icon{
                            background: #dcdcdc;
                            color: #4ca8e8;
                        }
                        .serviceBox .service-icon:after{
                            content: "";
                            border-top: 10px solid #4ca8e8;
                            border-left: 10px solid transparent;
                            border-right: 10px solid transparent;
                            position: absolute;
                            bottom: -10px;
                            left: 50%;
                            transform: translateX(-50%);
                            transition: all 0.3s linear 0s;
                        }
                        .serviceBox:hover .service-icon:after{
                            border-top-color: #dcdcdc;
                        }
                        .serviceBox .title{
                            font-size: 16px;
                            color: #414141;
                            margin: 0 0 12px 0;
                            transition: all 0.3s ease 0s;
                        }
                        .serviceBox:hover .title{
                            color: #4ca8e8;
                        }
                        .serviceBox .description{
                            font-size: 16px;
                            color: #8e8e8e;
                            line-height: 25px;
                        }
                        .serviceBox .read-more{
                            display: inline-block;
                            padding: 1px;
                            background: #fff;
                            border: 1px solid #ccc;
                            font-size: 16px;
                            color: #414141;
                            position: relative;
                            bottom: -20px;
                            transition: margin-right 0.5s ease 0s, border-color 0.3s ease 0s;
                        }
                        .serviceBox .read-more span{
                            display: inline-block;
                            padding: 5px 18px;
                            background: #fff;
                            margin: 0 -35px -12px 0;
                            position: relative;
                            left: 12px;
                            transition: margin-right 0.5s ease 0s;
                        }
                        .serviceBox:hover .read-more span{
                            color: #4ca8e8;
                            margin-right: 0;
                        }
                        .serviceBox .read-more i{
                            display: inline-block;
                            padding: 9px 17px 8px 20px;
                            background: #4ca8e8;
                            color: #fff;
                        }
                        .serviceBox:hover,
                        .serviceBox:hover .read-more{
                            border-color: #4ca8e8;
                        }
                        @media only screen and (max-width:767px){
                            .serviceBox{ margin-bottom: 80px; }
                        }
                    
License Terms