created 3 blocks

local/_front/assets/arrow.svg

@@ -0,0 +1,3 @@
+<svg width="34" height="16" viewBox="0 0 34 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.625 1.625L15.0996 13.1747C16.0733 14.0092 17.5101 14.0092 18.4837 13.1747L31.9583 1.625" stroke="white" stroke-width="3.25" stroke-linecap="round"/>
+</svg>

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;
+        }
     }
 }

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;
+            }
+        }
+    }
+}

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;
+        }
+    }
+}

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 */

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);
 }
-

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;
+    }
 }

local/_front/index.html

@@ -1,29 +1,144 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
-    <title>Document</title>
+    <title>Отели</title>
-    <link rel="stylesheet" href="/css/style.css">
+    <link rel="stylesheet" href="./css/bootstrap.min.css">
-    <link rel="stylesheet" href="/css/bootstrap.min.css">
+    <link rel="stylesheet" href="./css/style.css">
     <link href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet">
-    <script src="/js/script.js"></script>
+    <script src="./js/script.js"></script>
 </head>
+
 <body>
     <header>
-        <div class="container d-flex top-menu">
+        <div class="container top-menu">
-            <div class="col top-menu_logo"><img src="assets/logo.svg"></div>
+            <div class="col top-menu_logo">
+                <img src="assets/logo.svg">
+            </div>
+            <div class="top-menu_side">
                 <div class="col top-menu_phone">+7 (928) 882-48-85</div>
                 <div class="col top-menu_mail">Почта</div>
                 <div class="col top-menu_burger">Меню</div>
             </div>
+        </div>
     </header>
     <main>
-        <div class="container-fluid block-banner">
+       <!-- Главный баннер -->
+        <div class="container-fluid">
+            <div class="block-banner">
                 <h1>С ключевым сообщением и призывом к действию</h1>
                 <button>Заказать звонок</button>
             </div>
+            <div class="block-arrow"></div>
+        </div>
+        <!-- Блок с каруселью текстовых блоков -->
+        <div class="container-fluid block-carousel">
+            <div class="carousel-custom_title">С ключевым сообщением и призывом к действию</div>
+            <div class="carousel-custom">
+                <div class="carousel-custom-item col-4">
+                    <div class="h-100">
+                        <div class="card-body">
+                            <h5>С ключевым сообщением и призывом к действию С ключевым сообщением и призывом к действию</h5>
+                            <p>А также многие известные личности лишь добавляют фракционных разногласий и представлены в исключительно положительном свете.</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="carousel-custom-item col-4">
+                    <div class="h-100">
+                        <div class="card-body">
+                            <h5>С ключевым сообщением и призывом к действию С ключевым сообщением и призывом к действию</h5>
+                            <p>А также многие известные личности лишь добавляют фракционных разногласий и представлены в исключительно положительном свете.</p>
+
+                        </div>
+                    </div>
+                </div>
+
+                <div class="carousel-custom-item col-4">
+                    <div class="h-100">
+                        <div class="card-body">
+                            <h5>С ключевым сообщением и призывом к действию С ключевым сообщением и призывом к действию</h5>
+                            <p>А также многие известные личности лишь добавляют фракционных разногласий и представлены в исключительно положительном свете.</p>
+
+                        </div>
+                    </div>
+                </div>
+
+                <div class="carousel-custom-item col-4">
+                    <div class="h-100">
+                        <div class="card-body">
+                            <h5>С ключевым сообщением и призывом к действию С ключевым сообщением и призывом к действию</h5>
+                            <p>А также многие известные личности лишь добавляют фракционных разногласий и представлены в исключительно положительном свете.</p>
+
+                        </div>
+                    </div>
+                </div>
+
+                <div class="carousel-custom-item col-4">
+                    <div class="h-100">
+                        <div class="card-body">
+                            <h5>С ключевым сообщением и призывом к действию С ключевым сообщением и призывом к действию</h5>
+                            <p>А также многие известные личности лишь добавляют фракционных разногласий и представлены в исключительно положительном свете.</p>
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="carousel-custom_buttons">
+                <button class="carousel-control-prev" type="button">
+                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                    <span class="visually-hidden">Previous</span>
+                </button>
+                <button class="carousel-control-next" type="button">
+                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                    <span class="visually-hidden">Next</span>
+                </button>
+            </div>
+        </div>
+        <!-- Блок услуг -->
+        <div class="container-fluid service_title">Услуги</div>
+        <div class="container-fluid d-flex">
+            <div class="col-3 service-item" style="background-image: url(assets/services/1.png)">
+                <div class="service-item_content">
+                    <div class="left-border"></div>
+                    <div class="service-item_num">01</div>
+                    <h5 class="service-item_title">ЗАГОЛОВОК ДВЕ СТРОКИ</h5>
+                    <p>А также многие известные личности лишь добавляют фракционных разногласий и представлены в исключительно положительном свете.</p>
+                    <div class="service-item_link">Перейти</div>
+                </div>
+            </div>
+            <div class="col-3 service-item" style="background-image: url(assets/services/2.png)">
+                <div class="service-item_content">
+                    <div class="left-border"></div>
+                    <div class="service-item_num">02</div>
+                    <h5 class="service-item_title">ЗАГОЛОВОК ДВЕ СТРОКИ</h5>
+                    <p>А также многие известные личности лишь добавляют фракционных разногласий и представлены в исключительно положительном свете.</p>
+                    <div class="service-item_link">Перейти</div>
+                </div>
+            </div>
+            <div class="col-3 service-item" style="background-image: url(assets/services/3.png)">
+                <div class="service-item_content">
+                    <div class="left-border"></div>
+                    <div class="service-item_num">03</div>
+                    <h5 class="service-item_title">ЗАГОЛОВОК ДВЕ СТРОКИ</h5>
+                    <p>А также многие известные личности лишь добавляют фракционных разногласий и представлены в исключительно положительном свете.</p>
+                    <div class="service-item_link">Перейти</div>
+                </div>
+            </div>
+            <div class="col-3 service-item" style="background-image: url(assets/services/4.png)">
+                <div class="service-item_content">
+                    <div class="left-border"></div>
+                    <div class="service-item_num">04</div>
+                    <h5 class="service-item_title">ЗАГОЛОВОК ДВЕ СТРОКИ</h5>
+                    <p>А также многие известные личности лишь добавляют фракционных разногласий и представлены в исключительно положительном свете.</p>
+                    <div class="service-item_link">Перейти</div>
+                </div>
+            </div>
+        </div>
     </main>
     <footer></footer>
     <script src="js/bootstrap.min.js"></script>
 </body>
+
 </html>

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;
+  }
+});
+*/

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": [