GeekBrainsTutorial · GalkinMM · May 19, 2022
diff --git a/image/defGoods.png b/image/defGoods.png
diff --git a/index.htm b/index.htm
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="stylesheet" href="style/style.css">
+
+    <title>Document</title>
+</head>
+<body>
+    <header>
+        <div class="container">
+            <button class="cartButton header__cartButton" type="button">Корзина</button>
+        </div>
+    </header>
+
+    <main>
+        <div class="container">
+            <div class="goodsList"></div>
+        </div>
+    </main>
+
+
+    <script src="script/main.js"></script>
+</body>
+</html>
diff --git a/script/main.js b/script/main.js
@@ -0,0 +1,36 @@
+"use strict";
+
+const goods = [
+    { title: 'Shirt', price: 150 },
+    { title: 'Socks', price: 50 },
+    { title: 'Jacket', price: 350 },
+    { title: 'Shoes', price: 250 },
+    { },
+    { },
+    { },
+    { },
+    { },
+    { },
+    { },
+    { },
+    { }
+];
+
+const renderGoodsItem = (title = 'Товар закончился', price = '0') => 
+    `<div class='goodsItem'>
+        <img src='image/defGoods.png' alt='good'>
+        <h3>${title}</h3>
+        <p>${price}$</p>
+        <button class="cartButtonAdd" type="button">Добавить</button>
+    </div>`;
+
+const renderGoodsList = list => {
+    let goodsList = list.map(item => renderGoodsItem(item.title, item.price));
+    document.querySelector('.goodsList').innerHTML = goodsList.join('');
+};
+
+renderGoodsList(goods);
+
+
+
+
diff --git a/style/scss/_elements.scss b/style/scss/_elements.scss
@@ -0,0 +1,5 @@
+.cartButton,
+.cartButtonAdd {
+    padding: 4px 8px;
+    border-radius: 8px;
+}
diff --git a/style/scss/_header.scss b/style/scss/_header.scss
@@ -0,0 +1,13 @@
+/* Стили header */
+header {
+    .container {
+        border: 1px solid black;
+        padding: 8px 32px;
+        display: flex;
+        justify-content:flex-end;
+    }
+
+    &__cartButton {
+        margin-left: auto;
+    }
+}
diff --git a/style/scss/_main.scss b/style/scss/_main.scss
@@ -0,0 +1,29 @@
+/* Стили main */
+main {
+    .container {
+        padding: 32px;
+    }
+
+    .goodsList {
+        display: grid;
+        grid-template-columns: repeat(6, 1fr);
+        gap: 16px;
+    }
+
+    .goodsItem {
+        border: 1px solid black;
+        border-radius: 8px;
+        padding: 16px;
+        text-align: right;
+
+        img {
+            max-width: 100%;
+        }
+
+        img,
+        h3,
+        p{
+            padding-bottom: 4px;
+        }
+    }
+}
diff --git a/style/scss/_normalize.scss b/style/scss/_normalize.scss
@@ -0,0 +1,12 @@
+/* Указываем box sizing */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Убираем отступы */
+* {
+  padding: 0;
+  margin: 0;
+}
diff --git a/style/style.css b/style/style.css
diff --git a/style/style.css.map b/style/style.css.map
diff --git a/style/style.scss b/style/style.scss
@@ -0,0 +1,6 @@
+@import "scss/_normalize";
+
+@import "scss/elements";
+
+@import "scss/_header";
+@import "scss/_main";