<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>School of Visual Narrative</title>
<style>
* {
box-sizing: border-box;
}

body {
margin: 0;
font-family: Arial, sans-serif;
color: #111;
background: #f7efe9;
}

.page {
min-height: 100vh;
overflow: hidden;
background:
radial-gradient(circle at 75% 20%, #bdebf4 0 18%, transparent 42%),
radial-gradient(circle at 35% 15%, #ffe7ef 0 20%, transparent 44%),
linear-gradient(120deg, #f7eee6, #eef7f5 70%);
}

header {
position: relative;
z-index: 5;
display: flex;
align-items: center;
justify-content: space-between;
padding: 28px 36px;
}

.brand {
display: flex;
align-items: center;
gap: 14px;
font-family: Georgia, serif;
font-size: 18px;
line-height: 1.05;
text-transform: uppercase;
}

.logo {
width: 54px;
height: 54px;
display: grid;
place-items: center;
background: #ff7bad;
clip-path: polygon(
50% 0%, 60% 26%, 88% 12%, 74% 40%, 100% 50%,
74% 60%, 88% 88%, 60% 74%, 50% 100%, 40% 74%,
12% 88%, 26% 60%, 0% 50%, 26% 40%, 12% 12%, 40% 26%
);
font-size: 22px;
}

nav {
display: flex;
gap: 44px;
font-size: 13px;
text-transform: uppercase;
}

nav a {
color: inherit;
text-decoration: none;
}

.header-actions {
display: flex;
align-items: center;
gap: 28px;
}

.apply-btn,
.primary-btn {
border: 0;
border-radius: 18px;
background: #d9e735;
color: #111;
padding: 18px 32px;
font-weight: 700;
text-transform: uppercase;
cursor: pointer;
}

.menu-btn {
width: 56px;
height: 56px;
border: 0;
border-radius: 50%;
background: #ff9fc4;
font-size: 28px;
cursor: pointer;
}

.hero {
position: relative;
display: grid;
grid-template-columns: 36% 64%;
min-height: 640px;
padding: 20px 36px 28px;
}

.hero-copy {
position: relative;
z-index: 3;
padding-top: 36px;
}

h1 {
margin: 0 0 24px;
font-family: Georgia, serif;
font-size: clamp(56px, 7vw, 112px);
line-height: 0.92;
font-weight: 400;
letter-spacing: 0;
text-transform: uppercase;
}

h1 span {
color: #f36fa6;
}

.subtitle {
max-width: 420px;
margin: 0 0 34px;
font-size: 18px;
line-height: 1.35;
text-transform: uppercase;
}

.hero-actions {
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
}

.video-btn {
display: flex;
align-items: center;
gap: 14px;
border: 0;
background: transparent;
cursor: pointer;
text-transform: uppercase;
font-size: 13px;
text-align: left;
}

.play {
width: 52px;
height: 52px;
display: grid;
place-items: center;
border: 1px solid #ef8ab5;
border-radius: 50%;
color: #ef6fa6;
}

.motto {
position: absolute;
left: 38px;
bottom: 50px;
color: #ee71aa;
font-family: monospace;
font-size: 18px;
letter-spacing: 5px;
}

.hero-art {
position: relative;
min-height: 620px;
}

.door {
position: absolute;
left: 18%;
top: 8%;
width: 230px;
height: 360px;
border-radius: 120px 120px 8px 8px;
background: linear-gradient(#bfe9ff, #f7bfd0 65%, #b6a5e6);
box-shadow: inset 0 0 0 16px rgba(255,255,255,0.55);
}

.chair {
position: absolute;
right: 18%;
top: 28%;
width: 300px;
height: 180px;
border-radius: 22px;
background: #f49bc0;
box-shadow: 0 18px 0 #7a3c1e;
display: grid;
place-items: center;
font-family: Georgia, serif;
font-size: 28px;
text-transform: uppercase;
}

.eye {
position: absolute;
right: 26%;
top: 4%;
width: 210px;
height: 160px;
display: grid;
place-items: center;
background: #ff8dbe;
clip-path: polygon(
50% 0%, 59% 25%, 86% 12%, 75% 38%, 100% 50%,
75% 62%, 86% 88%, 59% 75%, 50% 100%, 41% 75%,
14% 88%, 25% 62%, 0% 50%, 25% 38%, 14% 12%, 41% 25%
);
}

.eye::after {
content: "";
width: 72px;
height: 72px;
border-radius: 50%;
background: radial-gradient(circle, #111 0 26%, #7cc4e8 27% 52%, #fff 53%);
}

.film {
position: absolute;
left: 4%;
bottom: 20%;
width: 520px;
height: 88px;
border-radius: 50%;
border: 22px solid rgba(39, 21, 12, 0.9);
transform: rotate(-14deg);
}

.clap {
position: absolute;
left: 14%;
bottom: 8%;
width: 220px;
height: 125px;
padding: 28px;
transform: rotate(8deg);
background: #c8a5df;
border-radius: 10px;
font-family: monospace;
text-transform: uppercase;
}

.starburst {
position: absolute;
right: 2%;
top: 42%;
width: 140px;
height: 140px;
display: grid;
place-items: center;
text-align: center;
background: #d9e735;
clip-path: polygon(
50% 0%, 62% 22%, 86% 12%, 78% 38%, 100% 50%,
78% 62%, 86% 88%, 62% 78%, 50% 100%, 38% 78%,
14% 88%, 22% 62%, 0% 50%, 22% 38%, 14% 12%, 38% 22%
);
font-weight: 700;
text-transform: uppercase;
}

.section {
position: relative;
z-index: 4;
display: grid;
grid-template-columns: 55% 45%;
gap: 24px;
padding: 16px 36px 28px;
background: rgba(255,255,255,0.65);
border-radius: 18px 18px 0 0;
}

.section h2 {
margin: 16px 0 20px;
font-size: 18px;
text-transform: uppercase;
}

.cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}

.card {
overflow: hidden;
border-radius: 8px;
background: #f5eee8;
}

.thumb {
height: 170px;
background:
radial-gradient(circle at 70% 30%, #ff9fc4 0 12%, transparent 13%),
radial-gradient(circle at 45% 50%, #9f85d6 0 18%, transparent 19%),
linear-gradient(135deg, #bce7f5, #f7d2e3);
}

.card-body {
padding: 18px;
}

.card-title {
margin-bottom: 16px;
font-size: 16px;
text-transform: uppercase;
}

.tags {
display: flex;
gap: 6px;
flex-wrap: wrap;
}

.tag {
border: 1px solid #e7cfc7;
border-radius: 999px;
padding: 5px 8px;
font-size: 11px;
}

.promo {
display: grid;
grid-template-columns: 45% 55%;
align-items: center;
overflow: hidden;
border-radius: 18px;
background: linear-gradient(135deg, #e3cdf4, #f6cde4);
min-height: 300px;
}

.promo-copy {
padding: 42px;
}

.promo h2 {
margin: 0 0 18px;
font-family: Georgia, serif;
font-size: 42px;
line-height: 0.95;
font-weight: 400;
}

.promo h2 span {
color: #f36fa6;
}

.promo p {
margin: 0 0 26px;
line-height: 1.45;
}

.promo-image {
height: 100%;
min-height: 300px;
background:
radial-gradient(circle at 40% 35%, #fff 0 14%, transparent 15%),
radial-gradient(circle at 65% 48%, #f36fa6 0 8%, transparent 9%),
linear-gradient(145deg, #f8e9f0, #bba0e8);
}

.ticker {
padding: 16px 24px;
background: #d9e735;
font-family: monospace;
font-size: 16px;
letter-spacing: 4px;
white-space: nowrap;
overflow: hidden;
text-transform: uppercase;
}

@media (max-width: 980px) {
nav {
display: none;
}

.hero {
grid-template-columns: 1fr;
min-height: auto;
}

.hero-art {
min-height: 420px;
}

.section {
grid-template-columns: 1fr;
}

.cards {
grid-template-columns: repeat(2, 1fr);
}

.motto {
position: static;
margin-top: 36px;
}
}

@media (max-width: 560px) {
header {
padding: 20px;
}

.brand {
font-size: 13px;
}

.apply-btn {
display: none;
}

.hero {
padding: 8px 20px 24px;
}

h1 {
font-size: 56px;
}

.subtitle {
font-size: 15px;
}

.cards {
grid-template-columns: 1fr;
}

.promo {
grid-template-columns: 1fr;
}

.promo-copy {
padding: 28px;
}

.promo h2 {
font-size: 36px;
}

.eye,
.chair,
.door,
.film,
.clap,
.starburst {
transform: scale(0.75);
}
}
</style>
</head>
<body>
<main class="page">
<header>
<div class="brand">
<div class="logo">👁</div>
<div>School of<br>Visual Narrative</div>
</div>

<nav>
<a href="#">О школе</a>
<a href="#">Программы</a>
<a href="#">Преподаватели</a>
<a href="#">Работы учеников</a>
<a href="#">Журнал</a>
</nav>

<div class="header-actions">
<button class="apply-btn">Подать заявку</button>
<button class="menu-btn" aria-label="Открыть меню">☰</button>
</div>
</header>

<section class="hero">
<div class="hero-copy">
<h1>
Story<br>
is a choice.<br>
<span>Make it<br>unforgettable.</span>
</h1>

<p class="subtitle">
Школа визуального нарратива для тех, кто хочет видеть, создавать и управлять смыслами
</p>

<div class="hero-actions">
<button class="primary-btn">Смотреть программы ↗</button>

<button class="video-btn">
<span class="play">▷</span>
<span>Смотреть<br>видео</span>
</button>
</div>

<div class="motto">вижу • создаю • влияю</div>
</div>

<div class="hero-art" aria-hidden="true">
<div class="door"></div>
<div class="eye"></div>
<div class="chair">Director</div>
<div class="film"></div>
<div class="clap">Scene 1<br>Take 7<br>Roll 3</div>
<div class="starburst">Create<br>worlds</div>
</div>
</section>

<section class="section">
<div>
<h2>Программы</h2>

<div class="cards">
<article class="card">
<div class="thumb"></div>
<div class="card-body">
<div class="card-title">Режиссура</div>
<div class="tags">
<span class="tag">идея</span>
<span class="tag">композиция</span>
<span class="tag">смысл</span>
</div>
</div>
</article>

<article class="card">
<div class="thumb"></div>
<div class="card-body">
<div class="card-title">Сторителлинг</div>
<div class="tags">
<span class="tag">сценарий</span>
<span class="tag">персонажи</span>
<span class="tag">история</span>
</div>
</div>
</article>

<article class="card">
<div class="thumb"></div>
<div class="card-body">
<div class="card-title">Визуальный дизайн</div>
<div class="tags">
<span class="tag">образ</span>
<span class="tag">эстетика</span>
</div>
</div>
</article>

<article class="card">
<div class="thumb"></div>
<div class="card-body">
<div class="card-title">Монтаж и ритм</div>
<div class="tags">
<span class="tag">ритм</span>
<span class="tag">структура</span>
<span class="tag">эмоции</span>
</div>
</div>
</article>
</div>
</div>

<aside class="promo">
<div class="promo-copy">
<h2>Место, где рождаются <span>миры</span></h2>
<p>
Мы учим превращать идеи в сильные визуальные истории,
которые цепляют, вдохновляют и остаются в памяти.
</p>
<button class="primary-btn">Узнать больше ↗</button>
</div>
<div class="promo-image"></div>
</aside>
</section>

<div class="ticker">
Вижу • создаю • влияю * Story is a choice * Make it unforgettable *
</div>
</main>
</body>
</html>

Click "Block Editor" to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.

Tilda Publishing

create your own block from scratch