├── README.md ├── img ├── p.jpg ├── p1.jpg ├── p10.jpg ├── p11.jpg ├── p12.jpg ├── p13.jpg ├── p2.jpg ├── p3.png ├── p4.jpg ├── p5.jpg ├── p6.jpg ├── p7.jpg ├── p8.jpg ├── p9.jpg └── hero.jpg ├── style └── style.css └── index.html /README.md: -------------------------------------------------------------------------------- 1 | # Muniba-Mazari-Tribute-page -------------------------------------------------------------------------------- /img/p.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Durga50/Muniba-Mazari-Tribute-page/HEAD/img/p.jpg -------------------------------------------------------------------------------- /img/p1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Durga50/Muniba-Mazari-Tribute-page/HEAD/img/p1.jpg -------------------------------------------------------------------------------- /img/p10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Durga50/Muniba-Mazari-Tribute-page/HEAD/img/p10.jpg -------------------------------------------------------------------------------- /img/p11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Durga50/Muniba-Mazari-Tribute-page/HEAD/img/p11.jpg -------------------------------------------------------------------------------- /img/p12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Durga50/Muniba-Mazari-Tribute-page/HEAD/img/p12.jpg -------------------------------------------------------------------------------- /img/p13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Durga50/Muniba-Mazari-Tribute-page/HEAD/img/p13.jpg -------------------------------------------------------------------------------- /img/p2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Durga50/Muniba-Mazari-Tribute-page/HEAD/img/p2.jpg -------------------------------------------------------------------------------- /img/p3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Durga50/Muniba-Mazari-Tribute-page/HEAD/img/p3.png -------------------------------------------------------------------------------- /img/p4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Durga50/Muniba-Mazari-Tribute-page/HEAD/img/p4.jpg -------------------------------------------------------------------------------- /img/p5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Durga50/Muniba-Mazari-Tribute-page/HEAD/img/p5.jpg -------------------------------------------------------------------------------- /img/p6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Durga50/Muniba-Mazari-Tribute-page/HEAD/img/p6.jpg -------------------------------------------------------------------------------- /img/p7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Durga50/Muniba-Mazari-Tribute-page/HEAD/img/p7.jpg -------------------------------------------------------------------------------- /img/p8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Durga50/Muniba-Mazari-Tribute-page/HEAD/img/p8.jpg -------------------------------------------------------------------------------- /img/p9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Durga50/Muniba-Mazari-Tribute-page/HEAD/img/p9.jpg -------------------------------------------------------------------------------- /img/hero.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Durga50/Muniba-Mazari-Tribute-page/HEAD/img/hero.jpg -------------------------------------------------------------------------------- /style/style.css: -------------------------------------------------------------------------------- 1 | 2 | .g { 3 | position: relative; 4 | text-align: center; 5 | } 6 | .top-left { 7 | position: absolute; 8 | top: 75%; 9 | right: 5%; 10 | left: 55%; /* Adjust the left and right spacing */ 11 | font-family: Roboto; 12 | font-size: 26px; 13 | text-align: justify; 14 | color: white; /* Ensure text is readable on the image */ 15 | background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */ 16 | padding: 20px; 17 | box-sizing: border-box; 18 | } 19 | .link{ 20 | text-decoration: none; 21 | color: white; 22 | } 23 | .link:hover{ 24 | color: white; 25 | } 26 | .main-title{ 27 | font-size: 35px; 28 | font-weight: 600; 29 | 30 | text-align: center; 31 | } 32 | .line li 33 | {display: inline-block; 34 | background-color: black; 35 | border-radius: 50px; 36 | height: 4px; 37 | } 38 | .line li:nth-of-type(1){ 39 | width: 20px; 40 | } 41 | .line li:nth-of-type(2){ 42 | width: 10px; 43 | } 44 | .line li:nth-of-type(3){ 45 | width: 5px; 46 | } 47 | /* Responsive styles */ 48 | @media screen and (max-width: 1200px) { 49 | .top-left { 50 | font-size: 12px; /* Adjust font size for smaller screens */ 51 | padding: 5px; /* Adjust padding for smaller screens */ 52 | } 53 | } 54 | 55 | .about__img{ 56 | width: 500px; 57 | height: 400px; 58 | border-radius: 50px; 59 | } 60 | 61 | 62 | 63 | .img-box:hover { 64 | box-shadow: 0 5px 35px 0px rgba(0,0,0,.1); 65 | } 66 | 67 | .center{ 68 | display: flex; 69 | justify-content: center; 70 | text-align: justify; 71 | font-size: 1.3em; 72 | } 73 | 74 | 75 | 76 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap"); 77 | 78 | *, 79 | *::before, 80 | *::after { 81 | margin: 0; 82 | padding: 0; 83 | box-sizing: border-box; 84 | } 85 | 86 | body { 87 | --color: rgba(30, 30, 30); 88 | --bgColor: rgba(245, 245, 245); 89 | min-height: 100vh; 90 | display: grid; 91 | align-content: center; 92 | gap: 2rem; 93 | 94 | font-family: "Poppins", sans-serif; 95 | color: var(--color); 96 | background: var(--bgColor); 97 | } 98 | 99 | h1 { 100 | text-align: center; 101 | 102 | } 103 | 104 | .line1 ul { 105 | --col-gap: 2rem; 106 | --row-gap: 2rem; 107 | --line-w: 0.25rem; 108 | display: grid; 109 | grid-template-columns: var(--line-w) 1fr; 110 | grid-auto-columns: max-content; 111 | column-gap: var(--col-gap); 112 | list-style: none; 113 | width: min(60rem, 90%); 114 | margin-inline: auto; 115 | } 116 | 117 | /* line */ 118 | .line1 ul::before { 119 | content: ""; 120 | grid-column: 1; 121 | grid-row: 1 / span 20; 122 | background: rgb(225, 225, 225); 123 | border-radius: calc(var(--line-w) / 2); 124 | } 125 | 126 | /* columns*/ 127 | 128 | /* row gaps */ 129 | .line1 ul li:not(:last-child) { 130 | margin-bottom: var(--row-gap); 131 | } 132 | 133 | /* card */ 134 | .line1 ul li { 135 | grid-column: 2; 136 | --inlineP: 1.5rem; 137 | margin-inline: var(--inlineP); 138 | grid-row: span 2; 139 | display: grid; 140 | grid-template-rows: min-content min-content min-content; 141 | } 142 | 143 | /* date */ 144 | .line1 ul li .date { 145 | --dateH: 3rem; 146 | height: var(--dateH); 147 | margin-inline: calc(var(--inlineP) * -1); 148 | 149 | text-align: center; 150 | background-color: var(--accent-color); 151 | 152 | color: white; 153 | font-size: 1.25rem; 154 | font-weight: 700; 155 | 156 | display: grid; 157 | place-content: center; 158 | position: relative; 159 | 160 | border-radius: calc(var(--dateH) / 2) 0 0 calc(var(--dateH) / 2); 161 | } 162 | 163 | /* date flap */ 164 | .line1 ul li .date::before { 165 | content: ""; 166 | width: var(--inlineP); 167 | aspect-ratio: 1; 168 | background: var(--accent-color); 169 | background-image: linear-gradient(rgba(0, 0, 0, 0.2) 100%, transparent); 170 | position: absolute; 171 | top: 100%; 172 | 173 | clip-path: polygon(0 0, 100% 0, 0 100%); 174 | right: 0; 175 | } 176 | 177 | /* circle */ 178 | .line1 ul li .date::after { 179 | content: ""; 180 | position: absolute; 181 | width: 2rem; 182 | aspect-ratio: 1; 183 | background: var(--bgColor); 184 | border: 0.3rem solid var(--accent-color); 185 | border-radius: 50%; 186 | top: 50%; 187 | 188 | transform: translate(50%, -50%); 189 | right: calc(100% + var(--col-gap) + var(--line-w) / 2); 190 | } 191 | 192 | /* title descr */ 193 | .line1 ul li .title, 194 | .line1 ul li .descr { 195 | background: var(--bgColor); 196 | position: relative; 197 | padding-inline: 1.5rem; 198 | } 199 | .line1 ul li .title { 200 | overflow: hidden; 201 | padding-block-start: 1.5rem; 202 | padding-block-end: 1rem; 203 | font-weight: 500; 204 | } 205 | .line1 ul li .descr { 206 | padding-block-end: 1.5rem; 207 | font-weight: 300; 208 | } 209 | 210 | /* shadows */ 211 | .line1 ul li .title::before, 212 | .line1 ul li .descr::before { 213 | content: ""; 214 | position: absolute; 215 | width: 90%; 216 | height: 0.5rem; 217 | background: rgba(0, 0, 0, 0.5); 218 | left: 50%; 219 | border-radius: 50%; 220 | filter: blur(4px); 221 | transform: translate(-50%, 50%); 222 | } 223 | .line1 ul li .title::before { 224 | bottom: calc(100% + 0.125rem); 225 | } 226 | 227 | .line1 ul li .descr::before { 228 | z-index: -1; 229 | bottom: 0.25rem; 230 | } 231 | 232 | @media (min-width: 40rem) { 233 | .line1 ul { 234 | grid-template-columns: 1fr var(--line-w) 1fr; 235 | } 236 | .line1 ul::before { 237 | grid-column: 2; 238 | } 239 | .line1 ul li:nth-child(odd) { 240 | grid-column: 1; 241 | } 242 | .line1 ul li:nth-child(even) { 243 | grid-column: 3; 244 | } 245 | 246 | /* start second card */ 247 | .line1 ul li:nth-child(2) { 248 | grid-row: 2/4; 249 | } 250 | 251 | .line1 ul li:nth-child(odd) .date::before { 252 | clip-path: polygon(0 0, 100% 0, 100% 100%); 253 | left: 0; 254 | } 255 | 256 | .line1 ul li:nth-child(odd) .date::after { 257 | transform: translate(-50%, -50%); 258 | left: calc(100% + var(--col-gap) + var(--line-w) / 2); 259 | } 260 | .line1 ul li:nth-child(odd) .date { 261 | border-radius: 0 calc(var(--dateH) / 2) calc(var(--dateH) / 2) 0; 262 | } 263 | } 264 | .main-title{ 265 | color: #147059; 266 | } 267 | 268 | 269 | 270 | 271 | 272 | /* Container with gradient background, transition effects, and padding */ 273 | .slideshow-container { 274 | position: relative; 275 | background: linear-gradient(135deg, #FFA07A, #FF6347, #FF4500); 276 | color: whitesmoke; 277 | width: 50%; 278 | border-radius: 20px; /* Reduced border-radius for a modern look */ 279 | padding: 5px; /* Padding around the content */ 280 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow for depth */ 281 | overflow: hidden; /* Hide overflow for smoother animations */ 282 | transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out; /* Transition effects */ 283 | border-color: antiquewhite; 284 | } 285 | 286 | /* Scale-up effect on hover */ 287 | .slideshow-container:hover { 288 | transform: scale(1.05); /* Slightly scale up */ 289 | box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Enhanced shadow */ 290 | } 291 | 292 | /* Keyframes for fade-in animation */ 293 | @keyframes fadeIn { 294 | from { opacity: 0; } 295 | to { opacity: 1; } 296 | } 297 | 298 | /* Apply fade-in animation to each slide */ 299 | .mySlides { 300 | animation: fadeIn 2s; /* 2 seconds fade-in effect */ 301 | } 302 | 303 | .mySlides { 304 | display: none; 305 | padding: 80px; 306 | text-align: center; 307 | } 308 | 309 | /* Next & previous buttons */ 310 | .prev, .next { 311 | cursor: pointer; 312 | position: absolute; 313 | top: 50%; 314 | width: auto; 315 | margin-top: -30px; 316 | padding: 16px; 317 | color: #888; 318 | font-weight: bold; 319 | font-size: 20px; 320 | border-radius: 0 3px 3px 0; 321 | user-select: none; 322 | } 323 | 324 | /* Position the "next button" to the right */ 325 | .next { 326 | position: absolute; 327 | right: 0; 328 | border-radius: 3px 0 0 3px; 329 | } 330 | 331 | /* On hover, add a black background color with a little bit see-through */ 332 | .prev:hover, .next:hover { 333 | background-color: rgba(0,0,0,0.8); 334 | color: white; 335 | } 336 | 337 | /* The dot/bullet/indicator container */ 338 | .dot-container { 339 | text-align: center; 340 | padding: 20px; 341 | background:rgba(245, 245, 245); 342 | } 343 | 344 | /* The dots/bullets/indicators */ 345 | .dot { 346 | cursor: pointer; 347 | height: 15px; 348 | width: 15px; 349 | margin: 0 2px; 350 | background-color: rgba(245, 245, 245); 351 | border-radius: 50%; 352 | display: inline-block; 353 | transition: background-color 0.6s ease; 354 | } 355 | 356 | /* Add a background color to the active dot/circle */ 357 | .active, .dot:hover { 358 | background-color:rgba(245, 245, 245); 359 | } 360 | 361 | /* Add an italic font style to all quotes */ 362 | q {font-style: italic;} 363 | 364 | /* Add a blue color to the author */ 365 | .author {color: rgb(8, 8, 8); 366 | font-size: 25px; 367 | } 368 | 369 | 370 | .vedio .row { 371 | display: flex; /* Flexbox layout for the row */ 372 | /* Space between columns (videos) */ 373 | } 374 | 375 | .vedio { 376 | flex: 1; /* Ensures that columns take up equal space */ 377 | /* Space around each column */ 378 | } 379 | 380 | iframe{ 381 | border-radius: 30px; 382 | } 383 | 384 | 385 | .img { 386 | width: 100%; 387 | overflow: hidden; /* Hide overflow to ensure smooth scrolling */ 388 | background: #f0f0f0; /* Optional: Background color for contrast */ 389 | padding: 20px; /* Space around the images */ 390 | } 391 | 392 | 393 | .marquee-container img { 394 | 395 | transition: transform 0.3s ease; /* Smooth transition effect */ 396 | } 397 | 398 | .marquee-container img:hover { 399 | transform: scale(1.1); /* Enlarge image on hover */ 400 | } 401 | 402 | @keyframes marquee { 403 | 0% { 404 | transform: translateX(0); 405 | } 406 | 100% { 407 | transform: translateX(-100%); /* Scrolls the images */ 408 | } 409 | } 410 | /* Modal styles */ 411 | .modal { 412 | display: none; /* Hidden by default */ 413 | position: fixed; 414 | z-index: 1000; /* Ensure it's on top of other content */ 415 | left: 0; 416 | top: 0; 417 | width: 100%; 418 | height: 100%; 419 | overflow: auto; 420 | background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent background */ 421 | } 422 | 423 | .modal-content { 424 | margin: 5% auto; 425 | display: block; 426 | max-width: 80%; 427 | width: auto; 428 | height:500px; 429 | } 430 | 431 | .close { 432 | position: absolute; 433 | top: 10px; 434 | right: 25px; 435 | color: #f1f1f1; 436 | font-size: 35px; 437 | font-weight: bold; 438 | cursor: pointer; 439 | } 440 | 441 | .close:hover, 442 | .close:focus { 443 | color: #bbb; 444 | text-decoration: none; 445 | } 446 | 447 | /*footer*/ 448 | footer 449 | { 450 | background-color: #000000; 451 | } 452 | footer .copyright-text 453 | { 454 | padding: 10px 0; 455 | font-size: 18px; 456 | color: white; 457 | font-weight: 300; 458 | margin: 10px 0 0; 459 | text-align: center; 460 | } 461 | footer .copyright-tex 462 | { 463 | padding: 10px 0; 464 | font-size: 40px; 465 | color: white; 466 | font-weight: 300; 467 | margin: 10px 0 0; 468 | text-align: center; 469 | } 470 | 471 | /*responsive*/ 472 | /* Ensuring spacing and layout on smaller screens */ 473 | @media (max-width: 768px) { 474 | .row { 475 | display: flex; 476 | flex-wrap: wrap; 477 | } 478 | 479 | 480 | .video-iframe { 481 | max-width: 100%; 482 | 483 | } 484 | } 485 | 486 | @media (max-width: 480px) { 487 | 488 | .col-6, .col-5 { 489 | flex: 1 1 70%; 490 | max-width: 100%; 491 | } 492 | 493 | 494 | .main-title { 495 | font-size: 2rem; 496 | } 497 | 498 | .line li { 499 | width: 30px; 500 | height: 4px; 501 | } 502 | } 503 | 504 | 505 | @media (max-width: 1000px) { 506 | .img-box { 507 | flex-direction: column; 508 | } 509 | 510 | .col-6, .col-5 { 511 | flex: 1 1 100%; 512 | max-width: 100%; 513 | } 514 | 515 | 516 | .main-title { 517 | font-size: 2rem; 518 | } 519 | 520 | .line li { 521 | width: 30px; 522 | height: 4px; 523 | } 524 | } 525 | 526 | 527 | @media (max-width:768px) { 528 | .footer { 529 | padding: 10px 0; 530 | } 531 | 532 | .copyright-tex { 533 | font-size: 1.2rem; 534 | } 535 | .g.img{ 536 | width: 90%; 537 | object-fit: cover; 538 | } 539 | 540 | 541 | } 542 | 543 | 544 | .video-iframe { 545 | width: 100%; 546 | height: 315px; 547 | } 548 | 549 | .btn-custom { 550 | font-size: 16px; 551 | text-align: center; 552 | font-weight: 500; 553 | padding: 10px 25px; 554 | width: 200px; 555 | height: 50px; 556 | color: white; 557 | border-radius: 20px; 558 | display: inline-block; 559 | white-space: nowrap; 560 | border: none; 561 | background: rgb(33, 85, 92); 562 | transition: all 0.3s ease; 563 | transform: scale(1.05); 564 | } 565 | 566 | .btn-custom a { 567 | text-decoration: none; 568 | color: white; 569 | } 570 | 571 | .container { 572 | max-width: 1040px; 573 | margin: 0 auto; 574 | } 575 | 576 | 577 | @media (max-width: 768px) { 578 | .line1 li { 579 | flex: 0 0 calc(50% - 20px); 580 | font-size: 15px; 581 | margin-left: -150px; 582 | } 583 | } 584 | 585 | 586 | 587 | @media (max-width: 768px) { 588 | .video-iframe { 589 | width: 450px; 590 | height: 315px; 591 | } 592 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Document 10 | 11 | 12 | 13 | 14 |
15 | 22 | 23 | Snow 24 | 26 |

