Responsive Our Services Section using HTML & CSS

Hey, developers welcome to Day 39 of our 90Days 90Projects challenge. And in Day 39 we are going to create a Responsive Our Services Section using HTML & CSS

So to run the code you just need to copy the HTML and CSS code and run it into your code Editor. 

Preview

Responsive Our Services Section using HTML & CSS


HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Services </title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
        integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
        <link rel="stylesheet" href="style.css">
</head>
<body>

    <section id="services">
        <h2 class="heading"> Services </h2>
        <p> Lorem ipsum dolor sit amet consectetur adipisicing. </p>
        <!-- Services Main Container Starts from Here -->
        <div class="services-container">
            <!-- Service Item starts from here -->
            <div class="service-item">
                <ul>
                    <li><i class="fa-solid fa-desktop"></i></li>
                </ul>
                <article>
                    <h2 class="service-heading"> Developing </h2>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe nemo eaque consequuntur quam
                        tenetur soluta eius ut!</p>
                </article>
            </div>
            <!-- Service Item Ends here -->

            <!-- Service Item starts from here -->
            <div class="service-item">
                <ul>
                    <li><i class="fa-solid fa-chart-line"></i></li>
                </ul>
                <article>
                    <h2 class="service-heading"> Analyzing </h2>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe nemo eaque consequuntur quam
                        tenetur soluta eius ut!</p>
                </article>
            </div>
            <!-- Service Item Ends here -->

            <!-- Service Item starts from here -->
            <div class="service-item">
                <ul>
                    <li><i class="fa-brands fa-telegram"></i></li>
                </ul>
                <article>
                    <h2 class="service-heading"> Sharing </h2>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe nemo eaque consequuntur quam
                        tenetur soluta eius ut!</p>
                </article>
            </div>
            <!-- Service Item Ends here -->

            <!-- Service Item starts from here -->
            <div class="service-item">
                <ul>
                    <li><i class="fa-solid fa-building-columns"></i></li>
                </ul>
                <article>
                    <h2 class="service-heading"> Banking </h2>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe nemo eaque consequuntur quam
                        tenetur soluta eius ut!</p>
                </article>
            </div>
            <!-- Service Item Ends here -->

            <!-- Service Item starts from here -->
            <div class="service-item">
                <ul>
                    <li><i class="fa-sharp fa-solid fa-credit-card"></i></li>
                </ul>
                <article>
                    <h2 class="service-heading"> Cards </h2>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe nemo eaque consequuntur quam
                        tenetur soluta eius ut!</p>
                </article>
            </div>
            <!-- Service Item Ends here -->

            <!-- Service Item starts from here -->
            <div class="service-item">
                <ul>
                    <li><i class="fa-solid fa-bag-shopping"></i></li>
                </ul>
                <article>
                    <h2 class="service-heading"> Shoping </h2>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe nemo eaque consequuntur quam
                        tenetur soluta eius ut!</p>
                </article>
            </div>
            <!-- Service Item Ends here -->
    </section>
</body>
</html>


CSS Code

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#services {
    width: 100%;
}

.heading {
    font-size: 2rem;
    margin: 1rem auto;
    text-align: center;
    font-family: system-ui;
}

#services p {
    text-align: center;
    margin-bottom: 1rem;
    font-family: sans-serif;
}

.services-container {
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: space-around;
}

.service-item {
    width: 20rem;
    margin: 1rem;
    padding: 10px;
    display: flex;
    flex-shrink: 1;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    transition: all 0.1s linear;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 3px 3px 10px 0px rgb(0, 0, 0, 0.1);
}

.service-item:hover {
    transform: scale(1.01);
    box-shadow: 5px 5px 15px 0px rgb(0, 0, 0, 0.2);
}

.service-item ul li {
    width: 50px;
    height: 50px;
    color: white;
    list-style: none;
    font-size: 1.2rem;
    display: flex;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background-color: #e65000;
}

.service-heading {
    margin: 1rem 0;
    text-align: center;
    color: #000000b7;
    font-family: system-ui;
}

article p {
    font-size: 14px;
    color: #000000b7;
}

.service-item:hover p,
.service-item:hover .service-heading {
    color: #000000;
}

Learn HTML- Learn Now

Learn CSS- Learn Now

Visit our 90Days, 90Projects Page- Visit Now

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad