Add news list

src/img/sprite/svg/more.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="9" height="15" viewBox="0 0 9 15">
+  <metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
+<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c140 79.160451, 2017/05/06-01:08:21        ">
+   <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+      <rdf:Description rdf:about=""/>
+   </rdf:RDF>
+</x:xmpmeta>
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                           
+<?xpacket end="w"?></metadata>
+<defs>
+    <style>
+      .cls-1 {
+        fill: #c4c4c4;
+        fill-rule: evenodd;
+      }
+    </style>
+  </defs>
+  <path id="Фигура_30" data-name="Фигура 30" class="cls-1" d="M910.521,1995.63l-4.961,4.94a1.438,1.438,0,0,1-2.039.01l-0.107-.11a1.43,1.43,0,0,1,0-2.03l4.96-4.95-4.96-4.95a1.43,1.43,0,0,1,0-2.03l0.107-.11a1.438,1.438,0,0,1,2.039.01l4.961,4.94s0.373,0.35.784,0.78c1.169,1.25.64,2.06-.142,2.86C910.808,1995.35,910.521,1995.63,910.521,1995.63Z" transform="translate(-903 -1986)"/>
+</svg>

src/index.html

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

src/js/news-slider.js

+'use strict';
+
+(function () {
+    document.addEventListener('DOMContentLoaded', function () {
+        var mySwiperMP2 = new Swiper ('.swiper-container-news', {
+            slidesPerView: 2,
+            spaceBetween: 30,
+            simulateTouch: false,
+            navigation: {
+                nextEl: '.swiper-button-next',
+                prevEl: '.swiper-button-prev',
+            },
+        });
+    });
+})();
\ No newline at end of file

src/scss/news-main/news-main.scss

+@import "../settings/color";
+.news-main__wrapper{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 45px;
+  padding-bottom: 45px;
+  position: relative;
+}
+
+.swiper-container-news{
+  overflow: hidden;
+}
+
+.news-main__list{
+  display: flex;
+  list-style-type: none;
+  padding-left: 0;
+  margin: 0;
+  padding-top: 40px;
+  width: 1060px;
+}
+
+.news-item__img{
+  width: 180px;
+  height: 180px;
+  border-radius: 50%;
+  margin-right: 15px;
+}
+
+.news-item__text{
+  color: $grey-text;
+  margin-left: 15px;
+}
+.news-item__link{
+  text-decoration: none;
+  color: $grey-text;
+  font-weight: bold;
+  transition: .2s;
+  &:hover{
+    color: darken($grey-text, 50%);
+  }
+}
+.news-item__link-more-wrap{
+  display: flex;
+  justify-content: flex-end;
+}
+
+.link-more__text{
+  display: inline-block;
+  margin: 0 5px 0 0;
+}
+
+.link-more__ico{
+  width: 16px;
+  height: 16px;
+  fill: $grey-text;
+  transition: .2s;
+}
+
+.news-item__link-more{
+  text-decoration: none;
+  color: $grey-text;
+  transition: .2s;
+  text-align: right;
+  display: flex;
+  align-items: center;
+  &:hover{
+    color: darken($grey-text, 50%);
+    .link-more__ico{
+      fill: darken($grey-text, 50%);
+    }
+  }
+}
+
+
+.news-main__item{
+  display: flex;
+  padding: 0 20px;
+  width: 500px;
+}
+
+.slider-nav{
+  display: flex;
+  width: 50px;
+  height: 50px;
+  background: $grey-text;
+  border-radius: 50%;
+  justify-content: center;
+  align-items: center;
+}
+
+.nav__ico{
+  width: 20px;
+  height: 20px;
+  fill: $white-text;
+}
+
+.slider-nav__prev{
+  left: 0;
+  transform: translateX(-100%);
+  .nav__ico{
+    transform: rotate(180deg);
+  }
+}
+
+.slider-nav__next{
+  right: 0;
+  transform: translateX(100%);
+}
\ No newline at end of file

src/template/news-main/index.html

+<div class="news-main">
+    <div class="wrapper news-main__wrapper">
+        <h2 class="h2-line news-main__h2">Новости</h2>
+        <div class="news-main__content swiper-container-news">
+            <ul class="news-main__list swiper-wrapper" style="width: 1170px;">
+                <li class="news-main__item swiper-slide">
+                    <a href="" class="news-item__link"><img src="img/news-pre.png" class="news-item__img"></a>
+                    <div class="news-item__content">
+                        <a href="" class="news-item__link"><p>Bobcat S570 на Всемирной зимней универсиаде</p></a>
+                        <p>В марте следующего года, Красноярск откроет двери для XXIX Всемирной зимней универсиады,
+                            которая
+                            почти 50 лет привлекает внимание многочисленных зрителей.
+                            Подготовка начинается заблаговременно, </p>
+                        <div class="news-item__link-more-wrap"><a href="" class="news-item__link-more link-more"><p
+                                class="link-more__text">Подробнее</p>
+                            <svg class="link-more__ico">
+                                <use xlink:href="img/sprite-vector.svg#more"></use>
+                            </svg>
+                        </a></div>
+                    </div>
+                </li>
+                <li class="news-main__item swiper-slide">
+                    <a href="" class="news-item__link"><img src="img/news-pre.png" class="news-item__img"></a>
+                    <div class="news-item__content">
+                        <a href="" class="news-item__link"><p>Bobcat S570 на Всемирной зимней универсиаде</p></a>
+                        <p>В марте следующего года, Красноярск откроет двери для XXIX Всемирной зимней универсиады,
+                            которая
+                            почти 50 лет привлекает внимание многочисленных зрителей.
+                            Подготовка начинается заблаговременно, </p>
+                        <div class="news-item__link-more-wrap"><a href="" class="news-item__link-more link-more"><p
+                                class="link-more__text">Подробнее</p>
+                            <svg class="link-more__ico">
+                                <use xlink:href="img/sprite-vector.svg#more"></use>
+                            </svg>
+                        </a></div>
+                    </div>
+                </li>
+                <li class="news-main__item swiper-slide">
+                    <a href="" class="news-item__link"><img src="img/news-pre.png" class="news-item__img"></a>
+                    <div class="news-item__content">
+                        <a href="" class="news-item__link"><p>Bobcat S570 на Всемирной зимней универсиаде</p></a>
+                        <p>В марте следующего года, Красноярск откроет двери для XXIX Всемирной зимней универсиады,
+                            которая
+                            почти 50 лет привлекает внимание многочисленных зрителей.
+                            Подготовка начинается заблаговременно, </p>
+                        <div class="news-item__link-more-wrap"><a href="" class="news-item__link-more link-more"><p
+                                class="link-more__text">Подробнее</p>
+                            <svg class="link-more__ico">
+                                <use xlink:href="img/sprite-vector.svg#more"></use>
+                            </svg>
+                        </a></div>
+                    </div>
+                </li>
+            </ul>
+            <div class="slider-nav slider-nav__next swiper-button-next">
+                <svg class="nav__ico">
+                    <use xlink:href="img/sprite-vector.svg#more"></use>
+                </svg>
+            </div>
+            <div class="slider-nav slider-nav__prev swiper-button-prev">
+                <svg class="nav__ico">
+                    <use xlink:href="img/sprite-vector.svg#more"></use>
+                </svg>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file