update astra

This commit is contained in:
alexencom committed 2026-10-31 00:11:26 +03:00
1 parent 9a75e6d45a
commit 6addd97a93
14 files changed
+1628 -501

No files matched your search

-18
View File
@@ -1,18 +0,0 @@
# Сайт студии мультфильмов «О'ляпка»
Статический адаптивный сайт для студии ИИ-анимации.
## 📁 Структура
- `index.html` — Главная
- `services.html` — Услуги
- `portfolio.html` — Примеры работ и отзывы
- `contacts.html` — Контакты (taplink-стиль)
- `legal.html` — Юридические документы
- `css/style.css` — Стили
- `js/main.js` — Скрипты (cookie, меню, цели метрики)
## 🚀 Деплой на VPS с Nginx
### 1. Загрузка файлов
```bash
scp -r ./* user@your-server:/var/www/olyapka-studio/
+227
View File
@@ -0,0 +1,227 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Open Graph -->
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&amp;family=Caveat:wght@500;700&amp;display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<!-- JSON-LD: 3 услуги -->
<!-- Yandex.Metrika -->
<title>Рекламные анимационные ролики для бизнеса — О’ляпка</title>
<meta name="description" content="ИИ-анимация для рекламы, презентации продукта и истории бренда. Объясняем идеи через персонажей и сюжет.">
<link rel="canonical" href="https://olapka.ru/business-animation.html">
<meta name="robots" content="index, follow, max-image-preview:large">
<meta property="og:type" content="website">
<meta property="og:title" content="Рекламные анимационные ролики для бизнеса — О’ляпка">
<meta property="og:description" content="ИИ-анимация для рекламы, презентации продукта и истории бренда. Объясняем идеи через персонажей и сюжет.">
<meta property="og:url" content="https://olapka.ru/business-animation.html">
<meta property="og:image" content="https://olapka.ru/img/og-cover.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="О’ляпка — мультфильмы на заказ">
<meta property="og:site_name" content="Студия О’ляпка">
<meta property="og:locale" content="ru_RU">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://olapka.ru/img/og-cover.jpg">
<script type="application/ld+json">{
"@context": "https://schema.org",
"@graph": [
{
"@type": "Organization",
"@id": "https://olapka.ru/#organization",
"name": "Студия мультфильмов О’ляпка",
"url": "https://olapka.ru/",
"logo": "https://olapka.ru/img/favicon.svg",
"telephone": "+79160957383",
"sameAs": [
"https://t.me/YuliaAnimation",
"https://www.instagram.com/olapka_animatioh",
"https://vk.com/club240204788"
],
"contactPoint": {
"@type": "ContactPoint",
"telephone": "+79160957383",
"contactType": "customer service",
"availableLanguage": "ru",
"url": "https://olapka.ru/contacts.html"
}
},
{
"@type": "WebSite",
"@id": "https://olapka.ru/#website",
"url": "https://olapka.ru/",
"name": "Студия О’ляпка",
"inLanguage": "ru",
"publisher": {
"@id": "https://olapka.ru/#organization"
}
},
{
"@type": "WebPage",
"@id": "https://olapka.ru/business-animation.html#webpage",
"url": "https://olapka.ru/business-animation.html",
"name": "Рекламные анимационные ролики для бизнеса — О’ляпка",
"description": "ИИ-анимация для рекламы, презентации продукта и истории бренда. Объясняем идеи через персонажей и сюжет.",
"inLanguage": "ru",
"isPartOf": {
"@id": "https://olapka.ru/#website"
},
"about": {
"@id": "https://olapka.ru/#organization"
},
"breadcrumb": {
"@id": "https://olapka.ru/business-animation.html#breadcrumbs"
},
"mainEntity": {
"@id": "https://olapka.ru/business-animation.html#service"
}
},
{
"@type": "BreadcrumbList",
"@id": "https://olapka.ru/business-animation.html#breadcrumbs",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Главная",
"item": "https://olapka.ru/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Услуги",
"item": "https://olapka.ru/services.html"
},
{
"@type": "ListItem",
"position": 3,
"name": "Рекламные анимационные ролики для бизнеса",
"item": "https://olapka.ru/business-animation.html"
}
]
},
{
"@type": "Service",
"@id": "https://olapka.ru/business-animation.html#service",
"name": "Рекламные анимационные ролики для бизнеса",
"description": "ИИ-анимация для рекламы, презентации продукта и истории бренда. Объясняем идеи через персонажей и сюжет.",
"serviceType": "Рекламные анимационные ролики для бизнеса",
"url": "https://olapka.ru/business-animation.html",
"provider": {
"@id": "https://olapka.ru/#organization"
}
}
]
}</script>
</head>
<body>
<a class="skip-link" href="#main-content">Перейти к содержимому</a><div class="cookie-banner" id="cookieBanner" role="region" aria-label="Настройки аналитики" hidden>
<div class="cookie-text">Разрешить аналитику для улучшения сайта? <a href="legal.html#cookies">Подробнее</a>
</div>
<div class="cookie-actions">
<button class="cookie-btn" id="cookieAccept" type="button">Разрешить</button><button class="cookie-btn cookie-decline" id="cookieDecline" type="button">Отклонить</button>
</div>
</div>
<header class="header">
<div class="container header-inner">
<a href="index.html" class="logo"><span class="logo-bird">🐦</span><span class="logo-text">О'ЛЯПКА</span></a>
<nav class="nav" id="nav" aria-label="Основная навигация">
<a href="index.html" class="nav-link">Главная</a>
<a href="services.html" class="nav-link active">Услуги</a>
<a href="portfolio.html" class="nav-link">Работы</a>
<a href="contacts.html" class="nav-link">Контакты</a>
</nav>
<a href="contacts.html" class="btn btn-primary" data-goal="order_header">Заказать</a>
<button class="burger" id="burger" aria-label="Меню" type="button" aria-expanded="false" aria-controls="nav"><span></span><span></span><span></span></button>
</div>
</header>
<main id="main-content" tabindex="-1"><nav class="container breadcrumbs" aria-label="Хлебные крошки"><ol>
<li><a href="index.html">Главная</a></li>
<li><a href="services.html">Услуги</a></li>
<li><span aria-current="page">Рекламные анимационные ролики для бизнеса</span></li>
</ol></nav><section class="page-hero"><div class="container">
<h1 class="page-title">Рекламные анимационные ролики для бизнеса</h1>
<p class="page-subtitle">ИИ-анимация для рекламы, презентации продукта и истории бренда. Объясняем идеи через персонажей и сюжет.</p>
<p class="service-cta"><a class="btn btn-primary" href="contacts.html" data-goal="order_service">Обсудить мультфильм</a></p>
</div></section><section class="section service-block alt" id="business">
<div class="container">
<div class="service-head">
<span class="service-tag">🚀 Для бизнеса</span>
<h2>Рекламные ИИ-мультики</h2>
<p class="service-lead">Решаем задачи бизнеса через анимацию: от вирусной рекламы до имиджевых роликов для VIP-клиентов.</p>
</div>
<div class="service-grid">
<article class="service-card">
<h3>🎯 Рекламный ролик</h3>
<p>Анимация, которая останавливает скролл и удерживает внимание. Покажем продукт через историю, а не через сухие факты.</p>
</article>
<article class="service-card">
<h3>🆕 Запуск нового направления</h3>
<p>Объясним сложную услугу просто — через понятную метафору и тёплую историю. Клиенты поймут и влюбятся.</p>
</article>
<article class="service-card">
<h3>🏢 Имиджевый ролик</h3>
<p>Выделит ваш бренд среди конкурентов, покажет инновационность и повысит лояльность клиентов.</p>
</article>
<article class="service-card">
<h3>🎁 VIP-подарки клиентам</h3>
<p>Персональные мультики для ключевых клиентов и партнёров. То, что не выбрасывают и показывают друзьям.</p>
</article>
</div>
<div class="service-cta">
<a href="contacts.html" class="btn btn-primary btn-lg" data-goal="order_business_page">Заказать для бизнеса</a>
</div>
</div>
</section>
<section class="section"><div class="container">
<h2 class="section-title">Что подготовить для заказа</h2>
<p class="section-subtitle">Опишите продукт, аудиторию и задачу рекламы. Пришлите логотип, фирменные цвета, основные тезисы и площадку размещения.</p>
<div class="service-summary">
<h2>Стоимость и сроки</h2>
<p>В студии есть тарифы «Искры» — 2 500 ₽, «История» — 4 500 ₽ и «Сказка» — 9 000 ₽. Это общие тарифы по длительности и составу работы, а не фиксированная цена любого проекта в этом направлении.</p>
<p>Посмотрите <a href="index.html#prices">состав тарифов</a> и <a href="services.html#extras">дополнительные опции</a>. Стоимость, срок и формат результата согласуем до начала работы.</p>
<h2>Как проходит работа</h2>
<p>Обсуждаем задачу и условия, утверждаем сценарий и стиль, создаём анимацию и озвучку. Затем показываем результат и вносим правки в рамках выбранного тарифа.</p>
<p><a href="portfolio.html">Посмотреть примеры работ</a> · <a href="contacts.html">Связаться со студией</a></p>
</div>
</div></section><section class="section"><div class="container">
<h2 class="section-title">Другие услуги</h2>
<nav class="service-links" aria-label="Другие услуги"><a href="personal-animation.html">Персональные мультфильмы на заказ</a><a href="social-animation.html">Анимационные ролики для соцсетей</a></nav>
</div></section><p class="container privacy-settings"><button type="button" id="cookieSettings">Настройки аналитики</button></p></main><footer class="footer">
<div class="container footer-inner">
<div class="footer-col">
<a href="index.html" class="logo"><span class="logo-bird">🐦</span><span class="logo-text">О'ЛЯПКА</span></a>
<p class="footer-about">Студия авторских ИИ-мультиков.</p>
</div>
<div class="footer-col">
<h2>Навигация</h2>
<a href="index.html">Главная</a>
<a href="services.html">Услуги</a>
<a href="portfolio.html">Работы</a>
<a href="contacts.html">Контакты</a>
</div>
<div class="footer-col">
<h2>Документы</h2>
<a href="legal.html">Политика cookies</a>
<a href="legal.html#agreement">Пользовательское соглашение</a>
</div>
<div class="footer-col">
<h2>Связаться</h2>
<a href="https://t.me/YuliaAnimation" target="_blank" rel="noopener">Telegram</a>
<a href="https://www.instagram.com/olapka_animatioh?utm_source=site" target="_blank" rel="noopener">Instagram</a>
<a href="https://vk.com/club240204788" target="_blank" rel="noopener">ВКонтакте</a>
</div>
</div>
<div class="footer-bottom"><div class="container">© 2026 Студия мультфильмов О'ляпка</div></div>
</footer>
<script src="js/main.js" defer></script>
</body>
</html>
+103 -35
View File
@@ -3,50 +3,114 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Контакты студии О'ляпка — заказать ИИ-мультик | Telegram, Instagram, VK</title>
<meta name="description" content="Свяжитесь со студией О'ляпка: Telegram, Instagram, ВКонтакте. Закажите авторский ИИ-мультик на заказ. Быстрый ответ в мессенджерах.">
<meta property="og:type" content="website">
<meta property="og:title" content="Контакты студии О'ляпка">
<meta property="og:description" content="Свяжитесь с нами в мессенджерах и соцсетях. Закажите мультик за 3–7 дней.">
<meta property="og:image" content="https://olapka.ru/img/og-contacts.jpg">
<meta property="og:url" content="https://olapka.ru/contacts.html">
<link rel="icon" type="image/svg+xml" href="img/favicon.svg"> <link rel="icon" type="image/svg+xml" href="img/favicon.svg">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Caveat:wght@500;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&amp;family=Caveat:wght@500;700&amp;display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<script type="application/ld+json"> <title>Заказать мультфильм: контакты студии О’ляпка</title>
<meta name="description" content="Свяжитесь со студией О’ляпка в Telegram, WhatsApp или ВКонтакте. Обсудите идею мультфильма, сценарий, стоимость и срок создания.">
<link rel="canonical" href="https://olapka.ru/contacts.html">
<meta name="robots" content="index, follow, max-image-preview:large">
<meta property="og:type" content="website">
<meta property="og:title" content="Заказать мультфильм: контакты студии О’ляпка">
<meta property="og:description" content="Свяжитесь со студией О’ляпка в Telegram, WhatsApp или ВКонтакте. Обсудите идею мультфильма, сценарий, стоимость и срок создания.">
<meta property="og:url" content="https://olapka.ru/contacts.html">
<meta property="og:image" content="https://olapka.ru/img/og-cover.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="О’ляпка — мультфильмы на заказ">
<meta property="og:site_name" content="Студия О’ляпка">
<meta property="og:locale" content="ru_RU">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://olapka.ru/img/og-cover.jpg">
<script type="application/ld+json">{
"@context": "https://schema.org",
"@graph": [
{ {
"@context": "https://schema.org", "@type": "Organization",
"@id": "https://olapka.ru/#organization",
"name": "Студия мультфильмов О’ляпка",
"url": "https://olapka.ru/",
"logo": "https://olapka.ru/img/favicon.svg",
"telephone": "+79160957383",
"sameAs": [
"https://t.me/YuliaAnimation",
"https://www.instagram.com/olapka_animatioh",
"https://vk.com/club240204788"
],
"contactPoint": {
"@type": "ContactPoint", "@type": "ContactPoint",
"telephone": "+79160957383",
"contactType": "customer service", "contactType": "customer service",
"availableLanguage": ["Russian"], "availableLanguage": "ru",
"url": "https://olapka.ru/contacts.html" "url": "https://olapka.ru/contacts.html"
}
},
{
"@type": "WebSite",
"@id": "https://olapka.ru/#website",
"url": "https://olapka.ru/",
"name": "Студия О’ляпка",
"inLanguage": "ru",
"publisher": {
"@id": "https://olapka.ru/#organization"
}
},
{
"@type": "ContactPage",
"@id": "https://olapka.ru/contacts.html#webpage",
"url": "https://olapka.ru/contacts.html",
"name": "Заказать мультфильм: контакты студии О’ляпка",
"description": "Свяжитесь со студией О’ляпка в Telegram, WhatsApp или ВКонтакте. Обсудите идею мультфильма, сценарий, стоимость и срок создания.",
"inLanguage": "ru",
"isPartOf": {
"@id": "https://olapka.ru/#website"
},
"about": {
"@id": "https://olapka.ru/#organization"
},
"breadcrumb": {
"@id": "https://olapka.ru/contacts.html#breadcrumbs"
}
},
{
"@type": "BreadcrumbList",
"@id": "https://olapka.ru/contacts.html#breadcrumbs",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Главная",
"item": "https://olapka.ru/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Контакты",
"item": "https://olapka.ru/contacts.html"
}
]
} }
</script> ]
}</script>
<script type="text/javascript">
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src="https://mc.yandex.ru/metrika/tag.js",a.parentNode.insertBefore(k,a)})
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
ym(110606131, "init", {clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true});
</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=GTM-M5HGH586"></script>
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-XXXXXXXXXX');</script>
</head> </head>
<body class="contacts-page"> <body class="contacts-page">
<div class="cookie-banner" id="cookieBanner"> <a class="skip-link" href="#main-content">Перейти к содержимому</a><div class="cookie-banner" id="cookieBanner" role="region" aria-label="Настройки аналитики" hidden>
<div class="cookie-text">Мы используем cookies. <a href="legal.html">Подробнее</a>.</div> <div class="cookie-text">Разрешить аналитику для улучшения сайта? <a href="legal.html#cookies">Подробнее</a>
<button class="cookie-btn" id="cookieAccept" data-goal="cookie_accept">Принять</button> </div>
</div> <div class="cookie-actions">
<button class="cookie-btn" id="cookieAccept" type="button">Разрешить</button><button class="cookie-btn cookie-decline" id="cookieDecline" type="button">Отклонить</button>
<div class="taplink"> </div>
<div class="taplink-logo"> </div>
<main class="taplink" id="main-content" tabindex="-1">
<nav class="container breadcrumbs" aria-label="Хлебные крошки"><ol>
<li><a href="index.html">Главная</a></li>
<li><span aria-current="page">Контакты</span></li>
</ol></nav><div class="taplink-logo">
<span class="logo-bird-big">🐦</span> <span class="logo-bird-big">🐦</span>
<h1 class="taplink-title">О'ЛЯПКА</h1> <h1 class="taplink-title">Контакты студии О’ляпка</h1>
<p class="taplink-subtitle">Студия авторских ИИ-мультиков</p> <p class="taplink-subtitle">Студия авторских ИИ-мультиков</p>
</div> </div>
@@ -82,12 +146,12 @@
</div> </div>
<div class="taplink-info"> <div class="taplink-info">
<h3>Как мы работаем</h3> <h2>Как мы работаем</h2>
<ul> <ul>
<li>⚡ Отвечаем в течение 15–30 минут</li> <li>⚡ Отвечаем в течение 15–30 минут</li>
<li>🎁 Первый тестовый мультик — со скидкой 30%</li> <li>🎁 Первый тестовый мультик — со скидкой 30%</li>
<li>💰 Стоимость — от 2 500 ₽</li> <li>💰 Стоимость — от 2 500 ₽</li>
<li>⏱️ Срок — от 3 до 7 дней</li> <li>⏱️ Срок согласуем до начала работы</li>
</ul> </ul>
</div> </div>
@@ -99,8 +163,12 @@
<div class="taplink-footer"> <div class="taplink-footer">
© 2026 Студия мультфильмов О'ляпка © 2026 Студия мультфильмов О'ляпка
</div> </div>
</div> <p class="container privacy-settings"><button type="button" id="cookieSettings">Настройки аналитики</button></p>
<div class="contact-navigation">
<p><a href="tel:+79160957383">+7 916 095-73-83</a></p>
<p><a href="services.html">Услуги и цены</a> · <a href="portfolio.html">Примеры работ</a></p>
</div></main>
<script src="js/main.js"></script> <script src="js/main.js" defer></script>
</body> </body>
</html> </html>
+56 -10
View File
@@ -8,7 +8,7 @@ body {
color: #2C2C2C; color: #2C2C2C;
background: #F9F7F0; background: #F9F7F0;
min-height: 100vh; min-height: 100vh;
overflow-x: hidden; overflow-wrap: break-word;
} }
img { max-width: 100%; height: auto; display: block; } img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: all 0.2s ease; } a { color: inherit; text-decoration: none; transition: all 0.2s ease; }
@@ -131,7 +131,7 @@ button { font-family: inherit; cursor: pointer; border: none; background: none;
/* ===== BENEFITS ===== */ /* ===== BENEFITS ===== */
.benefits { background: var(--color-bg-alt); } .benefits { background: var(--color-bg-alt); }
.benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-top: 48px; } .benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 24px; margin-top: 48px; }
.benefit-card { .benefit-card {
padding: 32px 24px; padding: 32px 24px;
background: var(--color-bg); background: var(--color-bg);
@@ -144,7 +144,7 @@ button { font-family: inherit; cursor: pointer; border: none; background: none;
.benefit-card p { color: var(--color-text-muted); font-size: 15px; } .benefit-card p { color: var(--color-text-muted); font-size: 15px; }
/* ===== FOR WHOM ===== */ /* ===== FOR WHOM ===== */
.for-whom-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; margin-top: 48px; } .for-whom-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px; margin-top: 48px; }
.for-whom-card { .for-whom-card {
padding: 40px 32px; padding: 40px 32px;
background: var(--color-bg-alt); background: var(--color-bg-alt);
@@ -177,7 +177,7 @@ button { font-family: inherit; cursor: pointer; border: none; background: none;
/* ===== PRICING ===== */ /* ===== PRICING ===== */
.pricing { background: var(--color-bg-alt); } .pricing { background: var(--color-bg-alt); }
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 48px; } .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 24px; margin-top: 48px; }
.price-card { .price-card {
padding: 36px 28px; padding: 36px 28px;
background: var(--color-bg); background: var(--color-bg);
@@ -215,7 +215,7 @@ button { font-family: inherit; cursor: pointer; border: none; background: none;
.pricing-note p { margin: 6px 0; font-size: 15px; } .pricing-note p { margin: 6px 0; font-size: 15px; }
/* ===== PROCESS ===== */ /* ===== PROCESS ===== */
.process-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; margin-top: 48px; } .process-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 24px; margin-top: 48px; }
.step { .step {
padding: 28px 20px; padding: 28px 20px;
background: var(--color-bg-alt); background: var(--color-bg-alt);
@@ -267,7 +267,7 @@ button { font-family: inherit; cursor: pointer; border: none; background: none;
} }
.service-head h2 { font-size: clamp(26px, 4vw, 36px); margin-bottom: 12px; } .service-head h2 { font-size: clamp(26px, 4vw, 36px); margin-bottom: 12px; }
.service-lead { font-size: 17px; color: var(--color-text-muted); } .service-lead { font-size: 17px; color: var(--color-text-muted); }
.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-bottom: 32px; } .service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; margin-bottom: 32px; }
.service-card { .service-card {
padding: 28px 24px; padding: 28px 24px;
background: var(--color-bg); background: var(--color-bg);
@@ -282,7 +282,7 @@ button { font-family: inherit; cursor: pointer; border: none; background: none;
/* ===== EXTRAS ===== */ /* ===== EXTRAS ===== */
.extras-grid { .extras-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
gap: 12px; gap: 12px;
margin-top: 32px; margin-top: 32px;
max-width: 800px; max-width: 800px;
@@ -302,7 +302,7 @@ button { font-family: inherit; cursor: pointer; border: none; background: none;
.extra-price { font-weight: 700; color: var(--color-accent); } .extra-price { font-weight: 700; color: var(--color-accent); }
/* ===== PORTFOLIO ===== */ /* ===== PORTFOLIO ===== */
.portfolio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; } .portfolio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px; }
.work-card { .work-card {
background: var(--color-bg-alt); background: var(--color-bg-alt);
border-radius: var(--radius); border-radius: var(--radius);
@@ -485,7 +485,7 @@ body.video-modal-open { overflow: hidden; }
/* ===== REVIEWS ===== */ /* ===== REVIEWS ===== */
.reviews { background: var(--color-bg-alt); } .reviews { background: var(--color-bg-alt); }
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 48px; } .reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 24px; margin-top: 48px; }
.review-card { .review-card {
padding: 28px 24px; padding: 28px 24px;
background: var(--color-bg); background: var(--color-bg);
@@ -586,7 +586,7 @@ body.video-modal-open { overflow: hidden; }
.footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 40px; } .footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 40px; }
.footer .logo { color: #fff; margin-bottom: 12px; } .footer .logo { color: #fff; margin-bottom: 12px; }
.footer-about { font-size: 14px; color: #999; } .footer-about { font-size: 14px; color: #999; }
.footer h4 { color: #fff; font-size: 15px; margin-bottom: 16px; } .footer h2 { color: #fff; font-size: 15px; margin-bottom: 16px; }
.footer-col a { display: block; padding: 4px 0; font-size: 14px; color: #999; } .footer-col a { display: block; padding: 4px 0; font-size: 14px; color: #999; }
.footer-col a:hover { color: var(--color-accent); } .footer-col a:hover { color: var(--color-accent); }
.footer-bottom { border-top: 1px solid #333; padding: 20px 0; text-align: center; font-size: 13px; color: #666; } .footer-bottom { border-top: 1px solid #333; padding: 20px 0; text-align: center; font-size: 13px; color: #666; }
@@ -663,3 +663,49 @@ body.video-modal-open { overflow: hidden; }
.taplink-title { font-size: 28px; } .taplink-title { font-size: 28px; }
.taplink-btn { padding: 14px 18px; } .taplink-btn { padding: 14px 18px; }
} }
/* Accessibility and compact-screen refinements */
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #8d0000; outline-offset: 4px; }
[id] { scroll-margin-top: 100px; }
.skip-link { position: fixed; top: 8px; left: 8px; padding: 12px 20px; background: #fff; z-index: 2000; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.breadcrumbs { padding-top: 24px; padding-bottom: 8px; font-size: 13px; color: #555; text-align: left; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.breadcrumbs li + li::before { content: '/'; margin-right: 8px; }
.breadcrumbs a, .service-summary a, .detail-link a, .faq a, .contact-navigation a { text-decoration: underline; text-underline-offset: 3px; }
.service-links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; padding-top: 24px; padding-bottom: 24px; }
.service-links a { padding: 12px 18px; background: #fff; border: 1px solid #b8a99f; border-radius: 12px; }
.service-links a:hover { border-color: var(--color-accent); }
.service-summary { max-width: 800px; margin: auto; padding: 24px; background: #fff; border-radius: 16px; }
.service-summary h2 { font-size: 24px; margin-bottom: 12px; }
.service-summary p { margin-bottom: 20px; }
.detail-link { margin-bottom: 20px; }
.faq { max-width: 850px; }
.faq details { padding: 20px; background: #fff; border-bottom: 1px solid #ddd; }
.faq summary { font-weight: 700; cursor: pointer; min-height: 32px; }
.faq p { margin-top: 12px; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-btn { min-height: 44px; }
.cookie-decline { background: #eee; color: #222; }
.cookie-decline:hover { background: #ddd; }
.privacy-settings { padding-top: 24px; padding-bottom: 24px; }
.privacy-settings button { text-decoration: underline; font-size: 13px; min-height: 44px; color: #555; }
.taplink-info h2 { font-size: 18px; margin-bottom: 12px; text-align: center; }
.taplink-legal { flex-wrap: wrap; }
.taplink-whatsapp:hover { background: #137c3a; }
.taplink-telegram:hover { background: #136c99; }
.extra-item { gap: 16px; flex-wrap: wrap; }
.footer-bottom { color: #aaa; }
.contact-navigation { line-height: 2; }
@media (max-width: 768px) {
.header-inner { flex-wrap: wrap; }
html:not(.js-menu) .nav { display: flex; position: static; width: 100%; order: 3; }
html:not(.js-menu) .burger { display: none; }
.nav-link { padding: 8px 0; }
.page-hero { padding-top: 36px; }
.cookie-banner { max-height: 60vh; overflow: auto; bottom: 12px; left: 12px; right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation: none !important; transition: none !important; }
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

+145 -97
View File
@@ -3,94 +3,132 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Студия мультфильмов О'ляпка — ИИ-анимация на заказ | Персональные мультики и реклама</title>
<meta name="description" content="Студия О'ляпка создаёт авторские ИИ-мультики на заказ: персональные подарки, Love Story, реклама для бизнеса, контент для соцсетей. От 2500 ₽. Срок — от 3 дней.">
<meta name="keywords" content="ИИ мультики на заказ, нейросеть анимация, мультик на день рождения, реклама мультик, студия анимации, О'ляпка">
<!-- Open Graph --> <!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:title" content="Студия мультфильмов О'ляпка — ИИ-анимация на заказ">
<meta property="og:description" content="Создаём авторские ИИ-мультики: подарки, реклама, контент для соцсетей. От 2500 ₽.">
<meta property="og:image" content="https://olapka.ru/img/og-main.jpg">
<meta property="og:url" content="https://olapka.ru/">
<meta property="og:site_name" content="Студия О'ляпка">
<meta property="og:locale" content="ru_RU">
<!-- Twitter --> <!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Студия мультфильмов О'ляпка">
<meta name="twitter:description" content="Авторские ИИ-мультики на заказ. От 2500 ₽.">
<meta name="twitter:image" content="https://olapka.ru/img/og-main.jpg">
<!-- Favicon --> <!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="img/favicon.svg"> <link rel="icon" type="image/svg+xml" href="img/favicon.svg">
<!-- Fonts --> <!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Caveat:wght@500;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&amp;family=Caveat:wght@500;700&amp;display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<!-- JSON-LD Schema.org --> <!-- JSON-LD Schema.org -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "ProfessionalService",
"name": "Студия мультфильмов О'ляпка",
"image": "https://olapka.ru/img/logo.png",
"description": "Студия создаёт авторские ИИ-мультики на заказ: персональные подарки, реклама для бизнеса, контент для соцсетей.",
"priceRange": "от 2500 ₽",
"url": "https://olapka.ru",
"telephone": "+7-916-095-73-83",
"address": {
"@type": "PostalAddress",
"addressCountry": "RU"
},
"sameAs": [
"https://t.me/283034454",
"https://instagram.com/yuliasl1010",
"https://vk.com/club240204788"
]
}
</script>
<!-- Yandex.Metrika counter --> <!-- Yandex.Metrika counter -->
<script type="text/javascript">
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
m[i].l=1*new Date();
for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
ym(110606131, "init", {
clickmap:true,
trackLinks:true,
accurateTrackBounce:true,
webvisor:true
});
</script>
<!-- /Yandex.Metrika counter --> <!-- /Yandex.Metrika counter -->
<!-- Google Analytics --> <!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GTM-M5HGH586"></script> <title>Мультфильмы на заказ и ИИ-анимация — студия О’ляпка</title>
<script> <meta name="description" content="Создаём персональные мультфильмы, рекламные ролики и анимацию для соцсетей. Сценарий, озвучка и монтаж. Тарифы от 2 500 ₽. Обсудите идею со студией О’ляпка.">
window.dataLayer = window.dataLayer || []; <link rel="canonical" href="https://olapka.ru/">
function gtag(){dataLayer.push(arguments);} <meta name="robots" content="index, follow, max-image-preview:large">
gtag('js', new Date()); <meta property="og:type" content="website">
gtag('config', 'GTM-M5HGH586'); <meta property="og:title" content="Мультфильмы на заказ и ИИ-анимация — студия О’ляпка">
</script> <meta property="og:description" content="Создаём персональные мультфильмы, рекламные ролики и анимацию для соцсетей. Сценарий, озвучка и монтаж. Тарифы от 2 500 ₽. Обсудите идею со студией О’ляпка.">
<meta property="og:url" content="https://olapka.ru/">
<meta property="og:image" content="https://olapka.ru/img/og-cover.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="О’ляпка — мультфильмы на заказ">
<meta property="og:site_name" content="Студия О’ляпка">
<meta property="og:locale" content="ru_RU">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://olapka.ru/img/og-cover.jpg">
<script type="application/ld+json">{
"@context": "https://schema.org",
"@graph": [
{
"@type": "Organization",
"@id": "https://olapka.ru/#organization",
"name": "Студия мультфильмов О’ляпка",
"url": "https://olapka.ru/",
"logo": "https://olapka.ru/img/favicon.svg",
"telephone": "+79160957383",
"sameAs": [
"https://t.me/YuliaAnimation",
"https://www.instagram.com/olapka_animatioh",
"https://vk.com/club240204788"
],
"contactPoint": {
"@type": "ContactPoint",
"telephone": "+79160957383",
"contactType": "customer service",
"availableLanguage": "ru",
"url": "https://olapka.ru/contacts.html"
}
},
{
"@type": "WebSite",
"@id": "https://olapka.ru/#website",
"url": "https://olapka.ru/",
"name": "Студия О’ляпка",
"inLanguage": "ru",
"publisher": {
"@id": "https://olapka.ru/#organization"
}
},
{
"@type": "WebPage",
"@id": "https://olapka.ru/#webpage",
"url": "https://olapka.ru/",
"name": "Мультфильмы на заказ и ИИ-анимация — студия О’ляпка",
"description": "Создаём персональные мультфильмы, рекламные ролики и анимацию для соцсетей. Сценарий, озвучка и монтаж. Тарифы от 2 500 ₽. Обсудите идею со студией О’ляпка.",
"inLanguage": "ru",
"isPartOf": {
"@id": "https://olapka.ru/#website"
},
"about": {
"@id": "https://olapka.ru/#organization"
}
},
{
"@type": "Service",
"@id": "https://olapka.ru/#animation",
"name": "Создание мультфильмов на заказ",
"provider": {
"@id": "https://olapka.ru/#organization"
},
"offers": [
{
"@type": "Offer",
"name": "Искры",
"description": "Короткий мультик до 30 секунд; 2–4 сцены • 1 раунд правок • Базовая озвучка • Формат под Reels",
"price": 2500,
"priceCurrency": "RUB",
"url": "https://olapka.ru/#tariff-1"
},
{
"@type": "Offer",
"name": "История",
"description": "От 30 секунд до 1 минуты; 4–7 сцен • 2 раунда правок • Озвучка и музыка • Цветокоррекция",
"price": 4500,
"priceCurrency": "RUB",
"url": "https://olapka.ru/#tariff-2"
},
{
"@type": "Offer",
"name": "Сказка",
"description": "От 1 до 2 минут; От 8 сцен • 3 раунда правок • Профессиональная озвучка • Титры и логотип",
"price": 9000,
"priceCurrency": "RUB",
"url": "https://olapka.ru/#tariff-3"
}
]
}
]
}</script>
</head> </head>
<body> <body>
<!-- Cookie Banner --> <a class="skip-link" href="#main-content">Перейти к содержимому</a><div class="cookie-banner" id="cookieBanner" role="region" aria-label="Настройки аналитики" hidden>
<div class="cookie-banner" id="cookieBanner"> <div class="cookie-text">Разрешить аналитику для улучшения сайта? <a href="legal.html#cookies">Подробнее</a>
<div class="cookie-text"> </div>
Мы используем cookies для улучшения работы сайта. Продолжая пользоваться сайтом, вы соглашаетесь с <div class="cookie-actions">
<a href="legal.html">политикой обработки cookies</a>. <button class="cookie-btn" id="cookieAccept" type="button">Разрешить</button><button class="cookie-btn cookie-decline" id="cookieDecline" type="button">Отклонить</button>
</div> </div>
<button class="cookie-btn" id="cookieAccept" data-goal="cookie_accept">Принять</button> </div>
</div> <!-- Cookie Banner -->
<!-- Header --> <!-- Header -->
<header class="header"> <header class="header">
<div class="container header-inner"> <div class="container header-inner">
@@ -98,43 +136,52 @@
<span class="logo-bird">🐦</span> <span class="logo-bird">🐦</span>
<span class="logo-text">О'ЛЯПКА</span> <span class="logo-text">О'ЛЯПКА</span>
</a> </a>
<nav class="nav" id="nav"> <nav class="nav" id="nav" aria-label="Основная навигация">
<a href="index.html" class="nav-link active">Главная</a> <a href="index.html" class="nav-link active" aria-current="page">Главная</a>
<a href="services.html" class="nav-link">Услуги</a> <a href="services.html" class="nav-link">Услуги</a>
<a href="portfolio.html" class="nav-link">Работы</a> <a href="portfolio.html" class="nav-link">Работы</a>
<a href="contacts.html" class="nav-link">Контакты</a> <a href="contacts.html" class="nav-link">Контакты</a>
</nav> </nav>
<a href="contacts.html" class="btn btn-primary" data-goal="order_header">Заказать</a> <a href="contacts.html" class="btn btn-primary" data-goal="order_header">Заказать</a>
<button class="burger" id="burger" aria-label="Меню"> <button class="burger" id="burger" aria-label="Меню" type="button" aria-expanded="false" aria-controls="nav">
<span></span><span></span><span></span> <span></span><span></span><span></span>
</button> </button>
</div> </div>
</header> </header>
<!-- Hero --> <!-- Hero -->
<section class="hero"> <main id="main-content" tabindex="-1"><section class="hero">
<div class="container"> <div class="container">
<div class="hero-content"> <div class="hero-content">
<span class="hero-tag">Студия ИИ-анимации</span> <span class="hero-tag">Студия ИИ-анимации</span>
<h1 class="hero-title">Создаём мультики, которые <span class="accent">решают ваши задачи</span></h1> <h1 class="hero-title">Мультфильмы на заказ: подарки и реклама с ИИ-анимацией</h1>
<p class="hero-subtitle">Персональные подарки, реклама для бизнеса и вирусный контент для соцсетей. Авторский подход, честные цены, результат за 1–4 дня.</p> <p class="hero-subtitle">Персональные мультфильмы, Love Story, рекламные ролики для бизнеса и анимация для соцсетей. Обсудим сценарий, стиль, стоимость и срок до начала работы.</p>
<div class="hero-actions"> <div class="hero-actions">
<a href="contacts.html" class="btn btn-primary btn-lg" data-goal="order_hero">Заказать мультик</a> <a href="contacts.html" class="btn btn-primary btn-lg" data-goal="order_hero">Заказать мультик</a>
<a href="services.html" class="btn btn-outline btn-lg" data-goal="services_hero">Смотреть услуги</a> <a href="services.html" class="btn btn-outline btn-lg" data-goal="services_hero">Смотреть услуги</a>
</div> </div>
<div class="hero-stats"> <div class="hero-stats">
<div class="stat"><div class="stat-num">1+</div><div class="stat-label">дня на создание</div></div> <div class="stat">
<div class="stat"><div class="stat-num">от 2500₽</div><div class="stat-label">стоимость</div></div> <div class="stat-num">По задаче</div>
<div class="stat"><div class="stat-num">100%</div><div class="stat-label">авторская работа</div></div> <div class="stat-label">согласуем срок</div>
</div>
<div class="stat">
<div class="stat-num">от 2500₽</div>
<div class="stat-label">стоимость</div>
</div>
<div class="stat">
<div class="stat-num">100%</div>
<div class="stat-label">авторская работа</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- Преимущества -->
<section class="section benefits"> <section class="section benefits">
<div class="container"> <div class="container">
<h2 class="section-title">Почему выбирают <span class="accent">О'ляпку</span></h2> <h2 class="section-title">Почему выбирают <span class="accent">О'ляпку</span>
</h2>
<div class="benefits-grid"> <div class="benefits-grid">
<article class="benefit-card"> <article class="benefit-card">
<div class="benefit-icon">✨</div> <div class="benefit-icon">✨</div>
@@ -144,7 +191,7 @@
<article class="benefit-card"> <article class="benefit-card">
<div class="benefit-icon">⚡</div> <div class="benefit-icon">⚡</div>
<h3>Быстро</h3> <h3>Быстро</h3>
<p>Готовый мультик за 1–4 дней. В 5 раз быстрее классической анимации — без потери качества.</p> <p>Срок зависит от длительности и сложности мультфильма. Согласуем дату готовности перед началом работы.</p>
</article> </article>
<article class="benefit-card"> <article class="benefit-card">
<div class="benefit-icon">💎</div> <div class="benefit-icon">💎</div>
@@ -160,7 +207,6 @@
</div> </div>
</section> </section>
<!-- Для кого -->
<section class="section for-whom"> <section class="section for-whom">
<div class="container"> <div class="container">
<h2 class="section-title">Кому подходят наши мультики</h2> <h2 class="section-title">Кому подходят наши мультики</h2>
@@ -191,29 +237,28 @@
</div> </div>
</section> </section>
<!-- Тарифы --> <section class="section pricing" id="prices">
<section class="section pricing">
<div class="container"> <div class="container">
<h2 class="section-title">Тарифы на ИИ-мультики</h2> <h2 class="section-title">Тарифы на ИИ-мультики</h2>
<p class="section-subtitle">Выберите формат под вашу задачу. 1 кадр = 4–8 секунд.</p> <p class="section-subtitle">Выберите формат под вашу задачу. 1 кадр = 4–8 секунд.</p>
<div class="pricing-grid"> <div class="pricing-grid">
<article class="price-card"> <article class="price-card" id="tariff-1">
<div class="price-name">Искры</div> <h3 class="price-name">Искры</h3>
<div class="price-desc">Короткий мультик до 30 секунд</div> <div class="price-desc">Короткий мультик до 30 секунд</div>
<div class="price-features">2–4 сцены • 1 раунд правок • Базовая озвучка • Формат под Reels</div> <div class="price-features">2–4 сцены • 1 раунд правок • Базовая озвучка • Формат под Reels</div>
<div class="price-value">2 500 ₽</div> <div class="price-value">2 500 ₽</div>
<a href="contacts.html" class="btn btn-outline" data-goal="order_sparks">Заказать</a> <a href="contacts.html" class="btn btn-outline" data-goal="order_sparks">Заказать</a>
</article> </article>
<article class="price-card featured"> <article class="price-card featured" id="tariff-2">
<div class="price-badge">Популярный</div> <div class="price-badge">Популярный</div>
<div class="price-name">История</div> <h3 class="price-name">История</h3>
<div class="price-desc">От 30 секунд до 1 минуты</div> <div class="price-desc">От 30 секунд до 1 минуты</div>
<div class="price-features">4–7 сцен • 2 раунда правок • Озвучка и музыка • Цветокоррекция</div> <div class="price-features">4–7 сцен • 2 раунда правок • Озвучка и музыка • Цветокоррекция</div>
<div class="price-value">4 500 ₽</div> <div class="price-value">4 500 ₽</div>
<a href="contacts.html" class="btn btn-primary" data-goal="order_story">Заказать</a> <a href="contacts.html" class="btn btn-primary" data-goal="order_story">Заказать</a>
</article> </article>
<article class="price-card"> <article class="price-card" id="tariff-3">
<div class="price-name">Сказка</div> <h3 class="price-name">Сказка</h3>
<div class="price-desc">От 1 до 2 минут</div> <div class="price-desc">От 1 до 2 минут</div>
<div class="price-features">От 8 сцен • 3 раунда правок • Профессиональная озвучка • Титры и логотип</div> <div class="price-features">От 8 сцен • 3 раунда правок • Профессиональная озвучка • Титры и логотип</div>
<div class="price-value">9 000 ₽</div> <div class="price-value">9 000 ₽</div>
@@ -227,7 +272,6 @@
</div> </div>
</section> </section>
<!-- Процесс -->
<section class="section process"> <section class="section process">
<div class="container"> <div class="container">
<h2 class="section-title">Как мы работаем</h2> <h2 class="section-title">Как мы работаем</h2>
@@ -261,7 +305,6 @@
</div> </div>
</section> </section>
<!-- CTA -->
<section class="section cta"> <section class="section cta">
<div class="container"> <div class="container">
<div class="cta-box"> <div class="cta-box">
@@ -272,6 +315,11 @@
</div> </div>
</section> </section>
<p class="container privacy-settings"><button type="button" id="cookieSettings">Настройки аналитики</button></p></main><!-- Преимущества -->
<!-- Для кого -->
<!-- Тарифы -->
<!-- Процесс -->
<!-- CTA -->
<!-- Footer --> <!-- Footer -->
<footer class="footer"> <footer class="footer">
<div class="container footer-inner"> <div class="container footer-inner">
@@ -283,19 +331,19 @@
<p class="footer-about">Студия авторских ИИ-мультиков. Создаём истории, которые решают задачи.</p> <p class="footer-about">Студия авторских ИИ-мультиков. Создаём истории, которые решают задачи.</p>
</div> </div>
<div class="footer-col"> <div class="footer-col">
<h4>Навигация</h4> <h2>Навигация</h2>
<a href="index.html">Главная</a> <a href="index.html">Главная</a>
<a href="services.html">Услуги</a> <a href="services.html">Услуги</a>
<a href="portfolio.html">Работы</a> <a href="portfolio.html">Работы</a>
<a href="contacts.html">Контакты</a> <a href="contacts.html">Контакты</a>
</div> </div>
<div class="footer-col"> <div class="footer-col">
<h4>Документы</h4> <h2>Документы</h2>
<a href="legal.html">Политика cookies</a> <a href="legal.html">Политика cookies</a>
<a href="legal.html#agreement">Пользовательское соглашение</a> <a href="legal.html#agreement">Пользовательское соглашение</a>
</div> </div>
<div class="footer-col"> <div class="footer-col">
<h4>Связаться</h4> <h2>Связаться</h2>
<a href="https://t.me/YuliaAnimation" target="_blank" rel="noopener">Telegram</a> <a href="https://t.me/YuliaAnimation" target="_blank" rel="noopener">Telegram</a>
<a href="https://www.instagram.com/olapka_animatioh?utm_source=site" target="_blank" rel="noopener">Instagram</a> <a href="https://www.instagram.com/olapka_animatioh?utm_source=site" target="_blank" rel="noopener">Instagram</a>
<a href="https://vk.com/club240204788" target="_blank" rel="noopener">ВКонтакте</a> <a href="https://vk.com/club240204788" target="_blank" rel="noopener">ВКонтакте</a>
@@ -306,6 +354,6 @@
</div> </div>
</footer> </footer>
<script src="js/main.js"></script> <script src="js/main.js" defer></script>
</body> </body>
</html> </html>
+71 -46
View File
@@ -1,44 +1,66 @@
// ===== Cookie Banner ===== // Analytics: use the existing Metrika counter and the supplied GTM container.
// A GTM- identifier is a Tag Manager container, not a GA4 measurement ID.
(function() { (function() {
const key = 'olyapka_analytics_v2';
const banner = document.getElementById('cookieBanner'); const banner = document.getElementById('cookieBanner');
const acceptBtn = document.getElementById('cookieAccept'); let choice = null;
if (!banner || !acceptBtn) return; try { choice = localStorage.getItem(key); } catch (err) { /* storage may be blocked */ }
window.analyticsAllowed = choice === 'accepted';
const consent = localStorage.getItem('olyapka_cookies_consent'); function loadAnalytics() {
if (!consent) { if (!window.analyticsAllowed || window.analyticsLoaded) return;
setTimeout(() => banner.classList.add('show'), 800); window.analyticsLoaded = true;
} else { window.ym = window.ym || function() { (window.ym.a = window.ym.a || []).push(arguments); };
banner.classList.add('hidden'); window.ym.l = Date.now();
const metrika = document.createElement('script');
metrika.async = true; metrika.src = 'https://mc.yandex.ru/metrika/tag.js';
document.head.append(metrika);
window.ym(110606131, 'init', {clickmap: true, trackLinks: true, accurateTrackBounce: true, webvisor: true});
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({'gtm.start': Date.now(), event: 'gtm.js'});
const gtm = document.createElement('script');
gtm.async = true; gtm.src = 'https://www.googletagmanager.com/gtm.js?id=GTM-M5HGH586';
document.head.append(gtm);
} }
function choose(value) {
acceptBtn.addEventListener('click', function() { const wasAllowed = window.analyticsAllowed;
localStorage.setItem('olyapka_cookies_consent', '1'); try { localStorage.setItem(key, value); } catch (err) { /* session-only choice */ }
window.analyticsAllowed = value === 'accepted';
banner.hidden = true;
banner.classList.remove('show'); banner.classList.remove('show');
setTimeout(() => banner.classList.add('hidden'), 400); if (wasAllowed && !window.analyticsAllowed) { location.reload(); return; }
// Goal for Yandex.Metrika loadAnalytics();
if (typeof ym !== 'undefined') ym(110606131, 'reachGoal', 'cookie_accept'); }
if (typeof gtag !== 'undefined') gtag('event', 'cookie_accept'); if (banner) {
}); if (!choice) { banner.hidden = false; banner.classList.add('show'); }
document.getElementById('cookieAccept').addEventListener('click', () => choose('accepted'));
document.getElementById('cookieDecline').addEventListener('click', () => choose('declined'));
document.getElementById('cookieSettings').addEventListener('click', () => {
banner.hidden = false; banner.classList.add('show');
document.getElementById('cookieAccept').focus();
});
}
loadAnalytics();
})(); })();
// ===== Mobile Menu ===== // Accessible mobile navigation, including Escape and focus return.
(function() { (function() {
const burger = document.getElementById('burger'); const burger = document.getElementById('burger');
const nav = document.getElementById('nav'); const nav = document.getElementById('nav');
if (!burger || !nav) return; if (!burger || !nav) return;
document.documentElement.classList.add('js-menu');
burger.addEventListener('click', function() { function setOpen(open) {
burger.classList.toggle('open'); burger.classList.toggle('open', open);
nav.classList.toggle('open'); nav.classList.toggle('open', open);
}); burger.setAttribute('aria-expanded', String(open));
burger.setAttribute('aria-label', open ? 'Закрыть меню' : 'Открыть меню');
// Close on link click }
nav.querySelectorAll('.nav-link').forEach(link => { burger.addEventListener('click', () => setOpen(burger.getAttribute('aria-expanded') !== 'true'));
link.addEventListener('click', () => { nav.addEventListener('click', e => { if (e.target.closest('a')) setOpen(false); });
burger.classList.remove('open'); document.addEventListener('keydown', e => {
nav.classList.remove('open'); if (e.key === 'Escape' && nav.classList.contains('open')) { setOpen(false); burger.focus(); }
});
}); });
document.addEventListener('click', e => { if (!nav.contains(e.target) && !burger.contains(e.target)) setOpen(false); });
matchMedia('(max-width: 768px)').addEventListener('change', () => setOpen(false));
})(); })();
// ===== Goal Tracking (Yandex.Metrika + GA) ===== // ===== Goal Tracking (Yandex.Metrika + GA) =====
@@ -50,26 +72,15 @@
if (!goal) return; if (!goal) return;
// Yandex.Metrika // Yandex.Metrika
if (typeof ym !== 'undefined') { if (window.analyticsAllowed && typeof ym !== 'undefined') {
try { ym(110606131, 'reachGoal', goal); } catch(err) {} try { ym(110606131, 'reachGoal', goal); } catch(err) {}
} }
// Google Analytics // Google Analytics
if (typeof gtag !== 'undefined') { if (window.analyticsAllowed && window.dataLayer) window.dataLayer.push({event: goal});
try { gtag('event', goal); } catch(err) {}
}
}); });
})(); })();
// ===== Smooth scroll for anchor links ===== // Native anchor navigation preserves URL fragments and keyboard focus.
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
const target = document.querySelector(this.getAttribute('href'));
if (target) {
e.preventDefault();
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
});
// ===== Portfolio Video Lightbox ===== // ===== Portfolio Video Lightbox =====
(function() { (function() {
@@ -81,9 +92,15 @@ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
if (!modal || !player || !triggers.length) return; if (!modal || !player || !triggers.length) return;
let lastFocus = null; let lastFocus = null;
const background = Array.from(document.body.children).filter(el => el !== modal && el.tagName !== 'SCRIPT');
let inertStates = [];
modal.setAttribute('inert', '');
function open(src, label) { function open(src, label) {
lastFocus = document.activeElement; lastFocus = document.activeElement;
modal.removeAttribute('inert');
inertStates = background.map(el => el.inert);
background.forEach(el => { el.inert = true; });
title.textContent = label || ''; title.textContent = label || '';
player.src = src; player.src = src;
modal.classList.add('open'); modal.classList.add('open');
@@ -101,6 +118,8 @@ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
player.pause(); player.pause();
modal.classList.remove('open'); modal.classList.remove('open');
modal.setAttribute('aria-hidden', 'true'); modal.setAttribute('aria-hidden', 'true');
modal.setAttribute('inert', '');
background.forEach((el, i) => { el.inert = inertStates[i]; });
document.body.classList.remove('video-modal-open'); document.body.classList.remove('video-modal-open');
setTimeout(() => { setTimeout(() => {
if (!modal.classList.contains('open')) { if (!modal.classList.contains('open')) {
@@ -139,7 +158,7 @@ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
const v = entry.target; const v = entry.target;
obs.unobserve(v); obs.unobserve(v);
if (v.readyState < 2) { if (v.readyState < 2) {
v.preload = 'auto'; v.preload = 'metadata';
v.load(); v.load();
} }
v.addEventListener('loadeddata', () => { v.addEventListener('loadeddata', () => {
@@ -169,7 +188,13 @@ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
document.addEventListener('keydown', function(e) { document.addEventListener('keydown', function(e) {
if (!modal.classList.contains('open')) return; if (!modal.classList.contains('open')) return;
if (e.key === 'Escape') { close(); return; } if (e.key === 'Escape') { close(); return; }
if (e.key === 'Tab') {
const stops = Array.from(modal.querySelectorAll('button, video[controls]'));
const first = stops[0], last = stops[stops.length - 1];
if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
}
if (e.key === ' ' && document.activeElement === player) return; // native handling if (e.key === ' ' && document.activeElement === player) return; // native handling
if (e.key === 'f' || e.key === 'F') toggleFullscreen(); if ((e.key === 'f' || e.key === 'F') && document.activeElement === player) toggleFullscreen();
}); });
})(); })();
+124 -37
View File
@@ -3,47 +3,127 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Юридические документы — Политика cookies и Пользовательское соглашение | Студия О'ляпка</title>
<meta name="description" content="Политика обработки cookies и пользовательское соглашение сайта студии мультфильмов О'ляпка.">
<meta property="og:type" content="website">
<meta property="og:title" content="Юридические документы — Студия О'ляпка">
<meta property="og:description" content="Политика cookies и пользовательское соглашение.">
<meta property="og:image" content="https://olapka.ru/img/og-main.jpg">
<meta property="og:url" content="https://olapka.ru/legal.html">
<link rel="icon" type="image/svg+xml" href="img/favicon.svg"> <link rel="icon" type="image/svg+xml" href="img/favicon.svg">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Caveat:wght@500;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&amp;family=Caveat:wght@500;700&amp;display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<script type="text/javascript"> <title>Политика cookies и условия использования — О’ляпка</title>
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; <meta name="description" content="Политика обработки cookies и пользовательское соглашение сайта студии мультфильмов О’ляпка.">
m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src="https://mc.yandex.ru/metrika/tag.js",a.parentNode.insertBefore(k,a)}) <link rel="canonical" href="https://olapka.ru/legal.html">
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); <meta name="robots" content="noindex, follow">
ym(110606131, "init", {clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true}); <meta property="og:type" content="website">
</script> <meta property="og:title" content="Политика cookies и условия использования — О’ляпка">
<script async src="https://www.googletagmanager.com/gtag/js?id=GTM-M5HGH586"></script> <meta property="og:description" content="Политика обработки cookies и пользовательское соглашение сайта студии мультфильмов О’ляпка.">
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','GTM-M5HGH586');</script> <meta property="og:url" content="https://olapka.ru/legal.html">
<meta property="og:image" content="https://olapka.ru/img/og-cover.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="О’ляпка — мультфильмы на заказ">
<meta property="og:site_name" content="Студия О’ляпка">
<meta property="og:locale" content="ru_RU">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://olapka.ru/img/og-cover.jpg">
<script type="application/ld+json">{
"@context": "https://schema.org",
"@graph": [
{
"@type": "Organization",
"@id": "https://olapka.ru/#organization",
"name": "Студия мультфильмов О’ляпка",
"url": "https://olapka.ru/",
"logo": "https://olapka.ru/img/favicon.svg",
"telephone": "+79160957383",
"sameAs": [
"https://t.me/YuliaAnimation",
"https://www.instagram.com/olapka_animatioh",
"https://vk.com/club240204788"
],
"contactPoint": {
"@type": "ContactPoint",
"telephone": "+79160957383",
"contactType": "customer service",
"availableLanguage": "ru",
"url": "https://olapka.ru/contacts.html"
}
},
{
"@type": "WebSite",
"@id": "https://olapka.ru/#website",
"url": "https://olapka.ru/",
"name": "Студия О’ляпка",
"inLanguage": "ru",
"publisher": {
"@id": "https://olapka.ru/#organization"
}
},
{
"@type": "WebPage",
"@id": "https://olapka.ru/legal.html#webpage",
"url": "https://olapka.ru/legal.html",
"name": "Политика cookies и условия использования — О’ляпка",
"description": "Политика обработки cookies и пользовательское соглашение сайта студии мультфильмов О’ляпка.",
"inLanguage": "ru",
"isPartOf": {
"@id": "https://olapka.ru/#website"
},
"about": {
"@id": "https://olapka.ru/#organization"
},
"breadcrumb": {
"@id": "https://olapka.ru/legal.html#breadcrumbs"
}
},
{
"@type": "BreadcrumbList",
"@id": "https://olapka.ru/legal.html#breadcrumbs",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Главная",
"item": "https://olapka.ru/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Документы",
"item": "https://olapka.ru/legal.html"
}
]
}
]
}</script>
</head> </head>
<body> <body>
<header class="header"> <a class="skip-link" href="#main-content">Перейти к содержимому</a><div class="cookie-banner" id="cookieBanner" role="region" aria-label="Настройки аналитики" hidden>
<div class="cookie-text">Разрешить аналитику для улучшения сайта? <a href="legal.html#cookies">Подробнее</a>
</div>
<div class="cookie-actions">
<button class="cookie-btn" id="cookieAccept" type="button">Разрешить</button><button class="cookie-btn cookie-decline" id="cookieDecline" type="button">Отклонить</button>
</div>
</div>
<header class="header">
<div class="container header-inner"> <div class="container header-inner">
<a href="index.html" class="logo"><span class="logo-bird">🐦</span><span class="logo-text">О'ЛЯПКА</span></a> <a href="index.html" class="logo"><span class="logo-bird">🐦</span><span class="logo-text">О'ЛЯПКА</span></a>
<nav class="nav" id="nav"> <nav class="nav" id="nav" aria-label="Основная навигация">
<a href="index.html" class="nav-link">Главная</a> <a href="index.html" class="nav-link">Главная</a>
<a href="services.html" class="nav-link">Услуги</a> <a href="services.html" class="nav-link">Услуги</a>
<a href="portfolio.html" class="nav-link">Работы</a> <a href="portfolio.html" class="nav-link">Работы</a>
<a href="contacts.html" class="nav-link">Контакты</a> <a href="contacts.html" class="nav-link">Контакты</a>
</nav> </nav>
<button class="burger" id="burger" aria-label="Меню"><span></span><span></span><span></span></button> <button class="burger" id="burger" aria-label="Меню" type="button" aria-expanded="false" aria-controls="nav"><span></span><span></span><span></span></button>
</div> </div>
</header> </header>
<main class="legal-page"> <main class="legal-page" id="main-content" tabindex="-1">
<div class="container"> <nav class="container breadcrumbs" aria-label="Хлебные крошки"><ol>
<h1 class="page-title">Юридические <span class="accent">документы</span></h1> <li><a href="index.html">Главная</a></li>
<li><span aria-current="page">Документы</span></li>
</ol></nav><div class="container">
<h1 class="page-title">Юридические <span class="accent">документы</span>
</h1>
<section class="legal-section" id="cookies"> <section class="legal-section" id="cookies">
<h2>Политика обработки cookies</h2> <h2>Политика обработки cookies</h2>
@@ -57,9 +137,12 @@
<h3>3. Какие cookies мы используем</h3> <h3>3. Какие cookies мы используем</h3>
<ul> <ul>
<li><strong>Технические cookies</strong> — необходимы для работы Сайта, обеспечения безопасности и базовой функциональности.</li> <li>
<li><strong>Аналитические cookies</strong> — используются сервисами Яндекс.Метрика и Google Analytics для сбора статистики посещений и анализа поведения пользователей.</li> <strong>Технические cookies</strong> — необходимы для работы Сайта, обеспечения безопасности и базовой функциональности.</li>
<li><strong>Cookies согласия</strong> — сохраняют ваш выбор относительно использования cookies.</li> <li>
<strong>Аналитические cookies</strong> — используются сервисами Яндекс.Метрика и Google Analytics для сбора статистики посещений и анализа поведения пользователей.</li>
<li>
<strong>Cookies согласия</strong> — сохраняют ваш выбор относительно использования cookies.</li>
</ul> </ul>
<h3>4. Цели обработки</h3> <h3>4. Цели обработки</h3>
@@ -76,7 +159,7 @@
<h3>8. Контакты</h3> <h3>8. Контакты</h3>
<p>По вопросам, связанным с обработкой cookies, вы можете связаться с нами через мессенджеры на странице <a href="contacts.html">«Контакты»</a>.</p> <p>По вопросам, связанным с обработкой cookies, вы можете связаться с нами через мессенджеры на странице <a href="contacts.html">«Контакты»</a>.</p>
</section> <p>На этом сайте аналитика загружается после выбора «Разрешить». Выбор сохраняется локально в браузере. Изменить выбор можно кнопкой «Настройки аналитики»; при отключении уже загруженной аналитики страница перезагружается. Отключение предотвращает последующие загрузки аналитики, но не удаляет ранее установленные cookies: их можно удалить в настройках браузера.</p></section>
<section class="legal-section" id="agreement"> <section class="legal-section" id="agreement">
<h2>Пользовательское соглашение</h2> <h2>Пользовательское соглашение</h2>
@@ -84,10 +167,14 @@
<h3>1. Термины и определения</h3> <h3>1. Термины и определения</h3>
<ul> <ul>
<li><strong>Сайт</strong> — интернет-ресурс https://olapka.ru.</li> <li>
<li><strong>Администрация</strong> — студия мультфильмов «О'ляпка».</li> <strong>Сайт</strong> — интернет-ресурс https://olapka.ru.</li>
<li><strong>Пользователь</strong> — любое лицо, использующее Сайт.</li> <li>
<li><strong>Услуги</strong> — создание ИИ-мультиков и сопутствующие сервисы.</li> <strong>Администрация</strong> — студия мультфильмов «О'ляпка».</li>
<li>
<strong>Пользователь</strong> — любое лицо, использующее Сайт.</li>
<li>
<strong>Услуги</strong> — создание ИИ-мультиков и сопутствующие сервисы.</li>
</ul> </ul>
<h3>2. Предмет соглашения</h3> <h3>2. Предмет соглашения</h3>
@@ -115,7 +202,7 @@
<p>По всем вопросам, связанным с настоящим Соглашением, обращайтесь через мессенджеры на странице <a href="contacts.html">«Контакты»</a>.</p> <p>По всем вопросам, связанным с настоящим Соглашением, обращайтесь через мессенджеры на странице <a href="contacts.html">«Контакты»</a>.</p>
</section> </section>
</div> </div>
</main> <p class="container privacy-settings"><button type="button" id="cookieSettings">Настройки аналитики</button></p></main>
<footer class="footer"> <footer class="footer">
<div class="container footer-inner"> <div class="container footer-inner">
@@ -124,19 +211,19 @@
<p class="footer-about">Студия авторских ИИ-мультиков.</p> <p class="footer-about">Студия авторских ИИ-мультиков.</p>
</div> </div>
<div class="footer-col"> <div class="footer-col">
<h4>Навигация</h4> <h2>Навигация</h2>
<a href="index.html">Главная</a> <a href="index.html">Главная</a>
<a href="services.html">Услуги</a> <a href="services.html">Услуги</a>
<a href="portfolio.html">Работы</a> <a href="portfolio.html">Работы</a>
<a href="contacts.html">Контакты</a> <a href="contacts.html">Контакты</a>
</div> </div>
<div class="footer-col"> <div class="footer-col">
<h4>Документы</h4> <h2>Документы</h2>
<a href="legal.html">Политика cookies</a> <a href="legal.html">Политика cookies</a>
<a href="legal.html#agreement">Пользовательское соглашение</a> <a href="legal.html#agreement">Пользовательское соглашение</a>
</div> </div>
<div class="footer-col"> <div class="footer-col">
<h4>Связаться</h4> <h2>Связаться</h2>
<a href="https://t.me/YuliaAnimation" target="_blank" rel="noopener">Telegram</a> <a href="https://t.me/YuliaAnimation" target="_blank" rel="noopener">Telegram</a>
<a href="https://www.instagram.com/olapka_animatioh?utm_source=site" target="_blank" rel="noopener">Instagram</a> <a href="https://www.instagram.com/olapka_animatioh?utm_source=site" target="_blank" rel="noopener">Instagram</a>
<a href="https://vk.com/club240204788" target="_blank" rel="noopener">ВКонтакте</a> <a href="https://vk.com/club240204788" target="_blank" rel="noopener">ВКонтакте</a>
@@ -145,6 +232,6 @@
<div class="footer-bottom"><div class="container">© 2026 Студия мультфильмов О'ляпка</div></div> <div class="footer-bottom"><div class="container">© 2026 Студия мультфильмов О'ляпка</div></div>
</footer> </footer>
<script src="js/main.js"></script> <script src="js/main.js" defer></script>
</body> </body>
</html> </html>
+227
View File
@@ -0,0 +1,227 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Open Graph -->
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&amp;family=Caveat:wght@500;700&amp;display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<!-- JSON-LD: 3 услуги -->
<!-- Yandex.Metrika -->
<title>Персональные мультфильмы на заказ — О’ляпка</title>
<meta name="description" content="Мультфильм на день рождения, Love Story или сказка для ребёнка. Персональная история с близкими людьми в главных ролях.">
<link rel="canonical" href="https://olapka.ru/personal-animation.html">
<meta name="robots" content="index, follow, max-image-preview:large">
<meta property="og:type" content="website">
<meta property="og:title" content="Персональные мультфильмы на заказ — О’ляпка">
<meta property="og:description" content="Мультфильм на день рождения, Love Story или сказка для ребёнка. Персональная история с близкими людьми в главных ролях.">
<meta property="og:url" content="https://olapka.ru/personal-animation.html">
<meta property="og:image" content="https://olapka.ru/img/og-cover.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="О’ляпка — мультфильмы на заказ">
<meta property="og:site_name" content="Студия О’ляпка">
<meta property="og:locale" content="ru_RU">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://olapka.ru/img/og-cover.jpg">
<script type="application/ld+json">{
"@context": "https://schema.org",
"@graph": [
{
"@type": "Organization",
"@id": "https://olapka.ru/#organization",
"name": "Студия мультфильмов О’ляпка",
"url": "https://olapka.ru/",
"logo": "https://olapka.ru/img/favicon.svg",
"telephone": "+79160957383",
"sameAs": [
"https://t.me/YuliaAnimation",
"https://www.instagram.com/olapka_animatioh",
"https://vk.com/club240204788"
],
"contactPoint": {
"@type": "ContactPoint",
"telephone": "+79160957383",
"contactType": "customer service",
"availableLanguage": "ru",
"url": "https://olapka.ru/contacts.html"
}
},
{
"@type": "WebSite",
"@id": "https://olapka.ru/#website",
"url": "https://olapka.ru/",
"name": "Студия О’ляпка",
"inLanguage": "ru",
"publisher": {
"@id": "https://olapka.ru/#organization"
}
},
{
"@type": "WebPage",
"@id": "https://olapka.ru/personal-animation.html#webpage",
"url": "https://olapka.ru/personal-animation.html",
"name": "Персональные мультфильмы на заказ — О’ляпка",
"description": "Мультфильм на день рождения, Love Story или сказка для ребёнка. Персональная история с близкими людьми в главных ролях.",
"inLanguage": "ru",
"isPartOf": {
"@id": "https://olapka.ru/#website"
},
"about": {
"@id": "https://olapka.ru/#organization"
},
"breadcrumb": {
"@id": "https://olapka.ru/personal-animation.html#breadcrumbs"
},
"mainEntity": {
"@id": "https://olapka.ru/personal-animation.html#service"
}
},
{
"@type": "BreadcrumbList",
"@id": "https://olapka.ru/personal-animation.html#breadcrumbs",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Главная",
"item": "https://olapka.ru/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Услуги",
"item": "https://olapka.ru/services.html"
},
{
"@type": "ListItem",
"position": 3,
"name": "Персональные мультфильмы на заказ",
"item": "https://olapka.ru/personal-animation.html"
}
]
},
{
"@type": "Service",
"@id": "https://olapka.ru/personal-animation.html#service",
"name": "Персональные мультфильмы на заказ",
"description": "Мультфильм на день рождения, Love Story или сказка для ребёнка. Персональная история с близкими людьми в главных ролях.",
"serviceType": "Персональные мультфильмы на заказ",
"url": "https://olapka.ru/personal-animation.html",
"provider": {
"@id": "https://olapka.ru/#organization"
}
}
]
}</script>
</head>
<body>
<a class="skip-link" href="#main-content">Перейти к содержимому</a><div class="cookie-banner" id="cookieBanner" role="region" aria-label="Настройки аналитики" hidden>
<div class="cookie-text">Разрешить аналитику для улучшения сайта? <a href="legal.html#cookies">Подробнее</a>
</div>
<div class="cookie-actions">
<button class="cookie-btn" id="cookieAccept" type="button">Разрешить</button><button class="cookie-btn cookie-decline" id="cookieDecline" type="button">Отклонить</button>
</div>
</div>
<header class="header">
<div class="container header-inner">
<a href="index.html" class="logo"><span class="logo-bird">🐦</span><span class="logo-text">О'ЛЯПКА</span></a>
<nav class="nav" id="nav" aria-label="Основная навигация">
<a href="index.html" class="nav-link">Главная</a>
<a href="services.html" class="nav-link active">Услуги</a>
<a href="portfolio.html" class="nav-link">Работы</a>
<a href="contacts.html" class="nav-link">Контакты</a>
</nav>
<a href="contacts.html" class="btn btn-primary" data-goal="order_header">Заказать</a>
<button class="burger" id="burger" aria-label="Меню" type="button" aria-expanded="false" aria-controls="nav"><span></span><span></span><span></span></button>
</div>
</header>
<main id="main-content" tabindex="-1"><nav class="container breadcrumbs" aria-label="Хлебные крошки"><ol>
<li><a href="index.html">Главная</a></li>
<li><a href="services.html">Услуги</a></li>
<li><span aria-current="page">Персональные мультфильмы на заказ</span></li>
</ol></nav><section class="page-hero"><div class="container">
<h1 class="page-title">Персональные мультфильмы на заказ</h1>
<p class="page-subtitle">Мультфильм на день рождения, Love Story или сказка для ребёнка. Персональная история с близкими людьми в главных ролях.</p>
<p class="service-cta"><a class="btn btn-primary" href="contacts.html" data-goal="order_service">Обсудить мультфильм</a></p>
</div></section><section class="section service-block" id="personal">
<div class="container">
<div class="service-head">
<span class="service-tag">🤍 Для души</span>
<h2>Персональные ИИ-мультики</h2>
<p class="service-lead">Подарки, которые запоминаются на всю жизнь. Love Story, сказки для детей, поздравления близким.</p>
</div>
<div class="service-grid">
<article class="service-card">
<h3>🎁 Подарок на день рождения</h3>
<p>Мультик, где именинник — главный герой. С его друзьями, увлечениями и вашими тёплыми словами. Забудьте про дежурные сертификаты — дарите эмоции.</p>
</article>
<article class="service-card">
<h3>💍 Love Story</h3>
<p>Романтичная история вашей пары в формате анимации. Идеально для предложения руки и сердца, годовщины или просто чтобы сказать «люблю».</p>
</article>
<article class="service-card">
<h3>🧸 Сказка для ребёнка</h3>
<p>Ваш малыш становится героем собственной сказки: побеждает монстров, учится чистить зубы, отправляется в волшебное путешествие.</p>
</article>
<article class="service-card">
<h3>📱 Контент для личного блога</h3>
<p>Анимационные Reels и Stories для личного блога: ваши сюжеты, персонажи и узнаваемый стиль.</p>
</article>
</div>
<div class="service-cta">
<a href="contacts.html" class="btn btn-primary btn-lg" data-goal="order_personal_page">Заказать личный мультик</a>
</div>
</div>
</section>
<section class="section"><div class="container">
<h2 class="section-title">Что подготовить для заказа</h2>
<p class="section-subtitle">Расскажите, кому предназначен подарок, какой повод и какие детали важно включить в историю. Подготовьте фотографии героев и пожелания к стилю.</p>
<div class="service-summary">
<h2>Стоимость и сроки</h2>
<p>В студии есть тарифы «Искры» — 2 500 ₽, «История» — 4 500 ₽ и «Сказка» — 9 000 ₽. Это общие тарифы по длительности и составу работы, а не фиксированная цена любого проекта в этом направлении.</p>
<p>Посмотрите <a href="index.html#prices">состав тарифов</a> и <a href="services.html#extras">дополнительные опции</a>. Стоимость, срок и формат результата согласуем до начала работы.</p>
<h2>Как проходит работа</h2>
<p>Обсуждаем задачу и условия, утверждаем сценарий и стиль, создаём анимацию и озвучку. Затем показываем результат и вносим правки в рамках выбранного тарифа.</p>
<p><a href="portfolio.html">Посмотреть примеры работ</a> · <a href="contacts.html">Связаться со студией</a></p>
</div>
</div></section><section class="section"><div class="container">
<h2 class="section-title">Другие услуги</h2>
<nav class="service-links" aria-label="Другие услуги"><a href="business-animation.html">Рекламные анимационные ролики для бизнеса</a><a href="social-animation.html">Анимационные ролики для соцсетей</a></nav>
</div></section><p class="container privacy-settings"><button type="button" id="cookieSettings">Настройки аналитики</button></p></main><footer class="footer">
<div class="container footer-inner">
<div class="footer-col">
<a href="index.html" class="logo"><span class="logo-bird">🐦</span><span class="logo-text">О'ЛЯПКА</span></a>
<p class="footer-about">Студия авторских ИИ-мультиков.</p>
</div>
<div class="footer-col">
<h2>Навигация</h2>
<a href="index.html">Главная</a>
<a href="services.html">Услуги</a>
<a href="portfolio.html">Работы</a>
<a href="contacts.html">Контакты</a>
</div>
<div class="footer-col">
<h2>Документы</h2>
<a href="legal.html">Политика cookies</a>
<a href="legal.html#agreement">Пользовательское соглашение</a>
</div>
<div class="footer-col">
<h2>Связаться</h2>
<a href="https://t.me/YuliaAnimation" target="_blank" rel="noopener">Telegram</a>
<a href="https://www.instagram.com/olapka_animatioh?utm_source=site" target="_blank" rel="noopener">Instagram</a>
<a href="https://vk.com/club240204788" target="_blank" rel="noopener">ВКонтакте</a>
</div>
</div>
<div class="footer-bottom"><div class="container">© 2026 Студия мультфильмов О'ляпка</div></div>
</footer>
<script src="js/main.js" defer></script>
</body>
</html>
+202 -134
View File
@@ -4,75 +4,171 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Примеры работ и отзывы — Студия мультфильмов О'ляпка</title>
<meta name="description"
content="Смотрите примеры ИИ-мультиков студии О'ляпка: персональные подарки, рекламные ролики, Love Story. Реальные отзывы клиентов.">
<meta property="og:type" content="website">
<meta property="og:title" content="Примеры работ студии О'ляпка">
<meta property="og:description"
content="Авторские ИИ-мультики: подарки, реклама, Love Story. Смотрите работы и отзывы.">
<meta property="og:image" content="https://olapka.ru/img/og-portfolio.jpg">
<meta property="og:url" content="https://olapka.ru/portfolio.html">
<link rel="icon" type="image/svg+xml" href="img/favicon.svg"> <link rel="icon" type="image/svg+xml" href="img/favicon.svg">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&amp;family=Caveat:wght@500;700&amp;display=swap" rel="stylesheet">
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Caveat:wght@500;700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<script type="application/ld+json"> <title>Примеры мультфильмов и рекламной анимации — О’ляпка</title>
<meta name="description" content="Посмотрите примеры ИИ-анимации студии О’ляпка: рекламные ролики, детские сказки и персональные подарки. Выберите идею для своего мультфильма.">
<link rel="canonical" href="https://olapka.ru/portfolio.html">
<meta name="robots" content="index, follow, max-image-preview:large">
<meta property="og:type" content="website">
<meta property="og:title" content="Примеры мультфильмов и рекламной анимации — О’ляпка">
<meta property="og:description" content="Посмотрите примеры ИИ-анимации студии О’ляпка: рекламные ролики, детские сказки и персональные подарки. Выберите идею для своего мультфильма.">
<meta property="og:url" content="https://olapka.ru/portfolio.html">
<meta property="og:image" content="https://olapka.ru/img/og-cover.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="О’ляпка — мультфильмы на заказ">
<meta property="og:site_name" content="Студия О’ляпка">
<meta property="og:locale" content="ru_RU">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://olapka.ru/img/og-cover.jpg">
<script type="application/ld+json">{
"@context": "https://schema.org",
"@graph": [
{ {
"@context": "https://schema.org", "@type": "Organization",
"@type": "ItemList", "@id": "https://olapka.ru/#organization",
"name": "Примеры работ студии О'ляпка", "name": "Студия мультфильмов О’ляпка",
"itemListElement": [ "url": "https://olapka.ru/",
{"@type":"ListItem","position":1,"name":"Love Story Анны и Дмитрия","url":"https://olapka.ru/portfolio.html#work-1"}, "logo": "https://olapka.ru/img/favicon.svg",
{"@type":"ListItem","position":2,"name":"Рекламный ролик для массажной студии","url":"https://olapka.ru/portfolio.html#work-2"}, "telephone": "+79160957383",
{"@type":"ListItem","position":3,"name":"Сказка для Миши, 5 лет","url":"https://olapka.ru/portfolio.html#work-3"} "sameAs": [
] "https://t.me/YuliaAnimation",
"https://www.instagram.com/olapka_animatioh",
"https://vk.com/club240204788"
],
"contactPoint": {
"@type": "ContactPoint",
"telephone": "+79160957383",
"contactType": "customer service",
"availableLanguage": "ru",
"url": "https://olapka.ru/contacts.html"
}
},
{
"@type": "WebSite",
"@id": "https://olapka.ru/#website",
"url": "https://olapka.ru/",
"name": "Студия О’ляпка",
"inLanguage": "ru",
"publisher": {
"@id": "https://olapka.ru/#organization"
}
},
{
"@type": "CollectionPage",
"@id": "https://olapka.ru/portfolio.html#webpage",
"url": "https://olapka.ru/portfolio.html",
"name": "Примеры мультфильмов и рекламной анимации — О’ляпка",
"description": "Посмотрите примеры ИИ-анимации студии О’ляпка: рекламные ролики, детские сказки и персональные подарки. Выберите идею для своего мультфильма.",
"inLanguage": "ru",
"isPartOf": {
"@id": "https://olapka.ru/#website"
},
"about": {
"@id": "https://olapka.ru/#organization"
},
"breadcrumb": {
"@id": "https://olapka.ru/portfolio.html#breadcrumbs"
}
},
{
"@type": "BreadcrumbList",
"@id": "https://olapka.ru/portfolio.html#breadcrumbs",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Главная",
"item": "https://olapka.ru/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Работы",
"item": "https://olapka.ru/portfolio.html"
}
]
},
{
"@type": "ItemList",
"name": "Примеры работ",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Реклама детского лофта",
"url": "https://olapka.ru/portfolio.html#work-1"
},
{
"@type": "ListItem",
"position": 2,
"name": "Детский музей мозга",
"url": "https://olapka.ru/portfolio.html#work-2"
},
{
"@type": "ListItem",
"position": 3,
"name": "Приключение Саши в Звёздном саду",
"url": "https://olapka.ru/portfolio.html#work-3"
},
{
"@type": "ListItem",
"position": 4,
"name": "Сюрприз для подруги",
"url": "https://olapka.ru/portfolio.html#work-4"
},
{
"@type": "ListItem",
"position": 5,
"name": "Артём и секрет настоящей победы",
"url": "https://olapka.ru/portfolio.html#work-5"
},
{
"@type": "ListItem",
"position": 6,
"name": "Продакт-плейсмент к сезону отключения горячей воды",
"url": "https://olapka.ru/portfolio.html#work-6"
}
]
} }
</script> ]
}</script>
<script type="text/javascript">
(function (m, e, t, r, i, k, a) {
m[i] = m[i] || function () {(m[i].a = m[i].a || []).push(arguments)};
m[i].l = 1 * new Date(); k = e.createElement(t), a = e.getElementsByTagName(t)[0], k.async = 1, k.src = "https://mc.yandex.ru/metrika/tag.js", a.parentNode.insertBefore(k, a)
})
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
ym(110606131, "init", {clickmap: true, trackLinks: true, accurateTrackBounce: true, webvisor: true});
</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=GTM-M5HGH586"></script>
<script>window.dataLayer = window.dataLayer || []; function gtag() {dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'GTM-M5HGH586');</script>
</head> </head>
<body> <body>
<div class="cookie-banner" id="cookieBanner"> <a class="skip-link" href="#main-content">Перейти к содержимому</a><div class="cookie-banner" id="cookieBanner" role="region" aria-label="Настройки аналитики" hidden>
<div class="cookie-text">Мы используем cookies. <a href="legal.html">Подробнее</a>.</div> <div class="cookie-text">Разрешить аналитику для улучшения сайта? <a href="legal.html#cookies">Подробнее</a>
<button class="cookie-btn" id="cookieAccept" data-goal="cookie_accept">Принять</button> </div>
</div> <div class="cookie-actions">
<button class="cookie-btn" id="cookieAccept" type="button">Разрешить</button><button class="cookie-btn cookie-decline" id="cookieDecline" type="button">Отклонить</button>
<header class="header"> </div>
</div>
<header class="header">
<div class="container header-inner"> <div class="container header-inner">
<a href="index.html" class="logo"><span class="logo-bird">🐦</span><span <a href="index.html" class="logo"><span class="logo-bird">🐦</span><span class="logo-text">О'ЛЯПКА</span></a>
class="logo-text">О'ЛЯПКА</span></a> <nav class="nav" id="nav" aria-label="Основная навигация">
<nav class="nav" id="nav">
<a href="index.html" class="nav-link">Главная</a> <a href="index.html" class="nav-link">Главная</a>
<a href="services.html" class="nav-link">Услуги</a> <a href="services.html" class="nav-link">Услуги</a>
<a href="portfolio.html" class="nav-link active">Работы</a> <a href="portfolio.html" class="nav-link active" aria-current="page">Работы</a>
<a href="contacts.html" class="nav-link">Контакты</a> <a href="contacts.html" class="nav-link">Контакты</a>
</nav> </nav>
<a href="contacts.html" class="btn btn-primary" data-goal="order_header">Заказать</a> <a href="contacts.html" class="btn btn-primary" data-goal="order_header">Заказать</a>
<button class="burger" id="burger" aria-label="Меню"><span></span><span></span><span></span></button> <button class="burger" id="burger" aria-label="Меню" type="button" aria-expanded="false" aria-controls="nav"><span></span><span></span><span></span></button>
</div> </div>
</header> </header>
<main> <main id="main-content" tabindex="-1">
<section class="page-hero"> <nav class="container breadcrumbs" aria-label="Хлебные крошки"><ol>
<li><a href="index.html">Главная</a></li>
<li><span aria-current="page">Работы</span></li>
</ol></nav><section class="page-hero">
<div class="container"> <div class="container">
<h1 class="page-title">Наши <span class="accent">работы</span></h1> <h1 class="page-title">Примеры мультфильмов и рекламной анимации</h1>
<p class="page-subtitle">Каждый мультик — это уникальная история. Смотрите примеры и вдохновляйтесь.</p> <p class="page-subtitle">Каждый мультик — это уникальная история. Смотрите примеры и вдохновляйтесь.</p>
</div> </div>
</section> </section>
@@ -80,17 +176,14 @@
<!-- Примеры работ --> <!-- Примеры работ -->
<section class="section"> <section class="section">
<div class="container"> <div class="container">
<div class="portfolio-grid"> <h2 class="section-title">Мультфильмы и рекламные ролики</h2>
<div class="portfolio-grid">
<article class="work-card" id="work-1"> <article class="work-card" id="work-1">
<div class="work-media"> <div class="work-media">
<button class="work-video" type="button" data-video="video/video-1.webm" <button class="work-video" type="button" data-video="video/video-1.webm" data-title="Реклама к открытию детского лофта" data-goal="video_open" aria-label="Смотреть видео: Реклама к открытию детского лофта">
data-title="Реклама к открытию детского лофта" data-goal="video_open" <video class="work-video-preview" src="video/video-1.webm#t=10.6" preload="none" muted playsinline aria-hidden="true"></video>
aria-label="Смотреть видео: Реклама к открытию детского лофта"> <span class="work-play" aria-hidden="true"><svg viewbox="0 0 24 24" width="28" height="28">
<video class="work-video-preview" src="video/video-1.webm#t=10.6" preload="metadata" <path d="M8 5.5v13l10-6.5z" fill="currentColor"></path>
muted playsinline disablepictureinpicture tabindex="-1" aria-hidden="true"></video>
<span class="work-play" aria-hidden="true"><svg viewBox="0 0 24 24" width="28"
height="28">
<path d="M8 5.5v13l10-6.5z" fill="currentColor" />
</svg></span> </svg></span>
<span class="work-video-label">Реклама</span> <span class="work-video-label">Реклама</span>
</button> </button>
@@ -106,17 +199,13 @@
<span>4 500 ₽</span> <span>4 500 ₽</span>
</div> </div>
</div> </div>
</article> <noscript><p><a href="video/video-1.webm">Открыть видео</a></p></noscript></article>
<article class="work-card" id="work-2"> <article class="work-card" id="work-2">
<div class="work-media"> <div class="work-media">
<button class="work-video" type="button" data-video="video/video-6.webm" <button class="work-video" type="button" data-video="video/video-6.webm" data-title="Рекламный ролик для Детского Музея Мозга " data-goal="video_open" aria-label="Смотреть видео: Рекламный ролик для Детского Музея Мозга">
data-title="Рекламный ролик для Детского Музея Мозга " data-goal="video_open" <video class="work-video-preview" src="video/video-6.webm#t=13.5" preload="none" muted playsinline aria-hidden="true"></video>
aria-label="Смотреть видео: Рекламный ролик для Детского Музея Мозга"> <span class="work-play" aria-hidden="true"><svg viewbox="0 0 24 24" width="28" height="28">
<video class="work-video-preview" src="video/video-6.webm#t=13.5" preload="metadata" <path d="M8 5.5v13l10-6.5z" fill="currentColor"></path>
muted playsinline disablepictureinpicture tabindex="-1" aria-hidden="true"></video>
<span class="work-play" aria-hidden="true"><svg viewBox="0 0 24 24" width="28"
height="28">
<path d="M8 5.5v13l10-6.5z" fill="currentColor" />
</svg></span> </svg></span>
<span class="work-video-label">Мультсериал</span> <span class="work-video-label">Мультсериал</span>
</button> </button>
@@ -132,17 +221,13 @@
<span>13 500 ₽</span> <span>13 500 ₽</span>
</div> </div>
</div> </div>
</article> <noscript><p><a href="video/video-6.webm">Открыть видео</a></p></noscript></article>
<article class="work-card" id="work-3"> <article class="work-card" id="work-3">
<div class="work-media"> <div class="work-media">
<button class="work-video" type="button" data-video="video/video-2.webm" <button class="work-video" type="button" data-video="video/video-2.webm" data-title="Приключение Саши в Звёздном саду" data-goal="video_open" aria-label="Смотреть видео: Приключение девочки Саши в Звёздном саду">
data-title="Приключение Саши в Звёздном саду" data-goal="video_open" <video class="work-video-preview" src="video/video-2.webm#t=0.1" preload="none" muted playsinline aria-hidden="true"></video>
aria-label="Смотреть видео: Приключение девочки Саши в Звёздном саду"> <span class="work-play" aria-hidden="true"><svg viewbox="0 0 24 24" width="28" height="28">
<video class="work-video-preview" src="video/video-2.webm#t=0.1" preload="metadata" <path d="M8 5.5v13l10-6.5z" fill="currentColor"></path>
muted playsinline disablepictureinpicture tabindex="-1" aria-hidden="true"></video>
<span class="work-play" aria-hidden="true"><svg viewBox="0 0 24 24" width="28"
height="28">
<path d="M8 5.5v13l10-6.5z" fill="currentColor" />
</svg></span> </svg></span>
<span class="work-video-label">Сказка для Саши</span> <span class="work-video-label">Сказка для Саши</span>
</button> </button>
@@ -157,17 +242,13 @@
<span>4 500 ₽</span> <span>4 500 ₽</span>
</div> </div>
</div> </div>
</article> <noscript><p><a href="video/video-2.webm">Открыть видео</a></p></noscript></article>
<article class="work-card" id="work-4"> <article class="work-card" id="work-4">
<div class="work-media"> <div class="work-media">
<button class="work-video" type="button" data-video="video/video-4.webm" <button class="work-video" type="button" data-video="video/video-4.webm" data-title="Сюрприз для подруги" data-goal="video_open" aria-label="Смотреть видео: Сюрприз для подруги">
data-title="Сюрприз для подруги" data-goal="video_open" <video class="work-video-preview" src="video/video-4.webm#t=4" preload="none" muted playsinline aria-hidden="true"></video>
aria-label="Смотреть видео: Сюрприз для подруги"> <span class="work-play" aria-hidden="true"><svg viewbox="0 0 24 24" width="28" height="28">
<video class="work-video-preview" src="video/video-4.webm#t=4" preload="metadata" muted <path d="M8 5.5v13l10-6.5z" fill="currentColor"></path>
playsinline disablepictureinpicture tabindex="-1" aria-hidden="true"></video>
<span class="work-play" aria-hidden="true"><svg viewBox="0 0 24 24" width="28"
height="28">
<path d="M8 5.5v13l10-6.5z" fill="currentColor" />
</svg></span> </svg></span>
<span class="work-video-label">Сюрприз для подруги</span> <span class="work-video-label">Сюрприз для подруги</span>
</button> </button>
@@ -182,17 +263,13 @@
<span>3 300 ₽</span> <span>3 300 ₽</span>
</div> </div>
</div> </div>
</article> <noscript><p><a href="video/video-4.webm">Открыть видео</a></p></noscript></article>
<article class="work-card" id="work-5"> <article class="work-card" id="work-5">
<div class="work-media"> <div class="work-media">
<button class="work-video" type="button" data-video="video/video-5.webm" <button class="work-video" type="button" data-video="video/video-5.webm" data-title="Артём и секрет настоящей победы" data-goal="video_open" aria-label="Смотреть видео: Артём и секрет настоящей победы">
data-title="Артём и секрет настоящей победы" data-goal="video_open" <video class="work-video-preview" src="video/video-5.webm#t=0.1" preload="none" muted playsinline aria-hidden="true"></video>
aria-label="Смотреть видео: Артём и секрет настоящей победы"> <span class="work-play" aria-hidden="true"><svg viewbox="0 0 24 24" width="28" height="28">
<video class="work-video-preview" src="video/video-5.webm#t=0.1" preload="metadata" <path d="M8 5.5v13l10-6.5z" fill="currentColor"></path>
muted playsinline disablepictureinpicture tabindex="-1" aria-hidden="true"></video>
<span class="work-play" aria-hidden="true"><svg viewBox="0 0 24 24" width="28"
height="28">
<path d="M8 5.5v13l10-6.5z" fill="currentColor" />
</svg></span> </svg></span>
<span class="work-video-label">Детская сказка</span> <span class="work-video-label">Детская сказка</span>
</button> </button>
@@ -207,17 +284,13 @@
<span>7 000 ₽</span> <span>7 000 ₽</span>
</div> </div>
</div> </div>
</article> <noscript><p><a href="video/video-5.webm">Открыть видео</a></p></noscript></article>
<article class="work-card" id="work-6"> <article class="work-card" id="work-6">
<div class="work-media"> <div class="work-media">
<button class="work-video" type="button" data-video="video/video-3.webm" <button class="work-video" type="button" data-video="video/video-3.webm" data-title="Продакт-плейсмент к сезону отключения горячей воды" data-goal="video_open" aria-label="Смотреть видео: Продакт-плейсмент к сезону отключения горячей воды">
data-title="Продакт-плейсмент к сезону отключения горячей воды" data-goal="video_open" <video class="work-video-preview" src="video/video-3.webm#t=1" preload="none" muted playsinline aria-hidden="true"></video>
aria-label="Смотреть видео: Продакт-плейсмент к сезону отключения горячей воды"> <span class="work-play" aria-hidden="true"><svg viewbox="0 0 24 24" width="28" height="28">
<video class="work-video-preview" src="video/video-3.webm#t=1" preload="metadata" muted <path d="M8 5.5v13l10-6.5z" fill="currentColor"></path>
playsinline disablepictureinpicture tabindex="-1" aria-hidden="true"></video>
<span class="work-play" aria-hidden="true"><svg viewBox="0 0 24 24" width="28"
height="28">
<path d="M8 5.5v13l10-6.5z" fill="currentColor" />
</svg></span> </svg></span>
<span class="work-video-label">Для соцсетей</span> <span class="work-video-label">Для соцсетей</span>
</button> </button>
@@ -232,7 +305,7 @@
<span>4 500 ₽</span> <span>4 500 ₽</span>
</div> </div>
</div> </div>
</article> <noscript><p><a href="video/video-3.webm">Открыть видео</a></p></noscript></article>
</div> </div>
</div> </div>
</section> </section>
@@ -240,7 +313,8 @@
<!-- Отзывы --> <!-- Отзывы -->
<section class="section reviews"> <section class="section reviews">
<div class="container"> <div class="container">
<h2 class="section-title">Что говорят <span class="accent">клиенты</span></h2> <h2 class="section-title">Что говорят <span class="accent">клиенты</span>
</h2>
<div class="reviews-grid"> <div class="reviews-grid">
<article class="review-card"> <article class="review-card">
<div class="review-stars">★★★★★</div> <div class="review-stars">★★★★★</div>
@@ -249,7 +323,7 @@
передали один в один: окна, горку, администратора и фотографа. Выложили ролик в районные передали один в один: окна, горку, администратора и фотографа. Выложили ролик в районные
чаты, и теперь новые клиенты говорят: «Видели ваш мультик, поэтому зашли».</p> чаты, и теперь новые клиенты говорят: «Видели ваш мультик, поэтому зашли».</p>
<div class="review-author"> <div class="review-author">
<div class="review-name">Кристина К.</div> <h3 class="review-name">Кристина К.</h3>
<div class="review-role">Руководитель детского лофта</div> <div class="review-role">Руководитель детского лофта</div>
</div> </div>
</article> </article>
@@ -260,7 +334,7 @@
воспоминаниями тронула до слёз даже бабушек. Всё так похоже на нашу жизнь! А Саша теперь ещё воспоминаниями тронула до слёз даже бабушек. Всё так похоже на нашу жизнь! А Саша теперь ещё
больше верит, что ночью игрушки оживают. Лучший подарок на день рождения, спасибо!</p> больше верит, что ночью игрушки оживают. Лучший подарок на день рождения, спасибо!</p>
<div class="review-author"> <div class="review-author">
<div class="review-name">Мария К.</div> <h3 class="review-name">Мария К.</h3>
<div class="review-role">Мама девочки Саши</div> <div class="review-role">Мама девочки Саши</div>
</div> </div>
</article> </article>
@@ -271,7 +345,7 @@
с другом. Продажи на маркетплейсах ощутимо выросли. Обязательно обращусь ещё для продвижения с другом. Продажи на маркетплейсах ощутимо выросли. Обязательно обращусь ещё для продвижения
других товаров!</p> других товаров!</p>
<div class="review-author"> <div class="review-author">
<div class="review-name">Дмитрий О.</div> <h3 class="review-name">Дмитрий О.</h3>
<div class="review-role">Селлер WB</div> <div class="review-role">Селлер WB</div>
</div> </div>
</article> </article>
@@ -281,7 +355,7 @@
<p class="review-text">«Заказывали мультик на годовщину свадьбы. Муж был в полном восторге! <p class="review-text">«Заказывали мультик на годовщину свадьбы. Муж был в полном восторге!
Пересматриваем уже раз десять. Спасибо за вашу работу и душу, которую вы вкладываете!»</p> Пересматриваем уже раз десять. Спасибо за вашу работу и душу, которую вы вкладываете!»</p>
<div class="review-author"> <div class="review-author">
<div class="review-name">Анна К.</div> <h3 class="review-name">Анна К.</h3>
<div class="review-role">Love Story</div> <div class="review-role">Love Story</div>
</div> </div>
</article> </article>
@@ -292,7 +366,7 @@
жизни подстроила всё точно так же! Подруга была в шоке и восторге. Спасибо «Оляпке» за жизни подстроила всё точно так же! Подруга была в шоке и восторге. Спасибо «Оляпке» за
воплощение моей задумки и внимание к деталям. Сюрприз удался!</p> воплощение моей задумки и внимание к деталям. Сюрприз удался!</p>
<div class="review-author"> <div class="review-author">
<div class="review-name">Марина К.</div> <h3 class="review-name">Марина К.</h3>
<div class="review-role">Сюрприз</div> <div class="review-role">Сюрприз</div>
</div> </div>
</article> </article>
@@ -301,7 +375,7 @@
<p class="review-text">«Рекламный ролик для нашей студии массажа превзошёл ожидания. Клиенты <p class="review-text">«Рекламный ролик для нашей студии массажа превзошёл ожидания. Клиенты
пишут, что именно этот мультик убедил их прийти. Охваты в Instagram выросли в 3 раза!»</p> пишут, что именно этот мультик убедил их прийти. Охваты в Instagram выросли в 3 раза!»</p>
<div class="review-author"> <div class="review-author">
<div class="review-name">Елена М.</div> <h3 class="review-name">Елена М.</h3>
<div class="review-role">Студия детского массажа</div> <div class="review-role">Студия детского массажа</div>
</div> </div>
</article> </article>
@@ -310,7 +384,7 @@
<p class="review-text">«Сын смотрел мультик про себя и не мог оторваться. Спросил: "Мама, это я <p class="review-text">«Сын смотрел мультик про себя и не мог оторваться. Спросил: "Мама, это я
настоящий в мультике?" Сердце растаяло. Спасибо за волшебство!»</p> настоящий в мультике?" Сердце растаяло. Спасибо за волшебство!»</p>
<div class="review-author"> <div class="review-author">
<div class="review-name">Ольга В.</div> <h3 class="review-name">Ольга В.</h3>
<div class="review-role">Сказка для ребёнка</div> <div class="review-role">Сказка для ребёнка</div>
</div> </div>
</article> </article>
@@ -319,7 +393,7 @@
<p class="review-text">«Заказали контент-пакет на месяц. Теперь у нас не болит голова "что <p class="review-text">«Заказали контент-пакет на месяц. Теперь у нас не болит голова "что
постить завтра". Аудитория ждёт новые серии, сохранения бьют рекорды.»</p> постить завтра". Аудитория ждёт новые серии, сохранения бьют рекорды.»</p>
<div class="review-author"> <div class="review-author">
<div class="review-name">Марина Д.</div> <h3 class="review-name">Марина Д.</h3>
<div class="review-role">Эксперт по детскому сну</div> <div class="review-role">Эксперт по детскому сну</div>
</div> </div>
</article> </article>
@@ -331,7 +405,7 @@
онлайн-курсов. За две недели публикаций продажи выросли на 20%. Отдельное спасибо за онлайн-курсов. За две недели публикаций продажи выросли на 20%. Отдельное спасибо за
терпение к правкам — всё получилось так, как я представляла!</p> терпение к правкам — всё получилось так, как я представляла!</p>
<div class="review-author"> <div class="review-author">
<div class="review-name">Светлана И.</div> <h3 class="review-name">Светлана И.</h3>
<div class="review-role">Студия детского массажа</div> <div class="review-role">Студия детского массажа</div>
</div> </div>
</article> </article>
@@ -344,29 +418,28 @@
</div> </div>
</div> </div>
</section> </section>
</main> <p class="container privacy-settings"><button type="button" id="cookieSettings">Настройки аналитики</button></p></main>
<footer class="footer"> <footer class="footer">
<div class="container footer-inner"> <div class="container footer-inner">
<div class="footer-col"> <div class="footer-col">
<a href="index.html" class="logo"><span class="logo-bird">🐦</span><span <a href="index.html" class="logo"><span class="logo-bird">🐦</span><span class="logo-text">О'ЛЯПКА</span></a>
class="logo-text">О'ЛЯПКА</span></a>
<p class="footer-about">Студия авторских ИИ-мультиков.</p> <p class="footer-about">Студия авторских ИИ-мультиков.</p>
</div> </div>
<div class="footer-col"> <div class="footer-col">
<h4>Навигация</h4> <h2>Навигация</h2>
<a href="index.html">Главная</a> <a href="index.html">Главная</a>
<a href="services.html">Услуги</a> <a href="services.html">Услуги</a>
<a href="portfolio.html">Работы</a> <a href="portfolio.html">Работы</a>
<a href="contacts.html">Контакты</a> <a href="contacts.html">Контакты</a>
</div> </div>
<div class="footer-col"> <div class="footer-col">
<h4>Документы</h4> <h2>Документы</h2>
<a href="legal.html">Политика cookies</a> <a href="legal.html">Политика cookies</a>
<a href="legal.html#agreement">Пользовательское соглашение</a> <a href="legal.html#agreement">Пользовательское соглашение</a>
</div> </div>
<div class="footer-col"> <div class="footer-col">
<h4>Связаться</h4> <h2>Связаться</h2>
<a href="https://t.me/YuliaAnimation" target="_blank" rel="noopener">Telegram</a> <a href="https://t.me/YuliaAnimation" target="_blank" rel="noopener">Telegram</a>
<a href="https://www.instagram.com/olapka_animatioh?utm_source=site" target="_blank" rel="noopener">Instagram</a> <a href="https://www.instagram.com/olapka_animatioh?utm_source=site" target="_blank" rel="noopener">Instagram</a>
<a href="https://vk.com/club240204788" target="_blank" rel="noopener">ВКонтакте</a> <a href="https://vk.com/club240204788" target="_blank" rel="noopener">ВКонтакте</a>
@@ -378,36 +451,31 @@
</footer> </footer>
<!-- Видео-лайтбокс --> <!-- Видео-лайтбокс -->
<div class="video-modal" id="videoModal" role="dialog" aria-modal="true" aria-labelledby="videoModalTitle" <div class="video-modal" id="videoModal" role="dialog" aria-modal="true" aria-labelledby="videoModalTitle" aria-hidden="true">
aria-hidden="true">
<div class="video-modal-backdrop" data-video-close></div> <div class="video-modal-backdrop" data-video-close></div>
<div class="video-modal-dialog"> <div class="video-modal-dialog">
<div class="video-modal-bar"> <div class="video-modal-bar">
<span class="video-modal-title" id="videoModalTitle"></span> <span class="video-modal-title" id="videoModalTitle"></span>
<div class="video-modal-actions"> <div class="video-modal-actions">
<button class="video-modal-btn" type="button" id="videoModalFullscreen" aria-label="На весь экран" <button class="video-modal-btn" type="button" id="videoModalFullscreen" aria-label="На весь экран" title="На весь экран">
title="На весь экран"> <svg viewbox="0 0 24 24" width="22" height="22" aria-hidden="true">
<svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true"> <path d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg> </svg>
</button> </button>
<button class="video-modal-btn" type="button" data-video-close aria-label="Закрыть" <button class="video-modal-btn" type="button" data-video-close aria-label="Закрыть" title="Закрыть (Esc)">
title="Закрыть (Esc)"> <svg viewbox="0 0 24 24" width="22" height="22" aria-hidden="true">
<svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true"> <path d="M6 6l12 12M18 6L6 18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
<path d="M6 6l12 12M18 6L6 18" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" />
</svg> </svg>
</button> </button>
</div> </div>
</div> </div>
<div class="video-modal-stage"> <div class="video-modal-stage">
<video id="videoModalPlayer" controls playsinline preload="metadata"></video> <video id="videoModalPlayer" controls playsinline preload="none" tabindex="0" aria-label="Просмотр выбранного мультфильма"></video>
</div> </div>
</div> </div>
</div> </div>
<script src="js/main.js"></script> <script src="js/main.js" defer></script>
</body> </body>
</html> </html>
-2
View File
@@ -1,6 +1,4 @@
User-agent: * User-agent: *
Allow: / Allow: /
Disallow: /legal.html
Sitemap: https://olapka.ru/sitemap.xml Sitemap: https://olapka.ru/sitemap.xml
Host: https://olapka.ru
+239 -92
View File
@@ -3,103 +3,197 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Услуги студии О'ляпка — ИИ-мультики для подарков, бизнеса и соцсетей</title>
<meta name="description" content="Услуги студии О'ляпка: персональные ИИ-мультики на заказ, рекламные ролики для бизнеса, контент для соцсетей. Тарифы от 2500 ₽.">
<!-- Open Graph --> <!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:title" content="Услуги студии О'ляпка">
<meta property="og:description" content="ИИ-мультики для подарков, бизнеса и соцсетей. От 2500 ₽.">
<meta property="og:image" content="https://olapka.ru/img/og-services.jpg">
<meta property="og:url" content="https://olapka.ru/services.html">
<link rel="icon" type="image/svg+xml" href="img/favicon.svg"> <link rel="icon" type="image/svg+xml" href="img/favicon.svg">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Caveat:wght@500;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&amp;family=Caveat:wght@500;700&amp;display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<!-- JSON-LD: 3 услуги --> <!-- JSON-LD: 3 услуги -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "ItemList",
"itemListElement": [
{
"@type": "Service",
"name": "Персональные ИИ-мультики",
"description": "Мультики на день рождения, годовщину, Love Story, сказки для детей.",
"provider": {"@type":"ProfessionalService","name":"Студия О'ляпка"},
"areaServed": "RU",
"offers": {"@type":"Offer","price":"2500","priceCurrency":"RUB"}
},
{
"@type": "Service",
"name": "Рекламные ИИ-мультики для бизнеса",
"description": "Имиджевые ролики, реклама новых продуктов, контент для соцсетей.",
"provider": {"@type":"ProfessionalService","name":"Студия О'ляпка"},
"areaServed": "RU",
"offers": {"@type":"Offer","price":"4500","priceCurrency":"RUB"}
},
{
"@type": "Service",
"name": "Контент-пакеты для соцсетей",
"description": "Серии мультиков для регулярного ведения Instagram, VK, Telegram.",
"provider": {"@type":"ProfessionalService","name":"Студия О'ляпка"},
"areaServed": "RU",
"offers": {"@type":"Offer","price":"9000","priceCurrency":"RUB"}
}
]
}
</script>
<!-- Yandex.Metrika --> <!-- Yandex.Metrika -->
<script type="text/javascript"> <title>Создание мультфильмов: услуги и цены — О’ляпка</title>
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; <meta name="description" content="Персональные мультфильмы, рекламная анимация и ролики для соцсетей. Сравните направления, тарифы от 2 500 ₽ и дополнительные опции студии О’ляпка.">
m[i].l=1*new Date(); <link rel="canonical" href="https://olapka.ru/services.html">
for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} <meta name="robots" content="index, follow, max-image-preview:large">
k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) <meta property="og:type" content="website">
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); <meta property="og:title" content="Создание мультфильмов: услуги и цены — О’ляпка">
ym(110606131, "init", {clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true}); <meta property="og:description" content="Персональные мультфильмы, рекламная анимация и ролики для соцсетей. Сравните направления, тарифы от 2 500 ₽ и дополнительные опции студии О’ляпка.">
</script> <meta property="og:url" content="https://olapka.ru/services.html">
<script async src="https://www.googletagmanager.com/gtag/js?id=GTM-M5HGH586"></script> <meta property="og:image" content="https://olapka.ru/img/og-cover.jpg">
<script> <meta property="og:image:width" content="1200">
window.dataLayer = window.dataLayer || []; <meta property="og:image:height" content="630">
function gtag(){dataLayer.push(arguments);} <meta property="og:image:alt" content="О’ляпка — мультфильмы на заказ">
gtag('js', new Date()); <meta property="og:site_name" content="Студия О’ляпка">
gtag('config', 'GTM-M5HGH586'); <meta property="og:locale" content="ru_RU">
</script> <meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://olapka.ru/img/og-cover.jpg">
<script type="application/ld+json">{
"@context": "https://schema.org",
"@graph": [
{
"@type": "Organization",
"@id": "https://olapka.ru/#organization",
"name": "Студия мультфильмов О’ляпка",
"url": "https://olapka.ru/",
"logo": "https://olapka.ru/img/favicon.svg",
"telephone": "+79160957383",
"sameAs": [
"https://t.me/YuliaAnimation",
"https://www.instagram.com/olapka_animatioh",
"https://vk.com/club240204788"
],
"contactPoint": {
"@type": "ContactPoint",
"telephone": "+79160957383",
"contactType": "customer service",
"availableLanguage": "ru",
"url": "https://olapka.ru/contacts.html"
}
},
{
"@type": "WebSite",
"@id": "https://olapka.ru/#website",
"url": "https://olapka.ru/",
"name": "Студия О’ляпка",
"inLanguage": "ru",
"publisher": {
"@id": "https://olapka.ru/#organization"
}
},
{
"@type": "CollectionPage",
"@id": "https://olapka.ru/services.html#webpage",
"url": "https://olapka.ru/services.html",
"name": "Создание мультфильмов: услуги и цены — О’ляпка",
"description": "Персональные мультфильмы, рекламная анимация и ролики для соцсетей. Сравните направления, тарифы от 2 500 ₽ и дополнительные опции студии О’ляпка.",
"inLanguage": "ru",
"isPartOf": {
"@id": "https://olapka.ru/#website"
},
"about": {
"@id": "https://olapka.ru/#organization"
},
"breadcrumb": {
"@id": "https://olapka.ru/services.html#breadcrumbs"
}
},
{
"@type": "BreadcrumbList",
"@id": "https://olapka.ru/services.html#breadcrumbs",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Главная",
"item": "https://olapka.ru/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Услуги",
"item": "https://olapka.ru/services.html"
}
]
},
{
"@type": "Service",
"@id": "https://olapka.ru/personal-animation.html#service",
"name": "Персональные мультфильмы на заказ",
"description": "Мультфильм на день рождения, Love Story или сказка для ребёнка. Персональная история с близкими людьми в главных ролях.",
"serviceType": "Персональные мультфильмы на заказ",
"url": "https://olapka.ru/personal-animation.html",
"provider": {
"@id": "https://olapka.ru/#organization"
}
},
{
"@type": "Service",
"@id": "https://olapka.ru/business-animation.html#service",
"name": "Рекламные анимационные ролики для бизнеса",
"description": "ИИ-анимация для рекламы, презентации продукта и истории бренда. Объясняем идеи через персонажей и сюжет.",
"serviceType": "Рекламные анимационные ролики для бизнеса",
"url": "https://olapka.ru/business-animation.html",
"provider": {
"@id": "https://olapka.ru/#organization"
}
},
{
"@type": "Service",
"@id": "https://olapka.ru/social-animation.html#service",
"name": "Анимационные ролики для соцсетей",
"description": "Мультики для Reels, Stories, ВКонтакте и Telegram: отдельные ролики, сезонные сюжеты и серии в едином стиле.",
"serviceType": "Анимационные ролики для соцсетей",
"url": "https://olapka.ru/social-animation.html",
"provider": {
"@id": "https://olapka.ru/#organization"
}
},
{
"@type": "ItemList",
"name": "Услуги студии О’ляпка",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"item": {
"@id": "https://olapka.ru/personal-animation.html#service"
}
},
{
"@type": "ListItem",
"position": 2,
"item": {
"@id": "https://olapka.ru/business-animation.html#service"
}
},
{
"@type": "ListItem",
"position": 3,
"item": {
"@id": "https://olapka.ru/social-animation.html#service"
}
}
]
}
]
}</script>
</head> </head>
<body> <body>
<div class="cookie-banner" id="cookieBanner"> <a class="skip-link" href="#main-content">Перейти к содержимому</a><div class="cookie-banner" id="cookieBanner" role="region" aria-label="Настройки аналитики" hidden>
<div class="cookie-text">Мы используем cookies. <a href="legal.html">Подробнее</a>.</div> <div class="cookie-text">Разрешить аналитику для улучшения сайта? <a href="legal.html#cookies">Подробнее</a>
<button class="cookie-btn" id="cookieAccept" data-goal="cookie_accept">Принять</button> </div>
</div> <div class="cookie-actions">
<button class="cookie-btn" id="cookieAccept" type="button">Разрешить</button><button class="cookie-btn cookie-decline" id="cookieDecline" type="button">Отклонить</button>
<header class="header"> </div>
</div>
<header class="header">
<div class="container header-inner"> <div class="container header-inner">
<a href="index.html" class="logo"><span class="logo-bird">🐦</span><span class="logo-text">О'ЛЯПКА</span></a> <a href="index.html" class="logo"><span class="logo-bird">🐦</span><span class="logo-text">О'ЛЯПКА</span></a>
<nav class="nav" id="nav"> <nav class="nav" id="nav" aria-label="Основная навигация">
<a href="index.html" class="nav-link">Главная</a> <a href="index.html" class="nav-link">Главная</a>
<a href="services.html" class="nav-link active">Услуги</a> <a href="services.html" class="nav-link active" aria-current="page">Услуги</a>
<a href="portfolio.html" class="nav-link">Работы</a> <a href="portfolio.html" class="nav-link">Работы</a>
<a href="contacts.html" class="nav-link">Контакты</a> <a href="contacts.html" class="nav-link">Контакты</a>
</nav> </nav>
<a href="contacts.html" class="btn btn-primary" data-goal="order_header">Заказать</a> <a href="contacts.html" class="btn btn-primary" data-goal="order_header">Заказать</a>
<button class="burger" id="burger" aria-label="Меню"><span></span><span></span><span></span></button> <button class="burger" id="burger" aria-label="Меню" type="button" aria-expanded="false" aria-controls="nav"><span></span><span></span><span></span></button>
</div> </div>
</header> </header>
<main> <main id="main-content" tabindex="-1">
<section class="page-hero"> <nav class="container breadcrumbs" aria-label="Хлебные крошки"><ol>
<li><a href="index.html">Главная</a></li>
<li><span aria-current="page">Услуги</span></li>
</ol></nav><section class="page-hero">
<div class="container"> <div class="container">
<h1 class="page-title">Наши <span class="accent">услуги</span></h1> <h1 class="page-title">Создание мультфильмов и ИИ-анимации</h1>
<p class="page-subtitle">Три направления, в которых мы создаём магию. Выберите то, что подходит именно вам.</p> <p class="page-subtitle">Персональные истории, рекламная анимация и ролики для соцсетей. Выберите направление и посмотрите, что можно заказать.</p>
</div> </div>
</section> </section>
<!-- Раздел 1: Личные мультики --> <nav class="container service-links" aria-label="Направления услуг"><a href="personal-animation.html">Персональные мультфильмы на заказ</a><a href="business-animation.html">Рекламные анимационные ролики для бизнеса</a><a href="social-animation.html">Анимационные ролики для соцсетей</a></nav><!-- Раздел 1: Личные мультики -->
<section class="section service-block"> <section class="section service-block" id="personal">
<div class="container"> <div class="container">
<div class="service-head"> <div class="service-head">
<span class="service-tag">🤍 Для души</span> <span class="service-tag">🤍 Для души</span>
@@ -121,17 +215,18 @@
</article> </article>
<article class="service-card"> <article class="service-card">
<h3>📱 Контент для личного блога</h3> <h3>📱 Контент для личного блога</h3>
<p>Вирусные Reels и Stories, которые покажут ваш лайфстайл ярко и нестандартно. Алгоритмы Instagram любят такой контент.</p> <p>Анимационные Reels и Stories для личного блога: ваши сюжеты, персонажи и узнаваемый стиль.</p>
</article> </article>
</div> </div>
<div class="service-cta"> <div class="service-cta">
<a href="contacts.html" class="btn btn-primary btn-lg" data-goal="order_personal_page">Заказать личный мультик</a> <p class="detail-link"><a href="personal-animation.html">Подробнее: персональные мультфильмы на заказ →</a></p>
<a href="contacts.html" class="btn btn-primary btn-lg" data-goal="order_personal_page">Заказать личный мультик</a>
</div> </div>
</div> </div>
</section> </section>
<!-- Раздел 2: Бизнес --> <!-- Раздел 2: Бизнес -->
<section class="section service-block alt"> <section class="section service-block alt" id="business">
<div class="container"> <div class="container">
<div class="service-head"> <div class="service-head">
<span class="service-tag">🚀 Для бизнеса</span> <span class="service-tag">🚀 Для бизнеса</span>
@@ -157,13 +252,14 @@
</article> </article>
</div> </div>
<div class="service-cta"> <div class="service-cta">
<a href="contacts.html" class="btn btn-primary btn-lg" data-goal="order_business_page">Заказать для бизнеса</a> <p class="detail-link"><a href="business-animation.html">Подробнее: рекламные анимационные ролики для бизнеса →</a></p>
<a href="contacts.html" class="btn btn-primary btn-lg" data-goal="order_business_page">Заказать для бизнеса</a>
</div> </div>
</div> </div>
</section> </section>
<!-- Раздел 3: Соцсети --> <!-- Раздел 3: Соцсети -->
<section class="section service-block"> <section class="section service-block" id="social">
<div class="container"> <div class="container">
<div class="service-head"> <div class="service-head">
<span class="service-tag">📈 Для соцсетей</span> <span class="service-tag">📈 Для соцсетей</span>
@@ -181,7 +277,7 @@
</article> </article>
<article class="service-card"> <article class="service-card">
<h3>🎄 Сезонные ролики</h3> <h3>🎄 Сезонные ролики</h3>
<p>1 сентября, Новый год, День матери — успеваем к любому инфоповоду. Готовые шаблоны адаптируются под ваш бренд за день.</p> <p>Ролики к Новому году, 1 сентября и другим событиям. Срок адаптации обсуждаем с учётом вашей задачи.</p>
</article> </article>
<article class="service-card"> <article class="service-card">
<h3>🔄 Вторичное использование</h3> <h3>🔄 Вторичное использование</h3>
@@ -189,26 +285,77 @@
</article> </article>
</div> </div>
<div class="service-cta"> <div class="service-cta">
<a href="contacts.html" class="btn btn-primary btn-lg" data-goal="order_content_page">Заказать контент-пакет</a> <p class="detail-link"><a href="social-animation.html">Подробнее: анимационные ролики для соцсетей →</a></p>
<a href="contacts.html" class="btn btn-primary btn-lg" data-goal="order_content_page">Заказать контент-пакет</a>
</div> </div>
</div> </div>
</section> </section>
<!-- Доп. опции --> <!-- Доп. опции -->
<section class="section extras"> <section class="section extras" id="extras">
<div class="container"> <div class="container">
<h2 class="section-title">Дополнительные опции</h2> <h2 class="section-title">Дополнительные опции</h2>
<div class="extras-grid"> <div class="extras-grid">
<div class="extra-item"><span class="extra-name">Дополнительная сцена</span><span class="extra-price">+800 ₽</span></div> <div class="extra-item">
<div class="extra-item"><span class="extra-name">Срочность (24–48 часов)</span><span class="extra-price">+30%</span></div> <span class="extra-name">Дополнительная сцена</span><span class="extra-price">+800 ₽</span>
<div class="extra-item"><span class="extra-name">Уникальный персонаж с нуля</span><span class="extra-price">+1 500 ₽</span></div> </div>
<div class="extra-item"><span class="extra-name">Авторская музыка</span><span class="extra-price">+2 000 ₽</span></div> <div class="extra-item">
<div class="extra-item"><span class="extra-name">Доп. раунд правок</span><span class="extra-price">+500 ₽</span></div> <span class="extra-name">Срочность (24–48 часов)</span><span class="extra-price">+30%</span>
<div class="extra-item"><span class="extra-name">Адаптация под 2 формата</span><span class="extra-price">+700 ₽</span></div> </div>
<div class="extra-item">
<span class="extra-name">Уникальный персонаж с нуля</span><span class="extra-price">+1 500 ₽</span>
</div>
<div class="extra-item">
<span class="extra-name">Авторская музыка</span><span class="extra-price">+2 000 ₽</span>
</div>
<div class="extra-item">
<span class="extra-name">Доп. раунд правок</span><span class="extra-price">+500 ₽</span>
</div>
<div class="extra-item">
<span class="extra-name">Адаптация под 2 формата</span><span class="extra-price">+700 ₽</span>
</div>
</div> </div>
</div> </div>
</section> </section>
</main> <section class="section pricing" id="prices">
<div class="container">
<h2 class="section-title">Тарифы на ИИ-мультики</h2>
<p class="section-subtitle">Выберите формат под вашу задачу. 1 кадр = 4–8 секунд.</p>
<div class="pricing-grid">
<article class="price-card" id="tariff-1">
<h3 class="price-name">Искры</h3>
<div class="price-desc">Короткий мультик до 30 секунд</div>
<div class="price-features">2–4 сцены • 1 раунд правок • Базовая озвучка • Формат под Reels</div>
<div class="price-value">2 500 ₽</div>
<a href="contacts.html" class="btn btn-outline" data-goal="order_sparks">Заказать</a>
</article>
<article class="price-card featured" id="tariff-2">
<div class="price-badge">Популярный</div>
<h3 class="price-name">История</h3>
<div class="price-desc">От 30 секунд до 1 минуты</div>
<div class="price-features">4–7 сцен • 2 раунда правок • Озвучка и музыка • Цветокоррекция</div>
<div class="price-value">4 500 ₽</div>
<a href="contacts.html" class="btn btn-primary" data-goal="order_story">Заказать</a>
</article>
<article class="price-card" id="tariff-3">
<h3 class="price-name">Сказка</h3>
<div class="price-desc">От 1 до 2 минут</div>
<div class="price-features">От 8 сцен • 3 раунда правок • Профессиональная озвучка • Титры и логотип</div>
<div class="price-value">9 000 ₽</div>
<a href="contacts.html" class="btn btn-outline" data-goal="order_tale">Заказать</a>
</article>
</div>
<div class="pricing-note">
<p>💡 <strong>Спецпредложение:</strong> первый тестовый мультик — со скидкой 30%. Попробуйте без риска!</p>
<p>🎁 <strong>Пакет «Контент-месяц»</strong> (4 ролика) — скидка 15%.</p>
</div>
</div>
</section>
<section class="section"><div class="container faq">
<h2 class="section-title">Вопросы о заказе мультфильма</h2>
<details><summary>Сколько стоит мультфильм?</summary><p>Тарифы студии: 2 500 ₽, 4 500 ₽ и 9 000 ₽. Состав и длительность указаны выше. Дополнительные сцены, срочность и адаптации оплачиваются отдельно.</p></details><details><summary>Сколько времени занимает работа?</summary><p>Срок зависит от сценария, длительности и количества правок. Дату готовности согласуем до начала работы. Срочное изготовление обсуждается отдельно.</p></details><details><summary>Как заказать?</summary><p>Откройте <a href="contacts.html">контакты</a> и напишите в удобный мессенджер: кому нужен ролик, для чего и к какой дате.</p></details>
</div></section><p class="container privacy-settings"><button type="button" id="cookieSettings">Настройки аналитики</button></p></main>
<footer class="footer"> <footer class="footer">
<div class="container footer-inner"> <div class="container footer-inner">
@@ -217,19 +364,19 @@
<p class="footer-about">Студия авторских ИИ-мультиков.</p> <p class="footer-about">Студия авторских ИИ-мультиков.</p>
</div> </div>
<div class="footer-col"> <div class="footer-col">
<h4>Навигация</h4> <h2>Навигация</h2>
<a href="index.html">Главная</a> <a href="index.html">Главная</a>
<a href="services.html">Услуги</a> <a href="services.html">Услуги</a>
<a href="portfolio.html">Работы</a> <a href="portfolio.html">Работы</a>
<a href="contacts.html">Контакты</a> <a href="contacts.html">Контакты</a>
</div> </div>
<div class="footer-col"> <div class="footer-col">
<h4>Документы</h4> <h2>Документы</h2>
<a href="legal.html">Политика cookies</a> <a href="legal.html">Политика cookies</a>
<a href="legal.html#agreement">Пользовательское соглашение</a> <a href="legal.html#agreement">Пользовательское соглашение</a>
</div> </div>
<div class="footer-col"> <div class="footer-col">
<h4>Связаться</h4> <h2>Связаться</h2>
<a href="https://t.me/YuliaAnimation" target="_blank" rel="noopener">Telegram</a> <a href="https://t.me/YuliaAnimation" target="_blank" rel="noopener">Telegram</a>
<a href="https://www.instagram.com/olapka_animatioh?utm_source=site" target="_blank" rel="noopener">Instagram</a> <a href="https://www.instagram.com/olapka_animatioh?utm_source=site" target="_blank" rel="noopener">Instagram</a>
<a href="https://vk.com/club240204788" target="_blank" rel="noopener">ВКонтакте</a> <a href="https://vk.com/club240204788" target="_blank" rel="noopener">ВКонтакте</a>
@@ -238,6 +385,6 @@
<div class="footer-bottom"><div class="container">© 2026 Студия мультфильмов О'ляпка</div></div> <div class="footer-bottom"><div class="container">© 2026 Студия мультфильмов О'ляпка</div></div>
</footer> </footer>
<script src="js/main.js"></script> <script src="js/main.js" defer></script>
</body> </body>
</html> </html>
+7 -30
View File
@@ -1,33 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url> <url><loc>https://olapka.ru/contacts.html</loc><lastmod>2026-10-30</lastmod></url>
<loc>https://olapka.ru/</loc> <url><loc>https://olapka.ru/</loc><lastmod>2026-10-30</lastmod></url>
<lastmod>2026-07-11</lastmod> <url><loc>https://olapka.ru/services.html</loc><lastmod>2026-10-30</lastmod></url>
<changefreq>weekly</changefreq> <url><loc>https://olapka.ru/portfolio.html</loc><lastmod>2026-10-30</lastmod></url>
<priority>1.0</priority> <url><loc>https://olapka.ru/personal-animation.html</loc><lastmod>2026-10-30</lastmod></url>
</url> <url><loc>https://olapka.ru/business-animation.html</loc><lastmod>2026-10-30</lastmod></url>
<url> <url><loc>https://olapka.ru/social-animation.html</loc><lastmod>2026-10-30</lastmod></url>
<loc>https://olapka.ru/services.html</loc>
<lastmod>2026-07-11</lastmod>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
<url>
<loc>https://olapka.ru/portfolio.html</loc>
<lastmod>2026-07-11</lastmod>
<changefreq>weekly</changefreq>
<priority>0.8</priority>
</url>
<url>
<loc>https://olapka.ru/contacts.html</loc>
<lastmod>2026-07-11</lastmod>
<changefreq>monthly</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>https://olapka.ru/legal.html</loc>
<lastmod>2026-07-11</lastmod>
<changefreq>yearly</changefreq>
<priority>0.3</priority>
</url>
</urlset> </urlset>
+227
View File
@@ -0,0 +1,227 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Open Graph -->
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&amp;family=Caveat:wght@500;700&amp;display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<!-- JSON-LD: 3 услуги -->
<!-- Yandex.Metrika -->
<title>Анимационные ролики для соцсетей — О’ляпка</title>
<meta name="description" content="Мультики для Reels, Stories, ВКонтакте и Telegram: отдельные ролики, сезонные сюжеты и серии в едином стиле.">
<link rel="canonical" href="https://olapka.ru/social-animation.html">
<meta name="robots" content="index, follow, max-image-preview:large">
<meta property="og:type" content="website">
<meta property="og:title" content="Анимационные ролики для соцсетей — О’ляпка">
<meta property="og:description" content="Мультики для Reels, Stories, ВКонтакте и Telegram: отдельные ролики, сезонные сюжеты и серии в едином стиле.">
<meta property="og:url" content="https://olapka.ru/social-animation.html">
<meta property="og:image" content="https://olapka.ru/img/og-cover.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="О’ляпка — мультфильмы на заказ">
<meta property="og:site_name" content="Студия О’ляпка">
<meta property="og:locale" content="ru_RU">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://olapka.ru/img/og-cover.jpg">
<script type="application/ld+json">{
"@context": "https://schema.org",
"@graph": [
{
"@type": "Organization",
"@id": "https://olapka.ru/#organization",
"name": "Студия мультфильмов О’ляпка",
"url": "https://olapka.ru/",
"logo": "https://olapka.ru/img/favicon.svg",
"telephone": "+79160957383",
"sameAs": [
"https://t.me/YuliaAnimation",
"https://www.instagram.com/olapka_animatioh",
"https://vk.com/club240204788"
],
"contactPoint": {
"@type": "ContactPoint",
"telephone": "+79160957383",
"contactType": "customer service",
"availableLanguage": "ru",
"url": "https://olapka.ru/contacts.html"
}
},
{
"@type": "WebSite",
"@id": "https://olapka.ru/#website",
"url": "https://olapka.ru/",
"name": "Студия О’ляпка",
"inLanguage": "ru",
"publisher": {
"@id": "https://olapka.ru/#organization"
}
},
{
"@type": "WebPage",
"@id": "https://olapka.ru/social-animation.html#webpage",
"url": "https://olapka.ru/social-animation.html",
"name": "Анимационные ролики для соцсетей — О’ляпка",
"description": "Мультики для Reels, Stories, ВКонтакте и Telegram: отдельные ролики, сезонные сюжеты и серии в едином стиле.",
"inLanguage": "ru",
"isPartOf": {
"@id": "https://olapka.ru/#website"
},
"about": {
"@id": "https://olapka.ru/#organization"
},
"breadcrumb": {
"@id": "https://olapka.ru/social-animation.html#breadcrumbs"
},
"mainEntity": {
"@id": "https://olapka.ru/social-animation.html#service"
}
},
{
"@type": "BreadcrumbList",
"@id": "https://olapka.ru/social-animation.html#breadcrumbs",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Главная",
"item": "https://olapka.ru/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Услуги",
"item": "https://olapka.ru/services.html"
},
{
"@type": "ListItem",
"position": 3,
"name": "Анимационные ролики для соцсетей",
"item": "https://olapka.ru/social-animation.html"
}
]
},
{
"@type": "Service",
"@id": "https://olapka.ru/social-animation.html#service",
"name": "Анимационные ролики для соцсетей",
"description": "Мультики для Reels, Stories, ВКонтакте и Telegram: отдельные ролики, сезонные сюжеты и серии в едином стиле.",
"serviceType": "Анимационные ролики для соцсетей",
"url": "https://olapka.ru/social-animation.html",
"provider": {
"@id": "https://olapka.ru/#organization"
}
}
]
}</script>
</head>
<body>
<a class="skip-link" href="#main-content">Перейти к содержимому</a><div class="cookie-banner" id="cookieBanner" role="region" aria-label="Настройки аналитики" hidden>
<div class="cookie-text">Разрешить аналитику для улучшения сайта? <a href="legal.html#cookies">Подробнее</a>
</div>
<div class="cookie-actions">
<button class="cookie-btn" id="cookieAccept" type="button">Разрешить</button><button class="cookie-btn cookie-decline" id="cookieDecline" type="button">Отклонить</button>
</div>
</div>
<header class="header">
<div class="container header-inner">
<a href="index.html" class="logo"><span class="logo-bird">🐦</span><span class="logo-text">О'ЛЯПКА</span></a>
<nav class="nav" id="nav" aria-label="Основная навигация">
<a href="index.html" class="nav-link">Главная</a>
<a href="services.html" class="nav-link active">Услуги</a>
<a href="portfolio.html" class="nav-link">Работы</a>
<a href="contacts.html" class="nav-link">Контакты</a>
</nav>
<a href="contacts.html" class="btn btn-primary" data-goal="order_header">Заказать</a>
<button class="burger" id="burger" aria-label="Меню" type="button" aria-expanded="false" aria-controls="nav"><span></span><span></span><span></span></button>
</div>
</header>
<main id="main-content" tabindex="-1"><nav class="container breadcrumbs" aria-label="Хлебные крошки"><ol>
<li><a href="index.html">Главная</a></li>
<li><a href="services.html">Услуги</a></li>
<li><span aria-current="page">Анимационные ролики для соцсетей</span></li>
</ol></nav><section class="page-hero"><div class="container">
<h1 class="page-title">Анимационные ролики для соцсетей</h1>
<p class="page-subtitle">Мультики для Reels, Stories, ВКонтакте и Telegram: отдельные ролики, сезонные сюжеты и серии в едином стиле.</p>
<p class="service-cta"><a class="btn btn-primary" href="contacts.html" data-goal="order_service">Обсудить мультфильм</a></p>
</div></section><section class="section service-block" id="social">
<div class="container">
<div class="service-head">
<span class="service-tag">📈 Для соцсетей</span>
<h2>Контент-пакеты для регулярного ведения</h2>
<p class="service-lead">Серии мультиков, которые закрывают контент-план на месяц вперёд. Единый стиль, сюжетные линии, вовлечённая аудитория.</p>
</div>
<div class="service-grid">
<article class="service-card">
<h3>📦 Пакет «Контент-месяц»</h3>
<p>4 ролика + идея единой серии. Закрывает контент-план на месяц. Скидка 15%.</p>
</article>
<article class="service-card">
<h3>🧵 Мультики-сериалы</h3>
<p>Единая вселенная вашего бренда с повторяющимися персонажами. Аудитория ждёт продолжения.</p>
</article>
<article class="service-card">
<h3>🎄 Сезонные ролики</h3>
<p>Ролики к Новому году, 1 сентября и другим событиям. Срок адаптации обсуждаем с учётом вашей задачи.</p>
</article>
<article class="service-card">
<h3>🔄 Вторичное использование</h3>
<p>Один мультик = 1 Reels + 5 нарезок для сторис + пост в Telegram + обложка для подкаста. Контент работает везде.</p>
</article>
</div>
<div class="service-cta">
<a href="contacts.html" class="btn btn-primary btn-lg" data-goal="order_content_page">Заказать контент-пакет</a>
</div>
</div>
</section>
<section class="section"><div class="container">
<h2 class="section-title">Что подготовить для заказа</h2>
<p class="section-subtitle">Укажите площадки, темы и частоту публикаций. Пришлите примеры вашего контента и пожелания к персонажам и формату роликов.</p>
<div class="service-summary">
<h2>Стоимость и сроки</h2>
<p>В студии есть тарифы «Искры» — 2 500 ₽, «История» — 4 500 ₽ и «Сказка» — 9 000 ₽. Это общие тарифы по длительности и составу работы, а не фиксированная цена любого проекта в этом направлении.</p>
<p>Посмотрите <a href="index.html#prices">состав тарифов</a> и <a href="services.html#extras">дополнительные опции</a>. Стоимость, срок и формат результата согласуем до начала работы.</p>
<h2>Как проходит работа</h2>
<p>Обсуждаем задачу и условия, утверждаем сценарий и стиль, создаём анимацию и озвучку. Затем показываем результат и вносим правки в рамках выбранного тарифа.</p>
<p><a href="portfolio.html">Посмотреть примеры работ</a> · <a href="contacts.html">Связаться со студией</a></p>
</div>
</div></section><section class="section"><div class="container">
<h2 class="section-title">Другие услуги</h2>
<nav class="service-links" aria-label="Другие услуги"><a href="personal-animation.html">Персональные мультфильмы на заказ</a><a href="business-animation.html">Рекламные анимационные ролики для бизнеса</a></nav>
</div></section><p class="container privacy-settings"><button type="button" id="cookieSettings">Настройки аналитики</button></p></main><footer class="footer">
<div class="container footer-inner">
<div class="footer-col">
<a href="index.html" class="logo"><span class="logo-bird">🐦</span><span class="logo-text">О'ЛЯПКА</span></a>
<p class="footer-about">Студия авторских ИИ-мультиков.</p>
</div>
<div class="footer-col">
<h2>Навигация</h2>
<a href="index.html">Главная</a>
<a href="services.html">Услуги</a>
<a href="portfolio.html">Работы</a>
<a href="contacts.html">Контакты</a>
</div>
<div class="footer-col">
<h2>Документы</h2>
<a href="legal.html">Политика cookies</a>
<a href="legal.html#agreement">Пользовательское соглашение</a>
</div>
<div class="footer-col">
<h2>Связаться</h2>
<a href="https://t.me/YuliaAnimation" target="_blank" rel="noopener">Telegram</a>
<a href="https://www.instagram.com/olapka_animatioh?utm_source=site" target="_blank" rel="noopener">Instagram</a>
<a href="https://vk.com/club240204788" target="_blank" rel="noopener">ВКонтакте</a>
</div>
</div>
<div class="footer-bottom"><div class="container">© 2026 Студия мультфильмов О'ляпка</div></div>
</footer>
<script src="js/main.js" defer></script>
</body>
</html>