create-template-html-css 1.4.1 → 1.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +11 -0
- package/package.json +1 -1
- package/templates/card/index.html +106 -16
- package/templates/card/script.js +120 -7
- package/templates/card/style.css +293 -17
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,17 @@ All notable changes to this project will be documented in this file.
|
|
|
5
5
|
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
|
6
6
|
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
7
|
|
|
8
|
+
## [1.4.2] - 2025-01-29
|
|
9
|
+
|
|
10
|
+
### Enhanced
|
|
11
|
+
- **Card Template Improvements**:
|
|
12
|
+
- 6 professional card variations: Modern (featured), Premium (pricing), Blog (tags), Minimal (clean), User Profile (avatar), Interactive (action buttons)
|
|
13
|
+
- Rich interactions: like/save buttons, social links, tag filtering, toast notifications
|
|
14
|
+
- Professional gradient styling and animations
|
|
15
|
+
- Enhanced badges, metadata displays (ratings, dates, comments, authors)
|
|
16
|
+
- Improved hover effects and button animations with ripple effect
|
|
17
|
+
- Better mobile responsiveness
|
|
18
|
+
|
|
8
19
|
## [1.4.1] - 2025-01-29
|
|
9
20
|
|
|
10
21
|
### Improved
|
package/package.json
CHANGED
|
@@ -9,44 +9,134 @@
|
|
|
9
9
|
<body>
|
|
10
10
|
<div class="container">
|
|
11
11
|
<h1>Card Components</h1>
|
|
12
|
+
<p class="subtitle">Explore different card variations and designs</p>
|
|
12
13
|
|
|
13
14
|
<div class="cards-grid">
|
|
14
|
-
<!-- Card 1 -->
|
|
15
|
+
<!-- Card 1 - Basic -->
|
|
15
16
|
<div class="card">
|
|
16
|
-
<
|
|
17
|
+
<div class="card-header">
|
|
18
|
+
<img src="https://via.placeholder.com/300x200/667eea" alt="Card Image" class="card-img">
|
|
19
|
+
<span class="card-badge">Featured</span>
|
|
20
|
+
</div>
|
|
17
21
|
<div class="card-body">
|
|
18
|
-
<
|
|
22
|
+
<div class="card-category">Technology</div>
|
|
23
|
+
<h2 class="card-title">Modern Card Design</h2>
|
|
19
24
|
<p class="card-text">
|
|
20
|
-
This is a
|
|
25
|
+
This is a beautifully designed card with rich information and interactive elements.
|
|
21
26
|
</p>
|
|
22
|
-
<
|
|
27
|
+
<div class="card-meta">
|
|
28
|
+
<span class="meta-item">⭐ 4.5</span>
|
|
29
|
+
<span class="meta-item">📅 Jan 29, 2026</span>
|
|
30
|
+
</div>
|
|
31
|
+
<button class="card-btn">Learn More</button>
|
|
23
32
|
</div>
|
|
24
33
|
</div>
|
|
25
34
|
|
|
26
|
-
<!-- Card 2 -->
|
|
27
|
-
<div class="card">
|
|
28
|
-
<
|
|
35
|
+
<!-- Card 2 - With Price -->
|
|
36
|
+
<div class="card card-premium">
|
|
37
|
+
<div class="card-header">
|
|
38
|
+
<img src="https://via.placeholder.com/300x200/764ba2" alt="Premium Card" class="card-img">
|
|
39
|
+
<span class="card-badge premium">Popular</span>
|
|
40
|
+
</div>
|
|
29
41
|
<div class="card-body">
|
|
30
|
-
<
|
|
42
|
+
<div class="card-category">Services</div>
|
|
43
|
+
<h2 class="card-title">Premium Package</h2>
|
|
44
|
+
<div class="card-price">$29.99/mo</div>
|
|
31
45
|
<p class="card-text">
|
|
32
|
-
|
|
46
|
+
Get exclusive access to premium features and priority support.
|
|
33
47
|
</p>
|
|
34
|
-
<
|
|
48
|
+
<div class="card-features">
|
|
49
|
+
<span class="feature">✓ Advanced Tools</span>
|
|
50
|
+
<span class="feature">✓ Priority Support</span>
|
|
51
|
+
<span class="feature">✓ Analytics</span>
|
|
52
|
+
</div>
|
|
53
|
+
<button class="card-btn btn-premium">Subscribe Now</button>
|
|
35
54
|
</div>
|
|
36
55
|
</div>
|
|
37
56
|
|
|
38
|
-
<!-- Card 3 -->
|
|
57
|
+
<!-- Card 3 - With Tags -->
|
|
39
58
|
<div class="card">
|
|
40
|
-
<
|
|
59
|
+
<div class="card-header">
|
|
60
|
+
<img src="https://via.placeholder.com/300x200/43e97b" alt="Blog Card" class="card-img">
|
|
61
|
+
<span class="card-badge secondary">New</span>
|
|
62
|
+
</div>
|
|
63
|
+
<div class="card-body">
|
|
64
|
+
<div class="card-category">Blog</div>
|
|
65
|
+
<h2 class="card-title">Latest Updates</h2>
|
|
66
|
+
<p class="card-text">
|
|
67
|
+
Discover the newest features and improvements in our latest release.
|
|
68
|
+
</p>
|
|
69
|
+
<div class="card-tags">
|
|
70
|
+
<span class="tag">CSS</span>
|
|
71
|
+
<span class="tag">Design</span>
|
|
72
|
+
<span class="tag">UI</span>
|
|
73
|
+
</div>
|
|
74
|
+
<div class="card-meta">
|
|
75
|
+
<span class="meta-item">👤 By Admin</span>
|
|
76
|
+
<span class="meta-item">💬 12 Comments</span>
|
|
77
|
+
</div>
|
|
78
|
+
<button class="card-btn">Read Article</button>
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
|
|
82
|
+
<!-- Card 4 - Minimal -->
|
|
83
|
+
<div class="card card-minimal">
|
|
84
|
+
<div class="card-header">
|
|
85
|
+
<img src="https://via.placeholder.com/300x200/fa709a" alt="Minimal Card" class="card-img">
|
|
86
|
+
</div>
|
|
87
|
+
<div class="card-body">
|
|
88
|
+
<h2 class="card-title">Clean & Simple</h2>
|
|
89
|
+
<p class="card-text">
|
|
90
|
+
A minimalist approach to card design focusing on essential information.
|
|
91
|
+
</p>
|
|
92
|
+
<button class="card-btn">Explore</button>
|
|
93
|
+
</div>
|
|
94
|
+
</div>
|
|
95
|
+
|
|
96
|
+
<!-- Card 5 - With Avatar -->
|
|
97
|
+
<div class="card card-user">
|
|
98
|
+
<div class="card-header">
|
|
99
|
+
<img src="https://via.placeholder.com/300x200/feca57" alt="User Card" class="card-img">
|
|
100
|
+
</div>
|
|
41
101
|
<div class="card-body">
|
|
42
|
-
<
|
|
102
|
+
<div class="card-avatar">👨💼</div>
|
|
103
|
+
<h2 class="card-title">John Developer</h2>
|
|
104
|
+
<p class="card-subtitle">Full Stack Developer</p>
|
|
43
105
|
<p class="card-text">
|
|
44
|
-
|
|
106
|
+
Passionate about creating beautiful and functional web experiences.
|
|
45
107
|
</p>
|
|
46
|
-
<
|
|
108
|
+
<div class="card-social">
|
|
109
|
+
<a href="#" class="social-btn">GitHub</a>
|
|
110
|
+
<a href="#" class="social-btn">Twitter</a>
|
|
111
|
+
<a href="#" class="social-btn">LinkedIn</a>
|
|
112
|
+
</div>
|
|
113
|
+
</div>
|
|
114
|
+
</div>
|
|
115
|
+
|
|
116
|
+
<!-- Card 6 - Interactive -->
|
|
117
|
+
<div class="card card-interactive">
|
|
118
|
+
<div class="card-header">
|
|
119
|
+
<img src="https://via.placeholder.com/300x200/48dbfb" alt="Interactive Card" class="card-img">
|
|
120
|
+
<span class="card-badge interactive">Hot</span>
|
|
121
|
+
</div>
|
|
122
|
+
<div class="card-body">
|
|
123
|
+
<div class="card-category">Trending</div>
|
|
124
|
+
<h2 class="card-title">Interactive Components</h2>
|
|
125
|
+
<p class="card-text">
|
|
126
|
+
Engage your users with interactive and dynamic card elements.
|
|
127
|
+
</p>
|
|
128
|
+
<div class="card-actions">
|
|
129
|
+
<button class="action-btn" data-action="like">❤️ Like</button>
|
|
130
|
+
<button class="action-btn" data-action="share">🔗 Share</button>
|
|
131
|
+
<button class="action-btn" data-action="save">⭐ Save</button>
|
|
132
|
+
</div>
|
|
47
133
|
</div>
|
|
48
134
|
</div>
|
|
49
135
|
</div>
|
|
50
136
|
</div>
|
|
137
|
+
|
|
138
|
+
<script src="script.js"></script>
|
|
139
|
+
</body>
|
|
140
|
+
</html>
|
|
51
141
|
</body>
|
|
52
142
|
</html>
|
package/templates/card/script.js
CHANGED
|
@@ -1,9 +1,122 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
document.addEventListener('DOMContentLoaded', function() {
|
|
2
|
+
// Action buttons functionality
|
|
3
|
+
const actionBtns = document.querySelectorAll('.action-btn');
|
|
4
|
+
actionBtns.forEach(btn => {
|
|
5
|
+
btn.addEventListener('click', function(e) {
|
|
6
|
+
e.stopPropagation();
|
|
7
|
+
const action = this.getAttribute('data-action');
|
|
8
|
+
const card = this.closest('.card');
|
|
9
|
+
|
|
10
|
+
if (action === 'like') {
|
|
11
|
+
this.classList.toggle('liked');
|
|
12
|
+
this.textContent = this.classList.contains('liked') ? '❤️ Liked' : '🤍 Like';
|
|
13
|
+
} else if (action === 'share') {
|
|
14
|
+
showNotification('Shared!');
|
|
15
|
+
} else if (action === 'save') {
|
|
16
|
+
this.classList.toggle('saved');
|
|
17
|
+
this.textContent = this.classList.contains('saved') ? '✓ Saved' : '🔖 Save';
|
|
18
|
+
}
|
|
19
|
+
});
|
|
8
20
|
});
|
|
21
|
+
|
|
22
|
+
// Social buttons functionality
|
|
23
|
+
const socialBtns = document.querySelectorAll('.social-btn');
|
|
24
|
+
socialBtns.forEach(btn => {
|
|
25
|
+
btn.addEventListener('click', function(e) {
|
|
26
|
+
e.preventDefault();
|
|
27
|
+
const platform = this.getAttribute('data-platform');
|
|
28
|
+
showNotification(`Opening ${platform}...`);
|
|
29
|
+
});
|
|
30
|
+
});
|
|
31
|
+
|
|
32
|
+
// Tags click functionality
|
|
33
|
+
const tags = document.querySelectorAll('.tag');
|
|
34
|
+
tags.forEach(tag => {
|
|
35
|
+
tag.style.cursor = 'pointer';
|
|
36
|
+
tag.addEventListener('click', function() {
|
|
37
|
+
showNotification(`Filtered by: ${this.textContent}`);
|
|
38
|
+
});
|
|
39
|
+
});
|
|
40
|
+
|
|
41
|
+
// Card click animations
|
|
42
|
+
const cards = document.querySelectorAll('.card');
|
|
43
|
+
cards.forEach(card => {
|
|
44
|
+
card.addEventListener('mousedown', function() {
|
|
45
|
+
this.style.transition = 'all 0.1s ease';
|
|
46
|
+
});
|
|
47
|
+
card.addEventListener('mouseup', function() {
|
|
48
|
+
this.style.transition = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
|
|
49
|
+
});
|
|
50
|
+
});
|
|
51
|
+
|
|
52
|
+
// Categories click
|
|
53
|
+
const categories = document.querySelectorAll('.card-category');
|
|
54
|
+
categories.forEach(cat => {
|
|
55
|
+
cat.style.cursor = 'pointer';
|
|
56
|
+
cat.addEventListener('click', function(e) {
|
|
57
|
+
e.stopPropagation();
|
|
58
|
+
showNotification(`Category: ${this.textContent}`);
|
|
59
|
+
});
|
|
60
|
+
});
|
|
61
|
+
|
|
62
|
+
// Notification system
|
|
63
|
+
function showNotification(message) {
|
|
64
|
+
const notification = document.createElement('div');
|
|
65
|
+
notification.style.cssText = `
|
|
66
|
+
position: fixed;
|
|
67
|
+
top: 20px;
|
|
68
|
+
right: 20px;
|
|
69
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
70
|
+
color: white;
|
|
71
|
+
padding: 15px 25px;
|
|
72
|
+
border-radius: 8px;
|
|
73
|
+
font-weight: 600;
|
|
74
|
+
z-index: 9999;
|
|
75
|
+
animation: slideInRight 0.3s ease;
|
|
76
|
+
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
|
|
77
|
+
`;
|
|
78
|
+
notification.textContent = message;
|
|
79
|
+
document.body.appendChild(notification);
|
|
80
|
+
|
|
81
|
+
setTimeout(() => {
|
|
82
|
+
notification.style.animation = 'slideOutRight 0.3s ease';
|
|
83
|
+
setTimeout(() => notification.remove(), 300);
|
|
84
|
+
}, 2000);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
// Add animation styles
|
|
88
|
+
if (!document.getElementById('card-animations')) {
|
|
89
|
+
const style = document.createElement('style');
|
|
90
|
+
style.id = 'card-animations';
|
|
91
|
+
style.textContent = `
|
|
92
|
+
@keyframes slideInRight {
|
|
93
|
+
from {
|
|
94
|
+
opacity: 0;
|
|
95
|
+
transform: translateX(100px);
|
|
96
|
+
}
|
|
97
|
+
to {
|
|
98
|
+
opacity: 1;
|
|
99
|
+
transform: translateX(0);
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
@keyframes slideOutRight {
|
|
103
|
+
from {
|
|
104
|
+
opacity: 1;
|
|
105
|
+
transform: translateX(0);
|
|
106
|
+
}
|
|
107
|
+
to {
|
|
108
|
+
opacity: 0;
|
|
109
|
+
transform: translateX(100px);
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
.action-btn.liked, .action-btn.saved {
|
|
113
|
+
border-color: #667eea;
|
|
114
|
+
background: rgba(102, 126, 234, 0.1);
|
|
115
|
+
color: #667eea;
|
|
116
|
+
}
|
|
117
|
+
`;
|
|
118
|
+
document.head.appendChild(style);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
console.log('✨ Card interactions loaded successfully!');
|
|
9
122
|
});
|
package/templates/card/style.css
CHANGED
|
@@ -6,9 +6,9 @@
|
|
|
6
6
|
|
|
7
7
|
body {
|
|
8
8
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
9
|
-
background: linear-gradient(135deg, #
|
|
9
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
10
10
|
min-height: 100vh;
|
|
11
|
-
padding:
|
|
11
|
+
padding: 60px 20px;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
.container {
|
|
@@ -18,58 +18,198 @@ body {
|
|
|
18
18
|
|
|
19
19
|
h1 {
|
|
20
20
|
text-align: center;
|
|
21
|
-
color:
|
|
22
|
-
margin-bottom:
|
|
21
|
+
color: white;
|
|
22
|
+
margin-bottom: 10px;
|
|
23
23
|
font-size: 2.5rem;
|
|
24
|
+
font-weight: 700;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.subtitle {
|
|
28
|
+
text-align: center;
|
|
29
|
+
color: rgba(255, 255, 255, 0.8);
|
|
30
|
+
margin-bottom: 50px;
|
|
31
|
+
font-size: 1.1rem;
|
|
24
32
|
}
|
|
25
33
|
|
|
26
34
|
.cards-grid {
|
|
27
35
|
display: grid;
|
|
28
|
-
grid-template-columns: repeat(auto-fit, minmax(
|
|
36
|
+
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
|
29
37
|
gap: 30px;
|
|
30
38
|
}
|
|
31
39
|
|
|
40
|
+
/* Card Base */
|
|
32
41
|
.card {
|
|
33
42
|
background: white;
|
|
34
|
-
border-radius:
|
|
43
|
+
border-radius: 16px;
|
|
35
44
|
overflow: hidden;
|
|
36
|
-
box-shadow: 0 10px
|
|
37
|
-
transition: all 0.3s
|
|
45
|
+
box-shadow: 0 10px 35px rgba(0, 0, 0, 0.15);
|
|
46
|
+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
47
|
+
position: relative;
|
|
38
48
|
}
|
|
39
49
|
|
|
40
50
|
.card:hover {
|
|
41
|
-
transform: translateY(-
|
|
42
|
-
box-shadow: 0 20px
|
|
51
|
+
transform: translateY(-8px);
|
|
52
|
+
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.card-header {
|
|
56
|
+
position: relative;
|
|
57
|
+
overflow: hidden;
|
|
58
|
+
height: 200px;
|
|
43
59
|
}
|
|
44
60
|
|
|
45
61
|
.card-img {
|
|
46
62
|
width: 100%;
|
|
47
|
-
height:
|
|
63
|
+
height: 100%;
|
|
48
64
|
object-fit: cover;
|
|
49
|
-
transition: transform 0.
|
|
65
|
+
transition: transform 0.4s ease;
|
|
50
66
|
}
|
|
51
67
|
|
|
52
68
|
.card:hover .card-img {
|
|
53
|
-
transform: scale(1.
|
|
69
|
+
transform: scale(1.08);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
/* Badges */
|
|
73
|
+
.card-badge {
|
|
74
|
+
position: absolute;
|
|
75
|
+
top: 12px;
|
|
76
|
+
right: 12px;
|
|
77
|
+
background: #667eea;
|
|
78
|
+
color: white;
|
|
79
|
+
padding: 6px 14px;
|
|
80
|
+
border-radius: 20px;
|
|
81
|
+
font-size: 12px;
|
|
82
|
+
font-weight: 600;
|
|
83
|
+
text-transform: uppercase;
|
|
84
|
+
letter-spacing: 0.5px;
|
|
85
|
+
z-index: 10;
|
|
86
|
+
animation: slideIn 0.4s ease;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.card-badge.premium {
|
|
90
|
+
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.card-badge.secondary {
|
|
94
|
+
background: #43e97b;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.card-badge.interactive {
|
|
98
|
+
background: #fa709a;
|
|
99
|
+
animation: pulse 2s infinite;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
@keyframes slideIn {
|
|
103
|
+
from {
|
|
104
|
+
opacity: 0;
|
|
105
|
+
transform: translateX(20px);
|
|
106
|
+
}
|
|
107
|
+
to {
|
|
108
|
+
opacity: 1;
|
|
109
|
+
transform: translateX(0);
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
@keyframes pulse {
|
|
114
|
+
0%, 100% { opacity: 1; }
|
|
115
|
+
50% { opacity: 0.7; }
|
|
54
116
|
}
|
|
55
117
|
|
|
56
118
|
.card-body {
|
|
57
119
|
padding: 25px;
|
|
58
120
|
}
|
|
59
121
|
|
|
122
|
+
.card-category {
|
|
123
|
+
display: inline-block;
|
|
124
|
+
color: #667eea;
|
|
125
|
+
font-size: 12px;
|
|
126
|
+
font-weight: 600;
|
|
127
|
+
text-transform: uppercase;
|
|
128
|
+
letter-spacing: 0.5px;
|
|
129
|
+
margin-bottom: 10px;
|
|
130
|
+
}
|
|
131
|
+
|
|
60
132
|
.card-title {
|
|
61
133
|
color: #333;
|
|
62
|
-
font-size: 1.
|
|
134
|
+
font-size: 1.6rem;
|
|
135
|
+
margin-bottom: 12px;
|
|
136
|
+
font-weight: 600;
|
|
137
|
+
line-height: 1.3;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.card-subtitle {
|
|
141
|
+
color: #666;
|
|
142
|
+
font-size: 0.95rem;
|
|
63
143
|
margin-bottom: 15px;
|
|
144
|
+
font-weight: 500;
|
|
64
145
|
}
|
|
65
146
|
|
|
66
147
|
.card-text {
|
|
67
148
|
color: #666;
|
|
68
|
-
line-height: 1.
|
|
149
|
+
line-height: 1.7;
|
|
69
150
|
margin-bottom: 20px;
|
|
151
|
+
font-size: 0.95rem;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.card-price {
|
|
155
|
+
font-size: 2rem;
|
|
156
|
+
font-weight: 700;
|
|
157
|
+
color: #667eea;
|
|
158
|
+
margin-bottom: 15px;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
/* Features List */
|
|
162
|
+
.card-features {
|
|
163
|
+
display: flex;
|
|
164
|
+
flex-direction: column;
|
|
165
|
+
gap: 8px;
|
|
166
|
+
margin-bottom: 20px;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.feature {
|
|
170
|
+
color: #555;
|
|
171
|
+
font-size: 0.9rem;
|
|
172
|
+
display: flex;
|
|
173
|
+
align-items: center;
|
|
174
|
+
gap: 8px;
|
|
70
175
|
}
|
|
71
176
|
|
|
177
|
+
/* Tags */
|
|
178
|
+
.card-tags {
|
|
179
|
+
display: flex;
|
|
180
|
+
flex-wrap: wrap;
|
|
181
|
+
gap: 8px;
|
|
182
|
+
margin-bottom: 15px;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.tag {
|
|
186
|
+
display: inline-block;
|
|
187
|
+
background: #f0f0f0;
|
|
188
|
+
color: #667eea;
|
|
189
|
+
padding: 5px 12px;
|
|
190
|
+
border-radius: 16px;
|
|
191
|
+
font-size: 0.85rem;
|
|
192
|
+
font-weight: 500;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
/* Meta Information */
|
|
196
|
+
.card-meta {
|
|
197
|
+
display: flex;
|
|
198
|
+
gap: 15px;
|
|
199
|
+
margin-bottom: 20px;
|
|
200
|
+
font-size: 0.9rem;
|
|
201
|
+
color: #999;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
.meta-item {
|
|
205
|
+
display: flex;
|
|
206
|
+
align-items: center;
|
|
207
|
+
gap: 5px;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
/* Button */
|
|
72
211
|
.card-btn {
|
|
212
|
+
width: 100%;
|
|
73
213
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
74
214
|
color: white;
|
|
75
215
|
border: none;
|
|
@@ -80,18 +220,143 @@ h1 {
|
|
|
80
220
|
cursor: pointer;
|
|
81
221
|
transition: all 0.3s ease;
|
|
82
222
|
text-transform: uppercase;
|
|
83
|
-
letter-spacing:
|
|
223
|
+
letter-spacing: 0.5px;
|
|
224
|
+
position: relative;
|
|
225
|
+
overflow: hidden;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
.card-btn::before {
|
|
229
|
+
content: '';
|
|
230
|
+
position: absolute;
|
|
231
|
+
top: 50%;
|
|
232
|
+
left: 50%;
|
|
233
|
+
width: 0;
|
|
234
|
+
height: 0;
|
|
235
|
+
border-radius: 50%;
|
|
236
|
+
background: rgba(255, 255, 255, 0.3);
|
|
237
|
+
transform: translate(-50%, -50%);
|
|
238
|
+
transition: width 0.6s, height 0.6s;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.card-btn:hover::before {
|
|
242
|
+
width: 300px;
|
|
243
|
+
height: 300px;
|
|
84
244
|
}
|
|
85
245
|
|
|
86
246
|
.card-btn:hover {
|
|
87
247
|
transform: translateY(-2px);
|
|
88
|
-
box-shadow: 0
|
|
248
|
+
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
|
|
89
249
|
}
|
|
90
250
|
|
|
91
251
|
.card-btn:active {
|
|
92
252
|
transform: translateY(0);
|
|
93
253
|
}
|
|
94
254
|
|
|
255
|
+
.btn-premium {
|
|
256
|
+
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
.btn-premium:hover {
|
|
260
|
+
box-shadow: 0 8px 20px rgba(245, 87, 108, 0.4);
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
/* Card Variations */
|
|
264
|
+
.card-premium {
|
|
265
|
+
border-top: 3px solid #f5576c;
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
.card-minimal .card-body {
|
|
269
|
+
padding: 20px;
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
.card-minimal .card-title {
|
|
273
|
+
font-size: 1.4rem;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
.card-minimal .card-text {
|
|
277
|
+
margin-bottom: 15px;
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
/* User Card */
|
|
281
|
+
.card-user .card-body {
|
|
282
|
+
text-align: center;
|
|
283
|
+
padding: 30px 25px;
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
.card-avatar {
|
|
287
|
+
font-size: 3rem;
|
|
288
|
+
margin-bottom: 15px;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
.card-user .card-title {
|
|
292
|
+
margin-bottom: 5px;
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
.card-user .card-subtitle {
|
|
296
|
+
margin-bottom: 15px;
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
.card-social {
|
|
300
|
+
display: flex;
|
|
301
|
+
gap: 10px;
|
|
302
|
+
margin-top: 20px;
|
|
303
|
+
justify-content: center;
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
.social-btn {
|
|
307
|
+
display: inline-block;
|
|
308
|
+
padding: 8px 16px;
|
|
309
|
+
background: #f0f0f0;
|
|
310
|
+
color: #667eea;
|
|
311
|
+
text-decoration: none;
|
|
312
|
+
border-radius: 6px;
|
|
313
|
+
font-size: 0.85rem;
|
|
314
|
+
font-weight: 600;
|
|
315
|
+
transition: all 0.3s ease;
|
|
316
|
+
cursor: pointer;
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
.social-btn:hover {
|
|
320
|
+
background: #667eea;
|
|
321
|
+
color: white;
|
|
322
|
+
transform: translateY(-2px);
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
/* Interactive Card */
|
|
326
|
+
.card-actions {
|
|
327
|
+
display: flex;
|
|
328
|
+
gap: 10px;
|
|
329
|
+
margin-top: 20px;
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
.action-btn {
|
|
333
|
+
flex: 1;
|
|
334
|
+
padding: 10px 12px;
|
|
335
|
+
background: #f5f5f5;
|
|
336
|
+
border: 2px solid #e0e0e0;
|
|
337
|
+
border-radius: 8px;
|
|
338
|
+
cursor: pointer;
|
|
339
|
+
font-size: 0.9rem;
|
|
340
|
+
font-weight: 600;
|
|
341
|
+
transition: all 0.3s ease;
|
|
342
|
+
display: flex;
|
|
343
|
+
align-items: center;
|
|
344
|
+
justify-content: center;
|
|
345
|
+
gap: 6px;
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
.action-btn:hover {
|
|
349
|
+
border-color: #667eea;
|
|
350
|
+
background: #f9f9f9;
|
|
351
|
+
color: #667eea;
|
|
352
|
+
transform: translateY(-2px);
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
.action-btn:active {
|
|
356
|
+
transform: translateY(0);
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
/* Responsive */
|
|
95
360
|
@media (max-width: 768px) {
|
|
96
361
|
.cards-grid {
|
|
97
362
|
grid-template-columns: 1fr;
|
|
@@ -100,4 +365,15 @@ h1 {
|
|
|
100
365
|
h1 {
|
|
101
366
|
font-size: 2rem;
|
|
102
367
|
}
|
|
368
|
+
|
|
369
|
+
.card-title {
|
|
370
|
+
font-size: 1.4rem;
|
|
371
|
+
}
|
|
372
|
+
|
|
373
|
+
.subtitle {
|
|
374
|
+
font-size: 1rem;
|
|
375
|
+
}
|
|
376
|
+
}
|
|
377
|
+
font-size: 2rem;
|
|
378
|
+
}
|
|
103
379
|
}
|