Skip to content

Commit d68c2df

Browse files
khuswant18khuswant18
authored
added-spotlight-card (#3288)
1 parent 2dd47c8 commit d68c2df

3 files changed

Lines changed: 189 additions & 0 deletions

File tree

‎Art/khuswant18-spotlight-card/index.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Spotlight Card</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="scene">
11+
<div class="card">
12+
<div class="spotlight"></div>
13+
<div class="card-content">
14+
<div class="icon"></div>
15+
<div class="title-bar"></div>
16+
<div class="subtitle-bar"></div>
17+
<div class="line"></div>
18+
<div class="line"></div>
19+
<div class="line"></div>
20+
</div>
21+
</div>
22+
</div>
23+
</body>
24+
</html>

‎Art/khuswant18-spotlight-card/meta.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"artName": "Spotlight Card",
3+
"githubHandle": "khuswant18"
4+
}

‎Art/khuswant18-spotlight-card/styles.css‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
min-height: 100vh;
9+
display: flex;
10+
justify-content: center;
11+
align-items: center;
12+
background: #0a0e27;
13+
overflow: hidden;
14+
}
15+
16+
.scene {
17+
position: relative;
18+
width: 400px;
19+
height: 500px;
20+
perspective: 1000px;
21+
}
22+
23+
.card {
24+
position: relative;
25+
width: 100%;
26+
height: 100%;
27+
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
28+
border-radius: 20px;
29+
overflow: hidden;
30+
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
31+
animation: cardFloat 4s ease-in-out infinite;
32+
}
33+
34+
@keyframes cardFloat {
35+
0%, 100% {
36+
transform: translateY(0) rotateY(0deg);
37+
}
38+
50% {
39+
transform: translateY(-15px) rotateY(5deg);
40+
}
41+
}
42+
43+
.spotlight {
44+
position: absolute;
45+
width: 200px;
46+
height: 200px;
47+
background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
48+
border-radius: 50%;
49+
filter: blur(20px);
50+
animation: spotlightMove 5s ease-in-out infinite;
51+
z-index: 1;
52+
}
53+
54+
@keyframes spotlightMove {
55+
0% {
56+
top: -50px;
57+
left: -50px;
58+
opacity: 0.3;
59+
}
60+
25% {
61+
top: -50px;
62+
left: 250px;
63+
opacity: 0.6;
64+
}
65+
50% {
66+
top: 350px;
67+
left: 250px;
68+
opacity: 0.3;
69+
}
70+
75% {
71+
top: 350px;
72+
left: -50px;
73+
opacity: 0.6;
74+
}
75+
100% {
76+
top: -50px;
77+
left: -50px;
78+
opacity: 0.3;
79+
}
80+
}
81+
82+
.card-content {
83+
position: relative;
84+
padding: 40px;
85+
z-index: 2;
86+
}
87+
88+
.icon {
89+
width: 80px;
90+
height: 80px;
91+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
92+
border-radius: 20px;
93+
margin-bottom: 30px;
94+
animation: iconPulse 2s ease-in-out infinite;
95+
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
96+
}
97+
98+
@keyframes iconPulse {
99+
0%, 100% {
100+
transform: scale(1);
101+
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
102+
}
103+
50% {
104+
transform: scale(1.05);
105+
box-shadow: 0 15px 40px rgba(102, 126, 234, 0.6);
106+
}
107+
}
108+
109+
.title-bar {
110+
width: 200px;
111+
height: 30px;
112+
background: rgba(255,255,255,0.9);
113+
border-radius: 15px;
114+
margin-bottom: 15px;
115+
animation: barGlow 3s ease-in-out infinite;
116+
}
117+
118+
.subtitle-bar {
119+
width: 150px;
120+
height: 20px;
121+
background: rgba(255,255,255,0.7);
122+
border-radius: 10px;
123+
margin-bottom: 40px;
124+
animation: barGlow 3s ease-in-out infinite;
125+
animation-delay: 0.3s;
126+
}
127+
128+
.line {
129+
width: 100%;
130+
height: 12px;
131+
background: rgba(255,255,255,0.5);
132+
border-radius: 6px;
133+
margin-bottom: 15px;
134+
animation: barGlow 3s ease-in-out infinite;
135+
}
136+
137+
.line:nth-child(4) {
138+
animation-delay: 0.6s;
139+
width: 90%;
140+
}
141+
142+
.line:nth-child(5) {
143+
animation-delay: 0.9s;
144+
width: 95%;
145+
}
146+
147+
.line:nth-child(6) {
148+
animation-delay: 1.2s;
149+
width: 85%;
150+
}
151+
152+
@keyframes barGlow {
153+
0%, 100% {
154+
opacity: 0.5;
155+
transform: translateX(0);
156+
}
157+
50% {
158+
opacity: 1;
159+
transform: translateX(5px);
160+
}
161+
}

0 commit comments

Comments
 (0)