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
Top comments (0)