Skip to content

Commit d75236d

Browse files
actions-useractions-user
committed
(CI) Run Prettier
1 parent f43f2b1 commit d75236d

10 files changed

Lines changed: 280 additions & 234 deletions

File tree

‎Art/Lakshya182005_Curtain_in_Wind/index.html‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,27 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>Curtain in Wind</title>
7-
<link rel="stylesheet" href="styles.css">
8-
</head>
9-
<body>
7+
<link rel="stylesheet" href="styles.css" />
8+
</head>
9+
<body>
1010
<div class="window">
11-
<div class="window-frame"></div>
12-
<div class="curtain-container">
13-
<div class="curtain">
14-
<div class="fold fold1"></div>
15-
<div class="fold fold2"></div>
16-
<div class="fold fold3"></div>
17-
<div class="fold fold4"></div>
18-
<div class="fold fold5"></div>
19-
<div class="fold fold6"></div>
20-
<div class="fold fold7"></div>
21-
<div class="fold fold8"></div>
22-
</div>
11+
<div class="window-frame"></div>
12+
<div class="curtain-container">
13+
<div class="curtain">
14+
<div class="fold fold1"></div>
15+
<div class="fold fold2"></div>
16+
<div class="fold fold3"></div>
17+
<div class="fold fold4"></div>
18+
<div class="fold fold5"></div>
19+
<div class="fold fold6"></div>
20+
<div class="fold fold7"></div>
21+
<div class="fold fold8"></div>
2322
</div>
24-
<div class="curtain-rod"></div>
23+
</div>
24+
<div class="curtain-rod"></div>
2525
</div>
26-
</body>
27-
</html>
26+
</body>
27+
</html>

‎Art/Lakshya182005_Curtain_in_Wind/meta.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
{
22
"artName": "Curtain in Wind",
33
"githubHandle": "Lakshya182005"
4-
}
4+
}

‎Art/Lakshya182005_Curtain_in_Wind/styles.css‎

Lines changed: 95 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,102 +1,121 @@
11
* {
2-
margin: 0;
3-
padding: 0;
4-
box-sizing: border-box;
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
55
}
66

