Responsive Item Cards with CSS Grid with Source Code

Hey, developer today is Day 74 of our 90Projects in 90Days. And today, we are going to Create Responsive Item Cards with CSS Grid with Source Code

To run the given code firstly you have to copy the HTML code and run it into your code editor and then create a CSS file and paste the given CSS code in your code's CSS file.

Preview

Responsive Item Cards with CSS Grid with Source Code, raju webdev, geeks help, css grid cards, responsive grid cards, css grid cards, css responsive grid layout

HTML Code

index.html

<!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> Responsive Cards </title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
        integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="userCard">
        <div class="card">
            <h2 class="moving instagram">
                <i class="fa-brands fa-instagram"> </i> Instagram
            </h2>
            <h2 class="insta"> Instagram </h2>
            <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde nemo doloribus officiis distinctio libero
                debitis eaque expedita ab tempora necessitatibus!</p>
        </div>
        <div class="card">
            <h2 class="moving twitter">
                <i class="fa-brands fa-twitter"></i> Twitter
            </h2>
            <h2 class="tw"> Twitter </h2>
            <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde nemo doloribus officiis distinctio libero
                debitis eaque expedita ab tempora necessitatibus!</p>
        </div>
        <div class="card">
            <h2 class="moving youtube">
                <i class="fa-brands fa-youtube"></i> YouTube
            </h2>
            <h2 class="yt"> YouTube </h2>
            <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde nemo doloribus officiis distinctio libero
                debitis eaque expedita ab tempora necessitatibus!</p>
        </div>
        <div class="card">
            <h2 class="moving facebook">
                <i class="fa-brands fa-facebook"></i> Facebook
            </h2>
            <h2 class="fb"> Facebook </h2>
            <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde nemo doloribus officiis distinctio libero
                debitis eaque expedita ab tempora necessitatibus!</p>
        </div>
    </div>
</body>

</html>


CSS Code

style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    background-color: rgb(19 29 59);
}

.userCard {
    position: relative;
    height: 100vh;
    padding: 30px 10px;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(auto-fill, 300px);
    row-gap: 20px;
}

.card {
    background-color: rgb(19 29 59);
    transition: all 0.3s;
    height: 350px;
    border-radius: 10px;
    border: 1px solid skyblue;
    margin: 10px;
    padding: 10px;
    overflow: hidden;
    color: #fff;
    cursor: pointer;
}

.moving {
    opacity: 0.4;
    margin: 20px 0;
    text-align: center;
    font-size: 3rem;
    display: inline-flex;
    transform: translateX(100px);
    position: relative;
    transition: all 0.7s;
}

.moving i {
    font-size: 3rem;
    margin-right: 15px;
    display: none;
}

.card:hover {
    background-color: rgb(20, 27, 49);
    transform: translateY(-6px);
}

.card:hover .moving,
.card:hover .moving i {
    transform: translateX(0px) rotate(360deg);
    opacity: 1;
    display: flex;
}

.card:hover .instagram,
.insta {
    color: palevioletred;
}

.card:hover .youtube,
.yt {
    color: #ff0000;
}

.card:hover .twitter,
.tw {
    color: #1d9bf0;
}

.card:hover .facebook,
.fb {
    color: #1198f6;
}

.card h2 {
    margin-bottom: 20px;
}

.card p {
    font-weight: 100;
}


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