216 lines
13 KiB
HTML
216 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Туркестан — древний город Великого шёлкового пути</title>
|
||
<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>
|
||
:root{--ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;--white:#fff;--gray-500:#5B6573;--gray-100:#F2F4F7;--sand:#F5F0E8;--gold:#D4AF37}
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
body{font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--ink);background:var(--white)}
|
||
.container{max-width:1140px;margin:0 auto;padding:80px 24px}
|
||
.hero{background:linear-gradient(135deg,var(--ink) 0%,#1a2030 100%);color:var(--white);padding:120px 24px;text-align:center}
|
||
.hero h1{font-size:clamp(36px,6vw,64px);font-weight:800;line-height:1.1;margin-bottom:24px}
|
||
.hero p{font-size:clamp(18px,3vw,22px);color:#9aa3b2;max-width:700px;margin:0 auto 40px}
|
||
.hero-img{max-width:900px;width:100%;height:clamp(200px,40vw,400px);object-fit:cover;border-radius:16px;margin-top:40px;box-shadow:0 20px 60px rgba(0,0,0,0.4)}
|
||
.section{padding:80px 24px}
|
||
.section h2{font-size:clamp(28px,4vw,42px);font-weight:700;margin-bottom:40px;text-align:center}
|
||
.timeline{position:relative;max-width:800px;margin:0 auto}
|
||
.timeline-item{display:flex;gap:24px;margin-bottom:40px;align-items:flex-start}
|
||
.timeline-year{background:var(--cyan);color:var(--ink);padding:8px 16px;border-radius:8px;font-weight:700;white-space:nowrap}
|
||
.timeline-content{background:var(--gray-100);padding:24px;border-radius:12px;flex:1}
|
||
.timeline-content h3{font-size:22px;font-weight:700;margin-bottom:12px}
|
||
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;max-width:1140px;margin:0 auto}
|
||
.card{background:var(--sand);border-radius:16px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.08);transition:transform 0.3s ease}
|
||
.card:hover{transform:translateY(-8px)}
|
||
.card-img{width:100%;height:220px;object-fit:cover}
|
||
.card-content{padding:24px}
|
||
.card-content h3{font-size:22px;font-weight:700;margin-bottom:12px;color:var(--ink)}
|
||
.card-content p{color:var(--gray-500);line-height:1.7}
|
||
.modern-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px;max-width:1140px;margin:0 auto}
|
||
.modern-item{text-align:center}
|
||
.modern-item img{width:100%;height:200px;object-fit:cover;border-radius:12px;margin-bottom:16px}
|
||
.modern-item h3{font-size:20px;font-weight:700;margin-bottom:8px}
|
||
.modern-item p{color:var(--gray-500)}
|
||
.cta{background:var(--cyan-50);text-align:center;padding:60px 24px;border-radius:16px;max-width:900px;margin:0 auto}
|
||
.cta h3{font-size:28px;font-weight:700;margin-bottom:16px}
|
||
.cta p{color:var(--gray-500);margin-bottom:24px}
|
||
.btn{display:inline-block;background:var(--cyan);color:var(--ink);padding:14px 32px;border-radius:8px;font-weight:700;text-decoration:none;transition:background 0.3s ease}
|
||
.btn:hover{background:#00c4dc}
|
||
footer{background:var(--ink);color:var(--white);text-align:center;padding:40px 24px}
|
||
footer p{color:#9aa3b2}
|
||
.reveal{opacity:0;transform:translateY(30px);transition:opacity 0.6s ease,transform 0.6s ease}
|
||
.reveal.in{opacity:1;transform:none}
|
||
@media(max-width:640px){.timeline-item{flex-direction:column;gap:12px}.container{padding:48px 20px}.section{padding:48px 20px}}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<section class="hero">
|
||
<h1>Туркестан</h1>
|
||
<p>Древний город на Великом шёлковом пути, духовный центр тюркского мира и место паломничества вот уже 1500 лет</p>
|
||
<img class="hero-img" src="https://picsum.photos/seed/mausoleum/1200/600" alt="Мавзолей Ходжа Ахмеда Яссауи">
|
||
</section>
|
||
|
||
<section class="section" id="history">
|
||
<div class="container">
|
||
<h2 class="reveal">История Туркестана</h2>
|
||
<div class="timeline">
|
||
<div class="timeline-item reveal">
|
||
<div class="timeline-year">VI век</div>
|
||
<div class="timeline-content">
|
||
<h3>Основание города</h3>
|
||
<p>Город возник как крепость на торговом пути между Китаем и Византией. Через него шли караваны с шёлком, специями и драгоценностями.</p>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item reveal">
|
||
<div class="timeline-year">XII век</div>
|
||
<div class="timeline-content">
|
||
<h3>Эпоха Яссауи</h3>
|
||
<p>В Туркестане жил и творил великий суфийский поэт Ходжа Ахмед Яссауи. Его учение распространилось по всему тюркскому миру.</p>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item reveal">
|
||
<div class="timeline-year">1389–1405</div>
|
||
<div class="timeline-content">
|
||
<h3>Мавзолей от Тамерлана</h3>
|
||
<p>По приказу эмира Тимура над могилой Яссауи воздвигнут величественный мавзолей — шедевр средневековой архитектуры.</p>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item reveal">
|
||
<div class="timeline-year">XVI–XVIII вв.</div>
|
||
<div class="timeline-content">
|
||
<h3>Столица Казахского ханства</h3>
|
||
<p>Туркестан стал духовной и политической столицей Казахского ханства. Здесь хоронили ханов и биев.</p>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item reveal">
|
||
<div class="timeline-year">1864</div>
|
||
<div class="timeline-content">
|
||
<h3>В составе Российской империи</h3>
|
||
<p>После присоединения к России город становится центром Туркестанского генерал-губернаторства.</p>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item reveal">
|
||
<div class="timeline-year">1991</div>
|
||
<div class="timeline-content">
|
||
<h3>Независимый Казахстан</h3>
|
||
<p>Туркестан получает статус областного центра и становится символом национального возрождения.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" style="background:var(--sand)" id="old">
|
||
<div class="container">
|
||
<h2 class="reveal">Старый Туркестан</h2>
|
||
<div class="cards">
|
||
<div class="card reveal">
|
||
<img class="card-img" src="https://picsum.photos/seed/yassawi/600/400" alt="Мавзолей Яссауи">
|
||
<div class="card-content">
|
||
<h3>Мавзолей Ходжа Ахмеда Яссауи</h3>
|
||
<p>Величественное сооружение высотой 38,7 метра. Самый большой кирпичный купол в Центральной Азии. Объект Всемирного наследия ЮНЕСКО.</p>
|
||
</div>
|
||
</div>
|
||
<div class="card reveal">
|
||
<img class="card-img" src="https://picsum.photos/seed/karavan/600/400" alt="Караван-сарай">
|
||
<div class="card-content">
|
||
<h3>Исторический караван-сарай</h3>
|
||
<p>Древние постоялые дворы, где останавливались купцы. Восстановлены в традиционном стиле с арочными галереями.</p>
|
||
</div>
|
||
</div>
|
||
<div class="card reveal">
|
||
<img class="card-img" src="https://picsum.photos/seed/banya/600/400" alt="Восточная баня">
|
||
<div class="card-content">
|
||
<h3>Восточная баня</h3>
|
||
<p>Историческая баня XVI века с системой подогрева полов. Демонстрирует высокий уровень средневековой инженерии.</p>
|
||
</div>
|
||
</div>
|
||
<div class="card reveal">
|
||
<img class="card-img" src="https://picsum.photos/seed/kurgan/600/400" alt="Курган-тобе">
|
||
<div class="card-content">
|
||
<h3>Городище Курган-тобе</h3>
|
||
<p>Археологический памятник — место древнего поселения. Раскопки показывают многовековую историю города.</p>
|
||
</div>
|
||
</div>
|
||
<div class="card reveal">
|
||
<img class="card-img" src="https://picsum.photos/seed/mosque/600/400" alt="Старая мечеть">
|
||
<div class="card-content">
|
||
<h3>Исторические мечети</h3>
|
||
<p>Древние культовые сооружения с традиционной архитектурой, орнаментами и каллиграфией.</p>
|
||
</div>
|
||
</div>
|
||
<div class="card reveal">
|
||
<img class="card-img" src="https://picsum.photos/seed/street/600/400" alt="Старые улочки">
|
||
<div class="card-content">
|
||
<h3>Старые улочки</h3>
|
||
<p>Атмосферные кварталы с глинобитными домами, узкими переулками и восточным колоритом.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="modern">
|
||
<div class="container">
|
||
<h2 class="reveal">Современный Туркестан</h2>
|
||
<div class="modern-grid">
|
||
<div class="modern-item reveal">
|
||
<img src="https://picsum.photos/seed/newturk/800/500" alt="Новый центр">
|
||
<h3>Новый административный центр</h3>
|
||
<p>Современные здания правительства Туркестанской области с национальной архитектурой</p>
|
||
</div>
|
||
<div class="modern-item reveal">
|
||
<img src="https://picsum.photos/seed/university/800/500" alt="Университет">
|
||
<h3>Международный университет</h3>
|
||
<p>Крупный образовательный центр, привлекающий студентов со всей Центральной Азии</p>
|
||
</div>
|
||
<div class="modern-item reveal">
|
||
<img src="https://picsum.photos/seed/park/800/500" alt="Парк">
|
||
<h3>Парки и зоны отдыха</h3>
|
||
<p>Современные благоустроенные парки с фонтанами и пешеходными зонами</p>
|
||
</div>
|
||
<div class="modern-item reveal">
|
||
<img src="https://picsum.photos/seed/hotel/800/500" alt="Отели">
|
||
<h3>Туристическая инфраструктура</h3>
|
||
<p>Новые отели, рестораны и сервисы для растущего потока туристов</p>
|
||
</div>
|
||
<div class="modern-item reveal">
|
||
<img src="https://picsum.photos/seed/museum/800/500" alt="Музей">
|
||
<h3>Культурные объекты</h3>
|
||
<p>Современные музеи, выставочные залы и культурные центры</p>
|
||
</div>
|
||
<div class="modern-item reveal">
|
||
<img src="https://picsum.photos/seed/airport/800/500" alt="Аэропорт">
|
||
<h3>Транспортная доступность</h3>
|
||
<p>Новый аэропорт и развитая транспортная сеть связывают город со всем миром</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="cta reveal">
|
||
<h3>Посетите Туркестан</h3>
|
||
<p>Прикоснитесь к живой истории Великого шёлкового пути и почувствуйте духовную силу древнего города</p>
|
||
<a href="https://www.google.com/maps/search/Turkistan+Kazakhstan" target="_blank" class="btn">Показать на карте</a>
|
||
</div>
|
||
</section>
|
||
|
||
<footer>
|
||
<p>© 2026 Туркестан — духовный центр тюркского мира</p>
|
||
<p style="margin-top:8px;font-size:14px">Сайт создан в образовательных целях</p>
|
||
</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>
|