225 lines
12 KiB
HTML
225 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru" data-theme="light">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Топ локации Стамбула</title>
|
||
<link rel="stylesheet" href="design-system/kt-ai-fonts.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-tokens.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-components.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-page.css">
|
||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🕌</text></svg>">
|
||
<style>
|
||
a.kt-ai-btn { text-decoration: none; }
|
||
.location-card { overflow: hidden; }
|
||
.location-card img { width: 100%; height: 240px; object-fit: cover; display: block; }
|
||
.location-card .kt-ai-card { border-radius: 0; }
|
||
.location-tag { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; margin-bottom: 12px; }
|
||
.tag-mosque { background: #e3f2fd; color: #1565c0; }
|
||
.tag-palace { background: #fce4ec; color: #c2185b; }
|
||
.tag-market { background: #e8f5e9; color: #2e7d32; }
|
||
.tag-view { background: #fff8e1; color: #f57f17; }
|
||
.tag-museum { background: #f3e5f5; color: #6a1b9a; }
|
||
.route-step { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 20px; }
|
||
.route-time { min-width: 80px; font-weight: 600; color: var(--kt-ai-fg-muted); }
|
||
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
|
||
.reveal.in { opacity: 1; transform: none; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="kt-ai-pagehead">
|
||
<div class="kt-ai-wrap kt-ai-pagehead-in">
|
||
<strong>🕌 Istanbul Top</strong>
|
||
<span class="kt-ai-spacer"></span>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="#locations">Локации</a>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="#route">Маршрут</a>
|
||
<a class="kt-ai-btn" data-variant="primary" href="#contacts">Контакты</a>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="kt-ai-hero" data-align="center">
|
||
<div class="kt-ai-wrap">
|
||
<h1>Топ локации Стамбула</h1>
|
||
<p class="kt-ai-hero-sub">7 мест, которые нужно увидеть в первую очередь — от Айя-Софии до скрытых видовых точек</p>
|
||
<div class="kt-ai-hero-actions">
|
||
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="#locations">Смотреть локации</a>
|
||
<a class="kt-ai-btn" data-size="lg" href="#route">Готовый маршрут</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="locations" class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Топ-7 локаций</h2>
|
||
<p>Места, которые создают лицо Стамбула — с советами по времени посещения</p>
|
||
</div>
|
||
<div class="kt-ai-grid" style="margin-top:var(--kt-ai-space-9); display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px;">
|
||
|
||
<article class="location-card reveal">
|
||
<img src="https://loremflickr.com/800/600/hagia sophia" alt="Айя-София">
|
||
<div class="kt-ai-card" style="border-radius: 0 0 var(--kt-ai-radius-2xl) var(--kt-ai-radius-2xl);">
|
||
<span class="location-tag tag-mosque">Мечеть</span>
|
||
<h3>Айя-София</h3>
|
||
<p style="color: var(--kt-ai-fg-muted); margin-bottom: 12px;">Величественный храм, бывшая церковь и мечеть, теперь музей. Византийское чудо с огромным куполом.</p>
|
||
<p style="font-size: 14px;"><strong>💡 Совет:</strong> Приходите к открытию (9:00), чтобы избежать очередей.</p>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="location-card reveal">
|
||
<img src="https://loremflickr.com/800/600/blue mosque" alt="Голубая мечеть">
|
||
<div class="kt-ai-card" style="border-radius: 0 0 var(--kt-ai-radius-2xl) var(--kt-ai-radius-2xl);">
|
||
<span class="location-tag tag-mosque">Мечеть</span>
|
||
<h3>Голубая мечеть</h3>
|
||
<p style="color: var(--kt-ai-fg-muted); margin-bottom: 12px;">Мечеть Султанахмет с шестью минаретами. Внутри украшена голубыми изразцами.</p>
|
||
<p style="font-size: 14px;"><strong>💡 Совет:</strong> Бесплатный вход, закрывается на молитву 5 раз в день.</p>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="location-card reveal">
|
||
<img src="https://loremflickr.com/800/600/topkapi palace" alt="Дворец Топкапы">
|
||
<div class="kt-ai-card" style="border-radius: 0 0 var(--kt-ai-radius-2xl) var(--kt-ai-radius-2xl);">
|
||
<span class="location-tag tag-palace">Дворец</span>
|
||
<h3>Дворец Топкапы</h3>
|
||
<p style="color: var(--kt-ai-fg-muted); margin-bottom: 12px;">Главный дворец Османской империи. Сокровищница, гарем и вид на Босфор.</p>
|
||
<p style="font-size: 14px;"><strong>💡 Совет:</strong> Закладывайте 3-4 часа, покупайте билет онлайн.</p>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="location-card reveal">
|
||
<img src="https://loremflickr.com/800/600/grand bazaar" alt="Гранд-базар">
|
||
<div class="kt-ai-card" style="border-radius: 0 0 var(--kt-ai-radius-2xl) var(--kt-ai-radius-2xl);">
|
||
<span class="location-tag tag-market">Рынок</span>
|
||
<h3>Гранд-базар</h3>
|
||
<p style="color: var(--kt-ai-fg-muted); margin-bottom: 12px;">Один из крупнейших крытых рынков мира. 4000 лавок с коврами, керамикой, сладостями.</p>
|
||
<p style="font-size: 14px;"><strong>💡 Совет:</strong> Торгуйтесь смело, цены завышают в 2-3 раза.</p>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="location-card reveal">
|
||
<img src="https://loremflickr.com/800/600/galata tower" alt="Галатская башня">
|
||
<div class="kt-ai-card" style="border-radius: 0 0 var(--kt-ai-radius-2xl) var(--kt-ai-radius-2xl);">
|
||
<span class="location-tag tag-view">Видовая</span>
|
||
<h3>Галатская башня</h3>
|
||
<p style="color: var(--kt-ai-fg-muted); margin-bottom: 12px;">Средневековая башня с панорамным видом на Стамбул и Босфор.</p>
|
||
<p style="font-size: 14px;"><strong>💡 Совет:</strong> Поднимайтесь на закате — вид волшебный, но очередь большая.</p>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="location-card reveal">
|
||
<img src="https://loremflickr.com/800/600/basilica cistern" alt="Цистерна Базилика">
|
||
<div class="kt-ai-card" style="border-radius: 0 0 var(--kt-ai-radius-2xl) var(--kt-ai-radius-2xl);">
|
||
<span class="location-tag tag-museum">Музей</span>
|
||
<h3>Цистерна Базилика</h3>
|
||
<p style="color: var(--kt-ai-fg-muted); margin-bottom: 12px;">Подземное водохранилище VI века с колоннами и головами Медузы.</p>
|
||
<p style="font-size: 14px;"><strong>💡 Совет:</strong> Внутри прохладно, возьмите кофту даже летом.</p>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="location-card reveal">
|
||
<img src="https://loremflickr.com/800/600/bosphorus" alt="Босфор">
|
||
<div class="kt-ai-card" style="border-radius: 0 0 var(--kt-ai-radius-2xl) var(--kt-ai-radius-2xl);">
|
||
<span class="location-tag tag-view">Видовая</span>
|
||
<h3>Пролив Босфор</h3>
|
||
<p style="color: var(--kt-ai-fg-muted); margin-bottom: 12px;">Граница между Европой и Азией. Прогулка на пароме — must-do в Стамбуле.</p>
|
||
<p style="font-size: 14px;"><strong>💡 Совет:</strong> Садитесь на паром от Эминёню до Анадолу Кавагы (2 часа).</p>
|
||
</div>
|
||
</article>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="route" class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Маршрут на один день</h2>
|
||
<p>Оптимальный путь, чтобы увидеть максимум без спешки</p>
|
||
</div>
|
||
|
||
<div class="kt-ai-card" style="padding: var(--kt-ai-space-9);">
|
||
<div class="route-step">
|
||
<div class="route-time">09:00</div>
|
||
<div>
|
||
<strong>Айя-София</strong>
|
||
<p style="color: var(--kt-ai-fg-muted); margin: 4px 0 0;">Первым делом — пока нет очередей. Осмотр: 1-1.5 часа.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="route-step">
|
||
<div class="route-time">11:00</div>
|
||
<div>
|
||
<strong>Голубая мечеть</strong>
|
||
<p style="color: var(--kt-ai-fg-muted); margin: 4px 0 0;">Пешком 3 минуты. Бесплатный вход, закройте плечи и голову.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="route-step">
|
||
<div class="route-time">13:00</div>
|
||
<div>
|
||
<strong>Обед в Султанахмет</strong>
|
||
<p style="color: var(--kt-ai-fg-muted); margin: 4px 0 0;">Попробуйте кебабы или балык-экмек (рыба в хлебе).</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="route-step">
|
||
<div class="route-time">14:30</div>
|
||
<div>
|
||
<strong>Цистерна Базилика</strong>
|
||
<p style="color: var(--kt-ai-fg-muted); margin: 4px 0 0;">5 минут пешком. Прохладное подземелье — отдых от жары.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="route-step">
|
||
<div class="route-time">16:00</div>
|
||
<div>
|
||
<strong>Гранд-базар</strong>
|
||
<p style="color: var(--kt-ai-fg-muted); margin: 4px 0 0;">10 минут пешком. Время для шопинга и торга.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="route-step">
|
||
<div class="route-time">18:30</div>
|
||
<div>
|
||
<strong>Галатская башня</strong>
|
||
<p style="color: var(--kt-ai-fg-muted); margin: 4px 0 0;">Трамвай до Каракёй. Встречайте закат с высоты.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="route-step">
|
||
<div class="route-time">20:30</div>
|
||
<div>
|
||
<strong>Ужин в Бейоглу</strong>
|
||
<p style="color: var(--kt-ai-fg-muted); margin: 4px 0 0;">Рестораны на улице Истикляль. Попробуйте мезе и ракы.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="kt-ai-cta">
|
||
<div class="kt-ai-wrap">
|
||
<h2>Хотите индивидуальный маршрут?</h2>
|
||
<p>Помогу составить план поездки под ваши интересы — гастрономический, исторический или шопинг-тур</p>
|
||
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="https://wa.me/77771234567?text=Здравствуйте! Нужен маршрут по Стамбулу" style="margin-right: 12px;">Написать в WhatsApp</a>
|
||
<a class="kt-ai-btn" data-size="lg" href="https://t.me/yourusername">Telegram</a>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="kt-ai-wrap kt-ai-pagefoot">
|
||
<span>© 2026 Istanbul Top</span>
|
||
<span class="kt-ai-spacer"></span>
|
||
<span>Гид по Стамбулу</span>
|
||
</footer>
|
||
|
||
<script>
|
||
var io = new IntersectionObserver(function(entries) {
|
||
entries.forEach(function(e) { if (e.isIntersecting) e.target.classList.add('in'); });
|
||
}, { threshold: 0.15 });
|
||
document.querySelectorAll('.reveal').forEach(function(el) { io.observe(el); });
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|