diff --git a/local/_front/assets/about/img.png b/local/_front/assets/about/img.png new file mode 100644 index 0000000..4fd29c6 Binary files /dev/null and b/local/_front/assets/about/img.png differ diff --git a/local/_front/assets/long_arrow.svg b/local/_front/assets/long_arrow.svg new file mode 100644 index 0000000..c82bf8a --- /dev/null +++ b/local/_front/assets/long_arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/local/_front/css/about.scss b/local/_front/css/about.scss new file mode 100644 index 0000000..95a1308 --- /dev/null +++ b/local/_front/css/about.scss @@ -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; + } + } + } +} \ No newline at end of file diff --git a/local/_front/css/banner.scss b/local/_front/css/banner.scss index 5731409..abedc02 100644 --- a/local/_front/css/banner.scss +++ b/local/_front/css/banner.scss @@ -7,9 +7,6 @@ justify-content: center; grid-gap: 2em; h1 { -/* position: relative; - top:100px; - left:auto;*/ font: { size: 65px; weight: 800; diff --git a/local/_front/css/portfolio.scss b/local/_front/css/portfolio.scss new file mode 100644 index 0000000..2a8d165 --- /dev/null +++ b/local/_front/css/portfolio.scss @@ -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; + } + } + } +} \ No newline at end of file diff --git a/local/_front/css/services.scss b/local/_front/css/services.scss index 19fb40a..a1d2894 100644 --- a/local/_front/css/services.scss +++ b/local/_front/css/services.scss @@ -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; diff --git a/local/_front/css/style.css b/local/_front/css/style.css index ab94fdd..9746a99 100644 --- a/local/_front/css/style.css +++ b/local/_front/css/style.css @@ -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; diff --git a/local/_front/css/style.scss b/local/_front/css/style.scss index ddf927f..7f0faf7 100644 --- a/local/_front/css/style.scss +++ b/local/_front/css/style.scss @@ -2,6 +2,8 @@ @use './banner.scss'; @use './carousel.scss'; @use './services.scss'; +@use './about.scss'; +@use './portfolio.scss'; * { box-sizing: border-box; diff --git a/local/_front/css/top-menu.scss b/local/_front/css/top-menu.scss index 82a5568..3e5eb2a 100644 --- a/local/_front/css/top-menu.scss +++ b/local/_front/css/top-menu.scss @@ -3,6 +3,7 @@ header { top: 0px; left: 0px; width: 100%; + z-index: 2; } .top-menu { display:flex; diff --git a/local/_front/index.html b/local/_front/index.html index d1ab9ff..2796ae5 100644 --- a/local/_front/index.html +++ b/local/_front/index.html @@ -25,15 +25,15 @@
-
+

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

-
+ -
+
С ключевым сообщением и призывом к действию
@@ -95,10 +95,10 @@
-
+
Услуги
-
+
@@ -135,7 +135,50 @@
Перейти
-
+ +
+
+
+
о компании
+

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

+

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

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