add 2 sections

local/_front/assets/long_arrow.svg

@@ -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>

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

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;

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

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-left: 38px;
-            padding-right:79px;
+            padding-right: 79px;
-            display:none;
+            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

@@ -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,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

@@ -3,6 +3,7 @@ header {
     top: 0px;
     left: 0px;    
     width: 100%;
+    z-index: 2;
 }
 .top-menu {
     display:flex;

local/_front/index.html

@@ -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>
+        </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>