Service Page Using CSS Hover Effect

Hello Readers,

Today in this blog you’ll learn how to create a service page using the CSS hover effect using. Previously I have shared a Live Animation Project Using JavaScript now it’s time to create a service page with a hover effect using HTML, CSS.

If you’re a beginner, you can also create these types of service pages and good them according to your choice because there are no vast codes.

You might like this:

If you like this program (Custom Design) and want to get source code. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

<!DOCTYPE html>
<!-- code by CodeitHub ( https://CodeitHub.com ) -->
<html>
    <head>
        <title> Bootstrap </title>
        <link rel="Stylesheet" href="indes.css">
        <link rel="Stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>
    <body>
        <div class="container">
            <div class="service">
                <h1>Our Services</h1>
            </div>
            <div class="row">
                <div class="col-md-3 text-center">
                    <div class="icon">
                        <i class="fa fa-desktop"></i>
                    </div>
                    <h3>Web Development</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
                <div class="col-md-3 text-center">
                    <div class="icon">
                        <i class="fa fa-tablet"></i>
                    </div>
                    <h3>Web Development</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
                <div class="col-md-3 text-center">
                    <div class="icon">
                        <i class="fa fa-paint-brush"></i>
                    </div>
                    <h3>Web Development</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
                <div class="col-md-3 text-center">
                    <div class="icon">
                        <i class="fa fa-line-chart"></i>
                    </div>
                    <h3>Web Development</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
            </div>
        </div>
    </body>
</html>
/** code by CodeitHub ( https://CodeitHub.com ) **/
body{
    background:url("../cup.jpg");
    background-size: cover;
    background-position: center;
    color:#fff !important;
}
.service{
    margin: 90px auto;
    text-align: center;
}
h1{
    font-family: sans-serif;
    letter-spacing: 1px;
}
h1:after{
    content:'';
    background:white;
    display:block;
    width:150px;
    height: 3px;
    margin:10px auto;
}
.icon{
    font-size:40px;
    margin: 20px auto;
    padding: 20px;
    height:80px;
    width: 80px;
    border:1px solid white;
    border-collapse: 50%;
}
.col-md-3:hover{
    box-shadow: 5px 7px 9px -3px rgba(255,255,255,0.5);
    cursor: pointer;
}

Output

Leave a Reply

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