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

Compare commits

base: adcovn:86024ba0b73b40247f122a060cdca2b09fc18645
Branches Tags
adcovn:main adcovn:style/design adcovn:style/photo-all adcovn:style/all
...
compare: adcovn:6bb7c2cf6c08f7973b8573d1c80059a1cf84f5df
Branches Tags
adcovn:main adcovn:style/design adcovn:style/photo-all adcovn:style/all

3 Commits
86024ba0b7 ... 6bb7c2cf6c

Author SHA1 Message Date
artem
6bb7c2cf6c Merge pull request 'style/design' (#19) from style/design into main
All checks were successful
Deploy Olimparena / deploy (push) Successful in 15s
Details 
Reviewed-on: #19
 2026-06-04 13:47:09 +00:00
Artem
ac6ddd0b96 style: add some style 2026-06-04 16:45:02 +03:00
Artem
f77ca86e81 Fix font size conflict 2026-06-04 16:43:17 +03:00
5 changed files with 189 additions and 80 deletions
Expand all files Collapse all files

101
assets/css/main.css
View File

@@ -1,4 +1,4 @@
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Montserrat:wght@700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;700&family=Montserrat:wght@100;300;400;500;600;700&display=swap");
/* http://meyerweb.com/eric/tools/css/reset/ /* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126 v2.0 | 20110126
License: none (public domain) License: none (public domain)
@@ -237,6 +237,7 @@ img {
} }
.hero__bg { .hero__bg {
position: absolute; position: absolute;
filter: blur(3px);
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/renders/led.jpg") 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;
} }
@@ -253,7 +254,7 @@ img {
max-width: 1000px; max-width: 1000px;
margin-left: 528px; margin-left: 528px;
padding-top: 104px; padding-top: 104px;
padding-bottom: 50px; padding-bottom: 100px;
} }
.hero__content > * { .hero__content > * {
opacity: 0; opacity: 0;
@@ -285,25 +286,30 @@ img {
max-width: 768px; max-width: 768px;
margin-bottom: 32px; margin-bottom: 32px;
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
font-size: 20px; font-size: 23px;
line-height: 32px; line-height: 1.5;
font-weight: 300;
} }
.hero__tags { .hero__tags {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 12px; gap: 12px;
margin-bottom: 28px; margin-bottom: 15px;
} }
.hero__tags li { .hero__tags li {
padding: 9px 17px; padding: 20px 20px;
border: 1px solid rgba(207, 23, 23, 0.3); border: 1px solid rgba(207, 23, 23, 0.3);
border-radius: 999px; /*background: rgba(41, 49, 51, 0.6);*/
background: rgba(41, 49, 51, 0.6);
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 300;
line-height: 20px; line-height: 20px;
white-space: nowrap; white-space: nowrap;
transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease; transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
background-color: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(53px);
-webkit-backdrop-filter: blur(10px);
border: 0px solid rgba(255, 255, 255, 0.3);
border-radius: 12px;
} }
.hero__tags li:hover { .hero__tags li:hover {
transform: translateY(-1px); transform: translateY(-1px);
@@ -314,6 +320,11 @@ img {
display: flex; display: flex;
gap: 16px; gap: 16px;
} }
.hero__actions .btn {
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
}
.highlights { .highlights {
background: linear-gradient(90deg, #293133, #20272a); background: linear-gradient(90deg, #293133, #20272a);
@@ -331,7 +342,7 @@ img {
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: 178px; min-height: 178px;
padding: 33px; padding: 40px;
transition: transform 0.3s ease, border-color 0.3s ease, background-color 0.3s ease; transition: transform 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
} }
.info-card:hover { .info-card:hover {
@@ -342,13 +353,14 @@ img {
.info-card h3 { .info-card h3 {
margin-bottom: 8px; margin-bottom: 8px;
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 500;
line-height: 28px; line-height: 28px;
} }
.info-card p { .info-card p {
color: rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 0.7);
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 1.5;
font-weight: 200;
} }
.section { .section {
@@ -383,8 +395,9 @@ img {
} }
.section__head p { .section__head p {
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
font-size: 20px; font-size: 22px;
line-height: 1.15; line-height: 1.15;
font-weight: 200;
} }
.infrastructure { .infrastructure {
@@ -399,8 +412,8 @@ img {
line-height: 1.05; line-height: 1.05;
} }
.infrastructure .section__head p { .infrastructure .section__head p {
font-size: 20px; font-size: 22px;
font-weight: 400; font-weight: 200;
line-height: 1.2; line-height: 1.2;
} }
.infrastructure__grid { .infrastructure__grid {
@@ -505,12 +518,23 @@ img {
font-size: 34px; font-size: 34px;
font-weight: 700; font-weight: 700;
line-height: 1.1; line-height: 1.1;
font-weight: 600;
} }
.object-card__content p { .object-card__content p {
margin-bottom: 24px; margin-bottom: 24px;
color: rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 0.7);
font-size: 18px; font-size: 18px;
line-height: 28px; line-height: 28px;
font-weight: 300;
}
.object-card__content a.btn {
min-width: 200px;
width: 40%;
padding: 10px 24px;
border-radius: 10px;
font-size: 14px;
text-transform: uppercase;
font-weight: 300;
} }
.object-card__content ul { .object-card__content ul {
margin-bottom: 24px; margin-bottom: 24px;
@@ -556,12 +580,12 @@ img {
line-height: 1.05; line-height: 1.05;
} }
.services .section__head p { .services .section__head p {
font-size: 20px; font-size: 22px;
line-height: 1.2; line-height: 1.2;
} }
.services__grid { .services__grid {
display: grid; display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px; gap: 18px;
width: 100%; width: 100%;
max-width: 896px; max-width: 896px;
@@ -601,7 +625,7 @@ img {
display: block; display: block;
font-family: "Montserrat", "Inter", "Segoe UI", "Segoe UI Variable", "Helvetica Neue", Arial, sans-serif; font-family: "Montserrat", "Inter", "Segoe UI", "Segoe UI Variable", "Helvetica Neue", Arial, sans-serif;
font-size: 21px; font-size: 21px;
font-weight: 700; font-weight: 500;
line-height: 1.15; line-height: 1.15;
position: relative; position: relative;
z-index: 1; z-index: 1;
@@ -620,8 +644,8 @@ img {
opacity: 0; opacity: 0;
transform: translateY(10px); transform: translateY(10px);
color: rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 0.7);
font-size: 15px; font-size: 16px;
font-weight: 500; font-weight: 400;
line-height: 1.45; line-height: 1.45;
pointer-events: none; pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease; transition: opacity 0.25s ease, transform 0.25s ease;
@@ -649,10 +673,15 @@ img {
} }
.pricing__list { .pricing__list {
display: grid; display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px; gap: 18px;
margin-bottom: 28px; margin-bottom: 28px;
} }
@media (max-width: 768px) {
.pricing__list {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
}
.pricing__note { .pricing__note {
margin-bottom: 30px; margin-bottom: 30px;
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
@@ -676,7 +705,7 @@ img {
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: 144px; min-height: 144px;
padding: 24px; padding: 40px;
} }
.pricing-item h3 { .pricing-item h3 {
margin-bottom: 10px; margin-bottom: 10px;
@@ -692,8 +721,9 @@ img {
} }
@media (max-width: 600px) { @media (max-width: 600px) {
.pricing-item { .pricing-item {
padding: 16px; padding: 40px;
min-height: auto; min-height: auto;
text-align: center;
} }
.pricing-item h3 { .pricing-item h3 {
font-size: 16px; font-size: 16px;
@@ -808,6 +838,7 @@ img {
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
transition: transform 0.3s ease, border-color 0.3s ease; transition: transform 0.3s ease, border-color 0.3s ease;
margin-top: 5px;
} }
.review-card:hover { .review-card:hover {
transform: translateY(-5px); transform: translateY(-5px);
@@ -818,12 +849,14 @@ img {
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
font-size: 16px; font-size: 16px;
line-height: 1.5; line-height: 1.5;
font-weight: 200;
font-style: italic;
} }
.review-card strong { .review-card strong {
display: block; display: block;
margin-bottom: 10px; margin-bottom: 10px;
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 400;
line-height: 1.2; line-height: 1.2;
} }
.review-card__meta { .review-card__meta {
@@ -831,14 +864,16 @@ img {
border-top: 1px solid rgba(255, 255, 255, 0.08); border-top: 1px solid rgba(255, 255, 255, 0.08);
} }
.review-card__meta a { .review-card__meta a {
color: #ffd2d2; /*color: #ffd2d2;*/
color: rgba(223, 223, 223, 0.2901960784);
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
line-height: 1.4; line-height: 1.4;
text-decoration: underline; text-decoration: underline;
text-underline-offset: 2px; text-underline-offset: 2px;
text-decoration-thickness: 1px; text-decoration-thickness: 1px;
text-decoration-color: rgba(255, 210, 210, 0.75); /*text-decoration-color: rgba(255, 210, 210, 0.75);*/
text-decoration-color: rgba(169, 169, 169, 0.28);
transition: color 0.2s ease, text-decoration-color 0.2s ease; transition: color 0.2s ease, text-decoration-color 0.2s ease;
} }
.review-card__meta a:hover { .review-card__meta a:hover {
@@ -904,8 +939,8 @@ img {
.booking p { .booking p {
margin-bottom: 32px; margin-bottom: 32px;
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
font-size: 18px; font-size: 19px;
font-weight: 500; font-weight: 200;
line-height: 1.4; line-height: 1.4;
} }
.booking form { .booking form {
@@ -1080,7 +1115,7 @@ img {
height: 44px; height: 44px;
padding: 0; padding: 0;
border: 1px solid rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 999px; border-radius: 12px;
background: rgba(255, 255, 255, 0.04); background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.92); color: rgba(255, 255, 255, 0.92);
text-decoration: none; text-decoration: none;
@@ -1303,19 +1338,21 @@ img {
margin-top: 16px; margin-top: 16px;
color: rgba(255, 255, 255, 0.65); color: rgba(255, 255, 255, 0.65);
font-size: 14px; font-size: 14px;
line-height: 1.28; line-height: 1.5;
font-weight: 300;
} }
.footer__nav h4, .footer__contacts h4 { .footer__nav h4, .footer__contacts h4 {
margin-bottom: 16px; margin-bottom: 16px;
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 600;
line-height: 1.1; line-height: 1.1;
} }
.footer__nav a, .footer__contacts 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.5;
font-weight: 300;
} }
.footer__nav span, .footer__contacts span { .footer__nav span, .footer__contacts span {
display: block; display: block;

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

File diff suppressed because one or more lines are too long

103
assets/scss/_base.scss
View File

@@ -191,6 +191,7 @@ img {
&__bg { &__bg {
position: absolute; position: absolute;
filter: blur(3px);
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%),
@@ -213,7 +214,7 @@ img {
max-width: 1000px; max-width: 1000px;
margin-left: 528px; margin-left: 528px;
padding-top: 104px; padding-top: 104px;
padding-bottom: 50px; padding-bottom: 100px;
> * { > * {
opacity: 0; opacity: 0;
@@ -253,27 +254,33 @@ img {
max-width: 768px; max-width: 768px;
margin-bottom: 32px; margin-bottom: 32px;
color: $color-text-soft; color: $color-text-soft;
font-size: 20px; font-size: 23px;
line-height: 32px; line-height: 1.5;
font-weight:300;
} }
&__tags { &__tags {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 12px; gap: 12px;
margin-bottom: 28px; margin-bottom: 15px;
li { li {
padding: 9px 17px; padding: 20px 20px;
border: 1px solid $color-border-strong; border: 1px solid $color-border-strong;
border-radius: 999px; /*background: rgba(41, 49, 51, 0.6);*/
background: rgba(41, 49, 51, 0.6);
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 300;
line-height: 20px; line-height: 20px;
white-space: nowrap; white-space: nowrap;
transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease; transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
background-color: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(53px);
-webkit-backdrop-filter: blur(10px);
border: 0px solid rgba(255, 255, 255, 0.3);
border-radius: 12px;
&:hover { &:hover {
transform: translateY(-1px); transform: translateY(-1px);
border-color: rgba(207, 23, 23, 0.55); border-color: rgba(207, 23, 23, 0.55);
@@ -285,6 +292,12 @@ img {
&__actions { &__actions {
display: flex; display: flex;
gap: 16px; gap: 16px;
.btn{
font-size:14px;
font-weight:600;
text-transform:uppercase;
}
} }
} }
@@ -302,7 +315,7 @@ img {
.info-card { .info-card {
@include card; @include card;
min-height: 178px; min-height: 178px;
padding: 33px; padding: 40px;
transition: transform 0.3s ease, border-color 0.3s ease, background-color 0.3s ease; transition: transform 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
&:hover { &:hover {
@@ -314,14 +327,15 @@ img {
h3 { h3 {
margin-bottom: 8px; margin-bottom: 8px;
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 500;
line-height: 28px; line-height: 28px;
} }
p { p {
color: $color-text-muted; color: $color-text-muted;
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 1.5;
font-weight:200;
} }
} }
@@ -363,8 +377,9 @@ img {
p { p {
color: $color-text-soft; color: $color-text-soft;
font-size: 20px; font-size: 22px;
line-height: 1.15; line-height: 1.15;
font-weight:200;
} }
} }
} }
@@ -382,8 +397,8 @@ img {
} }
p { p {
font-size: 20px; font-size: 22px;
font-weight: 400; font-weight: 200;
line-height: 1.2; line-height: 1.2;
} }
} }
@@ -496,6 +511,7 @@ img {
font-size: 34px; font-size: 34px;
font-weight: 700; font-weight: 700;
line-height: 1.1; line-height: 1.1;
font-weight: 600;
} }
p { p {
@@ -503,8 +519,19 @@ img {
color: $color-text-muted; color: $color-text-muted;
font-size: 18px; font-size: 18px;
line-height: 28px; line-height: 28px;
font-weight:300;
} }
a.btn{
min-width: 200px;
width: 40%;
padding: 10px 24px;
border-radius: 10px;
font-size: 14px;
text-transform: uppercase;
font-weight:300;
}
ul { ul {
margin-bottom: 24px; margin-bottom: 24px;
} }
@@ -559,14 +586,14 @@ img {
} }
p { p {
font-size: 20px; font-size: 22px;
line-height: 1.2; line-height: 1.2;
} }
} }
&__grid { &__grid {
display: grid; display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px; gap: 18px;
width: 100%; width: 100%;
max-width: 896px; max-width: 896px;
@@ -609,7 +636,7 @@ img {
display: block; display: block;
font-family: $font-heading; font-family: $font-heading;
font-size: 21px; font-size: 21px;
font-weight: 700; font-weight: 500;
line-height: 1.15; line-height: 1.15;
position: relative; position: relative;
z-index: 1; z-index: 1;
@@ -629,8 +656,8 @@ img {
opacity: 0; opacity: 0;
transform: translateY(10px); transform: translateY(10px);
color: $color-text-muted; color: $color-text-muted;
font-size: 15px; font-size: 16px;
font-weight: 500; font-weight: 400;
line-height: 1.45; line-height: 1.45;
pointer-events: none; pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease; transition: opacity 0.25s ease, transform 0.25s ease;
@@ -664,11 +691,17 @@ img {
&__list { &__list {
display: grid; display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px; gap: 18px;
margin-bottom: 28px; margin-bottom: 28px;
@media (max-width: 768px) {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
} }
&__note { &__note {
margin-bottom: 30px; margin-bottom: 30px;
color: $color-text-soft; color: $color-text-soft;
@@ -692,7 +725,7 @@ img {
&-item { &-item {
@include card; @include card;
min-height: 144px; min-height: 144px;
padding: 24px; padding: 40px;
h3 { h3 {
margin-bottom: 10px; margin-bottom: 10px;
@@ -710,8 +743,9 @@ img {
// Медиа-запрос для экранов меньше 600px // Медиа-запрос для экранов меньше 600px
@media (max-width: 600px) { @media (max-width: 600px) {
padding: 16px; // Пример: уменьшаем внутренние отступы padding: 40px; // Пример: уменьшаем внутренние отступы
min-height: auto; // Пример: убираем фиксированную минимальную высоту min-height: auto; // Пример: убираем фиксированную минимальную высоту
text-align: center;
h3 { h3 {
font-size: 16px; // Пример: уменьшаем размер заголовка font-size: 16px; // Пример: уменьшаем размер заголовка
@@ -840,6 +874,7 @@ img {
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
transition: transform 0.3s ease, border-color 0.3s ease; transition: transform 0.3s ease, border-color 0.3s ease;
margin-top:5px;
&:hover { &:hover {
transform: translateY(-5px); transform: translateY(-5px);
@@ -851,13 +886,15 @@ img {
color: $color-text-soft; color: $color-text-soft;
font-size: 16px; font-size: 16px;
line-height: 1.5; line-height: 1.5;
font-weight: 200;
font-style: italic;
} }
strong { strong {
display: block; display: block;
margin-bottom: 10px; margin-bottom: 10px;
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 400;
line-height: 1.2; line-height: 1.2;
} }
@@ -866,14 +903,16 @@ img {
border-top: 1px solid rgba(255, 255, 255, 0.08); border-top: 1px solid rgba(255, 255, 255, 0.08);
a { a {
color: #ffd2d2; /*color: #ffd2d2;*/
color: #dfdfdf4a;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
line-height: 1.4; line-height: 1.4;
text-decoration: underline; text-decoration: underline;
text-underline-offset: 2px; text-underline-offset: 2px;
text-decoration-thickness: 1px; text-decoration-thickness: 1px;
text-decoration-color: rgba(255, 210, 210, 0.75); /*text-decoration-color: rgba(255, 210, 210, 0.75);*/
text-decoration-color: rgb(169 169 169 / 28%);
transition: color 0.2s ease, text-decoration-color 0.2s ease; transition: color 0.2s ease, text-decoration-color 0.2s ease;
&:hover { &:hover {
@@ -945,8 +984,8 @@ img {
p { p {
margin-bottom: 32px; margin-bottom: 32px;
color: $color-text-soft; color: $color-text-soft;
font-size: 18px; font-size: 19px;
font-weight: 500; font-weight: 200;
line-height: 1.4; line-height: 1.4;
} }
@@ -1140,7 +1179,7 @@ img {
height: 44px; height: 44px;
padding: 0; padding: 0;
border: 1px solid rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 999px; border-radius: 12px;
background: rgba(255, 255, 255, 0.04); background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.92); color: rgba(255, 255, 255, 0.92);
text-decoration: none; text-decoration: none;
@@ -1397,7 +1436,8 @@ img {
margin-top: 16px; margin-top: 16px;
color: rgba(255, 255, 255, 0.65); color: rgba(255, 255, 255, 0.65);
font-size: 14px; font-size: 14px;
line-height: 1.28; line-height: 1.5;
font-weight:300;
} }
} }
@@ -1406,7 +1446,7 @@ img {
h4 { h4 {
margin-bottom: 16px; margin-bottom: 16px;
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 600;
line-height: 1.1; line-height: 1.1;
} }
@@ -1414,7 +1454,8 @@ img {
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.5;
font-weight:300;
} }
span { span {

2
assets/scss/_fonts.scss
View File

@@ -1,4 +1,4 @@
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Montserrat:wght@700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;700&family=Montserrat:wght@100;300;400;500;600;700&display=swap");
:root { :root {
color-scheme: dark; color-scheme: dark;

61
index.html
View File

@@ -29,7 +29,7 @@
<div class="hero__bg" aria-hidden="true"></div> <div class="hero__bg" aria-hidden="true"></div>
<div class="container hero__content"> <div class="container hero__content">
<h1> <h1>
Спорткомплекс полного цикла в <span>Москве:</span> Спорткомплекс полного цикла в <span>Москве:</span><br>
лёд, залы, проживание и питание на одной территории лёд, залы, проживание и питание на одной территории
</h1> </h1>
<p> <p>
@@ -80,7 +80,7 @@
<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__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>Стандарт 58×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>
@@ -89,7 +89,7 @@
<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__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>
@@ -98,7 +98,7 @@
<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__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>
<a class="btn btn--small" href="#booking">Подробнее</a> <a class="btn btn--small" href="#booking">Подробнее</a>
</div> </div>
</article> </article>
@@ -107,7 +107,7 @@
<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> <a class="btn btn--small" href="#booking">Подробнее</a>
</div> </div>
</article> </article>
@@ -116,7 +116,7 @@
<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__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>
<a class="btn btn--small" href="#booking">Подробнее</a> <a class="btn btn--small" href="#booking">Подробнее</a>
</div> </div>
</article> </article>
@@ -125,7 +125,7 @@
<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__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>
<a class="btn btn--small" href="#booking">Подробнее</a> <a class="btn btn--small" href="#booking">Подробнее</a>
</div> </div>
</article> </article>
@@ -134,7 +134,7 @@
<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__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>
<a class="btn btn--small" href="#booking">Подробнее</a> <a class="btn btn--small" href="#booking">Подробнее</a>
</div> </div>
</article> </article>
@@ -389,7 +389,7 @@
<section class="section booking" id="booking"> <section class="section booking" id="booking">
<div class="container booking__wrap"> <div class="container booking__wrap">
<div class="booking__form"> <div class="booking__form">
<h2>Оставьте заявку — подберём площадку и время</h2> <h2>Оставьте заявку — подберём площадку и&nbsp;время</h2>
<p>Перезвоним в течение 15 минут в рабочее время и пришлём расчёт</p> <p>Перезвоним в течение 15 минут в рабочее время и пришлём расчёт</p>
<form id="booking-form" action="#" method="post" novalidate data-metrika-id="" data-autoreply-endpoint=""> <form id="booking-form" action="#" method="post" novalidate data-metrika-id="" data-autoreply-endpoint="">
<div class="booking__field"> <div class="booking__field">
@@ -500,8 +500,24 @@
</svg> </svg>
</span> </span>
</a> </a>
<a class="contacts-card__messenger contacts-card__messenger--secondary" 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 class="contacts-card__messenger contacts-card__messenger--secondary" 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="contacts-card__links contacts-card__links--social"> <div style="display:none;" class="contacts-card__links contacts-card__links--social">
<a href="#" aria-label="ВКонтакте"> <a href="#" aria-label="ВКонтакте">
<span class="contacts-card__action-icon" aria-hidden="true"> <span class="contacts-card__action-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none"> <svg viewBox="0 0 24 24" fill="none">
@@ -582,11 +598,11 @@
</nav> </nav>
<div class="footer__contacts"> <div class="footer__contacts">
<h4>Контакты и режим работы</h4> <h4>Контакты и режим работы</h4>
<a href="tel:+79251404737">+7 (925) 140-47-37</a><br> <a href="tel:+79251404737">+7 (925) 140-47-37</a>
<a href="tel:+79251404764">+7 (925) 140-47-64</a> <a href="tel:+79251404764">+7 (925) 140-47-64</a>
<a href="mailto:receptionadmin@o-arena.ru">receptionadmin@o-arena.ru</a> <a href="mailto:receptionadmin@o-arena.ru">receptionadmin@o-arena.ru</a><br>
<span>Москва, Автомобильный проезд, 4</span> <a>Москва, Автомобильный проезд, 4</a>
<span>Ежедневно с 06:00 до 23:00</span> <a>Ежедневно с 06:00 до 23:00</a><br>
<div class="footer__messengers"> <div class="footer__messengers">
<a href="https://wa.me/74951234567" target="_blank" rel="noopener noreferrer" aria-label="WhatsApp"> <a href="https://wa.me/74951234567" target="_blank" rel="noopener noreferrer" aria-label="WhatsApp">
<span class="footer__messenger-icon" aria-hidden="true"> <span class="footer__messenger-icon" aria-hidden="true">
@@ -601,9 +617,24 @@
<use href="./assets/images/svg-sprites.svg#icon-telegram"></use> <use href="./assets/images/svg-sprites.svg#icon-telegram"></use>
</svg> </svg>
</span> </span>
</a>
<a href="#" aria-label="Instagram">
<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="ВКонтакте">
<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> </a>
</div> </div>
<div class="footer__socials"> <div style="display:none;" class="footer__socials">
<a href="#" aria-label="Instagram"> <a href="#" aria-label="Instagram">
<span class="footer__messenger-icon" aria-hidden="true"> <span class="footer__messenger-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none"> <svg viewBox="0 0 24 24" fill="none">