Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
html_content = """
<!DOCTYPE html>
<html lang="ur" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JABBAL TRAVEL - عمرہ پیکج 21 دن 2026</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
body { font-family: 'Amiri', serif; }
.gold-gradient {
background: linear-gradient(135deg, #f59e0b, #fbbf24, #fcd34d);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.header-bg {
background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://picsum.photos/id/1015/1920/600');
background-size: cover;
background-position: center;
}
</style>
</head>
<body class="bg-[#f8f1e3] text-gray-800">
<!-- Header -->
<div class="header-bg text-white py-12 relative">
<div class="max-w-6xl mx-auto px-6">
<div class="flex flex-col md:flex-row items-center justify-between gap-8">
<!-- Logo -->
<div class="text-center md:text-left">
<div class="inline-flex items-center gap-3 bg-white/95 text-emerald-800 rounded-3xl px-8 py-4 shadow-2xl">
<div class="w-20 h-20 bg-emerald-700 rounded-2xl flex items-center justify-center text-white text-4xl font-bold">🏔️</div>
<div>
<h1 class="text-4xl font-bold tracking-wider">JABBAL TRAVEL</h1>
<p class="text-xl -mt-1">JABBAL UMRAH SERVICES</p>
</div>
</div>
<p class="mt-4 text-2xl font-bold text-amber-300">حج و عمرہ سروسز</p>
</div>
<!-- Dates -->
<div class="flex gap-8 text-center">
<div class="bg-white/90 text-emerald-900 rounded-3xl px-8 py-6 shadow-xl">
<div class="text-sm">روانگی</div>
<div class="text-5xl font-bold text-emerald-700">3</div>
<div class="text-xl">اگست 2026</div> </div>
<div class="bg-white/90 text-emerald-900 rounded-3xl px-8 py-6 shadow-xl relative -top-4">
<div class="text-6xl font-bold gold-gradient">21</div>
<div class="text-3xl font-bold -mt-2">دن</div>
<div class="text-4xl font-bold gold-gradient">عمرہ پیکج</div>
</div>
<div class="bg-white/90 text-emerald-900 rounded-3xl px-8 py-6 shadow-xl">
<div class="text-sm">واپسی</div>
<div class="text-5xl font-bold text-emerald-700">23</div>
<div class="text-xl">اگست 2026</div>
</div>
</div>
</div>
</div>
</div>
<!-- Pricing & Hotels Section -->
<div class="max-w-6xl mx-auto px-6 py-12">
<div class="grid md:grid-cols-2 gap-8">
<!-- Pricing -->
<div class="bg-white rounded-3xl shadow-xl p-8">
<h2 class="text-center text-3xl font-bold mb-8 text-emerald-800">پیکج ریٹس</h2>
<div class="space-y-4">
<div class="flex justify-between items-center bg-emerald-50 hover:bg-emerald-100 p-4 rounded-2xl transition">
<div class="flex items-center gap-4"> 👥 <div> <div class="font-semibold">شیئرنگ روم</div> </div> </div>
<div class="text-2xl font-bold text-red-600">265,000 روپے</div>
</div>
<div class="flex justify-between items-center bg-emerald-50 hover:bg-emerald-100 p-4 rounded-2xl transition">
<div class="flex items-center gap-4"> 🛏️ <div> <div class="font-semibold">4 بیڈ روم</div> </div> </div>
<div class="text-2xl font-bold text-red-600">270,000 روپے</div>
</div>
<div class="flex justify-between items-center bg-emerald-50 hover:bg-emerald-100 p-4 rounded-2xl transition">
<div class="flex items-center gap-4"> 🛏️ <div> <div class="font-semibold">3 بیڈ روم</div> </div> </div>
<div class="text-2xl font-bold text-red-600">285,000 روپے</div>
</div>
<div class="flex justify-between items-center bg-emerald-50 hover:bg-emerald-100 p-4 rounded-2xl transition">
<div class="flex items-center gap-4"> 🛏️ <div> <div class="font-semibold">2 بیڈ روم</div> </div> </div>
<div class="text-2xl font-bold text-red-600">330,000 روپے</div>
</div>
</div>
</div>
<!-- Hotels -->
<div>
<div class="bg-white rounded-3xl shadow-xl p-8 mb-8">
<h3 class="font-bold text-xl mb-4 flex items-center gap-3"> 🕋 مکہ مکرمہ </h3>
<div class="flex gap-4">
<div class="flex-1">
<p class="font-semibold">ہوٹل دیار الرشد</p>
<p class="text-sm text-gray-600">تقریباً 500 میٹر (حرم شریف سے)</p>
</div>
<img src="https://picsum.photos/id/1015/300/180" class="w-32 h-20 object-cover rounded-2xl" alt="Hotel">
</div>
</div>
<div class="bg-white rounded-3xl shadow-xl p-8">
<h3 class="font-bold text-xl mb-4 flex items-center gap-3"> 🕌 مدینہ منورہ </h3>
<div class="flex gap-4">
<div class="flex-1">
<p class="font-semibold">ہوٹل نزل اشراق المدائن</p>
<p class="text-sm text-gray-600">تقریباً 700 میٹر (مسجد نبوی ﷺ سے)</p>
</div>
<img src="https://picsum.photos/id/1016/300/180" class="w-32 h-20 object-cover rounded-2xl" alt="Hotel">
</div>
</div>
</div>
</div>
</div>
<!-- Facilities -->
<div class="bg-emerald-800 text-white py-12">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-center text-3xl font-bold mb-10">پیکج میں شامل سہولیات</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
<div class="bg-emerald-700/50 p-6 rounded-2xl border border-emerald-600">
<div class="text-3xl mb-2">🎫</div>
<p class="font-semibold">عمرہ ویزہ</p>
</div>
<div class="bg-emerald-700/50 p-6 rounded-2xl border border-emerald-600">
<div class="text-3xl mb-2">✈️</div>
<p class="font-semibold">ہوائی ٹکٹ</p>
</div>
<div class="bg-emerald-700/50 p-6 rounded-2xl border border-emerald-600">
<div class="text-3xl mb-2">🚌</div>
<p class="font-semibold">ٹرانسپورٹ</p>
</div>
<div class="bg-emerald-700/50 p-6 rounded-2xl border border-emerald-600">
<div class="text-3xl mb-2">🗺️</div>
<p class="font-semibold">زیارات</p>
</div>
</div>
</div>
</div>
<!-- Booking Form & Contact Section -->
<div class="max-w-4xl mx-auto px-6 py-12">
<div class="bg-white rounded-3xl shadow-xl p-8 border border-amber-200">
<h2 class="text-center text-3xl font-bold mb-2 text-emerald-800">ابھی سیٹ بک کریں</h2>
<p class="text-center text-gray-600 mb-8">نیچے دیا گیا فارم پُر کریں یا براہ راست واٹس ایپ پر رابطہ کریں</p>
<form action="#" method="POST" class="space-y-6" onsubmit="event.preventDefault(); alert('شکریہ! آپ کی درخواست موصول ہو گئی ہے۔ ہم جلد رابطہ کریں گے۔');">
<div class="grid md:grid-cols-2 gap-6">
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">پورا نام</label>
<input type="text" required class="w-full px-4 py-3 rounded-xl border border-gray-300 focus:ring-2 focus:ring-emerald-500 focus:outline-none bg-gray-50">
</div>
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">موبائل / واٹس ایپ نمبر</label>
<input type="tel" required placeholder="03332757326" class="w-full px-4 py-3 rounded-xl border border-gray-300 focus:ring-2 focus:ring-emerald-500 focus:outline-none bg-gray-50 text-left" dir="ltr">
</div>
</div>
<div class="grid md:grid-cols-2 gap-6">
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">افراد کی تعداد</label>
<select class="w-full px-4 py-3 rounded-xl border border-gray-300 focus:ring-2 focus:ring-emerald-500 focus:outline-none bg-gray-50">
<option>1 شخص</option>
<option>2 افراد</option>
<option>3 افراد</option>
<option>4 یا زیادہ</option>
</select>
</div>
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">مطلوبہ روم کی قسم</label>
<select class="w-full px-4 py-3 rounded-xl border border-gray-300 focus:ring-2 focus:ring-emerald-500 focus:outline-none bg-gray-50">
<option>شیئرنگ روم</option>
<option>4 بیڈ روم</option>
<option>3 بیڈ روم</option>
<option>2 بیڈ روم</option>
</select>
</div>
</div>
<button type="submit" class="w-full bg-emerald-700 hover:bg-emerald-800 text-white font-bold py-4 rounded-xl transition text-xl shadow-lg">
درخواست بھیجیں
</button>
</form>
<div class="mt-8 pt-8 border-t border-gray-100 flex flex-col sm:flex-row items-center justify-center gap-6">
<a href="tel:+923332757326" class="flex items-center gap-3 bg-amber-500 hover:bg-amber-600 text-white px-6 py-3 rounded-full font-bold shadow transition w-full sm:w-auto justify-center" dir="ltr">
📞 Call: 0333-2757326
</a>
<a href="https://wa.me/923332757326" target="_blank" class="flex items-center gap-3 bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-full font-bold shadow transition w-full sm:w-auto justify-center">
💬 واٹس ایپ چیٹ کریں
</a>
</div>
</div>
</div>
<div class="bg-emerald-950 text-white py-6 text-center text-sm border-t border-emerald-800">
<p>© 2026 جبلی ٹریولز۔ جملہ حقوق محفوظ ہیں۔</p>
</div>
</body>
</html>
"""
print(f"Code verified successfully. Total length: {len(html_content)} characters.")
Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
14
Requests
6
Domains
638KB
Transfer Size
923KB
Content Size
536.0ms
Dom Content Loaded
180.0ms
First Paint
785.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...