Project Gallery
Explore Advanced Card Design Collection in detail
1
/1
100%
Project Overview
Advanced Card Design Collection
Project Description
This design includes multiple card styles such as gradient cards with vibrant color schemes, neumorphic designs with soft shadows, glass morphism with transparency and blur effects, and special hover effect cards. It features advanced animations with smooth hover transitions, transform effects on interaction, and special lighting effects. The layout is fully responsive with a grid system that adapts to different screen sizes, ensuring a mobile-friendly experience. Visual elements are carefully managed with consistent alignment, modern color schemes, icon integration for visual appeal, and statistical data presentation. Modern CSS features such as backdrop filters for glass effects, CSS gradients for vibrant backgrounds, and advanced shadow effects further enhance the overall design.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Card Designs</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="header">
<h1>Advanced Card Designs</h1>
<p>A collection of modern, responsive card designs with smooth animations and elegant aesthetics</p>
</div>
<div class="card-grid">
<!-- Card 1: Gradient Style -->
<div class="card card-1">
<div class="card-content">
<div class="card-number">1</div>
<div class="card-icon">
<i class="fas fa-palette"></i>
</div>
<h3 class="card-title">Gradient Design</h3>
<p class="card-description">Beautiful gradient cards with smooth hover effects and modern aesthetics. Perfect for showcasing features.</p>
<div class="card-stats">
<div class="stat">
<div class="stat-value">98%</div>
<div class="stat-label">Satisfaction</div>
</div>
<div class="stat">
<div class="stat-value">4.8</div>
<div class="stat-label">Rating</div>
</div>
<div class="stat">
<div class="stat-value">2.5K</div>
<div class="stat-label">Users</div>
</div>
</div>
</div>
</div>
<!-- Card 2: Neumorphic Style -->
<div class="neumorphic-card">
<div class="neumorphic-icon">
<i class="fas fa-cube"></i>
</div>
<h3 class="card-title">Neumorphic Design</h3>
<p class="card-description">Soft UI design with subtle shadows and highlights. Creates a tactile experience that feels pressable.</p>
<div class="card-stats">
<div class="stat">
<div class="stat-value">87%</div>
<div class="stat-label">Engagement</div>
</div>
<div class="stat">
<div class="stat-value">4.6</div>
<div class="stat-label">Rating</div>
</div>
<div class="stat">
<div class="stat-value">1.7K</div>
<div class="stat-label">Users</div>
</div>
</div>
</div>
<!-- Card 3: Glass Morphism -->
<div class="glass-card">
<div class="glass-icon">
<i class="fas fa-glass-martini-alt"></i>
</div>
<h3 class="card-title">Glass Morphism</h3>
<p class="card-description">Frosted glass effect with subtle transparency and blur. Creates depth and modernity in your designs.</p>
<div class="card-stats">
<div class="stat">
<div class="stat-value">92%</div>
<div class="stat-label">Satisfaction</div>
</div>
<div class="stat">
<div class="stat-value">4.9</div>
<div class="stat-label">Rating</div>
</div>
<div class="stat">
<div class="stat-value">3.2K</div>
<div class="stat-label">Users</div>
</div>
</div>
</div>
<!-- Card 4: Hover Effect -->
<div class="hover-card">
<div class="hover-content">
<div class="card-number">4</div>
<div class="card-icon">
<i class="fas fa-magic"></i>
</div>
<h3 class="card-title">Special Effects</h3>
<p class="card-description">Advanced hover effects with smooth animations and transitions. Creates an engaging user experience.</p>
<div class="card-stats">
<div class="stat">
<div class="stat-value">95%</div>
<div class="stat-label">Satisfaction</div>
</div>
<div class="stat">
<div class="stat-value">4.7</div>
<div class="stat-label">Rating</div>
</div>
<div class="stat">
<div class="stat-value">2.8K</div>
<div class="stat-label">Users</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>Created with <i class="fas fa-heart" style="color: #ff7e5f;"></i> | Advanced CSS Card Designs</p>
</div>
</body>
</html>CSS
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
padding: 40px 20px;
color: #fff;
}
.header {
text-align: center;
margin-bottom: 50px;
max-width: 800px;
}
.header h1 {
font-size: 2.8rem;
font-weight: 700;
margin-bottom: 15px;
background: linear-gradient(to right, #ff7e5f, #feb47b);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.header p {
font-size: 1.2rem;
color: #d6d6d6;
line-height: 1.6;
}
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 30px;
max-width: 1300px;
width: 100%;
}
/* Card 1: Modern Gradient */
.card {
background: rgba(255, 255, 255, 0.1);
border-radius: 20px;
overflow: hidden;
backdrop-filter: blur(10px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
transition: transform 0.4s ease, box-shadow 0.4s ease;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.card-1 {
background: linear-gradient(145deg, #ff7e5f, #feb47b);
}
.card-2 {
background: linear-gradient(145deg, #00cdac, #02aab0);
}
.card-3 {
background: linear-gradient(145deg, #7474bf, #348ac7);
}
.card-4 {
background: linear-gradient(145deg, #614385, #516395);
}
.card:hover {
transform: translateY(-15px) scale(1.02);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.card-content {
padding: 30px;
position: relative;
}
.card-number {
position: absolute;
top: -25px;
right: 25px;
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 700;
color: white;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.card-icon {
font-size: 2.5rem;
margin-bottom: 20px;
color: rgba(255, 255, 255, 0.9);
}
.card-title {
font-size: 1.6rem;
font-weight: 600;
margin-bottom: 15px;
color: white;
}
.card-description {
color: rgba(255, 255, 255, 0.8);
line-height: 1.6;
margin-bottom: 25px;
font-size: 0.95rem;
}
.card-stats {
display: flex;
justify-content: space-between;
border-top: 1px solid rgba(255, 255, 255, 0.2);
padding-top: 20px;
}
.stat {
text-align: center;
}
.stat-value {
font-size: 1.4rem;
font-weight: 700;
color: white;
}
.stat-label {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.7);
text-transform: uppercase;
letter-spacing: 1px;
}
/* Card 2: Neumorphic Style */
.neumorphic-card {
background: linear-gradient(145deg, #1a2a3a, #223344);
border-radius: 20px;
padding: 30px;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2),
-10px -10px 20px rgba(255, 255, 255, 0.05);
transition: all 0.4s ease;
}
.neumorphic-card:hover {
transform: translateY(-10px);
box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.25),
-15px -15px 30px rgba(255, 255, 255, 0.05);
}
.neumorphic-icon {
width: 70px;
height: 70px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
font-size: 1.8rem;
color: #00cdac;
box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.2),
inset -5px -5px 10px rgba(255, 255, 255, 0.05);
}
/* Card 3: Glass Morphism */
.glass-card {
background: rgba(255, 255, 255, 0.1);
border-radius: 16px;
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
padding: 30px;
transition: all 0.4s ease;
}
.glass-card:hover {
transform: translateY(-10px) rotate(2deg);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
background: rgba(255, 255, 255, 0.15);
}
.glass-icon {
font-size: 2.5rem;
margin-bottom: 20px;
color: white;
text-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
/* Card 4: Hover Effect */
.hover-card {
background: linear-gradient(145deg, #614385, #516395);
border-radius: 16px;
overflow: hidden;
position: relative;
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.hover-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(255, 255, 255, 0.1), transparent);
transform: translateX(-100%);
transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.hover-card:hover::before {
transform: translateX(100%);
}
.hover-content {
padding: 30px;
position: relative;
z-index: 2;
}
/* Responsive Design */
@media (max-width: 768px) {
.card-grid {
grid-template-columns: 1fr;
}
.header h1 {
font-size: 2.2rem;
}
.header p {
font-size: 1rem;
}
}
.footer {
margin-top: 60px;
text-align: center;
color: rgba(255, 255, 255, 0.6);
font-size: 0.9rem;
}
</style>JavaScript