Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Pakistan Property - Presentation</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* Presentation-specific styles */ | |
| .presentation { | |
| width: 100%; | |
| height: 100vh; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .slide { | |
| width: 100%; | |
| height: 100%; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| opacity: 0; | |
| transition: opacity 0.5s ease; | |
| padding: 2rem; | |
| background-color: white; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| } | |
| .slide.active { | |
| opacity: 1; | |
| z-index: 1; | |
| } | |
| .slide-title { | |
| font-size: 3rem; | |
| color: #e74c3c; | |
| margin-bottom: 2rem; | |
| text-align: center; | |
| } | |
| .slide-content { | |
| font-size: 1.5rem; | |
| line-height: 1.6; | |
| max-width: 900px; | |
| margin: 0 auto; | |
| } | |
| .slide-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 2rem; | |
| margin-top: 2rem; | |
| } | |
| .slide-item { | |
| background-color: #f8f9fa; | |
| padding: 1.5rem; | |
| border-radius: 8px; | |
| box-shadow: 0 2px 8px rgba(0,0,0,0.1); | |
| } | |
| .slide-item h3 { | |
| color: #2c3e50; | |
| margin-bottom: 1rem; | |
| } | |
| .navigation { | |
| position: fixed; | |
| bottom: 2rem; | |
| right: 2rem; | |
| z-index: 100; | |
| display: flex; | |
| gap: 1rem; | |
| } | |
| .nav-btn { | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 50%; | |
| background-color: #e74c3c; | |
| color: white; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| font-size: 1.2rem; | |
| border: none; | |
| transition: background-color 0.3s; | |
| } | |
| .nav-btn:hover { | |
| background-color: #c0392b; | |
| } | |
| .progress-bar { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 0%; | |
| height: 5px; | |
| background-color: #e74c3c; | |
| z-index: 100; | |
| } | |
| .slide-number { | |
| position: fixed; | |
| bottom: 2rem; | |
| left: 2rem; | |
| z-index: 100; | |
| color: #2c3e50; | |
| font-weight: bold; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="progress-bar"></div> | |
| <div class="slide-number">1/8</div> | |
| <div class="presentation"> | |
| <!-- Slide 1: Title --> | |
| <div class="slide active"> | |
| <div class="slide-content"> | |
| <h1 class="slide-title">Pakistan Property</h1> | |
| <p style="text-align: center; font-size: 1.8rem; margin-bottom: 3rem;">Your Gateway to Real Estate in Pakistan</p> | |
| <div style="text-align: center;"> | |
| <img src="https://static.photos/cityscape/640x360/1" alt="Pakistan City" style="max-width: 100%; border-radius: 8px;"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Slide 2: About --> | |
| <div class="slide"> | |
| <div class="slide-content"> | |
| <h2 class="slide-title">About Pakistan Property</h2> | |
| <p>Pakistan Property is the premier real estate platform connecting buyers, sellers, and renters across Pakistan's major cities.</p> | |
| <div class="slide-grid"> | |
| <div class="slide-item"> | |
| <h3><i class="fas fa-bullseye"></i> Our Mission</h3> | |
| <p>To simplify property transactions and provide transparent, reliable real estate services nationwide.</p> | |
| </div> | |
| <div class="slide-item"> | |
| <h3><i class="fas fa-chart-line"></i> Market Position</h3> | |
| <p>Over 50,000 active listings and 10,000+ satisfied customers since our launch.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Slide 3: Services --> | |
| <div class="slide"> | |
| <div class="slide-content"> | |
| <h2 class="slide-title">Our Services</h2> | |
| <p>Comprehensive real estate solutions tailored to your needs:</p> | |
| <div class="slide-grid"> | |
| <div class="slide-item"> | |
| <h3><i class="fas fa-home"></i> Residential Properties</h3> | |
| <p>Houses, apartments, and plots in prime locations across Pakistan.</p> | |
| </div> | |
| <div class="slide-item"> | |
| <h3><i class="fas fa-building"></i> Commercial Properties</h3> | |
| <p>Shops, offices, and commercial plots in business districts.</p> | |
| </div> | |
| <div class="slide-item"> | |
| <h3><i class="fas fa-handshake"></i> Rental Solutions</h3> | |
| <p>Short-term and long-term rental options with verified landlords.</p> | |
| </div> | |
| <div class="slide-item"> | |
| <h3><i class="fas fa-user-tie"></i> Agent Services</h3> | |
| <p>Connect with licensed real estate professionals.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Slide 4: Property Types --> | |
| <div class="slide"> | |
| <div class="slide-content"> | |
| <h2 class="slide-title">Property Types</h2> | |
| <p>We cater to all real estate needs across Pakistan:</p> | |
| <div class="slide-grid"> | |
| <div class="slide-item"> | |
| <h3><i class="fas fa-home"></i> Houses</h3> | |
| <p>From luxury villas to affordable homes in all major cities.</p> | |
| </div> | |
| <div class="slide-item"> | |
| <h3><i class="fas fa-building"></i> Apartments</h3> | |
| <p>Modern apartments with amenities in secure complexes.</p> | |
| </div> | |
| <div class="slide-item"> | |
| <h3><i class="fas fa-vector-square"></i> Plots</h3> | |
| <p>Residential and commercial plots in developing areas.</p> | |
| </div> | |
| <div class="slide-item"> | |
| <h3><i class="fas fa-store"></i> Commercial</h3> | |
| <p>Shops, offices, and warehouses in prime locations.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Slide 5: Market Coverage --> | |
| <div class="slide"> | |
| <div class="slide-content"> | |
| <h2 class="slide-title">Market Coverage</h2> | |
| <p>We operate in all major cities across Pakistan:</p> | |
| <div class="slide-grid"> | |
| <div class="slide-item"> | |
| <h3><i class="fas fa-city"></i> Karachi</h3> | |
| <p>DHA, Clifton, Gulshan, and other prime areas.</p> | |
| </div> | |
| <div class="slide-item"> | |
| <h3><i class="fas fa-mosque"></i> Lahore</h3> | |
| <p>Bahria Town, DHA, Gulberg, and Model Town.</p> | |
| </div> | |
| <div class="slide-item"> | |
| <h3><i class="fas fa-monument"></i> Islamabad</h3> | |
| <p>Sectors, DHA, Bahria Town, and Margalla Hills.</p> | |
| </div> | |
| <div class="slide-item"> | |
| <h3><i class="fas fa-mountain"></i> Other Cities</h3> | |
| <p>Rawalpindi, Peshawar, Multan, and Faisalabad.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Slide 6: Technology --> | |
| <div class="slide"> | |
| <div class="slide-content"> | |
| <h2 class="slide-title">Technology Platform</h2> | |
| <p>Our advanced platform makes property transactions seamless:</p> | |
| <div class="slide-grid"> | |
| <div class="slide-item"> | |
| <h3><i class="fas fa-mobile-alt"></i> Mobile-Friendly</h3> | |
| <p>Responsive design works on all devices.</p> | |
| </div> | |
| <div class="slide-item"> | |
| <h3><i class="fas fa-search"></i> Advanced Search</h3> | |
| <p>Filter properties by location, price, and features.</p> | |
| </div> | |
| <div class="slide-item"> | |
| <h3><i class="fas fa-images"></i> Virtual Tours</h3> | |
| <p>360° views and video walkthroughs for remote viewing.</p> | |
| </div> | |
| <div class="slide-item"> | |
| <h3><i class="fas fa-shield-alt"></i> Secure Transactions</h3> | |
| <p>Verified listings and secure payment options.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Slide 7: Success Metrics --> | |
| <div class="slide"> | |
| <div class="slide-content"> | |
| <h2 class="slide-title">Our Success</h2> | |
| <p>Key metrics that demonstrate our market leadership:</p> | |
| <div class="slide-grid"> | |
| <div class="slide-item"> | |
| <h3><i class="fas fa-chart-pie"></i> 50,000+</h3> | |
| <p>Active property listings across Pakistan</p> | |
| </div> | |
| <div class="slide-item"> | |
| <h3><i class="fas fa-users"></i> 10,000+</h3> | |
| <p>Satisfied customers served</p> | |
| </div> | |
| <div class="slide-item"> | |
| <h3><i class="fas fa-map-marked-alt"></i> 25+</h3> | |
| <p>Cities covered nationwide</p> | |
| </div> | |
| <div class="slide-item"> | |
| <h3><i class="fas fa-certificate"></i> 100+</h3> | |
| <p>Verified real estate partners</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Slide 8: Contact --> | |
| <div class="slide"> | |
| <div class="slide-content"> | |
| <h2 class="slide-title">Get Started Today</h2> | |
| <p style="text-align: center; margin-bottom: 3rem;">Join thousands of satisfied customers finding their dream properties.</p> | |
| <div class="slide-grid" style="grid-template-columns: 1fr;"> | |
| <div class="slide-item"> | |
| <h3 style="text-align: center;"><i class="fas fa-envelope"></i> Contact Us</h3> | |
| <p style="text-align: center;">Email: info@pakistanproperty.com</p> | |
| <p style="text-align: center;">Phone: +92 300 1234567</p> | |
| <p style="text-align: center;">Website: www.pakistanproperty.com</p> | |
| </div> | |
| </div> | |
| <div style="text-align: center; margin-top: 2rem;"> | |
| <img src="https://static.photos/technology/640x360/1" alt="Contact Us" style="max-width: 100%; border-radius: 8px;"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="navigation"> | |
| <button class="nav-btn" id="prev-btn"><i class="fas fa-arrow-left"></i></button> | |
| <button class="nav-btn" id="next-btn"><i class="fas fa-arrow-right"></i></button> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const slides = document.querySelectorAll('.slide'); | |
| const prevBtn = document.getElementById('prev-btn'); | |
| const nextBtn = document.getElementById('next-btn'); | |
| const progressBar = document.querySelector('.progress-bar'); | |
| const slideNumber = document.querySelector('.slide-number'); | |
| let currentSlide = 0; | |
| function updateSlide() { | |
| slides.forEach((slide, index) => { | |
| if (index === currentSlide) { | |
| slide.classList.add('active'); | |
| } else { | |
| slide.classList.remove('active'); | |
| } | |
| }); | |
| progressBar.style.width = `${(currentSlide + 1) / slides.length * 100}%`; | |
| slideNumber.textContent = `${currentSlide + 1}/${slides.length}`; | |
| } | |
| function nextSlide() { | |
| if (currentSlide < slides.length - 1) { | |
| currentSlide++; | |
| updateSlide(); | |
| } | |
| } | |
| function prevSlide() { | |
| if (currentSlide > 0) { | |
| currentSlide--; | |
| updateSlide(); | |
| } | |
| } | |
| nextBtn.addEventListener('click', nextSlide); | |
| prevBtn.addEventListener('click', prevSlide); | |
| // Keyboard navigation | |
| document.addEventListener('keydown', function(e) { | |
| if (e.key === 'ArrowRight') nextSlide(); | |
| if (e.key === 'ArrowLeft') prevSlide(); | |
| }); | |
| // Initialize | |
| updateSlide(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |