Skip to content

Commit ad1b61e

Browse files
Anuragkumar-687Anurag Kumar
Anuragkumar-687
and
Anurag Kumar
authored
Floating Laptop with Animated Code (#3218)
Co-authored-by: Anurag Kumar <anurag@Anurags-MacBook-Pro.local>
1 parent 835059d commit ad1b61e

3 files changed

Lines changed: 135 additions & 0 deletions

File tree

‎Art/Anuragkumar-687-Floating Laptop with Animated Code/index.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
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>Open Source Contributor Animation</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="scene">
11+
<div class="laptop">
12+
<div class="screen">
13+
<div class="code-line line1"></div>
14+
<div class="code-line line2"></div>
15+
<div class="code-line line3"></div>
16+
<div class="code-line line4"></div>
17+
</div>
18+
</div>
19+
20+
<div class="floating-icons">
21+
<span class="icon star">★</span>
22+
<span class="icon commit">⬤</span>
23+
<span class="icon branch">⎇</span>
24+
</div>
25+
26+
<h1 class="text">Contributing to Open Source 🚀</h1>
27+
</div>
28+
</body>
29+
</html>

‎Art/Anuragkumar-687-Floating Laptop with Animated Code/meta.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"artName": "Floating Laptop with Animated Code",
3+
"githubHandle": "Anuragkumar-687"
4+
}

‎Art/Anuragkumar-687-Floating Laptop with Animated Code/styles.css‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
2+
3+
body {
4+
margin: 0;
5+
height: 100vh;
6+
display: flex;
7+
justify-content: center;
8+
align-items: center;
9+
background: radial-gradient(circle at center, #0d1117, #010409);
10+
color: white;
11+
font-family: 'Poppins', sans-serif;
12+
overflow: hidden;
13+
}
14+
15+
.scene {
16+
text-align: center;
17+
position: relative;
18+
}
19+
20+
.laptop {
21+
width: 220px;
22+
height: 140px;
23+
background: #161b22;
24+
border: 2px solid #30363d;
25+
border-radius: 8px;
26+
margin: 0 auto;
27+
position: relative;
28+
box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
29+
animation: float 3s ease-in-out infinite;
30+
}
31+
32+
.screen {
33+
width: 90%;
34+
height: 70%;
35+
background: #0d1117;
36+
margin: 10px auto;
37+
border-radius: 4px;
38+
position: relative;
39+
overflow: hidden;
40+
}
41+
42+
.code-line {
43+
width: 0%;
44+
height: 8px;
45+
border-radius: 2px;
46+
margin: 6px auto;
47+
background: linear-gradient(90deg, #00ff99, #00ccff);
48+
animation: typing 3s infinite ease-in-out alternate;
49+
}
50+
51+
.line1 { animation-delay: 0.2s; }
52+
.line2 { animation-delay: 0.6s; }
53+
.line3 { animation-delay: 1s; }
54+
.line4 { animation-delay: 1.4s; }
55+
56+
@keyframes typing {
57+
0% { width: 0; opacity: 0.5; }
58+
50% { width: 80%; opacity: 1; }
59+
100% { width: 0; opacity: 0.5; }
60+
}
61+
62+
@keyframes float {
63+
0%, 100% { transform: translateY(0); }
64+
50% { transform: translateY(-10px); }
65+
}
66+
67+
.floating-icons {
68+
position: absolute;
69+
top: -20px;
70+
left: 0;
71+
right: 0;
72+
}
73+
74+
.icon {
75+
position: absolute;
76+
font-size: 20px;
77+
opacity: 0.8;
78+
animation: floatUp 5s linear infinite;
79+
}
80+
81+
.star { color: #f5c518; left: 20%; animation-delay: 0s; }
82+
.commit { color: #00ff99; left: 50%; animation-delay: 1s; }
83+
.branch { color: #00ccff; left: 80%; animation-delay: 2s; }
84+
85+
@keyframes floatUp {
86+
0% { transform: translateY(0) scale(1); opacity: 0.8; }
87+
50% { opacity: 1; }
88+
100% { transform: translateY(-150px) scale(1.3); opacity: 0; }
89+
}
90+
91+
.text {
92+
margin-top: 40px;
93+
font-size: 1.4rem;
94+
color: #00ffcc;
95+
text-shadow: 0 0 8px #00ff99;
96+
animation: fadeIn 3s ease-in-out infinite alternate;
97+
}
98+
99+
@keyframes fadeIn {
100+
from { opacity: 0.6; }
101+
to { opacity: 1; }
102+
}

0 commit comments

Comments
 (0)