77
body {
8-
background: linear-gradient(to bottom, #87ceeb 0%, #e0f6ff 100%);
9-
height: 100vh;
10-
display: flex;
11-
justify-content: center;
12-
align-items: center;
13-
overflow: hidden;
8+
background: linear-gradient(to bottom, #87ceeb 0%, #e0f6ff 100%);
9+
height: 100vh;
10+
display: flex;
11+
justify-content: center;
12+
align-items: center;
13+
overflow: hidden;
1414
}
1515

1616
.window {
17-
position: relative;
18-
width: 400px;
19-
height: 500px;
20-
background: linear-gradient(135deg, #b3d9ff 0%, #e6f2ff 100%);
21-
border-radius: 8px;
22-
overflow: hidden;
23-
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
17+
position: relative;
18+
width: 400px;
19+
height: 500px;
20+
background: linear-gradient(135deg, #b3d9ff 0%, #e6f2ff 100%);
21+
border-radius: 8px;
22+
overflow: hidden;
23+
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
2424
}
2525

2626
.window-frame {
27-
position: absolute;
28-
width: 100%;
29-
height: 100%;
30-
border: 20px solid #8b4513;
31-
border-radius: 8px;
32-
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
33-
pointer-events: none;
34-
z-index: 10;
27+
position: absolute;
28+
width: 100%;
29+
height: 100%;
30+
border: 20px solid #8b4513;
31+
border-radius: 8px;
32+
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
33+
pointer-events: none;
34+
z-index: 10;
3535
}
3636

3737
.curtain-rod {
38-
position: absolute;
39-
top: 20px;
40-
left: 20px;
41-
right: 20px;
42-
height: 10px;
43-
background: linear-gradient(to bottom, #c0c0c0 0%, #808080 100%);
44-
border-radius: 5px;
45-
z-index: 5;
46-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
38+
position: absolute;
39+
top: 20px;
40+
left: 20px;
41+
right: 20px;
42+
height: 10px;
43+
background: linear-gradient(to bottom, #c0c0c0 0%, #808080 100%);
44+
border-radius: 5px;
45+
z-index: 5;
46+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
4747
}
4848

4949
.curtain-container {
50-
position: absolute;
51-
top: 30px;
52-
left: 20px;
53-
right: 20px;
54-
height: calc(100% - 50px);
55-
overflow: hidden;
50+
position: absolute;
51+
top: 30px;
52+
left: 20px;
53+
right: 20px;
54+
height: calc(100% - 50px);
55+
overflow: hidden;
5656
}
5757

5858
.curtain {
59-
width: 100%;
60-
height: 100%;
61-
display: flex;
59+
width: 100%;
60+
height: 100%;
61+
display: flex;
6262
}
6363

6464
.fold {
65-
flex: 1;
66-
height: 100%;
67-
background: linear-gradient(90deg,
68-
#f0e6d2 0%,
69-
#e8dcc8 15%,
70-
#f5f0e6 30%,
71-
#e8dcc8 45%,
72-
#f0e6d2 60%,
73-
#e8dcc8 75%,
74-
#f5f0e6 90%,
75-
#e8dcc8 100%);
76-
animation: wave 3s ease-in-out infinite;
77-
transform-origin: top center;
65+
flex: 1;
66+
height: 100%;
67+
background: linear-gradient(
68+
90deg,
69+
#f0e6d2 0%,
70+
#e8dcc8 15%,
71+
#f5f0e6 30%,
72+
#e8dcc8 45%,
73+
#f0e6d2 60%,
74+
#e8dcc8 75%,
75+
#f5f0e6 90%,
76+
#e8dcc8 100%
77+
);
78+
animation: wave 3s ease-in-out infinite;
79+
transform-origin: top center;
7880
}
7981

80-
.fold1 { animation-delay: 0s; }
81-
.fold2 { animation-delay: 0.1s; }
82-
.fold3 { animation-delay: 0.2s; }
83-
.fold4 { animation-delay: 0.3s; }
84-
.fold5 { animation-delay: 0.4s; }
85-
.fold6 { animation-delay: 0.5s; }
86-
.fold7 { animation-delay: 0.6s; }
87-
.fold8 { animation-delay: 0.7s; }
82+
.fold1 {
83+
animation-delay: 0s;
84+
}
85+
.fold2 {
86+
animation-delay: 0.1s;
87+
}
88+
.fold3 {
89+
animation-delay: 0.2s;
90+
}
91+
.fold4 {
92+
animation-delay: 0.3s;
93+
}
94+
.fold5 {
95+
animation-delay: 0.4s;
96+
}
97+
.fold6 {
98+
animation-delay: 0.5s;
99+
}
100+
.fold7 {
101+
animation-delay: 0.6s;
102+
}
103+
.fold8 {
104+
animation-delay: 0.7s;
105+
}
88106

89107
@keyframes wave {
90-
0%, 100% {
91-
transform: skewX(0deg) translateX(0);
92-
}
93-
25% {
94-
transform: skewX(3deg) translateX(5px);
95-
}
96-
50% {
97-
transform: skewX(-2deg) translateX(-3px);
98-
}
99-
75% {
100-
transform: skewX(2deg) translateX(4px);
101-
}
102-
}
108+
0%,
109+
100% {
110+
transform: skewX(0deg) translateX(0);
111+
}
112+
25% {
113+
transform: skewX(3deg) translateX(5px);
114+
}
115+
50% {
116+
transform: skewX(-2deg) translateX(-3px);
117+
}
118+
75% {
119+
transform: skewX(2deg) translateX(4px);
120+
}
121+
}

‎Art/MohitSingh250-Echo Nebula/index.html‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Echo Nebula</title>
7-
<link rel="stylesheet" href="styles.css" />
8-
</head>
9-
<body>
10-
<div class="nebula">
11-
<div class="wave w1"></div>
12-
<div class="wave w2"></div>
13-
<div class="wave w3"></div>
14-
<div class="wave w4"></div>
15-
<div class="wave w5"></div>
16-
</div>
17-
</body>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Echo Nebula</title>
7+
<link rel="stylesheet" href="styles.css" />
8+
</head>
9+
<body>
10+
<div class="nebula">
11+
<div class="wave w1"></div>
12+
<div class="wave w2"></div>
13+
<div class="wave w3"></div>
14+
<div class="wave w4"></div>
15+
<div class="wave w5"></div>
16+
</div>
17+
</body>
1818
</html>

‎Art/MohitSingh250-Echo Nebula/styles.css‎

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -32,22 +32,32 @@ body {
3232
border-radius: 50%;
3333
background: conic-gradient(
3434
from 0deg,
35-
rgba(0,255,255,0.8),
36-
rgba(255,0,255,0.6),
37-
rgba(255,255,0,0.6),
38-
rgba(0,255,255,0.8)
35+
rgba(0, 255, 255, 0.8),
36+
rgba(255, 0, 255, 0.6),
37+
rgba(255, 255, 0, 0.6),
38+
rgba(0, 255, 255, 0.8)
3939
);
4040
opacity: 0.7;
4141
mix-blend-mode: screen;
4242
animation: expand 6s ease-in-out infinite;
4343
}
4444

4545
/* Stagger each wave for echo effect */
46-
.w1 { animation-delay: 0s; }
47-
.w2 { animation-delay: 1s; }
48-
.w3 { animation-delay: 2s; }
49-
.w4 { animation-delay: 3s; }
50-
.w5 { animation-delay: 4s; }
46+
.w1 {
47+
animation-delay: 0s;
48+
}
49+
.w2 {
50+
animation-delay: 1s;
51+
}
52+
.w3 {
53+
animation-delay: 2s;
54+
}
55+
.w4 {
56+
animation-delay: 3s;
57+
}
58+
.w5 {
59+
animation-delay: 4s;
60+
}
5161

5262
/* Expansion, fading and hue rotation */
5363
@keyframes expand {
@@ -70,7 +80,7 @@ body {
7080

7181
/* Add subtle stars background */
7282
body::before {
73-
content: "";
83+
content: '';
7484
position: absolute;
7585
inset: 0;
7686
background-image: radial-gradient(white 1px, transparent 1px);

‎Art/MohitSingh250-Quantum Veil/index.html‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Quantum Veil</title>
7-
<link rel="stylesheet" href="styles.css" />
8-
</head>
9-
<body>
10-
<div class="veil">
11-
<div class="beam b1"></div>
12-
<div class="beam b2"></div>
13-
<div class="beam b3"></div>
14-
<div class="beam b4"></div>
15-
<div class="beam b5"></div>
16-
</div>
17-
</body>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Quantum Veil</title>
7+
<link rel="stylesheet" href="styles.css" />
8+
</head>
9+
<body>
10+
<div class="veil">
11+
<div class="beam b1"></div>
12+
<div class="beam b2"></div>
13+
<div class="beam b3"></div>
14+
<div class="beam b4"></div>
15+
<div class="beam b5"></div>
16+
</div>
17+
</body>
1818
</html>

0 commit comments

Comments
 (0)