27 | 28 | 29 |
30 |
31 |

About

32 | 38 |
39 |
40 |
41 |
42 | 43 |
44 |


Muniba Mazari, also known as the "Iron Lady of Pakistan," is a remarkable artist, motivational speaker, and activist. Despite facing a life-altering spinal injury in her youth that confined her to a wheelchair, Muniba defied odds to become a symbol of strength and resilience. Her advocacy for women's rights and disability inclusion, coupled with her powerful artwork and inspirational talks, has touched hearts globally, making her a beacon of hope and empowerment. 45 | 46 |

47 |
48 |
49 |
50 |
51 |

52 | 53 | 54 | 55 | 56 |
57 |

Awards

58 |
63 | 64 | 65 | 66 |
67 |

95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 |

Quotes

104 |
109 | 110 | 111 |
112 | 113 |
114 |

115 | "I always wanted to be an artist. I wanted to create something beautiful and meaningful. Despite my physical challenges, I embraced my dreams, and today, I paint with my heart and soul." 116 | 117 |


118 |

-Muniba Mazari

119 |
120 | 121 |
122 |

123 | "We are all perfectly imperfect, and that’s perfectly all right. Our scars tell stories of our survival, our resilience, and our strength. Instead of hiding them, we should embrace and celebrate them." 124 | 125 |


