Premium sayohat agentligi uchun Instagram bio'ga qo'yiladigan "havolalar sahifasi" (link-in-bio) qur. Bitta mustaqil HTML fayl bo'lsin — CSS <style> ichida, tashqi kutubxonasiz (faqat Google Fonts). Mustaqil saytga joylanadi, shuning uchun <head>'ga albatta <meta charset="utf-8"> va <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> qo'y — aks holda telefonda yozuvlar juda kichik chiqadi.
Brend: "Dio Trip" (o'zingnikiga almashtir). Barcha matnlar o'zbek tilida, real va ishonarli (lorem ishlatma). Logotipni men beraman — <img class="logo"> qilib qo'y (hozircha joy qoldir).
Dizayn yo'nalishi: to'q, hashamatli, tinch — "premium" his. Faqat brend ranglari:
- fon to'q yashil #1E3025, kartochka yuzasi #26382C (hover'da #2E4433), chegara #3B5343;
- urg'u oltin #D0B472 (yorqin variant #E7D29A, yumshoq fon rgba(208,180,114,.14));
- matn krem #F2EBDB, ikkinchi darajali matn #B9B098.
Tepada markazdan pastga tushadigan juda nozik oltin nur (radial-gradient, position:fixed). Shriftlar: Cormorant Garamond (sarlavha, serif) + Jost (qolgan hammasi).
Tuzilishi — markazda bitta ustun, max-width ~460px, ekran bo'yi bo'yicha vertikal markazda (min-height:100dvh, justify-content:center):
1. Kicker: "PREMIUM SAYOHAT AGENTLIGI" — kichik, oltin, keng harf oralig'i (letter-spacing ~.34em), katta harflarda.
2. Logo (~212px, ekran kichik bo'lsa 58vw), ostida chuqur yumshoq soya (drop-shadow).
3. Sarlavha (Cormorant, 30–40px, clamp): "Dunyo sizni <em>kutmoqda</em>" — "kutmoqda" kursiv va oltin rangda.
4. Qisqa lid: "Bizni ijtimoiy tarmoqlarda kuzating va sayohatingizni rejalashtiring." (maks ~30ch).
5. Ingichka ajratgich chiziq — chetlari shaffof, o'rtasi oltin (54px).
6. 4 ta katta havola-tugma (ustun, 13px oraliq). Har birida: chapda 46px oltin-shaffof kvadratcha ichida chiziqli SVG ikonka, o'rtada qalin nom + kichik izoh (uzun bo'lsa ellips bilan kesilsin), o'ngda "›" strelka:
- Instagram — @diotrip.uz
- Telegram kanal — Yangiliklar va sayohat takliflari
- Menejer bilan bog'lanish — Savol-javob, bron va narxlar (Telegram shaxsiy)
- Qo'ng'iroq qilish — +998 20 009 87 78 (href="tel:...")
Tashqi havolalar target="_blank" rel="noopener". Hover: 2px ko'tariladi, chegara oltinga aylanadi, fon ochroq, soya paydo bo'ladi, strelka o'ngga siljiydi. :focus-visible — oltin outline.
7. Footer: "© 2026 DIO TRIP · SAYOHAT AGENTLIGI" — kichik, katta harflar, brend nomi oltin.
Animatsiya: sahifa ochilganda har bir element pastdan ketma-ket paydo bo'lsin (opacity + translateY 12px, 0.55s, har biri ~0.05–0.07s kechikish bilan). prefers-reduced-motion'da animatsiyani o'chir.
Talablar: asosan mobil uchun, lekin kompyuterda ham chiroyli markazda tursin. Emoji ishlatma — faqat toza SVG ikonkalar. Oddiy Linktree'ga o'xshamasin: kam element, ko'p havo, hashamatli tipografiya.
Создай страницу ссылок (link-in-bio) для Instagram-био премиального туристического агентства. Это должен быть один самостоятельный HTML-файл — CSS внутри <style>, без внешних библиотек (только Google Fonts). Страница будет на отдельном хостинге, поэтому в <head> обязательно добавь <meta charset="utf-8"> и <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> — иначе на телефоне текст будет слишком мелким.
Бренд: «Dio Trip» (замени на свой). Все тексты на русском языке, реальные и правдоподобные (не используй lorem). Логотип я дам сам — вставь его как <img class="logo"> (пока оставь место).
Направление дизайна: тёмное, роскошное, спокойное — ощущение «премиума». Только цвета бренда:
- фон тёмно-зелёный #1E3025, поверхность карточек #26382C (при наведении #2E4433), граница #3B5343;
- акцент золотой #D0B472 (яркий вариант #E7D29A, мягкий фон rgba(208,180,114,.14));
- текст кремовый #F2EBDB, второстепенный текст #B9B098.
Сверху по центру — очень тонкое золотое свечение (radial-gradient, position:fixed). Шрифты: Cormorant Garamond (заголовок, serif) + Jost (всё остальное).
Структура — одна колонка по центру, max-width ~460px, по центру экрана по вертикали (min-height:100dvh, justify-content:center):
1. Кикер: «ПРЕМИАЛЬНОЕ ТУРАГЕНТСТВО» — мелкий, золотой, с широким межбуквенным интервалом (letter-spacing ~.34em), заглавными.
2. Логотип (~212px, на маленьком экране 58vw) с глубокой мягкой тенью (drop-shadow).
3. Заголовок (Cormorant, 30–40px, clamp): «Мир <em>ждёт</em> вас» — «ждёт» курсивом и золотом.
4. Короткий лид: «Следите за нами в соцсетях и планируйте своё путешествие.» (макс. ~30ch).
5. Тонкая линия-разделитель — прозрачные края, золотой центр (54px).
6. 4 крупные кнопки-ссылки (колонка, отступ 13px). В каждой: слева квадрат 46px с полупрозрачным золотым фоном и линейной SVG-иконкой, по центру жирное название + мелкое пояснение (длинное обрезается многоточием), справа стрелка «›»:
- Instagram — @diotrip.uz
- Telegram-канал — Новости и предложения по турам
- Связаться с менеджером — Вопросы, бронь и цены (личный Telegram)
- Позвонить — +998 20 009 87 78 (href="tel:...")
Внешние ссылки target="_blank" rel="noopener". Hover: поднимается на 2px, граница становится золотой, фон светлее, появляется тень, стрелка сдвигается вправо. :focus-visible — золотой outline.
7. Футер: «© 2026 DIO TRIP · ТУРАГЕНТСТВО» — мелкий, заглавными, название бренда золотом.
Анимация: при загрузке каждый элемент появляется снизу по очереди (opacity + translateY 12px, 0.55s, задержка ~0.05–0.07s на каждый). При prefers-reduced-motion анимацию отключи.
Требования: в первую очередь для мобильных, но и на компьютере красиво по центру. Не используй эмодзи — только чистые SVG-иконки. Не должно быть похоже на обычный Linktree: мало элементов, много воздуха, роскошная типографика.
Build a link-in-bio page for the Instagram bio of a premium travel agency. It must be one standalone HTML file — CSS inside <style>, no external libraries (Google Fonts only). It will be hosted on its own, so put <meta charset="utf-8"> and <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> in the <head> — otherwise the text renders tiny on phones.
Brand: "Dio Trip" (swap in your own). All texts in English, real and believable (don't use lorem). I'll provide the logo — add it as <img class="logo"> (leave a slot for now).
Design direction: dark, luxurious, calm — a "premium" feel. Brand colors only:
- background deep green #1E3025, card surface #26382C (#2E4433 on hover), border #3B5343;
- accent gold #D0B472 (bright variant #E7D29A, soft fill rgba(208,180,114,.14));
- text cream #F2EBDB, secondary text #B9B098.
A very subtle gold glow falling from the top center (radial-gradient, position:fixed). Fonts: Cormorant Garamond (headline, serif) + Jost (everything else).
Structure — a single centered column, max-width ~460px, vertically centered on screen (min-height:100dvh, justify-content:center):
1. Kicker: "PREMIUM TRAVEL AGENCY" — small, gold, wide letter-spacing (~.34em), uppercase.
2. Logo (~212px, 58vw on small screens) with a deep soft shadow (drop-shadow).
3. Headline (Cormorant, 30–40px, clamp): "The world is <em>waiting</em>" — "waiting" in italic gold.
4. A short lede: "Follow us on social media and plan your next journey." (max ~30ch).
5. A thin divider line — transparent ends, gold center (54px).
6. 4 large link buttons (a column, 13px gap). Each has: a 46px square with a translucent gold fill and a line SVG icon on the left, a bold label + small subtitle in the middle (truncated with an ellipsis if long), a "›" arrow on the right:
- Instagram — @diotrip.uz
- Telegram channel — News and travel offers
- Talk to a manager — Questions, bookings and prices (personal Telegram)
- Call us — +998 20 009 87 78 (href="tel:...")
External links target="_blank" rel="noopener". Hover: lifts 2px, border turns gold, background lightens, a shadow appears, the arrow slides right. :focus-visible — a gold outline.
7. Footer: "© 2026 DIO TRIP · TRAVEL AGENCY" — small, uppercase, brand name in gold.
Animation: on load each element rises in one after another (opacity + translateY 12px, 0.55s, ~0.05–0.07s stagger). Disable the animation under prefers-reduced-motion.
Requirements: mobile first, but it should also sit nicely centered on desktop. No emoji — clean SVG icons only. It must not look like a plain Linktree: few elements, lots of air, luxurious typography.