service box style : demo 31

1

Designer

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae tortor et lacus congue tincidunt sed vel lectus. Cras elementum urna non ornare laoreet. Cras auctor vitae ligula eget pharetra. Cras ultrices tortor vitae tellus commodo euismod. Duis sollicitudin urna.

more
2

Manager

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae tortor et lacus congue tincidunt sed vel lectus. Cras elementum urna non ornare laoreet. Cras auctor vitae ligula eget pharetra. Cras ultrices tortor vitae tellus commodo euismod. Duis sollicitudin urna.

more
3

Developer

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae tortor et lacus congue tincidunt sed vel lectus. Cras elementum urna non ornare laoreet. Cras auctor vitae ligula eget pharetra. Cras ultrices tortor vitae tellus commodo euismod. Duis sollicitudin urna.

more

HTML

                        
1

Designer

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae tortor et lacus congue tincidunt sed vel lectus. Cras elementum urna non ornare laoreet. Cras auctor vitae ligula eget pharetra. Cras ultrices tortor vitae tellus commodo euismod. Duis sollicitudin urna.

more
2

Manager

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae tortor et lacus congue tincidunt sed vel lectus. Cras elementum urna non ornare laoreet. Cras auctor vitae ligula eget pharetra. Cras ultrices tortor vitae tellus commodo euismod. Duis sollicitudin urna.

more

CSS

                        .serviceBox{
                            background: #26b9d3;
                            padding: 30px 25px;
                            transition: all 0.6s ease 0s;
                        }
                        .serviceBox:hover{
                            background: #2b2a28;
                        }
                        .serviceBox .service-icon{
                            width: 130px;
                            height: 130px;
                            line-height: 130px;
                            border-radius: 50%;
                            background: #fff;
                            display: inline-block;
                            font-size: 74px;
                            font-weight: bold;
                            color: #26b9d3;
                            text-align: center;
                        }
                        .serviceBox .title{
                            font-size: 50px;
                            color: #fff;
                            line-height: 50px;
                            margin: 30px 0;
                        }
                        .serviceBox .sub-title{
                            font-size: 20px;
                            letter-spacing: 1px;
                            color: #fff;
                            margin-bottom: 12px;
                        }
                        .serviceBox .description{
                            font-size: 14px;
                            color: #fff;
                            line-height: 26px;
                            margin: 20px 0 30px 0px;
                        }
                        .serviceBox .read{
                            display: inline-block;
                            width: 124px;
                            height: 50px;
                            position: relative;
                            overflow: hidden;
                            font-size: 20px;
                            color: #2795a8;
                            background: #fff;
                            line-height: 50px;
                            text-align: center;
                            text-transform: uppercase;
                            z-index: 1;
                            transition: all 0.3s ease 0s;
                        }
                        .serviceBox .read:hover{
                            color: #fff;
                        }
                        .serviceBox .read:before {
                            content: "";
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            top: 100%;
                            left: 0;
                            background: #26b9d3;
                            color: #fff;
                            z-index: -1;
                            transition: all 0.3s ease 0s;
                        }
                        .serviceBox .read:hover:before {
                            top: 0;
                        }
                        @media screen and (max-width: 990px){
                            .serviceBox{ margin-bottom: 30px; }
                            .serviceBox .description{ margin: 20px 0; }
                        }
                    
License Terms