126 |

-Muniba Mazari

127 |
128 | 129 |
130 |

131 | "The greatest lesson life has taught me is that happiness is not a destination, it’s a journey. True happiness comes from within, from a place of gratitude and acceptance." 132 | 133 |


134 |

-Muniba Mazari

135 |
136 |
137 |

138 | "You are the hero of your own story, and heroes never give up. No matter how tough life gets, remember that you have the strength to overcome it. Your courage and resilience will define you." 139 | 140 |


141 |

-Muniba Mazari

142 |
143 |
144 |

145 | "I have learned that life is a journey, and it's not about the destination but about the experiences and lessons along the way. Each setback is an opportunity for growth and self-discovery." 146 | 147 |


148 |

-Muniba Mazari

149 |
150 |
151 |

152 | "Your imperfections make you unique and beautiful. Embrace them and let them be a testament to your strength and resilience. Remember, you are enough just as you are." 153 |


154 |

-Muniba Mazari

155 |
156 |
157 |

158 | "Don't let the fear of the unknown hold you back. Embrace change and uncertainty, for it is in those moments that you find your true strength and potential. Trust in yourself and take that leap of faith." 159 | 160 |


161 |

-Muniba Mazari

162 |
163 |
164 |

165 | "Pain is inevitable, but suffering is optional. It’s our choice to either let our hardships define us or to rise above them. Choose to be a warrior, not a victim." 166 | 167 |


168 | 169 |

-Muniba Mazari

170 |
171 |
172 |

173 | "We all have the power to change the world in our own unique way. By being kind, compassionate, and resilient, we can make a difference in the lives of others and create a ripple effect of positivity." 174 | 175 |


176 |

-Muniba Mazari

177 |
178 |
179 |

180 | "Life is too short to live in fear. Step out of your comfort zone, take risks, and embrace new opportunities. You never know what amazing things are waiting for you just beyond your fears." 181 |


182 |

-Muniba Mazari

183 |
184 | 185 | 186 | 187 | 188 |
189 | 190 |
191 | 192 | 193 | 194 |
195 | 196 | 197 | 198 | 199 |

Motivational videos

200 |
205 | 206 | 207 |
208 |
209 |
210 | 211 |
212 |
213 | 214 |
215 |
216 | 217 |
218 |
219 |
220 | 223 |
224 |
225 |
226 |
227 | 228 | 229 | 230 |

Images

231 |
236 |
237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 |
251 |

255 |
268 | 269 | 270 | 271 |

272 | 279 | 280 | 281 | 282 | 314 | 315 | 316 | 337 | 338 | 339 | --------------------------------------------------------------------------------