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