|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>MUHAMMAD SAFO STUDIO - Professional Photography</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
scroll-behavior: smooth; |
|
|
background-color: #0f172a; |
|
|
color: #f8fafc; |
|
|
} |
|
|
|
|
|
.hero-section { |
|
|
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); |
|
|
height: 100vh; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.camera-container { |
|
|
position: absolute; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.camera { |
|
|
width: 400px; |
|
|
height: 300px; |
|
|
background: #111827; |
|
|
border-radius: 20px; |
|
|
position: relative; |
|
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); |
|
|
transform-style: preserve-3d; |
|
|
animation: float 6s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
.camera:before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 100%; |
|
|
height: 30px; |
|
|
background: #1f2937; |
|
|
bottom: -15px; |
|
|
left: 0; |
|
|
border-radius: 10px; |
|
|
transform: rotateX(60deg); |
|
|
filter: blur(15px); |
|
|
opacity: 0.5; |
|
|
} |
|
|
|
|
|
.lens { |
|
|
position: absolute; |
|
|
width: 120px; |
|
|
height: 120px; |
|
|
background: linear-gradient(135deg, #334155, #1e293b); |
|
|
border-radius: 50%; |
|
|
top: 60px; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
border: 10px solid #0f172a; |
|
|
box-shadow: 0 0 0 10px #1e293b; |
|
|
} |
|
|
|
|
|
.lens-inner { |
|
|
position: absolute; |
|
|
width: 80px; |
|
|
height: 80px; |
|
|
background: linear-gradient(135deg, #0f172a, #1e293b); |
|
|
border-radius: 50%; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
transform: translate(-50%, -50%); |
|
|
border: 5px solid #334155; |
|
|
} |
|
|
|
|
|
.lens-reflect { |
|
|
position: absolute; |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
background: rgba(255, 255, 255, 0.2); |
|
|
border-radius: 50%; |
|
|
top: 20px; |
|
|
right: 20px; |
|
|
} |
|
|
|
|
|
.brand { |
|
|
position: absolute; |
|
|
bottom: 30px; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
color: #f8fafc; |
|
|
font-size: 24px; |
|
|
font-weight: bold; |
|
|
letter-spacing: 2px; |
|
|
} |
|
|
|
|
|
.shutter { |
|
|
position: absolute; |
|
|
width: 60px; |
|
|
height: 60px; |
|
|
background: #1e293b; |
|
|
border-radius: 50%; |
|
|
top: 180px; |
|
|
right: 50px; |
|
|
border: 5px solid #334155; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.shutter:hover { |
|
|
background: #334155; |
|
|
transform: scale(1.05); |
|
|
} |
|
|
|
|
|
@keyframes float { |
|
|
0% { transform: translateY(0px) rotateY(0deg); } |
|
|
50% { transform: translateY(-20px) rotateY(5deg); } |
|
|
100% { transform: translateY(0px) rotateY(0deg); } |
|
|
} |
|
|
|
|
|
.floating-text { |
|
|
position: absolute; |
|
|
font-size: 5rem; |
|
|
font-weight: 800; |
|
|
color: rgba(255, 255, 255, 0.05); |
|
|
white-space: nowrap; |
|
|
animation: floatText 30s linear infinite; |
|
|
} |
|
|
|
|
|
@keyframes floatText { |
|
|
0% { transform: translateX(0); } |
|
|
100% { transform: translateX(-50%); } |
|
|
} |
|
|
|
|
|
.section-title { |
|
|
position: relative; |
|
|
display: inline-block; |
|
|
margin-bottom: 3rem; |
|
|
} |
|
|
|
|
|
.section-title:after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 50%; |
|
|
height: 3px; |
|
|
background: #3b82f6; |
|
|
bottom: -10px; |
|
|
left: 25%; |
|
|
border-radius: 3px; |
|
|
} |
|
|
|
|
|
.gallery-item { |
|
|
transition: all 0.3s ease; |
|
|
overflow: hidden; |
|
|
border-radius: 10px; |
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3); |
|
|
} |
|
|
|
|
|
.gallery-item:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3); |
|
|
} |
|
|
|
|
|
.gallery-item img { |
|
|
transition: all 0.5s ease; |
|
|
} |
|
|
|
|
|
.gallery-item:hover img { |
|
|
transform: scale(1.05); |
|
|
} |
|
|
|
|
|
.social-icon { |
|
|
width: 50px; |
|
|
height: 50px; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
border-radius: 50%; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.social-icon:hover { |
|
|
transform: translateY(-5px); |
|
|
} |
|
|
|
|
|
.nav-link { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.nav-link:after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
background: #3b82f6; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-link:hover:after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.floating-btn { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); } |
|
|
70% { box-shadow: 0 0 0 15px rgba(59, 130, 246, 0); } |
|
|
100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<nav class="fixed w-full bg-gray-900 bg-opacity-90 backdrop-blur-md z-50 shadow-lg"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex items-center justify-between h-20"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0"> |
|
|
<span class="text-2xl font-bold text-blue-400">MUHAMMAD SAFO STUDIO</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden md:block"> |
|
|
<div class="ml-10 flex items-baseline space-x-8"> |
|
|
<a href="#home" class="nav-link text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">Home</a> |
|
|
<a href="#services" class="nav-link text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">Services</a> |
|
|
<a href="#gallery" class="nav-link text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">Gallery</a> |
|
|
<a href="#contact" class="nav-link text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:hidden"> |
|
|
<button class="mobile-menu-button p-2 rounded-md text-gray-400 hover:text-white focus:outline-none"> |
|
|
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mobile-menu hidden md:hidden bg-gray-800"> |
|
|
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> |
|
|
<a href="#home" class="block px-3 py-2 text-base font-medium text-white">Home</a> |
|
|
<a href="#services" class="block px-3 py-2 text-base font-medium text-gray-300 hover:text-white">Services</a> |
|
|
<a href="#gallery" class="block px-3 py-2 text-base font-medium text-gray-300 hover:text-white">Gallery</a> |
|
|
<a href="#contact" class="block px-3 py-2 text-base font-medium text-gray-300 hover:text-white">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section id="home" class="hero-section flex items-center justify-center"> |
|
|
<div class="floating-text">MUHAMMAD SAFO STUDIO • PROFESSIONAL PHOTOGRAPHY • CAPTURING MOMENTS •</div> |
|
|
<div class="camera-container"> |
|
|
<div class="camera"> |
|
|
<div class="lens"> |
|
|
<div class="lens-inner"> |
|
|
<div class="lens-reflect"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="shutter"></div> |
|
|
<div class="brand">SONY α7 III</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="absolute bottom-20 left-0 right-0 text-center"> |
|
|
<h1 class="text-5xl md:text-7xl font-bold mb-4 text-white">MUHAMMAD SAFO STUDIO</h1> |
|
|
<p class="text-xl md:text-2xl text-gray-300 mb-8 max-w-2xl mx-auto">Capturing your precious moments with professional photography services</p> |
|
|
<a href="#contact" class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105 floating-btn"> |
|
|
Book Your Session |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="absolute bottom-10 left-0 right-0 flex justify-center"> |
|
|
<a href="#services" class="text-white animate-bounce"> |
|
|
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path> |
|
|
</svg> |
|
|
</a> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="services" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="section-title text-4xl font-bold text-white">Our Services</h2> |
|
|
<p class="text-xl text-gray-300 mt-4 max-w-3xl mx-auto">We offer professional photography services for all your special occasions</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10"> |
|
|
|
|
|
<div class="bg-gray-800 rounded-xl overflow-hidden transition-all duration-300 hover:shadow-xl hover:shadow-blue-500/20"> |
|
|
<div class="h-48 bg-gradient-to-r from-pink-500 to-purple-600 flex items-center justify-center"> |
|
|
<i class="fas fa-crown text-white text-6xl"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-2xl font-bold text-white mb-3">Girls' Parties</h3> |
|
|
<p class="text-gray-300 mb-4">Capture the joy and excitement of your special celebrations with our professional photography services tailored for girls' parties.</p> |
|
|
<ul class="text-gray-300 space-y-2"> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-blue-400 mr-2"></i> Candid moments</li> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-blue-400 mr-2"></i> Group photos</li> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-blue-400 mr-2"></i> Themed decorations</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl overflow-hidden transition-all duration-300 hover:shadow-xl hover:shadow-blue-500/20"> |
|
|
<div class="h-48 bg-gradient-to-r from-yellow-500 to-red-500 flex items-center justify-center"> |
|
|
<i class="fas fa-birthday-cake text-white text-6xl"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-2xl font-bold text-white mb-3">Birthdays</h3> |
|
|
<p class="text-gray-300 mb-4">Make your birthday celebrations unforgettable with our professional photography that captures every smile and surprise.</p> |
|
|
<ul class="text-gray-300 space-y-2"> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-blue-400 mr-2"></i> Cake cutting ceremony</li> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-blue-400 mr-2"></i> Guest interactions</li> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-blue-400 mr-2"></i> Decoration highlights</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl overflow-hidden transition-all duration-300 hover:shadow-xl hover:shadow-blue-500/20"> |
|
|
<div class="h-48 bg-gradient-to-r from-rose-500 to-amber-500 flex items-center justify-center"> |
|
|
<i class="fas fa-ring text-white text-6xl"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-2xl font-bold text-white mb-3">Wedding Days</h3> |
|
|
<p class="text-gray-300 mb-4">Capture the magic of your special day with our professional wedding photography services that preserve your precious memories.</p> |
|
|
<ul class="text-gray-300 space-y-2"> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-blue-400 mr-2"></i> Ceremony coverage</li> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-blue-400 mr-2"></i> Bride & groom portraits</li> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-blue-400 mr-2"></i> Reception highlights</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl overflow-hidden transition-all duration-300 hover:shadow-xl hover:shadow-blue-500/20"> |
|
|
<div class="h-48 bg-gradient-to-r from-green-500 to-teal-500 flex items-center justify-center"> |
|
|
<i class="fas fa-camera-retro text-white text-6xl"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-2xl font-bold text-white mb-3">Portrait Photography</h3> |
|
|
<p class="text-gray-300 mb-4">Professional portrait sessions that highlight your personality and beauty in stunning images.</p> |
|
|
<ul class="text-gray-300 space-y-2"> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-blue-400 mr-2"></i> Studio setup</li> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-blue-400 mr-2"></i> Outdoor locations</li> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-blue-400 mr-2"></i> Professional lighting</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 rounded-xl overflow-hidden transition-all duration-300 hover:shadow-xl hover:shadow-blue-500/20"> |
|
|
<div class="h-48 bg-gradient-to-r from-indigo-500 to-blue-500 flex items-center justify-center"> |
|
|
<i class="fas fa-video text-white text-6xl"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-2xl font-bold text-white mb-3">Video Services</h3> |
|
|
<p class="text-gray-300 mb-4">Capture your events in motion with our professional videography services for a complete memory package.</p> |
|
|
<ul class="text-gray-300 space-y-2"> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-blue-400 mr-2"></i> Event coverage</li> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-blue-400 mr-2"></i> Highlight reels</li> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-blue-400 mr-2"></i> Professional editing</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 rounded-xl overflow-hidden transition-all duration-300 hover:shadow-xl hover:shadow-blue-500/20"> |
|
|
<div class="h-48 bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center"> |
|
|
<i class="fas fa-magic text-white text-6xl"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-2xl font-bold text-white mb-3">Photo Editing</h3> |
|
|
<p class="text-gray-300 mb-4">Professional photo editing services to enhance your images and make them truly stand out.</p> |
|
|
<ul class="text-gray-300 space-y-2"> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-blue-400 mr-2"></i> Color correction</li> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-blue-400 mr-2"></i> Retouching</li> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-blue-400 mr-2"></i> Creative effects</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="gallery" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-gray-900"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="section-title text-4xl font-bold text-white">Our Gallery</h2> |
|
|
<p class="text-xl text-gray-300 mt-4 max-w-3xl mx-auto">A glimpse of our recent work and captured moments</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="gallery-item"> |
|
|
<img src="https://images.unsplash.com/photo-1529630796983-28e347a5f7c0?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Birthday party" class="w-full h-64 object-cover"> |
|
|
<div class="bg-gray-800 p-4"> |
|
|
<h3 class="text-xl font-semibold text-white">Birthday Celebration</h3> |
|
|
<p class="text-gray-300">Capturing the joy of a special day</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="gallery-item"> |
|
|
<img src="https://images.unsplash.com/photo-1519671488599-4f228e582a58?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Girls party" class="w-full h-64 object-cover"> |
|
|
<div class="bg-gray-800 p-4"> |
|
|
<h3 class="text-xl font-semibold text-white">Girls' Night Out</h3> |
|
|
<p class="text-gray-300">Friendship and fun captured perfectly</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="gallery-item"> |
|
|
<img src="https://images.unsplash.com/photo-1583939003579-730e3918a45a?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Wedding" class="w-full h-64 object-cover"> |
|
|
<div class="bg-gray-800 p-4"> |
|
|
<h3 class="text-xl font-semibold text-white">Wedding Day</h3> |
|
|
<p class="text-gray-300">The magical moments of a new beginning</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="gallery-item"> |
|
|
<img src="https://images.unsplash.com/photo-1492684223066-81342ee5ff30?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Portrait" class="w-full h-64 object-cover"> |
|
|
<div class="bg-gray-800 p-4"> |
|
|
<h3 class="text-xl font-semibold text-white">Portrait Session</h3> |
|
|
<p class="text-gray-300">Professional portraits that tell a story</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="gallery-item"> |
|
|
<img src="https://images.unsplash.com/photo-1513151233558-d860c5398176?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Event" class="w-full h-64 object-cover"> |
|
|
<div class="bg-gray-800 p-4"> |
|
|
<h3 class="text-xl font-semibold text-white">Special Event</h3> |
|
|
<p class="text-gray-300">Capturing the essence of your occasion</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="gallery-item"> |
|
|
<img src="https://images.unsplash.com/photo-1496345875659-11f7dd282d1d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Family" class="w-full h-64 object-cover"> |
|
|
<div class="bg-gray-800 p-4"> |
|
|
<h3 class="text-xl font-semibold text-white">Family Gathering</h3> |
|
|
<p class="text-gray-300">Precious moments with loved ones</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-12"> |
|
|
<a href="#" class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105"> |
|
|
View Full Gallery |
|
|
</a> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="section-title text-4xl font-bold text-white">Contact Us</h2> |
|
|
<p class="text-xl text-gray-300 mt-4 max-w-3xl mx-auto">Get in touch to book your session or ask any questions</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12"> |
|
|
<div class="bg-gray-800 rounded-xl p-8 shadow-xl"> |
|
|
<h3 class="text-2xl font-bold text-white mb-6">Send Us a Message</h3> |
|
|
<form class="space-y-6"> |
|
|
<div> |
|
|
<label for="name" class="block text-sm font-medium text-gray-300 mb-1">Your Name</label> |
|
|
<input type="text" id="name" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:ring-blue-500 focus:border-blue-500 text-white placeholder-gray-400" placeholder="Enter your name"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="email" class="block text-sm font-medium text-gray-300 mb-1">Email Address</label> |
|
|
<input type="email" id="email" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:ring-blue-500 focus:border-blue-500 text-white placeholder-gray-400" placeholder="Enter your email"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="phone" class="block text-sm font-medium text-gray-300 mb-1">Phone Number</label> |
|
|
<input type="tel" id="phone" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:ring-blue-500 focus:border-blue-500 text-white placeholder-gray-400" placeholder="Enter your phone number"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="service" class="block text-sm font-medium text-gray-300 mb-1">Service Interested In</label> |
|
|
<select id="service" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:ring-blue-500 focus:border-blue-500 text-white"> |
|
|
<option value="">Select a service</option> |
|
|
<option value="girls-party">Girls' Party</option> |
|
|
<option value="birthday">Birthday</option> |
|
|
<option value="wedding">Wedding</option> |
|
|
<option value="portrait">Portrait Photography</option> |
|
|
<option value="video">Video Services</option> |
|
|
<option value="editing">Photo Editing</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label for="message" class="block text-sm font-medium text-gray-300 mb-1">Your Message</label> |
|
|
<textarea id="message" rows="4" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:ring-blue-500 focus:border-blue-500 text-white placeholder-gray-400" placeholder="Tell us about your event..."></textarea> |
|
|
</div> |
|
|
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300 transform hover:scale-105"> |
|
|
Send Message |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-8"> |
|
|
<div class="bg-gray-800 rounded-xl p-8 shadow-xl"> |
|
|
<h3 class="text-2xl font-bold text-white mb-6">Contact Information</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-blue-500 rounded-lg p-3"> |
|
|
<i class="fas fa-map-marker-alt text-white text-xl"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="text-lg font-semibold text-white">Studio Location</h4> |
|
|
<p class="text-gray-300">123 Photography Street, City Center</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-blue-500 rounded-lg p-3"> |
|
|
<i class="fas fa-phone-alt text-white text-xl"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="text-lg font-semibold text-white">Phone Number</h4> |
|
|
<p class="text-gray-300">+123 456 7890</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-blue-500 rounded-lg p-3"> |
|
|
<i class="fas fa-envelope text-white text-xl"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="text-lg font-semibold text-white">Email Address</h4> |
|
|
<p class="text-gray-300">[email protected]</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-blue-500 rounded-lg p-3"> |
|
|
<i class="fas fa-clock text-white text-xl"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="text-lg font-semibold text-white">Working Hours</h4> |
|
|
<p class="text-gray-300">Monday - Saturday: 9AM - 8PM</p> |
|
|
<p class="text-gray-300">Sunday: By appointment only</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-8 shadow-xl"> |
|
|
<h3 class="text-2xl font-bold text-white mb-6">Connect With Us</h3> |
|
|
<p class="text-gray-300 mb-6">Follow us on social media to see more of our work and stay updated with our latest offers.</p> |
|
|
|
|
|
<div class="flex justify-center space-x-6"> |
|
|
<a href="https://t.me/yourtelegram" target="_blank" class="social-icon bg-blue-500 hover:bg-blue-600"> |
|
|
<i class="fab fa-telegram text-white text-2xl"></i> |
|
|
</a> |
|
|
<a href="https://instagram.com/yourinstagram" target="_blank" class="social-icon bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600"> |
|
|
<i class="fab fa-instagram text-white text-2xl"></i> |
|
|
</a> |
|
|
<a href="https://youtube.com/youryoutube" target="_blank" class="social-icon bg-red-600 hover:bg-red-700"> |
|
|
<i class="fab fa-youtube text-white text-2xl"></i> |
|
|
</a> |
|
|
<a href="https://facebook.com/yourfacebook" target="_blank" class="social-icon bg-blue-600 hover:bg-blue-700"> |
|
|
<i class="fab fa-facebook-f text-white text-2xl"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 py-12 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="mb-6 md:mb-0"> |
|
|
<span class="text-2xl font-bold text-blue-400">MUHAMMAD SAFO STUDIO</span> |
|
|
<p class="text-gray-400 mt-2">Capturing your precious moments with professional photography</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-2 gap-8 sm:grid-cols-3"> |
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase mb-4">Services</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Girls' Parties</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Birthdays</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Weddings</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase mb-4">Company</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#home" class="text-gray-400 hover:text-white">Home</a></li> |
|
|
<li><a href="#services" class="text-gray-400 hover:text-white">Services</a></li> |
|
|
<li><a href="#gallery" class="text-gray-400 hover:text-white">Gallery</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase mb-4">Legal</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Cookie Policy</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center"> |
|
|
<p class="text-gray-400 text-sm">© 2023 Muhammad Safo Studio. All rights reserved.</p> |
|
|
<div class="mt-4 md:mt-0 flex space-x-6"> |
|
|
<a href="https://t.me/yourtelegram" target="_blank" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-telegram text-xl"></i> |
|
|
</a> |
|
|
<a href="https://instagram.com/yourinstagram" target="_blank" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-instagram text-xl"></i> |
|
|
</a> |
|
|
<a href="https://youtube.com/youryoutube" target="_blank" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-youtube text-xl"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
const mobileMenuButton = document.querySelector('.mobile-menu-button'); |
|
|
const mobileMenu = document.querySelector('.mobile-menu'); |
|
|
|
|
|
mobileMenuButton.addEventListener('click', () => { |
|
|
mobileMenu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
|
|
|
mobileMenu.classList.add('hidden'); |
|
|
|
|
|
document.querySelector(this.getAttribute('href')).scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const shutter = document.querySelector('.shutter'); |
|
|
if (shutter) { |
|
|
shutter.addEventListener('click', () => { |
|
|
|
|
|
const flash = document.createElement('div'); |
|
|
flash.style.position = 'fixed'; |
|
|
flash.style.top = '0'; |
|
|
flash.style.left = '0'; |
|
|
flash.style.width = '100%'; |
|
|
flash.style.height = '100%'; |
|
|
flash.style.backgroundColor = 'white'; |
|
|
flash.style.opacity = '0.8'; |
|
|
flash.style.zIndex = '1000'; |
|
|
flash.style.transition = 'opacity 0.5s'; |
|
|
document.body.appendChild(flash); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
flash.style.opacity = '0'; |
|
|
setTimeout(() => { |
|
|
document.body.removeChild(flash); |
|
|
}, 500); |
|
|
}, 100); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
const floatingText = document.querySelector('.floating-text'); |
|
|
if (floatingText) { |
|
|
|
|
|
const clone = floatingText.cloneNode(true); |
|
|
clone.style.left = '100%'; |
|
|
floatingText.parentNode.appendChild(clone); |
|
|
} |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Meszod/muhammads" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
