make a card title for portfolio using html css and javascript

on

 html,css,javascript code of card title :--

image:---



code:--

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Cards</title>
    <!-- <link rel="stylesheet" href="style.css"> -->
     <style>
        * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: sans-serif;
    padding: 20px;
    background-color: #f2f2f2;
}

.cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: transform 0.3s;
}

.card:hover {
    transform: scale(1.03);
}

.card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.card .content {
    padding: 15px;
}

.card h3 {
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.card p {
    font-size: 0.9rem;
    color: #555;
}

     </style>
</head>
<body>
    <section class="cards-container" id="cards-container">
        <!-- JavaScript will insert cards here -->
    </section>

    <!-- <script src="script.js"></script> -->
     <script>
        let cardData = [
    {
        title: "JavaScript Basics",
        image: "https://via.placeholder.com/300x180.png?text=JS+Basics",
        description: "Learn the fundamentals of JavaScript including variables, loops, and functions."
    },
    {
        title: "Responsive Design",
        image: "https://via.placeholder.com/300x180.png?text=Responsive+CSS",
        description: "Create responsive websites that look great on any device."
    },
    {
        title: "DOM Manipulation",
        image: "https://via.placeholder.com/300x180.png?text=DOM",
        description: "Understand how to interact with HTML elements using JavaScript."
    }
];

// Target the container
let container = document.getElementById("cards-container");

// Loop through data and insert cards
cardData.forEach((item) => {
    let card = document.createElement("div");
    card.className = "card";
    card.innerHTML = `
        <img src="${item.image}" alt="${item.title}">
        <div class="content">
            <h3>${item.title}</h3>
            <p>${item.description}</p>
        </div>
    `;
    container.appendChild(card);
});

     </script>
</body>
</html>

thank you

Comments

Post a Comment