Punjabi Upcoming Movies Now
HTML Structure ( index.html ) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Upcoming Punjabi Movies - Pollywood Releases</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <!-- Header Section --> <header class="feature-header"> <h1>🎬 Upcoming Punjabi Movies</h1> <p>Most anticipated Pollywood releases • 2024-2025</p> <div class="filter-bar"> <button class="filter-btn active" data-filter="all">All Movies</button> <button class="filter-btn" data-filter="drama">Drama</button> <button class="filter-btn" data-filter="comedy">Comedy</button> <button class="filter-btn" data-filter="action">Action</button> <button class="filter-btn" data-filter="romance">Romance</button> </div> </header> <!-- Movies Grid --> <div class="movies-grid" id="moviesGrid"> <!-- Movies will be dynamically loaded here --> </div>
/* Modal Styles */ .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); justify-content: center; align-items: center; } punjabi upcoming movies
.close-modal { position: absolute; right: 20px; top: 15px; font-size: 28px; cursor: pointer; color: #999; } HTML Structure ( index
.movie-genre { display: inline-block; background: #f0f0f0; padding: 0.3rem 0.8rem; border-radius: 20px; font-size: 0.8rem; margin-bottom: 0.8rem; color: #555; } HTML Structure ( index.html ) <
/* Header Styles */ .feature-header { text-align: center; color: white; margin-bottom: 3rem; }