🎨Creating a Vibrant Case Studies & Resources UI with Animated Cards

GIF

Introduction

This guide helps you create a visually appealing UI for showcasing resources like case studies, blogs, or security articles using a responsive navbar and animated cards with gradient backgrounds.

Code Explanation

1. HTML Structure: The HTML structure is simple and organized into three main parts: header, navbar, and cards.

<header>
    <h1>Case Studies & Resources</h1>
    <p>For years, we've collaborated with AI teams globally...</p>
    <nav>
        <ul id="navbar">
            <li class="active" data-filter="all">All</li>
            <li data-filter="blog">Blog</li>
            <li data-filter="security">Security</li>
        </ul>
    </nav>
</header>
<main id="content">
    <!-- Cards go here -->
</main>

Header: Displays the title and description of the section.

Navbar: Allows users to filter content by category using data attributes.

2. CSS Styling: The CSS adds visual appeal through gradients, animations, and responsive design.

body {
    background: linear-gradient(135deg, #2b076e, #0d0c1d); /* Gradient background */
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card {
    background: linear-gradient(135deg, #ff0076, #ff00ff); /* Card gradient */
    border-radius: 15px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
    transform: scale(1.05); /* Scale effect on hover */
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.5);
}

Body Styling: Sets up a gradient background and centers the content.
Card Animation: Each card scales and casts a shadow when hovered, making the interaction visually engaging.

3. JavaScript Interactivity: JavaScript is used to filter the cards when the user clicks on different navbar items.

document.addEventListener("DOMContentLoaded", () => {
    const navbarItems = document.querySelectorAll("#navbar li");
    const cards = document.querySelectorAll(".card");

    navbarItems.forEach((item) => {
        item.addEventListener("click", () => {
            navbarItems.forEach(nav => nav.classList.remove("active"));
            item.classList.add("active");

            const filter = item.getAttribute("data-filter");
            cards.forEach((card) => {
                card.style.display = filter === "all" || card.getAttribute("data-category") === filter ? "block" : "none";
            });
        });
    });
});

Navbar Filtering: Filters the cards based on the selected category, enhancing user interaction.

Click Here to available Code just $1

This UI is perfect for highlighting different types of content in a visually stunning way. With gradient effects, responsive animations, and filterable cards, you can create an engaging experience that stands out.

shop Link : https://buymeacoffee.com/pratik1110r/extras

LinkedIn : https://www.linkedin.com/in/pratik-tamhane-583023217/

Behance : https://www.behance.net/pratiktamhane