348 lines
23 KiB
HTML
348 lines
23 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Heritage — История вашей семьи, сохранённая на поколения</title>
|
||
<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=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Spectral:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Manrope:wght@400;500;600&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root{
|
||
--cream:#F3ECDD; --cream-2:#EFE6D2; --ink:#231B12; --ink-2:#2B2216;
|
||
--brick:#7E3B2D; --gold:#A9854C; --gold-2:#C9A05E;
|
||
--muted:#564B3C; --muted-2:#6B5E4C; --line:rgba(35,27,18,0.12);
|
||
--serif:'Playfair Display',Georgia,serif; --body:'Spectral',Georgia,serif; --sans:'Manrope',system-ui,sans-serif;
|
||
}
|
||
*{box-sizing:border-box;}
|
||
html{scroll-behavior:smooth;}
|
||
body{margin:0; background:var(--cream); color:var(--ink); font-family:var(--body); overflow-x:hidden;}
|
||
::selection{background:var(--brick); color:var(--cream);}
|
||
a{color:inherit;}
|
||
.wrap{max-width:1240px; margin:0 auto; padding:0 40px;}
|
||
.eyebrow{font-family:var(--sans); font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:var(--brick);}
|
||
.rule{width:38px; height:1px; background:var(--gold); display:inline-block;}
|
||
h1,h2,h3{font-family:var(--serif); font-weight:400; margin:0;}
|
||
.btn{font-family:var(--sans); font-size:14px; letter-spacing:.04em; text-decoration:none; display:inline-block; border-radius:2px; transition:transform .3s ease, background .3s ease, opacity .3s ease;}
|
||
.btn-brick{color:var(--cream); background:var(--brick); padding:17px 34px;}
|
||
.btn-brick:hover{transform:translateY(-2px);}
|
||
.btn-ink{color:var(--cream); background:var(--ink); padding:12px 22px; font-size:13px; letter-spacing:.06em; text-transform:uppercase;}
|
||
.btn-ink:hover{background:var(--brick);}
|
||
.link-underline{font-family:var(--sans); font-size:14px; text-decoration:none; border-bottom:1px solid rgba(35,27,18,.4); padding-bottom:3px;}
|
||
|
||
/* NAV */
|
||
header.nav{position:sticky; top:0; z-index:50; background:rgba(243,236,221,.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
|
||
.nav-inner{height:78px; display:flex; align-items:center; justify-content:space-between;}
|
||
.logo{display:flex; align-items:baseline; gap:10px; text-decoration:none;}
|
||
.logo b{font-family:var(--serif); font-weight:400; font-size:26px; letter-spacing:.02em;}
|
||
.logo i{width:6px; height:6px; border-radius:50%; background:var(--brick); display:inline-block; transform:translateY(-3px);}
|
||
nav.menu{display:flex; align-items:center; gap:34px;}
|
||
nav.menu a{font-family:var(--sans); font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); text-decoration:none; transition:color .3s;}
|
||
nav.menu a:hover{color:var(--brick);}
|
||
|
||
/* HERO */
|
||
.hero{display:grid; grid-template-columns:1.04fr .96fr; gap:72px; align-items:center; padding:84px 0 96px;}
|
||
.hero h1{font-size:74px; line-height:1.02; letter-spacing:-.01em; margin:28px 0;}
|
||
.hero h1 i{font-style:italic; color:var(--brick);}
|
||
.hero p{font-size:21px; line-height:1.55; color:var(--muted); max-width:480px; margin:0 0 40px; font-weight:300;}
|
||
.hero-actions{display:flex; align-items:center; gap:24px; flex-wrap:wrap;}
|
||
.frame{position:relative;}
|
||
.frame .border{position:absolute; inset:-14px -14px 24px 24px; border:1px solid rgba(169,133,76,.55); z-index:0;}
|
||
.slot{position:relative; z-index:1; display:grid; place-items:center; text-align:center; background:var(--cream-2); border:1px solid var(--line); color:var(--muted-2); font-family:var(--sans); font-size:13px; letter-spacing:.04em; box-shadow:0 30px 70px -30px rgba(35,27,18,.5);}
|
||
.slot svg{opacity:.4; margin-bottom:10px;}
|
||
.badge{position:absolute; z-index:2; left:-30px; bottom:36px; background:var(--cream); border:1px solid var(--line); padding:18px 22px; max-width:208px; box-shadow:0 18px 40px -20px rgba(35,27,18,.45);}
|
||
.badge b{font-family:var(--serif); font-size:34px; line-height:1; color:var(--brick); display:block;}
|
||
.badge span{font-family:var(--sans); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); margin-top:7px; display:block;}
|
||
|
||
/* VALUES */
|
||
.values{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--cream-2);}
|
||
.values-inner{padding:26px 40px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px;}
|
||
.values em{font-family:var(--body); font-style:italic; font-size:17px; color:var(--muted);}
|
||
.values .dot{width:5px; height:5px; border-radius:50%; background:var(--gold);}
|
||
|
||
/* MANIFESTO */
|
||
.manifesto{max-width:980px; margin:0 auto; padding:120px 40px 110px; text-align:center;}
|
||
.manifesto p{font-family:var(--serif); font-size:42px; line-height:1.34; letter-spacing:-.005em; margin:30px 0 0; color:var(--ink-2);}
|
||
.manifesto p i{font-style:italic; color:var(--brick);}
|
||
|
||
/* HOW (dark) */
|
||
.how{background:var(--ink); color:#EDE4D2;}
|
||
.how-inner{padding:108px 40px 116px;}
|
||
.how-head{display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:74px; flex-wrap:wrap;}
|
||
.how-head h2{font-size:54px; line-height:1.05; max-width:560px;}
|
||
.how-head h2 i{font-style:italic; color:var(--gold-2);}
|
||
.how-head .eyebrow{color:var(--gold-2);}
|
||
.how-head p{font-size:18px; line-height:1.6; color:#B6AB95; max-width:380px; font-weight:300; margin:0;}
|
||
.steps{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(237,228,210,.18);}
|
||
.step{padding:40px 28px 44px; border-right:1px solid rgba(237,228,210,.18); transition:background .35s;}
|
||
.step:hover{background:rgba(201,160,94,.07);}
|
||
.step .num{font-family:var(--serif); font-size:20px; color:var(--gold-2); margin-bottom:54px;}
|
||
.step h3{font-family:var(--serif); font-weight:500; font-size:25px; margin:0 0 14px; line-height:1.15;}
|
||
.step p{font-size:15.5px; line-height:1.62; color:#A99E88; font-weight:300; margin:0;}
|
||
|
||
/* BOOK */
|
||
.book{padding:120px 0;}
|
||
.book-grid{display:grid; grid-template-columns:.94fr 1.06fr; gap:80px; align-items:center;}
|
||
.book .frame .border{inset:24px -18px -18px 18px; background:var(--cream-2); border:1px solid var(--line);}
|
||
.book h2{font-size:52px; line-height:1.06; margin:26px 0 30px;}
|
||
.book h2 i{font-style:italic; color:var(--brick);}
|
||
.book .lead{font-size:19px; line-height:1.6; color:var(--muted); font-weight:300; margin:0 0 40px; max-width:480px;}
|
||
.feat-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line);}
|
||
.feat{background:var(--cream); padding:24px 26px;}
|
||
.feat b{font-family:var(--serif); font-weight:400; font-size:19px; color:var(--ink-2); display:block; margin-bottom:7px;}
|
||
.feat span{font-size:14.5px; line-height:1.5; color:var(--muted-2); font-weight:300;}
|
||
|
||
/* QUOTE */
|
||
.quote{background:var(--cream-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
|
||
.quote-inner{max-width:1000px; margin:0 auto; padding:104px 40px; text-align:center;}
|
||
.quote .mark{font-family:var(--serif); font-size:72px; line-height:0; color:var(--gold); height:40px;}
|
||
.quote blockquote{font-family:var(--serif); font-style:italic; font-size:38px; line-height:1.34; margin:0 0 36px; color:var(--ink-2);}
|
||
.quote .who{display:flex; align-items:center; justify-content:center; gap:16px;}
|
||
.quote .ava{width:52px; height:52px; border-radius:50%; background:var(--gold); display:grid; place-items:center; color:var(--cream); font-family:var(--serif); font-size:20px;}
|
||
.quote .who .n{font-family:var(--sans); font-size:14px; color:var(--ink-2);}
|
||
.quote .who .m{font-family:var(--sans); font-size:12px; letter-spacing:.06em; color:var(--brick); text-transform:uppercase; margin-top:3px;}
|
||
|
||
/* PRICING */
|
||
.pricing{padding:120px 0 110px;}
|
||
.pricing-head{text-align:center; margin-bottom:70px;}
|
||
.pricing-head h2{font-size:54px; line-height:1.05; margin-top:22px;}
|
||
.pricing-head h2 i{font-style:italic; color:var(--brick);}
|
||
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch;}
|
||
.plan{border:1px solid var(--line); padding:42px 36px 40px; display:flex; flex-direction:column; position:relative; background:var(--cream); color:var(--ink);}
|
||
.plan.dark{background:var(--ink-2); color:#EDE4D2; border-color:rgba(237,228,210,.22);}
|
||
.plan .tag{position:absolute; top:-12px; left:36px; background:var(--gold); color:var(--ink); font-family:var(--sans); font-size:11px; letter-spacing:.14em; text-transform:uppercase; padding:6px 14px;}
|
||
.plan .name{font-family:var(--sans); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--brick); margin-bottom:22px;}
|
||
.plan.dark .name{color:var(--gold-2);}
|
||
.plan .price{display:flex; align-items:baseline; gap:6px; margin-bottom:8px;}
|
||
.plan .price b{font-family:var(--serif); font-weight:400; font-size:48px; line-height:1;}
|
||
.plan .price span{font-size:15px; color:var(--muted-2);}
|
||
.plan.dark .price span{color:#A99E88;}
|
||
.plan .tagline{font-size:15px; line-height:1.55; color:var(--muted-2); font-weight:300; margin:0 0 28px; min-height:48px;}
|
||
.plan.dark .tagline{color:#A99E88;}
|
||
.plan .div{height:1px; background:var(--line); margin-bottom:26px;}
|
||
.plan.dark .div{background:rgba(237,228,210,.22);}
|
||
.plan ul{list-style:none; padding:0; margin:0 0 36px; display:flex; flex-direction:column; gap:14px; flex:1;}
|
||
.plan li{display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:1.45; font-weight:300;}
|
||
.plan li::before{content:'✦'; color:var(--gold); font-size:15px;}
|
||
.plan .cta{font-family:var(--sans); font-size:13px; letter-spacing:.06em; text-transform:uppercase; text-align:center; padding:15px; text-decoration:none; color:var(--ink); border:1px solid rgba(35,27,18,.4); transition:opacity .3s;}
|
||
.plan.dark .cta{color:var(--ink); background:var(--gold); border-color:var(--gold);}
|
||
.plan .cta:hover{opacity:.82;}
|
||
|
||
/* FINAL CTA */
|
||
.final{background:var(--brick); color:var(--cream);}
|
||
.final-inner{max-width:1000px; margin:0 auto; padding:120px 40px; text-align:center;}
|
||
.final .eyebrow{color:#E9C9A0;}
|
||
.final h2{font-size:60px; line-height:1.08; margin:30px 0 32px;}
|
||
.final h2 i{font-style:italic;}
|
||
.final p{font-size:20px; line-height:1.6; color:#F0DCC6; font-weight:300; max-width:540px; margin:0 auto 44px;}
|
||
.final form{display:flex; gap:12px; max-width:480px; margin:0 auto; flex-wrap:wrap; justify-content:center;}
|
||
.final input{flex:1; min-width:240px; background:rgba(243,236,221,.1); border:1px solid rgba(243,236,221,.4); color:var(--cream); font-family:var(--body); font-size:16px; padding:16px 20px; border-radius:2px; outline:none;}
|
||
.final input::placeholder{color:rgba(243,236,221,.6);}
|
||
.final button{font-family:var(--sans); font-size:14px; letter-spacing:.04em; color:var(--ink); background:var(--cream); border:none; padding:16px 32px; border-radius:2px; cursor:pointer; transition:transform .3s;}
|
||
.final button:hover{transform:translateY(-2px);}
|
||
.final .ok{margin-top:24px; font-family:var(--body); font-style:italic; font-size:17px; color:#F0DCC6;}
|
||
|
||
/* FOOTER */
|
||
footer{background:var(--ink); color:#A99E88;}
|
||
.foot-inner{padding:64px 40px 40px;}
|
||
.foot-top{display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap; padding-bottom:44px; border-bottom:1px solid rgba(237,228,210,.16);}
|
||
.foot-top .about{max-width:300px;}
|
||
.foot-top .about b{font-family:var(--serif); font-size:26px; color:#EDE4D2; display:block; margin-bottom:14px;}
|
||
.foot-top .about p{font-size:15px; line-height:1.6; font-weight:300; margin:0;}
|
||
.foot-cols{display:flex; gap:64px; flex-wrap:wrap;}
|
||
.foot-col{display:flex; flex-direction:column; gap:13px;}
|
||
.foot-col .h{font-family:var(--sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#6F6450;}
|
||
.foot-col a, .foot-col span{color:#C5BAA3; text-decoration:none; font-size:15px; font-weight:300;}
|
||
.foot-bottom{padding-top:24px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;}
|
||
.foot-bottom .c{font-family:var(--sans); font-size:12px; color:#6F6450;}
|
||
.foot-bottom .s{font-family:var(--body); font-style:italic; font-size:14px; color:#8B7F69;}
|
||
|
||
@media (max-width:900px){
|
||
.wrap{padding:0 22px;}
|
||
.hero{grid-template-columns:1fr; gap:40px; padding:54px 0 60px;}
|
||
.hero h1{font-size:48px;}
|
||
.how-inner,.book,.pricing{padding-left:22px; padding-right:22px;}
|
||
.steps{grid-template-columns:1fr 1fr;}
|
||
.book-grid{grid-template-columns:1fr; gap:40px;}
|
||
.plans{grid-template-columns:1fr;}
|
||
.manifesto p,.how-head h2,.book h2,.pricing-head h2,.final h2{font-size:34px;}
|
||
.quote blockquote{font-size:26px;}
|
||
nav.menu a:not(:last-child){display:none;}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body id="top">
|
||
|
||
<!-- NAV -->
|
||
<header class="nav"><div class="wrap nav-inner">
|
||
<a class="logo" href="#top"><b>Heritage</b><i></i></a>
|
||
<nav class="menu">
|
||
<a href="#about">О проекте</a>
|
||
<a href="#how">Как это работает</a>
|
||
<a href="#book">Книга</a>
|
||
<a href="#pricing">Тарифы</a>
|
||
<a class="btn btn-ink" href="../preview/index.html">Открыть дерево</a>
|
||
</nav>
|
||
</div></header>
|
||
|
||
<!-- HERO -->
|
||
<section class="wrap hero">
|
||
<div>
|
||
<div style="display:flex; align-items:center; gap:14px;"><span class="rule"></span><span class="eyebrow">Семейное наследие · с 2025</span></div>
|
||
<h1>История вашей<br>семьи, сохранённая<br><i>на поколения</i></h1>
|
||
<p>Мы записываем голоса, собираем фотографии и письма, бережно восстанавливаем родословную — и превращаем всё это в книгу и частный архив, который останется детям и внукам.</p>
|
||
<div class="hero-actions">
|
||
<a class="btn btn-brick" href="#start">Создать наследие</a>
|
||
<a class="link-underline" href="../preview/index.html">Построить дерево →</a>
|
||
</div>
|
||
</div>
|
||
<div class="frame">
|
||
<div class="border"></div>
|
||
<div class="slot" style="height:560px;">
|
||
<div><svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.3"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg><br>Семейный портрет</div>
|
||
</div>
|
||
<div class="badge"><b>3 462</b><span>сохранённых истории</span></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- VALUES -->
|
||
<div class="values"><div class="values-inner">
|
||
<em>Голос</em><span class="dot"></span>
|
||
<em>Фотографии</em><span class="dot"></span>
|
||
<em>Письма</em><span class="dot"></span>
|
||
<em>Родословная</em><span class="dot"></span>
|
||
<em>Реликвии</em>
|
||
</div></div>
|
||
|
||
<!-- MANIFESTO -->
|
||
<section id="about" class="manifesto">
|
||
<div class="eyebrow">Почему это важно</div>
|
||
<p>Каждое поколение уносит с собой истории, которые больше <i>некому рассказать.</i> Имена забываются, фотографии теряются, голоса стихают. Мы возвращаем их домой.</p>
|
||
</section>
|
||
|
||
<!-- HOW -->
|
||
<section id="how" class="how"><div class="wrap how-inner">
|
||
<div class="how-head">
|
||
<div>
|
||
<div style="display:flex; align-items:center; gap:14px; margin-bottom:22px;"><span class="rule"></span><span class="eyebrow">Как это работает</span></div>
|
||
<h2>Четыре шага<br>от памяти к <i>наследию</i></h2>
|
||
</div>
|
||
<p>Мы ведём вас за руку на каждом этапе. От вас — только желание сохранить. Всё остальное берём на себя.</p>
|
||
</div>
|
||
<div class="steps">
|
||
<div class="step"><div class="num">01</div><h3>Беседа</h3><p>Тёплое интервью с близкими. Записываем голос и истории — дома или онлайн, в удобном ритме.</p></div>
|
||
<div class="step"><div class="num">02</div><h3>Архив</h3><p>Собираем и оцифровываем фотографии, письма, документы. Реставрируем то, что выцвело от времени.</p></div>
|
||
<div class="step"><div class="num">03</div><h3>Родословная</h3><p>Восстанавливаем линии семьи, сверяем даты и имена, строим наглядное древо до прадедов.</p></div>
|
||
<div class="step"><div class="num">04</div><h3>Книга</h3><p>Верстаем и печатаем именную книгу в ручном переплёте. Плюс приватный цифровой архив.</p></div>
|
||
</div>
|
||
</div></section>
|
||
|
||
<!-- BOOK -->
|
||
<section id="book" class="wrap book"><div class="book-grid">
|
||
<div class="frame">
|
||
<div class="border"></div>
|
||
<div class="slot" style="height:540px;"><div><svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.3"><path d="M4 4h7v16H4z"/><path d="M13 4h7v16h-7z"/></svg><br>Фото готовой книги</div></div>
|
||
</div>
|
||
<div>
|
||
<div style="display:flex; align-items:center; gap:14px;"><span class="rule"></span><span class="eyebrow">Что вы получаете</span></div>
|
||
<h2>Книга, которую<br>хочется <i>передать дальше</i></h2>
|
||
<p class="lead">Ручной переплёт, бумага хлопкового оттенка, оттиск фамильного герба на обложке. Внутри — выверенная вёрстка, отреставрированные снимки и расшифрованные голоса близких.</p>
|
||
<div class="feat-grid">
|
||
<div class="feat"><b>Ручной переплёт</b><span>Лён или кожа, тиснёная обложка, сшитый блок.</span></div>
|
||
<div class="feat"><b>Реставрация фото</b><span>Возвращаем чёткость старым снимкам.</span></div>
|
||
<div class="feat"><b>Голос близких</b><span>QR ведёт к аудиозаписям внутри книги.</span></div>
|
||
<div class="feat"><b>Семейное древо</b><span>Разворот с выверенной родословной.</span></div>
|
||
</div>
|
||
</div>
|
||
</div></section>
|
||
|
||
<!-- QUOTE -->
|
||
<section class="quote"><div class="quote-inner">
|
||
<div class="mark">“</div>
|
||
<blockquote>Я держала в руках книгу и впервые услышала голос бабушки так, будто она рядом. Теперь это есть у каждого в нашей семье.</blockquote>
|
||
<div class="who">
|
||
<div class="ava">А</div>
|
||
<div style="text-align:left;"><div class="n">Анна Воронцова</div><div class="m">Москва · семья из 4 поколений</div></div>
|
||
</div>
|
||
</div></section>
|
||
|
||
<!-- PRICING -->
|
||
<section id="pricing" class="wrap pricing">
|
||
<div class="pricing-head">
|
||
<div class="eyebrow">Форматы участия</div>
|
||
<h2>Выберите глубину <i>наследия</i></h2>
|
||
</div>
|
||
<div class="plans">
|
||
<div class="plan">
|
||
<div class="name">Хроника</div>
|
||
<div class="price"><b>85 000</b><span>₽</span></div>
|
||
<p class="tagline">Одна линия семьи, бережно собранная в книгу.</p>
|
||
<div class="div"></div>
|
||
<ul><li>До 3 интервью</li><li>Оцифровка 50 фотографий</li><li>Книга 80 страниц, 2 экз.</li><li>Цифровой архив</li></ul>
|
||
<a class="cta" href="#start">Выбрать</a>
|
||
</div>
|
||
<div class="plan dark">
|
||
<span class="tag">Чаще всего выбирают</span>
|
||
<div class="name">Наследие</div>
|
||
<div class="price"><b>180 000</b><span>₽</span></div>
|
||
<p class="tagline">Полная история рода с реставрацией и древом.</p>
|
||
<div class="div"></div>
|
||
<ul><li>До 8 интервью</li><li>Оцифровка 200 фотографий</li><li>Реставрация снимков</li><li>Книга 160 страниц, 5 экз.</li><li>Семейное древо</li><li>Аудиоархив с QR</li></ul>
|
||
<a class="cta" href="#start">Выбрать</a>
|
||
</div>
|
||
<div class="plan">
|
||
<div class="name">Династия</div>
|
||
<div class="price"><b>от 360 000</b><span>₽</span></div>
|
||
<p class="tagline">Архивная экспедиция и фамильное издание.</p>
|
||
<div class="div"></div>
|
||
<ul><li>Без ограничений по интервью</li><li>Работа в архивах и ЗАГС</li><li>Многотомное издание</li><li>Тираж для всей семьи</li><li>Персональный куратор</li></ul>
|
||
<a class="cta" href="#start">Обсудить</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FINAL CTA -->
|
||
<section id="start" class="final"><div class="final-inner">
|
||
<div class="eyebrow">Начните сегодня</div>
|
||
<h2>Пока истории ещё<br><i>можно услышать</i></h2>
|
||
<p>Оставьте заявку — мы свяжемся, обсудим вашу семью и составим план первой беседы. Без обязательств.</p>
|
||
<form id="leadForm">
|
||
<input type="email" required placeholder="Ваш e-mail">
|
||
<button type="submit">Оставить заявку</button>
|
||
</form>
|
||
<div class="ok" id="okMsg" style="display:none;">Спасибо. Мы свяжемся с вами в течение двух дней.</div>
|
||
</div></section>
|
||
|
||
<!-- FOOTER -->
|
||
<footer><div class="foot-inner">
|
||
<div class="foot-top">
|
||
<div class="about"><b>Heritage</b><p>Студия семейного наследия. Сохраняем голоса, лица и истории — бережно и навсегда.</p></div>
|
||
<div class="foot-cols">
|
||
<div class="foot-col">
|
||
<span class="h">Навигация</span>
|
||
<a href="#about">О проекте</a><a href="#how">Как это работает</a><a href="#book">Книга</a><a href="#pricing">Тарифы</a>
|
||
</div>
|
||
<div class="foot-col">
|
||
<span class="h">Контакты</span>
|
||
<a href="mailto:hello@heritage.studio">hello@heritage.studio</a>
|
||
<a href="tel:+70000000000">+7 000 000-00-00</a>
|
||
<span>Москва · Санкт-Петербург</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="foot-bottom">
|
||
<span class="c">© 2026 Heritage Studio. Все права защищены.</span>
|
||
<span class="s">Память живёт, пока её передают.</span>
|
||
</div>
|
||
</div></footer>
|
||
|
||
<script>
|
||
document.getElementById('leadForm').addEventListener('submit', function(e){
|
||
e.preventDefault();
|
||
this.style.display = 'none';
|
||
document.getElementById('okMsg').style.display = 'block';
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|