CREATING A CARD WITH EFFECTS BY USING HTML and CSS

  • Below screenshot shows the output of the card effect.

  • HTML code (save the file extension of .html)
<!DOCTYPE html>
<html>
    <head>
        <title>Cards </title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="card.css"/>
      
    </head>
    <body>
        <div class="card">
            <div class="card-image"></div>
            <div class="card-text">
                <span class="date"> 5 Days ago</span>
                <h2>Post First</h2>
                <p> A social media for education, connecting every student, teacher and institution to make the learning process more interesting</p>
            </div>
            <div class="card-stats">
                <div class="stat">
                    <div class="value">4<sup>m</sup></div>
                    <div class="type">Read</div>
                </div>
                <div class="stat border">
                    <div class="value">3459</div>
                    <div class="type">Views</div>
                </div>
                <div class="stat">
                    <div class="value">40</div>
                    <div class="type">Comments</div>
                </div>
            </div>
        </div>
<!--        second card-->
         <div class="card">
            <div class="card-image2"></div>
            <div class="card-text">
                <span class="date"> 9 Days ago</span>
                <h2>Post Second</h2>
                <p> A social media for education, connecting every student, teacher and institution to make the learning process more interesting</p>
            </div>
            <div class="card-stats">
                <div class="stat">
                    <div class="value">5<sup>m</sup></div>
                    <div class="type">Read</div>
                </div>
                <div class="stat border">
                    <div class="value">2302</div>
                    <div class="type">Views</div>
                </div>
                <div class="stat">
                    <div class="value">90</div>
                    <div class="type">Comments</div>
                </div>
            </div>
        </div>

<!--     3rd card-->
         <div class="card">
            <div class="card-image3"></div>
            <div class="card-text">
                <span class="date"> 2 Days ago</span>
                <h2>Post Third</h2>
                <p> A social media for education, connecting every student, teacher and institution to make the learning process more interesting</p>
            </div>
            <div class="card-stats">
                <div class="stat">
                    <div class="value">6<sup>m</sup></div>
                    <div class="type">Read</div>
                </div>
                <div class="stat border">
                    <div class="value">9971</div>
                    <div class="type">Views</div>
                </div>
                <div class="stat">
                    <div class="value">70</div>
                    <div class="type">Comments</div>
                </div>
            </div>
        </div>
    </body>
</html>
  • CSS code (save the file as a card.css because we have linked the CSS file with the Html page so if you save the CSS file with any other name then make sure you change the HTML link in the header as well)
body{
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("image/bg.jpg");//mention the path of image which you need to be inserted
    overflow: hidden;
}
.card{
    display: grid;
    grid-template-columns: 300px;
    grid-template-rows: 210px 210px 80px;
    grid-template-areas: "image" "text" "stats";
    
    font-family: roboto;
    border-radius: 18px;
    background: white;
    box-shadow: 5px 5px 15px rgb(0,0,0,0.9);
    text-align: center;
    
    transition: 0.5s ease;
    cursor: pointer;
}
.card-image{
    grid-area: image;
    background: url("image/frst card.jpg");//mention the path of image which you need to be inserted
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background-size: cover;
}
.card-text{
    grid-area:text;
    margin: 25px;
}
.card-text .date{
    color: rgb(255,7,110);
    font-size: 13px;
}
.card-text p{
    color: grey;
    font-size: 15px;
    font-weight: 300;
}
.card-text h2{
    margin-top: 0px;
    font-size: 28px;
}
.card-stats{
    grid-area:stats;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    background: rgb(255,7,110);
}
.card-stats .stat{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 10px;
    color: white;
}
.card-stats .type{
    font-size: 11px;
    font-weight: 300;
    text-transform: uppercase;
}
.card-stats .value{
    font-size: 22px;
    font-weight: 500;
}
.card-stats .border{
    border-left: 1px solid rgb(172,26,87);
    border-right: 1px solid rgb(172,26,87);
}
.card-stats .value.sup{
    font-size: 12px;
}
.card:hover{
    transform: scale(1.2);
    box-shadow: 5px 5px 15px rgba(0,0,0,0.6);
}
.card-image2{
    grid-area: image;
    background: url("image/sec card.jpg");//mention the path of image which you need to be inserted
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background-size: cover;
}
.card-image3{
    grid-area: image;
    background: url("image/3 card.jpg");//mention the path of image which you need to be inserted
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background-size: cover;
}

Posted on by
Score
Views