1530 lines
46 KiB
HTML
1530 lines
46 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>
|
||
<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,700;0,900;1,400&family=Caveat:wght@500;700&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet" />
|
||
<style>
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
:root {
|
||
--amber: #d4a373;
|
||
--brown: #4a3728;
|
||
--green: #3a5f3a;
|
||
--linen: #f5f1e8;
|
||
--dark-amber: #b8895a;
|
||
--light-brown: #6b4f3a;
|
||
--cream: #fdf8ef;
|
||
}
|
||
|
||
html { scroll-behavior: smooth; }
|
||
|
||
body {
|
||
font-family: 'Roboto', sans-serif;
|
||
background: var(--linen);
|
||
color: var(--brown);
|
||
font-size: 16px;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
/* ── WOOD TEXTURE UTILITY ── */
|
||
.wood-bg {
|
||
background-color: var(--brown);
|
||
background-image:
|
||
repeating-linear-gradient(
|
||
92deg,
|
||
transparent,
|
||
transparent 2px,
|
||
rgba(255,255,255,.03) 2px,
|
||
rgba(255,255,255,.03) 4px
|
||
),
|
||
repeating-linear-gradient(
|
||
180deg,
|
||
transparent,
|
||
transparent 40px,
|
||
rgba(0,0,0,.06) 40px,
|
||
rgba(0,0,0,.06) 41px
|
||
);
|
||
}
|
||
|
||
/* ── NAV ── */
|
||
nav {
|
||
position: fixed;
|
||
top: 0; left: 0; right: 0;
|
||
z-index: 100;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 14px 48px;
|
||
background: rgba(74, 55, 40, .93);
|
||
backdrop-filter: blur(6px);
|
||
border-bottom: 2px solid var(--amber);
|
||
}
|
||
|
||
.nav-logo {
|
||
font-family: 'Caveat', cursive;
|
||
font-size: 1.7rem;
|
||
font-weight: 700;
|
||
color: var(--amber);
|
||
text-decoration: none;
|
||
letter-spacing: .5px;
|
||
}
|
||
|
||
.nav-logo span { color: var(--linen); }
|
||
|
||
nav ul {
|
||
list-style: none;
|
||
display: flex;
|
||
gap: 32px;
|
||
}
|
||
|
||
nav ul a {
|
||
font-family: 'Roboto', sans-serif;
|
||
font-weight: 400;
|
||
font-size: .9rem;
|
||
letter-spacing: 1px;
|
||
text-transform: uppercase;
|
||
color: var(--linen);
|
||
text-decoration: none;
|
||
opacity: .85;
|
||
transition: opacity .2s, color .2s;
|
||
}
|
||
|
||
nav ul a:hover { opacity: 1; color: var(--amber); }
|
||
|
||
/* ── HERO ── */
|
||
#hero {
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
padding: 120px 24px 80px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
background-color: var(--brown);
|
||
background-image:
|
||
radial-gradient(ellipse 120% 80% at 50% 40%, rgba(58, 95, 58, .55) 0%, transparent 70%),
|
||
repeating-linear-gradient(
|
||
88deg,
|
||
transparent,
|
||
transparent 3px,
|
||
rgba(255,255,255,.025) 3px,
|
||
rgba(255,255,255,.025) 6px
|
||
),
|
||
repeating-linear-gradient(
|
||
180deg,
|
||
transparent,
|
||
transparent 60px,
|
||
rgba(0,0,0,.07) 60px,
|
||
rgba(0,0,0,.07) 62px
|
||
);
|
||
}
|
||
|
||
/* pine silhouette strip at bottom */
|
||
#hero::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0; left: 0; right: 0;
|
||
height: 120px;
|
||
background: var(--linen);
|
||
clip-path: polygon(
|
||
0% 100%, 0% 60%,
|
||
4% 40%, 6% 60%, 8% 20%, 10% 60%,
|
||
13% 35%, 15% 60%, 17% 10%, 19% 60%,
|
||
22% 30%, 24% 60%, 26% 45%, 28% 60%,
|
||
31% 15%, 33% 60%, 35% 40%, 37% 60%,
|
||
40% 25%, 42% 60%, 44% 38%, 46% 60%,
|
||
49% 5%, 51% 60%, 53% 30%, 55% 60%,
|
||
58% 20%, 60% 60%, 62% 42%, 64% 60%,
|
||
67% 12%, 69% 60%, 71% 35%, 73% 60%,
|
||
76% 28%, 78% 60%, 80% 18%, 82% 60%,
|
||
85% 38%, 87% 60%, 89% 22%, 91% 60%,
|
||
94% 32%, 96% 60%, 98% 45%, 100% 60%,
|
||
100% 100%
|
||
);
|
||
}
|
||
|
||
.hero-badge {
|
||
display: inline-block;
|
||
font-family: 'Caveat', cursive;
|
||
font-size: 1rem;
|
||
font-weight: 500;
|
||
color: var(--amber);
|
||
border: 1px solid rgba(212, 163, 115, .5);
|
||
border-radius: 40px;
|
||
padding: 5px 18px;
|
||
letter-spacing: 2px;
|
||
text-transform: uppercase;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.hero-title {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: clamp(3rem, 8vw, 6.5rem);
|
||
font-weight: 900;
|
||
color: var(--linen);
|
||
line-height: 1.05;
|
||
margin-bottom: 20px;
|
||
text-shadow: 0 4px 24px rgba(0,0,0,.5);
|
||
}
|
||
|
||
.hero-title em {
|
||
font-style: italic;
|
||
color: var(--amber);
|
||
}
|
||
|
||
.hero-sub {
|
||
font-family: 'Roboto', sans-serif;
|
||
font-weight: 300;
|
||
font-size: 1.15rem;
|
||
color: rgba(245, 241, 232, .85);
|
||
max-width: 520px;
|
||
margin: 0 auto 40px;
|
||
}
|
||
|
||
.btn {
|
||
display: inline-block;
|
||
font-family: 'Roboto', sans-serif;
|
||
font-weight: 500;
|
||
font-size: .95rem;
|
||
letter-spacing: 1.5px;
|
||
text-transform: uppercase;
|
||
text-decoration: none;
|
||
padding: 16px 42px;
|
||
border-radius: 4px;
|
||
transition: transform .2s, box-shadow .2s, background .2s;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: var(--amber);
|
||
color: var(--brown);
|
||
box-shadow: 0 4px 20px rgba(212, 163, 115, .45);
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background: var(--dark-amber);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 8px 28px rgba(212, 163, 115, .55);
|
||
}
|
||
|
||
.btn-outline {
|
||
border: 2px solid var(--amber);
|
||
color: var(--amber);
|
||
margin-left: 16px;
|
||
}
|
||
|
||
.btn-outline:hover {
|
||
background: rgba(212, 163, 115, .12);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.hero-scroll {
|
||
position: absolute;
|
||
bottom: 140px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 6px;
|
||
color: rgba(245, 241, 232, .5);
|
||
font-size: .75rem;
|
||
letter-spacing: 2px;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.hero-scroll::after {
|
||
content: '';
|
||
display: block;
|
||
width: 1px;
|
||
height: 40px;
|
||
background: linear-gradient(to bottom, rgba(245,241,232,.5), transparent);
|
||
}
|
||
|
||
/* ── SECTION COMMONS ── */
|
||
section { padding: 96px 24px; }
|
||
|
||
.section-inner {
|
||
max-width: 1160px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.section-label {
|
||
font-family: 'Caveat', cursive;
|
||
font-size: 1.05rem;
|
||
font-weight: 500;
|
||
letter-spacing: 3px;
|
||
text-transform: uppercase;
|
||
color: var(--dark-amber);
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.section-title {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: clamp(2rem, 4vw, 3rem);
|
||
font-weight: 700;
|
||
color: var(--brown);
|
||
line-height: 1.2;
|
||
margin-bottom: 18px;
|
||
}
|
||
|
||
.section-title em { font-style: italic; color: var(--green); }
|
||
|
||
.section-desc {
|
||
font-weight: 300;
|
||
font-size: 1.05rem;
|
||
color: var(--light-brown);
|
||
max-width: 560px;
|
||
margin-bottom: 56px;
|
||
}
|
||
|
||
/* ── ABOUT STRIP ── */
|
||
#about {
|
||
background: var(--cream);
|
||
padding: 72px 24px;
|
||
}
|
||
|
||
.about-grid {
|
||
max-width: 1160px;
|
||
margin: 0 auto;
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 64px;
|
||
align-items: center;
|
||
}
|
||
|
||
.about-text h2 {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: clamp(1.8rem, 3vw, 2.6rem);
|
||
font-weight: 700;
|
||
color: var(--brown);
|
||
margin-bottom: 20px;
|
||
line-height: 1.25;
|
||
}
|
||
|
||
.about-text p {
|
||
font-weight: 300;
|
||
color: var(--light-brown);
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.about-features {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 20px;
|
||
margin-top: 32px;
|
||
}
|
||
|
||
.about-feat {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 12px;
|
||
}
|
||
|
||
.feat-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 8px;
|
||
background: var(--amber);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.2rem;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.feat-text strong {
|
||
display: block;
|
||
font-weight: 500;
|
||
color: var(--brown);
|
||
font-size: .95rem;
|
||
}
|
||
|
||
.feat-text span {
|
||
font-size: .82rem;
|
||
color: var(--light-brown);
|
||
}
|
||
|
||
.about-image-block {
|
||
position: relative;
|
||
}
|
||
|
||
.about-img-placeholder {
|
||
width: 100%;
|
||
aspect-ratio: 4/3;
|
||
background: linear-gradient(135deg, #c9944f 0%, #8b5e3c 50%, #4a3728 100%);
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: rgba(245,241,232,.6);
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: 1.2rem;
|
||
font-style: italic;
|
||
box-shadow: 8px 8px 0 var(--amber);
|
||
}
|
||
|
||
.about-badge {
|
||
position: absolute;
|
||
bottom: -20px;
|
||
left: -20px;
|
||
background: var(--green);
|
||
color: var(--linen);
|
||
border-radius: 10px;
|
||
padding: 18px 24px;
|
||
box-shadow: 0 6px 24px rgba(58,95,58,.35);
|
||
}
|
||
|
||
.about-badge .num {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: 2rem;
|
||
font-weight: 700;
|
||
line-height: 1;
|
||
}
|
||
|
||
.about-badge .label {
|
||
font-size: .8rem;
|
||
opacity: .85;
|
||
}
|
||
|
||
/* ── GALLERY ── */
|
||
#gallery { background: var(--linen); }
|
||
|
||
.gallery-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 18px;
|
||
}
|
||
|
||
.gallery-item {
|
||
position: relative;
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.gallery-item:nth-child(1) { grid-column: span 2; }
|
||
|
||
.gallery-placeholder {
|
||
width: 100%;
|
||
aspect-ratio: 4/3;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 10px;
|
||
font-family: 'Roboto', sans-serif;
|
||
font-size: .85rem;
|
||
font-weight: 500;
|
||
letter-spacing: 1px;
|
||
text-transform: uppercase;
|
||
transition: transform .3s;
|
||
}
|
||
|
||
.gallery-item:nth-child(1) .gallery-placeholder { aspect-ratio: 16/7; }
|
||
|
||
.gallery-item:hover .gallery-placeholder { transform: scale(1.04); }
|
||
|
||
.gallery-placeholder .ph-icon {
|
||
width: 44px;
|
||
height: 44px;
|
||
border-radius: 50%;
|
||
border: 2px solid rgba(245,241,232,.5);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.3rem;
|
||
}
|
||
|
||
.ph-1 { background: linear-gradient(135deg, #d4a373 0%, #8b5e3c 100%); color: rgba(245,241,232,.85); }
|
||
.ph-2 { background: linear-gradient(135deg, #c9944f 0%, #6b4030 100%); color: rgba(245,241,232,.85); }
|
||
.ph-3 { background: linear-gradient(135deg, #b87c45 0%, #5a3220 100%); color: rgba(245,241,232,.85); }
|
||
.ph-4 { background: linear-gradient(135deg, #a06835 0%, #4a2e18 100%); color: rgba(245,241,232,.85); }
|
||
.ph-5 { background: linear-gradient(135deg, #3a5f3a 0%, #2a4020 100%); color: rgba(245,241,232,.85); }
|
||
.ph-6 { background: linear-gradient(135deg, #4a7a4a 0%, #3a5f3a 100%); color: rgba(245,241,232,.85); }
|
||
|
||
.gallery-overlay {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: linear-gradient(to top, rgba(74,55,40,.7) 0%, transparent 50%);
|
||
opacity: 0;
|
||
transition: opacity .3s;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
padding: 20px;
|
||
}
|
||
|
||
.gallery-item:hover .gallery-overlay { opacity: 1; }
|
||
|
||
.gallery-overlay span {
|
||
font-family: 'Playfair Display', serif;
|
||
font-style: italic;
|
||
color: var(--linen);
|
||
font-size: 1rem;
|
||
}
|
||
|
||
/* ── FACILITIES ── */
|
||
#facilities {
|
||
background: var(--brown);
|
||
background-image:
|
||
repeating-linear-gradient(
|
||
90deg,
|
||
transparent,
|
||
transparent 4px,
|
||
rgba(255,255,255,.02) 4px,
|
||
rgba(255,255,255,.02) 8px
|
||
),
|
||
repeating-linear-gradient(
|
||
180deg,
|
||
transparent,
|
||
transparent 50px,
|
||
rgba(0,0,0,.05) 50px,
|
||
rgba(0,0,0,.05) 52px
|
||
);
|
||
}
|
||
|
||
#facilities .section-title { color: var(--linen); }
|
||
#facilities .section-desc { color: rgba(245,241,232,.7); }
|
||
#facilities .section-label { color: var(--amber); }
|
||
|
||
.facilities-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 24px;
|
||
}
|
||
|
||
.facility-card {
|
||
background: rgba(245,241,232,.07);
|
||
border: 1px solid rgba(212,163,115,.25);
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
transition: transform .25s, box-shadow .25s;
|
||
}
|
||
|
||
.facility-card:hover {
|
||
transform: translateY(-6px);
|
||
box-shadow: 0 16px 40px rgba(0,0,0,.35);
|
||
}
|
||
|
||
.facility-img {
|
||
width: 100%;
|
||
aspect-ratio: 4/3;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 2.4rem;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.fac-1 { background: linear-gradient(145deg, #c9944f, #7a4a28); }
|
||
.fac-2 { background: linear-gradient(145deg, #8b5e3c, #4a2e18); }
|
||
.fac-3 { background: linear-gradient(145deg, #5a7a5a, #3a5030); }
|
||
.fac-4 { background: linear-gradient(145deg, #6b4f3a, #3a2818); }
|
||
|
||
.facility-img::after {
|
||
content: attr(data-label);
|
||
position: absolute;
|
||
bottom: 0; left: 0; right: 0;
|
||
font-family: 'Roboto', sans-serif;
|
||
font-size: .7rem;
|
||
letter-spacing: 1.5px;
|
||
text-transform: uppercase;
|
||
color: rgba(245,241,232,.5);
|
||
text-align: center;
|
||
padding: 8px;
|
||
background: linear-gradient(to top, rgba(0,0,0,.4), transparent);
|
||
}
|
||
|
||
.facility-body {
|
||
padding: 20px;
|
||
}
|
||
|
||
.facility-body h3 {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: 1.15rem;
|
||
font-weight: 700;
|
||
color: var(--amber);
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.facility-body p {
|
||
font-size: .88rem;
|
||
font-weight: 300;
|
||
color: rgba(245,241,232,.7);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* ── PRICING ── */
|
||
#pricing { background: var(--cream); }
|
||
|
||
.pricing-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 28px;
|
||
}
|
||
|
||
.price-card {
|
||
background: var(--linen);
|
||
border: 2px solid transparent;
|
||
border-radius: 14px;
|
||
padding: 40px 32px;
|
||
text-align: center;
|
||
position: relative;
|
||
box-shadow: 0 4px 20px rgba(74,55,40,.1);
|
||
transition: transform .25s, box-shadow .25s;
|
||
}
|
||
|
||
.price-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 12px 36px rgba(74,55,40,.18);
|
||
}
|
||
|
||
.price-card.featured {
|
||
background: var(--brown);
|
||
border-color: var(--amber);
|
||
color: var(--linen);
|
||
transform: scale(1.04);
|
||
box-shadow: 0 12px 40px rgba(74,55,40,.35);
|
||
}
|
||
|
||
.price-card.featured:hover {
|
||
transform: scale(1.04) translateY(-4px);
|
||
}
|
||
|
||
.price-badge {
|
||
position: absolute;
|
||
top: -14px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: var(--amber);
|
||
color: var(--brown);
|
||
font-family: 'Roboto', sans-serif;
|
||
font-size: .75rem;
|
||
font-weight: 500;
|
||
letter-spacing: 1.5px;
|
||
text-transform: uppercase;
|
||
padding: 5px 18px;
|
||
border-radius: 20px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.price-period {
|
||
font-family: 'Caveat', cursive;
|
||
font-size: 1.1rem;
|
||
font-weight: 500;
|
||
letter-spacing: 2px;
|
||
text-transform: uppercase;
|
||
color: var(--dark-amber);
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.price-card.featured .price-period { color: var(--amber); }
|
||
|
||
.price-amount {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: 3rem;
|
||
font-weight: 700;
|
||
color: var(--brown);
|
||
line-height: 1;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.price-card.featured .price-amount { color: var(--linen); }
|
||
|
||
.price-unit {
|
||
font-size: .85rem;
|
||
color: var(--light-brown);
|
||
margin-bottom: 28px;
|
||
}
|
||
|
||
.price-card.featured .price-unit { color: rgba(245,241,232,.65); }
|
||
|
||
.price-list {
|
||
list-style: none;
|
||
text-align: left;
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.price-list li {
|
||
font-size: .9rem;
|
||
font-weight: 300;
|
||
color: var(--light-brown);
|
||
padding: 8px 0;
|
||
border-bottom: 1px solid rgba(74,55,40,.1);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.price-card.featured .price-list li { color: rgba(245,241,232,.8); border-color: rgba(245,241,232,.12); }
|
||
|
||
.price-list li::before {
|
||
content: '✦';
|
||
color: var(--amber);
|
||
font-size: .6rem;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.btn-brown {
|
||
background: var(--brown);
|
||
color: var(--linen);
|
||
}
|
||
|
||
.btn-brown:hover {
|
||
background: var(--light-brown);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 6px 20px rgba(74,55,40,.3);
|
||
}
|
||
|
||
.btn-amber {
|
||
background: var(--amber);
|
||
color: var(--brown);
|
||
box-shadow: 0 4px 20px rgba(212,163,115,.4);
|
||
}
|
||
|
||
.btn-amber:hover {
|
||
background: var(--dark-amber);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 8px 28px rgba(212,163,115,.5);
|
||
}
|
||
|
||
.price-note {
|
||
text-align: center;
|
||
margin-top: 36px;
|
||
font-size: .85rem;
|
||
font-weight: 300;
|
||
color: var(--light-brown);
|
||
}
|
||
|
||
.price-note strong { color: var(--brown); font-weight: 500; }
|
||
|
||
/* ── TESTIMONIALS STRIP ── */
|
||
#testimonials {
|
||
background: var(--green);
|
||
padding: 72px 24px;
|
||
}
|
||
|
||
.testimonials-inner {
|
||
max-width: 1000px;
|
||
margin: 0 auto;
|
||
text-align: center;
|
||
}
|
||
|
||
.testimonials-inner .section-label { color: rgba(245,241,232,.65); }
|
||
.testimonials-inner .section-title { color: var(--linen); margin-bottom: 48px; }
|
||
|
||
.testimonials-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 24px;
|
||
}
|
||
|
||
.testimonial {
|
||
background: rgba(245,241,232,.1);
|
||
border: 1px solid rgba(245,241,232,.15);
|
||
border-radius: 10px;
|
||
padding: 28px;
|
||
text-align: left;
|
||
}
|
||
|
||
.testimonial-stars {
|
||
color: var(--amber);
|
||
font-size: .9rem;
|
||
margin-bottom: 12px;
|
||
letter-spacing: 2px;
|
||
}
|
||
|
||
.testimonial q {
|
||
font-family: 'Playfair Display', serif;
|
||
font-style: italic;
|
||
font-size: 1rem;
|
||
color: rgba(245,241,232,.9);
|
||
line-height: 1.65;
|
||
display: block;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.testimonial-author {
|
||
font-size: .8rem;
|
||
font-weight: 500;
|
||
letter-spacing: 1px;
|
||
color: var(--amber);
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
/* ── CONTACTS ── */
|
||
#contacts { background: var(--linen); }
|
||
|
||
.contacts-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1.4fr;
|
||
gap: 64px;
|
||
align-items: start;
|
||
}
|
||
|
||
.contact-info h2 {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: clamp(1.8rem, 3vw, 2.4rem);
|
||
font-weight: 700;
|
||
color: var(--brown);
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.contact-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 16px;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.contact-icon {
|
||
width: 46px;
|
||
height: 46px;
|
||
border-radius: 10px;
|
||
background: var(--amber);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.2rem;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.contact-item strong {
|
||
display: block;
|
||
font-weight: 500;
|
||
color: var(--brown);
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.contact-item span {
|
||
font-size: .9rem;
|
||
font-weight: 300;
|
||
color: var(--light-brown);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.contact-item a {
|
||
color: var(--brown);
|
||
text-decoration: none;
|
||
font-weight: 500;
|
||
font-size: 1.05rem;
|
||
transition: color .2s;
|
||
}
|
||
|
||
.contact-item a:hover { color: var(--dark-amber); }
|
||
|
||
.contact-form {
|
||
background: var(--cream);
|
||
border: 1px solid rgba(212,163,115,.35);
|
||
border-radius: 14px;
|
||
padding: 40px;
|
||
}
|
||
|
||
.contact-form h3 {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: 1.5rem;
|
||
font-weight: 700;
|
||
color: var(--brown);
|
||
margin-bottom: 28px;
|
||
}
|
||
|
||
.form-row {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 16px;
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 18px;
|
||
}
|
||
|
||
.form-group label {
|
||
display: block;
|
||
font-size: .8rem;
|
||
font-weight: 500;
|
||
letter-spacing: 1px;
|
||
text-transform: uppercase;
|
||
color: var(--light-brown);
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.form-group input,
|
||
.form-group textarea,
|
||
.form-group select {
|
||
width: 100%;
|
||
padding: 12px 16px;
|
||
background: var(--linen);
|
||
border: 1.5px solid rgba(212,163,115,.4);
|
||
border-radius: 6px;
|
||
font-family: 'Roboto', sans-serif;
|
||
font-size: .95rem;
|
||
color: var(--brown);
|
||
outline: none;
|
||
transition: border-color .2s;
|
||
}
|
||
|
||
.form-group input:focus,
|
||
.form-group textarea:focus,
|
||
.form-group select:focus {
|
||
border-color: var(--amber);
|
||
}
|
||
|
||
.form-group textarea { min-height: 100px; resize: vertical; }
|
||
|
||
/* ── MAP ── */
|
||
.map-placeholder {
|
||
width: 100%;
|
||
border-radius: 14px;
|
||
overflow: hidden;
|
||
aspect-ratio: 16/9;
|
||
background: linear-gradient(135deg, #4a6a4a 0%, #3a5030 40%, #2a3820 100%);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 12px;
|
||
color: rgba(245,241,232,.7);
|
||
border: 1px solid rgba(212,163,115,.2);
|
||
margin-top: 40px;
|
||
}
|
||
|
||
.map-pin {
|
||
width: 52px;
|
||
height: 52px;
|
||
background: var(--amber);
|
||
border-radius: 50% 50% 50% 0;
|
||
transform: rotate(-45deg);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 4px 16px rgba(0,0,0,.3);
|
||
}
|
||
|
||
.map-pin::after {
|
||
content: '🌲';
|
||
display: block;
|
||
transform: rotate(45deg);
|
||
font-size: 1.3rem;
|
||
}
|
||
|
||
.map-placeholder p {
|
||
font-family: 'Playfair Display', serif;
|
||
font-style: italic;
|
||
font-size: 1.05rem;
|
||
}
|
||
|
||
.map-placeholder span {
|
||
font-size: .8rem;
|
||
letter-spacing: 1.5px;
|
||
text-transform: uppercase;
|
||
opacity: .6;
|
||
}
|
||
|
||
/* grid lines overlay */
|
||
.map-placeholder::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background:
|
||
repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(245,241,232,.06) 39px, rgba(245,241,232,.06) 40px),
|
||
repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(245,241,232,.06) 39px, rgba(245,241,232,.06) 40px);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.map-wrapper {
|
||
position: relative;
|
||
}
|
||
|
||
/* ── FOOTER ── */
|
||
footer {
|
||
background: var(--brown);
|
||
background-image:
|
||
repeating-linear-gradient(92deg, transparent, transparent 2px, rgba(255,255,255,.02) 2px, rgba(255,255,255,.02) 4px);
|
||
color: rgba(245,241,232,.7);
|
||
padding: 56px 24px 32px;
|
||
border-top: 3px solid var(--amber);
|
||
}
|
||
|
||
.footer-inner {
|
||
max-width: 1160px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.footer-top {
|
||
display: grid;
|
||
grid-template-columns: 1.5fr 1fr 1fr;
|
||
gap: 48px;
|
||
margin-bottom: 48px;
|
||
}
|
||
|
||
.footer-brand .nav-logo {
|
||
display: block;
|
||
font-size: 2rem;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.footer-brand p {
|
||
font-size: .88rem;
|
||
font-weight: 300;
|
||
line-height: 1.7;
|
||
max-width: 280px;
|
||
}
|
||
|
||
.footer-col h4 {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: 1.1rem;
|
||
font-weight: 700;
|
||
color: var(--amber);
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.footer-col ul { list-style: none; }
|
||
|
||
.footer-col ul li {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.footer-col ul a {
|
||
color: rgba(245,241,232,.65);
|
||
text-decoration: none;
|
||
font-size: .9rem;
|
||
font-weight: 300;
|
||
transition: color .2s;
|
||
}
|
||
|
||
.footer-col ul a:hover { color: var(--amber); }
|
||
|
||
.footer-bottom {
|
||
border-top: 1px solid rgba(245,241,232,.12);
|
||
padding-top: 28px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.footer-bottom p { font-size: .82rem; opacity: .5; }
|
||
|
||
.footer-socials {
|
||
display: flex;
|
||
gap: 14px;
|
||
}
|
||
|
||
.social-btn {
|
||
width: 38px;
|
||
height: 38px;
|
||
border-radius: 8px;
|
||
border: 1px solid rgba(245,241,232,.2);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1rem;
|
||
text-decoration: none;
|
||
transition: background .2s, border-color .2s;
|
||
}
|
||
|
||
.social-btn:hover {
|
||
background: rgba(212,163,115,.2);
|
||
border-color: var(--amber);
|
||
}
|
||
|
||
/* ── RESPONSIVE ── */
|
||
@media (max-width: 1024px) {
|
||
.facilities-grid { grid-template-columns: repeat(2, 1fr); }
|
||
.pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
|
||
.price-card.featured { transform: none; }
|
||
.price-card.featured:hover { transform: translateY(-4px); }
|
||
.footer-top { grid-template-columns: 1fr 1fr; }
|
||
.footer-brand { grid-column: span 2; }
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
nav { padding: 12px 20px; }
|
||
nav ul { display: none; }
|
||
.gallery-grid { grid-template-columns: 1fr 1fr; }
|
||
.gallery-item:nth-child(1) { grid-column: span 2; }
|
||
.about-grid,
|
||
.contacts-grid { grid-template-columns: 1fr; }
|
||
.testimonials-grid { grid-template-columns: 1fr; }
|
||
.footer-top { grid-template-columns: 1fr; }
|
||
.footer-brand { grid-column: auto; }
|
||
.form-row { grid-template-columns: 1fr; }
|
||
.hero-title { font-size: 2.8rem; }
|
||
.btn-outline { display: none; }
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
section { padding: 64px 16px; }
|
||
.gallery-grid { grid-template-columns: 1fr; }
|
||
.gallery-item:nth-child(1) { grid-column: auto; }
|
||
.facilities-grid { grid-template-columns: 1fr; }
|
||
.about-features { grid-template-columns: 1fr; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ═══════════════════ NAV ═══════════════════ -->
|
||
<nav>
|
||
<a href="#hero" class="nav-logo">Станция <span>Сосновая</span></a>
|
||
<ul>
|
||
<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>
|
||
</nav>
|
||
|
||
<!-- ═══════════════════ HERO ═══════════════════ -->
|
||
<section id="hero">
|
||
<div class="hero-badge">Переславль-Залесский · Природа · Отдых</div>
|
||
<h1 class="hero-title">
|
||
Станция<br /><em>Сосновая</em>
|
||
</h1>
|
||
<p class="hero-sub">
|
||
Уютная усадьба у озера в окружении вековых сосен.
|
||
Семейный отдых, живой огонь и лесная тишина — в двух часах от Москвы.
|
||
</p>
|
||
<div>
|
||
<a href="#contacts" class="btn btn-primary">Забронировать</a>
|
||
<a href="#gallery" class="btn btn-outline">Смотреть фото</a>
|
||
</div>
|
||
<div class="hero-scroll">прокрутить</div>
|
||
</section>
|
||
|
||
<!-- ═══════════════════ ABOUT ═══════════════════ -->
|
||
<section id="about">
|
||
<div class="about-grid">
|
||
<div class="about-text">
|
||
<p class="section-label">О Станции</p>
|
||
<h2>Место, где время<br />замедляется</h2>
|
||
<p>
|
||
Станция Сосновая — частная усадьба на берегу Плещеева озера,
|
||
окружённая густым сосновым бором. Здесь нет суеты большого города —
|
||
только запах смолы, пение птиц и треск дров в очаге.
|
||
</p>
|
||
<p>
|
||
Мы принимаем семьи и небольшие компании, которые ценят настоящий
|
||
отдых на природе: с баней, барбекю, вечерними кострами и утренней
|
||
рыбалкой прямо с берега.
|
||
</p>
|
||
<div class="about-features">
|
||
<div class="about-feat">
|
||
<div class="feat-icon">🌲</div>
|
||
<div class="feat-text">
|
||
<strong>Сосновый бор</strong>
|
||
<span>Прямо у порога</span>
|
||
</div>
|
||
</div>
|
||
<div class="about-feat">
|
||
<div class="feat-icon">🏖️</div>
|
||
<div class="feat-text">
|
||
<strong>Берег озера</strong>
|
||
<span>150 м от усадьбы</span>
|
||
</div>
|
||
</div>
|
||
<div class="about-feat">
|
||
<div class="feat-icon">🔥</div>
|
||
<div class="feat-text">
|
||
<strong>Баня и костёр</strong>
|
||
<span>Каждый вечер</span>
|
||
</div>
|
||
</div>
|
||
<div class="about-feat">
|
||
<div class="feat-icon">🚗</div>
|
||
<div class="feat-text">
|
||
<strong>2 часа от Москвы</strong>
|
||
<span>По трассе М8</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="about-image-block">
|
||
<div class="about-img-placeholder">Фото усадьбы</div>
|
||
<div class="about-badge">
|
||
<div class="num">10+</div>
|
||
<div class="label">лет принимаем гостей</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════════════════ GALLERY ═══════════════════ -->
|
||
<section id="gallery">
|
||
<div class="section-inner">
|
||
<p class="section-label">Фотогалерея</p>
|
||
<h2 class="section-title">Посмотрите <em>сами</em></h2>
|
||
<p class="section-desc">
|
||
Живые снимки усадьбы в разное время года — летние закаты,
|
||
осенний бор, зимний уют и весенние рассветы над озером.
|
||
</p>
|
||
<div class="gallery-grid">
|
||
|
||
<div class="gallery-item">
|
||
<div class="gallery-placeholder ph-1">
|
||
<div class="ph-icon">📸</div>
|
||
Фото 1
|
||
</div>
|
||
<div class="gallery-overlay"><span>Вид на усадьбу</span></div>
|
||
</div>
|
||
|
||
<div class="gallery-item">
|
||
<div class="gallery-placeholder ph-2">
|
||
<div class="ph-icon">📸</div>
|
||
Фото 2
|
||
</div>
|
||
<div class="gallery-overlay"><span>Сосновый лес</span></div>
|
||
</div>
|
||
|
||
<div class="gallery-item">
|
||
<div class="gallery-placeholder ph-3">
|
||
<div class="ph-icon">📸</div>
|
||
Фото 3
|
||
</div>
|
||
<div class="gallery-overlay"><span>Берег озера</span></div>
|
||
</div>
|
||
|
||
<div class="gallery-item">
|
||
<div class="gallery-placeholder ph-4">
|
||
<div class="ph-icon">📸</div>
|
||
Фото 4
|
||
</div>
|
||
<div class="gallery-overlay"><span>Вечерний костёр</span></div>
|
||
</div>
|
||
|
||
<div class="gallery-item">
|
||
<div class="gallery-placeholder ph-5">
|
||
<div class="ph-icon">📸</div>
|
||
Фото 5
|
||
</div>
|
||
<div class="gallery-overlay"><span>Баня в лесу</span></div>
|
||
</div>
|
||
|
||
<div class="gallery-item">
|
||
<div class="gallery-placeholder ph-6">
|
||
<div class="ph-icon">📸</div>
|
||
Фото 6
|
||
</div>
|
||
<div class="gallery-overlay"><span>Зона барбекю</span></div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════════════════ FACILITIES ═══════════════════ -->
|
||
<section id="facilities">
|
||
<div class="section-inner">
|
||
<p class="section-label">Инфраструктура</p>
|
||
<h2 class="section-title">Всё для <em>комфортного</em> отдыха</h2>
|
||
<p class="section-desc">
|
||
На территории усадьбы — всё необходимое для отдыха с детьми,
|
||
шашлыков с друзьями и уединённых вечеров у огня.
|
||
</p>
|
||
<div class="facilities-grid">
|
||
|
||
<div class="facility-card">
|
||
<div class="facility-img fac-1" data-label="Фото объекта">🏡</div>
|
||
<div class="facility-body">
|
||
<h3>Уютная беседка</h3>
|
||
<p>
|
||
Крытая беседка на 12 человек с деревянными столами
|
||
и лавками. Идеально для семейных ужинов под открытым небом
|
||
в любую погоду.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="facility-card">
|
||
<div class="facility-img fac-2" data-label="Фото объекта">🔥</div>
|
||
<div class="facility-body">
|
||
<h3>Зона барбекю</h3>
|
||
<p>
|
||
Мангал, решётка-гриль и казан — всё оборудование
|
||
для приготовления еды на открытом огне. Дрова
|
||
в стоимость включены.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="facility-card">
|
||
<div class="facility-img fac-3" data-label="Фото объекта">🛝</div>
|
||
<div class="facility-body">
|
||
<h3>Детская площадка</h3>
|
||
<p>
|
||
Горка, качели, песочница и лестница на дерево.
|
||
Дети в полной безопасности — площадка огорожена
|
||
и видна из беседки.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="facility-card">
|
||
<div class="facility-img fac-4" data-label="Фото объекта">🚗</div>
|
||
<div class="facility-body">
|
||
<h3>Парковка</h3>
|
||
<p>
|
||
Охраняемая парковка на 6 автомобилей прямо
|
||
на территории. Въездные ворота с кодовым замком,
|
||
видеонаблюдение.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════════════════ PRICING ═══════════════════ -->
|
||
<section id="pricing">
|
||
<div class="section-inner">
|
||
<p class="section-label">Стоимость аренды</p>
|
||
<h2 class="section-title">Прозрачные <em>цены</em></h2>
|
||
<p class="section-desc">
|
||
Фиксированная стоимость без скрытых доплат. Минимальный заезд — 2 ночи.
|
||
Бронирование за 50% предоплату.
|
||
</p>
|
||
<div class="pricing-grid">
|
||
|
||
<div class="price-card">
|
||
<p class="price-period">Будни</p>
|
||
<p class="price-amount">8 500</p>
|
||
<p class="price-unit">₽ за сутки</p>
|
||
<ul class="price-list">
|
||
<li>До 8 человек</li>
|
||
<li>Беседка и мангал</li>
|
||
<li>Парковка включена</li>
|
||
<li>Дрова в подарок</li>
|
||
</ul>
|
||
<a href="#contacts" class="btn btn-brown" style="display:block; text-align:center; font-size:.85rem; padding:13px;">Забронировать</a>
|
||
</div>
|
||
|
||
<div class="price-card featured">
|
||
<div class="price-badge">Популярный выбор</div>
|
||
<p class="price-period">Выходные</p>
|
||
<p class="price-amount">12 000</p>
|
||
<p class="price-unit">₽ за сутки</p>
|
||
<ul class="price-list">
|
||
<li>До 12 человек</li>
|
||
<li>Беседка, мангал, баня</li>
|
||
<li>Детская площадка</li>
|
||
<li>Парковка включена</li>
|
||
<li>Дрова в подарок</li>
|
||
</ul>
|
||
<a href="#contacts" class="btn btn-amber" style="display:block; text-align:center; font-size:.85rem; padding:13px;">Забронировать</a>
|
||
</div>
|
||
|
||
<div class="price-card">
|
||
<p class="price-period">Неделя</p>
|
||
<p class="price-amount">52 000</p>
|
||
<p class="price-unit">₽ за 7 ночей</p>
|
||
<ul class="price-list">
|
||
<li>До 12 человек</li>
|
||
<li>Все удобства</li>
|
||
<li>Скидка ~38%</li>
|
||
<li>Приоритетное заселение</li>
|
||
</ul>
|
||
<a href="#contacts" class="btn btn-brown" style="display:block; text-align:center; font-size:.85rem; padding:13px;">Уточнить даты</a>
|
||
</div>
|
||
|
||
</div>
|
||
<p class="price-note">
|
||
<strong>Залог:</strong> 3 000 ₽ возвращается при выезде ·
|
||
<strong>Заезд:</strong> с 14:00 ·
|
||
<strong>Выезд:</strong> до 12:00 ·
|
||
Возможна аренда под мероприятие — <a href="#contacts" style="color:var(--dark-amber);">позвоните нам</a>
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════════════════ TESTIMONIALS ═══════════════════ -->
|
||
<section id="testimonials">
|
||
<div class="testimonials-inner">
|
||
<p class="section-label">Отзывы гостей</p>
|
||
<h2 class="section-title">Говорят наши <em>гости</em></h2>
|
||
<div class="testimonials-grid">
|
||
|
||
<div class="testimonial">
|
||
<div class="testimonial-stars">★★★★★</div>
|
||
<q>Приезжали с детьми на три дня — дети до сих пор вспоминают. Берёза у беседки, запах сосен, баня каждый вечер. Лучший отдых за годы!</q>
|
||
<p class="testimonial-author">— Анна К., Москва</p>
|
||
</div>
|
||
|
||
<div class="testimonial">
|
||
<div class="testimonial-stars">★★★★★</div>
|
||
<q>Тихое, уютное место. Хозяева очень внимательные — встретили, показали всё, оставили дрова. Озеро в шаговой доступности, рыбалка утром — просто сказка.</q>
|
||
<p class="testimonial-author">— Дмитрий В., Ярославль</p>
|
||
</div>
|
||
|
||
<div class="testimonial">
|
||
<div class="testimonial-stars">★★★★★</div>
|
||
<q>Были компанией 10 человек на выходных. Места хватило всем! Барбекю, беседка, костёр до утра — всё очень атмосферно. Уже планируем повторить.</q>
|
||
<p class="testimonial-author">— Сергей М., Санкт-Петербург</p>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════════════════ CONTACTS ═══════════════════ -->
|
||
<section id="contacts">
|
||
<div class="section-inner">
|
||
<p class="section-label">Свяжитесь с нами</p>
|
||
<h2 class="section-title">Бронирование и <em>вопросы</em></h2>
|
||
<div class="contacts-grid">
|
||
|
||
<div class="contact-info">
|
||
<h2>Мы ответим<br />в течение часа</h2>
|
||
|
||
<div class="contact-item">
|
||
<div class="contact-icon">📞</div>
|
||
<div>
|
||
<strong>Телефон</strong>
|
||
<a href="tel:+7XXXXXXXXXX">+7 (XXX) XXX-XX-XX</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="contact-item">
|
||
<div class="contact-icon">📍</div>
|
||
<div>
|
||
<strong>Адрес</strong>
|
||
<span>Ярославская область,<br />Переславль-Залесский р-н,<br />пос. Сосновый, ул. Лесная, д. 7</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="contact-item">
|
||
<div class="contact-icon">🕐</div>
|
||
<div>
|
||
<strong>Заезд / Выезд</strong>
|
||
<span>Заезд с 14:00 · Выезд до 12:00<br />Поздний выезд по договорённости</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="contact-item">
|
||
<div class="contact-icon">💬</div>
|
||
<div>
|
||
<strong>Мессенджеры</strong>
|
||
<span>WhatsApp · Telegram<br />по тому же номеру</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="map-wrapper">
|
||
<div class="map-placeholder">
|
||
<div class="map-pin"></div>
|
||
<p>Станция Сосновая</p>
|
||
<span>Переславль-Залесский, Ярославская обл.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="contact-form">
|
||
<h3>Отправить запрос на бронирование</h3>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>Ваше имя</label>
|
||
<input type="text" placeholder="Иван Иванов" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Телефон</label>
|
||
<input type="tel" placeholder="+7 (___) ___-__-__" />
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>Дата заезда</label>
|
||
<input type="date" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Дата выезда</label>
|
||
<input type="date" />
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>Гостей</label>
|
||
<select>
|
||
<option>1–2 человека</option>
|
||
<option>3–4 человека</option>
|
||
<option>5–6 человек</option>
|
||
<option>7–8 человек</option>
|
||
<option>9–12 человек</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Тип отдыха</label>
|
||
<select>
|
||
<option>Семейный</option>
|
||
<option>Компания друзей</option>
|
||
<option>День рождения</option>
|
||
<option>Корпоратив</option>
|
||
<option>Другое</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Комментарий</label>
|
||
<textarea placeholder="Особые пожелания, вопросы по заезду..."></textarea>
|
||
</div>
|
||
<button type="button" class="btn btn-primary" style="width:100%; cursor:pointer; border:none; font-size:.95rem;">
|
||
Отправить заявку
|
||
</button>
|
||
<p style="font-size:.78rem; color:var(--light-brown); margin-top:12px; text-align:center; font-weight:300;">
|
||
Нажимая кнопку, вы соглашаетесь на обработку персональных данных
|
||
</p>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════════════════ FOOTER ═══════════════════ -->
|
||
<footer>
|
||
<div class="footer-inner">
|
||
<div class="footer-top">
|
||
<div class="footer-brand">
|
||
<a href="#hero" class="nav-logo">Станция <span>Сосновая</span></a>
|
||
<p>
|
||
Уютная усадьба у Плещеева озера в окружении сосновых лесов
|
||
Переславля-Залесского. Семейный отдых, живой огонь и лесная тишина.
|
||
</p>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h4>Навигация</h4>
|
||
<ul>
|
||
<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>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h4>Контакты</h4>
|
||
<ul>
|
||
<li><a href="tel:+7XXXXXXXXXX">+7 (XXX) XXX-XX-XX</a></li>
|
||
<li><a href="#">Написать в WhatsApp</a></li>
|
||
<li><a href="#">Написать в Telegram</a></li>
|
||
<li><a href="#">Показать на карте</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="footer-bottom">
|
||
<p>© 2024 Станция Сосновая · Все права защищены</p>
|
||
<div class="footer-socials">
|
||
<a href="#" class="social-btn" aria-label="ВКонтакте">В</a>
|
||
<a href="#" class="social-btn" aria-label="Telegram">Т</a>
|
||
<a href="#" class="social-btn" aria-label="WhatsApp">W</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
</body>
|
||
</html>
|