1

CSS/news.css

@@ -0,0 +1,36 @@
+.wrapper {
+    width: 80%;
+    margin: auto;
+}
+
+.posts {
+/*    border: 1px solid red;*/
+}
+
+.posts > .post {
+    display: flex;
+    padding: 10px;
+}
+
+.posts > .post > .poster {
+    display: flex;
+    height: 160px;
+    width: 360px;
+    margin: 0 40px 0 0;
+    border-radius: 8px;
+    box-shadow: 0 2px 6px 0 rgba(0,0,0,0.6);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+}
+
+.posts > .post > div > .head {
+    font-size: 2em;
+    padding: 0 0 20px 0;
+}
+
+.posts > .post > div > .time {
+    font-size: 14px;
+    padding: 0 0 14px 0;
+    color: #888;
+}

DATA/news.js

@@ -0,0 +1,69 @@
+var posts_data = [
+    {
+        "head": "🎉 Приобретён 3-ёх осевой ЧПУ фрезер",
+        "time": "10 марта 2022",
+        "note": "Дорогие клиенты, мы рады сообщить, что с сегодняшнего дня у нас имеется 3-ёх осевой ЧПУ станок. Вам доступна фрезеровка деталей высотой до 20 сантиметров с точностью до сотой доли миллиметра"
+    },
+
+    {
+        "head": "💈 Наружная реклама",
+        "time": "22 марта 2022",
+        "note": "Изготовление наружных и внутренних вывесок, каркасов для рекламы теперь достопно вам для заказа у нас. Элементы из ПВХ пластика, ПЭТ пластика, металлические и деревянные конструкции"
+    },
+
+    {
+        "head": "☠️ Мы закрываем компанию",
+        "time": "1 апреля 2022",
+        "note": "Это шутка) С праздником"
+    },
+
+    {
+        "head": "💡 Светящиеся вывески",
+        "time": "11 апреля 2022",
+        "note": "С сегодняшнего дня, Дорогие Клиенты, вам доступны для заказа светящиесявывески вывески на основе свотодиодных элементов. Полупрозрачные материалы, подобные акрину, имеются в ассортименте"
+    },
+
+    {
+        "head": "🌈 Разноцветный акрил",
+        "time": "16 апреля 2022",
+        "note": "Дорогие клиенты, вам доступны для заказа материалы из 100% прозрачного акрилового материала, цветного непрозрачного или полупрозрачного, а также иделия из данного материала. Выглядит невероятно"
+    },
+
+    {
+        "head": "🔨 Композитный метериал",
+        "time": "24 апреля 2022",
+        "note": "К вашему вниманию представляем композитный материал. Устойчивый к механическому воздействию, невыгорает на солнце и не уступает в крепкости стали. Срок службы 50 лет! И он теперь доступен вам, Дорогие клиенты"
+    },
+
+    {
+        "head": "🌟 Неоновые вывески",
+        "time": "29 апреля 2022",
+        "note": "Больше света - больше внимания! Уважаемые клиенты, изготовление неоновых вывесок для вашего бизнеса теперь доступно для заказа у нашей компании"
+    },
+
+    {
+        "head": "",
+        "time": "",
+        "note": ""
+    },
+
+    {
+        "head": "",
+        "time": "",
+        "note": ""
+    },
+
+    {
+        "head": "",
+        "time": "",
+        "note": ""
+    },
+
+    {
+        "head": "",
+        "time": "",
+        "note": ""
+    },
+
+
+]

JS/news.js

@@ -0,0 +1,13 @@
+var posts = document.getElementsByClassName('posts')[0];
+
+for( i=0; i<posts_data.length; i++ ){
+posts.innerHTML += `
+                    <div class="post">
+                        <div class="poster" style="background-image: url(img/news/${i+1}.jpg)"></div>
+                        <div>
+                            <div class="head">${posts_data[i].head}</div>
+                            <div class="time">${posts_data[i].time}</div>
+                            <div class="note">${posts_data[i].note}</div>
+                        </div>
+                    </div>
+`};

news.html

@@ -16,6 +16,8 @@
     <!-- ПОДКЛЮЧЕНИЕ ОСНОВНЫХ СТИЛЕЙ -->
     <link rel="stylesheet" href="CSS/style.css">
     <link rel="stylesheet" href="CSS/header.css">
+
+    <link rel="stylesheet" href="CSS/news.css">
     <title>Новости</title>
 
     <!-- ПОДКЛЮЧЕНИЕ JQUERY -->
@@ -68,8 +70,17 @@
             </div>
         </header>
 
-
-        <div style="color: #000;padding: 100px 20px">Увы... Тут пока ничего нет  0_0</div>
+
+        <main style="color: #000;padding: 100px 20px">
+
+            <div class="wrapper">
+
+                <!-- Блок с постами -->
+                <div class="posts"></div>
+
+            </div>
+
+        </main>
 
 
     </div>
@@ -99,4 +110,8 @@ <h3>Местоположение:</h3>
 
     </footer>
 </body>
+
+    <!-- Данные --><script type="text/javascript" src="DATA/news.js"></script>
+    <!-- Скрипт --><script type="text/javascript" src="JS/news.js"></script>
+
 </html>