zagidulin · zagidulin · Aug 20, 2020 · Tardigrada777 · Aug 21, 2020 · Tardigrada777
diff --git a/catalog.html b/catalog.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<title>Rollerskates</title>
+		<link rel="stylesheet" href="style.css">
+	</head>
+	<body>
+		<div class="wraper">
+			<div class="header">
+				<div id="logo">
+					<img src="image/logo_2.png" alt="logo">
+				</div>
+				<div class="main_menu">
+					<ul class="menulist">
+						<li><a href="index.html">Главная</a></li>
+						<li><a href="#">Каталог</a></li>
+						<li><a href="contacts.html">Контакты</a></li>
+					</ul>
+					<div class="cart">
+						<a href="#" class = "cart-button" >Корзина</a>
+					</div>
+				</div>
+			</div>
+			<hr>
+			<h1>Роликовые коньки</h1>
+			<div class="catalog-menu">
+				<ul>
+					<li class="catalog-menu-list catalog-active"><a href="#" class="catalog-link">ВСЕ</a></li>
+					<li class="catalog-menu-list"><a href="#" class="catalog-link">ФИТНЕС</a></li>
+					<li class="catalog-menu-list"><a href="#" class="catalog-link">ФРИСКЕЙТ</a></li>
+					<li class="catalog-menu-list"><a href="#" class="catalog-link">АГРЕССИВ</a></li>
+					<li class="catalog-menu-list"><a href="#" class="catalog-link">ДЕТСКИЕ</a></li>
+				</ul>
+			</div>
+			<div class="catalog">
+
+			</div>
+			<div class="forfooter"></div>
+		</div>
+		<div class="footer">
+			<hr>
+			<p><i>Все права защищены &copy;</i></p>
+		</div>
+		<script src="catalog_script.js" type="text/javascript"></script>
+	</body>
+</html>
diff --git a/catalog_script.js b/catalog_script.js
@@ -0,0 +1,31 @@
+'use strict'
+
+
+const goods = [
+	{title: 'Rollerblade Twister Edge', price: 150, link: 'twister_edge'},
+	{title: 'K2 Alexis 80 PRO', price: 50, link: 'k2_alexis_80_pro'},
+	{title: 'FRX 80', price: 350, link: 'seba_frx_80'},
+	{title: 'Rollerblade Macroblade', price: 250, link: 'rollerblade_macroblade_84W'},
+];
+
+
+const emptyList = [{title: 'no products found', price: '-'}];
+
+
+const renderGoodsItem = item => 
+	`<div class="product_preview">
+		<div class="preview_image">
+			<a href="catalog/${item.link}.html">
+				<img src="image/${item.link}.jpg" alt="" width="120" height="120">
+			</a>
+		</div><br>
+		<a href="catalog/${item.link}.html">${item.title}</a>
+		<p>${item.price} руб.</p>
+	</div>`;
+
+
+const renderGoodsList = (list=emptyList) =>
+	document.querySelector('.catalog').innerHTML = list.map(item => renderGoodsItem(item)).join('');
+
+
+renderGoodsList(goods);
diff --git a/image/heder.jpg b/image/heder.jpg
diff --git a/image/k2_alexis_80_pro.jpg b/image/k2_alexis_80_pro.jpg
diff --git a/image/logo_2.png b/image/logo_2.png
diff --git a/image/rollerblade_macroblade_84W.jpg b/image/rollerblade_macroblade_84W.jpg
diff --git a/image/seba_frx_80.jpg b/image/seba_frx_80.jpg
diff --git a/image/twister_edge.jpg b/image/twister_edge.jpg