diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..44eefd3
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,30 @@
+.header {
+ display: flex;
+ flex-direction: row-reverse;
+ max-width: 1300px;
+ margin: 20px auto;
+ background-color: #fffab1;
+}
+
+.products {
+ max-width: 1300px;
+ margin: 0 auto;
+ display: flex;
+ justify-content: space-evenly;
+ flex-wrap: wrap;
+}
+
+.product-item {
+ width: 20%;
+ box-sizing: border-box;
+ background-color: #e2e2e2;
+ padding: 10px;
+ border: #e2e2e2 solid;
+ border-radius: 5px;
+}
+
+.btn-cart {
+ background-color: #7c5fff;
+ border-radius: 5px;
+ color: #ffffff;
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..366fb6f
--- /dev/null
+++ b/index.html
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..9761d6f
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,23 @@
+
+
+const products = [
+ { id: 1, title: 'Notebook', price: 2000 },
+ { id: 2, title: 'Keyboard', price: 200 },
+ { id: 3, title: 'Mouse', price: 100 },
+ { id: 4, title: 'Gamepad', price: 87 },
+];
+
+
+const renderProduct = (title = 'Товар отсутствует', price = 0) => {
+ return ``
+};
+
+const render = productsList => {
+ const productsElements = productsList.map(item => renderProduct(item.title, item.price));
+ document.querySelector('.products').innerHTML = productsElements.join('');
+};
+
+render(products);
\ No newline at end of file