Skip to content

Commit 95a6c23

Browse files
Lakshya182005Lakshya182005
authored
add Curtain in Wind (#3250)
1 parent 01e36c4 commit 95a6c23

3 files changed

Lines changed: 133 additions & 0 deletions

File tree

‎Art/Lakshya182005_Curtain_in_Wind/index.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
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>Curtain in Wind</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<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>
23+
</div>
24+
<div class="curtain-rod"></div>
25+
</div>
26+
</body>
27+
</html>

‎Art/Lakshya182005_Curtain_in_Wind/meta.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"artName": "Curtain in Wind",
3+
"githubHandle": "Lakshya182005"
4+
}

‎Art/Lakshya182005_Curtain_in_Wind/styles.css‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
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;
14+
}
15+
16+
.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);
24+
}
25+
26+
.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;
35+
}
36+
37+
.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);
47+
}
48+
49+
.curtain-container {
50+
position: absolute;
51+
top: 30px;
52+
left: 20px;
53+
right: 20px;
54+
height: calc(100% - 50px);
55+
overflow: hidden;
56+
}
57+
58+
.curtain {
59+
width: 100%;
60+
height: 100%;
61+
display: flex;
62+
}
63+
64+
.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;
78+
}
79+
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; }
88+
89+
@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+
}

0 commit comments

Comments
 (0)