|
<!DOCTYPE html> |
|
<html lang="tr"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>PATSO IN Şanlıurfa | Lezzetin Adresi</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'); |
|
|
|
:root { |
|
--primary: #FF5722; |
|
--secondary: #FFC107; |
|
--accent: #4CAF50; |
|
--dark: #212121; |
|
--light: #F5F5F5; |
|
} |
|
|
|
body { |
|
font-family: 'Poppins', sans-serif; |
|
background-color: #f8f4e9; |
|
color: var(--dark); |
|
scroll-behavior: smooth; |
|
} |
|
|
|
.hero-section { |
|
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1513104890138-7c749659a591?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') no-repeat center center; |
|
background-size: cover; |
|
height: 100vh; |
|
min-height: 600px; |
|
} |
|
|
|
.menu-item { |
|
transition: all 0.3s ease; |
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
border-left: 4px solid var(--primary); |
|
} |
|
|
|
.menu-item:hover { |
|
transform: translateY(-5px); |
|
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); |
|
border-left: 4px solid var(--secondary); |
|
} |
|
|
|
.category-title { |
|
position: relative; |
|
display: inline-block; |
|
color: white; |
|
} |
|
|
|
.category-title::after { |
|
content: ''; |
|
position: absolute; |
|
width: 50%; |
|
height: 3px; |
|
background-color: var(--secondary); |
|
bottom: -5px; |
|
left: 25%; |
|
border-radius: 3px; |
|
} |
|
|
|
.map-container { |
|
position: relative; |
|
overflow: hidden; |
|
border-radius: 15px; |
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); |
|
} |
|
|
|
.map-marker { |
|
position: absolute; |
|
top: 50%; |
|
left: 50%; |
|
transform: translate(-50%, -100%); |
|
color: var(--primary); |
|
font-size: 2.5rem; |
|
text-shadow: 0 0 10px rgba(0, 0, 0, 0.3); |
|
animation: pulse 2s infinite; |
|
} |
|
|
|
@keyframes pulse { |
|
0% { transform: translate(-50%, -100%) scale(1); } |
|
50% { transform: translate(-50%, -100%) scale(1.1); } |
|
100% { transform: translate(-50%, -100%) scale(1); } |
|
} |
|
|
|
.nav-link { |
|
position: relative; |
|
} |
|
|
|
.nav-link::after { |
|
content: ''; |
|
position: absolute; |
|
width: 0; |
|
height: 2px; |
|
background-color: var(--secondary); |
|
bottom: 0; |
|
left: 0; |
|
transition: width 0.3s ease; |
|
} |
|
|
|
.nav-link:hover::after { |
|
width: 100%; |
|
} |
|
|
|
.active-nav::after { |
|
width: 100%; |
|
} |
|
|
|
.floating-btn { |
|
animation: float 3s ease-in-out infinite; |
|
} |
|
|
|
@keyframes float { |
|
0% { transform: translateY(0px); } |
|
50% { transform: translateY(-10px); } |
|
100% { transform: translateY(0px); } |
|
} |
|
|
|
.scroll-top { |
|
opacity: 0; |
|
visibility: hidden; |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.scroll-top.active { |
|
opacity: 1; |
|
visibility: visible; |
|
} |
|
|
|
.food-card { |
|
transition: all 0.3s ease; |
|
overflow: hidden; |
|
} |
|
|
|
.food-card:hover .food-img { |
|
transform: scale(1.05); |
|
} |
|
|
|
.food-img { |
|
transition: all 0.5s ease; |
|
} |
|
|
|
.price-tag { |
|
background-color: var(--primary); |
|
color: white; |
|
padding: 0.25rem 0.75rem; |
|
border-radius: 20px; |
|
font-weight: bold; |
|
position: absolute; |
|
top: 1rem; |
|
right: 1rem; |
|
} |
|
|
|
.section-title { |
|
position: relative; |
|
display: inline-block; |
|
} |
|
|
|
.section-title::after { |
|
content: ''; |
|
position: absolute; |
|
width: 70%; |
|
height: 4px; |
|
background: linear-gradient(90deg, var(--primary), var(--secondary)); |
|
bottom: -8px; |
|
left: 15%; |
|
border-radius: 4px; |
|
} |
|
|
|
|
|
.social-icon { |
|
transition: all 0.3s ease; |
|
transform-style: preserve-3d; |
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); |
|
border-radius: 50%; |
|
} |
|
|
|
.social-icon:hover { |
|
transform: translateY(-5px) rotateX(20deg); |
|
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); |
|
} |
|
|
|
.facebook-icon { |
|
background: linear-gradient(145deg, #3b5998, #4c70ba); |
|
color: white; |
|
} |
|
|
|
.instagram-icon { |
|
background: linear-gradient(145deg, #833ab4, #fd1d1d, #fcb045); |
|
color: white; |
|
} |
|
|
|
.twitter-icon { |
|
background: linear-gradient(145deg, #1da1f2, #1a91da); |
|
color: white; |
|
} |
|
|
|
.youtube-icon { |
|
background: linear-gradient(145deg, #ff0000, #cc0000); |
|
color: white; |
|
} |
|
|
|
.whatsapp-icon { |
|
background: linear-gradient(145deg, #25D366, #128C7E); |
|
color: white; |
|
} |
|
|
|
.delivery-icon { |
|
background: linear-gradient(145deg, #FF5722, #E64A19); |
|
color: white; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
|
|
<button id="scrollTop" class="scroll-top fixed bottom-8 right-8 bg-primary text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg z-50"> |
|
<i class="fas fa-arrow-up text-xl"></i> |
|
</button> |
|
|
|
|
|
<nav class="bg-white shadow-md sticky top-0 z-40"> |
|
<div class="container mx-auto px-4 py-3"> |
|
<div class="flex justify-between items-center"> |
|
<div class="flex items-center"> |
|
<a href="#" class="flex items-center"> |
|
<img src="https://i.imgur.com/JqYeZ0P.png" alt="PATSO IN Şanlıurfa Logo" class="h-10 mr-3"> |
|
<span class="text-xl font-bold text-primary">PATSO IN <span class="text-secondary">Şanlıurfa</span></span> |
|
</a> |
|
</div> |
|
|
|
<div class="hidden md:flex space-x-8"> |
|
<a href="#home" class="nav-link active-nav text-dark font-medium">Ana Sayfa</a> |
|
<a href="#menu" class="nav-link text-dark font-medium">Menü</a> |
|
<a href="#about" class="nav-link text-dark font-medium">Hakkımızda</a> |
|
<a href="#contact" class="nav-link text-dark font-medium">İletişim</a> |
|
</div> |
|
|
|
<div class="md:hidden"> |
|
<button id="mobileMenuButton" class="text-dark focus:outline-none"> |
|
<i class="fas fa-bars text-2xl"></i> |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="mobileMenu" class="hidden md:hidden bg-white shadow-lg"> |
|
<div class="container mx-auto px-4 py-2 flex flex-col space-y-3"> |
|
<a href="#home" class="nav-link active-nav text-dark font-medium py-2">Ana Sayfa</a> |
|
<a href="#menu" class="nav-link text-dark font-medium py-2">Menü</a> |
|
<a href="#about" class="nav-link text-dark font-medium py-2">Hakkımızda</a> |
|
<a href="#contact" class="nav-link text-dark font-medium py-2">İletişim</a> |
|
</div> |
|
</div> |
|
</nav> |
|
|
|
|
|
<section id="home" class="hero-section flex items-center justify-center text-center text-white"> |
|
<div class="container mx-auto px-4"> |
|
<h1 class="text-4xl md:text-6xl font-bold mb-6">Şanlıurfa'nın <span class="text-secondary">En Lezzetli</span> Patso'su</h1> |
|
<p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">Taze ve kaliteli malzemelerle hazırlanan özel lezzetler!</p> |
|
<div class="flex flex-col sm:flex-row justify-center gap-4"> |
|
<a href="#menu" class="bg-primary hover:bg-orange-600 text-white font-bold py-3 px-6 rounded-full transition duration-300 transform hover:scale-105 shadow-lg"> |
|
<i class="fas fa-utensils mr-2"></i> Menüyü Gör |
|
</a> |
|
<a href="#contact" class="bg-secondary hover:bg-yellow-500 text-dark font-bold py-3 px-6 rounded-full transition duration-300 transform hover:scale-105 shadow-lg"> |
|
<i class="fas fa-phone-alt mr-2"></i> Sipariş Ver |
|
</a> |
|
</div> |
|
</div> |
|
|
|
<div class="absolute bottom-10 left-1/2 transform -translate-x-1/2"> |
|
<a href="#menu" class="text-white text-2xl floating-btn"> |
|
<i class="fas fa-chevron-down"></i> |
|
</a> |
|
</div> |
|
</section> |
|
|
|
|
|
<section class="py-16 bg-white"> |
|
<div class="container mx-auto px-4"> |
|
<h2 class="text-3xl font-bold text-center mb-12 section-title">Neden <span class="text-primary">Biz?</span></h2> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
<div class="text-center p-6 rounded-lg bg-gradient-to-b from-gray-50 to-white hover:shadow-xl transition duration-300 border border-gray-100"> |
|
<div class="bg-primary text-white w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> |
|
<i class="fas fa-award text-2xl"></i> |
|
</div> |
|
<h3 class="text-xl font-semibold mb-3">Kaliteli Malzemeler</h3> |
|
<p class="text-gray-600">Tüm ürünlerimizde en taze ve kaliteli malzemeleri kullanıyoruz. Günlük taze ekmek ve özenle seçilmiş etler.</p> |
|
</div> |
|
|
|
<div class="text-center p-6 rounded-lg bg-gradient-to-b from-gray-50 to-white hover:shadow-xl transition duration-300 border border-gray-100"> |
|
<div class="bg-accent text-white w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> |
|
<i class="fas fa-clock text-2xl"></i> |
|
</div> |
|
<h3 class="text-xl font-semibold mb-3">Hızlı Servis</h3> |
|
<p class="text-gray-600">Siparişleriniz en kısa sürede hazırlanır ve sıcak bir şekilde size ulaştırılır. Ortalama 10 dakika!</p> |
|
</div> |
|
|
|
<div class="text-center p-6 rounded-lg bg-gradient-to-b from-gray-50 to-white hover:shadow-xl transition duration-300 border border-gray-100"> |
|
<div class="bg-secondary text-dark w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> |
|
<i class="fas fa-heart text-2xl"></i> |
|
</div> |
|
<h3 class="text-xl font-semibold mb-3">Özel Tarifler</h3> |
|
<p class="text-gray-600">Yılların tecrübesiyle geliştirdiğimiz özel soslar ve tariflerle benzersiz lezzetler sunuyoruz.</p> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section class="py-16 bg-gray-50"> |
|
<div class="container mx-auto px-4"> |
|
<h2 class="text-3xl font-bold text-center mb-12 section-title">Öne Çıkan <span class="text-primary">Lezzetler</span></h2> |
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> |
|
|
|
<div class="food-card bg-white rounded-lg overflow-hidden shadow-md"> |
|
<div class="relative h-48 overflow-hidden"> |
|
<img src="https://i.imgur.com/5X8Q2Zr.jpg" alt="Karışık Patso" class="food-img w-full h-full object-cover"> |
|
<span class="price-tag">70₺</span> |
|
</div> |
|
<div class="p-4"> |
|
<h3 class="font-bold text-lg mb-2">Karışık Patso</h3> |
|
<p class="text-gray-600 text-sm">Sucuk, sosis, kaşar ve özel soslarımızla hazırlanan nefis patso</p> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="food-card bg-white rounded-lg overflow-hidden shadow-md"> |
|
<div class="relative h-48 overflow-hidden"> |
|
<img src="https://i.imgur.com/9zJbWQq.jpg" alt="Dana Burger Menü" class="food-img w-full h-full object-cover"> |
|
<span class="price-tag">200₺</span> |
|
</div> |
|
<div class="p-4"> |
|
<h3 class="font-bold text-lg mb-2">Dana Burger Menü</h3> |
|
<p class="text-gray-600 text-sm">Yanında Soğan Halkası, Patates, Turşu ve İçecek</p> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="food-card bg-white rounded-lg overflow-hidden shadow-md"> |
|
<div class="relative h-48 overflow-hidden"> |
|
<img src="https://i.imgur.com/3QvV7tT.jpg" alt="Karışık Çıtır Pizza" class="food-img w-full h-full object-cover"> |
|
<span class="price-tag">220₺</span> |
|
</div> |
|
<div class="p-4"> |
|
<h3 class="font-bold text-lg mb-2">Karışık Çıtır Pizza</h3> |
|
<p class="text-gray-600 text-sm">İnce ve çıtır hamur üzerinde zengin malzemeler</p> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="food-card bg-white rounded-lg overflow-hidden shadow-md"> |
|
<div class="relative h-48 overflow-hidden"> |
|
<img src="https://i.imgur.com/7KjYV9p.jpg" alt="Ayvalık Tost" class="food-img w-full h-full object-cover"> |
|
<span class="price-tag">80₺</span> |
|
</div> |
|
<div class="p-4"> |
|
<h3 class="font-bold text-lg mb-2">Ayvalık Tost</h3> |
|
<p class="text-gray-600 text-sm">Ayvalık usulü özel tostumuz</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="text-center mt-10"> |
|
<a href="#menu" class="inline-block bg-primary hover:bg-orange-600 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105 shadow-lg"> |
|
Tüm Menüyü Gör <i class="fas fa-arrow-right ml-2"></i> |
|
</a> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section id="menu" class="py-16 bg-white"> |
|
<div class="container mx-auto px-4"> |
|
<h2 class="text-3xl font-bold text-center mb-4 section-title">Menümüz</h2> |
|
<p class="text-center text-gray-600 mb-12">Geniş çeşit yelpazesi ile Şanlıurfa'nın en sevilen patso ve fast food menüsü</p> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
<div class="bg-gradient-to-b from-gray-50 to-white rounded-lg overflow-hidden shadow-lg"> |
|
<div class="bg-primary text-white py-3 px-4"> |
|
<h3 class="text-xl font-bold category-title">Patso Çeşitleri</h3> |
|
</div> |
|
<div class="p-4"> |
|
<div class="menu-item bg-white rounded-lg p-4 mb-4"> |
|
<div class="flex justify-between items-start"> |
|
<div> |
|
<h4 class="font-bold text-lg">Klasik Patso</h4> |
|
<p class="text-gray-600 text-sm">Özel soslarımızla hazırlanan nefis patso</p> |
|
</div> |
|
<span class="font-bold text-primary">50₺</span> |
|
</div> |
|
</div> |
|
|
|
<div class="menu-item bg-white rounded-lg p-4 mb-4"> |
|
<div class="flex justify-between items-start"> |
|
<div> |
|
<h4 class="font-bold text-lg">Sucuklu Patso</h4> |
|
<p class="text-gray-600 text-sm">Bol sucuklu özel patso</p> |
|
</div> |
|
<span class="font-bold text-primary">70₺</span> |
|
</div> |
|
</div> |
|
|
|
<div class="menu-item bg-white rounded-lg p-4 mb-4"> |
|
<div class="flex justify-between items-start"> |
|
<div> |
|
<h4 class="font-bold text-lg">Kaşarlı Patso</h4> |
|
<p class="text-gray-600 text-sm">Bol kaşarlı özel patso</p> |
|
</div> |
|
<span class="font-bold text-primary">70₺</span> |
|
</div> |
|
</div> |
|
|
|
<div class="menu-item bg-white rounded-lg p-4 mb-4"> |
|
<div class="flex justify-between items-start"> |
|
<div> |
|
<h4 class="font-bold text-lg">Sosisli Patso</h4> |
|
<p class="text-gray-600 text-sm">Sosis ve patso birlikte</p> |
|
</div> |
|
<span class="font-bold text-primary">70₺</span> |
|
</div> |
|
</div> |
|
|
|
<div class="menu-item bg-white rounded-lg p-4"> |
|
<div class="flex justify-between items-start"> |
|
<div> |
|
<h4 class="font-bold text-lg">Karışık Patso</h4> |
|
<p class="text-gray-600 text-sm">Sucuk, sosis, kaşar hepsi bir arada</p> |
|
</div> |
|
<span class="font-bold text-primary">70₺</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-gradient-to-b from-gray-50 to-white rounded-lg overflow-hidden shadow-lg"> |
|
<div class="bg-accent text-white py-3 px-4"> |
|
<h3 class="text-xl font-bold category-title">Tabak Patso</h3> |
|
</div> |
|
<div class="p-4"> |
|
<div class="menu-item bg-white rounded-lg p-4 mb-4"> |
|
<div class="flex justify-between items-start"> |
|
<div> |
|
<h4 class="font-bold text-lg">Tabak Patso</h4> |
|
<p class="text-gray-600 text-sm">Tabakta servis edilen patso</p> |
|
</div> |
|
<span class="font-bold text-primary">60₺</span> |
|
</div> |
|
</div> |
|
|
|
<div class="menu-item bg-white rounded-lg p-4 mb-4"> |
|
<div class="flex justify-between items-start"> |
|
<div> |
|
<h4 class="font-bold text-lg">Kaşarlı Tabak Patso</h4> |
|
<p class="text-gray-600 text-sm">Tabakta bol kaşarlı</p> |
|
</div> |
|
<span class="font-bold text-primary">80₺</span> |
|
</div> |
|
</div> |
|
|
|
<div class="menu-item bg-white rounded-lg p-4 mb-4"> |
|
<div class="flex justify-between items-start"> |
|
<div> |
|
<h4 class="font-bold text-lg">Sosisli Tabak Patso</h4> |
|
<p class="text-gray-600 text-sm">Tabakta sosisli</p> |
|
</div> |
|
<span class="font-bold text-primary">80₺</span> |
|
</div> |
|
</div> |
|
|
|
<div class="menu-item bg-white rounded-lg p-4"> |
|
<div class="flex justify-between items-start"> |
|
<div> |
|
<h4 class="font-bold text-lg">Sucuklu Tabak Patso</h4> |
|
<p class="text-gray-600 text-sm">Tabakta sucuklu</p> |
|
</div> |
|
<span class="font-bold text-primary">80₺</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-gradient-to-b from-gray-50 to-white rounded-lg overflow-hidden shadow-lg"> |
|
<div class="bg-secondary text-dark py-3 px-4"> |
|
<h3 class="text-xl font-bold category-title">Burger Çeşitleri</h3> |
|
</div> |
|
<div class="p-4"> |
|
<div class="menu-item bg-white rounded-lg p-4 mb-4"> |
|
<div class="flex justify-between items-start"> |
|
<div> |
|
<h4 class="font-bold text-lg">Tavuk Burger</h4> |
|
<p class="text-gray-600 text-sm">Nefis tavuk burger</p> |
|
</div> |
|
<span class="font-bold text-primary">70₺</span> |
|
</div> |
|
</div> |
|
|
|
<div class="menu-item bg-white rounded-lg p-4 mb-4"> |
|
<div class="flex justify-between items-start"> |
|
<div> |
|
<h4 class="font-bold text-lg">Tavuk Burger Double</h4> |
|
<p class="text-gray-600 text-sm">Çift kat tavuk burger</p> |
|
</div> |
|
<span class="font-bold text-primary">100₺</span> |
|
</div> |
|
</div> |
|
|
|
<div class="menu-item bg-white rounded-lg p-4 mb-4"> |
|
<div class="flex justify-between items-start"> |
|
<div> |
|
<h4 class="font-bold text-lg">Tavuk Burger Menü</h4> |
|
<p class="text-gray-600 text-sm">Yanında Soğan Halkası, Patates, Turşu, İçecek</p> |
|
</div> |
|
<span class="font-bold text-primary">100₺</span> |
|
</div> |
|
</div> |
|
|
|
<div class="menu-item bg-white rounded-lg p-4 mb-4"> |
|
<div class="flex justify-between items-start"> |
|
<div> |
|
<h4 class="font-bold text-lg">Köfte Burger</h4> |
|
<p class="text-gray-600 text-sm">Özel köfteli burger</p> |
|
</div> |
|
<span class="font-bold text-primary">80₺</span> |
|
</div> |
|
</div> |
|
|
|
<div class="menu-item bg-white rounded-lg p-4"> |
|
<div class="flex justify-between items-start"> |
|
<div> |
|
<h4 class="font-bold text-lg">Dana Burger Menü</h4> |
|
<p class="text-gray-600 text-sm">Yanında Soğan Halkası, Patates, Turşu, İçecek</p> |
|
</div> |
|
<span class="font-bold text-primary">200₺</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-gradient-to-b from-gray-50 to-white rounded-lg overflow-hidden shadow-lg"> |
|
<div class="bg-primary text-white py-3 px-4"> |
|
<h3 class="text-xl font-bold category-title">Pizza Çeşitleri</h3> |
|
</div> |
|
<div class="p-4"> |
|
<div class="menu-item bg-white rounded-lg p-4 mb-4"> |
|
<div class="flex justify-between items-start"> |
|
<div> |
|
<h4 class="font-bold text-lg">Karışık Çıtır Pizza</h4> |
|
<p class="text-gray-600 text-sm">İnce ve çıtır hamur üzerinde karışık malzemeler</p> |
|
</div> |
|
<span class="font-bold text-primary">220₺</span> |
|
</div> |
|
</div> |
|
|
|
<div class="menu-item bg-white rounded-lg p-4"> |
|
<div class="flex justify-between items-start"> |
|
<div> |
|
<h4 class="font-bold text-lg">Karışık Pizza</h4> |
|
<p class="text-gray-600 text-sm">Klasik karışık pizza</p> |
|
</div> |
|
<span class="font-bold text-primary">200₺</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-gradient-to-b from-gray-50 to-white rounded-lg overflow-hidden shadow-lg"> |
|
<div class="bg-accent text-white py-3 px-4"> |
|
<h3 class="text-xl font-bold category-title">Tost Çeşitleri</h3> |
|
</div> |
|
<div class="p-4"> |
|
<div class="menu-item bg-white rounded-lg p-4 mb-4"> |
|
<div class="flex justify-between items-start"> |
|
<div> |
|
<h4 class="font-bold text-lg">Karışık Tost</h4> |
|
<p class="text-gray-600 text-sm">Öğrenci dostu karışık tost</p> |
|
</div> |
|
<span class="font-bold text-primary">60₺</span> |
|
</div> |
|
</div> |
|
|
|
<div class="menu-item bg-white rounded-lg p-4 mb-4"> |
|
<div class="flex justify-between items-start"> |
|
<div> |
|
<h4 class="font-bold text-lg">Kaşarlı Tost</h4> |
|
<p class="text-gray-600 text-sm">Bol kaşarlı tost</p> |
|
</div> |
|
<span class="font-bold text-primary">60₺</span> |
|
</div> |
|
</div> |
|
|
|
<div class="menu-item bg-white rounded-lg p-4 mb-4"> |
|
<div class="flex justify-between items-start"> |
|
<div> |
|
<h4 class="font-bold text-lg">Sucuklu Tost</h4> |
|
<p class="text-gray-600 text-sm">Sucuklu tost</p> |
|
</div> |
|
<span class="font-bold text-primary">60₺</span> |
|
</div> |
|
</div> |
|
|
|
<div class="menu-item bg-white rounded-lg p-4"> |
|
<div class="flex justify-between items-start"> |
|
<div> |
|
<h4 class="font-bold text-lg">Ayvalık Tost</h4> |
|
<p class="text-gray-600 text-sm">Ayvalık usulü özel tost</p> |
|
</div> |
|
<span class="font-bold text-primary">80₺</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-gradient-to-b from-gray-50 to-white rounded-lg overflow-hidden shadow-lg"> |
|
<div class="bg-secondary text-dark py-3 px-4"> |
|
<h3 class="text-xl font-bold category-title">İçecekler</h3> |
|
</div> |
|
<div class="p-4"> |
|
<div class="menu-item bg-white rounded-lg p-4 mb-4"> |
|
<div class="flex justify-between items-start"> |
|
<div> |
|
<h4 class="font-bold text-lg">Kutu Kola</h4> |
|
<p class="text-gray-600 text-sm">330ml kutu kola</p> |
|
</div> |
|
<span class="font-bold text-primary">40₺</span> |
|
</div> |
|
</div> |
|
|
|
<div class="menu-item bg-white rounded-lg p-4 mb-4"> |
|
<div class="flex justify-between items-start"> |
|
<div> |
|
<h4 class="font-bold text-lg">Şişe Kola</h4> |
|
<p class="text-gray-600 text-sm">250ml şişe kola</p> |
|
</div> |
|
<span class="font-bold text-primary">36₺</span> |
|
</div> |
|
</div> |
|
|
|
<div class="menu-item bg-white rounded-lg p-4 mb-4"> |
|
<div class="flex justify-between items-start"> |
|
<div> |
|
<h4 class="font-bold text-lg">Litre Kola</h4> |
|
<p class="text-gray-600 text-sm">1lt kola</p> |
|
</div> |
|
<span class="font-bold text-primary">60₺</span> |
|
</div> |
|
</div> |
|
|
|
<div class="menu-item bg-white rounded-lg p-4 mb-4"> |
|
<div class="flex justify-between items-start"> |
|
<div> |
|
<h4 class="font-bold text-lg">Çamlıca</h4> |
|
<p class="text-gray-600 text-sm">Meyveli soda</p> |
|
</div> |
|
<span class="font-bold text-primary">30₺</span> |
|
</div> |
|
</div> |
|
|
|
<div class="menu-item bg-white rounded-lg p-4"> |
|
<div class="flex justify-between items-start"> |
|
<div> |
|
<h4 class="font-bold text-lg">Çay</h4> |
|
<p class="text-gray-600 text-sm">Sıcak çay</p> |
|
</div> |
|
<span class="font-bold text-primary">10₺</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section id="about" class="py-16 bg-gray-50"> |
|
<div class="container mx-auto px-4"> |
|
<div class="flex flex-col lg:flex-row items-center"> |
|
<div class="lg:w-1/2 mb-8 lg:mb-0 lg:pr-12"> |
|
<h2 class="text-3xl font-bold mb-6 section-title">PATSO IN <span class="text-primary">Şanlıurfa</span></h2> |
|
<p class="text-gray-600 mb-4">Patso, Şanlıurfa Haliliye'de taze ve kaliteli malzemelerle hazırlanan fast food lezzetlerini sunan bir restoran. Uygun fiyatlarla, hızlı servisimiz ve lezzetli menümüzle sizi memnun etmeyi amaçlıyoruz.</p> |
|
<p class="text-gray-600 mb-4">Menümüz patso çeşitlerinden burgerlere, tostlara ve özel yemeklere kadar her damak zevkine hitap ediyor. Patso çeşitlerimiz arasında klasik patso, tabak patso, sucuklu patso, kaşarlı patso ve sosisli patso bulunmaktadır.</p> |
|
<p class="text-gray-600 mb-4">Burger ve sandviçlerimiz dana burger, tavuk burger ve sucuk sandviçten ibarettir. Tostlarımız karışık tost, kaşarlı tost ve sucuklu tost şeklindedir. Atıştırmalıklarımız nugget, şinitzel, soğan halkası ve cips'ten oluşmaktadır.</p> |
|
<p class="text-gray-600">Özel yemeklerimiz kumru, mexicano, fahetta, wesmix ve köfte'dir. Siparişinizi Yemeksepeti, Trendyol ve diğer online sipariş platformlarından verebilirsiniz.</p> |
|
|
|
<div class="mt-8 grid grid-cols-2 gap-4"> |
|
<div class="bg-white p-4 rounded-lg shadow-sm"> |
|
<div class="text-primary text-2xl mb-2"> |
|
<i class="fas fa-users"></i> |
|
</div> |
|
<h4 class="font-bold">10.000+</h4> |
|
<p class="text-gray-600 text-sm">Mutlu Müşteri</p> |
|
</div> |
|
<div class="bg-white p-4 rounded-lg shadow-sm"> |
|
<div class="text-primary text-2xl mb-2"> |
|
<i class="fas fa-utensils"></i> |
|
</div> |
|
<h4 class="font-bold">50+</h4> |
|
<p class="text-gray-600 text-sm">Menü Çeşidi</p> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="mt-8"> |
|
<h4 class="font-semibold mb-4">Online Sipariş Platformları</h4> |
|
<div class="flex flex-wrap gap-4"> |
|
<a href="#" class="delivery-icon social-icon w-12 h-12 flex items-center justify-center"> |
|
<i class="fas fa-motorcycle"></i> |
|
</a> |
|
<a href="#" class="bg-yellow-400 social-icon w-12 h-12 flex items-center justify-center"> |
|
<i class="fas fa-shopping-bag"></i> |
|
</a> |
|
<a href="#" class="bg-blue-500 social-icon w-12 h-12 flex items-center justify-center"> |
|
<i class="fas fa-store"></i> |
|
</a> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="lg:w-1/2"> |
|
<div class="grid grid-cols-2 gap-4"> |
|
<div class="rounded-lg overflow-hidden shadow-lg h-48"> |
|
<img src="https://i.imgur.com/8zJqX9a.jpg" alt="Restoran İçi" class="w-full h-full object-cover"> |
|
</div> |
|
<div class="rounded-lg overflow-hidden shadow-lg h-48"> |
|
<img src="https://i.imgur.com/3kLmJ9T.jpg" alt="Patso Hazırlık" class="w-full h-full object-cover"> |
|
</div> |
|
<div class="rounded-lg overflow-hidden shadow-lg h-48"> |
|
<img src="https://i.imgur.com/5X8Q2Zr.jpg" alt="Patso Çeşitleri" class="w-full h-full object-cover"> |
|
</div> |
|
<div class="rounded-lg overflow-hidden shadow-lg h-48"> |
|
<img src="https://i.imgur.com/9zJbWQq.jpg" alt="Burger Çeşitleri" class="w-full h-full object-cover"> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section class="py-16 bg-white"> |
|
<div class="container mx-auto px-4"> |
|
<h2 class="text-3xl font-bold text-center mb-12 section-title">Müşteri <span class="text-primary">Yorumları</span></h2> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
|
<div class="bg-gray-50 p-6 rounded-lg shadow-sm"> |
|
<div class="flex items-center mb-4"> |
|
<img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Ayşe K." class="w-12 h-12 rounded-full mr-4"> |
|
<div> |
|
<h4 class="font-bold">Ayşe K.</h4> |
|
<div class="flex text-yellow-400"> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
</div> |
|
</div> |
|
</div> |
|
<p class="text-gray-600">"Şanlıurfa'da yediğim en lezzetli patso! Özellikle karışık patso ve ayran ikilisi muhteşem. Fiyat/performans oranı çok iyi."</p> |
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 p-6 rounded-lg shadow-sm"> |
|
<div class="flex items-center mb-4"> |
|
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Mehmet T." class="w-12 h-12 rounded-full mr-4"> |
|
<div> |
|
<h4 class="font-bold">Mehmet T.</h4> |
|
<div class="flex text-yellow-400"> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star-half-alt"></i> |
|
</div> |
|
</div> |
|
</div> |
|
<p class="text-gray-600">"Öğrenci dostu fiyatlar ve bol porsiyonlar. Tavuk burger menü favorim, yanındaki patatesler de çok lezzetli."</p> |
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 p-6 rounded-lg shadow-sm"> |
|
<div class="flex items-center mb-4"> |
|
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Zeynep A." class="w-12 h-12 rounded-full mr-4"> |
|
<div> |
|
<h4 class="font-bold">Zeynep A.</h4> |
|
<div class="flex text-yellow-400"> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
</div> |
|
</div> |
|
</div> |
|
<p class="text-gray-600">"Çalışanlar çok ilgili ve güler yüzlü. Karışık çıtır pizza inanılmaz lezzetli, mutlaka denemelisiniz!"</p> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section id="contact" class="py-16 bg-primary text-white"> |
|
<div class="container mx-auto px-4"> |
|
<h2 class="text-3xl font-bold text-center mb-12 section-title">Bize <span class="text-secondary">Ulaşın</span></h2> |
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12"> |
|
<div> |
|
<h3 class="text-xl font-semibold mb-6">İletişim Bilgileri</h3> |
|
|
|
<div class="space-y-6"> |
|
<div class="flex items-start"> |
|
<div class="bg-secondary text-dark p-3 rounded-full mr-4"> |
|
<i class="fas fa-map-marker-alt"></i> |
|
</div> |
|
<div> |
|
<h4 class="font-semibold">Adres</h4> |
|
<p class="text-gray-200">Ulubatlı, Yunus Emre Cd. No:95, 63300 Şanlıurfa Merkez, 63300 Haliliye/Şanlıurfa</p> |
|
</div> |
|
</div> |
|
|
|
<div class="flex items-start"> |
|
<div class="bg-secondary text-dark p-3 rounded-full mr-4"> |
|
<i class="fas fa-phone-alt"></i> |
|
</div> |
|
<div> |
|
<h4 class="font-semibold">Telefon</h4> |
|
<p class="text-gray-200">0414 123 45 67</p> |
|
<p class="text-gray-200">0555 123 45 67 (WhatsApp)</p> |
|
</div> |
|
</div> |
|
|
|
<div class="flex items-start"> |
|
<div class="bg-secondary text-dark p-3 rounded-full mr-4"> |
|
<i class="fas fa-envelope"></i> |
|
</div> |
|
<div> |
|
<h4 class="font-semibold">Email</h4> |
|
<p class="text-gray-200">info@patsosanliurfa.com</p> |
|
</div> |
|
</div> |
|
|
|
<div class="flex items-start"> |
|
<div class="bg-secondary text-dark p-3 rounded-full mr-4"> |
|
<i class="fas fa-clock"></i> |
|
</div> |
|
<div> |
|
<h4 class="font-semibold">Çalışma Saatleri</h4> |
|
<p class="text-gray-200">Pazartesi - Cumartesi: 09:00 - 23:00</p> |
|
<p class="text-gray-200">Pazar: 10:00 - 22:00</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="mt-8"> |
|
<h4 class="font-semibold mb-4">Sosyal Medya</h4> |
|
<div class="flex space-x-4"> |
|
<a href="#" class="facebook-icon social-icon w-12 h-12 flex items-center justify-center"> |
|
<i class="fab fa-facebook-f"></i> |
|
</a> |
|
<a href="#" class="instagram-icon social-icon w-12 h-12 flex items-center justify-center"> |
|
<i class="fab fa-instagram"></i> |
|
</a> |
|
<a href="#" class="twitter-icon social-icon w-12 h-12 flex items-center justify-center"> |
|
<i class="fab fa-twitter"></i> |
|
</a> |
|
<a href="#" class="youtube-icon social-icon w-12 h-12 flex items-center justify-center"> |
|
<i class="fab fa-youtube"></i> |
|
</a> |
|
<a href="#" class="whatsapp-icon social-icon w-12 h-12 flex items-center justify-center"> |
|
<i class="fab fa-whatsapp"></i> |
|
</a> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div> |
|
<h3 class="text-xl font-semibold mb-6">Konumumuz</h3> |
|
|
|
<div class="map-container h-96 bg-gray-200 relative"> |
|
<img src="https://maps.googleapis.com/maps/api/staticmap?center=Haliliye,Şanlıurfa&zoom=15&size=800x400&maptype=roadmap&markers=color:red%7CHaliliye,Şanlıurfa&key=YOUR_API_KEY" alt="Harita" class="w-full h-full object-cover"> |
|
<div class="map-marker"> |
|
<i class="fas fa-map-pin"></i> |
|
</div> |
|
</div> |
|
|
|
<div class="mt-6"> |
|
<h4 class="font-semibold mb-4">Hızlı Sipariş</h4> |
|
<form class="space-y-4"> |
|
<div> |
|
<input type="text" placeholder="Adınız" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-transparent"> |
|
</div> |
|
<div> |
|
<input type="tel" placeholder="Telefon Numaranız" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-transparent"> |
|
</div> |
|
<div> |
|
<textarea placeholder="Siparişiniz ve Adres Bilgileriniz" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-transparent"></textarea> |
|
</div> |
|
<button type="submit" class="bg-secondary hover:bg-yellow-500 text-dark font-bold py-3 px-6 rounded-lg transition duration-300 w-full"> |
|
<i class="fas fa-paper-plane mr-2"></i> Sipariş Gönder |
|
</button> |
|
</form> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<footer class="bg-dark text-white py-8"> |
|
<div class="container mx-auto px-4"> |
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
<div class="mb-6 md:mb-0"> |
|
<a href="#" class="flex items-center"> |
|
<img src="https://i.imgur.com/JqYeZ0P.png" alt="PATSO IN Şanlıurfa Logo" class="h-10 mr-3"> |
|
<span class="text-xl font-bold text-white">PATSO IN <span class="text-secondary">Şanlıurfa</span></span> |
|
</a> |
|
<p class="mt-2 text-gray-400">Lezzetin Adresi</p> |
|
</div> |
|
|
|
<div class="flex flex-col items-center md:items-end"> |
|
<p class="text-gray-400 mb-2">© 2023 PATSO IN Şanlıurfa. Tüm hakları saklıdır.</p> |
|
<div class="flex space-x-4"> |
|
<a href="#" class="text-gray-400 hover:text-white transition duration-300">Gizlilik Politikası</a> |
|
<a href="#" class="text-gray-400 hover:text-white transition duration-300">Kullanım Şartları</a> |
|
<a href="#" class="text-gray-400 hover:text-white transition duration-300">Çerez Politikası</a> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</footer> |
|
|
|
<script> |
|
|
|
const mobileMenuButton = document.getElementById('mobileMenuButton'); |
|
const mobileMenu = document.getElementById('mobileMenu'); |
|
|
|
mobileMenuButton.addEventListener('click', () => { |
|
mobileMenu.classList.toggle('hidden'); |
|
}); |
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
anchor.addEventListener('click', function (e) { |
|
e.preventDefault(); |
|
|
|
document.querySelector(this.getAttribute('href')).scrollIntoView({ |
|
behavior: 'smooth' |
|
}); |
|
|
|
|
|
if (!mobileMenu.classList.contains('hidden')) { |
|
mobileMenu.classList.add('hidden'); |
|
} |
|
}); |
|
}); |
|
|
|
|
|
const sections = document.querySelectorAll('section'); |
|
const navLinks = document.querySelectorAll('.nav-link'); |
|
|
|
window.addEventListener('scroll', () => { |
|
let current = ''; |
|
|
|
sections.forEach(section => { |
|
const sectionTop = section.offsetTop; |
|
const sectionHeight = section.clientHeight; |
|
|
|
if (pageYOffset >= sectionTop - 300) { |
|
current = section.getAttribute('id'); |
|
} |
|
}); |
|
|
|
navLinks.forEach(link => { |
|
link.classList.remove('active-nav'); |
|
if (link.getAttribute('href') === `#${current}`) { |
|
link.classList.add('active-nav'); |
|
} |
|
}); |
|
|
|
|
|
const scrollTopBtn = document.getElementById('scrollTop'); |
|
if (window.pageYOffset > 300) { |
|
scrollTopBtn.classList.add('active'); |
|
} else { |
|
scrollTopBtn.classList.remove('active'); |
|
} |
|
}); |
|
|
|
|
|
document.getElementById('scrollTop').addEventListener('click', () => { |
|
window.scrollTo({ |
|
top: 0, |
|
behavior: 'smooth' |
|
}); |
|
}); |
|
|
|
|
|
const forms = document.querySelectorAll('form'); |
|
forms.forEach(form => { |
|
form.addEventListener('submit', (e) => { |
|
e.preventDefault(); |
|
alert('Teşekkür ederiz! Siparişiniz alınmıştır. En kısa sürede sizinle iletişime geçilecektir.'); |
|
}); |
|
}); |
|
</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=ziffir/websitesi" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
</html> |