Skip to content

Commit dfb674e

Browse files
sophiabrandtsophiabrandt
authored
Merge pull request #2943 from mrjahsan/mycontribution
Created animated Pakistan flag
2 parents 6ed6555 + acb252e commit dfb674e

File tree

3 files changed

+329
-0
lines changed

3 files changed

+329
-0
lines changed

‎Art/mrjahsan-pakistanflag/index.html

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
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>Pakistani Flag Animation</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="flag-container">
11+
<!-- Flag Pole -->
12+
<div class="flag-pole">
13+
<div class="pole-top"></div>
14+
</div>
15+
16+
<!-- Pakistani Flag -->
17+
<div class="flag">
18+
<!-- White portion (at the left) -->
19+
<div class="white-portion"></div>
20+
21+
<!-- Green portion (main) -->
22+
<div class="green-portion">
23+
<!-- Crescent and Star -->
24+
<div class="crescent-container">
25+
<div class="crescent">
26+
<div class="crescent-inner"></div>
27+
</div>
28+
<div class="star"></div>
29+
</div>
30+
</div>
31+
</div>
32+
33+
<!-- Base of flag pole -->
34+
<div class="pole-base"></div>
35+
</div>
36+
</body>
37+
</html>

‎Art/mrjahsan-pakistanflag/meta.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"artName": "animated-pakistani-flag",
3+
"githubHandle": "mrjahsan"
4+
}

‎Art/mrjahsan-pakistanflag/style.css

