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

add 2 sections

Browse Source
This commit is contained in:
Anton Laktionov
2026-07-15 17:15:07 +03:00
parent 910921fb85
commit c0746de3fa
10 changed files with 268 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
local/_front/assets/about/img.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 614 KiB

local/_front/assets/long_arrow.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="71" height="15" viewBox="0 0 71 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M70.7071 8.07113C71.0976 7.6806 71.0976 7.04744 70.7071 6.65691L64.3431 0.292951C63.9526 -0.0975729 63.3195 -0.097573 62.9289 0.292951C62.5384 0.683476 62.5384 1.31664 62.9289 1.70717L68.5858 7.36402L62.9289 13.0209C62.5384 13.4114 62.5384 14.0446 62.9289 14.4351C63.3195 14.8256 63.9526 14.8256 64.3431 14.4351L70.7071 8.07113ZM0 7.36401L-8.74228e-08 8.36401L70 8.36402L70 7.36402L70 6.36402L8.74228e-08 6.36401L0 7.36401Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 552 B

local/_front/css/about.scss
+77
View File
@@ -0,0 +1,77 @@
.about {
&_title {
text-transform: uppercase;
font: {
size: 35px;
weight: 500;
}
margin-top: 60px;
margin-bottom: 14px;
color:#E9E9E9;
}
p {
font: {
size: 20px;
}
color: white;
padding-right: 40px;
}
&_image {
background: {
image: url(../assets/about/img.png);
size: cover;
position: center;
repeat: no-repeat;
}
height: 730px;
}
&_text {
font: {
size: 20px;
}
color: #7E7E7E;
}
button {
width: 100%;
border: 1px solid #D9D9D9;
border-radius: 4px;
background-color: #212121;
&:hover {
background-color: #D9D9D9;
}
color: #fff;
}
&-feature {
position: relative;
top: -200px;
margin-bottom: -200px;
&_title {
border-bottom: 1px solid #fff;
color: #fff;
font: {
size: 30px;
weight: 400;
}
grid-gap:0px;
span {
float: left;
font: {
size: 109px;
weight: 400;
}
}
.col {
display: inline-block;
vertical-align: middle;
}
}
&_text {
margin-top: 34px;
color: #7E7E7E;
font: {
size: 18px;
weight: 500;
}
}
}
}
local/_front/css/banner.scss
-3
View File
@@ -7,9 +7,6 @@
justify-content: center;
grid-gap: 2em;
h1 {
/* position: relative;
top:100px;
left:auto;*/
font: {
size: 65px;
weight: 800;
local/_front/css/portfolio.scss
+30
View File
@@ -0,0 +1,30 @@
.portfolio {
&-header {
justify-content: space-between;
}
&_title {
text-transform: uppercase;
font: {
size: 35px;
weight: 600;
}
color: var(--main-text-color);
margin: 50px 50px;
}
&_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
+14 -29
View File
@@ -13,30 +13,7 @@
}
&-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;
}
@@ -48,13 +25,16 @@
justify-content: flex-end;
backdrop-filter: brightness(28%);
height: 100%;
&:hover {
backdrop-filter: brightness(66%);
.service-item_link {
display:block;
display: block;
}
p {
display:block;
display: block;
}
}
@@ -70,13 +50,15 @@
size: 30px;
weight: 800;
}
padding-left:38px;
color:#fff;
}
&_title {
padding-left:38px;
padding-left: 38px;
color: #fff;
font: {
size: 24px;
weight: 600;
@@ -85,24 +67,27 @@
p {
color: #fff;
padding-left:38px;
padding-right:79px;
display:none;
padding-left: 38px;
padding-right: 79px;
display: none;
}
&_link {
color: #fff;
display: none;
margin: 21px auto 39px 40px;
font: {
size: 20px;
}
&::before {
content: '';
display: inline-block;
width: 50px;
height: 18px;
margin-right: 23px;
background: {
image: url('../assets/long_arrow.svg');
size: contain;
local/_front/css/style.css
+92 -27
View File
@@ -4,6 +4,7 @@ header {
top: 0px;
left: 0px;
width: 100%;
z-index: 2;
}
.top-menu {
@@ -37,9 +38,6 @@ header {
grid-gap: 2em;
}
.block-banner h1 {
/* position: relative;
top:100px;
left:auto;*/
font-size: 65px;
font-weight: 800;
text-transform: uppercase;
@@ -127,31 +125,7 @@ header {
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 {
@@ -214,6 +188,97 @@ header {
background-position: center;
}
.about_title {
text-transform: uppercase;
font-size: 35px;
font-weight: 500;
margin-top: 60px;
margin-bottom: 14px;
color: #E9E9E9;
}
.about p {
font-size: 20px;
color: white;
padding-right: 40px;
}
.about_image {
background-image: url(../assets/about/img.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 730px;
}
.about_text {
font-size: 20px;
color: #7E7E7E;
}
.about button {
width: 100%;
border: 1px solid #D9D9D9;
border-radius: 4px;
background-color: #212121;
}
.about button:hover {
background-color: #D9D9D9;
}
.about button {
color: #fff;
}
.about-feature {
position: relative;
top: -200px;
margin-bottom: -200px;
}
.about-feature_title {
border-bottom: 1px solid #fff;
color: #fff;
font-size: 30px;
font-weight: 400;
grid-gap: 0px;
}
.about-feature_title span {
float: left;
font-size: 109px;
font-weight: 400;
}
.about-feature_title .col {
display: inline-block;
vertical-align: middle;
}
.about-feature_text {
margin-top: 34px;
color: #7E7E7E;
font-size: 18px;
font-weight: 500;
}
.portfolio-header {
justify-content: space-between;
}
.portfolio_title {
text-transform: uppercase;
font-size: 35px;
font-weight: 600;
color: var(--main-text-color);
margin: 50px 50px;
}
.portfolio_buttons {
position: relative;
width: 130px;
margin-top: 1em;
margin-left: auto;
margin-right: 2em;
}
.portfolio_buttons button {
width: 60px;
height: 60px;
border: 3px solid #373737;
border-radius: 4px;
}
.portfolio_buttons button :hover {
border-color: #D9D9D9;
}
* {
box-sizing: border-box;
font-family: "Mulish", sans-serif;
local/_front/css/style.scss
+2
View File
@@ -2,6 +2,8 @@
@use './banner.scss';
@use './carousel.scss';
@use './services.scss';
@use './about.scss';
@use './portfolio.scss';
* {
box-sizing: border-box;
local/_front/css/top-menu.scss
+1
View File
@@ -3,6 +3,7 @@ header {
top: 0px;
left: 0px;
width: 100%;
z-index: 2;
}
.top-menu {
display:flex;
local/_front/index.html
+49 -6
View File
@@ -25,15 +25,15 @@
</header>
<main>
<!-- Главный баннер -->
<div class="container-fluid">
<section class="container-fluid">
<div class="block-banner">
<h1>С ключевым сообщением и призывом к действию</h1>
<button>Заказать звонок</button>
</div>
<div class="block-arrow"></div>
</div>
</section>
<!-- Блок с каруселью текстовых блоков -->
<div class="container-fluid block-carousel">
<section class="container-fluid block-carousel">
<div class="carousel-custom_title">С ключевым сообщением и призывом к действию</div>
<div class="carousel-custom">
<div class="carousel-custom-item col-4">
@@ -95,10 +95,10 @@
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</section>
<!-- Блок услуг -->
<div class="container-fluid service_title">Услуги</div>
<div class="container-fluid d-flex">
<section 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>
@@ -135,7 +135,50 @@
<div class="service-item_link">Перейти</div>
</div>
</div>
</div>
</section>
<section class="container d-flex flex-column about">
<div class="row">
<div class="col-5">
<h5 class="about_title">о компании</h5>
<p>А также многие известные личности лишь добавляют фракционных разногласий и представлены в исключительно положительном свете.</p>
<p>А также многие известные личности лишь добавляют фракционных разногласий и представлены в исключительно положительном свете.А также многие известные личности лишь добавляют фракционных разногласий и представлены в исключительно положительном свете.</p>
</div>
<div class="col-4 about_image"></div>
<div class="col">
<div class="d-flex flex-column">
<div class="about_text">А также многие известные личности лишь добавляют фракционных разногласий и представлены в исключительно положительном свете.</div>
<button>Подробнее</button>
</div>
</div>
</div>
<div class="row about-feature">
<div class="d-flex flex-column">
<div class="row about-feature_title">
<div class="col"><span>16</span>лет на рынке</div>
<div class="col"><span>185</span>уникальных проектов</div>
<div class="col"><span>185</span>уникальных проектов</div>
</div>
<div class="row">
<div class="col-7 about-feature_text">С ключевым сообщением и призывом к действию С ключевым сообщением и призывом к действию</div>
</div>
</div>
</div>
</section>
<section class="container-fluid d-flex flex-column portfolio">
<div class="row portfolio-header">
<div class="col portfolio_title">наши объекты</div>
<div class="portfolio_buttons">
<button class="carousel-control-prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</section>
</main>
<footer></footer>
<script src="js/bootstrap.min.js"></script>