September 27, 2021

Bootstrap Snippets our services using html css

<section class="servie_area page-section" id="services">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6 col-sm-12 col-xs-12">
                            <div class="section_title service_section_title">
                                <h3>Our Services</h3>
                                <p>Etiam non erat mi. Etiam congue et augue sed tempus. Aenean sed ipsum luctus, scelerisque ipsum nec, iaculis justo. Sed at vestibulum.</p>
                            </div>
                        </div>
                        <!-- item -->
                        <div class="col-md-3 col-sm-6 col-xs-6 col-xxs-12 service_icon_info_top">
                            <div class="service_icon"><span class="fa fa-superpowers"></span>
                                <h5>Web Development</h5></div>
                            <div class="service-overlay"><span class="fa fa-superpowers"></span>
                                <h5><a href="#" title="Web Development">Web Development</a></h5>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis repellat quo vitae tempora.</p>
                            </div>
                        </div>
                        <!-- #item -->
                        <!-- item -->
                        <div class="col-md-3 col-sm-6 col-xs-6 col-xxs-12 service_icon_info_top">
                            <div class="service_icon"><span class="fa fa-ravelry"></span>
                                <h5>Photography</h5></div>
                            <div class="service-overlay"><span class="fa fa-ravelry"></span>
                                <h5><a href="#" title="Photography">Photography</a></h5>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis repellat quo vitae tempora.</p>
                            </div>
                        </div>
                        <!-- #item -->
                    </div>
                    <div class="row">
                        <!-- item -->
                        <div class="col-md-3 col-sm-6 col-xs-6 col-xxs-12 service_icon_info">
                            <div class="service_icon"><span class="fa fa-snowflake-o"></span>
                                <h5>Graphics Design</h5></div>
                            <div class="service-overlay"><span class="fa fa-snowflake-o"></span>
                                <h5><a href="#" title="Graphics Design">Graphics Design</a></h5>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis repellat quo vitae tempora.</p>
                            </div>
                        </div>
                        <!-- #item -->
                        <!-- item -->
                        <div class="col-md-3 col-sm-6 col-xs-6 col-xxs-12 service_icon_info">
                            <div class="service_icon"><span class="fa fa-diamond"></span>
                                <h5>Social Media</h5></div>
                            <div class="service-overlay"><span class="fa fa-diamond"></span>
                                <h5><a href="#" title="Social Media">Social Media</a></h5>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis repellat quo vitae tempora.</p>
                            </div>
                        </div>
                        <!-- #item -->
                        <!-- item -->
                        <div class="col-md-3 col-sm-6 col-xs-6 col-xxs-12 service_icon_info">
                            <div class="service_icon"><span class="fa fa-globe"></span>
                                <h5>Creative Writing</h5></div>
                            <div class="service-overlay"><span class="fa fa-globe"></span>
                                <h5><a href="#" title="Creative Writing">Creative Writing</a></h5>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis repellat quo vitae tempora.</p>
                            </div>
                        </div>
                        <!-- #item -->
                        <!-- item -->
                        <div class="col-md-3 col-sm-6 col-xs-6 col-xxs-12 service_icon_info">
                            <div class="service_icon"><span class="fa fa-object-ungroup"></span>
                                <h5>Brand Creation</h5></div>
                            <div class="service-overlay"><span class="fa fa-object-ungroup"></span>
                                <h5><a href="#" title="Brand Creation">Brand Creation</a></h5>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis repellat quo vitae tempora.</p>
                            </div>
                        </div>
                        <!-- #item -->
                    </div>
                </div>
            </section>

 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
   section.servie_area {
        padding: 110px 0 120px; 
    }

    .service_section_title h3 {
        padding-bottom: 25px;
        text-transform: uppercase; font-weight: 600; font-size: 30px;
    }

    .service_section_title p {
        max-width: 450px;
        font-size: 16px;
        line-height: 30px;
    }

    .service_icon_info,
    .service_icon_info_top {
        border: 1px solid #ddd;
        height: 216px;
        text-align: center;
    }

    .service_icon_info:nth-child(2),
    .service_icon_info:nth-child(4),
    .service_icon_info:nth-child(3) {
        border-left: none;
    }

    .service_icon_info_top:nth-child(2) {
        border-right: none;
        margin-left: -1px;
        margin-bottom: -1px;
    }

    .service_icon_info_top {
        margin: 12px 0 -2px 0px;
        position: relative;
    }

    .service_icon_info {
        position: relative;
    }

    .service_icon_info .service-overlay,
    .service_icon_info_top .service-overlay {
        width: 295px;
        height: 295px;
        position: absolute;
        overflow: hidden;
        margin: -55px -2px;
        top: 0px;
        left: 0;
        opacity: 0;
        background-image: linear-gradient(to right, #2196F3 0%, #64B5F6 100%);   
        background: -webkit-linear-gradient(to right, #2196F3 0%, #64B5F6 100%); /* Chrome 10-25, Safari 5.1-6 */
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
        text-align: center;
        padding-top: 45px;
        box-shadow: rgba(0, 0, 0, 0.10) 0px 15px 45px 0px;
        z-index: 1;
        -webkit-transition: .4s;
        transition: .4s;
        border-radius: 5px;
    }

    .service_icon_info:hover .service-overlay,
    .service_icon_info_top:hover .service-overlay {
        opacity: 1;
        -webkit-transform: translateY(10px);
        transform: translateY(10px);
    }

    .service_icon {
        padding-top: 55px;
    }

    .service_icon span {
        color: #333333;
        font-size: 48px;
    }

    .service_icon h5 {
        color: #333333;
        font-size: 16px;
        margin-top: 30px;
    }

    .service-overlay h5 {
        color: #fff;
        font-size: 16px;
        margin-top: 30px;
    }
    .service-overlay h5 a,
    .service-overlay h5 a:hover,
    .service-overlay h5 a:active,
    .service-overlay h5 a:focus{
      color: #fff;
    }

    .service-overlay p {
        max-width: 230px;
        margin: 25px auto 0 auto;
        color: #eee;
    }

    .service-overlay span {
        font-size: 48px;
    }

    .service_icon_info:hover .service-overlay:hover,
    .service-overlay span,
    .service_icon_info_top:hover .service-overlay span {
        color: #fff;
    }

    /*Responsive*/
    @media only screen and (min-width: 992px) and (max-width: 1200px) {
    
        .service_icon_info .service-overlay,
        .service_icon_info_top .service-overlay {
            width: 244px;
        }    
    }

    @media only screen and (min-width: 768px) and (max-width: 991px) {
        
        .service_section_title {
            text-align: center;
            margin: 0 auto;
            padding-bottom: 50px;
        }
        
        .service_section_title p {
            max-width: 545px;
            margin: 0 auto;
        }
        .service_icon_info .service-overlay,
        .service_icon_info_top .service-overlay {
            width: 100%;
            left: 2px;
        }
        .service_icon_info_top {
            border: 1px solid #ddd;
        }
        .service_icon_info:nth-child(2),
        .service_icon_info:nth-child(4) {
            border-right: 1px solid #ddd;
            border-left: 1px solid #ddd;
        }
        .service_icon_info {
            border-bottom: 1px solid #ddd;
            border-top: none;
            border-right: none;
            height: 216px;
            text-align: center;
        }
        .service_icon_info:nth-child(1),
        .service_icon_info:nth-child(3) {
            border-left: 1px solid #ddd;
        }
        
    }

    @media (max-width: 768px) {
        
        .service_section_title {
                padding-bottom: 30px;
            }
        
    }

    @media (max-width: 767px) {
        
        .service_icon_info .service-overlay,
        .service_icon_info_top .service-overlay {
            width: 100%;
            left: 2px;
        }
        .service_icon_info_top {
            border: 1px solid #ddd;
        }
        .service_icon_info:nth-child(2),
        .service_icon_info:nth-child(4) {
            border-right: 1px solid #ddd;
            border-left: 1px solid #ddd;
        }
        .service_icon_info {
            border-bottom: 1px solid #ddd;
            border-top: none;
            border-right: none;
            height: 216px;
            text-align: center;
        }
        .service_icon_info:nth-child(1),
        .service_icon_info:nth-child(3) {
            border-left: 1px solid #ddd;
        }
        
        .service_section_title p {
            max-width: 100%;
        }
        
    }

    @media (max-width: 500px) {		   
        .service_icon_info_top:nth-child(2) {
            margin-left: 0;
            margin-bottom: -12px;
            border-bottom: none;
            border-right: 1px solid #ddd;
        }
        .service_icon_info:nth-child(1),
        .service_icon_info:nth-child(3) {
            border-right: 1px solid #ddd;
        }
        		    
    }

 

Leave a Reply

Your email address will not be published. Required fields are marked *