Compare commits
12 Commits
09a407d456
...
style/phot
| Author | SHA1 | Date | |
|---|---|---|---|
| 3dd98c874e | |||
| bd4f74acde | |||
| 382afe7694 | |||
| d426e3cb3e | |||
|
98f3d12455 | ||
| 288f028235 | |||
|
|
7ce71ffa33 | ||
|
|
1f8cb4e8c5 | ||
| 1707f05f7a | |||
|
|
429af5fa0f | ||
| 9903a824a5 | |||
|
|
e75a56cd9e |
@@ -238,7 +238,7 @@ img {
|
||||
.hero__bg {
|
||||
position: absolute;
|
||||
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 {
|
||||
content: "";
|
||||
@@ -383,7 +383,7 @@ img {
|
||||
}
|
||||
.section__head p {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 28px;
|
||||
font-size: 20px;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
@@ -616,7 +616,7 @@ img {
|
||||
justify-content: center;
|
||||
padding: 16px 18px;
|
||||
text-align: center;
|
||||
background: rgba(7, 10, 12, 0.84);
|
||||
background: rgb(7, 10, 12);
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
@@ -690,6 +690,19 @@ img {
|
||||
font-weight: 700;
|
||||
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 {
|
||||
background: linear-gradient(90deg, #293133, #20272a);
|
||||
@@ -713,16 +726,74 @@ img {
|
||||
filter: saturate(1.08);
|
||||
}
|
||||
|
||||
.reviews {
|
||||
.facts {
|
||||
background: #121212;
|
||||
background-image: url(../images/bg-pattern.svg);
|
||||
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;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 32px;
|
||||
margin-bottom: 64px;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
align-items: center;
|
||||
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 {
|
||||
@@ -730,8 +801,12 @@ img {
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
min-height: 206px;
|
||||
padding: 33px;
|
||||
flex: 0 0 calc((100% - (var(--reviews-visible) - 1) * var(--reviews-gap)) / var(--reviews-visible));
|
||||
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;
|
||||
}
|
||||
.review-card:hover {
|
||||
@@ -746,15 +821,29 @@ img {
|
||||
}
|
||||
.review-card strong {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.review-card span {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 16px;
|
||||
line-height: 1.2;
|
||||
.review-card__meta {
|
||||
padding-top: 14px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
.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 {
|
||||
@@ -762,33 +851,40 @@ img {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 32px;
|
||||
}
|
||||
.stats article {
|
||||
.stats__item {
|
||||
background: rgba(18, 18, 18, 0.4);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
border: 0;
|
||||
background: #cf1717;
|
||||
min-height: 144px;
|
||||
padding: 32px;
|
||||
min-height: 248px;
|
||||
padding: 34px 24px;
|
||||
text-align: center;
|
||||
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);
|
||||
}
|
||||
.stats strong {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 14px;
|
||||
color: #ffffff;
|
||||
font-size: 48px;
|
||||
font-size: clamp(80px, 9vw, 120px);
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
line-height: 0.9;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
.stats span {
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
line-height: 1.3;
|
||||
font-size: 19px;
|
||||
font-weight: 500;
|
||||
line-height: 1.25;
|
||||
max-width: 320px;
|
||||
}
|
||||
|
||||
.booking {
|
||||
@@ -950,11 +1046,89 @@ img {
|
||||
font-weight: 500;
|
||||
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 {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 16px;
|
||||
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 {
|
||||
margin-bottom: 16px;
|
||||
@@ -968,6 +1142,64 @@ img {
|
||||
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 {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
@@ -1073,19 +1305,19 @@ img {
|
||||
font-size: 14px;
|
||||
line-height: 1.28;
|
||||
}
|
||||
.footer__nav h4, .footer__contacts h4, .footer__social h4 {
|
||||
.footer__nav h4, .footer__contacts h4 {
|
||||
margin-bottom: 16px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
}
|
||||
.footer__nav a, .footer__contacts a, .footer__social a {
|
||||
.footer__nav a, .footer__contacts a {
|
||||
display: block;
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
font-size: 14px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
.footer__nav span, .footer__contacts span, .footer__social span {
|
||||
.footer__nav span, .footer__contacts span {
|
||||
display: block;
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
font-size: 14px;
|
||||
@@ -1093,35 +1325,36 @@ img {
|
||||
}
|
||||
.footer__nav a + a,
|
||||
.footer__nav span + span, .footer__contacts a + a,
|
||||
.footer__contacts span + span, .footer__social a + a,
|
||||
.footer__social span + span {
|
||||
.footer__contacts span + span {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.footer__socials {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
.footer__socials a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
border: 1px solid rgba(207, 23, 23, 0.5);
|
||||
border-radius: 10px;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
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.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;
|
||||
}
|
||||
.footer__socials a svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
display: block;
|
||||
}
|
||||
.footer__socials a:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: rgba(207, 23, 23, 0.85);
|
||||
background: rgba(207, 23, 23, 0.15);
|
||||
border-color: rgba(207, 23, 23, 0.75);
|
||||
background: rgba(207, 23, 23, 0.18);
|
||||
}
|
||||
.footer__bottom {
|
||||
display: flex;
|
||||
@@ -1139,7 +1372,46 @@ img {
|
||||
}
|
||||
.footer__legal {
|
||||
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) {
|
||||
@@ -1195,15 +1467,14 @@ img {
|
||||
font-size: 16px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.footer__nav a,
|
||||
.footer__nav span, .footer__contacts a,
|
||||
.footer__contacts span, .footer__social a,
|
||||
.footer__social span {
|
||||
.footer__contacts span {
|
||||
font-size: 14px;
|
||||
}
|
||||
.footer__bottom span,
|
||||
@@ -1238,6 +1509,9 @@ img {
|
||||
.hero__actions {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.reviews {
|
||||
--reviews-visible: 2;
|
||||
}
|
||||
.highlights__grid,
|
||||
.gallery__grid,
|
||||
.reviews__grid,
|
||||
@@ -1282,19 +1556,18 @@ img {
|
||||
gap: 28px;
|
||||
}
|
||||
.footer__brand p {
|
||||
font-size: 22px;
|
||||
font-size: 16px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
.footer__nav h4, .footer__contacts h4, .footer__social h4 {
|
||||
font-size: 30px;
|
||||
.footer__nav h4, .footer__contacts h4 {
|
||||
font-size: 18px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.footer__nav a,
|
||||
.footer__nav span, .footer__contacts a,
|
||||
.footer__contacts span, .footer__social a,
|
||||
.footer__social span {
|
||||
font-size: 22px;
|
||||
line-height: 1.32;
|
||||
.footer__contacts span {
|
||||
font-size: 15px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.footer__bottom span,
|
||||
.footer__bottom a {
|
||||
@@ -1302,6 +1575,16 @@ img {
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 768px) {
|
||||
.reviews {
|
||||
--reviews-visible: 1;
|
||||
}
|
||||
.reviews__slider {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
.reviews__nav {
|
||||
display: none;
|
||||
}
|
||||
.container {
|
||||
padding: 0 16px;
|
||||
}
|
||||
@@ -1387,13 +1670,12 @@ img {
|
||||
font-size: 16px;
|
||||
max-width: 100%;
|
||||
}
|
||||
.footer__nav h4, .footer__contacts h4, .footer__social h4 {
|
||||
.footer__nav h4, .footer__contacts h4 {
|
||||
font-size: 16px;
|
||||
}
|
||||
.footer__nav a,
|
||||
.footer__nav span, .footer__contacts a,
|
||||
.footer__contacts span, .footer__social a,
|
||||
.footer__social span {
|
||||
.footer__contacts span {
|
||||
font-size: 16px;
|
||||
}
|
||||
.footer__bottom span,
|
||||
@@ -1401,7 +1683,7 @@ img {
|
||||
font-size: 14px;
|
||||
}
|
||||
.stats strong {
|
||||
font-size: 40px;
|
||||
font-size: clamp(66px, 17vw, 96px);
|
||||
}
|
||||
.booking-modal__content {
|
||||
padding: 28px 18px 22px;
|
||||
@@ -1457,7 +1739,7 @@ img {
|
||||
.info-card,
|
||||
.feature-card,
|
||||
.review-card,
|
||||
.stats article,
|
||||
.stats__item,
|
||||
.contacts-card,
|
||||
.hours-card,
|
||||
.object-card__content {
|
||||
@@ -1492,8 +1774,8 @@ img {
|
||||
gap: 20px;
|
||||
}
|
||||
.footer__socials a {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
}
|
||||
@media (hover: none) {
|
||||
|
||||
2
assets/css/main.min.css
vendored
2
assets/css/main.min.css
vendored
File diff suppressed because one or more lines are too long
BIN
assets/images/renders/basket.jpg
Normal file
BIN
assets/images/renders/basket.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 157 KiB |
BIN
assets/images/renders/led.jpg
Normal file
BIN
assets/images/renders/led.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 138 KiB |
BIN
assets/images/renders/ledadnbasket.jpg
Normal file
BIN
assets/images/renders/ledadnbasket.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 159 KiB |
BIN
assets/images/renders/no_photo.png
Normal file
BIN
assets/images/renders/no_photo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
assets/images/renders/photo_olimp_rest1.jpg
Normal file
BIN
assets/images/renders/photo_olimp_rest1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 115 KiB |
BIN
assets/images/renders/photo_olimp_rest2.jpg
Normal file
BIN
assets/images/renders/photo_olimp_rest2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
BIN
assets/images/renders/photo_olimp_rest3.jpg
Normal file
BIN
assets/images/renders/photo_olimp_rest3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 113 KiB |
BIN
assets/images/renders/photo_olimp_rest4.jpg
Normal file
BIN
assets/images/renders/photo_olimp_rest4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 123 KiB |
BIN
assets/images/renders/photo_olimp_rest5.jpg
Normal file
BIN
assets/images/renders/photo_olimp_rest5.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 122 KiB |
BIN
assets/images/renders/photo_olimp_rest6.jpg
Normal file
BIN
assets/images/renders/photo_olimp_rest6.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
BIN
assets/images/renders/photo_olimp_rest7.jpg
Normal file
BIN
assets/images/renders/photo_olimp_rest7.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
BIN
assets/images/renders/photo_olimp_sport1.jpg
Normal file
BIN
assets/images/renders/photo_olimp_sport1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 141 KiB |
BIN
assets/images/renders/photo_olimp_sport2.jpg
Normal file
BIN
assets/images/renders/photo_olimp_sport2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 202 KiB |
BIN
assets/images/renders/photo_olimp_sport3.jpg
Normal file
BIN
assets/images/renders/photo_olimp_sport3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 150 KiB |
BIN
assets/images/renders/photo_olimp_sport4.jpg
Normal file
BIN
assets/images/renders/photo_olimp_sport4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 197 KiB |
@@ -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="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 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>
|
||||
|
||||
@@ -55,6 +55,186 @@
|
||||
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 successModal = document.getElementById("booking-success-modal");
|
||||
|
||||
@@ -194,7 +194,7 @@ img {
|
||||
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;
|
||||
url("../images/renders/led.jpg") center / cover no-repeat;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
@@ -363,7 +363,7 @@ img {
|
||||
|
||||
p {
|
||||
color: $color-text-soft;
|
||||
font-size: 28px;
|
||||
font-size: 20px;
|
||||
line-height: 1.15;
|
||||
}
|
||||
}
|
||||
@@ -625,7 +625,7 @@ img {
|
||||
justify-content: center;
|
||||
padding: 16px 18px;
|
||||
text-align: center;
|
||||
background: rgba(7, 10, 12, 0.84);
|
||||
background: rgba(7, 10, 12, 1);
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
color: $color-text-muted;
|
||||
@@ -707,6 +707,22 @@ img {
|
||||
font-weight: 700;
|
||||
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-image: url(../images/bg-pattern.svg);
|
||||
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;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 32px;
|
||||
margin-bottom: 64px;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
align-items: center;
|
||||
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 {
|
||||
@include card;
|
||||
min-height: 206px;
|
||||
padding: 33px;
|
||||
flex: 0 0 calc((100% - (var(--reviews-visible) - 1) * var(--reviews-gap)) / var(--reviews-visible));
|
||||
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;
|
||||
|
||||
&:hover {
|
||||
@@ -768,16 +855,32 @@ img {
|
||||
|
||||
strong {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
span {
|
||||
color: $color-text-muted;
|
||||
font-size: 16px;
|
||||
line-height: 1.2;
|
||||
&__meta {
|
||||
padding-top: 14px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||
|
||||
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));
|
||||
gap: 32px;
|
||||
|
||||
article {
|
||||
&__item {
|
||||
@include card;
|
||||
border: 0;
|
||||
background: $color-accent;
|
||||
min-height: 144px;
|
||||
padding: 32px;
|
||||
min-height: 248px;
|
||||
padding: 34px 24px;
|
||||
text-align: center;
|
||||
transition: transform 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
@@ -802,17 +909,20 @@ img {
|
||||
|
||||
strong {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 14px;
|
||||
color: $color-text;
|
||||
font-size: 48px;
|
||||
font-size: clamp(80px, 9vw, 120px);
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
line-height: 0.9;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
span {
|
||||
color: $color-text;
|
||||
font-size: 16px;
|
||||
line-height: 1.3;
|
||||
font-size: 19px;
|
||||
font-weight: 500;
|
||||
line-height: 1.25;
|
||||
max-width: 320px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -991,11 +1101,100 @@ img {
|
||||
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 {
|
||||
color: $color-text-soft;
|
||||
font-size: 16px;
|
||||
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 {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
@@ -1136,8 +1402,7 @@ img {
|
||||
}
|
||||
|
||||
&__nav,
|
||||
&__contacts,
|
||||
&__social {
|
||||
&__contacts {
|
||||
h4 {
|
||||
margin-bottom: 16px;
|
||||
font-size: 16px;
|
||||
@@ -1167,30 +1432,32 @@ img {
|
||||
|
||||
&__socials {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
|
||||
a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
border: 1px solid rgba(207, 23, 23, 0.5);
|
||||
border-radius: 10px;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
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.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;
|
||||
|
||||
svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: rgba(207, 23, 23, 0.85);
|
||||
background: rgba(207, 23, 23, 0.15);
|
||||
border-color: rgba(207, 23, 23, 0.75);
|
||||
background: rgba(207, 23, 23, 0.18);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1213,7 +1480,51 @@ img {
|
||||
|
||||
&__legal {
|
||||
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 {
|
||||
&__brand p {
|
||||
font-size: 28px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&__nav,
|
||||
&__contacts,
|
||||
&__social {
|
||||
&__contacts {
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
}
|
||||
@@ -1365,6 +1675,10 @@ img {
|
||||
}
|
||||
}
|
||||
|
||||
.reviews {
|
||||
--reviews-visible: 2;
|
||||
}
|
||||
|
||||
.highlights__grid,
|
||||
.gallery__grid,
|
||||
.reviews__grid,
|
||||
@@ -1422,22 +1736,21 @@ img {
|
||||
}
|
||||
|
||||
&__brand p {
|
||||
font-size: 22px;
|
||||
font-size: 16px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
&__nav,
|
||||
&__contacts,
|
||||
&__social {
|
||||
&__contacts {
|
||||
h4 {
|
||||
font-size: 30px;
|
||||
font-size: 18px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
a,
|
||||
span {
|
||||
font-size: 22px;
|
||||
line-height: 1.32;
|
||||
font-size: 15px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1451,6 +1764,19 @@ img {
|
||||
}
|
||||
|
||||
@include respond($bp-md) {
|
||||
.reviews {
|
||||
--reviews-visible: 1;
|
||||
|
||||
&__slider {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
&__nav {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 0 16px;
|
||||
}
|
||||
@@ -1574,8 +1900,7 @@ img {
|
||||
}
|
||||
|
||||
&__nav,
|
||||
&__contacts,
|
||||
&__social {
|
||||
&__contacts {
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
}
|
||||
@@ -1595,7 +1920,7 @@ img {
|
||||
}
|
||||
|
||||
.stats strong {
|
||||
font-size: 40px;
|
||||
font-size: clamp(66px, 17vw, 96px);
|
||||
}
|
||||
|
||||
.booking-modal {
|
||||
@@ -1672,7 +1997,7 @@ img {
|
||||
.info-card,
|
||||
.feature-card,
|
||||
.review-card,
|
||||
.stats article,
|
||||
.stats__item,
|
||||
.contacts-card,
|
||||
.hours-card,
|
||||
.object-card__content {
|
||||
@@ -1718,8 +2043,8 @@ img {
|
||||
}
|
||||
|
||||
&__socials a {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
357
index.html
357
index.html
@@ -33,17 +33,17 @@
|
||||
лёд, залы, проживание и питание на одной территории
|
||||
</h1>
|
||||
<p>
|
||||
Два ледовых поля 56×26 м, универсальный зал, фитнес-центр и
|
||||
апарт-отель на 70+ номеров. 15 минут от центра, своя парковка.
|
||||
Два ледовых поля 58×26 м, универсальный зал, фитнес-центр и
|
||||
апарт-отель на 70+ номеров. В пределах ТТК.
|
||||
</p>
|
||||
<ul class="hero__tags">
|
||||
<li>2 ледовых поля 56×26 м</li>
|
||||
<li>Универсальный зал, фитнес и залы единоборств</li>
|
||||
<li>2 ледовых поля 58×26 м</li>
|
||||
<li>Универсальный зал, фитнес центр, и зал хореографии</li>
|
||||
<li>Проживание и питание на территории</li>
|
||||
</ul>
|
||||
<div class="hero__actions">
|
||||
<a class="btn" href="#booking">Забронировать площадку</a>
|
||||
<a class="btn btn--ghost" href="#">Посмотреть расписание</a>
|
||||
<a class="btn btn--ghost" href="#">Узнать расписание</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -52,7 +52,7 @@
|
||||
<div class="container highlights__grid">
|
||||
<article class="info-card">
|
||||
<h3>Всё в одном месте</h3>
|
||||
<p>Лёд, спортзалы, фитнес, проживание и питание — без переездов между объектами. Команда заезжает и работает по полной программе.</p>
|
||||
<p>Лёд, спортзалы, фитнес, проживание и питание — 5 минут от метро Волгоградский проспект, удобный заезд на автомобиле, собственная парковка для гостей комплекса</p>
|
||||
</article>
|
||||
<article class="info-card">
|
||||
<h3>Удобная логистика</h3>
|
||||
@@ -77,25 +77,25 @@
|
||||
</header>
|
||||
|
||||
<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">
|
||||
<h3>Два ледовых поля</h3>
|
||||
<p>Стандарт 56×26 м. Тренировки, сборы, соревнования.</p>
|
||||
<p>Стандарт 58×26 м. Тренировки, сборы, соревнования.</p>
|
||||
<a class="btn btn--small" href="#booking">Забронировать</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<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">
|
||||
<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/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">
|
||||
<h3>Фитнес-центр</h3>
|
||||
<p>Кардио, силовая и функциональная зоны. Premium-оборудование.</p>
|
||||
@@ -103,26 +103,17 @@
|
||||
</div>
|
||||
</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__content">
|
||||
<h3>Зал хореографии</h3>
|
||||
<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>
|
||||
<p>Оборудован зеркалами и станками для занятий хореографией.</p>
|
||||
<a class="btn btn--small" href="#booking">Подробнее</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<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">
|
||||
<h3>Апарт-отель</h3>
|
||||
<p>70+ номеров для команд и гостей. Прямо на территории.</p>
|
||||
@@ -131,7 +122,7 @@
|
||||
</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/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">
|
||||
<h3>Ресторан</h3>
|
||||
<p>Сбалансированное спортивное питание. Меню для команд.</p>
|
||||
@@ -140,7 +131,7 @@
|
||||
</article>
|
||||
|
||||
<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">
|
||||
<h3>Парковка и подъезд</h3>
|
||||
<p>Своя парковка для гостей и автобусов команд.</p>
|
||||
@@ -206,28 +197,20 @@
|
||||
<div class="services__grid">
|
||||
<a class="service-card" href="#booking">
|
||||
<span class="service-card__title">Аренда льда</span>
|
||||
<span class="service-card__description">Почасовая аренда и абонементы. Подберём удобные слоты для тренировок и матчей.</span>
|
||||
<span class="service-card__description">Почасовая аренда. Подберем удобные слоты для тренировок и матчей.</span>
|
||||
</a>
|
||||
<a class="service-card" href="#booking">
|
||||
<span class="service-card__title">Аренда залов</span>
|
||||
<span class="service-card__description">Универсальный, единоборств, хореографии и фитнес-зоны для команд и индивидуальных занятий.</span>
|
||||
<span class="service-card__description">Полноценная инфраструктура для проведения тренировочного процесса и организации мероприятий.</span>
|
||||
</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">
|
||||
<span class="service-card__title">Турниры и соревнования</span>
|
||||
<span class="service-card__description">Подготовим площадки, организацию и инфраструктуру для событий любого уровня.</span>
|
||||
</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">
|
||||
<span class="service-card__title">Фитнес</span>
|
||||
<span class="service-card__description">Индивидуальные тренировки, абонементы и групповые занятия с гибким расписанием.</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="services__cta">
|
||||
<a class="btn services__cta-btn" href="#booking">Подобрать формат и время</a>
|
||||
@@ -243,19 +226,15 @@
|
||||
<div class="pricing__list">
|
||||
<article class="pricing-item">
|
||||
<h3>Аренда льда</h3>
|
||||
<p>от Х ₽/час</p>
|
||||
<p>от 25.000₽/час</p>
|
||||
</article>
|
||||
<article class="pricing-item">
|
||||
<h3>Аренда универсального зала</h3>
|
||||
<p>от Х ₽/час</p>
|
||||
<h3>Универсальный зал</h3>
|
||||
<p>от 7.000₽/час</p>
|
||||
</article>
|
||||
<article class="pricing-item">
|
||||
<h3>Сборы (пакет лёд+зал+проживание+питание на 1 чел./сутки)</h3>
|
||||
<p>от Х ₽</p>
|
||||
</article>
|
||||
<article class="pricing-item">
|
||||
<h3>Фитнес (разовое посещение / месячный абонемент)</h3>
|
||||
<p>от Х ₽</p>
|
||||
<h3>Фитнес центр</h3>
|
||||
<p>от 3.000₽/месяц</p>
|
||||
</article>
|
||||
</div>
|
||||
<p class="pricing__note">Точная стоимость зависит от времени, длительности и пакета услуг. Оставьте заявку — пришлём расчёт за 30 минут.</p>
|
||||
@@ -272,45 +251,137 @@
|
||||
<p>Пространства OlimpArena в деталях</p>
|
||||
</header>
|
||||
<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/other/6399e455dd0120ee5802a0d0_643691cf6bb745.08564640.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/other/IMG_4521-min.jpg');"></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/renders/led.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/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>
|
||||
</section>
|
||||
|
||||
<section class="section reviews">
|
||||
<section class="section reviews" id="reviews">
|
||||
<div class="container">
|
||||
<header class="section__head">
|
||||
<h2>Отзывы</h2>
|
||||
<p>Что говорят о нас спортсмены и тренеры</p>
|
||||
<p>Что говорят клиенты о тренировках и сборах в OlimpArena</p>
|
||||
</header>
|
||||
|
||||
<div class="reviews__grid">
|
||||
<article class="review-card">
|
||||
<p>"Лучшие ледовые условия в Москве. Качество льда на высочайшем уровне, всё организовано профессионально."</p>
|
||||
<strong>Александр Иванов</strong>
|
||||
<span>Тренер хоккейной школы</span>
|
||||
</article>
|
||||
<article class="review-card">
|
||||
<p>"Отличный комплекс для тренировок. Залы хореографии и фитнеса действительно помогают прогрессировать быстрее."</p>
|
||||
<strong>Елена Петрова</strong>
|
||||
<span>Фигуристка</span>
|
||||
</article>
|
||||
<article class="review-card">
|
||||
<p>"Проводим здесь турниры уже второй год. Профессиональный подход команды и высокая готовность площадок."</p>
|
||||
<strong>Дмитрий Соколов</strong>
|
||||
<span>Организатор турниров</span>
|
||||
</article>
|
||||
<div class="reviews__slider" data-reviews-slider>
|
||||
<button class="reviews__nav reviews__nav--prev" type="button" data-reviews-prev aria-label="Предыдущий отзыв">←</button>
|
||||
<div class="reviews__viewport" data-reviews-viewport>
|
||||
<div class="reviews__track" data-reviews-track>
|
||||
<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=1zaqed8uewrx0zdfqr75d3n8zm&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=9g4uxhfhd4cqbjdjec0unkqzug&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=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 class="reviews__dots" data-reviews-dots></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="stats">
|
||||
<article><strong>150+</strong><span>Мест для проживания</span></article>
|
||||
<article><strong>2</strong><span>Профессиональных ледовых поля</span></article>
|
||||
<article><strong>10</strong><span>Оборудованных раздевалок</span></article>
|
||||
<section class="section facts" id="facts" style="display:none;">
|
||||
<div class="container">
|
||||
<header class="section__head">
|
||||
<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>
|
||||
</section>
|
||||
@@ -376,7 +447,18 @@
|
||||
</span>
|
||||
<div class="contacts-card__item-content">
|
||||
<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>
|
||||
</li>
|
||||
<li>
|
||||
@@ -387,7 +469,8 @@
|
||||
</span>
|
||||
<div class="contacts-card__item-content">
|
||||
<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>
|
||||
</li>
|
||||
<li>
|
||||
@@ -398,14 +481,64 @@
|
||||
</span>
|
||||
<div class="contacts-card__item-content">
|
||||
<strong>Email</strong>
|
||||
<span>receptionadmin@o-arena.ru</span>
|
||||
<a href="mailto:receptionadmin@o-arena.ru">receptionadmin@o-arena.ru</a>
|
||||
</div>
|
||||
</li>
|
||||
</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 class="hours-card">
|
||||
<h4>Режим работы</h4>
|
||||
<p>Ежедневно: 06:00 — 23:00</p>
|
||||
<div class="hours-card map-card">
|
||||
<h4>Карта и маршрут</h4>
|
||||
<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>
|
||||
@@ -432,44 +565,68 @@
|
||||
<a class="logo" href="#top" aria-label="OlimpArena">
|
||||
<img src="./assets/images/logo.svg" alt="OlimpArena">
|
||||
</a>
|
||||
<p>Современный спортивный комплекс в центре Москвы</p>
|
||||
<p>OlimpArena — спорткомплекс полного цикла: ледовые арены, залы, проживание и питание на одной территории.</p>
|
||||
</div>
|
||||
<nav class="footer__nav" aria-label="Навигация в футере">
|
||||
<h4>Навигация</h4>
|
||||
<h4>Объекты</h4>
|
||||
<a href="#objects">Объекты</a>
|
||||
<a href="#services">Услуги</a>
|
||||
<a href="#infrastructure">Инфраструктура</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>
|
||||
<div class="footer__contacts">
|
||||
<h4>Контакты</h4>
|
||||
<span>+7 (495) 123-45-67</span>
|
||||
<span>receptionadmin@o-arena.ru</span>
|
||||
<span>Москва, ТТК</span>
|
||||
</div>
|
||||
<div class="footer__social">
|
||||
<h4>Социальные сети</h4>
|
||||
<h4>Контакты и режим работы</h4>
|
||||
<a href="tel:+79251404737">+7 (925) 140-47-37</a><br>
|
||||
<a href="tel:+79251404764">+7 (925) 140-47-64</a>
|
||||
<a href="mailto:receptionadmin@o-arena.ru">receptionadmin@o-arena.ru</a>
|
||||
<span>Москва, Автомобильный проезд, 4</span>
|
||||
<span>Ежедневно с 06:00 до 23:00</span>
|
||||
<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">
|
||||
<a href="#" aria-label="Instagram">
|
||||
<svg 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"/>
|
||||
</svg>
|
||||
<span class="footer__messenger-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>
|
||||
<a href="#" aria-label="Facebook">
|
||||
<svg viewBox="0 0 24 24" fill="none">
|
||||
<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>
|
||||
<a href="#" aria-label="ВКонтакте">
|
||||
<span class="footer__messenger-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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer__bottom">
|
||||
<span>© 2026 OlimpArena. Все права защищены.</span>
|
||||
<span>© 2026 ООО «ОлимпАрена»</span>
|
||||
<div class="footer__legal">
|
||||
<a href="#">Политика конфиденциальности</a>
|
||||
<a href="#">Условия использования</a>
|
||||
<a href="#">Договор оферты</a>
|
||||
<span>ИНН 7700000000 · ОГРН 1207700000000</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user