malik-AI commited on
Commit
3989299
·
verified ·
1 Parent(s): 6b54017

make a ppt of on this topic name Pakistan Property things

Browse files
Files changed (1) hide show
  1. presentation.html +367 -0
presentation.html ADDED
@@ -0,0 +1,367 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Pakistan Property - Presentation</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ /* Presentation-specific styles */
11
+ .presentation {
12
+ width: 100%;
13
+ height: 100vh;
14
+ overflow: hidden;
15
+ position: relative;
16
+ }
17
+
18
+ .slide {
19
+ width: 100%;
20
+ height: 100%;
21
+ position: absolute;
22
+ top: 0;
23
+ left: 0;
24
+ opacity: 0;
25
+ transition: opacity 0.5s ease;
26
+ padding: 2rem;
27
+ background-color: white;
28
+ display: flex;
29
+ flex-direction: column;
30
+ justify-content: center;
31
+ }
32
+
33
+ .slide.active {
34
+ opacity: 1;
35
+ z-index: 1;
36
+ }
37
+
38
+ .slide-title {
39
+ font-size: 3rem;
40
+ color: #e74c3c;
41
+ margin-bottom: 2rem;
42
+ text-align: center;
43
+ }
44
+
45
+ .slide-content {
46
+ font-size: 1.5rem;
47
+ line-height: 1.6;
48
+ max-width: 900px;
49
+ margin: 0 auto;
50
+ }
51
+
52
+ .slide-grid {
53
+ display: grid;
54
+ grid-template-columns: repeat(2, 1fr);
55
+ gap: 2rem;
56
+ margin-top: 2rem;
57
+ }
58
+
59
+ .slide-item {
60
+ background-color: #f8f9fa;
61
+ padding: 1.5rem;
62
+ border-radius: 8px;
63
+ box-shadow: 0 2px 8px rgba(0,0,0,0.1);
64
+ }
65
+
66
+ .slide-item h3 {
67
+ color: #2c3e50;
68
+ margin-bottom: 1rem;
69
+ }
70
+
71
+ .navigation {
72
+ position: fixed;
73
+ bottom: 2rem;
74
+ right: 2rem;
75
+ z-index: 100;
76
+ display: flex;
77
+ gap: 1rem;
78
+ }
79
+
80
+ .nav-btn {
81
+ width: 50px;
82
+ height: 50px;
83
+ border-radius: 50%;
84
+ background-color: #e74c3c;
85
+ color: white;
86
+ display: flex;
87
+ align-items: center;
88
+ justify-content: center;
89
+ cursor: pointer;
90
+ font-size: 1.2rem;
91
+ border: none;
92
+ transition: background-color 0.3s;
93
+ }
94
+
95
+ .nav-btn:hover {
96
+ background-color: #c0392b;
97
+ }
98
+
99
+ .progress-bar {
100
+ position: fixed;
101
+ top: 0;
102
+ left: 0;
103
+ width: 0%;
104
+ height: 5px;
105
+ background-color: #e74c3c;
106
+ z-index: 100;
107
+ }
108
+
109
+ .slide-number {
110
+ position: fixed;
111
+ bottom: 2rem;
112
+ left: 2rem;
113
+ z-index: 100;
114
+ color: #2c3e50;
115
+ font-weight: bold;
116
+ }
117
+ </style>
118
+ </head>
119
+ <body>
120
+ <div class="progress-bar"></div>
121
+ <div class="slide-number">1/8</div>
122
+
123
+ <div class="presentation">
124
+ <!-- Slide 1: Title -->
125
+ <div class="slide active">
126
+ <div class="slide-content">
127
+ <h1 class="slide-title">Pakistan Property</h1>
128
+ <p style="text-align: center; font-size: 1.8rem; margin-bottom: 3rem;">Your Gateway to Real Estate in Pakistan</p>
129
+ <div style="text-align: center;">
130
+ <img src="https://static.photos/cityscape/640x360/1" alt="Pakistan City" style="max-width: 100%; border-radius: 8px;">
131
+ </div>
132
+ </div>
133
+ </div>
134
+
135
+ <!-- Slide 2: About -->
136
+ <div class="slide">
137
+ <div class="slide-content">
138
+ <h2 class="slide-title">About Pakistan Property</h2>
139
+ <p>Pakistan Property is the premier real estate platform connecting buyers, sellers, and renters across Pakistan's major cities.</p>
140
+
141
+ <div class="slide-grid">
142
+ <div class="slide-item">
143
+ <h3><i class="fas fa-bullseye"></i> Our Mission</h3>
144
+ <p>To simplify property transactions and provide transparent, reliable real estate services nationwide.</p>
145
+ </div>
146
+ <div class="slide-item">
147
+ <h3><i class="fas fa-chart-line"></i> Market Position</h3>
148
+ <p>Over 50,000 active listings and 10,000+ satisfied customers since our launch.</p>
149
+ </div>
150
+ </div>
151
+ </div>
152
+ </div>
153
+
154
+ <!-- Slide 3: Services -->
155
+ <div class="slide">
156
+ <div class="slide-content">
157
+ <h2 class="slide-title">Our Services</h2>
158
+ <p>Comprehensive real estate solutions tailored to your needs:</p>
159
+
160
+ <div class="slide-grid">
161
+ <div class="slide-item">
162
+ <h3><i class="fas fa-home"></i> Residential Properties</h3>
163
+ <p>Houses, apartments, and plots in prime locations across Pakistan.</p>
164
+ </div>
165
+ <div class="slide-item">
166
+ <h3><i class="fas fa-building"></i> Commercial Properties</h3>
167
+ <p>Shops, offices, and commercial plots in business districts.</p>
168
+ </div>
169
+ <div class="slide-item">
170
+ <h3><i class="fas fa-handshake"></i> Rental Solutions</h3>
171
+ <p>Short-term and long-term rental options with verified landlords.</p>
172
+ </div>
173
+ <div class="slide-item">
174
+ <h3><i class="fas fa-user-tie"></i> Agent Services</h3>
175
+ <p>Connect with licensed real estate professionals.</p>
176
+ </div>
177
+ </div>
178
+ </div>
179
+ </div>
180
+
181
+ <!-- Slide 4: Property Types -->
182
+ <div class="slide">
183
+ <div class="slide-content">
184
+ <h2 class="slide-title">Property Types</h2>
185
+ <p>We cater to all real estate needs across Pakistan:</p>
186
+
187
+ <div class="slide-grid">
188
+ <div class="slide-item">
189
+ <h3><i class="fas fa-home"></i> Houses</h3>
190
+ <p>From luxury villas to affordable homes in all major cities.</p>
191
+ </div>
192
+ <div class="slide-item">
193
+ <h3><i class="fas fa-building"></i> Apartments</h3>
194
+ <p>Modern apartments with amenities in secure complexes.</p>
195
+ </div>
196
+ <div class="slide-item">
197
+ <h3><i class="fas fa-vector-square"></i> Plots</h3>
198
+ <p>Residential and commercial plots in developing areas.</p>
199
+ </div>
200
+ <div class="slide-item">
201
+ <h3><i class="fas fa-store"></i> Commercial</h3>
202
+ <p>Shops, offices, and warehouses in prime locations.</p>
203
+ </div>
204
+ </div>
205
+ </div>
206
+ </div>
207
+
208
+ <!-- Slide 5: Market Coverage -->
209
+ <div class="slide">
210
+ <div class="slide-content">
211
+ <h2 class="slide-title">Market Coverage</h2>
212
+ <p>We operate in all major cities across Pakistan:</p>
213
+
214
+ <div class="slide-grid">
215
+ <div class="slide-item">
216
+ <h3><i class="fas fa-city"></i> Karachi</h3>
217
+ <p>DHA, Clifton, Gulshan, and other prime areas.</p>
218
+ </div>
219
+ <div class="slide-item">
220
+ <h3><i class="fas fa-mosque"></i> Lahore</h3>
221
+ <p>Bahria Town, DHA, Gulberg, and Model Town.</p>
222
+ </div>
223
+ <div class="slide-item">
224
+ <h3><i class="fas fa-monument"></i> Islamabad</h3>
225
+ <p>Sectors, DHA, Bahria Town, and Margalla Hills.</p>
226
+ </div>
227
+ <div class="slide-item">
228
+ <h3><i class="fas fa-mountain"></i> Other Cities</h3>
229
+ <p>Rawalpindi, Peshawar, Multan, and Faisalabad.</p>
230
+ </div>
231
+ </div>
232
+ </div>
233
+ </div>
234
+
235
+ <!-- Slide 6: Technology -->
236
+ <div class="slide">
237
+ <div class="slide-content">
238
+ <h2 class="slide-title">Technology Platform</h2>
239
+ <p>Our advanced platform makes property transactions seamless:</p>
240
+
241
+ <div class="slide-grid">
242
+ <div class="slide-item">
243
+ <h3><i class="fas fa-mobile-alt"></i> Mobile-Friendly</h3>
244
+ <p>Responsive design works on all devices.</p>
245
+ </div>
246
+ <div class="slide-item">
247
+ <h3><i class="fas fa-search"></i> Advanced Search</h3>
248
+ <p>Filter properties by location, price, and features.</p>
249
+ </div>
250
+ <div class="slide-item">
251
+ <h3><i class="fas fa-images"></i> Virtual Tours</h3>
252
+ <p>360° views and video walkthroughs for remote viewing.</p>
253
+ </div>
254
+ <div class="slide-item">
255
+ <h3><i class="fas fa-shield-alt"></i> Secure Transactions</h3>
256
+ <p>Verified listings and secure payment options.</p>
257
+ </div>
258
+ </div>
259
+ </div>
260
+ </div>
261
+
262
+ <!-- Slide 7: Success Metrics -->
263
+ <div class="slide">
264
+ <div class="slide-content">
265
+ <h2 class="slide-title">Our Success</h2>
266
+ <p>Key metrics that demonstrate our market leadership:</p>
267
+
268
+ <div class="slide-grid">
269
+ <div class="slide-item">
270
+ <h3><i class="fas fa-chart-pie"></i> 50,000+</h3>
271
+ <p>Active property listings across Pakistan</p>
272
+ </div>
273
+ <div class="slide-item">
274
+ <h3><i class="fas fa-users"></i> 10,000+</h3>
275
+ <p>Satisfied customers served</p>
276
+ </div>
277
+ <div class="slide-item">
278
+ <h3><i class="fas fa-map-marked-alt"></i> 25+</h3>
279
+ <p>Cities covered nationwide</p>
280
+ </div>
281
+ <div class="slide-item">
282
+ <h3><i class="fas fa-certificate"></i> 100+</h3>
283
+ <p>Verified real estate partners</p>
284
+ </div>
285
+ </div>
286
+ </div>
287
+ </div>
288
+
289
+ <!-- Slide 8: Contact -->
290
+ <div class="slide">
291
+ <div class="slide-content">
292
+ <h2 class="slide-title">Get Started Today</h2>
293
+ <p style="text-align: center; margin-bottom: 3rem;">Join thousands of satisfied customers finding their dream properties.</p>
294
+
295
+ <div class="slide-grid" style="grid-template-columns: 1fr;">
296
+ <div class="slide-item">
297
+ <h3 style="text-align: center;"><i class="fas fa-envelope"></i> Contact Us</h3>
298
+ <p style="text-align: center;">Email: info@pakistanproperty.com</p>
299
+ <p style="text-align: center;">Phone: +92 300 1234567</p>
300
+ <p style="text-align: center;">Website: www.pakistanproperty.com</p>
301
+ </div>
302
+ </div>
303
+
304
+ <div style="text-align: center; margin-top: 2rem;">
305
+ <img src="https://static.photos/technology/640x360/1" alt="Contact Us" style="max-width: 100%; border-radius: 8px;">
306
+ </div>
307
+ </div>
308
+ </div>
309
+ </div>
310
+
311
+ <div class="navigation">
312
+ <button class="nav-btn" id="prev-btn"><i class="fas fa-arrow-left"></i></button>
313
+ <button class="nav-btn" id="next-btn"><i class="fas fa-arrow-right"></i></button>
314
+ </div>
315
+
316
+ <script>
317
+ document.addEventListener('DOMContentLoaded', function() {
318
+ const slides = document.querySelectorAll('.slide');
319
+ const prevBtn = document.getElementById('prev-btn');
320
+ const nextBtn = document.getElementById('next-btn');
321
+ const progressBar = document.querySelector('.progress-bar');
322
+ const slideNumber = document.querySelector('.slide-number');
323
+
324
+ let currentSlide = 0;
325
+
326
+ function updateSlide() {
327
+ slides.forEach((slide, index) => {
328
+ if (index === currentSlide) {
329
+ slide.classList.add('active');
330
+ } else {
331
+ slide.classList.remove('active');
332
+ }
333
+ });
334
+
335
+ progressBar.style.width = `${(currentSlide + 1) / slides.length * 100}%`;
336
+ slideNumber.textContent = `${currentSlide + 1}/${slides.length}`;
337
+ }
338
+
339
+ function nextSlide() {
340
+ if (currentSlide < slides.length - 1) {
341
+ currentSlide++;
342
+ updateSlide();
343
+ }
344
+ }
345
+
346
+ function prevSlide() {
347
+ if (currentSlide > 0) {
348
+ currentSlide--;
349
+ updateSlide();
350
+ }
351
+ }
352
+
353
+ nextBtn.addEventListener('click', nextSlide);
354
+ prevBtn.addEventListener('click', prevSlide);
355
+
356
+ // Keyboard navigation
357
+ document.addEventListener('keydown', function(e) {
358
+ if (e.key === 'ArrowRight') nextSlide();
359
+ if (e.key === 'ArrowLeft') prevSlide();
360
+ });
361
+
362
+ // Initialize
363
+ updateSlide();
364
+ });
365
+ </script>
366
+ </body>
367
+ </html>