initial commit

This commit is contained in:
alexencom committed 2026-10-30 21:59:08 +03:00
commit edc022c895
14 files changed
+1872

No files matched your search

+18
View File
@@ -0,0 +1,18 @@
# Сайт студии мультфильмов «О'ляпка»
Статический адаптивный сайт для студии ИИ-анимации.
## 📁 Структура
- `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/
+106
View File
@@ -0,0 +1,106 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<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="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&family=Caveat:wght@500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "ContactPoint",
"contactType": "customer service",
"availableLanguage": ["Russian"],
"url": "https://olapka.ru/contacts.html"
}
</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>
<body class="contacts-page">
<div class="cookie-banner" id="cookieBanner">
<div class="cookie-text">Мы используем cookies. <a href="legal.html">Подробнее</a>.</div>
<button class="cookie-btn" id="cookieAccept" data-goal="cookie_accept">Принять</button>
</div>
<div class="taplink">
<div class="taplink-logo">
<span class="logo-bird-big">🐦</span>
<h1 class="taplink-title">О'ЛЯПКА</h1>
<p class="taplink-subtitle">Студия авторских ИИ-мультиков</p>
</div>
<div class="taplink-links">
<a href="https://t.me/YuliaAnimation" target="_blank" rel="noopener" class="taplink-btn taplink-telegram" data-goal="contact_telegram">
<span class="taplink-icon">✈️</span>
<span class="taplink-text">
<strong>Telegram</strong>
<span>Самый быстрый способ связи</span>
</span>
</a>
<a href="https://wa.me/79160957383" target="_blank" rel="noopener" class="taplink-btn taplink-whatsapp" data-goal="contact_whatsapp">
<span class="taplink-icon">💬</span>
<span class="taplink-text">
<strong>WhatsApp</strong>
<span>Напишите, если удобнее</span>
</span>
</a>
<a href="https://www.instagram.com/olapka_animatioh?utm_source=site" target="_blank" rel="noopener" class="taplink-btn taplink-instagram" data-goal="contact_instagram">
<span class="taplink-icon">📷</span>
<span class="taplink-text">
<strong>Instagram</strong>
<span>Примеры работ и сторис</span>
</span>
</a>
<a href="https://vk.com/club240204788" target="_blank" rel="noopener" class="taplink-btn taplink-vk" data-goal="contact_vk">
<span class="taplink-icon">🔵</span>
<span class="taplink-text">
<strong>ВКонтакте</strong>
<span>Сообщество студии</span>
</span>
</a>
</div>
<div class="taplink-info">
<h3>Как мы работаем</h3>
<ul>
<li>⚡ Отвечаем в течение 15–30 минут</li>
<li>🎁 Первый тестовый мультик — со скидкой 30%</li>
<li>💰 Стоимость — от 2 500 ₽</li>
<li>⏱️ Срок — от 3 до 7 дней</li>
</ul>
</div>
<div class="taplink-legal">
<a href="legal.html">Политика cookies</a>
<a href="legal.html#agreement">Пользовательское соглашение</a>
</div>
<div class="taplink-footer">
© 2026 Студия мультфильмов О'ляпка
</div>
</div>
<script src="js/main.js"></script>
</body>
</html>
+517
View File
@@ -0,0 +1,517 @@
/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 16px;
line-height: 1.6;
color: #2C2C2C;
background: #F9F7F0;
min-height: 100vh;
overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: all 0.2s ease; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
/* ===== VARIABLES ===== */
:root {
--color-bg: #F9F7F0;
--color-bg-alt: #FFFFFF;
--color-text: #2C2C2C;
--color-text-muted: #6B6B6B;
--color-accent: #E60000;
--color-accent-soft: #F5D5C8;
--color-border: #E5E5E5;
--font-hand: 'Caveat', cursive;
--container: 1200px;
--radius: 16px;
--shadow: 0 4px 24px rgba(0,0,0,0.06);
--shadow-hover: 0 8px 32px rgba(0,0,0,0.1);
}
.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.accent { color: var(--color-accent); }
/* ===== BUTTONS ===== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 28px;
font-weight: 600;
font-size: 15px;
border-radius: 50px;
transition: all 0.25s ease;
cursor: pointer;
border: 2px solid transparent;
white-space: nowrap;
}
.btn-primary { background: var(--color-accent); color: #fff; }
.btn-primary:hover { background: #B30000; transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.btn-outline { background: transparent; color: var(--color-text); border-color: var(--color-text); }
.btn-outline:hover { background: var(--color-text); color: #fff; }
.btn-lg { padding: 18px 36px; font-size: 16px; }
/* ===== HEADER ===== */
.header {
position: sticky;
top: 0;
background: rgba(249, 247, 240, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
z-index: 100;
border-bottom: 1px solid var(--color-border);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
gap: 24px;
}
.logo { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 20px; letter-spacing: 1px; }
.logo-bird { font-size: 28px; }
.nav { display: flex; gap: 28px; }
.nav-link { font-weight: 500; font-size: 15px; position: relative; }
.nav-link:hover, .nav-link.active { color: var(--color-accent); }
.nav-link.active::after {
content: '';
position: absolute;
bottom: -6px; left: 0; right: 0;
height: 2px;
background: var(--color-accent);
border-radius: 2px;
}
.burger { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.burger span { display: block; width: 24px; height: 2px; background: var(--color-text); transition: 0.3s; }
/* ===== HERO ===== */
.hero { padding: 80px 0 60px; }
.hero-content { max-width: 800px; }
.hero-tag {
display: inline-block;
padding: 6px 16px;
background: var(--color-accent-soft);
color: var(--color-accent);
border-radius: 50px;
font-size: 13px;
font-weight: 600;
margin-bottom: 24px;
}
.hero-title {
font-size: clamp(32px, 5vw, 56px);
font-weight: 800;
line-height: 1.1;
margin-bottom: 20px;
letter-spacing: -0.02em;
}
.hero-subtitle {
font-size: clamp(16px, 2vw, 19px);
color: var(--color-text-muted);
margin-bottom: 32px;
max-width: 640px;
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 48px; }
.hero-stats { display: flex; gap: 40px; flex-wrap: wrap; }
.stat-num { font-size: 28px; font-weight: 800; color: var(--color-accent); }
.stat-label { font-size: 13px; color: var(--color-text-muted); }
/* ===== SECTIONS ===== */
.section { padding: 80px 0; }
.section-title {
font-size: clamp(28px, 4vw, 42px);
font-weight: 800;
margin-bottom: 16px;
text-align: center;
letter-spacing: -0.02em;
}
.section-subtitle { text-align: center; color: var(--color-text-muted); margin-bottom: 48px; font-size: 17px; }
/* ===== BENEFITS ===== */
.benefits { background: var(--color-bg-alt); }
.benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-top: 48px; }
.benefit-card {
padding: 32px 24px;
background: var(--color-bg);
border-radius: var(--radius);
transition: 0.3s;
}
.benefit-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.benefit-icon { font-size: 36px; margin-bottom: 16px; }
.benefit-card h3 { font-size: 19px; margin-bottom: 8px; font-weight: 700; }
.benefit-card p { color: var(--color-text-muted); font-size: 15px; }
/* ===== FOR WHOM ===== */
.for-whom-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; margin-top: 48px; }
.for-whom-card {
padding: 40px 32px;
background: var(--color-bg-alt);
border-radius: var(--radius);
border: 1px solid var(--color-border);
}
.for-whom-tag {
display: inline-block;
padding: 6px 14px;
background: var(--color-accent-soft);
border-radius: 50px;
font-size: 13px;
font-weight: 600;
margin-bottom: 16px;
}
.for-whom-card h3 { font-size: 24px; margin-bottom: 16px; }
.for-whom-card ul { margin-bottom: 24px; }
.for-whom-card li {
padding: 8px 0 8px 24px;
position: relative;
font-size: 15px;
}
.for-whom-card li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--color-accent);
font-weight: 700;
}
/* ===== PRICING ===== */
.pricing { background: var(--color-bg-alt); }
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 48px; }
.price-card {
padding: 36px 28px;
background: var(--color-bg);
border-radius: var(--radius);
border: 2px solid transparent;
position: relative;
display: flex;
flex-direction: column;
transition: 0.3s;
}
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.price-card.featured { border-color: var(--color-accent); background: #fff; }
.price-badge {
position: absolute;
top: -12px; left: 50%;
transform: translateX(-50%);
background: var(--color-accent);
color: #fff;
padding: 4px 16px;
border-radius: 50px;
font-size: 12px;
font-weight: 600;
}
.price-name { font-size: 24px; font-weight: 800; margin-bottom: 4px; }
.price-desc { color: var(--color-text-muted); font-size: 14px; margin-bottom: 20px; }
.price-features { font-size: 14px; margin-bottom: 24px; flex-grow: 1; color: var(--color-text-muted); }
.price-value { font-size: 32px; font-weight: 800; color: var(--color-accent); margin-bottom: 20px; }
.pricing-note {
margin-top: 40px;
padding: 24px;
background: var(--color-accent-soft);
border-radius: var(--radius);
text-align: center;
}
.pricing-note p { margin: 6px 0; font-size: 15px; }
/* ===== PROCESS ===== */
.process-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; margin-top: 48px; }
.step {
padding: 28px 20px;
background: var(--color-bg-alt);
border-radius: var(--radius);
position: relative;
}
.step-num {
font-family: var(--font-hand);
font-size: 48px;
color: var(--color-accent);
line-height: 1;
margin-bottom: 12px;
}
.step h3 { font-size: 17px; margin-bottom: 8px; }
.step p { font-size: 14px; color: var(--color-text-muted); }
/* ===== CTA ===== */
.cta { background: var(--color-bg-alt); }
.cta-box {
background: linear-gradient(135deg, var(--color-accent) 0%, #B30000 100%);
color: #fff;
padding: 60px 40px;
border-radius: var(--radius);
text-align: center;
}
.cta-box h2 { font-size: clamp(24px, 4vw, 36px); margin-bottom: 12px; }
.cta-box p { font-size: 17px; margin-bottom: 28px; opacity: 0.95; }
.cta-box .btn-primary { background: #fff; color: var(--color-accent); }
.cta-box .btn-primary:hover { background: var(--color-bg); }
/* ===== PAGE HERO ===== */
.page-hero { padding: 80px 0 40px; text-align: center; }
.page-title { font-size: clamp(32px, 5vw, 48px); font-weight: 800; margin-bottom: 16px; }
.page-subtitle { font-size: 18px; color: var(--color-text-muted); max-width: 640px; margin: 0 auto; }
/* ===== SERVICES PAGE ===== */
.service-block { padding: 60px 0; }
.service-block.alt { background: var(--color-bg-alt); }
.service-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.service-tag {
display: inline-block;
padding: 6px 16px;
background: var(--color-accent-soft);
color: var(--color-accent);
border-radius: 50px;
font-size: 13px;
font-weight: 600;
margin-bottom: 16px;
}
.service-head h2 { font-size: clamp(26px, 4vw, 36px); margin-bottom: 12px; }
.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-card {
padding: 28px 24px;
background: var(--color-bg);
border-radius: var(--radius);
border: 1px solid var(--color-border);
}
.service-block.alt .service-card { background: var(--color-bg); }
.service-card h3 { font-size: 18px; margin-bottom: 10px; }
.service-card p { font-size: 14px; color: var(--color-text-muted); }
.service-cta { text-align: center; margin-top: 32px; }
/* ===== EXTRAS ===== */
.extras-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 12px;
margin-top: 32px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.extra-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
background: var(--color-bg-alt);
border-radius: 12px;
border: 1px solid var(--color-border);
}
.extra-name { font-size: 15px; font-weight: 500; }
.extra-price { font-weight: 700; color: var(--color-accent); }
/* ===== PORTFOLIO ===== */
.portfolio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
.work-card {
background: var(--color-bg-alt);
border-radius: var(--radius);
overflow: hidden;
transition: 0.3s;
border: 1px solid var(--color-border);
}
.work-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.work-media {
aspect-ratio: 16/9;
background: linear-gradient(135deg, #2C2C2C, #444);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.work-placeholder { font-size: 18px; opacity: 0.7; }
.work-info { padding: 24px; }
.work-tag {
display: inline-block;
padding: 4px 12px;
background: var(--color-accent-soft);
color: var(--color-accent);
border-radius: 50px;
font-size: 12px;
font-weight: 600;
margin-bottom: 12px;
}
.work-info h3 { font-size: 19px; margin-bottom: 8px; }
.work-info p { font-size: 14px; color: var(--color-text-muted); margin-bottom: 16px; }
.work-meta { display: flex; gap: 16px; font-size: 13px; color: var(--color-text-muted); padding-top: 16px; border-top: 1px solid var(--color-border); }
/* ===== REVIEWS ===== */
.reviews { background: var(--color-bg-alt); }
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 48px; }
.review-card {
padding: 28px 24px;
background: var(--color-bg);
border-radius: var(--radius);
border: 1px solid var(--color-border);
}
.review-stars { color: #FFB800; font-size: 18px; margin-bottom: 12px; letter-spacing: 2px; }
.review-text { font-size: 15px; margin-bottom: 20px; font-style: italic; }
.review-name { font-weight: 700; font-size: 15px; }
.review-role { font-size: 13px; color: var(--color-text-muted); }
.cta-inline {
margin-top: 48px;
text-align: center;
padding: 40px 24px;
background: var(--color-accent-soft);
border-radius: var(--radius);
}
.cta-inline h3 { font-size: 24px; margin-bottom: 8px; }
.cta-inline p { margin-bottom: 20px; color: var(--color-text-muted); }
/* ===== CONTACTS (TAPLINK) ===== */
.contacts-page { background: linear-gradient(180deg, #F9F7F0 0%, #F5D5C8 100%); min-height: 100vh; }
.taplink {
max-width: 480px;
margin: 0 auto;
padding: 40px 20px;
text-align: center;
}
.taplink-logo { margin-bottom: 32px; }
.logo-bird-big { font-size: 64px; display: block; margin-bottom: 12px; }
.taplink-title {
font-size: 36px;
font-weight: 800;
letter-spacing: 2px;
margin-bottom: 8px;
}
.taplink-subtitle { color: var(--color-text-muted); font-size: 15px; }
.taplink-links { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.taplink-btn {
display: flex;
align-items: center;
gap: 16px;
padding: 18px 24px;
background: #fff;
border-radius: 16px;
box-shadow: var(--shadow);
transition: 0.25s;
text-align: left;
}
.taplink-btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.taplink-icon { font-size: 28px; flex-shrink: 0; }
.taplink-text { display: flex; flex-direction: column; }
.taplink-text strong { font-size: 16px; font-weight: 700; }
.taplink-text span { font-size: 13px; color: var(--color-text-muted); }
.taplink-telegram:hover { background: #229ED9; color: #fff; }
.taplink-telegram:hover .taplink-text span { color: rgba(255,255,255,0.8); }
.taplink-whatsapp:hover { background: #25D366; color: #fff; }
.taplink-whatsapp:hover .taplink-text span { color: rgba(255,255,255,0.8); }
.taplink-instagram:hover { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color: #fff; }
.taplink-instagram:hover .taplink-text span { color: rgba(255,255,255,0.8); }
.taplink-vk:hover { background: #0077FF; color: #fff; }
.taplink-vk:hover .taplink-text span { color: rgba(255,255,255,0.8); }
.taplink-info {
background: #fff;
padding: 24px;
border-radius: var(--radius);
margin-bottom: 24px;
text-align: left;
}
.taplink-info h3 { font-size: 18px; margin-bottom: 12px; text-align: center; }
.taplink-info li { padding: 6px 0; font-size: 14px; }
.taplink-legal {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 16px;
font-size: 13px;
}
.taplink-legal a { color: var(--color-text-muted); }
.taplink-legal a:hover { color: var(--color-accent); }
.taplink-footer { font-size: 12px; color: var(--color-text-muted); }
/* ===== LEGAL PAGE ===== */
.legal-page { padding: 60px 0 80px; }
.legal-page .container { max-width: 800px; }
.legal-section { margin-bottom: 48px; }
.legal-section h2 { font-size: 28px; margin-bottom: 8px; }
.legal-section h3 { font-size: 18px; margin: 24px 0 10px; color: var(--color-accent); }
.legal-section p, .legal-section li { font-size: 15px; margin-bottom: 10px; }
.legal-section ul { padding-left: 20px; list-style: disc; }
.legal-date { color: var(--color-text-muted); font-size: 14px; font-style: italic; margin-bottom: 20px; }
/* ===== FOOTER ===== */
.footer { background: #1A1A1A; color: #ccc; padding: 60px 0 0; margin-top: 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-about { font-size: 14px; color: #999; }
.footer h4 { color: #fff; font-size: 15px; margin-bottom: 16px; }
.footer-col a { display: block; padding: 4px 0; font-size: 14px; color: #999; }
.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; }
/* ===== COOKIE BANNER ===== */
.cookie-banner {
position: fixed;
bottom: 20px;
left: 20px;
right: 20px;
max-width: 480px;
background: #fff;
padding: 16px 20px;
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0,0,0,0.15);
display: flex;
align-items: center;
gap: 16px;
z-index: 1000;
transform: translateY(150%);
transition: transform 0.4s ease;
}
.cookie-banner.show { transform: translateY(0); }
.cookie-banner.hidden { display: none; }
.cookie-text { font-size: 13px; flex-grow: 1; }
.cookie-text a { color: var(--color-accent); text-decoration: underline; }
.cookie-btn {
background: var(--color-accent);
color: #fff;
padding: 8px 20px;
border-radius: 50px;
font-size: 13px;
font-weight: 600;
flex-shrink: 0;
}
.cookie-btn:hover { background: #B30000; }
/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
.footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
.nav {
display: none;
position: absolute;
top: 100%;
left: 0; right: 0;
background: var(--color-bg);
flex-direction: column;
padding: 20px;
gap: 16px;
border-bottom: 1px solid var(--color-border);
}
.nav.open { display: flex; }
.burger { display: flex; }
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.header .btn { display: none; }
.hero { padding: 40px 0; }
.section { padding: 50px 0; }
.hero-stats { gap: 24px; }
.stat-num { font-size: 22px; }
.footer-inner { grid-template-columns: 1fr; gap: 24px; }
.cta-box { padding: 40px 24px; }
.cookie-banner { flex-direction: column; align-items: stretch; gap: 12px; }
}
@media (max-width: 480px) {
.hero-actions { flex-direction: column; }
.hero-actions .btn { width: 100%; }
.btn-lg { padding: 16px 24px; font-size: 15px; }
.taplink-title { font-size: 28px; }
.taplink-btn { padding: 14px 18px; }
}
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" id="_Слой_1" width="1000" height="1000" data-name="Слой 1" viewBox="0 0 1000 1000"><defs><style>.cls-1{fill:#737272}.cls-2{fill:#393939}.cls-3{fill:#d5d5d6}.cls-4{fill:#c6c6c8}.cls-5{fill:#141414}.cls-6{fill:#f6d2d6}.cls-7{fill:#90918f}.cls-9{fill:#2e2e2e}.cls-10{fill:#4a4949}.cls-11{fill:#ae3437}.cls-12{fill:#b3b3b3}.cls-13{fill:#626160}.cls-14{fill:#e3e3e5}.cls-16{fill:#222}.cls-17{fill:#fdfdfd}</style></defs><path d="M0 0h1000v1000H0z" style="fill:#fff"/><path d="M570 255c57-4 96 36 93 93-3 46-40 79-87 77-108-4-107-162-6-170m5 47c-36 4-36 67-5 75 51 12 54-80 5-75m-33 377q6 1 9-3l15-36c5-10 18-10 28-9 11 0 23 2 19 16-2 8-9 21-13 29l-13 22 15 27 15 24q5 7-1 13c-8 6-32 8-41 4-11-4-18-30-23-40q-1-4-5-5h-5v37l-4 7c-7 4-28 4-35 2q-8-2-8-11c2-36-3-75 0-111q0-7 4-11c7-4 30-4 37-1q5 2 6 8zm199 51c2 2 7 0 10 4l1 21c-2 15-29 15-39 11q-9-3-14-12c-11 14-31 18-48 13-22-6-31-28-27-49 7-30 44-35 70-36-4-25-36-10-51-5-7 0-10-15-11-21-1-12 3-14 13-19 23-10 60-12 79 5 22 20 13 56 15 82zm-47-3v-18l-1-1c-10 1-25 2-25 14q0 14 14 12c3-1 11-4 12-7M458 606l2 2q-1 2-3 2l1-3h-2zm13 25 1 1v2l-1 2-1 1h-2l-2-2v-3z" class="cls-5"/><path d="M352 498h3v1q0 2 1 1c1 2-1 3 3 1l1 1q0 7 4 1h2q3-1 5 3v6c-3 0-1 2-2 3h-1v-1l-1-1h-4l-2-5h-3c-1 0-3-2-4 2 1 0 6-2 7 3 1 2-3 4-1 5q1 1 1-1 1-2 4-2h2q0 2 3 1l2 3-1 2h-2q-1-2-2-1v2h-4c-3-1-1 3 1 2l1-1 2-1h4l1 1 1 1 1 2q0 2-3 3h-2l-1 1h-1l-4-2v1l-3-1c1 4 3 1 3 1l4 1 1 2v1l-1 1q-2 2-5 1h-1l1 1 1 1 4-1 2-1 2 3c2 2-1 3 0 4q1 1 3-2h2l-1 2 3 3-1 3q0 3 2 3l-1-3 1-2 2-1h5q3 3 1 8l-4 1 1 2c-1 1-6 1 0 3l3-6c7 1 8 1 7 8q0-1 0 0v1c2 1 5-2 7 2l1 2-1 4-1 3q3 0 4-3h4l2 3q1 3-2 5h-6l-1-1-1-2h-5c1 5 2 2 5 2q0 2 1 1v3h2l1 1h5v2h8l1 1v3c3 1 1-1 2-3l4-3h2l2 2 1 2v2l-1 1 2 1v1h1v6h5c1 3 3 6-2 6l-4-3v-2l-3 1-2-1-1-3-4-1-3-2q0 3 4 3 1 3 4 4v3l2-1h3l3 4 1-1q2-1 3 2l-1 2h2v-5h1q0 2 2 0h1l1 1-1-1v-4c3-2 8-1 7 3l-3 3q4 0 3-2h5l3 2-2 2h1v1l-3 1h-2q-1 3 1 2c2-1 2 3 2 0q5 2 6-3 6-2 7 4l2-1q0-1 0 0l5 3h3l1 6q-5 0-5-4l-2 1h-1q-4-1-3-3h-6c0-3-4-2-1 0l-2 5h-4c0-1-1-4-2 0l2 1q3-1 4 1h-1l-1-1 1 1v1l1 2v1h6l2 1v6q-2 3-6 2l-3-3v-3l1-1q-2 0-1 1l-2 1 1 2v2h-2v2q3 0 2-2l1 1-1 3-3 2q-8 2-8-6l4-3q4 2 4-1h-1l-3-1c0-4-1-2-4-2l-1-1v-2l2-1q2 2 4-1l-5-1-1 3h-8v-2q-2 0-2 2l-1 4-4 1-4-3c-2 0 0 4 1 4l5-1 2 1q0 2-2 1 1 3 2 2l1 1-3 3q2 0 3-2h2l1 1 1 2v2h7l3 2v1q2 1 3-1h2q0 2 2 1l1-5 2-1 2-1 5 2 1 3q0 4-3 6l-6-1-1 3 1-1 2 1 4-1c4 0 3 2 6 2v1l-1 1 1 1 2-1q0 2 2 1 2 1 2-3v-1 1h-4l-2-1c-1-2-4-6 0-8l1-1h4l3 1 1 4-1 2v4h1v2q-3-1-1 2v5l1 9-1 2 1 3-2 4 2 1-1 7 1 3h-3l1 1q4 4 0 9l-2 1q-5 0-6-3h-1v-2l1-3q1-2 4-2l2-1h1v-2h-2l-2-3v-2h1l2-3h-3v2l-1 1 1 2-1 4q-2 4-6 2-3-3-2-7h-2c0 1 2 5-2 3v-2h-2l-1-1-2-6v-1l1-1 1-1h6l1 1q2 6 6 4l-1 2v1q2 1 2-2v-2h-1l-1-4 1-4h-1l-1-2v-1h-1l-2 3-2 2h-6l-1-7 3-3h5l3 5 1-4q-1-2-4-2h-2q-1-3-3 0l-2-1c0-1-2-5-3-4v1h-3q1-3-2-3l-2-1-1-2q1-2-1-2v2l-1 2c-4 0-1-3-1-4l-4-1-1-1v-3c-4 0 1 3 0 3h-3q1-4-3-3l-1-3q0-2-2-1 3 9-6 7l-1-1-1-2v-2q4-1 1-3l2-2c-3 0-1-3-4-4l1 6-1 1-1 1h-3l-2-1v-2h-1v-2l3-3h3q-2-3-3-1h-2v-6h-2l1 4-1 1-2 2h-3l-3-1c-1-1-1-6-3 0l-1 1h-1l-4-1-1-2v-4q6-4 8 2l1-2-1-1-3-1q0-3-2-2l-3 2h-3c-4 0-4-6-2-8l3-1h3s2-4 0-3l-1 1-1 1h-2v-1q1 1-3 2-6-1-5-7l3-2v-1q-1-3 1-1 1 3 4 3c0-4-2-2-4-4l-1-5-1 1h-1l1 5-3 3q-3 2-5-1l-1-5 2-2h5l1-2 1-2h-3l-2-3-1-3-1-2v2l-1 1q3 3 3 7c-2 0-5 4-8-1q0-4 2-5c2-2 3 0 2-4 3 0 0-1 0-3q-1-2-3-2-3-6-1-8l-2-1-1-1h-5q0-3 3-3h1q3 1 4-1h-5l-2-2v-1h-1v-4l1-1h-1l-2-2-1-3v-2l6-1q-1-2 1-5l-5 4-3-1-3-1c-1 9-11 1-5-4q3-1 5 1h1l-1-1v-1q2-1 2-3h2v-3h-4q-4-2-3-8h1v-1l2-1h3v-1c0-1 3-1-1-3v3l-2 1-4-1-1-1-1-1q-1-3 2-5h-2q-1-4-4-3-1-1-1 1h-2l-1-1q1-3 3-2-2-1 1-4c3-3 3 2 4 0q1-2-1-3-2-3 1-7l1-1zm-2 16q1-2-2-2 0 3 2 2m4-2-1 2h2zm2 5-2-1q0 3 2 3zm15 8q-2 0-1 2 1 1 1-2m-5 16q-3-4-3 0h2q-1 1 2 1v4q3-1 2-3s3-1 0-1h-1zm9 8q-2-1-3 2h3zm-7 4q-2-3-2-1zl3 2q1-3-2-2m0 2h-2v1h2zm3 3c1-1-3-3-2-1zm3 3q1 1 1-1h-2s-2-3-2-1zm2-2q1 0 0 0m6 5q3-1 0-2zm8-1-3-1-1 3h3q4 2 1-2m2 2 2-2c-3-3-3 1-2 2m-19-2h-1v2h1zm16 5-1 1-2 4c2 1 4-4 3-5m4 0q-3 0-2 2 2 1 2-2m-18 4v-1l-2-1v2zm3-2q-2-1-2 2h2zm17 5v-3c-1-3-4 3 0 3m-13 1q-2 0-2 3 3 0 2-3m3 2c-4-1-1 1-1 2s-1 4 2 4zm-6 3-4 2q4 1 4-2m17 0-4 2q0 2 2 2s2 4 2 0zm-7 4h-2v2h2zm20 3 4 3q3 1 4-2h-1c-6 0-4-2-5-3h-5q1 2 3 2m-14 3h-4l-3-1v2l-1 1 1-1h3l1 1h1l1 1 2 2 1-4c3 0 4 3 5 0 1-2-3-1-4-1l-2-1s0-4-1 1m31-1q-2 0-1 2zm-28 9-3-1-1 3c-1 2 3 0 4 0l4 2q1 6 2 0l1-1 2-1 6 2q0 3 2 3l-1-3-1-2h-2q0-2-2-2l-3 1h-2q-2-4-3-1zm24 6h-1l2 3zm-19 3-1 1h2zq0-2-1-1zm41 4v-5l-3 2zm-26-4-5-1 1 2c1 1 6 0 4-1m17-1c-1-1-2 3-3 3l-2 3q3-1 3-3c0-1 4-1 2-3m-45 3q2 1 2-1-3-2-2 1m22 3q3-1 1-3c-2-2-3 2-5 2l2 2 2 4-2 5c7 1 2-2 2-2v-2c1-1 4 2 4 0l-3-3zm13 0 1 1 1-2-3-1h-3zm-19-3v1zm45 2q-3-1-2 1zm-7 4 2-4q-3 1-3 4s-3 2 0 2zm-46-2h-2v1zm27 2-5 4 2 1q-2 2 1 4c2 0 1-4 1-4zq1 1 1-1l-1-1q1-1-2-1zm-28 0-3-1 2 4 2-2 4 1q0-3-5-2m36 1c0-3-4-3-3-1zm6 2-5-1c1 1 5 4 5 1m-21 1h-2v2h3zm-14 1c-1-1-3 4-2 4l2-1zm4 1h-2q2 5 2 0m17 17v-1l-2-1v2zm34 10q-3 0-2 2h1zm9 3q-2 1-2 4 3-1 2-4m2 12q1-3-2-2 1 3 2 2m4 1q-2 0-2 2h2zm-3 2h-2c-1 3 3 1 2 0m-6 14q-1-3-2 0z" class="cls-5"/><path d="M357 538v2h-4q1-2 4-2" class="cls-5"/><path d="M36Line truncated

After

Width:  |  Height:  |  Size: 189 KiB

+311
View File
@@ -0,0 +1,311 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<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 -->
<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 -->
<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 -->
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
<!-- Fonts -->
<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&family=Caveat:wght@500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<!-- 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 -->
<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 -->
<!-- Google Analytics -->
<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>
<body>
<!-- Cookie Banner -->
<div class="cookie-banner" id="cookieBanner">
<div class="cookie-text">
Мы используем cookies для улучшения работы сайта. Продолжая пользоваться сайтом, вы соглашаетесь с
<a href="legal.html">политикой обработки cookies</a>.
</div>
<button class="cookie-btn" id="cookieAccept" data-goal="cookie_accept">Принять</button>
</div>
<!-- Header -->
<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">
<a href="index.html" class="nav-link active">Главная</a>
<a href="services.html" class="nav-link">Услуги</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="Меню">
<span></span><span></span><span></span>
</button>
</div>
</header>
<!-- Hero -->
<section class="hero">
<div class="container">
<div class="hero-content">
<span class="hero-tag">Студия ИИ-анимации</span>
<h1 class="hero-title">Создаём мультики, которые <span class="accent">решают ваши задачи</span></h1>
<p class="hero-subtitle">Персональные подарки, реклама для бизнеса и вирусный контент для соцсетей. Авторский подход, честные цены, результат за 1–4 дня.</p>
<div class="hero-actions">
<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>
</div>
<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-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>
</section>
<!-- Преимущества -->
<section class="section benefits">
<div class="container">
<h2 class="section-title">Почему выбирают <span class="accent">О'ляпку</span></h2>
<div class="benefits-grid">
<article class="benefit-card">
<div class="benefit-icon">✨</div>
<h3>Авторский подход</h3>
<p>Не просто «картинки из нейросети», а полноценная история со сценарием, эмоцией и вашим уникальным стилем.</p>
</article>
<article class="benefit-card">
<div class="benefit-icon">⚡</div>
<h3>Быстро</h3>
<p>Готовый мультик за 1–4 дней. В 5 раз быстрее классической анимации — без потери качества.</p>
</article>
<article class="benefit-card">
<div class="benefit-icon">💎</div>
<h3>Честные цены</h3>
<p>От 2500 ₽ за короткий ролик. Никаких скрытых платежей и студийных наценок.</p>
</article>
<article class="benefit-card">
<div class="benefit-icon">🎯</div>
<h3>Решаем задачи</h3>
<p>Продаём, поздравляем, влюбляют в бренд. Каждый мультик работает на вашу цель.</p>
</article>
</div>
</div>
</section>
<!-- Для кого -->
<section class="section for-whom">
<div class="container">
<h2 class="section-title">Кому подходят наши мультики</h2>
<div class="for-whom-grid">
<div class="for-whom-card">
<div class="for-whom-tag">🤍 Для души</div>
<h3>Личные поводы</h3>
<ul>
<li>Подарок на день рождения, годовщину, юбилей</li>
<li>Ваша Love Story в формате анимации</li>
<li>Сказка для ребёнка, где он — главный герой</li>
<li>Вирусные Reels для личного блога</li>
</ul>
<a href="contacts.html" class="btn btn-outline" data-goal="order_personal">Заказать личный мультик</a>
</div>
<div class="for-whom-card">
<div class="for-whom-tag">🚀 Для бизнеса</div>
<h3>Коммерческие задачи</h3>
<ul>
<li>Реклама, которая цепляет и останавливает скролл</li>
<li>Запуск нового направления или продукта</li>
<li>Продвижение в соцсетях и рост охватов</li>
<li>Имиджевые ролики и VIP-подарки клиентам</li>
</ul>
<a href="contacts.html" class="btn btn-primary" data-goal="order_business">Заказать для бизнеса</a>
</div>
</div>
</div>
</section>
<!-- Тарифы -->
<section class="section pricing">
<div class="container">
<h2 class="section-title">Тарифы на ИИ-мультики</h2>
<p class="section-subtitle">Выберите формат под вашу задачу. 1 кадр = 4–8 секунд.</p>
<div class="pricing-grid">
<article class="price-card">
<div class="price-name">Искры</div>
<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">
<div class="price-badge">Популярный</div>
<div class="price-name">История</div>
<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">
<div class="price-name">Сказка</div>
<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 process">
<div class="container">
<h2 class="section-title">Как мы работаем</h2>
<div class="process-steps">
<div class="step">
<div class="step-num">01</div>
<h3>Вы пишете нам</h3>
<p>Рассказываете о задаче, присылаете фото и идеи. Мы уточняем детали.</p>
</div>
<div class="step">
<div class="step-num">02</div>
<h3>Обсуждаем детали</h3>
<p>Фиксируем стоимость, сроки и формат. Всё прозрачно и честно.</p>
</div>
<div class="step">
<div class="step-num">03</div>
<h3>Создаём сценарий</h3>
<p>Пишем структуру, подбираем стиль. Утверждаем с вами до старта монтажа.</p>
</div>
<div class="step">
<div class="step-num">04</div>
<h3>Монтируем магию</h3>
<p>Генерируем кадры, озвучиваем, собираем в единую историю.</p>
</div>
<div class="step">
<div class="step-num">05</div>
<h3>Показываем результат</h3>
<p>Вы смотрите, вносите правки (если нужно) и забираете готовый мультик.</p>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="section cta">
<div class="container">
<div class="cta-box">
<h2>Готовы оживить вашу идею?</h2>
<p>Напишите нам — и мы бесплатно придумаем концепцию именно для вас.</p>
<a href="contacts.html" class="btn btn-primary btn-lg" data-goal="order_cta">Заказать мультик</a>
</div>
</div>
</section>
<!-- Footer -->
<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">
<h4>Навигация</h4>
<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">
<h4>Документы</h4>
<a href="legal.html">Политика cookies</a>
<a href="legal.html#agreement">Пользовательское соглашение</a>
</div>
<div class="footer-col">
<h4>Связаться</h4>
<a href="https://t.me/YuliaAnimation" target="_blank" rel="noopener">Telegram</a>
<a href="https://instagram.com/yuliasl1010" 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"></script>
</body>
</html>
+72
View File
@@ -0,0 +1,72 @@
// ===== Cookie Banner =====
(function() {
const banner = document.getElementById('cookieBanner');
const acceptBtn = document.getElementById('cookieAccept');
if (!banner || !acceptBtn) return;
const consent = localStorage.getItem('olyapka_cookies_consent');
if (!consent) {
setTimeout(() => banner.classList.add('show'), 800);
} else {
banner.classList.add('hidden');
}
acceptBtn.addEventListener('click', function() {
localStorage.setItem('olyapka_cookies_consent', '1');
banner.classList.remove('show');
setTimeout(() => banner.classList.add('hidden'), 400);
// Goal for Yandex.Metrika
if (typeof ym !== 'undefined') ym(110606131, 'reachGoal', 'cookie_accept');
if (typeof gtag !== 'undefined') gtag('event', 'cookie_accept');
});
})();
// ===== Mobile Menu =====
(function() {
const burger = document.getElementById('burger');
const nav = document.getElementById('nav');
if (!burger || !nav) return;
burger.addEventListener('click', function() {
burger.classList.toggle('open');
nav.classList.toggle('open');
});
// Close on link click
nav.querySelectorAll('.nav-link').forEach(link => {
link.addEventListener('click', () => {
burger.classList.remove('open');
nav.classList.remove('open');
});
});
})();
// ===== Goal Tracking (Yandex.Metrika + GA) =====
(function() {
document.addEventListener('click', function(e) {
const target = e.target.closest('[data-goal]');
if (!target) return;
const goal = target.getAttribute('data-goal');
if (!goal) return;
// Yandex.Metrika
if (typeof ym !== 'undefined') {
try { ym(110606131, 'reachGoal', goal); } catch(err) {}
}
// Google Analytics
if (typeof gtag !== 'undefined') {
try { gtag('event', goal); } catch(err) {}
}
});
})();
// ===== Smooth scroll for anchor links =====
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' });
}
});
});
+150
View File
@@ -0,0 +1,150 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<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="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&family=Caveat:wght@500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<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>
<body>
<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">
<a href="index.html" class="nav-link">Главная</a>
<a href="services.html" class="nav-link">Услуги</a>
<a href="portfolio.html" class="nav-link">Работы</a>
<a href="contacts.html" class="nav-link">Контакты</a>
</nav>
<button class="burger" id="burger" aria-label="Меню"><span></span><span></span><span></span></button>
</div>
</header>
<main class="legal-page">
<div class="container">
<h1 class="page-title">Юридические <span class="accent">документы</span></h1>
<section class="legal-section" id="cookies">
<h2>Политика обработки cookies</h2>
<p class="legal-date">Дата вступления в силу: 11 июля 2026 года</p>
<h3>1. Общие положения</h3>
<p>Настоящая Политика обработки cookies (далее — Политика) регулирует использование файлов cookies на сайте студии мультфильмов «О'ляпка» (далее — Сайт), расположенном по адресу: https://olapka.ru.</p>
<h3>2. Что такое cookies</h3>
<p>Cookies — это небольшие текстовые файлы, которые сохраняются на вашем устройстве при посещении сайта. Они помогают нам улучшать работу Сайта, анализировать посещаемость и обеспечивать корректное функционирование всех сервисов.</p>
<h3>3. Какие cookies мы используем</h3>
<ul>
<li><strong>Технические cookies</strong> — необходимы для работы Сайта, обеспечения безопасности и базовой функциональности.</li>
<li><strong>Аналитические cookies</strong> — используются сервисами Яндекс.Метрика и Google Analytics для сбора статистики посещений и анализа поведения пользователей.</li>
<li><strong>Cookies согласия</strong> — сохраняют ваш выбор относительно использования cookies.</li>
</ul>
<h3>4. Цели обработки</h3>
<p>Мы используем cookies для: обеспечения работоспособности Сайта; анализа посещаемости и улучшения качества контента; персонализации пользовательского опыта.</p>
<h3>5. Управление cookies</h3>
<p>Вы можете отключить cookies в настройках вашего браузера. Обратите внимание, что отключение cookies может повлиять на работу некоторых функций Сайта.</p>
<h3>6. Передача данных третьим лицам</h3>
<p>Данные, собранные с помощью аналитических cookies, могут передаваться сервисам Яндекс и Google в соответствии с их политиками конфиденциальности.</p>
<h3>7. Изменение Политики</h3>
<p>Мы оставляем за собой право изменять настоящую Политику. Актуальная версия всегда доступна на данной странице.</p>
<h3>8. Контакты</h3>
<p>По вопросам, связанным с обработкой cookies, вы можете связаться с нами через мессенджеры на странице <a href="contacts.html">«Контакты»</a>.</p>
</section>
<section class="legal-section" id="agreement">
<h2>Пользовательское соглашение</h2>
<p class="legal-date">Дата вступления в силу: 11 июля 2026 года</p>
<h3>1. Термины и определения</h3>
<ul>
<li><strong>Сайт</strong> — интернет-ресурс https://olapka.ru.</li>
<li><strong>Администрация</strong> — студия мультфильмов «О'ляпка».</li>
<li><strong>Пользователь</strong> — любое лицо, использующее Сайт.</li>
<li><strong>Услуги</strong> — создание ИИ-мультиков и сопутствующие сервисы.</li>
</ul>
<h3>2. Предмет соглашения</h3>
<p>Настоящее Соглашение регулирует отношения между Администрацией Сайта и Пользователем по поводу использования Сайта и заказа Услуг.</p>
<h3>3. Условия использования Сайта</h3>
<p>Пользователь соглашается не предпринимать действий, которые могут помешать нормальной работе Сайта. Запрещается использовать Сайт для распространения спама, вредоносного кода и материалов, нарушающих законодательство РФ.</p>
<h3>4. Интеллектуальная собственность</h3>
<p>Все материалы, размещённые на Сайте (тексты, графика, дизайн, логотип), являются объектами авторского права. Использование материалов без согласия правообладателя запрещено.</p>
<h3>5. Order услуг</h3>
<p>Условия заказа ИИ-мультиков, стоимость, сроки и порядок взаимодействия описаны на соответствующих страницах Сайта. Конкретные условия каждого заказа фиксируются в переписке с Пользователем.</p>
<h3>6. Ответственность сторон</h3>
<p>Администрация не несёт ответственности за любые убытки, возникшие в результате использования Сайта. Пользователь несёт персональную ответственность за достоверность предоставленной информации.</p>
<h3>7. Разрешение споров</h3>
<p>Все споры решаются путём переговоров. При невозможности достижения согласия — в соответствии с законодательством Российской Федерации.</p>
<h3>8. Изменение Соглашения</h3>
<p>Администрация вправе в одностороннем порядке изменять условия настоящего Соглашения. Актуальная версия всегда доступна на данной странице.</p>
<h3>9. Контакты</h3>
<p>По всем вопросам, связанным с настоящим Соглашением, обращайтесь через мессенджеры на странице <a href="contacts.html">«Контакты»</a>.</p>
</section>
</div>
</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">
<h4>Навигация</h4>
<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">
<h4>Документы</h4>
<a href="legal.html">Политика cookies</a>
<a href="legal.html#agreement">Пользовательское соглашение</a>
</div>
<div class="footer-col">
<h4>Связаться</h4>
<a href="https://t.me/YuliaAnimation" target="_blank" rel="noopener">Telegram</a>
<a href="https://instagram.com/yuliasl1010" 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"></script>
</body>
</html>
+240
View File
@@ -0,0 +1,240 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<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="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&family=Caveat:wght@500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "ItemList",
"name": "Примеры работ студии О'ляпка",
"itemListElement": [
{"@type":"ListItem","position":1,"name":"Love Story Анны и Дмитрия","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":"Сказка для Миши, 5 лет","url":"https://olapka.ru/portfolio.html#work-3"}
]
}
</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>
<body>
<div class="cookie-banner" id="cookieBanner">
<div class="cookie-text">Мы используем cookies. <a href="legal.html">Подробнее</a>.</div>
<button class="cookie-btn" id="cookieAccept" data-goal="cookie_accept">Принять</button>
</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">
<a href="index.html" class="nav-link">Главная</a>
<a href="services.html" class="nav-link">Услуги</a>
<a href="portfolio.html" class="nav-link active">Работы</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="Меню"><span></span><span></span><span></span></button>
</div>
</header>
<main>
<section class="page-hero">
<div class="container">
<h1 class="page-title">Наши <span class="accent">работы</span></h1>
<p class="page-subtitle">Каждый мультик — это уникальная история. Смотрите примеры и вдохновляйтесь.</p>
</div>
</section>
<!-- Примеры работ -->
<section class="section">
<div class="container">
<div class="portfolio-grid">
<article class="work-card" id="work-1">
<div class="work-media">
<div class="work-placeholder">▶ Видео: Love Story</div>
</div>
<div class="work-info">
<span class="work-tag">💍 Love Story</span>
<h3>История Анны и Дмитрия</h3>
<p>Романтичный мультик о знакомстве пары, который Дмитрий подарил Анне на годовщину. 1 минута, 6 сцен, авторская озвучка.</p>
<div class="work-meta">
<span>Тариф: История</span>
<span>4 500 ₽</span>
</div>
</div>
</article>
<article class="work-card" id="work-2">
<div class="work-media">
<div class="work-placeholder">▶ Видео: Реклама студии</div>
</div>
<div class="work-info">
<span class="work-tag">🚀 Для бизнеса</span>
<h3>Рекламный ролик для детской массажной студии</h3>
<p>Показали пользу массажа через метафору: малыш растёт, а вместе с ним расцветает и его мир. Вирусный Reels с ростом охватов в 3 раза.</p>
<div class="work-meta">
<span>Тариф: Сказка</span>
<span>9 000 ₽</span>
</div>
</div>
</article>
<article class="work-card" id="work-3">
<div class="work-media">
<div class="work-placeholder">▶ Видео: Сказка для Миши</div>
</div>
<div class="work-info">
<span class="work-tag">🧸 Детская сказка</span>
<h3>Миша и волшебный лес</h3>
<p>Персональная сказка для мальчика 5 лет, где он побеждает страх темноты. Мама плакала от счастья.</p>
<div class="work-meta">
<span>Тариф: История</span>
<span>4 500 ₽</span>
</div>
</div>
</article>
<article class="work-card" id="work-4">
<div class="work-media">
<div class="work-placeholder">▶ Видео: Подарок маме</div>
</div>
<div class="work-info">
<span class="work-tag">🎁 Подарок</span>
<h3>Юбилей мамы — 55 лет</h3>
<p>Дети подарили маме мультик о её жизни: детство в деревне, свадьба, рождение детей. 30 гостей смотрели со слезами на глазах.</p>
<div class="work-meta">
<span>Тариф: Сказка</span>
<span>9 000 ₽</span>
</div>
</div>
</article>
<article class="work-card" id="work-5">
<div class="work-media">
<div class="work-placeholder">▶ Видео: Контент для блога</div>
</div>
<div class="work-info">
<span class="work-tag">📱 Для соцсетей</span>
<h3>Серия Reels для эксперта по детскому сну</h3>
<p>4 мультика в едином стиле для контент-плана на месяц. Сохранения выросли в 5 раз, пришли новые подписчики.</p>
<div class="work-meta">
<span>Пакет «Контент-месяц»</span>
<span>15 300 ₽ (со скидкой)</span>
</div>
</div>
</article>
<article class="work-card" id="work-6">
<div class="work-media">
<div class="work-placeholder">▶ Видео: Открытка</div>
</div>
<div class="work-info">
<span class="work-tag">✨ Короткий</span>
<h3>Поздравление с Новым годом для партнёров</h3>
<p>Короткая анимированная открытка для рассылки VIP-клиентам бухгалтерской компании. Тёплое и необычное решение.</p>
<div class="work-meta">
<span>Тариф: Искры</span>
<span>2 500 ₽</span>
</div>
</div>
</article>
</div>
</div>
</section>
<!-- Отзывы -->
<section class="section reviews">
<div class="container">
<h2 class="section-title">Что говорят <span class="accent">клиенты</span></h2>
<div class="reviews-grid">
<article class="review-card">
<div class="review-stars">★★★★★</div>
<p class="review-text">«Заказывали мультик на годовщину свадьбы. Муж был в полном восторге! Пересматриваем уже раз десять. Спасибо за вашу работу и душу, которую вы вкладываете!»</p>
<div class="review-author">
<div class="review-name">Анна К.</div>
<div class="review-role">Love Story, тариф «История»</div>
</div>
</article>
<article class="review-card">
<div class="review-stars">★★★★★</div>
<p class="review-text">«Рекламный ролик для нашей студии массажа превзошёл ожидания. Клиенты пишут, что именно этот мультик убедил их прийти. Охваты в Instagram выросли в 3 раза!»</p>
<div class="review-author">
<div class="review-name">Елена М.</div>
<div class="review-role">Детская массажная студия</div>
</div>
</article>
<article class="review-card">
<div class="review-stars">★★★★★</div>
<p class="review-text">«Сын смотрел мультик про себя и не мог оторваться. Спросил: "Мама, это я настоящий в мультике?" Сердце растаяло. Спасибо за волшебство!»</p>
<div class="review-author">
<div class="review-name">Ольга В.</div>
<div class="review-role">Сказка для ребёнка</div>
</div>
</article>
<article class="review-card">
<div class="review-stars">★★★★★</div>
<p class="review-text">«Заказали контент-пакет на месяц. Теперь у нас не болит голова "что постить завтра". Аудитория ждёт новые серии, сохранения бьют рекорды.»</p>
<div class="review-author">
<div class="review-name">Марина Д.</div>
<div class="review-role">Эксперт по детскому сну</div>
</div>
</article>
</div>
<div class="cta-inline">
<h3>Хотите так же?</h3>
<p>Расскажите нам о своей идее — и мы создадим мультик, который влюбит в себя.</p>
<a href="contacts.html" class="btn btn-primary btn-lg" data-goal="order_portfolio">Заказать мультик</a>
</div>
</div>
</section>
</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">
<h4>Навигация</h4>
<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">
<h4>Документы</h4>
<a href="legal.html">Политика cookies</a>
<a href="legal.html#agreement">Пользовательское соглашение</a>
</div>
<div class="footer-col">
<h4>Связаться</h4>
<a href="https://t.me/YuliaAnimation" target="_blank" rel="noopener">Telegram</a>
<a href="https://instagram.com/yuliasl1010" 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"></script>
</body>
</html>
+6
View File
@@ -0,0 +1,6 @@
User-agent: *
Allow: /
Disallow: /legal.html
Sitemap: https://olapka.ru/sitemap.xml
Host: https://olapka.ru
+243
View File
@@ -0,0 +1,243 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Услуги студии О'ляпка — ИИ-мультики для подарков, бизнеса и соцсетей</title>
<meta name="description" content="Услуги студии О'ляпка: персональные ИИ-мультики на заказ, рекламные ролики для бизнеса, контент для соцсетей. Тарифы от 2500 ₽.">
<!-- 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="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&family=Caveat:wght@500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<!-- 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 -->
<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>
<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>
<body>
<div class="cookie-banner" id="cookieBanner">
<div class="cookie-text">Мы используем cookies. <a href="legal.html">Подробнее</a>.</div>
<button class="cookie-btn" id="cookieAccept" data-goal="cookie_accept">Принять</button>
</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">
<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="Меню"><span></span><span></span><span></span></button>
</div>
</header>
<main>
<section class="page-hero">
<div class="container">
<h1 class="page-title">Наши <span class="accent">услуги</span></h1>
<p class="page-subtitle">Три направления, в которых мы создаём магию. Выберите то, что подходит именно вам.</p>
</div>
</section>
<!-- Раздел 1: Личные мультики -->
<section class="section service-block">
<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, которые покажут ваш лайфстайл ярко и нестандартно. Алгоритмы Instagram любят такой контент.</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>
<!-- Раздел 2: Бизнес -->
<section class="section service-block alt">
<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>
<!-- Раздел 3: Соцсети -->
<section class="section service-block">
<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 extras">
<div class="container">
<h2 class="section-title">Дополнительные опции</h2>
<div class="extras-grid">
<div class="extra-item"><span class="extra-name">Дополнительная сцена</span><span class="extra-price">+800 ₽</span></div>
<div class="extra-item"><span class="extra-name">Срочность (24–48 часов)</span><span class="extra-price">+30%</span></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>
</section>
</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">
<h4>Навигация</h4>
<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">
<h4>Документы</h4>
<a href="legal.html">Политика cookies</a>
<a href="legal.html#agreement">Пользовательское соглашение</a>
</div>
<div class="footer-col">
<h4>Связаться</h4>
<a href="https://t.me/YuliaAnimation" target="_blank" rel="noopener">Telegram</a>
<a href="https://instagram.com/yuliasl1010" 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"></script>
</body>
</html>
+33
View File
@@ -0,0 +1,33 @@
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://olapka.ru/</loc>
<lastmod>2026-07-11</lastmod>
<changefreq>weekly</changefreq>
<priority>1.0</priority>
</url>
<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>