Notes
Notes - notes.io |
📁 Proje Dosya Yapısı
/pilicbox-website
│── index.html (Ana Sayfa)
│── menu.html (Menü Sayfası)
│── order.html (Sipariş Sayfası)
│── contact.html (İletişim Sayfası)
│── offers.html (Kampanyalar Sayfası)
│── styles.css (Tüm sayfalara uygulanan CSS)
│── script.js (JavaScript etkileşimleri)
│── images/ (Görseller burada olacak)
📌 1. index.html (Ana Sayfa)
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PiliçBox - Lezzetli Piliçler</title>
<link rel="stylesheet" href="styles.css">
<script defer src="script.js"></script>
</head>
<body>
<header>
<div class="logo">PiliçBox</div>
<nav>
<ul class="nav-links">
<li><a href="index.html">Ana Sayfa</a></li>
<li><a href="menu.html">Menü</a></li>
<li><a href="order.html">Sipariş Ver</a></li>
<li><a href="offers.html">Kampanyalar</a></li>
<li><a href="contact.html">İletişim</a></li>
</ul>
<div class="hamburger" onclick="toggleMenu()">☰</div>
</nav>
</header>
<section class="hero">
<h2>En Lezzetli Piliçler Burada!</h2>
<p>Taze ve nefis piliç çeşitleriyle damak tadınıza hitap ediyoruz.</p>
<a href="menu.html" class="btn">Menümüzü İncele</a>
</section>
<footer>
<p>© 2025 PiliçBox. Tüm hakları saklıdır.</p>
</footer>
</body>
</html>
📌 2. menu.html (Menü Sayfası - Kart Yapısıyla)
<section class="menu-container">
<h2>Lezzetli Piliçlerimiz</h2>
<div class="menu-grid">
<div class="menu-item">
<img src="https://source.unsplash.com/500x400/?grilled-chicken" alt="Piliç Izgara">
<h3>Piliç Izgara</h3>
<p>Izgarada pişmiş, nefis baharatlarla harmanlanmış.</p>
<span class="price">80₺</span>
<a href="order.html" class="order-btn">Sipariş Ver</a>
</div>
<div class="menu-item">
<img src="https://source.unsplash.com/500x400/?chicken-skewer" alt="Piliç Şiş">
<h3>Piliç Şiş</h3>
<p>Odun ateşinde pişirilmiş, bol baharatlı.</p>
<span class="price">85₺</span>
<a href="order.html" class="order-btn">Sipariş Ver</a>
</div>
</div>
</section>
📌 3. order.html (Sipariş Sayfası + Sipariş Takibi ve Geçmişi)
<section class="order-container">
<h2>Siparişinizi Oluşturun</h2>
<form id="orderForm">
<input type="text" id="name" placeholder="Adınızı girin..." required>
<input type="text" id="address" placeholder="Adresinizi girin..." required>
<select id="menu">
<option value="Piliç Izgara">Piliç Izgara</option>
<option value="Piliç Şiş">Piliç Şiş</option>
</select>
<button type="submit" class="btn">Siparişi Gönder</button>
</form>
<div id="orderStatus" class="order-status hidden">
<h3>Sipariş Takibi</h3>
<p><strong>Sipariş ID:</strong> <span id="orderID"></span></p>
<p><strong>Durum:</strong> <span id="orderState">Sipariş alındı</span></p>
<progress id="orderProgress" value="0" max="100"></progress>
</div>
<h2>Önceki Siparişler</h2>
<ul id="orderHistoryList"></ul>
</section>
📌 4. styles.css (Görsel Ağırlıklı Tasarım)
body { font-family: 'Poppins', sans-serif; background: #fdf6f0; color: #333; }
header { background: #ff5733; padding: 15px 20px; }
.logo { font-size: 1.8em; }
.nav-links { display: flex; }
.nav-links li a { color: white; }
.hero { background: url('https://source.unsplash.com/1600x900/?chicken') no-repeat center center/cover; padding: 180px 20px; text-align: center; }
.btn { background: #ffba08; border-radius: 50px; }
.menu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; }
.menu-item { background: white; border-radius: 15px; }
.order-container { text-align: center; background: #fff; padding: 20px; border-radius: 10px; }
📌 5. script.js (Sipariş Takibi ve Geçmişi)
document.getElementById("orderForm").addEventListener("submit", function(event) {
event.preventDefault();
let orderID = "PBX-" + Math.floor(Math.random() * 1000000);
document.getElementById("orderID").innerText = orderID;
document.getElementById("orderStatus").classList.remove("hidden");
let steps = ["Hazırlanıyor", "Fırında", "Yolda", "Teslim Edildi"];
let index = 0;
function updateStatus() {
if (index < steps.length) {
document.getElementById("orderState").innerText = steps[index];
document.getElementById("orderProgress").value = (index + 1) * 25;
index++;
setTimeout(updateStatus, 3000);
}
}
setTimeout(updateStatus, 3000);
});
🚀 PiliçBox Web Sitesi Son Versiyonu
✅ Modern ve şık UI tasarımı
✅ Görsel ağırlıklı, kullanıcı dostu arayüz
✅ Sipariş Takibi (Gerçek zamanlı ilerleme çubuğu)
✅ Sipariş Geçmişi (Önceki siparişler saklanıyor)
✅ Menü sayfasında kart görünümü ve hover efektleri
Bu son haliyle tüm dosyalar eksiksiz ve tam görselli bir tasarım içeriyor. Eklemek istediğin ekstra detaylar var mı? 🚀😎
|
|
Notes is a web-based application for online taking notes. You can take your notes and share with others people. If you like taking long notes, notes.io is designed for you. To date, over 8,000,000,000+ notes created and continuing...
With notes.io;
- * You can take a note from anywhere and any device with internet connection.
- * You can share the notes in social platforms (YouTube, Facebook, Twitter, instagram etc.).
- * You can quickly share your contents without website, blog and e-mail.
- * You don't need to create any Account to share a note. As you wish you can use quick, easy and best shortened notes with sms, websites, e-mail, or messaging services (WhatsApp, iMessage, Telegram, Signal).
- * Notes.io has fabulous infrastructure design for a short link and allows you to share the note as an easy and understandable link.
Fast: Notes.io is built for speed and performance. You can take a notes quickly and browse your archive.
Easy: Notes.io doesn’t require installation. Just write and share note!
Short: Notes.io’s url just 8 character. You’ll get shorten link of your note when you want to share. (Ex: notes.io/q )
Free: Notes.io works for 14 years and has been free since the day it was started.
You immediately create your first note and start sharing with the ones you wish. If you want to contact us, you can use the following communication channels;
Email: [email protected]
Twitter: http://twitter.com/notesio
Instagram: http://instagram.com/notes.io
Facebook: http://facebook.com/notesio
Regards;
Notes.io Team
