398 lines
12 KiB
HTML
398 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="tr">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Marmaris Local — Marka Yönü</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=Unbounded:wght@400;600;800&family=Golos+Text:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap"
|
||
rel="stylesheet">
|
||
<style>
|
||
:root {
|
||
--stone: #EDEEE3;
|
||
--stone-deep: #E2E4D5;
|
||
--pine: #123238;
|
||
--turquoise: #2E9C9A;
|
||
--shutter: #4F7C93;
|
||
--gold: #E8A23D;
|
||
--bougainvillea: #E85D6E;
|
||
--ink: #21231F;
|
||
--paper: #FBFAF6;
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
body {
|
||
background: var(--stone);
|
||
color: var(--ink);
|
||
font-family: 'Golos Text', sans-serif;
|
||
padding: 64px 24px 100px;
|
||
}
|
||
|
||
.wrap {
|
||
max-width: 980px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
/* ---- Header / wordmark ---- */
|
||
.brandhead {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 28px;
|
||
margin-bottom: 80px;
|
||
}
|
||
|
||
.seal {
|
||
width: 92px;
|
||
height: 92px;
|
||
border-radius: 50%;
|
||
border: 2.5px solid var(--pine);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
flex-shrink: 0;
|
||
background: var(--paper);
|
||
}
|
||
|
||
.seal::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 7px;
|
||
border-radius: 50%;
|
||
border: 1px dashed var(--turquoise);
|
||
}
|
||
|
||
.seal-mark {
|
||
font-family: 'Unbounded', sans-serif;
|
||
font-weight: 800;
|
||
font-size: 22px;
|
||
color: var(--pine);
|
||
letter-spacing: -0.5px;
|
||
}
|
||
|
||
.wordmark h1 {
|
||
font-family: 'Unbounded', sans-serif;
|
||
font-weight: 800;
|
||
font-size: 40px;
|
||
letter-spacing: -1px;
|
||
color: var(--pine);
|
||
text-transform: lowercase;
|
||
}
|
||
|
||
.wordmark p {
|
||
font-family: 'IBM Plex Mono', monospace;
|
||
font-size: 13px;
|
||
color: var(--shutter);
|
||
margin-top: 6px;
|
||
letter-spacing: 0.3px;
|
||
}
|
||
|
||
section {
|
||
margin-bottom: 72px;
|
||
}
|
||
|
||
.label {
|
||
font-family: 'IBM Plex Mono', monospace;
|
||
font-size: 12px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1.5px;
|
||
color: var(--shutter);
|
||
margin-bottom: 18px;
|
||
display: block;
|
||
}
|
||
|
||
/* ---- Palette ---- */
|
||
.palette {
|
||
display: flex;
|
||
gap: 14px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.swatch {
|
||
width: 148px;
|
||
border-radius: 14px;
|
||
overflow: hidden;
|
||
box-shadow: 0 1px 2px rgba(18, 50, 56, 0.08);
|
||
}
|
||
|
||
.swatch .fill {
|
||
height: 84px;
|
||
}
|
||
|
||
.swatch .meta {
|
||
background: var(--paper);
|
||
padding: 10px 12px;
|
||
font-family: 'IBM Plex Mono', monospace;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.swatch .meta .name {
|
||
font-family: 'Golos Text', sans-serif;
|
||
font-weight: 600;
|
||
font-size: 13px;
|
||
margin-bottom: 3px;
|
||
}
|
||
|
||
/* ---- Type specimen ---- */
|
||
.type-block {
|
||
background: var(--paper);
|
||
border-radius: 20px;
|
||
padding: 44px;
|
||
}
|
||
|
||
.type-block .display {
|
||
font-family: 'Unbounded', sans-serif;
|
||
font-weight: 700;
|
||
font-size: 42px;
|
||
line-height: 1.12;
|
||
letter-spacing: -1px;
|
||
color: var(--pine);
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.type-block .display.ru {
|
||
font-weight: 600;
|
||
font-size: 36px;
|
||
color: var(--turquoise);
|
||
margin-bottom: 28px;
|
||
}
|
||
|
||
.type-block .body-sample {
|
||
font-family: 'Golos Text', sans-serif;
|
||
font-size: 16px;
|
||
line-height: 1.6;
|
||
color: var(--ink);
|
||
max-width: 560px;
|
||
opacity: 0.85;
|
||
}
|
||
|
||
.type-note {
|
||
display: flex;
|
||
gap: 32px;
|
||
margin-top: 28px;
|
||
font-family: 'IBM Plex Mono', monospace;
|
||
font-size: 12px;
|
||
color: var(--shutter);
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
/* ---- Cards ---- */
|
||
.cards {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 20px;
|
||
}
|
||
|
||
.card {
|
||
background: var(--paper);
|
||
border-radius: 18px;
|
||
padding: 22px;
|
||
position: relative;
|
||
border: 1px solid rgba(18, 50, 56, 0.08);
|
||
}
|
||
|
||
.card .stamp {
|
||
position: absolute;
|
||
top: 16px;
|
||
right: 16px;
|
||
width: 46px;
|
||
height: 46px;
|
||
border-radius: 50%;
|
||
border: 1.5px solid var(--turquoise);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transform: rotate(-8deg);
|
||
}
|
||
|
||
.card .stamp span {
|
||
font-family: 'IBM Plex Mono', monospace;
|
||
font-size: 7.5px;
|
||
text-align: center;
|
||
line-height: 1.2;
|
||
color: var(--turquoise);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.card .cat {
|
||
font-family: 'IBM Plex Mono', monospace;
|
||
font-size: 11px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.8px;
|
||
color: var(--bougainvillea);
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.card h3 {
|
||
font-family: 'Unbounded', sans-serif;
|
||
font-size: 19px;
|
||
font-weight: 600;
|
||
color: var(--pine);
|
||
max-width: 75%;
|
||
line-height: 1.25;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.card .loc {
|
||
font-size: 13px;
|
||
color: var(--ink);
|
||
opacity: 0.65;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.card .foot {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-family: 'IBM Plex Mono', monospace;
|
||
font-size: 12px;
|
||
border-top: 1px dashed rgba(18, 50, 56, 0.15);
|
||
padding-top: 12px;
|
||
}
|
||
|
||
.card .price {
|
||
color: var(--pine);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.card .gold {
|
||
color: var(--gold);
|
||
}
|
||
|
||
.signature-note {
|
||
background: var(--pine);
|
||
color: var(--stone);
|
||
border-radius: 20px;
|
||
padding: 32px 36px;
|
||
font-size: 14.5px;
|
||
line-height: 1.65;
|
||
}
|
||
|
||
.signature-note b {
|
||
color: var(--gold);
|
||
font-family: 'Golos Text';
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="wrap">
|
||
|
||
<div class="brandhead">
|
||
<div class="seal">
|
||
<div class="seal-mark">ML</div>
|
||
</div>
|
||
<div class="wordmark">
|
||
<h1>marmaris local</h1>
|
||
<p>YEREL BİLGİ · МЕСТНЫЕ ЗНАНИЯ · LOCAL KNOWLEDGE</p>
|
||
</div>
|
||
</div>
|
||
|
||
<section>
|
||
<span class="label">01 — Renk Paleti</span>
|
||
<div class="palette">
|
||
<div class="swatch">
|
||
<div class="fill" style="background:#123238"></div>
|
||
<div class="meta">
|
||
<div class="name">Pine Night</div>#123238
|
||
</div>
|
||
</div>
|
||
<div class="swatch">
|
||
<div class="fill" style="background:#2E9C9A"></div>
|
||
<div class="meta">
|
||
<div class="name">Bay Turquoise</div>#2E9C9A
|
||
</div>
|
||
</div>
|
||
<div class="swatch">
|
||
<div class="fill" style="background:#4F7C93"></div>
|
||
<div class="meta">
|
||
<div class="name">Shutter Blue</div>#4F7C93
|
||
</div>
|
||
</div>
|
||
<div class="swatch">
|
||
<div class="fill" style="background:#E8A23D"></div>
|
||
<div class="meta">
|
||
<div class="name">Golden Hour</div>#E8A23D
|
||
</div>
|
||
</div>
|
||
<div class="swatch">
|
||
<div class="fill" style="background:#E85D6E"></div>
|
||
<div class="meta">
|
||
<div class="name">Bougainvillea</div>#E85D6E
|
||
</div>
|
||
</div>
|
||
<div class="swatch">
|
||
<div class="fill" style="background:#EDEEE3"></div>
|
||
<div class="meta">
|
||
<div class="name">Limestone</div>#EDEEE3
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<span class="label">02 — Tipografi</span>
|
||
<div class="type-block">
|
||
<div class="display">En iyi yerel adresler,<br>turistin göremediği yerde.</div>
|
||
<div class="display ru">Лучшие места, которые знают местные.</div>
|
||
<div class="body-sample">Golos Text — gövde metni. Hem Latin hem Kiril alfabesinde eşit ağırlıkta
|
||
okunur, çeviri hissi vermez. Restoran açıklamaları, işletme saatleri ve kullanıcı yorumları bu yazı
|
||
tipiyle yazılır.</div>
|
||
<div class="type-note">
|
||
<span>DISPLAY — Unbounded 800/600</span>
|
||
<span>BODY — Golos Text 400/500</span>
|
||
<span>UTILITY — IBM Plex Mono (fiyat, saat, telefon)</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<span class="label">03 — Kart Sistemi (imza öğe: "Yerel Onaylı" mührü)</span>
|
||
<div class="cards">
|
||
<div class="card">
|
||
<div class="stamp"><span>YEREL<br>ONAYLI</span></div>
|
||
<div class="cat">Restoran</div>
|
||
<h3>İskele Balık Ocakbaşı</h3>
|
||
<div class="loc">Yat Limanı, Marmaris</div>
|
||
<div class="foot"><span class="price">₺₺₺</span><span class="gold">★ 4.8</span></div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="stamp"><span>YEREL<br>ONAYLI</span></div>
|
||
<div class="cat">Apart</div>
|
||
<h3>Zeytin Bahçesi Apart</h3>
|
||
<div class="loc">Sedir Mah., Marmaris</div>
|
||
<div class="foot"><span class="price">₺₺</span><span class="gold">★ 4.6</span></div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="stamp"><span>YEREL<br>ONAYLI</span></div>
|
||
<div class="cat">Hizmet</div>
|
||
<h3>Marina Dalış Merkezi</h3>
|
||
<div class="loc">İçmeler, Marmaris</div>
|
||
<div class="foot"><span class="price">₺₺₺</span><span class="gold">★ 4.9</span></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<span class="label">04 — Neden bu yön</span>
|
||
<div class="signature-note">
|
||
Palet klasik "krem + turuncu" AI şablonundan kaçınıp doğrudan Marmaris'in kendi görsel dünyasından
|
||
geliyor: çam yeşiline kaçan koyu <b>Pine Night</b> zemin, körfezin <b>Bay Turquoise</b>'u imza rengi,
|
||
badem çiçeği pembesi <b>Bougainvillea</b> nadir vurgu olarak. <b>Unbounded</b> hem Latin hem Kiril'de
|
||
doğal duran, karaktersiz Inter/Manrope klişesine düşmeyen bir başlık fontu — Rus kullanıcıya "sonradan
|
||
çevrilmiş" değil, kendisi için tasarlanmış hissi verir. İmza öğe: her mekanın yanındaki daire mühür —
|
||
markanın vaadini ("yereldan onaylı") harf yerine görsel bir jestle taşıyor.
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
</body>
|
||
|
||
</html> |