adcovn/olimparena
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: adcovn:09a407d456b784a0855b9890d2f5d1ba099bb079
Branches Tags
adcovn:main adcovn:style/design adcovn:style/photo-all adcovn:style/all
..
compare: adcovn:style/photo-all
Branches Tags
adcovn:main adcovn:style/design adcovn:style/photo-all adcovn:style/all

12 Commits
09a407d456 ... style/phot

Author SHA1 Message Date
Artem
3dd98c874e style: add styles and photos 2026-06-03 15:01:22 +03:00
artem
bd4f74acde Merge pull request 'style: update base scss styles' (#17) from style/all into main
All checks were successful
Deploy Olimparena / deploy (push) Successful in 17s
Details 
Reviewed-on: #17
 2026-06-02 15:07:29 +00:00
Artem
382afe7694 style: update base scss styles 2026-06-02 18:04:42 +03:00
elarmethu
d426e3cb3e Merge pull request 'feat: added review block' (#16) from style/edit into main
All checks were successful
Deploy Olimparena / deploy (push) Successful in 41s
Details 
Reviewed-on: #16
 2026-05-27 12:53:28 +00:00
Ignat Karelov
98f3d12455 feat: added review block 2026-05-27 15:53:03 +03:00
elarmethu
288f028235 Merge pull request 'style/edit' (#15) from style/edit into main
All checks were successful
Deploy Olimparena / deploy (push) Successful in 18s
Details 
Reviewed-on: #15
 2026-05-27 10:57:44 +00:00
Ignat Karelov
7ce71ffa33 style; change hero block 2026-05-27 13:54:55 +03:00
Ignat Karelov
1f8cb4e8c5 style: change blocks 2026-05-27 13:53:32 +03:00
elarmethu
1707f05f7a Merge pull request 'style: edit texts' (#14) from style/edit into main
All checks were successful
Deploy Olimparena / deploy (push) Successful in 15s
Details 
Reviewed-on: #14
 2026-05-22 12:08:41 +00:00
Ignat Karelov
429af5fa0f style: edit texts 2026-05-22 15:06:58 +03:00
elarmethu
9903a824a5 Merge pull request 'feat: added new blocks/form changed' (#13) from style/edit into main
All checks were successful
Deploy Olimparena / deploy (push) Successful in 15s
Details 
Reviewed-on: #13
 2026-05-22 11:01:44 +00:00
Ignat Karelov
e75a56cd9e feat: added new blocks/form changed 2026-05-22 13:59:25 +03:00
21 changed files with 1185 additions and 208 deletions
Expand all files Collapse all files

396
assets/css/main.css
View File

@@ -238,7 +238,7 @@ img {
.hero__bg { .hero__bg {
position: absolute; position: absolute;
inset: 0; inset: 0;
background: linear-gradient(90deg, rgba(18, 18, 18, 0.9) 0%, rgba(18, 18, 18, 0.7) 50%, rgba(0, 0, 0, 0) 100%), url("../images/other/section-main.webp") center/cover no-repeat; background: linear-gradient(90deg, rgba(18, 18, 18, 0.9) 0%, rgba(18, 18, 18, 0.7) 50%, rgba(0, 0, 0, 0) 100%), url("../images/renders/led.jpg") center/cover no-repeat;
} }
.hero__bg::after { .hero__bg::after {
content: ""; content: "";
@@ -383,7 +383,7 @@ img {
} }
.section__head p { .section__head p {
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
font-size: 28px; font-size: 20px;
line-height: 1.15; line-height: 1.15;
} }
@@ -616,7 +616,7 @@ img {
justify-content: center; justify-content: center;
padding: 16px 18px; padding: 16px 18px;
text-align: center; text-align: center;
background: rgba(7, 10, 12, 0.84); background: rgb(7, 10, 12);
opacity: 0; opacity: 0;
transform: translateY(10px); transform: translateY(10px);
color: rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 0.7);
@@ -690,6 +690,19 @@ img {
font-weight: 700; font-weight: 700;
line-height: 1.2; line-height: 1.2;
} }
@media (max-width: 600px) {
.pricing-item {
padding: 16px;
min-height: auto;
}
.pricing-item h3 {
font-size: 16px;
}
.pricing-item p {
font-size: 16px;
color: #dfdfdf;
}
}
.gallery { .gallery {
background: linear-gradient(90deg, #293133, #20272a); background: linear-gradient(90deg, #293133, #20272a);
@@ -713,16 +726,74 @@ img {
filter: saturate(1.08); filter: saturate(1.08);
} }
.reviews { .facts {
background: #121212; background: #121212;
background-image: url(../images/bg-pattern.svg); background-image: url(../images/bg-pattern.svg);
background-position: center; background-position: center;
} }
.reviews__grid {
.reviews {
--reviews-visible: 3;
--reviews-gap: 24px;
background: linear-gradient(90deg, #293133, #20272a);
}
.reviews .section__head {
margin-bottom: 44px;
}
.reviews__slider {
display: grid; display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: auto 1fr auto;
gap: 32px; align-items: center;
margin-bottom: 64px; gap: 16px;
}
.reviews__viewport {
overflow: hidden;
}
.reviews__track {
display: flex;
gap: var(--reviews-gap);
transition: transform 0.45s ease;
will-change: transform;
}
.reviews__nav {
width: 48px;
height: 48px;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 12px;
background: rgba(255, 255, 255, 0.03);
color: rgba(255, 255, 255, 0.88);
font-size: 24px;
line-height: 1;
cursor: pointer;
transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}
.reviews__nav:hover:not(:disabled) {
transform: translateY(-1px);
border-color: rgba(207, 23, 23, 0.75);
background: rgba(207, 23, 23, 0.18);
}
.reviews__nav:disabled {
opacity: 0.35;
cursor: default;
}
.reviews__dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 18px;
}
.reviews__dot {
width: 10px;
height: 10px;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, 0.28);
cursor: pointer;
transition: width 0.2s ease, background-color 0.2s ease;
}
.reviews__dot.is-active {
width: 26px;
background: #cf1717;
} }
.review-card { .review-card {
@@ -730,8 +801,12 @@ img {
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px; border-radius: 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1);
min-height: 206px; flex: 0 0 calc((100% - (var(--reviews-visible) - 1) * var(--reviews-gap)) / var(--reviews-visible));
padding: 33px; min-height: 250px;
padding: 30px 28px;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: transform 0.3s ease, border-color 0.3s ease; transition: transform 0.3s ease, border-color 0.3s ease;
} }
.review-card:hover { .review-card:hover {
@@ -746,15 +821,29 @@ img {
} }
.review-card strong { .review-card strong {
display: block; display: block;
margin-bottom: 8px; margin-bottom: 10px;
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
line-height: 1.2; line-height: 1.2;
} }
.review-card span { .review-card__meta {
color: rgba(255, 255, 255, 0.7); padding-top: 14px;
font-size: 16px; border-top: 1px solid rgba(255, 255, 255, 0.08);
line-height: 1.2; }
.review-card__meta a {
color: #ffd2d2;
font-size: 14px;
font-weight: 500;
line-height: 1.4;
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
text-decoration-color: rgba(255, 210, 210, 0.75);
transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.review-card__meta a:hover {
color: #ffe4e4;
text-decoration-color: #ffe4e4;
} }
.stats { .stats {
@@ -762,33 +851,40 @@ img {
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 32px; gap: 32px;
} }
.stats article { .stats__item {
background: rgba(18, 18, 18, 0.4); background: rgba(18, 18, 18, 0.4);
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px; border-radius: 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1);
border: 0; border: 0;
background: #cf1717; background: #cf1717;
min-height: 144px; min-height: 248px;
padding: 32px; padding: 34px 24px;
text-align: center; text-align: center;
transition: transform 0.3s ease; transition: transform 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
} }
.stats article:hover { .stats__item:hover {
transform: translateY(-5px); transform: translateY(-5px);
} }
.stats strong { .stats strong {
display: block; display: block;
margin-bottom: 8px; margin-bottom: 14px;
color: #ffffff; color: #ffffff;
font-size: 48px; font-size: clamp(80px, 9vw, 120px);
font-weight: 700; font-weight: 700;
line-height: 1; line-height: 0.9;
letter-spacing: 0.01em;
} }
.stats span { .stats span {
color: #ffffff; color: #ffffff;
font-size: 16px; font-size: 19px;
line-height: 1.3; font-weight: 500;
line-height: 1.25;
max-width: 320px;
} }
.booking { .booking {
@@ -950,11 +1046,89 @@ img {
font-weight: 500; font-weight: 500;
line-height: 1.1; line-height: 1.1;
} }
.contacts-card__item-content a {
color: rgba(255, 255, 255, 0.9);
font-size: 16px;
line-height: 1.8;
text-decoration: underline;
text-underline-offset: 2px;
}
.contacts-card__item-content span { .contacts-card__item-content span {
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
font-size: 16px; font-size: 16px;
line-height: 1.45; line-height: 1.45;
} }
.contacts-card__item-content small {
display: block;
margin-top: 6px;
color: rgba(255, 255, 255, 0.6);
font-size: 13px;
line-height: 1.35;
}
.contacts-card__links {
margin-top: 24px;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.contacts-card__messenger {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 999px;
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.92);
text-decoration: none;
transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.contacts-card__messenger:hover {
transform: translateY(-1px);
border-color: rgba(207, 23, 23, 0.7);
background: rgba(207, 23, 23, 0.18);
}
.contacts-card__messenger--secondary {
background: rgba(255, 255, 255, 0.02);
}
.contacts-card__action-icon {
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.contacts-card__action-icon svg {
width: 20px;
height: 20px;
display: block;
color: currentColor;
opacity: 0.9;
}
.contacts-card__links--social {
margin-top: 14px;
}
.contacts-card__links--social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.85);
background: rgba(255, 255, 255, 0.03);
transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
text-decoration: none;
}
.contacts-card__links--social a:hover {
border-color: rgba(207, 23, 23, 0.8);
color: #ffffff;
background: rgba(207, 23, 23, 0.2);
}
.hours-card h4 { .hours-card h4 {
margin-bottom: 16px; margin-bottom: 16px;
@@ -968,6 +1142,64 @@ img {
line-height: 1.25; line-height: 1.25;
} }
.map-card__embed {
width: 100%;
margin-top: 18px;
margin-bottom: 16px;
overflow: hidden;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.15);
}
.map-card__embed iframe {
width: 100%;
min-height: 260px;
border: 0;
display: block;
}
.map-card__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.map-card__actions a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
background: rgba(255, 255, 255, 0.03);
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}
.map-card__actions a:hover {
transform: translateY(-1px);
border-color: rgba(207, 23, 23, 0.75);
background: rgba(207, 23, 23, 0.18);
}
.map-card__action-icon {
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #ffd5d5;
}
.map-card__action-icon svg {
width: 20px;
height: 20px;
display: block;
}
.map-card__route {
min-width: 44px;
width: 44px;
height: 44px;
padding: 0;
box-shadow: none;
}
.booking-modal { .booking-modal {
position: fixed; position: fixed;
inset: 0; inset: 0;
@@ -1073,19 +1305,19 @@ img {
font-size: 14px; font-size: 14px;
line-height: 1.28; line-height: 1.28;
} }
.footer__nav h4, .footer__contacts h4, .footer__social h4 { .footer__nav h4, .footer__contacts h4 {
margin-bottom: 16px; margin-bottom: 16px;
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
line-height: 1.1; line-height: 1.1;
} }
.footer__nav a, .footer__contacts a, .footer__social a { .footer__nav a, .footer__contacts a {
display: block; display: block;
color: rgba(255, 255, 255, 0.65); color: rgba(255, 255, 255, 0.65);
font-size: 14px; font-size: 14px;
line-height: 1.35; line-height: 1.35;
} }
.footer__nav span, .footer__contacts span, .footer__social span { .footer__nav span, .footer__contacts span {
display: block; display: block;
color: rgba(255, 255, 255, 0.65); color: rgba(255, 255, 255, 0.65);
font-size: 14px; font-size: 14px;
@@ -1093,35 +1325,36 @@ img {
} }
.footer__nav a + a, .footer__nav a + a,
.footer__nav span + span, .footer__contacts a + a, .footer__nav span + span, .footer__contacts a + a,
.footer__contacts span + span, .footer__social a + a, .footer__contacts span + span {
.footer__social span + span {
margin-top: 10px; margin-top: 10px;
} }
.footer__socials { .footer__socials {
display: flex; display: flex;
flex-wrap: wrap;
gap: 12px; gap: 12px;
} }
.footer__socials a { .footer__socials a {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 58px; width: 46px;
height: 58px; height: 46px;
border: 1px solid rgba(207, 23, 23, 0.5); border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 10px; border-radius: 12px;
background: rgba(255, 255, 255, 0.03);
color: rgba(255, 255, 255, 0.92); color: rgba(255, 255, 255, 0.92);
transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease; transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
margin-top: 0 !important; margin-top: 0 !important;
} }
.footer__socials a svg { .footer__socials a svg {
width: 24px; width: 22px;
height: 24px; height: 22px;
display: block; display: block;
} }
.footer__socials a:hover { .footer__socials a:hover {
transform: translateY(-2px); transform: translateY(-2px);
border-color: rgba(207, 23, 23, 0.85); border-color: rgba(207, 23, 23, 0.75);
background: rgba(207, 23, 23, 0.15); background: rgba(207, 23, 23, 0.18);
} }
.footer__bottom { .footer__bottom {
display: flex; display: flex;
@@ -1139,7 +1372,46 @@ img {
} }
.footer__legal { .footer__legal {
display: flex; display: flex;
gap: 34px; flex-wrap: wrap;
gap: 10px 24px;
}
.footer__messengers {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
.footer__messengers a {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 12px;
color: rgba(255, 255, 255, 0.85) !important;
background: rgba(255, 255, 255, 0.03);
margin-top: 0 !important;
text-decoration: none !important;
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.footer__messengers a:hover {
border-color: rgba(207, 23, 23, 0.72);
background: rgba(207, 23, 23, 0.16);
}
.footer__messenger-icon {
width: 16px;
height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.footer__messenger-icon svg {
width: 16px;
height: 16px;
display: block;
color: currentColor;
} }
@media only screen and (max-width: 1600px) { @media only screen and (max-width: 1600px) {
@@ -1195,15 +1467,14 @@ img {
font-size: 16px; font-size: 16px;
} }
.footer__brand p { .footer__brand p {
font-size: 28px; font-size: 16px;
} }
.footer__nav h4, .footer__contacts h4, .footer__social h4 { .footer__nav h4, .footer__contacts h4 {
font-size: 16px; font-size: 16px;
} }
.footer__nav a, .footer__nav a,
.footer__nav span, .footer__contacts a, .footer__nav span, .footer__contacts a,
.footer__contacts span, .footer__social a, .footer__contacts span {
.footer__social span {
font-size: 14px; font-size: 14px;
} }
.footer__bottom span, .footer__bottom span,
@@ -1238,6 +1509,9 @@ img {
.hero__actions { .hero__actions {
flex-wrap: wrap; flex-wrap: wrap;
} }
.reviews {
--reviews-visible: 2;
}
.highlights__grid, .highlights__grid,
.gallery__grid, .gallery__grid,
.reviews__grid, .reviews__grid,
@@ -1282,19 +1556,18 @@ img {
gap: 28px; gap: 28px;
} }
.footer__brand p { .footer__brand p {
font-size: 22px; font-size: 16px;
margin-top: 18px; margin-top: 18px;
} }
.footer__nav h4, .footer__contacts h4, .footer__social h4 { .footer__nav h4, .footer__contacts h4 {
font-size: 30px; font-size: 18px;
margin-bottom: 16px; margin-bottom: 16px;
} }
.footer__nav a, .footer__nav a,
.footer__nav span, .footer__contacts a, .footer__nav span, .footer__contacts a,
.footer__contacts span, .footer__social a, .footer__contacts span {
.footer__social span { font-size: 15px;
font-size: 22px; line-height: 1.4;
line-height: 1.32;
} }
.footer__bottom span, .footer__bottom span,
.footer__bottom a { .footer__bottom a {
@@ -1302,6 +1575,16 @@ img {
} }
} }
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
.reviews {
--reviews-visible: 1;
}
.reviews__slider {
grid-template-columns: 1fr;
gap: 12px;
}
.reviews__nav {
display: none;
}
.container { .container {
padding: 0 16px; padding: 0 16px;
} }
@@ -1387,13 +1670,12 @@ img {
font-size: 16px; font-size: 16px;
max-width: 100%; max-width: 100%;
} }
.footer__nav h4, .footer__contacts h4, .footer__social h4 { .footer__nav h4, .footer__contacts h4 {
font-size: 16px; font-size: 16px;
} }
.footer__nav a, .footer__nav a,
.footer__nav span, .footer__contacts a, .footer__nav span, .footer__contacts a,
.footer__contacts span, .footer__social a, .footer__contacts span {
.footer__social span {
font-size: 16px; font-size: 16px;
} }
.footer__bottom span, .footer__bottom span,
@@ -1401,7 +1683,7 @@ img {
font-size: 14px; font-size: 14px;
} }
.stats strong { .stats strong {
font-size: 40px; font-size: clamp(66px, 17vw, 96px);
} }
.booking-modal__content { .booking-modal__content {
padding: 28px 18px 22px; padding: 28px 18px 22px;
@@ -1457,7 +1739,7 @@ img {
.info-card, .info-card,
.feature-card, .feature-card,
.review-card, .review-card,
.stats article, .stats__item,
.contacts-card, .contacts-card,
.hours-card, .hours-card,
.object-card__content { .object-card__content {
@@ -1492,8 +1774,8 @@ img {
gap: 20px; gap: 20px;
} }
.footer__socials a { .footer__socials a {
width: 50px; width: 44px;
height: 50px; height: 44px;
} }
} }
@media (hover: none) { @media (hover: none) {

2
assets/css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

BIN
assets/images/renders/basket.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 157 KiB

BIN
assets/images/renders/led.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 138 KiB

BIN
assets/images/renders/ledadnbasket.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 159 KiB

BIN
assets/images/renders/no_photo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
assets/images/renders/photo_olimp_rest1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 115 KiB

BIN
assets/images/renders/photo_olimp_rest2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 112 KiB

BIN
assets/images/renders/photo_olimp_rest3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 113 KiB

BIN
assets/images/renders/photo_olimp_rest4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 123 KiB

BIN
assets/images/renders/photo_olimp_rest5.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 122 KiB

BIN
assets/images/renders/photo_olimp_rest6.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 109 KiB

BIN
assets/images/renders/photo_olimp_rest7.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 134 KiB

BIN
assets/images/renders/photo_olimp_sport1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 141 KiB

BIN
assets/images/renders/photo_olimp_sport2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 202 KiB

BIN
assets/images/renders/photo_olimp_sport3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 150 KiB

BIN
assets/images/renders/photo_olimp_sport4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 197 KiB

33
assets/images/svg-sprites.svg
View File

@@ -43,4 +43,37 @@
<path d="M20 4H4C2.89543 4 2 4.89543 2 6V18C2 19.1046 2.89543 20 4 20H20C21.1046 20 22 19.1046 22 18V6C22 4.89543 21.1046 4 20 4Z" stroke="#CF1717" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M20 4H4C2.89543 4 2 4.89543 2 6V18C2 19.1046 2.89543 20 4 20H20C21.1046 20 22 19.1046 22 18V6C22 4.89543 21.1046 4 20 4Z" stroke="#CF1717" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M22 7L13.03 12.7C12.7213 12.8934 12.3643 12.996 12 12.996C11.6357 12.996 11.2787 12.8934 10.97 12.7L2 7" stroke="#CF1717" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M22 7L13.03 12.7C12.7213 12.8934 12.3643 12.996 12 12.996C11.6357 12.996 11.2787 12.8934 10.97 12.7L2 7" stroke="#CF1717" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</symbol> </symbol>
<symbol id="icon-time" viewBox="0 0 24 24" fill="none">
<circle cx="12" cy="12" r="9" stroke="#CF1717" stroke-width="2"/>
<path d="M12 7V12L15 14" stroke="#CF1717" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</symbol>
<symbol id="icon-whatsapp" viewBox="0 0 24 24" fill="none">
<path d="M20.521 3.479A11.91 11.91 0 0012.037 0C5.488 0 .137 5.35.137 11.9c0 2.096.548 4.141 1.588 5.946L0 24l6.307-1.66a11.844 11.844 0 005.73 1.46h.005c6.549 0 11.9-5.35 11.9-11.9a11.833 11.833 0 00-3.421-8.421zm-8.484 18.31h-.004a9.86 9.86 0 01-5.018-1.371l-.36-.213-3.742.984.998-3.646-.234-.374a9.88 9.88 0 01-1.51-5.27c.002-5.457 4.442-9.896 9.904-9.896a9.83 9.83 0 017.01 2.903 9.833 9.833 0 012.89 6.997c-.003 5.458-4.443 9.886-9.934 9.886z" fill="currentColor"/>
<path d="M17.457 14.572c-.298-.15-1.764-.87-2.037-.968-.273-.1-.472-.15-.67.15-.198.298-.768.968-.943 1.166-.174.2-.347.224-.645.075-.298-.149-1.257-.463-2.395-1.477-.885-.788-1.483-1.762-1.657-2.06-.174-.299-.019-.46.131-.61.135-.134.298-.348.447-.521.15-.174.199-.299.299-.498.099-.199.05-.373-.025-.523-.075-.149-.67-1.614-.918-2.211-.241-.58-.486-.502-.67-.511-.174-.008-.372-.01-.57-.01a1.097 1.097 0 00-.794.373c-.273.298-1.042 1.017-1.042 2.48 0 1.465 1.067 2.88 1.216 3.078.149.199 2.103 3.213 5.095 4.505.712.307 1.266.49 1.699.627.713.227 1.362.195 1.875.118.572-.085 1.764-.72 2.013-1.414.248-.695.248-1.29.173-1.414-.074-.125-.273-.2-.57-.349z" fill="currentColor"/>
</symbol>
<symbol id="icon-telegram" viewBox="0 0 24 24" fill="none">
<path d="M9.347 14.695l-.394 5.54c.564 0 .808-.242 1.101-.533l2.64-2.52 5.472 4.005c1.004.558 1.712.264 1.983-.924L23.74 3.35c.355-1.453-.525-2.022-1.503-1.658L1.09 9.84c-1.443.563-1.421 1.367-.246 1.73l5.406 1.686L18.806 5.4c.591-.39 1.13-.174.687.217l-10.146 9.078z" fill="currentColor"/>
</symbol>
<symbol id="icon-route" viewBox="0 0 24 24" fill="none">
<path d="M6.5 4.5a2.5 2.5 0 110 5 2.5 2.5 0 010-5zm0 10a2.5 2.5 0 110 5 2.5 2.5 0 010-5zm11-5a2.5 2.5 0 110 5 2.5 2.5 0 010-5z" stroke="currentColor" stroke-width="1.8"/>
<path d="M8.8 7h5.1c1.2 0 2.1 1 2.1 2.1v.2M15.9 12.9v.2c0 1.2-1 2.1-2.1 2.1H8.8" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
</symbol>
<symbol id="icon-map" viewBox="0 0 24 24" fill="none">
<path d="M8 3.5l8-2v19l-8 2-6-1.5v-19L8 3.5zm0 0v19m8-21l6 1.5v19L16 20.5" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/>
</symbol>
<symbol id="icon-instagram" viewBox="0 0 24 24" fill="none">
<rect x="2.5" y="2.5" width="19" height="19" rx="5" stroke="currentColor" stroke-width="2"/>
<circle cx="12" cy="12" r="4.25" stroke="currentColor" stroke-width="2"/>
<circle cx="17.2" cy="6.8" r="1.2" fill="currentColor"/>
</symbol>
<symbol id="icon-vk" viewBox="0 0 24 24" fill="none">
<path d="M3.8 7.5c.1-.4.4-.6.8-.6h2.2c.3 0 .6.2.7.5.8 2.1 1.8 3.9 2.6 4.8.3.3.5.4.7.4.1 0 .2-.1.2-.4V7.8c0-.5.4-.9.9-.9h2c.5 0 .9.4.9.9v2.4c0 .8.3 1.1.6 1.1.2 0 .4-.1.7-.4.8-.9 1.7-2.6 2.5-4.6.1-.3.4-.5.7-.5h2.2c.6 0 1 .6.8 1.2-.6 1.7-1.5 3.3-2.4 4.4-.3.4-.4.7 0 1.2.9 1 1.8 1.9 2.5 3.2.3.6-.1 1.3-.8 1.3h-2.4c-.3 0-.5-.1-.7-.4-.5-.7-1.1-1.4-1.8-2-.2-.1-.3-.2-.5-.2-.2 0-.4.2-.4.5v1.2c0 .5-.4.9-.9.9h-1.3c-1.2 0-2.4-.4-3.6-1.4-1.7-1.4-3.1-3.7-4-6.4 0-.1 0-.3 0-.4z" fill="currentColor"/>
</symbol>
</svg> </svg>

180
assets/js/main.js
View File

@@ -55,6 +55,186 @@
elements.forEach((element) => observer.observe(element)); elements.forEach((element) => observer.observe(element));
})(); })();
(() => {
const counters = Array.from(document.querySelectorAll(".js-counter"));
if (!counters.length) return;
const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
const formatCounter = (counter, value) => {
const suffix = counter.dataset.suffix || "";
counter.textContent = `${value}${suffix}`;
};
const setFinalValue = (counter) => {
const target = Number(counter.dataset.target || 0);
formatCounter(counter, Number.isFinite(target) ? target : 0);
};
const animateCounter = (counter) => {
const target = Number(counter.dataset.target || 0);
const duration = Number(counter.dataset.duration || 1300);
if (!Number.isFinite(target) || target <= 0) {
setFinalValue(counter);
return;
}
let startTime = null;
const tick = (timestamp) => {
if (startTime === null) startTime = timestamp;
const progress = Math.min((timestamp - startTime) / duration, 1);
const currentValue = Math.floor(progress * target);
formatCounter(counter, currentValue);
if (progress < 1) {
window.requestAnimationFrame(tick);
return;
}
setFinalValue(counter);
};
window.requestAnimationFrame(tick);
};
if (reduceMotion || !("IntersectionObserver" in window)) {
counters.forEach(setFinalValue);
return;
}
const observer = new IntersectionObserver(
(entries, currentObserver) => {
entries.forEach((entry) => {
if (!entry.isIntersecting) return;
animateCounter(entry.target);
currentObserver.unobserve(entry.target);
});
},
{ threshold: 0.45 }
);
counters.forEach((counter) => {
formatCounter(counter, 0);
observer.observe(counter);
});
})();
(() => {
const slider = document.querySelector("[data-reviews-slider]");
if (!slider) return;
const viewport = slider.querySelector("[data-reviews-viewport]");
const track = slider.querySelector("[data-reviews-track]");
const prevButton = slider.querySelector("[data-reviews-prev]");
const nextButton = slider.querySelector("[data-reviews-next]");
const dotsContainer = document.querySelector("[data-reviews-dots]");
const cards = Array.from(track?.querySelectorAll(".review-card") ?? []);
if (!viewport || !track || !prevButton || !nextButton || !dotsContainer || cards.length < 2) return;
let currentIndex = 0;
let touchStartX = 0;
const readVisibleSlides = () => {
const visibleValue = Number.parseInt(getComputedStyle(slider).getPropertyValue("--reviews-visible"), 10);
return Number.isFinite(visibleValue) && visibleValue > 0 ? visibleValue : 1;
};
const readTrackGap = () => {
const styles = getComputedStyle(track);
const gapValue = styles.gap || styles.columnGap || "0";
const parsedGap = Number.parseFloat(gapValue);
return Number.isFinite(parsedGap) ? parsedGap : 0;
};
const maxIndex = () => Math.max(0, cards.length - readVisibleSlides());
const renderDots = () => {
const total = maxIndex() + 1;
dotsContainer.innerHTML = "";
for (let index = 0; index < total; index += 1) {
const dot = document.createElement("button");
dot.type = "button";
dot.className = "reviews__dot";
dot.setAttribute("aria-label", `Показать отзыв ${index + 1}`);
dot.addEventListener("click", () => {
currentIndex = index;
update();
});
dotsContainer.appendChild(dot);
}
};
const update = () => {
const max = maxIndex();
currentIndex = Math.min(Math.max(currentIndex, 0), max);
const cardWidth = cards[0].getBoundingClientRect().width;
const offset = (cardWidth + readTrackGap()) * currentIndex;
track.style.transform = `translateX(${-offset}px)`;
prevButton.disabled = currentIndex === 0;
nextButton.disabled = currentIndex === max;
const dots = Array.from(dotsContainer.querySelectorAll(".reviews__dot"));
dots.forEach((dot, index) => {
dot.classList.toggle("is-active", index === currentIndex);
dot.setAttribute("aria-current", index === currentIndex ? "true" : "false");
});
};
prevButton.addEventListener("click", () => {
currentIndex -= 1;
update();
});
nextButton.addEventListener("click", () => {
currentIndex += 1;
update();
});
viewport.addEventListener("touchstart", (event) => {
touchStartX = event.changedTouches[0].clientX;
}, { passive: true });
viewport.addEventListener("touchend", (event) => {
const deltaX = event.changedTouches[0].clientX - touchStartX;
const threshold = 48;
if (deltaX > threshold) {
currentIndex -= 1;
update();
return;
}
if (deltaX < -threshold) {
currentIndex += 1;
update();
}
}, { passive: true });
const handleResize = () => {
renderDots();
update();
};
let resizeRaf = null;
window.addEventListener("resize", () => {
if (resizeRaf) return;
resizeRaf = window.requestAnimationFrame(() => {
resizeRaf = null;
handleResize();
});
});
renderDots();
update();
})();
(() => { (() => {
const bookingForm = document.getElementById("booking-form"); const bookingForm = document.getElementById("booking-form");
const successModal = document.getElementById("booking-success-modal"); const successModal = document.getElementById("booking-success-modal");

425
assets/scss/_base.scss
View File

@@ -194,7 +194,7 @@ img {
inset: 0; inset: 0;
background: background:
linear-gradient(90deg, rgba(18, 18, 18, 0.9) 0%, rgba(18, 18, 18, 0.7) 50%, rgba(0, 0, 0, 0) 100%), linear-gradient(90deg, rgba(18, 18, 18, 0.9) 0%, rgba(18, 18, 18, 0.7) 50%, rgba(0, 0, 0, 0) 100%),
url("../images/other/section-main.webp") center / cover no-repeat; url("../images/renders/led.jpg") center / cover no-repeat;
&::after { &::after {
content: ""; content: "";
@@ -363,7 +363,7 @@ img {
p { p {
color: $color-text-soft; color: $color-text-soft;
font-size: 28px; font-size: 20px;
line-height: 1.15; line-height: 1.15;
} }
} }
@@ -625,7 +625,7 @@ img {
justify-content: center; justify-content: center;
padding: 16px 18px; padding: 16px 18px;
text-align: center; text-align: center;
background: rgba(7, 10, 12, 0.84); background: rgba(7, 10, 12, 1);
opacity: 0; opacity: 0;
transform: translateY(10px); transform: translateY(10px);
color: $color-text-muted; color: $color-text-muted;
@@ -707,6 +707,22 @@ img {
font-weight: 700; font-weight: 700;
line-height: 1.2; line-height: 1.2;
} }
// Медиа-запрос для экранов меньше 600px
@media (max-width: 600px) {
padding: 16px; // Пример: уменьшаем внутренние отступы
min-height: auto; // Пример: убираем фиксированную минимальную высоту
h3 {
font-size: 16px; // Пример: уменьшаем размер заголовка
}
p {
font-size: 16px; // Пример: уменьшаем размер цены
color:#dfdfdf;
}
}
} }
} }
@@ -735,23 +751,94 @@ img {
} }
} }
.reviews { .facts {
background: $color-bg; background: $color-bg;
background-image: url(../images/bg-pattern.svg); background-image: url(../images/bg-pattern.svg);
background-position: center; background-position: center;
}
&__grid { .reviews {
--reviews-visible: 3;
--reviews-gap: 24px;
background: linear-gradient(90deg, $color-surface, $color-surface-2);
.section__head {
margin-bottom: 44px;
}
&__slider {
display: grid; display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: auto 1fr auto;
gap: 32px; align-items: center;
margin-bottom: 64px; gap: 16px;
}
&__viewport {
overflow: hidden;
}
&__track {
display: flex;
gap: var(--reviews-gap);
transition: transform 0.45s ease;
will-change: transform;
}
&__nav {
width: 48px;
height: 48px;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 12px;
background: rgba(255, 255, 255, 0.03);
color: rgba(255, 255, 255, 0.88);
font-size: 24px;
line-height: 1;
cursor: pointer;
transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
&:hover:not(:disabled) {
transform: translateY(-1px);
border-color: rgba(207, 23, 23, 0.75);
background: rgba(207, 23, 23, 0.18);
}
&:disabled {
opacity: 0.35;
cursor: default;
}
}
&__dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 18px;
}
&__dot {
width: 10px;
height: 10px;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, 0.28);
cursor: pointer;
transition: width 0.2s ease, background-color 0.2s ease;
&.is-active {
width: 26px;
background: $color-accent;
}
} }
} }
.review-card { .review-card {
@include card; @include card;
min-height: 206px; flex: 0 0 calc((100% - (var(--reviews-visible) - 1) * var(--reviews-gap)) / var(--reviews-visible));
padding: 33px; min-height: 250px;
padding: 30px 28px;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: transform 0.3s ease, border-color 0.3s ease; transition: transform 0.3s ease, border-color 0.3s ease;
&:hover { &:hover {
@@ -768,16 +855,32 @@ img {
strong { strong {
display: block; display: block;
margin-bottom: 8px; margin-bottom: 10px;
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
line-height: 1.2; line-height: 1.2;
} }
span { &__meta {
color: $color-text-muted; padding-top: 14px;
font-size: 16px; border-top: 1px solid rgba(255, 255, 255, 0.08);
line-height: 1.2;
a {
color: #ffd2d2;
font-size: 14px;
font-weight: 500;
line-height: 1.4;
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
text-decoration-color: rgba(255, 210, 210, 0.75);
transition: color 0.2s ease, text-decoration-color 0.2s ease;
&:hover {
color: #ffe4e4;
text-decoration-color: #ffe4e4;
}
}
} }
} }
@@ -786,14 +889,18 @@ img {
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 32px; gap: 32px;
article { &__item {
@include card; @include card;
border: 0; border: 0;
background: $color-accent; background: $color-accent;
min-height: 144px; min-height: 248px;
padding: 32px; padding: 34px 24px;
text-align: center; text-align: center;
transition: transform 0.3s ease; transition: transform 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
&:hover { &:hover {
transform: translateY(-5px); transform: translateY(-5px);
@@ -802,17 +909,20 @@ img {
strong { strong {
display: block; display: block;
margin-bottom: 8px; margin-bottom: 14px;
color: $color-text; color: $color-text;
font-size: 48px; font-size: clamp(80px, 9vw, 120px);
font-weight: 700; font-weight: 700;
line-height: 1; line-height: 0.9;
letter-spacing: 0.01em;
} }
span { span {
color: $color-text; color: $color-text;
font-size: 16px; font-size: 19px;
line-height: 1.3; font-weight: 500;
line-height: 1.25;
max-width: 320px;
} }
} }
@@ -991,11 +1101,100 @@ img {
line-height: 1.1; line-height: 1.1;
} }
a {
color: rgba(255, 255, 255, 0.9);
font-size: 16px;
line-height: 1.8;
text-decoration: underline;
text-underline-offset: 2px;
}
span { span {
color: $color-text-soft; color: $color-text-soft;
font-size: 16px; font-size: 16px;
line-height: 1.45; line-height: 1.45;
} }
small {
display: block;
margin-top: 6px;
color: rgba(255, 255, 255, 0.6);
font-size: 13px;
line-height: 1.35;
}
}
&__links {
margin-top: 24px;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
&__messenger {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 999px;
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.92);
text-decoration: none;
transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
&:hover {
transform: translateY(-1px);
border-color: rgba(207, 23, 23, 0.7);
background: rgba(207, 23, 23, 0.18);
}
&--secondary {
background: rgba(255, 255, 255, 0.02);
}
}
&__action-icon {
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
svg {
width: 20px;
height: 20px;
display: block;
color: currentColor;
opacity: 0.9;
}
}
&__links--social {
margin-top: 14px;
a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.85);
background: rgba(255, 255, 255, 0.03);
transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
text-decoration: none;
}
a:hover {
border-color: rgba(207, 23, 23, 0.8);
color: $color-text;
background: rgba(207, 23, 23, 0.2);
}
} }
} }
@@ -1014,6 +1213,73 @@ img {
} }
} }
.map-card {
&__embed {
width: 100%;
margin-top: 18px;
margin-bottom: 16px;
overflow: hidden;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.15);
iframe {
width: 100%;
min-height: 260px;
border: 0;
display: block;
}
}
&__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
background: rgba(255, 255, 255, 0.03);
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}
a:hover {
transform: translateY(-1px);
border-color: rgba(207, 23, 23, 0.75);
background: rgba(207, 23, 23, 0.18);
}
}
&__action-icon {
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #ffd5d5;
svg {
width: 20px;
height: 20px;
display: block;
}
}
&__route {
min-width: 44px;
width: 44px;
height: 44px;
padding: 0;
box-shadow: none;
}
}
.booking-modal { .booking-modal {
position: fixed; position: fixed;
inset: 0; inset: 0;
@@ -1136,8 +1402,7 @@ img {
} }
&__nav, &__nav,
&__contacts, &__contacts {
&__social {
h4 { h4 {
margin-bottom: 16px; margin-bottom: 16px;
font-size: 16px; font-size: 16px;
@@ -1167,30 +1432,32 @@ img {
&__socials { &__socials {
display: flex; display: flex;
flex-wrap: wrap;
gap: 12px; gap: 12px;
a { a {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 58px; width: 46px;
height: 58px; height: 46px;
border: 1px solid rgba(207, 23, 23, 0.5); border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 10px; border-radius: 12px;
background: rgba(255, 255, 255, 0.03);
color: rgba(255, 255, 255, 0.92); color: rgba(255, 255, 255, 0.92);
transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease; transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
margin-top: 0 !important; margin-top: 0 !important;
svg { svg {
width: 24px; width: 22px;
height: 24px; height: 22px;
display: block; display: block;
} }
&:hover { &:hover {
transform: translateY(-2px); transform: translateY(-2px);
border-color: rgba(207, 23, 23, 0.85); border-color: rgba(207, 23, 23, 0.75);
background: rgba(207, 23, 23, 0.15); background: rgba(207, 23, 23, 0.18);
} }
} }
} }
@@ -1213,7 +1480,51 @@ img {
&__legal { &__legal {
display: flex; display: flex;
gap: 34px; flex-wrap: wrap;
gap: 10px 24px;
}
&__messengers {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
a {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 12px;
color: rgba(255, 255, 255, 0.85) !important;
background: rgba(255, 255, 255, 0.03);
margin-top: 0 !important;
text-decoration: none !important;
transition: border-color 0.2s ease, background-color 0.2s ease;
}
a:hover {
border-color: rgba(207, 23, 23, 0.72);
background: rgba(207, 23, 23, 0.16);
}
}
&__messenger-icon {
width: 16px;
height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
svg {
width: 16px;
height: 16px;
display: block;
color: currentColor;
}
} }
} }
@@ -1304,12 +1615,11 @@ img {
.footer { .footer {
&__brand p { &__brand p {
font-size: 28px; font-size: 16px;
} }
&__nav, &__nav,
&__contacts, &__contacts {
&__social {
h4 { h4 {
font-size: 16px; font-size: 16px;
} }
@@ -1365,6 +1675,10 @@ img {
} }
} }
.reviews {
--reviews-visible: 2;
}
.highlights__grid, .highlights__grid,
.gallery__grid, .gallery__grid,
.reviews__grid, .reviews__grid,
@@ -1422,22 +1736,21 @@ img {
} }
&__brand p { &__brand p {
font-size: 22px; font-size: 16px;
margin-top: 18px; margin-top: 18px;
} }
&__nav, &__nav,
&__contacts, &__contacts {
&__social {
h4 { h4 {
font-size: 30px; font-size: 18px;
margin-bottom: 16px; margin-bottom: 16px;
} }
a, a,
span { span {
font-size: 22px; font-size: 15px;
line-height: 1.32; line-height: 1.4;
} }
} }
@@ -1451,6 +1764,19 @@ img {
} }
@include respond($bp-md) { @include respond($bp-md) {
.reviews {
--reviews-visible: 1;
&__slider {
grid-template-columns: 1fr;
gap: 12px;
}
&__nav {
display: none;
}
}
.container { .container {
padding: 0 16px; padding: 0 16px;
} }
@@ -1574,8 +1900,7 @@ img {
} }
&__nav, &__nav,
&__contacts, &__contacts {
&__social {
h4 { h4 {
font-size: 16px; font-size: 16px;
} }
@@ -1595,7 +1920,7 @@ img {
} }
.stats strong { .stats strong {
font-size: 40px; font-size: clamp(66px, 17vw, 96px);
} }
.booking-modal { .booking-modal {
@@ -1672,7 +1997,7 @@ img {
.info-card, .info-card,
.feature-card, .feature-card,
.review-card, .review-card,
.stats article, .stats__item,
.contacts-card, .contacts-card,
.hours-card, .hours-card,
.object-card__content { .object-card__content {
@@ -1718,8 +2043,8 @@ img {
} }
&__socials a { &__socials a {
width: 50px; width: 44px;
height: 50px; height: 44px;
} }
} }
} }

357
index.html
View File

@@ -33,17 +33,17 @@
лёд, залы, проживание и питание на одной территории лёд, залы, проживание и питание на одной территории
</h1> </h1>
<p> <p>
Два ледовых поля 56×26 м, универсальный зал, фитнес-центр и Два ледовых поля 58×26 м, универсальный зал, фитнес-центр и
апарт-отель на 70+ номеров. 15 минут от центра, своя парковка. апарт-отель на 70+ номеров. В пределах ТТК.
</p> </p>
<ul class="hero__tags"> <ul class="hero__tags">
<li>2 ледовых поля 56×26 м</li> <li>2 ледовых поля 58×26 м</li>
<li>Универсальный зал, фитнес и залы единоборств</li> <li>Универсальный зал, фитнес центр, и зал хореографии</li>
<li>Проживание и питание на территории</li> <li>Проживание и питание на территории</li>
</ul> </ul>
<div class="hero__actions"> <div class="hero__actions">
<a class="btn" href="#booking">Забронировать площадку</a> <a class="btn" href="#booking">Забронировать площадку</a>
<a class="btn btn--ghost" href="#">Посмотреть расписание</a> <a class="btn btn--ghost" href="#">Узнать расписание</a>
</div> </div>
</div> </div>
</section> </section>
@@ -52,7 +52,7 @@
<div class="container highlights__grid"> <div class="container highlights__grid">
<article class="info-card"> <article class="info-card">
<h3>Всё в одном месте</h3> <h3>Всё в одном месте</h3>
<p>Лёд, спортзалы, фитнес, проживание и питание — без переездов между объектами. Команда заезжает и работает по полной программе.</p> <p>Лёд, спортзалы, фитнес, проживание и питание — 5 минут от метро Волгоградский проспект, удобный заезд на автомобиле, собственная парковка для гостей комплекса</p>
</article> </article>
<article class="info-card"> <article class="info-card">
<h3>Удобная логистика</h3> <h3>Удобная логистика</h3>
@@ -77,25 +77,25 @@
</header> </header>
<article class="object-card"> <article class="object-card">
<div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('./assets/images/other/ledovie.jpg');"></div> <div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('./assets/images/renders/led.jpg');"></div>
<div class="object-card__content"> <div class="object-card__content">
<h3>Два ледовых поля</h3> <h3>Два ледовых поля</h3>
<p>Стандарт 56×26 м. Тренировки, сборы, соревнования.</p> <p>Стандарт 58×26 м. Тренировки, сборы, соревнования.</p>
<a class="btn btn--small" href="#booking">Забронировать</a> <a class="btn btn--small" href="#booking">Забронировать</a>
</div> </div>
</article> </article>
<article class="object-card object-card--reverse"> <article class="object-card object-card--reverse">
<div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('./assets/images/other/IMG_4521-min.jpg');"></div> <div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('./assets/images/renders/basket.jpg');"></div>
<div class="object-card__content"> <div class="object-card__content">
<h3>Универсальный зал</h3> <h3>Универсальный зал</h3>
<p>Паркетное покрытие. Игровые виды спорта, ОФП, турниры.</p> <p>Зал для игровых видов спорта, паркетное покрытие.</p>
<a class="btn btn--small" href="#booking">Забронировать</a> <a class="btn btn--small" href="#booking">Забронировать</a>
</div> </div>
</article> </article>
<article class="object-card"> <article class="object-card">
<div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('./assets/images/other/6399e455dd0120ee5802a0d0_643691cf6bb745.08564640.jpg');"></div> <div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('./assets/images/renders/photo_olimp_sport4.jpg');"></div>
<div class="object-card__content"> <div class="object-card__content">
<h3>Фитнес-центр</h3> <h3>Фитнес-центр</h3>
<p>Кардио, силовая и функциональная зоны. Premium-оборудование.</p> <p>Кардио, силовая и функциональная зоны. Premium-оборудование.</p>
@@ -103,26 +103,17 @@
</div> </div>
</article> </article>
<article class="object-card object-card--reverse"> <article class="object-card object-card--reverse" style="display:none;">
<div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('./assets/images/other/1231.png');"></div> <div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('./assets/images/other/1231.png');"></div>
<div class="object-card__content"> <div class="object-card__content">
<h3>Зал хореографии</h3> <h3>Зал хореографии</h3>
<p>Зеркала, станки. Танцы, групповые программы, ОФП.</p> <p>Оборудован зеркалами и станками для занятий хореографией.</p>
<a class="btn btn--small" href="#booking">Подробнее</a>
</div>
</article>
<article class="object-card">
<div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('./assets/images/other/8540eec74dd51616e6b30215183b38ad1-870x580.jpg');"></div>
<div class="object-card__content">
<h3>Зал единоборств</h3>
<p>Бокс, ММА, борьба. Ринг, татами, мешки.</p>
<a class="btn btn--small" href="#booking">Подробнее</a> <a class="btn btn--small" href="#booking">Подробнее</a>
</div> </div>
</article> </article>
<article class="object-card object-card--reverse"> <article class="object-card object-card--reverse">
<div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('./assets/images/other/6399e455dd0120ee5802a0d0_643691cf6bb745.08564640.jpg');"></div> <div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('./assets/images/renders/no_photo.png');"></div>
<div class="object-card__content"> <div class="object-card__content">
<h3>Апарт-отель</h3> <h3>Апарт-отель</h3>
<p>70+ номеров для команд и гостей. Прямо на территории.</p> <p>70+ номеров для команд и гостей. Прямо на территории.</p>
@@ -131,7 +122,7 @@
</article> </article>
<article class="object-card"> <article class="object-card">
<div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('./assets/images/other/IMG_4521-min.jpg');"></div> <div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('./assets/images/renders/photo_olimp_rest7.jpg');"></div>
<div class="object-card__content"> <div class="object-card__content">
<h3>Ресторан</h3> <h3>Ресторан</h3>
<p>Сбалансированное спортивное питание. Меню для команд.</p> <p>Сбалансированное спортивное питание. Меню для команд.</p>
@@ -140,7 +131,7 @@
</article> </article>
<article class="object-card object-card--reverse"> <article class="object-card object-card--reverse">
<div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('./assets/images/other/8540eec74dd51616e6b30215183b38ad1-870x580.jpg');"></div> <div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('./assets/images/renders/no_photo.png');"></div>
<div class="object-card__content"> <div class="object-card__content">
<h3>Парковка и подъезд</h3> <h3>Парковка и подъезд</h3>
<p>Своя парковка для гостей и автобусов команд.</p> <p>Своя парковка для гостей и автобусов команд.</p>
@@ -206,28 +197,20 @@
<div class="services__grid"> <div class="services__grid">
<a class="service-card" href="#booking"> <a class="service-card" href="#booking">
<span class="service-card__title">Аренда льда</span> <span class="service-card__title">Аренда льда</span>
<span class="service-card__description">Почасовая аренда и абонементы. Подберём удобные слоты для тренировок и матчей.</span> <span class="service-card__description">Почасовая аренда. Подберем удобные слоты для тренировок и матчей.</span>
</a> </a>
<a class="service-card" href="#booking"> <a class="service-card" href="#booking">
<span class="service-card__title">Аренда залов</span> <span class="service-card__title">Аренда залов</span>
<span class="service-card__description">Универсальный, единоборств, хореографии и фитнес-зоны для команд и индивидуальных занятий.</span> <span class="service-card__description">Полноценная инфраструктура для проведения тренировочного процесса и организации мероприятий.</span>
</a> </a>
<a class="service-card" href="#booking"> <a class="service-card" href="#booking">
<span class="service-card__title">Сборы команд под ключ</span> <span class="service-card__title">Сборы команд под ключ</span>
<span class="service-card__description">Лёд, зал, проживание и питание в одном комплексе без лишней логистики.</span> <span class="service-card__description">Лёд, зал, проживание и питание в одном комплексе без лишней логистики.</span>
</a> </a>
<a class="service-card" href="#booking">
<span class="service-card__title">Турниры и соревнования</span>
<span class="service-card__description">Подготовим площадки, организацию и инфраструктуру для событий любого уровня.</span>
</a>
<a class="service-card" href="#booking"> <a class="service-card" href="#booking">
<span class="service-card__title">Корпоративные мероприятия</span> <span class="service-card__title">Корпоративные мероприятия</span>
<span class="service-card__description">Спортивные тимбилдинги, активные форматы и сопровождение программы под задачи компании.</span> <span class="service-card__description">Спортивные тимбилдинги, активные форматы и сопровождение программы под задачи компании.</span>
</a> </a>
<a class="service-card" href="#booking">
<span class="service-card__title">Фитнес</span>
<span class="service-card__description">Индивидуальные тренировки, абонементы и групповые занятия с гибким расписанием.</span>
</a>
</div> </div>
<div class="services__cta"> <div class="services__cta">
<a class="btn services__cta-btn" href="#booking">Подобрать формат и время</a> <a class="btn services__cta-btn" href="#booking">Подобрать формат и время</a>
@@ -243,19 +226,15 @@
<div class="pricing__list"> <div class="pricing__list">
<article class="pricing-item"> <article class="pricing-item">
<h3>Аренда льда</h3> <h3>Аренда льда</h3>
<p>от Х ₽/час</p> <p>от 25.000₽/час</p>
</article> </article>
<article class="pricing-item"> <article class="pricing-item">
<h3>Аренда универсального зала</h3> <h3>Универсальный зал</h3>
<p>от Х ₽/час</p> <p>от 7.000₽/час</p>
</article> </article>
<article class="pricing-item"> <article class="pricing-item">
<h3>Сборы (пакет лёд+зал+проживание+питание на 1 чел./сутки)</h3> <h3>Фитнес центр</h3>
<p>от Х ₽</p> <p>от 3.000₽/месяц</p>
</article>
<article class="pricing-item">
<h3>Фитнес (разовое посещение / месячный абонемент)</h3>
<p>от Х ₽</p>
</article> </article>
</div> </div>
<p class="pricing__note">Точная стоимость зависит от времени, длительности и пакета услуг. Оставьте заявку — пришлём расчёт за 30 минут.</p> <p class="pricing__note">Точная стоимость зависит от времени, длительности и пакета услуг. Оставьте заявку — пришлём расчёт за 30 минут.</p>
@@ -272,45 +251,137 @@
<p>Пространства OlimpArena в деталях</p> <p>Пространства OlimpArena в деталях</p>
</header> </header>
<div class="gallery__grid"> <div class="gallery__grid">
<div class="gallery__item" style="background-image:url('./assets/images/other/1231.png');"></div> <div class="gallery__item" style="background-image:url('./assets/images/renders/basket.jpg');"></div>
<div class="gallery__item" style="background-image:url('./assets/images/other/6399e455dd0120ee5802a0d0_643691cf6bb745.08564640.jpg');"></div> <div class="gallery__item" style="background-image:url('./assets/images/renders/led.jpg');"></div>
<div class="gallery__item" style="background-image:url('./assets/images/other/8540eec74dd51616e6b30215183b38ad1-870x580.jpg');"></div> <div class="gallery__item" style="background-image:url('./assets/images/renders/ledadnbasket.jpg');"></div>
<div class="gallery__item" style="background-image:url('./assets/images/other/IMG_4521-min.jpg');"></div>
<div class="gallery__item" style="background-image:url('./assets/images/other/ledovie.jpg');"></div> <div class="gallery__item" style="background-image:url('./assets/images/other/ledovie.jpg');"></div>
<div class="gallery__item" style="background-image:url('./assets/images/other/6399e455dd0120ee5802a0d0_643691cf6bb745.08564640.jpg');"></div> <div class="gallery__item" style="background-image:url('./assets/images/renders/photo_olimp_rest1.jpg');"></div>
<div class="gallery__item" style="background-image:url('./assets/images/renders/photo_olimp_rest2.jpg');"></div>
<div class="gallery__item" style="background-image:url('./assets/images/renders/photo_olimp_rest3.jpg');"></div>
<div class="gallery__item" style="background-image:url('./assets/images/renders/photo_olimp_rest4.jpg');"></div>
<div class="gallery__item" style="background-image:url('./assets/images/renders/photo_olimp_rest5.jpg');"></div>
<div class="gallery__item" style="background-image:url('./assets/images/renders/photo_olimp_sport1.jpg');"></div>
<div class="gallery__item" style="background-image:url('./assets/images/renders/photo_olimp_sport2.jpg');"></div>
<div class="gallery__item" style="background-image:url('./assets/images/renders/photo_olimp_sport3.jpg');"></div>
</div> </div>
</div> </div>
</section> </section>
<section class="section reviews"> <section class="section reviews" id="reviews">
<div class="container"> <div class="container">
<header class="section__head"> <header class="section__head">
<h2>Отзывы</h2> <h2>Отзывы</h2>
<p>Что говорят о нас спортсмены и тренеры</p> <p>Что говорят клиенты о тренировках и сборах в OlimpArena</p>
</header> </header>
<div class="reviews__slider" data-reviews-slider>
<div class="reviews__grid"> <button class="reviews__nav reviews__nav--prev" type="button" data-reviews-prev aria-label="Предыдущий отзыв">←</button>
<article class="review-card"> <div class="reviews__viewport" data-reviews-viewport>
<p>"Лучшие ледовые условия в Москве. Качество льда на высочайшем уровне, всё организовано профессионально."</p> <div class="reviews__track" data-reviews-track>
<strong>Александр Иванов</strong> <article class="review-card">
<span>Тренер хоккейной школы</span> <p>Ледовая арена премиум-уровня с отличной локацией. Удобные раздевалки и отличный лед. Профессиональный и приветливый персонал. Лучшая арена для тренировок и соревнований</p>
</article> <div class="review-card__meta">
<article class="review-card"> <strong>Владимир Л.</strong>
<p>"Отличный комплекс для тренировок. Залы хореографии и фитнеса действительно помогают прогрессировать быстрее."</p> <a href="https://yandex.ru/maps/org/144435842347/reviews?reviews%5BpublicId%5D=1zaqed8uewrx0zdfqr75d3n8zm&si=j6p3d50uf3hwfup3ey7u8b3myg&utm_source=review" target="_blank" rel="noopener noreferrer">Читать на Яндекс Картах</a>
<strong>Елена Петрова</strong> </div>
<span>Фигуристка</span> </article>
</article> <article class="review-card">
<article class="review-card"> <p>Отличная локация, вежливый персонал, прекрасные ледовые арены, хорошо обустроенные раздевалки. Дизайнерское решение соответствует направлению. Всё очень круто!!! Обязательно посетите данное место!</p>
<p>"Проводим здесь турниры уже второй год. Профессиональный подход команды и высокая готовность площадок."</p> <div class="review-card__meta">
<strong>Дмитрий Соколов</strong> <strong>Закопайло С.</strong>
<span>Организатор турниров</span> <a href="https://yandex.ru/maps/org/144435842347/reviews?reviews%5BpublicId%5D=9g4uxhfhd4cqbjdjec0unkqzug&si=j6p3d50uf3hwfup3ey7u8b3myg&utm_source=review" target="_blank" rel="noopener noreferrer">Читать на Яндекс Картах</a>
</article> </div>
</article>
<article class="review-card">
<p>Отличная локация, отличный лед и его постоянно обновляют, очень вежливый персонал, очень приятно находиться в помещении. Очень современные место. Хорошее впечатление</p>
<div class="review-card__meta">
<strong>Ольга Р.</strong>
<a href="https://yandex.ru/maps/org/144435842347/reviews?reviews%5BpublicId%5D=vpdm0u6jzp7dcwndttf7z9akv4&si=j6p3d50uf3hwfup3ey7u8b3myg&utm_source=review" target="_blank" rel="noopener noreferrer">Читать на Яндекс Картах</a>
</div>
</article>
<article class="review-card">
<p>Побывала на экскурсии по своему направлению деятельности, понравилось все: инфраструктура комплекса, дизайн, персонал, все на высшем уровне 👍</p>
<div class="review-card__meta">
<strong>Елена Ильина</strong>
<a href="https://yandex.ru/maps/org/144435842347/reviews?reviews%5BpublicId%5D=fwfzfd88e6uq59qa8h6pv84ve0&si=j6p3d50uf3hwfup3ey7u8b3myg&utm_source=review target="_blank" rel="noopener noreferrer">Читать на Яндекс Картах</a>
</div>
</article>
<article class="review-card">
<p>Нам очень понравилась арена! Высокий уровень-комфорт, красота, расположение, персонал. Очень понравилось качество льда. Спасибо</p>
<div class="review-card__meta">
<strong>Руслан Я.</strong>
<a href="https://yandex.ru/maps/org/144435842347/reviews?reviews%5BpublicId%5D=81a1u705vn3kd0kmhdkc7qh02c&si=j6p3d50uf3hwfup3ey7u8b3myg&utm_source=review" target="_blank" rel="noopener noreferrer">Читать на Яндекс Картах</a>
</div>
</article>
<article class="review-card">
<p>Полноценное футбольное поле под крышей! Чего ещё желать? Таких объектов в Москве по пальцам одной руки можно пересчитать. И самое главное на территории легендарная футбольная школа...</p>
<div class="review-card__meta">
<strong>Andrey Kuleshov</strong>
<a href="https://yandex.ru/maps/org/144435842347/reviews?reviews%5BpublicId%5D=k1eyc820uqf5wua1ypqua8zyww&si=j6p3d50uf3hwfup3ey7u8b3myg&utm_source=review" target="_blank" rel="noopener noreferrer">Читать на Яндекс Картах</a>
</div>
</article>
<article class="review-card">
<p>Отличный лед. Приветливый персонал. Очень красиво внутри. Просторные раздевалки.</p>
<div class="review-card__meta">
<strong>Сергей рылов</strong>
<a href="https://yandex.ru/maps/org/144435842347/reviews?reviews%5BpublicId%5D=nah55c29h52e3fxw0bfuk2he1c&si=j6p3d50uf3hwfup3ey7u8b3myg&utm_source=review" target="_blank" rel="noopener noreferrer">Читать на Яндекс Картах</a>
</div>
</article>
<article class="review-card">
<p>Хороший персонал, хорошие место, хороший пк клуб. Всем советую, хороший пк клуб</p>
<div class="review-card__meta">
<strong>Иван Курцев</strong>
<a href="https://yandex.ru/maps/org/144435842347/reviews?reviews%5BpublicId%5D=af38gg3nfbrz1cnfr94peuv6zc&si=j6p3d50uf3hwfup3ey7u8b3myg&utm_source=review" target="_blank" rel="noopener noreferrer">Читать на Яндекс Картах</a>
</div>
</article>
<article class="review-card">
<p>Выглядит очень здорово. Будете в восторге от места, где найдется всем место для комфортного катания и ожидания.Отличный лед</p>
<div class="review-card__meta">
<strong>Оксана Викторовна завхоз</strong>
<a href="https://yandex.ru/maps/org/144435842347/reviews?reviews%5BpublicId%5D=rtr4medjwd3hev3138by8nw17c&si=j6p3d50uf3hwfup3ey7u8b3myg&utm_source=review" target="_blank" rel="noopener noreferrer">Читать на Яндекс Картах</a>
</div>
</article>
<article class="review-card">
<p>Отличное место для занятия спортом, очень понравилось😊 рекомендую👍</p>
<div class="review-card__meta">
<strong>Serega</strong>
<a href="https://yandex.ru/maps/org/144435842347/reviews?reviews%5BpublicId%5D=5tctvtm88tq564tc117493nqq4&si=j6p3d50uf3hwfup3ey7u8b3myg&utm_source=review" target="_blank" rel="noopener noreferrer">Читать на Яндекс Картах</a>
</div>
</article>
<article class="review-card">
<p>Отличная арена 🏒</p>
<div class="review-card__meta">
<strong>Андрей Иванов</strong>
<a href="https://yandex.ru/maps/org/144435842347/reviews?reviews%5BpublicId%5D=heccmk2e26d2bcpqtgdccq47bg&si=j6p3d50uf3hwfup3ey7u8b3myg&utm_source=review" target="_blank" rel="noopener noreferrer">Читать на Яндекс Картах</a>
</div>
</article>
</div>
</div>
<button class="reviews__nav reviews__nav--next" type="button" data-reviews-next aria-label="Следующий отзыв">→</button>
</div> </div>
<div class="reviews__dots" data-reviews-dots></div>
</div>
</section>
<div class="stats"> <section class="section facts" id="facts" style="display:none;">
<article><strong>150+</strong><span>Мест для проживания</span></article> <div class="container">
<article><strong>2</strong><span>Профессиональных ледовых поля</span></article> <header class="section__head">
<article><strong>10</strong><span>Оборудованных раздевалок</span></article> <h2>Цифры о комплексе</h2>
<p>Ключевые показатели инфраструктуры OlimpArena</p>
</header>
<div class="stats stats--facts">
<article class="stats__item">
<strong class="js-counter" data-target="70" data-suffix="+">0</strong>
<span>аппартов</span>
</article>
<article class="stats__item">
<strong class="js-counter" data-target="2">0</strong>
<span>профессиональных ледовых поля</span>
</article>
<article class="stats__item">
<strong class="js-counter" data-target="9">0</strong>
<span>оборудованных раздевалок</span>
</article>
</div> </div>
</div> </div>
</section> </section>
@@ -376,7 +447,18 @@
</span> </span>
<div class="contacts-card__item-content"> <div class="contacts-card__item-content">
<strong>Адрес</strong> <strong>Адрес</strong>
<span>Москва, в пределах ТТК<br>15 минут от м. Волгоградский проспект</span> <span>Москва, Автомобильный проезд, 4к5</span>
</div>
</li>
<li>
<span class="contacts-card__icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none">
<use href="./assets/images/svg-sprites.svg#icon-time"></use>
</svg>
</span>
<div class="contacts-card__item-content">
<strong>Режим работы</strong>
<span>Ежедневно с 06:00 до 23:00</span>
</div> </div>
</li> </li>
<li> <li>
@@ -387,7 +469,8 @@
</span> </span>
<div class="contacts-card__item-content"> <div class="contacts-card__item-content">
<strong>Телефон</strong> <strong>Телефон</strong>
<span>+7 (495) 123-45-67</span> <a style="margin-bottom:5px;" href="tel:+79251404737">+7 (925) 140-47-37</a><br>
<a href="tel:+79251404764">+7 (925) 140-47-64</a>
</div> </div>
</li> </li>
<li> <li>
@@ -398,14 +481,64 @@
</span> </span>
<div class="contacts-card__item-content"> <div class="contacts-card__item-content">
<strong>Email</strong> <strong>Email</strong>
<span>receptionadmin@o-arena.ru</span> <a href="mailto:receptionadmin@o-arena.ru">receptionadmin@o-arena.ru</a>
</div> </div>
</li> </li>
</ul> </ul>
<div class="contacts-card__links">
<a class="contacts-card__messenger" href="https://wa.me/74951234567?text=%D0%94%D0%BE%D0%B1%D1%80%D1%8B%D0%B9%20%D0%B4%D0%B5%D0%BD%D1%8C%2C%20%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D0%B5%D1%81%D1%83%D0%B5%D1%82%20%D0%B1%D1%80%D0%BE%D0%BD%D1%8C%20%D0%B2%20OlimpArena." target="_blank" rel="noopener noreferrer" aria-label="WhatsApp">
<span class="contacts-card__action-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none">
<use href="./assets/images/svg-sprites.svg#icon-whatsapp"></use>
</svg>
</span>
</a>
<a class="contacts-card__messenger contacts-card__messenger--secondary" href="https://t.me/o_arena_admin" target="_blank" rel="noopener noreferrer" aria-label="Telegram">
<span class="contacts-card__action-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none">
<use href="./assets/images/svg-sprites.svg#icon-telegram"></use>
</svg>
</span>
</a>
</div>
<div class="contacts-card__links contacts-card__links--social">
<a href="#" aria-label="ВКонтакте">
<span class="contacts-card__action-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none">
<use href="./assets/images/svg-sprites.svg#icon-vk"></use>
</svg>
</span>
</a>
<a href="#" aria-label="Instagram">
<span class="contacts-card__action-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none">
<use href="./assets/images/svg-sprites.svg#icon-instagram"></use>
</svg>
</span>
</a>
</div>
</div> </div>
<div class="hours-card"> <div class="hours-card map-card">
<h4>Режим работы</h4> <h4>Карта и маршрут</h4>
<p>Ежедневно: 06:00 — 23:00</p> <div class="map-card__embed">
<iframe title="OlimpArena на Яндекс Картах" src="https://yandex.ru/map-widget/v1/?text=%D0%9C%D0%BE%D1%81%D0%BA%D0%B2%D0%B0%2C%20%D0%90%D0%B2%D1%82%D0%BE%D0%BC%D0%BE%D0%B1%D0%B8%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9%20%D0%BF%D1%80%D0%BE%D0%B5%D0%B7%D0%B4%2C%204&z=16" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<div class="map-card__actions">
<a class="btn btn--small map-card__route" href="https://yandex.ru/maps/?rtext=~%D0%9C%D0%BE%D1%81%D0%BA%D0%B2%D0%B0%2C%20%D0%90%D0%B2%D1%82%D0%BE%D0%BC%D0%BE%D0%B1%D0%B8%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9%20%D0%BF%D1%80%D0%BE%D0%B5%D0%B7%D0%B4%2C%204&rtt=auto" target="_blank" rel="noopener noreferrer" aria-label="Построить маршрут">
<span class="map-card__action-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none">
<use href="./assets/images/svg-sprites.svg#icon-route"></use>
</svg>
</span>
</a>
<a href="https://yandex.ru/maps/?text=%D0%9C%D0%BE%D1%81%D0%BA%D0%B2%D0%B0%2C%20%D0%90%D0%B2%D1%82%D0%BE%D0%BC%D0%BE%D0%B1%D0%B8%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9%20%D0%BF%D1%80%D0%BE%D0%B5%D0%B7%D0%B4%2C%204" target="_blank" rel="noopener noreferrer" aria-label="Открыть в Яндекс Картах">
<span class="map-card__action-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none">
<use href="./assets/images/svg-sprites.svg#icon-map"></use>
</svg>
</span>
</a>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -432,44 +565,68 @@
<a class="logo" href="#top" aria-label="OlimpArena"> <a class="logo" href="#top" aria-label="OlimpArena">
<img src="./assets/images/logo.svg" alt="OlimpArena"> <img src="./assets/images/logo.svg" alt="OlimpArena">
</a> </a>
<p>Современный спортивный комплекс в центре Москвы</p> <p>OlimpArena — спорткомплекс полного цикла: ледовые арены, залы, проживание и питание на одной территории.</p>
</div> </div>
<nav class="footer__nav" aria-label="Навигация в футере"> <nav class="footer__nav" aria-label="Навигация в футере">
<h4>Навигация</h4> <h4>Объекты</h4>
<a href="#objects">Объекты</a> <a href="#objects">Объекты</a>
<a href="#services">Услуги</a> <a href="#infrastructure">Инфраструктура</a>
<a href="#gallery">Галерея</a> <a href="#gallery">Галерея</a>
<a href="#contacts">Контакты, режим работы</a> <a href="#facts">Цифры о комплексе</a>
</nav>
<nav class="footer__nav" aria-label="Услуги в футере">
<h4>Услуги</h4>
<a href="#services">Форматы аренды и мероприятий</a>
<a href="#pricing">Стоимость</a>
<a href="#booking">Оставить заявку</a>
</nav> </nav>
<div class="footer__contacts"> <div class="footer__contacts">
<h4>Контакты</h4> <h4>Контакты и режим работы</h4>
<span>+7 (495) 123-45-67</span> <a href="tel:+79251404737">+7 (925) 140-47-37</a><br>
<span>receptionadmin@o-arena.ru</span> <a href="tel:+79251404764">+7 (925) 140-47-64</a>
<span>Москва, ТТК</span> <a href="mailto:receptionadmin@o-arena.ru">receptionadmin@o-arena.ru</a>
</div> <span>Москва, Автомобильный проезд, 4</span>
<div class="footer__social"> <span>Ежедневно с 06:00 до 23:00</span>
<h4>Социальные сети</h4> <div class="footer__messengers">
<a href="https://wa.me/74951234567" target="_blank" rel="noopener noreferrer" aria-label="WhatsApp">
<span class="footer__messenger-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none">
<use href="./assets/images/svg-sprites.svg#icon-whatsapp"></use>
</svg>
</span>
</a>
<a href="https://t.me/o_arena_admin" target="_blank" rel="noopener noreferrer" aria-label="Telegram">
<span class="footer__messenger-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none">
<use href="./assets/images/svg-sprites.svg#icon-telegram"></use>
</svg>
</span>
</a>
</div>
<div class="footer__socials"> <div class="footer__socials">
<a href="#" aria-label="Instagram"> <a href="#" aria-label="Instagram">
<svg viewBox="0 0 24 24" fill="none"> <span class="footer__messenger-icon" aria-hidden="true">
<rect x="2.5" y="2.5" width="19" height="19" rx="5" stroke="currentColor" stroke-width="2"/> <svg viewBox="0 0 24 24" fill="none">
<circle cx="12" cy="12" r="4.25" stroke="currentColor" stroke-width="2"/> <use href="./assets/images/svg-sprites.svg#icon-instagram"></use>
<circle cx="17.2" cy="6.8" r="1.2" fill="currentColor"/> </svg>
</svg> </span>
</a> </a>
<a href="#" aria-label="Facebook"> <a href="#" aria-label="ВКонтакте">
<svg viewBox="0 0 24 24" fill="none"> <span class="footer__messenger-icon" aria-hidden="true">
<path d="M14.5 8H16.5V5H14C11.8 5 10 6.8 10 9V11H8V14H10V19H13V14H15.5L16 11H13V9.5C13 8.67 13.67 8 14.5 8Z" fill="currentColor"/> <svg viewBox="0 0 24 24" fill="none">
</svg> <use href="./assets/images/svg-sprites.svg#icon-vk"></use>
</svg>
</span>
</a> </a>
</div> </div>
</div> </div>
</div> </div>
<div class="footer__bottom"> <div class="footer__bottom">
<span>© 2026 OlimpArena. Все права защищены.</span> <span>© 2026 ООО «ОлимпАрена»</span>
<div class="footer__legal"> <div class="footer__legal">
<a href="#">Политика конфиденциальности</a> <a href="#">Политика конфиденциальности</a>
<a href="#">Условия использования</a> <a href="#">Договор оферты</a>
<span>ИНН 7700000000 · ОГРН 1207700000000</span>
</div> </div>
</div> </div>
</div> </div>