How To Make Our Services Part of Website in HTML and CSS.|




View on YOutube

Copy html file:


<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Services</title>
</head>
<body>
 
    <div class="all">
        <div class="card" style="width: 20rem;">
        <img src="img/web-1.jpg" class="card-img-top" alt="">
        <div class="card-body">
            <h5 class="card-title">Web Development</h5>
        </div>
        <p class="lorem">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, harum earum fugiat asperiores pariatur, consectetur excepturi saepe totam ab sed iusto, perspiciatis optio voluptas repellendus aut. Sint sequi repudiandae non?
        </p>
        <div class="btn">
            <a href="#" style="text-decoration: none;">Learn More</a>
        </div>
        </div>

        <div class="card1" style="width: 20rem;">
            <img src="img/app-1.jpg" class="card-img-top" alt="">
            <div class="card-body">
                <h5 class="card-title">App Development</h5>
            </div>
            <p class="lorem">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, harum earum fugiat asperiores pariatur, consectetur excepturi saepe totam ab sed iusto, perspiciatis optio voluptas repellendus aut. Sint sequi repudiandae non?
            </p>
            <div class="btn">
                <a href="#" style="text-decoration: none;">Learn More</a>
            </div>
            </div>

            <div class="card2" style="width: 20rem;">
                <img src="img/download.png" class="card-img-top" alt="">
                <div class="card-body">
                    <h5 class="card-title">Web Designing</h5>
                </div>
                <p class="lorem">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, harum earum fugiat asperiores pariatur, consectetur excepturi saepe totam ab sed iusto, perspiciatis optio voluptas repellendus aut. Sint sequi repudiandae non?
                </p>
                <div class="btn">
                    <a href="#" style="text-decoration: none;">Learn More</a>
                </div>
                </div>

                <div class="card3" style="width: 20rem;">
                    <img src="img/graphics-1.jpg" class="card-img-top" alt="">
                    <div class="card-body">
                        <h5 class="card-title">Graphics Designing</h5>
                    </div>
                    <p class="lorem">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, harum earum fugiat asperiores pariatur, consectetur excepturi saepe totam ab sed iusto, perspiciatis optio voluptas repellendus aut. Sint sequi repudiandae non?
                    </p>
                    <div class="btn">
                        <a href="#" style="text-decoration: none;">Learn More</a>
                    </div>
                    </div>
    </div>
</body>
</html>




Copy css file:


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.all{
    margin-top: 175px;
}
.card{
    margin-left: 105px;
    margin-top: 2px;
}
.card1{
    margin-top: -345px;
    margin-left: 455px;
}
.card2{
    margin-top: -345px;
    margin-left: 770px;
}
.card3{
    margin-top: -345px;
    margin-left: 1100px;
}
.btn{
    font-size: 25px;
    margin-top: 10px;
    border: 1px solid black;
    margin-left: 45px;
    border-radius: 25px;
    width: 125px;
    align-items: center;
    text-align: center;
}
.btn a{
    text-decoration: none;
}
.btn:hover{
    background-color: rgb(0, 255, 213);
}
.btn a:hover{
    background-color: rgb(0, 255, 213);
    color: white;
}
::selection{
    color: red;
    background-color: aqua;
}





Comments

Post a Comment