CineMax Cinema Template
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CineMax - Premium Movie Experience</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <link rel="stylesheet" href="styles.css"> </head> <body> <!-- Navigation --> <nav class="navbar"> <div class="container"> <a href="#" class="logo">Cine<span>Max</span></a> <div class="nav-links"> <a href="#home">Home</a> <a href="#movies">Movies</a> <a href="#about">About</a> <a href="#pricing">Pricing</a> <a href="#gallery">Gallery</a> <a href="#testimonials">Testimonials</a> <a href="#news">News</a> <a href="#contact">Contact</a> </div> <div class="hamburger"> <span></span> <span></span> <span></span> </div> </div> </nav> <!-- Hero Section --> <section id="home" class="hero"> <div class="hero-content"> <h1 class="hero-title">Experience <span>Movie Magic</span></h1> <p class="hero-subtitle">State-of-the-art theaters with immersive sound and crystal-clear projection</p> <div class="hero-buttons"> <a href="#movies" class="btn-primary">Book Now</a> <a href="#about" class="btn-secondary">Learn More</a> </div> </div> <div class="hero-slides"> <div class="slide active" style="background-image: url('https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80')"></div> <div class="slide" style="background-image: url('https://images.unsplash.com/photo-1536440136628-849c177e76a1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1325&q=80')"></div> <div class="slide" style="background-image: url('https://images.unsplash.com/photo-1517604931442-7e0c8ed2963c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80')"></div> </div> <div class="hero-overlay"></div> </section> <!-- Now Showing Scroller --> <section id="movies" class="now-showing"> <div class="section-header"> <h2>Now Showing</h2> <p>Book your tickets for the latest blockbusters</p> </div> <div class="movie-scroller"> <div class="scroller-container"> <div class="movie-card"> <div class="movie-poster" style="background-image: url('https://m.media-amazon.com/images/M/MV5BMDdmMTBiNTYtMDIzNi00NGVlLWIzMDYtZTk3MTQ3NGQxZGEwXkEyXkFqcGdeQXVyMzMwOTU5MDk@._V1_FMjpg_UX1000_.jpg')"> <div class="movie-rating">8.4/10</div> </div> <div class="movie-info"> <h3>Oppenheimer</h3> <p>Action, Thriller</p> <a href="#" class="btn-book">Book Now</a> </div> </div> <div class="movie-card"> <div class="movie-poster" style="background-image: url('https://m.media-amazon.com/images/M/MV5BZWMyYzFjYTYtNTRjYi00OGExLWE2YzgtOGRmYjAxZTU3NzBiXkEyXkFqcGdeQXVyMzQ0MzA0NTM@._V1_FMjpg_UX1000_.jpg')"> <div class="movie-rating">8.2/10</div> </div> <div class="movie-info"> <h3>Spider-Man</h3> <p>Action, Adventure</p> <a href="#" class="btn-book">Book Now</a> </div> </div> <div class="movie-card"> <div class="movie-poster" style="background-image: url('https://m.media-amazon.com/images/M/MV5BOTY2NzFjODctOWUzMC00MGZhLTlhNjMtM2Y2ODBiNGY1ZWRiXkEyXkFqcGdeQXVyMDM2NDM2MQ@@._V1_FMjpg_UX1000_.jpg')"> <div class="movie-rating">7.9/10</div> </div> <div class="movie-info"> <h3>Barbie</h3> <p>Comedy, Adventure</p> <a href="#" class="btn-book">Book Now</a> </div> </div> <div class="movie-card"> <div class="movie-poster" style="background-image: url('https://m.media-amazon.com/images/M/MV5BYjhiNjBlODctY2ZiOC00YjVlLWFlNzAtNTVhNzM1YjI1NzMxXkEyXkFqcGdeQXVyMjQxNTE1MDA@._V1_FMjpg_UX1000_.jpg')"> <div class="movie-rating">8.1/10</div> </div> <div class="movie-info"> <h3>Elemental</h3> <p>Animation, Comedy</p> <a href="#" class="btn-book">Book Now</a> </div> </div> <div class="movie-card"> <div class="movie-poster" style="background-image: url('https://m.media-amazon.com/images/M/MV5BNDYxNjQyMjAtNTdiOS00NGYwLWFmNTAtNThmYjU5ZGI2YTI1XkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_FMjpg_UX1000_.jpg')"> <div class="movie-rating">7.6/10</div> </div> <div class="movie-info"> <h3>The Marvels</h3> <p>Action, Sci-Fi</p> <a href="#" class="btn-book">Book Now</a> </div> </div> </div> <button class="scroller-btn prev"><i class="fas fa-chevron-left"></i></button> <button class="scroller-btn next"><i class="fas fa-chevron-right"></i></button> </div> </section> <!-- About Section --> <section id="about" class="about"> <div class="container"> <div class="about-content"> <h2>Premium Cinema Experience</h2> <p>CineMax offers state-of-the-art theaters with cutting-edge technology to deliver an unparalleled movie-going experience. Our theaters feature:</p> <ul> <li><i class="fas fa-check"></i> 4K Laser Projection</li> <li><i class="fas fa-check"></i> Dolby Atmos Sound</li> <li><i class="fas fa-check"></i> Luxury Recliner Seating</li> <li><i class="fas fa-check"></i> Gourmet Food & Drinks</li> <li><i class="fas fa-check"></i> Reserved Seating</li> </ul> <a href="#" class="btn-primary">Explore More</a> </div> <div class="about-image"> <div class="image-box"> <img src="https://images.unsplash.com/photo-1574267432553-4b4628081c31?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1631&q=80" alt="Cinema Hall"> <div class="floating-badge"> <span>50+</span> <small>Screens</small> </div> </div> </div> </div> </section> <!-- Pricing Section --> <section id="pricing" class="pricing"> <div class="section-header"> <h2>Ticket Pricing</h2> <p>Choose the best option for your movie experience</p> </div> <div class="pricing-cards"> <div class="price-card"> <div class="price-header"> <h3>Standard</h3> <div class="price">$12.99</div> <p>Regular movie experience</p> </div> <ul class="price-features"> <li><i class="fas fa-check"></i> Standard Seating</li> <li><i class="fas fa-check"></i> Digital Projection</li> <li><i class="fas fa-check"></i> Standard Sound</li> <li><i class="fas fa-times"></i> Premium Food</li> <li><i class="fas fa-times"></i> Reserved Seats</li> </ul> <a href="#" class="btn-primary">Book Now</a> </div> <div class="price-card featured"> <div class="price-badge">Popular</div> <div class="price-header"> <h3>Premium</h3> <div class="price">$19.99</div> <p>Enhanced movie experience</p> </div> <ul class="price-features"> <li><i class="fas fa-check"></i> Luxury Recliners</li> <li><i class="fas fa-check"></i> 4K Laser Projection</li> <li><i class="fas fa-check"></i> Dolby Atmos Sound</li> <li><i class="fas fa-check"></i> Premium Food Options</li> <li><i class="fas fa-check"></i> Reserved Seats</li> </ul> <a href="#" class="btn-primary">Book Now</a> </div> <div class="price-card"> <div class="price-header"> <h3>VIP</h3> <div class="price">$29.99</div> <p>Ultimate movie experience</p> </div> <ul class="price-features"> <li><i class="fas fa-check"></i> VIP Lounge Access</li> <li><i class="fas fa-check"></i> 4K Laser Projection</li> <li><i class="fas fa-check"></i> Dolby Atmos Sound</li> <li><i class="fas fa-check"></i> Gourmet Food & Drinks</li> <li><i class="fas fa-check"></i> Best Reserved Seats</li> </ul> <a href="#" class="btn-primary">Book Now</a> </div> </div> </section> <!-- Gallery Section --> <section id="gallery" class="gallery"> <div class="section-header"> <h2>Our Gallery</h2> <p>Take a look at our premium facilities</p> </div> <div class="gallery-container"> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1517604931442-7e0c8ed2963c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Cinema Hall"> <div class="gallery-overlay"> <h3>Main Theater</h3> <p>500 seat capacity</p> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1574267432553-4b4628081c31?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1631&q=80" alt="Lobby"> <div class="gallery-overlay"> <h3>VIP Lounge</h3> <p>Exclusive access</p> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Seating"> <div class="gallery-overlay"> <h3>Premium Seating</h3> <p>Recliner chairs</p> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1585647347384-2593bc3576b0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Concession"> <div class="gallery-overlay"> <h3>Concession Stand</h3> <p>Gourmet options</p> </div> </div> </div> </section> <!-- Testimonials Section --> <section id="testimonials" class="testimonials"> <div class="section-header"> <h2>What Our Customers Say</h2> <p>Hear from our satisfied movie-goers</p> </div> <div class="testimonial-slider"> <div class="testimonial-slide active"> <div class="testimonial-content"> <div class="testimonial-text"> <p>"The best cinema experience I've ever had! The sound quality was incredible and the seats were so comfortable. Will definitely be coming back!"</p> </div> <div class="testimonial-author"> <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah Johnson"> <div> <h4>Sarah Johnson</h4> <span>Movie Enthusiast</span> </div> </div> </div> </div> <div class="testimonial-slide"> <div class="testimonial-content"> <div class="testimonial-text"> <p>"CineMax has ruined other cinemas for me. The premium experience is worth every penny. The picture quality is unmatched!"</p> </div> <div class="testimonial-author"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Chen"> <div> <h4>Michael Chen</h4> <span>Film Critic</span> </div> </div> </div> </div> <div class="testimonial-slide"> <div class="testimonial-content"> <div class="testimonial-text"> <p>"I bring my family here every weekend. The VIP treatment makes us feel special and the kids love the movie selections."</p> </div> <div class="testimonial-author"> <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Lisa Rodriguez"> <div> <h4>Lisa Rodriguez</h4> <span>Regular Customer</span> </div> </div> </div> </div> <div class="testimonial-dots"> <span class="dot active"></span> <span class="dot"></span> <span class="dot"></span> </div> </div> </section> <!-- News Section --> <section id="news" class="news"> <div class="section-header"> <h2>Latest News</h2> <p>Stay updated with our cinema happenings</p> </div> <div class="news-cards"> <div class="news-card"> <div class="news-image" style="background-image: url('https://images.unsplash.com/photo-1536440136628-849c177e76a1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1325&q=80')"></div> <div class="news-content"> <span class="news-date">June 15, 2023</span> <h3>New IMAX Screen Installation</h3> <p>We're excited to announce the installation of our new IMAX screen, the largest in the state!</p> <a href="#" class="btn-read">Read More</a> </div> </div> <div class="news-card"> <div class="news-image" style="background-image: url('https://images.unsplash.com/photo-1598899134739-24c46f58b8c0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1456&q=80')"></div> <div class="news-content"> <span class="news-date">May 28, 2023</span> <h3>Summer Movie Festival</h3> <p>Join us for our annual summer movie festival featuring classic films on the big screen.</p> <a href="#" class="btn-read">Read More</a> </div> </div> <div class="news-card"> <div class="news-image" style="background-image: url('https://images.unsplash.com/photo-1587825140708-dfaf72ae4b04?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80')"></div> <div class="news-content"> <span class="news-date">April 10, 2023</span> <h3>New Gourmet Menu Options</h3> <p>Our concession stand now offers gourmet dining options curated by a celebrity chef.</p> <a href="#" class="btn-read">Read More</a> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="contact"> <div class="container"> <div class="contact-info"> <h2>Contact Us</h2> <p>Have questions or feedback? We'd love to hear from you!</p> <div class="info-item"> <i class="fas fa-map-marker-alt"></i> <div> <h4>Address</h4> <p>123 Cinema Street, Movieville, MV 12345</p> </div> </div> <div class="info-item"> <i class="fas fa-phone-alt"></i> <div> <h4>Phone</h4> <p>(123) 456-7890</p> </div> </div> <div class="info-item"> <i class="fas fa-envelope"></i> <div> <h4>Email</h4> <p>info@cinemax.com</p> </div> </div> <div class="social-links"> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-youtube"></i></a> </div> </div> <div class="contact-form"> <form> <div class="form-group"> <input type="text" placeholder="Your Name" required> </div> <div class="form-group"> <input type="email" placeholder="Your Email" required> </div> <div class="form-group"> <input type="text" placeholder="Subject"> </div> <div class="form-group"> <textarea placeholder="Your Message" required></textarea> </div> <button type="submit" class="btn-primary">Send Message</button> </form> </div> </div> </section> <!-- Footer --> <footer class="footer"> <div class="container"> <div class="footer-content"> <div class="footer-about"> <a href="#" class="logo">Cine<span>Max</span></a> <p>Providing premium cinema experiences since 2010. Our state-of-the-art theaters deliver unforgettable movie magic.</p> </div> <div class="footer-links"> <h3>Quick Links</h3> <ul> <li><a href="#home">Home</a></li> <li><a href="#movies">Movies</a></li> <li><a href="#pricing">Pricing</a></li> <li><a href="#gallery">Gallery</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> <div class="footer-movies"> <h3>Movies</h3> <ul> <li><a href="#">Now Showing</a></li> <li><a href="#">Coming Soon</a></li> <li><a href="#">IMAX</a></li> <li><a href="#">3D Movies</a></li> <li><a href="#">Special Screenings</a></li> </ul> </div> <div class="footer-newsletter"> <h3>Newsletter</h3> <p>Subscribe to get updates on new movies and special offers.</p> <form> <input type="email" placeholder="Your Email"> <button type="submit"><i class="fas fa-paper-plane"></i></button> </form> </div> </div> </div> <div class="footer-bottom"> <div class="container"> <p>© 2023 CineMax. All Rights Reserved.</p> <div class="footer-legal"> <a href="#">Privacy Policy</a> <a href="#">Terms of Service</a> </div> </div> </div> </footer> <script src="script.js"></script> </body> </html>
CSS
/* Global Styles */ :root { --primary-color: #e50914; --secondary-color: #b81d24; --dark-color: #221f1f; --light-color: #f5f5f1; --accent-color: #f5c518; --text-color: #333; --text-light: #777; --transition: all 0.3s ease; --box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); --border-radius: 8px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; color: var(--text-color); background-color: #fff; line-height: 1.6; overflow-x: hidden; } a { text-decoration: none; color: inherit; } ul { list-style: none; } img { max-width: 100%; display: block; } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .btn { display: inline-block; padding: 12px 30px; border-radius: 50px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; transition: var(--transition); cursor: pointer; border: none; outline: none; } .btn-primary { background-color: var(--primary-color); color: white; } .btn-primary:hover { background-color: var(--secondary-color); transform: translateY(-3px); box-shadow: var(--box-shadow); } .btn-secondary { background-color: transparent; color: white; border: 2px solid white; } .btn-secondary:hover { background-color: white; color: var(--primary-color); transform: translateY(-3px); box-shadow: var(--box-shadow); } .btn-book { background-color: var(--accent-color); color: var(--dark-color); padding: 8px 20px; font-size: 14px; font-weight: 600; } .btn-book:hover { background-color: #e0b216; transform: translateY(-3px); box-shadow: var(--box-shadow); } .btn-read { color: var(--primary-color); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; transition: var(--transition); } .btn-read:hover { color: var(--secondary-color); gap: 10px; } .section-header { text-align: center; margin-bottom: 50px; } .section-header h2 { font-size: 2.5rem; margin-bottom: 15px; color: var(--dark-color); position: relative; display: inline-block; } .section-header h2::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 80px; height: 4px; background-color: var(--primary-color); border-radius: 2px; } .section-header p { color: var(--text-light); font-size: 1.1rem; max-width: 700px; margin: 0 auto; } /* Navigation */ .navbar { position: fixed; top: 0; left: 0; width: 100%; padding: 20px 0; z-index: 1000; transition: var(--transition); } .navbar.scrolled { background-color: rgba(34, 31, 31, 0.95); padding: 15px 0; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); } .navbar .container { display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 2rem; font-weight: 700; color: white; } .logo span { color: var(--primary-color); } .nav-links { display: flex; gap: 30px; } .nav-links a { color: white; font-weight: 500; transition: var(--transition); position: relative; } .nav-links a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background-color: var(--primary-color); transition: var(--transition); } .nav-links a:hover::after { width: 100%; } .nav-links a:hover { color: var(--primary-color); } .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; z-index: 1001; } .hamburger span { display: block; width: 25px; height: 3px; background-color: white; transition: var(--transition); } .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* Hero Section */ .hero { height: 100vh; position: relative; overflow: hidden; } .hero-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 100%; padding: 0 20px; z-index: 10; animation: fadeInUp 1s ease; } .hero-title { font-size: 4rem; color: white; margin-bottom: 20px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); } .hero-title span { color: var(--accent-color); } .hero-subtitle { font-size: 1.5rem; color: white; margin-bottom: 30px; max-width: 800px; margin-left: auto; margin-right: auto; text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); } .hero-buttons { display: flex; justify-content: center; gap: 20px; } .hero-slides { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0; transition: opacity 1s ease; } .slide.active { opacity: 1; } .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: 1; } /* Now Showing Section */ .now-showing { padding: 100px 0; background-color: #f9f9f9; } .movie-scroller { position: relative; padding: 0 50px; } .scroller-container { display: flex; gap: 30px; overflow-x: auto; scroll-behavior: smooth; padding: 20px 0; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE and Edge */ } .scroller-container::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } .movie-card { min-width: 250px; background-color: white; border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--box-shadow); transition: var(--transition); flex-shrink: 0; } .movie-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); } .movie-poster { height: 350px; background-size: cover; background-position: center; position: relative; } .movie-rating { position: absolute; top: 15px; right: 15px; background-color: rgba(0, 0, 0, 0.7); color: white; padding: 5px 10px; border-radius: 20px; font-weight: 600; font-size: 14px; } .movie-info { padding: 20px; } .movie-info h3 { margin-bottom: 5px; font-size: 1.2rem; } .movie-info p { color: var(--text-light); font-size: 0.9rem; margin-bottom: 15px; } .scroller-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background-color: white; border: none; box-shadow: var(--box-shadow); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1rem; color: var(--dark-color); transition: var(--transition); z-index: 10; } .scroller-btn:hover { background-color: var(--primary-color); color: white; } .scroller-btn.prev { left: 0; } .scroller-btn.next { right: 0; } /* About Section */ .about { padding: 100px 0; } .about .container { display: flex; align-items: center; gap: 50px; } .about-content { flex: 1; } .about-content h2 { font-size: 2.5rem; margin-bottom: 20px; color: var(--dark-color); } .about-content p { margin-bottom: 20px; color: var(--text-light); } .about-content ul { margin-bottom: 30px; } .about-content li { margin-bottom: 10px; display: flex; align-items: center; gap: 10px; } .about-content i { color: var(--primary-color); } .about-image { flex: 1; position: relative; } .image-box { position: relative; border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--box-shadow); } .image-box img { width: 100%; height: auto; display: block; } .floating-badge { position: absolute; bottom: -20px; right: -20px; background-color: var(--primary-color); color: white; width: 100px; height: 100px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: var(--box-shadow); animation: pulse 2s infinite; } .floating-badge span { font-size: 2rem; font-weight: 700; } .floating-badge small { font-size: 0.8rem; } /* Pricing Section */ .pricing { padding: 100px 0; background-color: #f9f9f9; } .pricing-cards { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; } .price-card { background-color: white; border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--box-shadow); transition: var(--transition); width: 300px; position: relative; } .price-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); } .price-card.featured { border: 2px solid var(--accent-color); transform: translateY(-20px); } .price-badge { position: absolute; top: 20px; right: -40px; background-color: var(--accent-color); color: var(--dark-color); padding: 5px 40px; font-weight: 600; transform: rotate(45deg); font-size: 0.8rem; } .price-header { padding: 30px; text-align: center; background-color: var(--dark-color); color: white; } .price-header h3 { font-size: 1.5rem; margin-bottom: 10px; } .price-header .price { font-size: 2.5rem; font-weight: 700; margin-bottom: 5px; color: var(--accent-color); } .price-header p { font-size: 0.9rem; color: rgba(255, 255, 255, 0.8); } .price-features { padding: 30px; } .price-features li { margin-bottom: 15px; display: flex; align-items: center; gap: 10px; } .price-features i.fa-check { color: #4CAF50; } .price-features i.fa-times { color: #F44336; } .price-card .btn-primary { display: block; margin: 0 auto 30px; width: 80%; text-align: center; } /* Gallery Section */ .gallery { padding: 100px 0; } .gallery-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } .gallery-item { position: relative; border-radius: var(--border-radius); overflow: hidden; height: 250px; box-shadow: var(--box-shadow); } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .gallery-item:hover img { transform: scale(1.1); } .gallery-overlay { position: absolute; bottom: -100%; left: 0; width: 100%; padding: 20px; background-color: rgba(229, 9, 20, 0.9); color: white; transition: var(--transition); } .gallery-item:hover .gallery-overlay { bottom: 0; } .gallery-overlay h3 { margin-bottom: 5px; } .gallery-overlay p { font-size: 0.9rem; opacity: 0.9; } /* Testimonials Section */ .testimonials { padding: 100px 0; background-color: #f9f9f9; } .testimonial-slider { max-width: 800px; margin: 0 auto; position: relative; } .testimonial-slide { display: none; animation: fadeIn 1s ease; } .testimonial-slide.active { display: block; } .testimonial-content { background-color: white; padding: 40px; border-radius: var(--border-radius); box-shadow: var(--box-shadow); position: relative; } .testimonial-content::before { content: '\201C'; position: absolute; top: 20px; left: 20px; font-size: 5rem; color: rgba(229, 9, 20, 0.1); font-family: serif; line-height: 1; } .testimonial-text { margin-bottom: 30px; font-size: 1.1rem; font-style: italic; color: var(--text-light); position: relative; z-index: 1; } .testimonial-author { display: flex; align-items: center; gap: 20px; } .testimonial-author img { width: 70px; height: 70px; border-radius: 50%; object-fit: cover; border: 3px solid var(--primary-color); } .testimonial-author h4 { font-size: 1.2rem; margin-bottom: 5px; } .testimonial-author span { font-size: 0.9rem; color: var(--text-light); } .testimonial-dots { display: flex; justify-content: center; gap: 10px; margin-top: 30px; } .dot { width: 12px; height: 12px; border-radius: 50%; background-color: #ddd; cursor: pointer; transition: var(--transition); } .dot.active { background-color: var(--primary-color); transform: scale(1.2); } /* News Section */ .news { padding: 100px 0; } .news-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; } .news-card { background-color: white; border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--box-shadow); transition: var(--transition); } .news-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); } .news-image { height: 200px; background-size: cover; background-position: center; transition: var(--transition); } .news-card:hover .news-image { transform: scale(1.05); } .news-content { padding: 20px; } .news-date { display: block; font-size: 0.8rem; color: var(--text-light); margin-bottom: 10px; } .news-content h3 { margin-bottom: 10px; font-size: 1.2rem; } .news-content p { color: var(--text-light); margin-bottom: 15px; font-size: 0.9rem; } /* Contact Section */ .contact { padding: 100px 0; background-color: var(--dark-color); color: white; } .contact .container { display: flex; gap: 50px; } .contact-info { flex: 1; } .contact-info h2 { font-size: 2.5rem; margin-bottom: 30px; color: white; } .contact-info p { margin-bottom: 30px; opacity: 0.8; } .info-item { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 20px; } .info-item i { font-size: 1.2rem; color: var(--primary-color); margin-top: 5px; } .info-item h4 { font-size: 1.1rem; margin-bottom: 5px; } .info-item p { margin-bottom: 0; opacity: 0.8; font-size: 0.9rem; } .social-links { display: flex; gap: 15px; margin-top: 30px; } .social-links a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.1); color: white; transition: var(--transition); } .social-links a:hover { background-color: var(--primary-color); transform: translateY(-5px); } .contact-form { flex: 1; background-color: white; padding: 40px; border-radius: var(--border-radius); box-shadow: var(--box-shadow); } .form-group { margin-bottom: 20px; } .form-group input, .form-group textarea { width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: var(--border-radius); font-family: inherit; font-size: 1rem; transition: var(--transition); } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.1); } .form-group textarea { min-height: 150px; resize: vertical; } .contact-form .btn-primary { width: 100%; } /* Footer */ .footer { background-color: #1a1a1a; color: white; padding: 80px 0 0; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; margin-bottom: 50px; } .footer-about .logo { font-size: 1.8rem; margin-bottom: 20px; display: inline-block; } .footer-about p { opacity: 0.8; font-size: 0.9rem; margin-bottom: 20px; } .footer-links h3, .footer-movies h3, .footer-newsletter h3 { font-size: 1.2rem; margin-bottom: 20px; position: relative; padding-bottom: 10px; } .footer-links h3::after, .footer-movies h3::after, .footer-newsletter h3::after { content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 2px; background-color: var(--primary-color); } .footer-links ul li, .footer-movies ul li { margin-bottom: 10px; } .footer-links a, .footer-movies a { opacity: 0.8; font-size: 0.9rem; transition: var(--transition); } .footer-links a:hover, .footer-movies a:hover { opacity: 1; color: var(--primary-color); padding-left: 5px; } .footer-newsletter p { opacity: 0.8; font-size: 0.9rem; margin-bottom: 20px; } .footer-newsletter form { display: flex; } .footer-newsletter input { flex: 1; padding: 10px 15px; border: none; border-radius: 50px 0 0 50px; font-family: inherit; font-size: 0.9rem; } .footer-newsletter button { background-color: var(--primary-color); color: white; border: none; border-radius: 0 50px 50px 0; padding: 0 20px; cursor: pointer; transition: var(--transition); } .footer-newsletter button:hover { background-color: var(--secondary-color); } .footer-bottom { background-color: #111; padding: 20px 0; } .footer-bottom .container { display: flex; justify-content: space-between; align-items: center; } .footer-bottom p { opacity: 0.8; font-size: 0.8rem; } .footer-legal { display: flex; gap: 20px; } .footer-legal a { opacity: 0.8; font-size: 0.8rem; transition: var(--transition); } .footer-legal a:hover { opacity: 1; color: var(--primary-color); } /* Animations */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeInUp { from { opacity: 0; transform: translate(-50%, -40%); } to { opacity: 1; transform: translate(-50%, -50%); } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } /* Responsive Styles */ @media (max-width: 992px) { .about .container, .contact .container { flex-direction: column; } .about-image, .about-content, .contact-info, .contact-form { width: 100%; } .about-image { margin-top: 30px; } .hero-title { font-size: 3rem; } .hero-subtitle { font-size: 1.2rem; } .price-card.featured { transform: none; } } @media (max-width: 768px) { .nav-links { position: fixed; top: 0; right: -100%; width: 250px; height: 100vh; background-color: var(--dark-color); flex-direction: column; align-items: center; justify-content: center; gap: 30px; transition: var(--transition); } .nav-links.active { right: 0; } .hamburger { display: flex; } .hero-title { font-size: 2.5rem; } .hero-buttons { flex-direction: column; gap: 15px; } .pricing-cards { flex-direction: column; align-items: center; } .price-card { width: 100%; max-width: 350px; } } @media (max-width: 576px) { .hero-title { font-size: 2rem; } .hero-subtitle { font-size: 1rem; } .section-header h2 { font-size: 2rem; } .testimonial-content { padding: 30px 20px; } .footer-content { grid-template-columns: 1fr; } .footer-bottom .container { flex-direction: column; gap: 10px; text-align: center; } }
JavaScript
document.addEventListener('DOMContentLoaded', function() { // Mobile Navigation const hamburger = document.querySelector('.hamburger'); const navLinks = document.querySelector('.nav-links'); hamburger.addEventListener('click', function() { this.classList.toggle('active'); navLinks.classList.toggle('active'); }); // Close mobile menu when clicking on a link document.querySelectorAll('.nav-links a').forEach(link => { link.addEventListener('click', () => { hamburger.classList.remove('active'); navLinks.classList.remove('active'); }); }); // Hero Slider const slides = document.querySelectorAll('.slide'); let currentSlide = 0; function showSlide(n) { slides.forEach(slide => slide.classList.remove('active')); currentSlide = (n + slides.length) % slides.length; slides[currentSlide].classList.add('active'); } function nextSlide() { showSlide(currentSlide + 1); } // Change slide every 5 seconds setInterval(nextSlide, 5000); // Navbar scroll effect window.addEventListener('scroll', function() { const navbar = document.querySelector('.navbar'); if (window.scrollY > 50) { navbar.classList.add('scrolled'); } else { navbar.classList.remove('scrolled'); } }); // Movie Scroller const scrollerContainer = document.querySelector('.scroller-container'); const prevBtn = document.querySelector('.scroller-btn.prev'); const nextBtn = document.querySelector('.scroller-btn.next'); nextBtn.addEventListener('click', function() { scrollerContainer.scrollBy({ left: 300, behavior: 'smooth' }); }); prevBtn.addEventListener('click', function() { scrollerContainer.scrollBy({ left: -300, behavior: 'smooth' }); }); // Testimonial Slider const testimonialSlides = document.querySelectorAll('.testimonial-slide'); const dots = document.querySelectorAll('.dot'); let currentTestimonial = 0; function showTestimonial(n) { testimonialSlides.forEach(slide => slide.classList.remove('active')); dots.forEach(dot => dot.classList.remove('active')); currentTestimonial = (n + testimonialSlides.length) % testimonialSlides.length; testimonialSlides[currentTestimonial].classList.add('active'); dots[currentTestimonial].classList.add('active'); } dots.forEach((dot, index) => { dot.addEventListener('click', () => { showTestimonial(index); }); }); // Auto change testimonial every 5 seconds setInterval(() => { showTestimonial(currentTestimonial + 1); }, 5000); // Smooth scrolling for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); const targetId = this.getAttribute('href'); const targetElement = document.querySelector(targetId); if (targetElement) { window.scrollTo({ top: targetElement.offsetTop - 80, behavior: 'smooth' }); } }); }); // Animation on scroll const animateOnScroll = function() { const elements = document.querySelectorAll('.about-content, .about-image, .price-card, .gallery-item, .news-card'); elements.forEach(element => { const elementPosition = element.getBoundingClientRect().top; const screenPosition = window.innerHeight / 1.2; if (elementPosition < screenPosition) { element.style.opacity = '1'; element.style.transform = 'translateY(0)'; } }); }; // Set initial state for animated elements document.querySelectorAll('.about-content, .about-image, .price-card, .gallery-item, .news-card').forEach(element => { element.style.opacity = '0'; element.style.transform = 'translateY(50px)'; element.style.transition = 'opacity 0.5s ease, transform 0.5s ease'; }); window.addEventListener('scroll', animateOnScroll); window.addEventListener('load', animateOnScroll); // Form submission const contactForm = document.querySelector('.contact-form form'); if (contactForm) { contactForm.addEventListener('submit', function(e) { e.preventDefault(); alert('Thank you for your message! We will get back to you soon.'); this.reset(); }); } // Newsletter form const newsletterForm = document.querySelector('.footer-newsletter form'); if (newsletterForm) { newsletterForm.addEventListener('submit', function(e) { e.preventDefault(); const emailInput = this.querySelector('input[type="email"]'); alert(`Thank you for subscribing with ${emailInput.value}!`); emailInput.value = ''; }); } });
Output Preview
Desktop
Mobile
Fullscreen