diff --git a/local/_front/assets/arrow.svg b/local/_front/assets/arrow.svg new file mode 100644 index 0000000..f5795c7 --- /dev/null +++ b/local/_front/assets/arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/local/_front/assets/services/1.png b/local/_front/assets/services/1.png new file mode 100644 index 0000000..bda1873 Binary files /dev/null and b/local/_front/assets/services/1.png differ diff --git a/local/_front/assets/services/2.png b/local/_front/assets/services/2.png new file mode 100644 index 0000000..9d5f262 Binary files /dev/null and b/local/_front/assets/services/2.png differ diff --git a/local/_front/assets/services/3.png b/local/_front/assets/services/3.png new file mode 100644 index 0000000..ce815ed Binary files /dev/null and b/local/_front/assets/services/3.png differ diff --git a/local/_front/assets/services/4.png b/local/_front/assets/services/4.png new file mode 100644 index 0000000..cdd677f Binary files /dev/null and b/local/_front/assets/services/4.png differ diff --git a/local/_front/css/banner.scss b/local/_front/css/banner.scss index 45bd088..5731409 100644 --- a/local/_front/css/banner.scss +++ b/local/_front/css/banner.scss @@ -2,12 +2,30 @@ text-align: center; background-image: url('../assets/banner.png'); height: 822px; + display: flex; + flex-direction: column; + justify-content: center; + grid-gap: 2em; h1 { - font-family: "Mulish", sans-serif; +/* position: relative; + top:100px; + left:auto;*/ + font: { + size: 65px; + weight: 800; + } + text-transform: uppercase; width: 1051px; - margin: 5em auto; + margin: 0 auto; + color: var(--main-text-color); } button { + padding: 16px 42px; margin: 0 auto; + background-color: #FFFFFF; + border-radius: 4px; + font: { + size: 24px; + } } } diff --git a/local/_front/css/carousel.scss b/local/_front/css/carousel.scss new file mode 100644 index 0000000..8a6f580 --- /dev/null +++ b/local/_front/css/carousel.scss @@ -0,0 +1,77 @@ +.block-carousel { + +} +.carousel-control { + &-next { + &-icon { + fill: #373737; + :hover { + fill: #D9D9D9; + } + } + } + &-prev { + &-icon { + fill: #373737; + :hover { + fill: #D9D9D9; + } + } + } +} +.carousel-custom { + display:flex; + flex-direction: row; + overflow-x: auto; + scroll-behavior: smooth; + &::-webkit-scrollbar { + display: none; + } + &_title { + width:531px; + font: { + size: 35px; + weight: 600; + } + text-transform: uppercase; + color:var(--main-text-color); + margin: 50px 50px; + } + &-item { + flex: 0 0 auto; + scroll-snap-align: start; /* Карточка всегда «магнитится» к левому краю */ + padding: 5px 10px; + text-align: center; + h5 { + color: #7E7E7E; + font: { + size: 18px; + } + } + p { + color: #FFFFFF; + font: { + size: 1em; + } + } + } + &-item + &-item { + border-left: 2px solid #FFFFFF; /* Серый цвет из палитры Bootstrap */ + } + &_buttons { + position: relative; + width: 130px; + margin-top: 1em; + margin-left: auto; + margin-right: 2em; + button { + width:60px; + height: 60px; + border:3px solid #373737; + border-radius: 4px; + :hover { + border-color: #D9D9D9; + } + } + } +} diff --git a/local/_front/css/services.scss b/local/_front/css/services.scss new file mode 100644 index 0000000..81af482 --- /dev/null +++ b/local/_front/css/services.scss @@ -0,0 +1,83 @@ +.service { + &_title { + width: 531px; + + font: { + size: 35px; + weight: 600; + } + + text-transform: uppercase; + color:var(--main-text-color); + margin: 50px 50px; + } + + &-item { + + /* position: relative; + &::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: { + size: cover; + position: center; + image: url('../assets/services/1.png'); + } + filter: brightness(28%); + z-index: 1; + } +*/ + &:hover { + /* + &::before { + filter: brightness(66%); + } +*/ + cursor: pointer; + } + + height: 800px; + + &_content { + display: flex; + flex-direction: column; + justify-content: flex-end; + backdrop-filter: brightness(28%); + height: 100%; + &:hover { + backdrop-filter: brightness(66%); + } + + .left-border { + border-left: 2px solid #fff; + height: 242px; + margin-left: 56px; + } + } + + &_num { + font: { + size: 30px; + weight: 800; + } + + color:#fff; + } + + &_title { + color: #fff; + } + + p { + color: #fff; + } + + &_link { + color: #fff; + } + } +} diff --git a/local/_front/css/style.css b/local/_front/css/style.css index bcdb5ec..a1e2996 100644 --- a/local/_front/css/style.css +++ b/local/_front/css/style.css @@ -1,27 +1,220 @@ -.top-menu { +@charset "UTF-8"; +header { position: fixed; top: 0px; + left: 0px; + width: 100%; +} + +.top-menu { + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 2em; + color: var(--main-text-color); } .top-menu_logo { padding: 5px; } +.top-menu_side { + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; + grid-gap: 23px; +} +.top-menu_phone { + text-wrap: nowrap; +} .block-banner { text-align: center; background-image: url("../assets/banner.png"); height: 822px; + display: flex; + flex-direction: column; + justify-content: center; + grid-gap: 2em; } .block-banner h1 { - font-family: "Mulish", sans-serif; + /* position: relative; + top:100px; + left:auto;*/ + font-size: 65px; + font-weight: 800; + text-transform: uppercase; width: 1051px; - margin: 5em auto; + margin: 0 auto; + color: var(--main-text-color); } .block-banner button { + padding: 16px 42px; margin: 0 auto; + background-color: #FFFFFF; + border-radius: 4px; + font-size: 24px; +} + +.carousel-control-next-icon { + fill: #373737; +} +.carousel-control-next-icon :hover { + fill: #D9D9D9; +} +.carousel-control-prev-icon { + fill: #373737; +} +.carousel-control-prev-icon :hover { + fill: #D9D9D9; +} + +.carousel-custom { + display: flex; + flex-direction: row; + overflow-x: auto; + scroll-behavior: smooth; +} +.carousel-custom::-webkit-scrollbar { + display: none; +} +.carousel-custom_title { + width: 531px; + font-size: 35px; + font-weight: 600; + text-transform: uppercase; + color: var(--main-text-color); + margin: 50px 50px; +} +.carousel-custom-item { + flex: 0 0 auto; + scroll-snap-align: start; /* Карточка всегда «магнитится» к левому краю */ + padding: 5px 10px; + text-align: center; +} +.carousel-custom-item h5 { + color: #7E7E7E; + font-size: 18px; +} +.carousel-custom-item p { + color: #FFFFFF; + font-size: 1em; +} +.carousel-custom-item + .carousel-custom-item { + border-left: 2px solid #FFFFFF; /* Серый цвет из палитры Bootstrap */ +} +.carousel-custom_buttons { + position: relative; + width: 130px; + margin-top: 1em; + margin-left: auto; + margin-right: 2em; +} +.carousel-custom_buttons button { + width: 60px; + height: 60px; + border: 3px solid #373737; + border-radius: 4px; +} +.carousel-custom_buttons button :hover { + border-color: #D9D9D9; +} + +.service_title { + width: 531px; + font-size: 35px; + font-weight: 600; + text-transform: uppercase; + color: var(--main-text-color); + margin: 50px 50px; +} +.service-item { + /* position: relative; + &::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: { + size: cover; + position: center; + image: url('../assets/services/1.png'); + } + filter: brightness(28%); + z-index: 1; + } + */ +} +.service-item:hover { + /* + &::before { + filter: brightness(66%); + } + */ + cursor: pointer; +} +.service-item { + height: 800px; +} +.service-item_content { + display: flex; + flex-direction: column; + justify-content: flex-end; + backdrop-filter: brightness(28%); + height: 100%; +} +.service-item_content:hover { + backdrop-filter: brightness(66%); +} +.service-item_content .left-border { + border-left: 2px solid #fff; + height: 242px; + margin-left: 56px; +} +.service-item_num { + font-size: 30px; + font-weight: 800; + color: #fff; +} +.service-item_title { + color: #fff; +} +.service-item p { + color: #fff; +} +.service-item_link { + color: #fff; } * { box-sizing: border-box; + font-family: "Mulish", sans-serif; +} + +:root { + --main-text-color: #E9E9E9; + --bs-body-bg:#212121; +} + +.block-arrow { + position: relative; + top: -30px; + width: 100%; + height: 20px; + text-align: center; + background-image: url(../assets/arrow.svg); + background-repeat: no-repeat; + background-position: center; +} + +.arrow-down { + display: inline-block; + width: 15px; + height: 15px; + border-right: 3px solid #fff; + border-bottom: 3px solid #fff; + transform: rotate(45deg); } /*# sourceMappingURL=style.css.map */ diff --git a/local/_front/css/style.scss b/local/_front/css/style.scss index aecf9b4..ddf927f 100644 --- a/local/_front/css/style.scss +++ b/local/_front/css/style.scss @@ -1,7 +1,35 @@ @use './top-menu.scss'; @use './banner.scss'; +@use './carousel.scss'; +@use './services.scss'; * { box-sizing: border-box; + font-family: "Mulish", sans-serif; +} +:root { + --main-text-color: #E9E9E9; + --bs-body-bg:#212121; +} +.block { + &-arrow { + position: relative; + top:-30px; + width: 100%; + height: 20px; + text-align: center; + background: { + image: url(../assets/arrow.svg); + repeat: no-repeat; + position: center; + } + } +} +.arrow-down { + display: inline-block; + width: 15px; + height: 15px; + border-right: 3px solid #fff; + border-bottom: 3px solid #fff; + transform: rotate(45deg); } - diff --git a/local/_front/css/top-menu.scss b/local/_front/css/top-menu.scss index 482e931..82a5568 100644 --- a/local/_front/css/top-menu.scss +++ b/local/_front/css/top-menu.scss @@ -1,7 +1,26 @@ -.top-menu { +header { position: fixed; - top:0px; + top: 0px; + left: 0px; + width: 100%; +} +.top-menu { + display:flex; + flex-direction: row; + justify-content: space-between; + padding: 2em; + color: var(--main-text-color); &_logo{ padding: 5px; } + &_side { + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; + grid-gap: 23px; + } + &_phone { + text-wrap: nowrap; + } } \ No newline at end of file diff --git a/local/_front/index.html b/local/_front/index.html index 0e472d7..d1ab9ff 100644 --- a/local/_front/index.html +++ b/local/_front/index.html @@ -1,29 +1,144 @@ + - Document - - + Отели + + - + +
-
- -
+7 (928) 882-48-85
-
Почта
-
Меню
+
+ +
+
+7 (928) 882-48-85
+
Почта
+
Меню
+
-
-

С ключевым сообщением и призывом к действию

- + +
+
+

С ключевым сообщением и призывом к действию

+ +
+
+
+ +
+
С ключевым сообщением и призывом к действию
+
+
+
+
+
С ключевым сообщением и призывом к действию С ключевым сообщением и призывом к действию
+

А также многие известные личности лишь добавляют фракционных разногласий и представлены в исключительно положительном свете.

+
+
+
+ +
+
+
+
С ключевым сообщением и призывом к действию С ключевым сообщением и призывом к действию
+

А также многие известные личности лишь добавляют фракционных разногласий и представлены в исключительно положительном свете.

+ +
+
+
+ +
+
+
+
С ключевым сообщением и призывом к действию С ключевым сообщением и призывом к действию
+

А также многие известные личности лишь добавляют фракционных разногласий и представлены в исключительно положительном свете.

+ +
+
+
+ +
+
+
+
С ключевым сообщением и призывом к действию С ключевым сообщением и призывом к действию
+

А также многие известные личности лишь добавляют фракционных разногласий и представлены в исключительно положительном свете.

+ +
+
+
+ +
+
+
+
С ключевым сообщением и призывом к действию С ключевым сообщением и призывом к действию
+

А также многие известные личности лишь добавляют фракционных разногласий и представлены в исключительно положительном свете.

+ +
+
+
+
+
+ + +
+
+ +
Услуги
+
+
+
+
+
01
+
ЗАГОЛОВОК ДВЕ СТРОКИ
+

А также многие известные личности лишь добавляют фракционных разногласий и представлены в исключительно положительном свете.

+
Перейти
+
+
+
+
+
+
02
+
ЗАГОЛОВОК ДВЕ СТРОКИ
+

А также многие известные личности лишь добавляют фракционных разногласий и представлены в исключительно положительном свете.

+
Перейти
+
+
+
+
+
+
03
+
ЗАГОЛОВОК ДВЕ СТРОКИ
+

А также многие известные личности лишь добавляют фракционных разногласий и представлены в исключительно положительном свете.

+
Перейти
+
+
+
+
+
+
04
+
ЗАГОЛОВОК ДВЕ СТРОКИ
+

А также многие известные личности лишь добавляют фракционных разногласий и представлены в исключительно положительном свете.

+
Перейти
+
+
+ \ No newline at end of file diff --git a/local/_front/js/script.js b/local/_front/js/script.js index e69de29..d5cecb1 100644 --- a/local/_front/js/script.js +++ b/local/_front/js/script.js @@ -0,0 +1,21 @@ +/* +const carouselItems = document.querySelectorAll('#multiItemCarousel .carousel-item'); + +carouselItems.forEach((el) => { + // Количество элементов, видимых одновременно на экране (col-md-3 = 4 элемента) + const minPerSlide = 4; + let next = el.nextElementSibling; + + for (let i = 1; i < minPerSlide; i++) { + // Если элементы закончились, берем первый с начала для бесконечного цикла + if (!next) { + next = carouselItems[0]; + } + + // Клонируем первый дочерний элемент (нашу колонку col-md-3) + let cloneChild = next.cloneNode(true); + el.appendChild(cloneChild.children[0]); + next = next.nextElementSibling; + } +}); +*/ \ No newline at end of file diff --git a/local/_front/package-lock.json b/local/_front/package-lock.json index 15411d0..7d7a671 100644 --- a/local/_front/package-lock.json +++ b/local/_front/package-lock.json @@ -136,9 +136,6 @@ "cpu": [ "arm" ], - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -159,9 +156,6 @@ "cpu": [ "arm" ], - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -182,9 +176,6 @@ "cpu": [ "arm64" ], - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -205,9 +196,6 @@ "cpu": [ "arm64" ], - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -228,9 +216,6 @@ "cpu": [ "x64" ], - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -251,9 +236,6 @@ "cpu": [ "x64" ], - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [