Add about

src/index.html

@@ -4,4 +4,6 @@
 
 //= template/menu-list-main/index.html
 
+//= template/about-main/index.html
+
 //= template/common/footer.html
\ No newline at end of file

src/scss/about-main/about-main.scss

+@import "../settings/color";
+
+.about-main{
+  background: $about-bg;
+  border-top: 2px solid;
+  border-bottom: 2px solid;
+}
+
+.about-main__wrapper{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 45px;
+  padding-bottom: 70px;
+}
+
+.about-main__content{
+  padding-top: 45px;
+  display: flex;
+  align-items: flex-start;
+}
+.about-main__img{
+  margin-right: 30px;
+  max-width: 390px;
+}
+.about-main__text{
+  color: $grey-text;
+  margin: 0;
+  font-size: 14px;
+  p{
+    margin: 0;
+    line-height: 1.5;
+  }
+}
\ No newline at end of file

src/scss/settings/color.scss

 $red-color: #e33000;
 $white-text: #fefefe;
-$menu-list: #232021;
\ No newline at end of file
+$menu-list: #232021;
+$about-bg: #dfdfdf;
+$grey-text: #727272;
\ No newline at end of file

src/scss/settings/common-style.scss

+@import "../settings/color";
+
 *, *:after, *:before{
   box-sizing: border-box;
 }
@@ -11,4 +13,38 @@ body{
 .wrapper{
   width: 1170px;
   margin: 0 auto;
+}
+
+.h2-line{
+  display: inline-block;
+  text-transform: uppercase;
+  color: $grey-text;
+  margin: 0;
+  position: relative;
+  line-height: 1;
+  padding: 0 25px;
+  text-align: center;
+  &:before{
+    content: "";
+    display: inline-block;
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: 100px;
+    height: 4px;
+    background: $grey-text;
+    transform: translate(-100%, -50%);
+  }
+  &:after{
+    content: "";
+    display: inline-block;
+    position: absolute;
+    top: 50%;
+    right: 0;
+    width: 100px;
+    height: 4px;
+    background: $grey-text;
+    transform: translate(100%, -50%);
+  }
+
 }
\ No newline at end of file

src/template/about-main/index.html

+<div class="about-main">
+    <div class="wrapper about-main__wrapper">
+        <h2 class="h2-line h2-about">О компании</h2>
+        <div class="about-main__content">
+            <img src="img/about-main.png" class="about-main__img">
+            <div class="about-main__text">
+                <p>Компания: Основана в Северной Дакоте, ведет деятельность по всему миру
+                    Компания Bobcat лидирует в сферах разработки, производства, продвижения и реализации компактного оборудования для строительства, подрядных услуг, ландшафтного дизайна, сельского хозяйства, обслуживания дорог, коммунального хозяйства, промышленности и горной добычи. Мы стремимся помогать нашим заказчикам делать работу рационально и эффективно.
+                    Наша компания глубоко укоренилась в Северной Дакоте – она была здесь образ
+                    ована в далеком 1947 году. В настоящее время компания владеет тремя заводами в Северной Дакоте и является крупнейшим производителем этого штата. Кроме того, заводы Bobcat расположены во Франции, Чешской Республике и Китае.
+                    <br><br>
+                    Bobcat входит в группу компаний Doosan. Корпорация Doosan является мировым лидером в производстве строительной техники, энергетического оборудования, систем водоснабжения, двигателей и предоставлении инженерных решений заказчикам на протяжении более ста лет.
+                    <br><br>
+                    В 2017 году представительство компании Bobcat в регионе Европы, Ближнего Востока и Африки переместили</p>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file