304 lines
15 KiB
HTML
304 lines
15 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>">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&family=Unbounded:wght@500;700;900&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root{--ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;--white:#fff;--gray-500:#5B6573;--gray-100:#F2F4F7;--gold:#E8B730;--sky:#2A9D8F}
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
body{font:17px/1.6 'Manrope',sans-serif;color:var(--ink);background:var(--white)}
|
||
h1,h2,h3{font-family:'Unbounded',sans-serif}
|
||
.container{max-width:1140px;margin:0 auto;padding:80px 24px}
|
||
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
|
||
.reveal.in{opacity:1;transform:none}
|
||
|
||
/* Hero */
|
||
.hero{background:linear-gradient(135deg,#0F1218 0%,#1a2332 50%,#0F1218 100%);color:var(--white);text-align:center;padding:120px 24px 80px;position:relative;overflow:hidden}
|
||
.hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:120px;background:linear-gradient(transparent,var(--white))}
|
||
.hero h1{font-size:64px;font-weight:900;line-height:1.05;margin-bottom:20px;background:linear-gradient(135deg,var(--cyan),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
|
||
.hero p{font-size:22px;color:#9aa3b2;max-width:680px;margin:0 auto 36px;line-height:1.5}
|
||
.hero .flag{font-size:80px;margin-bottom:24px;display:block}
|
||
.stats{display:flex;justify-content:center;gap:48px;flex-wrap:wrap;margin-top:40px}
|
||
.stat{text-align:center}
|
||
.stat .num{font-family:'Unbounded',sans-serif;font-size:42px;font-weight:900;color:var(--cyan);display:block}
|
||
.stat .label{font-size:14px;color:#9aa3b2;text-transform:uppercase;letter-spacing:2px;margin-top:4px}
|
||
|
||
/* Sections */
|
||
.section{padding:80px 24px}
|
||
.section h2{font-size:36px;font-weight:700;margin-bottom:16px;text-align:center}
|
||
.section .subtitle{color:var(--gray-500);text-align:center;max-width:600px;margin:0 auto 48px;font-size:18px}
|
||
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;max-width:1140px;margin:0 auto}
|
||
.card{background:var(--gray-100);border-radius:16px;padding:32px;transition:transform .3s,box-shadow .3s}
|
||
.card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.08)}
|
||
.card .emoji{font-size:48px;margin-bottom:16px;display:block}
|
||
.card h3{font-size:20px;font-weight:700;margin-bottom:8px}
|
||
.card p{color:var(--gray-500);font-size:15px;line-height:1.6}
|
||
|
||
/* Geography */
|
||
.geo{background:var(--ink);color:var(--white);text-align:center}
|
||
.geo h2{color:var(--white)}
|
||
.geo .subtitle{color:#9aa3b2}
|
||
.geo .fact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;max-width:900px;margin:0 auto}
|
||
.geo .fact{background:rgba(255,255,255,.06);border-radius:16px;padding:28px 20px}
|
||
.geo .fact .num{font-family:'Unbounded',sans-serif;font-size:32px;font-weight:900;color:var(--cyan);display:block;margin-bottom:8px}
|
||
.geo .fact .txt{color:#9aa3b2;font-size:14px;line-height:1.5}
|
||
|
||
/* Culture */
|
||
.culture{background:linear-gradient(180deg,var(--white) 0%,var(--cyan-50) 100%)}
|
||
|
||
/* Cities */
|
||
.cities .city-card{background:var(--gray-100);border-radius:16px;overflow:hidden;transition:transform .3s}
|
||
.cities .city-card:hover{transform:translateY(-4px)}
|
||
.cities .city-card img{width:100%;height:220px;object-fit:cover;display:block}
|
||
.cities .city-info{padding:24px}
|
||
.cities .city-info h3{margin-bottom:6px}
|
||
.cities .city-info p{color:var(--gray-500);font-size:15px}
|
||
|
||
/* Food */
|
||
.food .card{border-left:4px solid var(--gold)}
|
||
.food .card .emoji{font-size:40px}
|
||
|
||
/* Timeline */
|
||
.timeline{max-width:700px;margin:0 auto;position:relative}
|
||
.timeline::before{content:'';position:absolute;left:20px;top:0;bottom:0;width:3px;background:var(--cyan);border-radius:2px}
|
||
.tl-item{display:flex;gap:24px;margin-bottom:40px;position:relative}
|
||
.tl-dot{width:42px;height:42px;min-width:42px;background:var(--cyan);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:900;color:var(--ink);z-index:1}
|
||
.tl-content h3{font-size:18px;margin-bottom:4px}
|
||
.tl-content p{color:var(--gray-500);font-size:15px}
|
||
|
||
/* CTA */
|
||
.cta{background:linear-gradient(135deg,var(--ink) 0%,#1a2332 100%);color:var(--white);text-align:center;padding:80px 24px}
|
||
.cta h2{color:var(--white);margin-bottom:12px}
|
||
.cta p{color:#9aa3b2;max-width:500px;margin:0 auto 32px;font-size:18px}
|
||
|
||
/* Footer */
|
||
footer{text-align:center;padding:40px 24px;color:var(--gray-500);font-size:14px}
|
||
|
||
@media(max-width:640px){
|
||
.hero h1{font-size:36px}
|
||
.hero p{font-size:18px}
|
||
.section h2{font-size:28px}
|
||
.stats{gap:24px}
|
||
.stat .num{font-size:32px}
|
||
.container{padding:48px 20px}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<section class="hero">
|
||
<span class="flag">🇰🇿</span>
|
||
<h1>Казахстан</h1>
|
||
<p>Сердце Евразии — девятая по территории страна мира, где древние степи встречаются с небоскрёбами будущего</p>
|
||
<div class="stats">
|
||
<div class="stat"><span class="num">2.7 млн</span><span class="label">км² площадь</span></div>
|
||
<div class="stat"><span class="num">20 млн</span><span class="label">население</span></div>
|
||
<div class="stat"><span class="num">14</span><span class="label">областей</span></div>
|
||
<div class="stat"><span class="num">130+</span><span class="label">народов</span></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section reveal">
|
||
<h2>География</h2>
|
||
<p class="subtitle">От каспийских берегов до алтайских гор</p>
|
||
<div class="card-grid">
|
||
<div class="card">
|
||
<span class="emoji">🏔️</span>
|
||
<h3>Горы</h3>
|
||
<p>Тянь-Шань, Чу-Илийские горы, Алтай. Высшая точка — Хан-Тенгри (7010 м)</p>
|
||
</div>
|
||
<div class="card">
|
||
<span class="emoji">🌊</span>
|
||
<h3>Каспийское море</h3>
|
||
<p>Крупнейшее озеро мира. Побережье тянется на 1894 км — курорты, пляжи и нефтяные месторождения</p>
|
||
</div>
|
||
<div class="card">
|
||
<span class="emoji">🏜️</span>
|
||
<h3>Степи</h3>
|
||
<p>Бескрайние казахстанские степи — одна из крупнейших равнин мира, историческая родина кочевников</p>
|
||
</div>
|
||
<div class="card">
|
||
<span class="emoji">🌾</span>
|
||
<h3>Природа</h3>
|
||
<p>Балхаш, Алаколь, Маркаколь — более 48 000 рек и 45 000 озёр</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section geo reveal">
|
||
<div class="container">
|
||
<h2>Цифры и факты</h2>
|
||
<p class="subtitle">Казахстан в цифрах</p>
|
||
<div class="fact-grid">
|
||
<div class="fact"><span class="num">9</span><span class="txt">по величине<br>в мире</span></div>
|
||
<div class="fact"><span class="num">1991</span><span class="txt">год независимости<br>от СССР</span></div>
|
||
<div class="fact"><span class="num">3</span><span class="txt">столицы<br>в истории</span></div>
|
||
<div class="fact"><span class="num">70+</span><span class="txt">тонн золота<br>в год</span></div>
|
||
<div class="fact"><span class="num">1</span><span class="txt">космодром Байконур<br>в космос</span></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section culture reveal">
|
||
<h2>Культура и традиции</h2>
|
||
<p class="subtitle">Тысячелетия кочевой цивилизации</p>
|
||
<div class="card-grid">
|
||
<div class="card">
|
||
<span class="emoji">🦅</span>
|
||
<h3>Беркутчи</h3>
|
||
<p>Традиция соколиной охоты с орлами-беркутами, признанная ЮНЕСКО нематериальным наследием</p>
|
||
</div>
|
||
<div class="card">
|
||
<span class="emoji">🎪</span>
|
||
<h3>Юрта</h3>
|
||
<p>Легко разборное жилище кочевников — символ гостеприимства и свободы степного народа</p>
|
||
</div>
|
||
<div class="card">
|
||
<span class="emoji">🎶</span>
|
||
<h3>Домбра</h3>
|
||
<p>Двухструнный щипковый инструмент — душа казахской музыки и кюев (эпических песен)</p>
|
||
</div>
|
||
<div class="card">
|
||
<span class="emoji">🤼</span>
|
||
<h3>Байге</h3>
|
||
<p>Конные скачки на длинные дистанции — древнее развлечение, где побеждает выносливость лошадей</p>
|
||
</div>
|
||
<div class="card">
|
||
<span class="emoji">🎭</span>
|
||
<h3>Наурыз</h3>
|
||
<p>Праздник весеннего равноденствия — 22 марта. 7 блюд, гуляния и обновление</p>
|
||
</div>
|
||
<div class="card">
|
||
<span class="emoji">📖</span>
|
||
<h3>Абай Кунанбаев</h3>
|
||
<p>Великий казахский поэт и мыслитель, создавший философскую прозу и обогативший язык</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section cities reveal">
|
||
<h2>Города</h2>
|
||
<p class="subtitle">Мегаполисы и жемчужины Казахстана</p>
|
||
<div class="card-grid">
|
||
<div class="city-card">
|
||
<img src="https://picsum.photos/seed/astana-kz/600/400" alt="Астана" loading="lazy">
|
||
<div class="city-info">
|
||
<h3>Астана</h3>
|
||
<p>Столица с 1997 года. Город будущего с Байтереком, Хан-Шатыром и самыми высокими фонтанами в Евразии</p>
|
||
</div>
|
||
</div>
|
||
<div class="city-card">
|
||
<img src="https://picsum.photos/seed/almaty-kz/600/400" alt="Алматы" loading="lazy">
|
||
<div class="city-info">
|
||
<h3>Алматы</h3>
|
||
<p>Бывшая столица и культурный центр. Горы за городом, Медеу, Шымбулак и знаменитые алматинские яблоки</p>
|
||
</div>
|
||
</div>
|
||
<div class="city-card">
|
||
<img src="https://picsum.photos/seed/shymkent-kz/600/400" alt="Шымкент" loading="lazy">
|
||
<div class="city-info">
|
||
<h3>Шымкент</h3>
|
||
<p>Третий по величине город. Южные ворота Казахстана — жаркий климат, древняя история и гостеприимство</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section food reveal">
|
||
<h2>Кухня</h2>
|
||
<p class="subtitle">Вкус степи — просто и сытно</p>
|
||
<div class="card-grid">
|
||
<div class="card">
|
||
<span class="emoji">🥟</span>
|
||
<h3>Бешбармак</h3>
|
||
<p>Главное блюдо — отварное мясо с лапшой и луковым соусом. Название означает «пять пальцев»</p>
|
||
</div>
|
||
<div class="card">
|
||
<span class="emoji">🫕</span>
|
||
<h3>Кумыс</h3>
|
||
<p>Ферментированное кобылье молоко — тонизирующий напиток с древних времён</p>
|
||
</div>
|
||
<div class="card">
|
||
<span class="emoji">🫓</span>
|
||
<h3>Баурсаки</h3>
|
||
<p>Жареные тестовые шарики — обязательный атрибут каждого застолья и праздника</p>
|
||
</div>
|
||
<div class="card">
|
||
<span class="emoji">🍵</span>
|
||
<h3>Чай с молоком</h3>
|
||
<p>Казахи пьют чай с молоком и солью — гостям наливают первым, это знак уважения</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section reveal">
|
||
<h2>История</h2>
|
||
<p class="subtitle">Путь от кочевников до космоса</p>
|
||
<div class="timeline">
|
||
<div class="tl-item">
|
||
<div class="tl-dot">1</div>
|
||
<div class="tl-content">
|
||
<h3>Казахское ханство</h3>
|
||
<p>1465 год — образование Казахского ханства. Формирование народа и кочевого уклада</p>
|
||
</div>
|
||
</div>
|
||
<div class="tl-item">
|
||
<div class="tl-dot">2</div>
|
||
<div class="tl-content">
|
||
<h3>Великий Шёлковый путь</h3>
|
||
<p>Территория современного Казахстана — ключевой транзит между Европой и Азией</p>
|
||
</div>
|
||
</div>
|
||
<div class="tl-item">
|
||
<div class="tl-dot">3</div>
|
||
<div class="tl-content">
|
||
<h3>Российская империя</h3>
|
||
<p>XVIII–XIX века — присоединение к Российской империи, оседлый образ жизни</p>
|
||
</div>
|
||
</div>
|
||
<div class="tl-item">
|
||
<div class="tl-dot">4</div>
|
||
<div class="tl-content">
|
||
<h3>СССР и Байконур</h3>
|
||
<p>1955 — запуск первого космодрома. 1961 — Гагарин стартует с Байконура в космос</p>
|
||
</div>
|
||
</div>
|
||
<div class="tl-item">
|
||
<div class="tl-dot">5</div>
|
||
<div class="tl-content">
|
||
<h3>Независимость</h3>
|
||
<p>16 декабря 1991 — Казахстан становится последней республикой, объявившей независимость от СССР</p>
|
||
</div>
|
||
</div>
|
||
<div class="tl-item">
|
||
<div class="tl-dot">6</div>
|
||
<div class="tl-content">
|
||
<h3>Новая столица</h3>
|
||
<p>1997 — перенос столицы из Алматы в Акмолу (Астану). Строительство города будущего</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="cta reveal">
|
||
<h2>Спасибо за внимание!</h2>
|
||
<p>Казахстан — страна контрастов: древние традиции и современные мегаполисы, бескрайние степи и высокие горы</p>
|
||
</section>
|
||
|
||
<footer>
|
||
Презентация о Казахстане · 2025
|
||
</footer>
|
||
|
||
<script>
|
||
var io=new IntersectionObserver(function(entries){
|
||
entries.forEach(function(e){if(e.isIntersecting)e.target.classList.add('in')});
|
||
},{threshold:.12});
|
||
document.querySelectorAll('.reveal').forEach(function(el){io.observe(el)});
|
||
</script>
|
||
</body>
|
||
</html>
|