Project Gallery
Explore Explore Insights | Premium Feature Cards UI in detail
1
/1
100%
Project Overview
Explore Insights | Premium Feature Cards UI
Project Description
Discover powerful ideas and modern solutions through beautifully designed interactive cards. Built for performance and clarity, this layout presents investment insights, workplace innovation, and creative growth in a visually engaging way.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>Modern Cards | Explore Features</title>
<!-- Google Fonts + Font Awesome 6 (free icons) -->
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<div class="section-header">
<span class="badge"><i class="fas fa-layer-group"></i> premium insights</span>
<h2>Explore what matters most</h2>
<p>Curated solutions to elevate your business, creativity, and workspace — designed for modern growth.</p>
</div>
<div class="container">
<!-- Card 1 - Investment & Strategy -->
<div class="box">
<div class="img-wrapper">
<!-- using high-quality Unsplash-like image (reliable, fast) -->
<img src="https://images.pexels.com/photos/6801642/pexels-photo-6801642.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Investment strategy meeting" loading="lazy">
<div class="card-category"><i class="fas fa-chart-line"></i> trending</div>
</div>
<div class="card-content">
<h3><i class="fas fa-coins"></i> Smart Investment</h3>
<div class="divider"></div>
<p>Unlock data-driven strategies to maximize returns. Our AI-powered insights help you navigate volatile markets with confidence and clarity.</p>
<div class="meta-row">
<span class="stars">
<i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star-half-alt"></i>
</span>
<span>4.8 (240 reviews)</span>
</div>
<a href="#" class="card-link" id="cardLink1">Discover insights <i class="fas fa-arrow-right"></i></a>
</div>
</div>
<!-- Card 2 - Modern Workplace -->
<div class="box">
<div class="img-wrapper">
<img src="https://images.pexels.com/photos/3184291/pexels-photo-3184291.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Modern workplace collaboration" loading="lazy">
<div class="card-category"><i class="fas fa-building"></i> hybrid ready</div>
</div>
<div class="card-content">
<h3><i class="fas fa-briefcase"></i> Future Workplace</h3>
<div class="divider"></div>
<p>Design agile, inclusive environments that boost productivity. From remote tools to office wellness — build a culture where talent thrives.</p>
<div class="meta-row">
<span class="stars">
<i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>
</span>
<span>5.0 (1.2k+ teams)</span>
</div>
<a href="#" class="card-link" id="cardLink2">Explore solutions <i class="fas fa-arrow-right"></i></a>
</div>
</div>
<!-- Card 3 - Creative Progress & Innovation -->
<div class="box">
<div class="img-wrapper">
<img src="https://images.pexels.com/photos/1181373/pexels-photo-1181373.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Creative design process" loading="lazy">
<div class="card-category"><i class="fas fa-palette"></i> inspiration</div>
</div>
<div class="card-content">
<h3><i class="fas fa-rocket"></i> Creative Progress</h3>
<div class="divider"></div>
<p>Fuel innovation with design thinking, prototyping tools, and cross-functional workflows. Transform ideas into impact — faster than ever.</p>
<div class="meta-row">
<span class="stars">
<i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>
</span>
<span>4.9 (850+ creators)</span>
</div>
<a href="#" class="card-link" id="cardLink3">Start creating <i class="fas fa-arrow-right"></i></a>
</div>
</div>
</div>
</body>
</html>CSS
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: linear-gradient(145deg, #f8fafc 0%, #eef2ff 100%);
font-family: 'Inter', sans-serif;
padding: 50px 24px;
min-height: 100vh;
}
/* Section header styling */
.section-header {
text-align: center;
max-width: 700px;
margin: 0 auto 50px auto;
}
.section-header .badge {
display: inline-block;
background: #e0e7ff;
color: #4f46e5;
padding: 6px 16px;
border-radius: 40px;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 16px;
letter-spacing: 0.3px;
}
.section-header h2 {
font-size: 2.4rem;
font-weight: 800;
background: linear-gradient(135deg, #1e1b4b, #4f46e5);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
margin-bottom: 12px;
}
.section-header p {
color: #475569;
font-size: 1.1rem;
font-weight: 400;
}
/* Card container - improved grid */
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
max-width: 1300px;
margin: 0 auto;
}
/* Modern card design */
.box {
flex: 1 1 300px;
max-width: 360px;
background: #ffffff;
border-radius: 32px;
overflow: hidden;
transition: all 0.35s cubic-bezier(0.2, 0.9, 0.4, 1.1);
box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(203, 213, 225, 0.4);
position: relative;
backdrop-filter: blur(2px);
}
.box:hover {
transform: translateY(-12px);
box-shadow: 0 30px 45px -15px rgba(79, 70, 229, 0.25);
border-color: #c7d2fe;
}
/* image wrapper with overlay effect */
.img-wrapper {
position: relative;
overflow: hidden;
height: 220px;
}
.img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
display: block;
}
.box:hover .img-wrapper img {
transform: scale(1.08);
}
/* icon overlay or category chip */
.card-category {
position: absolute;
bottom: 16px;
left: 16px;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(4px);
padding: 6px 14px;
border-radius: 40px;
font-size: 0.75rem;
font-weight: 700;
color: #1e293b;
letter-spacing: 0.3px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
display: flex;
align-items: center;
gap: 6px;
}
.card-category i {
font-size: 12px;
color: #4f46e5;
}
/* card content */
.card-content {
padding: 24px 22px 28px;
}
h3 {
font-size: 1.6rem;
font-weight: 700;
color: #0f172a;
margin-bottom: 12px;
letter-spacing: -0.3px;
display: flex;
align-items: center;
gap: 8px;
}
h3 i {
font-size: 1.5rem;
color: #4f46e5;
background: #eef2ff;
padding: 8px;
border-radius: 16px;
}
p {
color: #475569;
line-height: 1.5;
font-size: 0.95rem;
font-weight: 400;
margin: 12px 0 20px 0;
}
/* card footer link */
.card-link {
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
font-weight: 600;
font-size: 0.9rem;
color: #4f46e5;
transition: gap 0.2s ease;
margin-top: 8px;
}
.card-link i {
transition: transform 0.2s;
}
.card-link:hover {
gap: 12px;
color: #6366f1;
}
.card-link:hover i {
transform: translateX(4px);
}
/* divider subtle */
.divider {
width: 50px;
height: 3px;
background: #e0e7ff;
margin: 16px 0 10px 0;
border-radius: 4px;
}
/* rating stars or meta info */
.meta-row {
display: flex;
align-items: center;
gap: 12px;
margin-top: 12px;
font-size: 0.8rem;
color: #64748b;
}
.stars i {
color: #fbbf24;
font-size: 0.75rem;
}
/* responsive breakpoints */
@media (max-width: 900px) {
body {
padding: 40px 20px;
}
.section-header h2 {
font-size: 2rem;
}
.box {
max-width: 320px;
}
}
@media (max-width: 680px) {
.container {
gap: 24px;
}
.box {
flex: 1 1 100%;
max-width: 420px;
}
.card-content {
padding: 20px;
}
h3 {
font-size: 1.4rem;
}
}
/* subtle animation on load */
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.box {
animation: fadeUp 0.5s ease backwards;
}
.box:nth-child(1) { animation-delay: 0.05s; }
.box:nth-child(2) { animation-delay: 0.15s; }
.box:nth-child(3) { animation-delay: 0.25s; }
</style>JavaScript
<!-- small interactive JavaScript for better UX (toast/demo alerts) -->
<script>
(function() {
// Helper to show a subtle, non-intrusive toast
function showMessage(text, icon = '📌') {
// create or reuse toast element
let toast = document.getElementById('dynamicToast');
if (!toast) {
toast = document.createElement('div');
toast.id = 'dynamicToast';
toast.style.position = 'fixed';
toast.style.bottom = '28px';
toast.style.left = '50%';
toast.style.transform = 'translateX(-50%)';
toast.style.backgroundColor = '#0f172a';
toast.style.color = '#f1f5f9';
toast.style.padding = '12px 28px';
toast.style.borderRadius = '60px';
toast.style.fontFamily = "'Inter', sans-serif";
toast.style.fontWeight = '500';
toast.style.fontSize = '0.85rem';
toast.style.zIndex = '9999';
toast.style.backdropFilter = 'blur(12px)';
toast.style.background = 'rgba(15, 23, 42, 0.92)';
toast.style.boxShadow = '0 12px 22px rgba(0,0,0,0.2)';
toast.style.pointerEvents = 'none';
toast.style.whiteSpace = 'nowrap';
document.body.appendChild(toast);
}
toast.innerHTML = `${icon} ${text}`;
toast.style.opacity = '1';
toast.style.transition = 'opacity 0.2s';
setTimeout(() => {
toast.style.opacity = '0';
}, 2000);
}
// get all card links
const link1 = document.getElementById('cardLink1');
const link2 = document.getElementById('cardLink2');
const link3 = document.getElementById('cardLink3');
if (link1) {
link1.addEventListener('click', (e) => {
e.preventDefault();
showMessage('📈 Smart Investment guide — early access for premium members!', '📊');
});
}
if (link2) {
link2.addEventListener('click', (e) => {
e.preventDefault();
showMessage('🏢 Future Workplace toolkit: download free e-book now.', '✨');
});
}
if (link3) {
link3.addEventListener('click', (e) => {
e.preventDefault();
showMessage('🎨 Creative Progress workshop — join the waitlist today.', '🚀');
});
}
// additional subtle hover feedback on cards (just for delight)
const cards = document.querySelectorAll('.box');
cards.forEach(card => {
card.addEventListener('click', (e) => {
// avoid trigger when clicking on link (already handled)
if (e.target.closest('.card-link')) return;
const title = card.querySelector('h3')?.innerText || 'card';
showMessage(`✨ Explore more about ${title} — double click to discover`, '🔍');
});
});
})();
</script>