Lines changed: 288 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,288 @@
1+
/* =============================================
2+
CHAPTER 1: THE FOUNDATION
3+
A tale of beauty and animation begins...
4+
============================================= */
5+
* {
6+
margin: 0;
7+
padding: 0;
8+
box-sizing: border-box;
9+
}
10+
11+
body {
12+
display: flex;
13+
flex-direction: column;
14+
justify-content: center;
15+
align-items: center;
16+
min-height: 100vh;
17+
background: linear-gradient(to bottom, #87CEEB, #E0F7FA);
18+
font-family: 'Arial', sans-serif;
19+
overflow: hidden;
20+
position: relative;
21+
}
22+
23+
/* Subtle cloud effects in the background */
24+
body::before {
25+
content: "";
26+
position: absolute;
27+
width: 120px;
28+
height: 40px;
29+
background-color: rgba(255, 255, 255, 0.7);
30+
border-radius: 50%;
31+
top: 15%;
32+
left: 20%;
33+
filter: blur(8px);
34+
animation: driftCloud 30s linear infinite;
35+
}
36+
37+
body::after {
38+
content: "";
39+
position: absolute;
40+
width: 160px;
41+
height: 50px;
42+
background-color: rgba(255, 255, 255, 0.7);
43+
border-radius: 50%;
44+
top: 25%;
45+
right: 15%;
46+
filter: blur(12px);
47+
animation: driftCloud 40s linear infinite reverse;
48+
}
49+
50+
@keyframes driftCloud {
51+
0% { transform: translateX(-100px); }
52+
100% { transform: translateX(calc(100vw + 100px)); }
53+
}
54+
55+
/* =============================================
56+
CHAPTER 2: THE FLAGPOLE
57+
Standing tall and proud...
58+
============================================= */
59+
.flag-container {
60+
position: relative;
61+
height: 500px;
62+
display: flex;
63+
align-items: flex-start;
64+
margin-top: 20px;
65+
perspective: 1000px;
66+
}
67+
68+
.flag-pole {
69+
width: 12px;
70+
height: 400px;
71+
background: linear-gradient(90deg,
72+
#5D4037 0%,
73+
#8D6E63 15%,
74+
#A1887F 50%,
75+
#8D6E63 85%,
76+
#5D4037 100%);
77+
border-radius: 6px;
78+
position: relative;
79+
z-index: 1;
80+
box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.4);
81+
transform-style: preserve-3d;
82+
}
83+
84+
.flag-pole::before {
85+
content: "";
86+
position: absolute;
87+
width: 100%;
88+
height: 100%;
89+
background: linear-gradient(90deg,
90+
rgba(0,0,0,0.2) 0%,
91+
rgba(0,0,0,0) 50%,
92+
rgba(0,0,0,0.1) 100%);
93+
border-radius: 6px;
94+
}
95+
96+
.pole-top {
97+
width: 20px;
98+
height: 20px;
99+
background: radial-gradient(circle at 30% 30%,
100+
#FFF176 0%,
101+
#FFD700 50%,
102+
#FBC02D 100%);
103+
border-radius: 50%;
104+
position: absolute;
105+
top: -15px;
106+
left: 50%;
107+
transform: translateX(-50%);
108+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
109+
}
110+
111+
.pole-top::after {
112+
content: "";
113+
position: absolute;
114+
width: 8px;
115+
height: 8px;
116+
border-radius: 50%;
117+
background-color: rgba(255, 255, 255, 0.7);
118+
top: 3px;
119+
left: 3px;
120+
}
121+
122+
.pole-base {
123+
width: 80px;
124+
height: 20px;
125+
background: linear-gradient(to bottom, #5D4037, #3E2723);
126+
position: absolute;
127+
bottom: 0;
128+
left: -34px;
129+
border-radius: 6px;
130+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
131+
transform: perspective(100px) rotateX(5deg);
132+
}
133+
134+
.pole-base::before {
135+
content: "";
136+
position: absolute;
137+
width: 90%;
138+
height: 4px;
139+
background-color: rgba(0, 0, 0, 0.2);
140+
bottom: -4px;
141+
left: 5%;
142+
border-radius: 50%;
143+
filter: blur(2px);
144+
}
145+
146+
/* =============================================
147+
CHAPTER 3: THE GLORIOUS FLAG
148+
Colors of pride moving in the breeze...
149+
============================================= */
150+
.flag {
151+
display: flex;
152+
width: 240px;
153+
height: 160px;
154+
position: absolute;
155+
left: 12px;
156+
top: 40px;
157+
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.4);
158+
transform-origin: left center;
159+
animation: flagRise 6s ease-in-out infinite;
160+
transform-style: preserve-3d;
161+
}
162+
163+
@keyframes flagRise {
164+
0%, 100% {
165+
top: 40px;
166+
transform: rotateZ(0deg);
167+
}
168+
25% {
169+
transform: rotateZ(-1deg);
170+
}
171+
50% {
172+
top: 65px;
173+
transform: rotateZ(1deg);
174+
}
175+
75% {
176+
transform: rotateZ(-0.5deg);
177+
}
178+
}
179+
180+
.white-portion {
181+
width: 25%;
182+
height: 100%;
183+
background-color: #fff;
184+
position: relative;
185+
overflow: hidden;
186+
}
187+
188+
.white-portion::after {
189+
content: "";
190+
position: absolute;
191+
width: 200%;
192+
height: 100%;
193+
background: linear-gradient(90deg,
194+
rgba(255,255,255,0) 0%,
195+
rgba(255,255,255,0.5) 50%,
196+
rgba(255,255,255,0) 100%);
197+
animation: shimmer 4s infinite;
198+
transform: skewX(-20deg);
199+
}
200+
201+
@keyframes shimmer {
202+
0% { left: -200%; }
203+
50% { left: 100%; }
204+
100% { left: -200%; }
205+
}
206+
207+
.green-portion {
208+
width: 75%;
209+
height: 100%;
210+
background-color: #01411c;
211+
position: relative;
212+
overflow: hidden;
213+
}
214+
215+
.green-portion::before {
216+
content: "";
217+
position: absolute;
218+
width: 100%;
219+
height: 100%;
220+
background: linear-gradient(135deg,
221+
rgba(255,255,255,0.05) 0%,
222+
rgba(255,255,255,0) 50%,
223+
rgba(255,255,255,0.05) 100%);
224+
}
225+
226+
/* =============================================
227+
CHAPTER 4: THE CELESTIAL SYMBOLS
228+
Moon and star shining with eternal hope...
229+
============================================= */
230+
231+
.crescent-container {
232+
position: absolute;
233+
top: 50%;
234+
left: 50%;
235+
transform: translate(-50%, -50%);
236+
width: 80px;
237+
height: 80px;
238+
animation: gentle-spin 12s linear infinite;
239+
}
240+
241+
@keyframes gentle-spin {
242+
0% { transform: translate(-50%, -50%) rotate(0deg); }
243+
50% { transform: translate(-50%, -50%) rotate(1deg); }
244+
100% { transform: translate(-50%, -50%) rotate(0deg); }
245+
}
246+
247+
.crescent {
248+
width: 64px;
249+
height: 64px;
250+
background-color: #fff;
251+
border-radius: 50%;
252+
position: absolute;
253+
top: 8px;
254+
left: 8px;
255+
box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
256+
}
257+
258+
.crescent-inner {
259+
width: 52px;
260+
height: 52px;
261+
background-color: #01411c;
262+
border-radius: 50%;
263+
position: absolute;
264+
top: -4px;
265+
left: 12px;
266+
}
267+
268+
.star {
269+
position: absolute;
270+
top: 20px;
271+
left: 46px;
272+
width: 16px;
273+
height: 16px;
274+
background-color: #fff;
275+
clip-path: polygon(
276+
50% 0%, 61% 35%, 98% 35%, 68% 57%,
277+
79% 91%, 50% 70%, 21% 91%, 32% 57%,
278+
2% 35%, 39% 35%
279+
);
280+
transform: rotate(15deg);
281+
box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
282+
animation: twinkle 3s ease-in-out infinite;
283+
}
284+
285+
@keyframes twinkle {
286+
0%, 100% { filter: brightness(1); }
287+
50% { filter: brightness(1.3); }
288+
}

0 commit comments

Comments
 (0)