mirror of
https://github.com/wasrusgen/vizelberg-mockups.git
synced 2026-06-03 15:04:52 +00:00
335 lines
17 KiB
HTML
335 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>VIZELBERG — 10 концепций логотипа</title>
|
||
<style>
|
||
:root{
|
||
--sage:#7C9070; --herbal:#2F4A3C; --cream:#F5EFE6;
|
||
--terra:#E8A87C; --gold:#C9A24B; --ink:#23302a;
|
||
}
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
body{
|
||
font-family:'Segoe UI',-apple-system,Roboto,sans-serif;
|
||
background:var(--cream); color:var(--ink);
|
||
padding:48px 32px; line-height:1.5;
|
||
}
|
||
.head{max-width:1200px;margin:0 auto 40px}
|
||
.head h1{font-size:30px;font-weight:700;letter-spacing:.5px;color:var(--herbal)}
|
||
.head p{color:#5d6b62;margin-top:8px;max-width:760px}
|
||
.palette{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
|
||
.sw{display:flex;flex-direction:column;align-items:center;font-size:11px;color:#5d6b62}
|
||
.sw i{width:46px;height:46px;border-radius:10px;display:block;margin-bottom:6px;border:1px solid rgba(0,0,0,.06)}
|
||
.grid{
|
||
max-width:1200px;margin:0 auto;
|
||
display:grid;grid-template-columns:repeat(2,1fr);gap:22px;
|
||
}
|
||
.card{
|
||
background:#fff;border-radius:18px;overflow:hidden;
|
||
box-shadow:0 6px 24px rgba(47,74,60,.08);border:1px solid rgba(47,74,60,.06);
|
||
}
|
||
.card .num{
|
||
font-size:12px;font-weight:700;color:var(--gold);
|
||
padding:14px 18px 0;letter-spacing:1px;text-transform:uppercase;
|
||
}
|
||
.card .name{padding:2px 18px 0;font-weight:600;color:var(--herbal);font-size:15px}
|
||
.card .desc{padding:4px 18px 14px;color:#6c7a71;font-size:12.5px;min-height:36px}
|
||
.stage{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(47,74,60,.07)}
|
||
.light{background:var(--cream);display:flex;align-items:center;justify-content:center;padding:30px 16px;min-height:150px}
|
||
.dark{background:var(--herbal);display:flex;align-items:center;justify-content:center;padding:30px 16px;min-height:150px}
|
||
svg{max-width:100%;height:auto}
|
||
.footer{max-width:1200px;margin:34px auto 0;color:#6c7a71;font-size:13px}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="head">
|
||
<h1>VIZELBERG · 10 концепций логотипа</h1>
|
||
<p>Персональный экспертный бренд нутрициолога. Палитра: природный шалфейный + глубокий травяной, кремовый фон, тёплые терракота и золото как акценты. Каждый знак показан на светлом и тёмном фоне.</p>
|
||
<div class="palette">
|
||
<div class="sw"><i style="background:#7C9070"></i>#7C9070 шалфей</div>
|
||
<div class="sw"><i style="background:#2F4A3C"></i>#2F4A3C травяной</div>
|
||
<div class="sw"><i style="background:#F5EFE6"></i>#F5EFE6 крем</div>
|
||
<div class="sw"><i style="background:#E8A87C"></i>#E8A87C терракота</div>
|
||
<div class="sw"><i style="background:#C9A24B"></i>#C9A24B золото</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid">
|
||
|
||
<!-- 1 -->
|
||
<div class="card">
|
||
<div class="num">01</div>
|
||
<div class="name">Лист в букве V</div>
|
||
<div class="desc">Классический wordmark; буква V прорастает листом — еда + рост.</div>
|
||
<div class="stage">
|
||
<div class="light">
|
||
<svg width="280" height="80" viewBox="0 0 280 80">
|
||
<g>
|
||
<path d="M14 22 L26 58 L38 22" fill="none" stroke="#2F4A3C" stroke-width="5" stroke-linecap="round"/>
|
||
<path d="M26 40 C26 28 34 18 46 16 C44 28 38 38 26 40 Z" fill="#7C9070"/>
|
||
<path d="M26 40 C26 30 30 22 38 19" stroke="#2F4A3C" stroke-width="1.6" fill="none"/>
|
||
</g>
|
||
<text x="56" y="50" font-family="Georgia,serif" font-size="30" letter-spacing="3" fill="#2F4A3C">IZELBERG</text>
|
||
</svg>
|
||
</div>
|
||
<div class="dark">
|
||
<svg width="280" height="80" viewBox="0 0 280 80">
|
||
<g>
|
||
<path d="M14 22 L26 58 L38 22" fill="none" stroke="#F5EFE6" stroke-width="5" stroke-linecap="round"/>
|
||
<path d="M26 40 C26 28 34 18 46 16 C44 28 38 38 26 40 Z" fill="#C9A24B"/>
|
||
<path d="M26 40 C26 30 30 22 38 19" stroke="#2F4A3C" stroke-width="1.6" fill="none"/>
|
||
</g>
|
||
<text x="56" y="50" font-family="Georgia,serif" font-size="30" letter-spacing="3" fill="#F5EFE6">IZELBERG</text>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 2 -->
|
||
<div class="card">
|
||
<div class="num">02</div>
|
||
<div class="name">Эмблема-кружок с ростком</div>
|
||
<div class="desc">Монограмма V и росток в круге — компактный знак для аватара/иконки.</div>
|
||
<div class="stage">
|
||
<div class="light">
|
||
<svg width="120" height="120" viewBox="0 0 120 120">
|
||
<circle cx="60" cy="60" r="46" fill="none" stroke="#7C9070" stroke-width="3"/>
|
||
<path d="M42 44 L60 82 L78 44" fill="none" stroke="#2F4A3C" stroke-width="5" stroke-linecap="round"/>
|
||
<path d="M60 60 C60 48 67 40 78 39 C76 50 70 58 60 60 Z" fill="#7C9070"/>
|
||
<circle cx="60" cy="60" r="46" fill="none" stroke="#C9A24B" stroke-width="1" stroke-dasharray="2 4"/>
|
||
</svg>
|
||
</div>
|
||
<div class="dark">
|
||
<svg width="120" height="120" viewBox="0 0 120 120">
|
||
<circle cx="60" cy="60" r="46" fill="none" stroke="#C9A24B" stroke-width="3"/>
|
||
<path d="M42 44 L60 82 L78 44" fill="none" stroke="#F5EFE6" stroke-width="5" stroke-linecap="round"/>
|
||
<path d="M60 60 C60 48 67 40 78 39 C76 50 70 58 60 60 Z" fill="#7C9070"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 3 -->
|
||
<div class="card">
|
||
<div class="num">03</div>
|
||
<div class="name">Тонкий serif (премиум)</div>
|
||
<div class="desc">Высокий межбуквенный интервал, аптечно-чистый. Доверие и экспертность.</div>
|
||
<div class="stage">
|
||
<div class="light">
|
||
<svg width="300" height="80" viewBox="0 0 300 80">
|
||
<text x="150" y="42" text-anchor="middle" font-family="'Times New Roman',serif" font-size="26" letter-spacing="8" fill="#2F4A3C">VIZELBERG</text>
|
||
<line x1="60" y1="56" x2="240" y2="56" stroke="#C9A24B" stroke-width="1"/>
|
||
<text x="150" y="70" text-anchor="middle" font-family="'Segoe UI',sans-serif" font-size="9" letter-spacing="6" fill="#7C9070">НУТРИЦИОЛОГИЯ</text>
|
||
</svg>
|
||
</div>
|
||
<div class="dark">
|
||
<svg width="300" height="80" viewBox="0 0 300 80">
|
||
<text x="150" y="42" text-anchor="middle" font-family="'Times New Roman',serif" font-size="26" letter-spacing="8" fill="#F5EFE6">VIZELBERG</text>
|
||
<line x1="60" y1="56" x2="240" y2="56" stroke="#C9A24B" stroke-width="1"/>
|
||
<text x="150" y="70" text-anchor="middle" font-family="'Segoe UI',sans-serif" font-size="9" letter-spacing="6" fill="#C9A24B">НУТРИЦИОЛОГИЯ</text>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 4 -->
|
||
<div class="card">
|
||
<div class="num">04</div>
|
||
<div class="name">V из двух листьев / капли</div>
|
||
<div class="desc">Буква V собрана из двух листьев — природа, баланс, забота.</div>
|
||
<div class="stage">
|
||
<div class="light">
|
||
<svg width="120" height="120" viewBox="0 0 120 120">
|
||
<path d="M60 84 C40 64 38 40 44 30 C58 40 62 62 60 84 Z" fill="#7C9070"/>
|
||
<path d="M60 84 C80 64 82 40 76 30 C62 40 58 62 60 84 Z" fill="#2F4A3C"/>
|
||
<path d="M52 34 C56 50 59 66 60 80" stroke="#F5EFE6" stroke-width="1.4" fill="none"/>
|
||
</svg>
|
||
</div>
|
||
<div class="dark">
|
||
<svg width="120" height="120" viewBox="0 0 120 120">
|
||
<path d="M60 84 C40 64 38 40 44 30 C58 40 62 62 60 84 Z" fill="#7C9070"/>
|
||
<path d="M60 84 C80 64 82 40 76 30 C62 40 58 62 60 84 Z" fill="#C9A24B"/>
|
||
<path d="M52 34 C56 50 59 66 60 80" stroke="#2F4A3C" stroke-width="1.4" fill="none"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 5 -->
|
||
<div class="card">
|
||
<div class="num">05</div>
|
||
<div class="name">Монограмма VB</div>
|
||
<div class="desc">Сплетённые V и B — лаконичный знак для печати, штампа, фавикона.</div>
|
||
<div class="stage">
|
||
<div class="light">
|
||
<svg width="120" height="120" viewBox="0 0 120 120">
|
||
<rect x="20" y="20" width="80" height="80" rx="18" fill="none" stroke="#7C9070" stroke-width="3"/>
|
||
<path d="M38 40 L52 76 L60 56" fill="none" stroke="#2F4A3C" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
|
||
<path d="M64 40 L64 80 L78 80 C88 80 88 66 78 64 C86 62 86 50 76 50 L64 50" fill="none" stroke="#C9A24B" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
</div>
|
||
<div class="dark">
|
||
<svg width="120" height="120" viewBox="0 0 120 120">
|
||
<rect x="20" y="20" width="80" height="80" rx="18" fill="none" stroke="#C9A24B" stroke-width="3"/>
|
||
<path d="M38 40 L52 76 L60 56" fill="none" stroke="#F5EFE6" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
|
||
<path d="M64 40 L64 80 L78 80 C88 80 88 66 78 64 C86 62 86 50 76 50 L64 50" fill="none" stroke="#E8A87C" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 6 -->
|
||
<div class="card">
|
||
<div class="num">06</div>
|
||
<div class="name">Модерн lowercase + слоган</div>
|
||
<div class="desc">Мягкий строчный sans, дружелюбно и современно. Под мини-приложение.</div>
|
||
<div class="stage">
|
||
<div class="light">
|
||
<svg width="300" height="80" viewBox="0 0 300 80">
|
||
<circle cx="36" cy="40" r="16" fill="#7C9070"/>
|
||
<path d="M28 36 C28 30 33 26 40 26 C38 33 34 38 28 40 Z" fill="#F5EFE6"/>
|
||
<text x="62" y="40" font-family="'Segoe UI',sans-serif" font-weight="600" font-size="26" fill="#2F4A3C">vizelberg</text>
|
||
<text x="63" y="58" font-family="'Segoe UI',sans-serif" font-size="9" letter-spacing="0.8" fill="#7C9070">нутрициология здоровья</text>
|
||
</svg>
|
||
</div>
|
||
<div class="dark">
|
||
<svg width="300" height="80" viewBox="0 0 300 80">
|
||
<circle cx="36" cy="40" r="16" fill="#C9A24B"/>
|
||
<path d="M28 36 C28 30 33 26 40 26 C38 33 34 38 28 40 Z" fill="#2F4A3C"/>
|
||
<text x="62" y="40" font-family="'Segoe UI',sans-serif" font-weight="600" font-size="26" fill="#F5EFE6">vizelberg</text>
|
||
<text x="63" y="58" font-family="'Segoe UI',sans-serif" font-size="9" letter-spacing="0.8" fill="#E8A87C">нутрициология здоровья</text>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 7 -->
|
||
<div class="card">
|
||
<div class="num">07</div>
|
||
<div class="name">Бейдж с колосом</div>
|
||
<div class="desc">Круглая печать-эмблема с колосом и инициалом — нутрициология/цельность.</div>
|
||
<div class="stage">
|
||
<div class="light">
|
||
<svg width="120" height="120" viewBox="0 0 120 120">
|
||
<circle cx="60" cy="60" r="48" fill="none" stroke="#2F4A3C" stroke-width="2"/>
|
||
<circle cx="60" cy="60" r="42" fill="none" stroke="#C9A24B" stroke-width="1"/>
|
||
<line x1="60" y1="40" x2="60" y2="80" stroke="#7C9070" stroke-width="2"/>
|
||
<g stroke="#7C9070" stroke-width="2" fill="none">
|
||
<path d="M60 48 q8 -2 12 -8"/><path d="M60 48 q-8 -2 -12 -8"/>
|
||
<path d="M60 58 q8 -2 12 -8"/><path d="M60 58 q-8 -2 -12 -8"/>
|
||
<path d="M60 68 q8 -2 12 -8"/><path d="M60 68 q-8 -2 -12 -8"/>
|
||
</g>
|
||
<text x="60" y="100" text-anchor="middle" font-family="Georgia,serif" font-size="9" letter-spacing="4" fill="#2F4A3C">VIZELBERG</text>
|
||
</svg>
|
||
</div>
|
||
<div class="dark">
|
||
<svg width="120" height="120" viewBox="0 0 120 120">
|
||
<circle cx="60" cy="60" r="48" fill="none" stroke="#F5EFE6" stroke-width="2"/>
|
||
<circle cx="60" cy="60" r="42" fill="none" stroke="#C9A24B" stroke-width="1"/>
|
||
<line x1="60" y1="40" x2="60" y2="80" stroke="#C9A24B" stroke-width="2"/>
|
||
<g stroke="#C9A24B" stroke-width="2" fill="none">
|
||
<path d="M60 48 q8 -2 12 -8"/><path d="M60 48 q-8 -2 -12 -8"/>
|
||
<path d="M60 58 q8 -2 12 -8"/><path d="M60 58 q-8 -2 -12 -8"/>
|
||
<path d="M60 68 q8 -2 12 -8"/><path d="M60 68 q-8 -2 -12 -8"/>
|
||
</g>
|
||
<text x="60" y="100" text-anchor="middle" font-family="Georgia,serif" font-size="9" letter-spacing="4" fill="#F5EFE6">VIZELBERG</text>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 8 -->
|
||
<div class="card">
|
||
<div class="num">08</div>
|
||
<div class="name">Лист + ложка</div>
|
||
<div class="desc">Прямой символ нутрициологии: природа встречает приём пищи.</div>
|
||
<div class="stage">
|
||
<div class="light">
|
||
<svg width="280" height="90" viewBox="0 0 280 90">
|
||
<g transform="translate(20,18)">
|
||
<ellipse cx="26" cy="22" rx="13" ry="20" fill="#7C9070"/>
|
||
<path d="M26 4 L26 56" stroke="#F5EFE6" stroke-width="1.6"/>
|
||
<rect x="24" y="42" width="4" height="22" rx="2" fill="#C9A24B"/>
|
||
</g>
|
||
<text x="70" y="58" font-family="Georgia,serif" font-size="28" letter-spacing="2" fill="#2F4A3C">VIZELBERG</text>
|
||
</svg>
|
||
</div>
|
||
<div class="dark">
|
||
<svg width="280" height="90" viewBox="0 0 280 90">
|
||
<g transform="translate(20,18)">
|
||
<ellipse cx="26" cy="22" rx="13" ry="20" fill="#C9A24B"/>
|
||
<path d="M26 4 L26 56" stroke="#2F4A3C" stroke-width="1.6"/>
|
||
<rect x="24" y="42" width="4" height="22" rx="2" fill="#E8A87C"/>
|
||
</g>
|
||
<text x="70" y="58" font-family="Georgia,serif" font-size="28" letter-spacing="2" fill="#F5EFE6">VIZELBERG</text>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 9 -->
|
||
<div class="card">
|
||
<div class="num">09</div>
|
||
<div class="name">Молекула + лист</div>
|
||
<div class="desc">Наука + природа: нутрициология как доказательный подход. Современно.</div>
|
||
<div class="stage">
|
||
<div class="light">
|
||
<svg width="120" height="120" viewBox="0 0 120 120">
|
||
<g stroke="#7C9070" stroke-width="2.4" fill="none">
|
||
<line x1="60" y1="34" x2="38" y2="58"/><line x1="60" y1="34" x2="82" y2="58"/>
|
||
<line x1="38" y1="58" x2="60" y2="82"/><line x1="82" y1="58" x2="60" y2="82"/>
|
||
</g>
|
||
<circle cx="60" cy="34" r="7" fill="#2F4A3C"/>
|
||
<circle cx="38" cy="58" r="7" fill="#C9A24B"/>
|
||
<circle cx="82" cy="58" r="7" fill="#E8A87C"/>
|
||
<path d="M60 82 C56 70 60 60 70 56 C70 68 66 78 60 82 Z" fill="#7C9070"/>
|
||
</svg>
|
||
</div>
|
||
<div class="dark">
|
||
<svg width="120" height="120" viewBox="0 0 120 120">
|
||
<g stroke="#F5EFE6" stroke-width="2.4" fill="none">
|
||
<line x1="60" y1="34" x2="38" y2="58"/><line x1="60" y1="34" x2="82" y2="58"/>
|
||
<line x1="38" y1="58" x2="60" y2="82"/><line x1="82" y1="58" x2="60" y2="82"/>
|
||
</g>
|
||
<circle cx="60" cy="34" r="7" fill="#F5EFE6"/>
|
||
<circle cx="38" cy="58" r="7" fill="#C9A24B"/>
|
||
<circle cx="82" cy="58" r="7" fill="#E8A87C"/>
|
||
<path d="M60 82 C56 70 60 60 70 56 C70 68 66 78 60 82 Z" fill="#7C9070"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 10 -->
|
||
<div class="card">
|
||
<div class="num">10</div>
|
||
<div class="name">Рукописная подпись</div>
|
||
<div class="desc">Авторский почерк — максимум персонального бренда и женственности.</div>
|
||
<div class="stage">
|
||
<div class="light">
|
||
<svg width="300" height="80" viewBox="0 0 300 80">
|
||
<text x="40" y="50" font-family="'Brush Script MT','Segoe Script',cursive" font-size="40" fill="#2F4A3C">Vizelberg</text>
|
||
<path d="M40 58 C110 66 200 66 262 56" stroke="#C9A24B" stroke-width="2" fill="none"/>
|
||
<path d="M255 50 C262 52 265 54 262 56" stroke="#7C9070" stroke-width="2" fill="none"/>
|
||
</svg>
|
||
</div>
|
||
<div class="dark">
|
||
<svg width="300" height="80" viewBox="0 0 300 80">
|
||
<text x="40" y="50" font-family="'Brush Script MT','Segoe Script',cursive" font-size="40" fill="#F5EFE6">Vizelberg</text>
|
||
<path d="M40 58 C110 66 200 66 262 56" stroke="#C9A24B" stroke-width="2" fill="none"/>
|
||
<path d="M255 50 C262 52 265 54 262 56" stroke="#E8A87C" stroke-width="2" fill="none"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="footer">
|
||
Шрифты в превью системные (Georgia/Times/Segoe) — на финальном этапе заменяются на лицензионные пары (напр. serif: Cormorant/PT Serif; sans: Inter/Manrope). Выбери 1–2 концепции — доработаю в финальный лого-замок (горизонтальный + иконка + ч/б версия).
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|