laktionov-as/hotels
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

created 3 blocks

Browse Source
This commit is contained in:
Anton Laktionov
2026-07-14 17:02:33 +03:00
parent c02169ba1a
commit fa31fef9cf
14 changed files with 577 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
local/_front/assets/arrow.svg
+3
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 264 B

local/_front/assets/services/1.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 598 KiB

local/_front/assets/services/2.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 631 KiB

local/_front/assets/services/3.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 603 KiB

local/_front/assets/services/4.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 778 KiB

local/_front/css/banner.scss
+20 -2
View File
@@ -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
+77
View File
@@ -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
+83
View File
@@ -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
+196 -3
View File
@@ -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
+29 -1
View File
@@ -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
+21 -2
View File
@@ -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
+127 -12
View File
@@ -1,29 +1,144 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<title>Отели</title>
<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="col top-menu_logo"><img src="assets/logo.svg"></div>
<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 class="container top-menu">
<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">
<h1>С ключевым сообщением и призывом к действию</h1>
<button>Заказать звонок</button>
<!-- Главный баннер -->
<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
+21
View File
@@ -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
Generated
-18
View File
@@ -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": [