681 lines
27 KiB
HTML
681 lines
27 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Станция Сосновая — аренда у Переславского озера</title>
|
||
<style>
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
:root {
|
||
--forest: #111d11;
|
||
--canopy: #1a2e1a;
|
||
--mid: #243d24;
|
||
--leaf: #2f5230;
|
||
--moss: #3d6b3d;
|
||
--bark: #4a2e14;
|
||
--branch: #6b4220;
|
||
--wood: #8c5a28;
|
||
--straw: #c4a265;
|
||
--cream: #f2ead8;
|
||
--fog: #d8d0bc;
|
||
--shadow: rgba(0,0,0,.6);
|
||
}
|
||
|
||
html { scroll-behavior: smooth; }
|
||
|
||
body {
|
||
font-family: Georgia, 'Times New Roman', serif;
|
||
background: var(--forest);
|
||
color: var(--cream);
|
||
line-height: 1.7;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
a { color: inherit; text-decoration: none; }
|
||
|
||
/* ─── NAV ─── */
|
||
nav {
|
||
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
padding: 0 3rem; height: 60px;
|
||
background: rgba(10,16,10,.9);
|
||
backdrop-filter: blur(6px);
|
||
border-bottom: 1px solid rgba(61,107,61,.35);
|
||
transition: background .3s;
|
||
}
|
||
.nav-logo {
|
||
font-size: 1.1rem; letter-spacing: .06em; font-weight: 700;
|
||
color: var(--straw);
|
||
}
|
||
.nav-links { display: flex; gap: 2rem; list-style: none; }
|
||
.nav-links a {
|
||
font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
|
||
color: var(--fog); transition: color .2s;
|
||
}
|
||
.nav-links a:hover { color: var(--straw); }
|
||
.nav-cta {
|
||
font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
|
||
padding: .5rem 1.4rem; border: 1px solid var(--straw); color: var(--straw);
|
||
background: transparent; cursor: pointer; transition: background .2s, color .2s;
|
||
}
|
||
.nav-cta:hover { background: var(--straw); color: var(--forest); }
|
||
|
||
/* ─── HERO ─── */
|
||
.hero {
|
||
min-height: 100vh;
|
||
display: flex; flex-direction: column;
|
||
align-items: center; justify-content: center;
|
||
text-align: center;
|
||
padding: 8rem 2rem 5rem;
|
||
position: relative; overflow: hidden;
|
||
background: linear-gradient(170deg, #0c160c 0%, #1a2e1a 45%, #223a22 80%, #0e1a0e 100%);
|
||
}
|
||
/* pine silhouette strip */
|
||
.hero::before {
|
||
content: '';
|
||
position: absolute; bottom: 0; left: 0; right: 0; height: 220px;
|
||
background:
|
||
linear-gradient(to top, #0c160c 0%, transparent 100%),
|
||
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'%3E%3Cpath fill='%230c160c' d='M0 200V140l55-90 35 28 45-110 40 55 38-85 48 65 42-95 50 72 38-55 45 80 55-100 48 65 38-75 45 90 55-65 42 72 48-55 50 90 55-110 45 72V200z'/%3E%3C/svg%3E")
|
||
bottom / cover no-repeat;
|
||
pointer-events: none;
|
||
}
|
||
.hero::after {
|
||
content: '';
|
||
position: absolute; inset: 0;
|
||
background: radial-gradient(ellipse at center, transparent 25%, rgba(8,14,8,.5) 100%);
|
||
pointer-events: none;
|
||
}
|
||
.hero-content { position: relative; z-index: 1; max-width: 700px; }
|
||
.hero-badge {
|
||
display: inline-block; margin-bottom: 1.5rem;
|
||
font-size: .72rem; letter-spacing: .24em; text-transform: uppercase;
|
||
color: var(--straw); border: 1px solid rgba(196,162,101,.35);
|
||
padding: .35rem 1.2rem; border-radius: 2px;
|
||
}
|
||
.hero h1 {
|
||
font-size: clamp(2.8rem, 8vw, 5.8rem); font-style: italic; font-weight: 700;
|
||
line-height: 1.08; color: var(--cream);
|
||
text-shadow: 0 4px 40px rgba(0,0,0,.75);
|
||
margin-bottom: 1.2rem; letter-spacing: .02em;
|
||
}
|
||
.hero-sub {
|
||
font-style: italic; font-size: clamp(1rem, 2.5vw, 1.4rem);
|
||
color: var(--fog); margin-bottom: 2.8rem;
|
||
}
|
||
.btn-hero {
|
||
display: inline-block; padding: 1rem 3rem;
|
||
background: var(--bark); color: var(--cream);
|
||
font-size: .85rem; letter-spacing: .14em; text-transform: uppercase;
|
||
border: 1px solid var(--wood);
|
||
transition: background .25s, box-shadow .25s;
|
||
box-shadow: 0 4px 24px rgba(0,0,0,.45);
|
||
}
|
||
.btn-hero:hover { background: var(--wood); box-shadow: 0 8px 32px rgba(0,0,0,.55); }
|
||
|
||
/* ─── SECTION SCAFFOLD ─── */
|
||
section { padding: 6rem 2rem; }
|
||
.inner { max-width: 1100px; margin: 0 auto; }
|
||
.eyebrow {
|
||
display: block; font-size: .7rem; letter-spacing: .26em; text-transform: uppercase;
|
||
color: var(--straw); margin-bottom: .7rem;
|
||
}
|
||
h2 {
|
||
font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 700; font-style: italic;
|
||
color: var(--cream); line-height: 1.2; margin-bottom: .8rem;
|
||
}
|
||
.rule {
|
||
width: 48px; height: 2px; background: var(--wood);
|
||
margin: 1rem 0 2.8rem; border-radius: 1px;
|
||
}
|
||
|
||
/* ─── ABOUT ─── */
|
||
#about { background: var(--canopy); }
|
||
.about-grid {
|
||
display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center;
|
||
}
|
||
.about-text p { color: var(--fog); margin-bottom: 1rem; }
|
||
.about-text p strong { color: var(--straw); font-weight: 600; }
|
||
.about-stats {
|
||
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem;
|
||
}
|
||
.stat {
|
||
background: var(--mid); border: 1px solid var(--leaf);
|
||
padding: 1.2rem 1rem; text-align: center; border-radius: 4px;
|
||
}
|
||
.stat-n { font-size: 2.2rem; color: var(--straw); line-height: 1; font-weight: 700; }
|
||
.stat-l { font-size: .72rem; letter-spacing: .1em; color: var(--fog); margin-top: .3rem; text-transform: uppercase; }
|
||
.about-img-block {
|
||
background: linear-gradient(145deg, var(--mid), var(--canopy));
|
||
border: 1px solid rgba(196,162,101,.15);
|
||
aspect-ratio: 3/4;
|
||
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
|
||
}
|
||
.about-img-block .ph-icon { opacity: .4; }
|
||
.about-img-block span { font-style: italic; font-size: .95rem; color: var(--fog); }
|
||
|
||
/* ─── GALLERY ─── */
|
||
#gallery { background: var(--forest); }
|
||
.gallery-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 10px;
|
||
}
|
||
.ph-box {
|
||
background: var(--mid);
|
||
border: 1px solid rgba(47,82,48,.5);
|
||
aspect-ratio: 4/3;
|
||
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem;
|
||
color: var(--moss); font-size: .85rem; letter-spacing: .07em;
|
||
transition: border-color .25s, background .25s; cursor: default;
|
||
}
|
||
.ph-box:hover { border-color: var(--straw); background: var(--leaf); }
|
||
.ph-icon {
|
||
width: 40px; height: 40px;
|
||
}
|
||
|
||
/* ─── FACILITIES ─── */
|
||
#facilities { background: var(--canopy); }
|
||
.fac-grid {
|
||
display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
|
||
}
|
||
.fac-card {
|
||
background: var(--mid); border: 1px solid rgba(47,82,48,.5);
|
||
border-radius: 6px; overflow: hidden;
|
||
transition: transform .25s, box-shadow .25s, border-color .25s;
|
||
}
|
||
.fac-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 14px 36px rgba(0,0,0,.5);
|
||
border-color: rgba(196,162,101,.4);
|
||
}
|
||
.fac-photo {
|
||
background: var(--leaf);
|
||
aspect-ratio: 4/3;
|
||
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
|
||
color: var(--moss); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
|
||
border-bottom: 1px solid rgba(47,82,48,.4);
|
||
}
|
||
.fac-photo .ph-icon { opacity: .45; }
|
||
.fac-body { padding: 1.3rem 1.4rem 1.5rem; }
|
||
.fac-body h3 { font-size: 1rem; color: var(--straw); margin-bottom: .5rem; font-style: italic; }
|
||
.fac-body p { font-size: .83rem; color: var(--fog); line-height: 1.6; }
|
||
|
||
/* ─── PRICING ─── */
|
||
#pricing { background: var(--forest); }
|
||
#pricing .inner { text-align: center; }
|
||
#pricing .rule { margin-left: auto; margin-right: auto; }
|
||
.price-grid {
|
||
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem;
|
||
max-width: 860px; margin: 0 auto;
|
||
}
|
||
.pc {
|
||
background: var(--canopy);
|
||
border: 1px solid rgba(196,162,101,.22);
|
||
padding: 2.5rem 1.8rem; position: relative;
|
||
transition: border-color .25s, transform .25s;
|
||
}
|
||
.pc:hover { border-color: rgba(196,162,101,.5); transform: translateY(-4px); }
|
||
.pc.feat {
|
||
background: var(--mid);
|
||
border-color: var(--straw);
|
||
transform: translateY(-8px);
|
||
}
|
||
.pc.feat::before {
|
||
content: 'Популярный';
|
||
position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
|
||
background: var(--bark); border: 1px solid var(--wood);
|
||
color: var(--cream); font-size: .65rem; letter-spacing: .14em;
|
||
text-transform: uppercase; padding: .28rem .9rem; border-radius: 20px;
|
||
}
|
||
.pc-period {
|
||
font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
|
||
color: var(--straw); margin-bottom: 1.2rem;
|
||
}
|
||
.pc-amount {
|
||
font-size: 2.8rem; color: var(--cream); line-height: 1;
|
||
font-weight: 700; margin-bottom: .3rem;
|
||
}
|
||
.pc-amount sup { font-size: 1.3rem; vertical-align: super; }
|
||
.pc-unit { font-size: .78rem; color: var(--fog); margin-bottom: 2rem; }
|
||
.pc-feats { list-style: none; text-align: left; margin-bottom: 2rem; display: flex; flex-direction: column; gap: .55rem; }
|
||
.pc-feats li { font-size: .83rem; color: var(--fog); padding-left: 1.1rem; position: relative; }
|
||
.pc-feats li::before { content: '✓'; position: absolute; left: 0; color: var(--straw); font-size: .8rem; }
|
||
.pc-btn {
|
||
display: block; width: 100%; padding: .75rem;
|
||
border: 1px solid var(--wood); background: var(--bark);
|
||
color: var(--cream); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
|
||
cursor: pointer; transition: background .2s;
|
||
}
|
||
.pc-btn:hover { background: var(--wood); }
|
||
.pc.feat .pc-btn { background: var(--wood); }
|
||
.pc.feat .pc-btn:hover { background: var(--branch); }
|
||
.price-note { margin-top: 3rem; font-size: .8rem; color: rgba(216,208,188,.55); }
|
||
|
||
/* ─── CONTACTS ─── */
|
||
#contacts { background: var(--canopy); }
|
||
.contact-grid {
|
||
display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start;
|
||
}
|
||
.ci { margin-bottom: 2rem; display: flex; gap: 1rem; align-items: flex-start; }
|
||
.ci-icon {
|
||
flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
|
||
background: var(--mid); border: 1px solid var(--leaf);
|
||
display: flex; align-items: center; justify-content: center;
|
||
}
|
||
.ci-icon svg { width: 17px; height: 17px; fill: var(--straw); }
|
||
.ci-lbl { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--straw); margin-bottom: .2rem; }
|
||
.ci-val { font-size: 1rem; color: var(--cream); }
|
||
.ci-val a { transition: color .2s; }
|
||
.ci-val a:hover { color: var(--straw); }
|
||
.map-ph {
|
||
background: var(--mid); border: 1px solid rgba(47,82,48,.5);
|
||
border-radius: 6px; aspect-ratio: 4/3;
|
||
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
|
||
color: var(--moss); font-size: .85rem; letter-spacing: .06em;
|
||
}
|
||
.map-ph svg { width: 52px; height: 52px; opacity: .35; }
|
||
.map-ph small { font-size: .7rem; color: rgba(200,196,180,.45); letter-spacing: .1em; text-transform: uppercase; }
|
||
.btn-call {
|
||
display: inline-block; margin-top: 1.5rem; padding: .9rem 2.6rem;
|
||
background: var(--bark); border: 1px solid var(--wood); color: var(--cream);
|
||
font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
|
||
transition: background .2s;
|
||
}
|
||
.btn-call:hover { background: var(--wood); }
|
||
|
||
/* ─── FOOTER ─── */
|
||
footer {
|
||
background: #090f09; border-top: 1px solid rgba(47,82,48,.2);
|
||
padding: 2.4rem 3rem;
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
flex-wrap: wrap; gap: 1.2rem;
|
||
}
|
||
.f-brand { font-style: italic; font-size: 1.2rem; color: var(--straw); }
|
||
.f-tag { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--moss); margin-top: .2rem; }
|
||
.f-links { display: flex; gap: 1.8rem; }
|
||
.f-links a { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fog); transition: color .2s; }
|
||
.f-links a:hover { color: var(--straw); }
|
||
.f-copy { font-size: .7rem; color: rgba(216,208,188,.3); }
|
||
|
||
/* ─── RESPONSIVE ─── */
|
||
@media (max-width: 960px) {
|
||
.about-grid, .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
|
||
.about-img-block { aspect-ratio: 16/9; max-width: 520px; }
|
||
.fac-grid { grid-template-columns: repeat(2, 1fr); }
|
||
.price-grid { grid-template-columns: 1fr; max-width: 360px; }
|
||
.pc.feat { transform: none; }
|
||
nav { padding: 0 1.5rem; }
|
||
.nav-links { display: none; }
|
||
.nav-cta { display: none; }
|
||
footer { flex-direction: column; text-align: center; }
|
||
.f-links { justify-content: center; }
|
||
}
|
||
@media (max-width: 640px) {
|
||
.gallery-grid { grid-template-columns: repeat(2, 1fr); }
|
||
.fac-grid { grid-template-columns: 1fr; }
|
||
.about-stats { grid-template-columns: repeat(3, 1fr); }
|
||
}
|
||
@media (max-width: 440px) {
|
||
.gallery-grid { grid-template-columns: 1fr; }
|
||
.about-stats { grid-template-columns: 1fr 1fr; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- NAV -->
|
||
<nav id="top-nav">
|
||
<div class="nav-logo">Станция Сосновая</div>
|
||
<ul class="nav-links">
|
||
<li><a href="#about">Об усадьбе</a></li>
|
||
<li><a href="#gallery">Галерея</a></li>
|
||
<li><a href="#facilities">Удобства</a></li>
|
||
<li><a href="#pricing">Цены</a></li>
|
||
<li><a href="#contacts">Контакты</a></li>
|
||
</ul>
|
||
<a href="#contacts" class="nav-cta">Забронировать</a>
|
||
</nav>
|
||
|
||
<!-- HERO -->
|
||
<section class="hero" id="home">
|
||
<div class="hero-content">
|
||
<span class="hero-badge">Переславль-Залесский · Ярославская область</span>
|
||
<h1>Станция Сосновая</h1>
|
||
<p class="hero-sub">Усадьба в сосновом бору на берегу Плещеева озера</p>
|
||
<a href="#pricing" class="btn-hero">Забронировать</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ABOUT -->
|
||
<section id="about">
|
||
<div class="inner">
|
||
<div class="about-grid">
|
||
<div class="about-img-block">
|
||
<svg class="ph-icon" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="#3d6b3d" stroke-width="1.4">
|
||
<rect x="3" y="5" width="18" height="14" rx="2"/>
|
||
<circle cx="12" cy="12" r="3.5"/>
|
||
<path d="M3 9h2M19 9h2" stroke-linecap="round"/>
|
||
</svg>
|
||
<span>Главное фото усадьбы</span>
|
||
</div>
|
||
<div class="about-text">
|
||
<span class="eyebrow">Об усадьбе</span>
|
||
<h2>Тишина леса,<br>дыхание воды</h2>
|
||
<div class="rule"></div>
|
||
<p>
|
||
<strong>Станция Сосновая</strong> — уединённое поместье в окружении вековых сосен,
|
||
в нескольких минутах пешком от берега Плещеева озера.
|
||
Здесь нет городского шума — только треск костра, пение птиц и запах смолы.
|
||
</p>
|
||
<p>
|
||
Усадьба подходит для семейного отдыха, дружеских выездов и тихих выходных вдали от суеты.
|
||
Природа Переславля известна особой атмосферой: чистый воздух,
|
||
нетронутый лес, исторические окрестности.
|
||
</p>
|
||
<p>
|
||
Мы позаботились о том, чтобы вам было <strong>уютно в любое время года</strong> —
|
||
весной, летом, осенью и зимой усадьба живёт своей особенной красотой.
|
||
</p>
|
||
<div class="about-stats">
|
||
<div class="stat">
|
||
<div class="stat-n">25</div>
|
||
<div class="stat-l">соток леса</div>
|
||
</div>
|
||
<div class="stat">
|
||
<div class="stat-n">5</div>
|
||
<div class="stat-l">мин до озера</div>
|
||
</div>
|
||
<div class="stat">
|
||
<div class="stat-n">140</div>
|
||
<div class="stat-l">км от Москвы</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- GALLERY -->
|
||
<section id="gallery">
|
||
<div class="inner">
|
||
<span class="eyebrow">Фотогалерея</span>
|
||
<h2>Посмотрите сами</h2>
|
||
<div class="rule"></div>
|
||
<div class="gallery-grid">
|
||
|
||
<div class="ph-box">
|
||
<svg class="ph-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4">
|
||
<rect x="3" y="5" width="18" height="14" rx="2"/>
|
||
<circle cx="12" cy="12" r="3.5"/>
|
||
<path d="M3 9h2M19 9h2" stroke-linecap="round"/>
|
||
</svg>
|
||
Фото 1
|
||
</div>
|
||
|
||
<div class="ph-box">
|
||
<svg class="ph-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4">
|
||
<rect x="3" y="5" width="18" height="14" rx="2"/>
|
||
<circle cx="12" cy="12" r="3.5"/>
|
||
<path d="M3 9h2M19 9h2" stroke-linecap="round"/>
|
||
</svg>
|
||
Фото 2
|
||
</div>
|
||
|
||
<div class="ph-box">
|
||
<svg class="ph-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4">
|
||
<rect x="3" y="5" width="18" height="14" rx="2"/>
|
||
<circle cx="12" cy="12" r="3.5"/>
|
||
<path d="M3 9h2M19 9h2" stroke-linecap="round"/>
|
||
</svg>
|
||
Фото 3
|
||
</div>
|
||
|
||
<div class="ph-box">
|
||
<svg class="ph-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4">
|
||
<rect x="3" y="5" width="18" height="14" rx="2"/>
|
||
<circle cx="12" cy="12" r="3.5"/>
|
||
<path d="M3 9h2M19 9h2" stroke-linecap="round"/>
|
||
</svg>
|
||
Фото 4
|
||
</div>
|
||
|
||
<div class="ph-box">
|
||
<svg class="ph-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4">
|
||
<rect x="3" y="5" width="18" height="14" rx="2"/>
|
||
<circle cx="12" cy="12" r="3.5"/>
|
||
<path d="M3 9h2M19 9h2" stroke-linecap="round"/>
|
||
</svg>
|
||
Фото 5
|
||
</div>
|
||
|
||
<div class="ph-box">
|
||
<svg class="ph-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4">
|
||
<rect x="3" y="5" width="18" height="14" rx="2"/>
|
||
<circle cx="12" cy="12" r="3.5"/>
|
||
<path d="M3 9h2M19 9h2" stroke-linecap="round"/>
|
||
</svg>
|
||
Фото 6
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FACILITIES -->
|
||
<section id="facilities">
|
||
<div class="inner">
|
||
<span class="eyebrow">Инфраструктура</span>
|
||
<h2>Всё для настоящего отдыха</h2>
|
||
<div class="rule"></div>
|
||
<div class="fac-grid">
|
||
|
||
<div class="fac-card">
|
||
<div class="fac-photo">
|
||
<svg class="ph-icon" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4">
|
||
<path d="M3 17V9l9-6 9 6v8M9 17v-5h6v5"/>
|
||
<path d="M12 3v3"/>
|
||
</svg>
|
||
Фото объекта
|
||
</div>
|
||
<div class="fac-body">
|
||
<h3>Беседка</h3>
|
||
<p>Просторная деревянная беседка на 14 человек у кромки леса. Идеально для долгих вечеров под звуки природы.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fac-card">
|
||
<div class="fac-photo">
|
||
<svg class="ph-icon" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4">
|
||
<rect x="5" y="11" width="14" height="6" rx="1"/>
|
||
<path d="M8 11V8a4 4 0 0 1 8 0v3"/>
|
||
<path d="M12 17v3M9 20h6"/>
|
||
</svg>
|
||
Фото объекта
|
||
</div>
|
||
<div class="fac-body">
|
||
<h3>Барбекю</h3>
|
||
<p>Мангальная зона с кирпичным барбекю, рабочим столом и разделочной поверхностью. Дрова и принадлежности — в наличии.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fac-card">
|
||
<div class="fac-photo">
|
||
<svg class="ph-icon" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4">
|
||
<circle cx="9" cy="19" r="2"/><circle cx="18" cy="19" r="2"/>
|
||
<path d="M1 1h4l2.68 12.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/>
|
||
</svg>
|
||
Фото объекта
|
||
</div>
|
||
<div class="fac-body">
|
||
<h3>Детская</h3>
|
||
<p>Площадка с горкой, качелями и песочницей. Мягкое безопасное покрытие, хорошо видна из беседки.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fac-card">
|
||
<div class="fac-photo">
|
||
<svg class="ph-icon" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4">
|
||
<rect x="1" y="3" width="22" height="16" rx="2"/>
|
||
<path d="M1 10h22"/>
|
||
<path d="M7 3v7M17 3v7"/>
|
||
</svg>
|
||
Фото объекта
|
||
</div>
|
||
<div class="fac-body">
|
||
<h3>Парковка</h3>
|
||
<p>Охраняемая стоянка на 6 автомобилей с удобным въездом и ночным освещением.</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- PRICING -->
|
||
<section id="pricing">
|
||
<div class="inner">
|
||
<span class="eyebrow">Стоимость аренды</span>
|
||
<h2>Тарифы</h2>
|
||
<div class="rule"></div>
|
||
<div class="price-grid">
|
||
|
||
<div class="pc">
|
||
<p class="pc-period">Будний день</p>
|
||
<div class="pc-amount"><sup>₽</sup>3 500</div>
|
||
<p class="pc-unit">за сутки · Пн–Чт</p>
|
||
<ul class="pc-feats">
|
||
<li>Весь участок в аренду</li>
|
||
<li>Беседка включена</li>
|
||
<li>Парковка включена</li>
|
||
<li>Дрова — 500 ₽/вязанка</li>
|
||
</ul>
|
||
<a href="#contacts" class="pc-btn">Забронировать</a>
|
||
</div>
|
||
|
||
<div class="pc feat">
|
||
<p class="pc-period">Выходной день</p>
|
||
<div class="pc-amount"><sup>₽</sup>5 500</div>
|
||
<p class="pc-unit">за сутки · Пт–Вс</p>
|
||
<ul class="pc-feats">
|
||
<li>Весь участок в аренду</li>
|
||
<li>Беседка включена</li>
|
||
<li>Парковка включена</li>
|
||
<li>1 вязанка дров в подарок</li>
|
||
<li>Приоритетная поддержка</li>
|
||
</ul>
|
||
<a href="#contacts" class="pc-btn">Забронировать</a>
|
||
</div>
|
||
|
||
<div class="pc">
|
||
<p class="pc-period">Неделя</p>
|
||
<div class="pc-amount"><sup>₽</sup>28 000</div>
|
||
<p class="pc-unit">за 7 суток · скидка ~28%</p>
|
||
<ul class="pc-feats">
|
||
<li>Весь участок в аренду</li>
|
||
<li>Беседка включена</li>
|
||
<li>Парковка включена</li>
|
||
<li>5 вязанок дров в подарок</li>
|
||
<li>Уборка включена</li>
|
||
</ul>
|
||
<a href="#contacts" class="pc-btn">Забронировать</a>
|
||
</div>
|
||
|
||
</div>
|
||
<p class="price-note">Минимальный срок — 1 сутки. Залог 2 000 ₽ возвращается при выезде. Оплата наличными или переводом.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CONTACTS -->
|
||
<section id="contacts">
|
||
<div class="inner">
|
||
<span class="eyebrow">Контакты</span>
|
||
<h2>Свяжитесь с нами</h2>
|
||
<div class="rule"></div>
|
||
<div class="contact-grid">
|
||
|
||
<div>
|
||
<div class="ci">
|
||
<div class="ci-icon">
|
||
<svg viewBox="0 0 24 24"><path d="M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1L6.6 10.8z"/></svg>
|
||
</div>
|
||
<div>
|
||
<div class="ci-lbl">Телефон / WhatsApp</div>
|
||
<div class="ci-val"><a href="tel:+74951234567">+7 (495) XXX-XX-XX</a></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ci">
|
||
<div class="ci-icon">
|
||
<svg viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>
|
||
</div>
|
||
<div>
|
||
<div class="ci-lbl">Электронная почта</div>
|
||
<div class="ci-val"><a href="mailto:info@sosnovaya.ru">info@sosnovaya.ru</a></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ci">
|
||
<div class="ci-icon">
|
||
<svg viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>
|
||
</div>
|
||
<div>
|
||
<div class="ci-lbl">Адрес</div>
|
||
<div class="ci-val">Ярославская обл., Переславский р-н,<br>д. Сосновка, ул. Лесная, 4</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ci">
|
||
<div class="ci-icon">
|
||
<svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20A10 10 0 0 0 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
|
||
</div>
|
||
<div>
|
||
<div class="ci-lbl">Режим работы</div>
|
||
<div class="ci-val">Ежедневно, 9:00 — 21:00</div>
|
||
</div>
|
||
</div>
|
||
|
||
<a href="tel:+74951234567" class="btn-call">Позвонить сейчас</a>
|
||
</div>
|
||
|
||
<div class="map-ph">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="#3d6b3d" stroke-width="1.2">
|
||
<path d="M3 7l6-3 6 3 6-3v13l-6 3-6-3-6 3V7z"/>
|
||
<path d="M9 4v13M15 7v13"/>
|
||
</svg>
|
||
Карта · Переславль-Залесский
|
||
<small>Место для встраивания Яндекс.Карт</small>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FOOTER -->
|
||
<footer>
|
||
<div>
|
||
<div class="f-brand">Станция Сосновая</div>
|
||
<div class="f-tag">Усадьба в лесу · Переславль-Залесский</div>
|
||
</div>
|
||
<div class="f-links">
|
||
<a href="#about">Об усадьбе</a>
|
||
<a href="#gallery">Галерея</a>
|
||
<a href="#facilities">Удобства</a>
|
||
<a href="#pricing">Цены</a>
|
||
<a href="#contacts">Контакты</a>
|
||
</div>
|
||
<div class="f-copy">© 2026 Станция Сосновая. Все права защищены.</div>
|
||
</footer>
|
||
|
||
<script>
|
||
const nav = document.getElementById('top-nav');
|
||
window.addEventListener('scroll', () => {
|
||
nav.style.background = window.scrollY > 50
|
||
? 'rgba(10,16,10,.97)'
|
||
: 'rgba(10,16,10,.9)';
|
||
}, { passive: true });
|
||
</script>
|
||
</body>
|
||
</html>
|