diff --git a/index.html b/index.html
new file mode 100755
index 0000000..4397fc4
--- /dev/null
+++ b/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="style.css">
+    <title>Интернет-магазин</title>
+</head>
+
+<body>
+    <header>
+        <button class="btn-cart" type="button">Корзина</button>
+    </header>
+    <main>
+        <div class="clearfix"></div>
+        <div class="products"></div>
+    </main>
+    <script src="./js/main.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
new file mode 100755
index 0000000..9cb7a2f
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,39 @@
+const products = [{
+        id: 1,
+        title: 'Notebook',
+        price: 20000
+    },
+    {
+        id: 2,
+        title: 'Mouse',
+        price: 1500
+    },
+    {
+        id: 3,
+        title: 'Keyboard',
+        price: 5000
+    },
+    {
+        id: 4,
+        title: 'Gamepad',
+        price: 4500
+    },
+    {
+        id: 5,
+    },
+];
+
+const renderProduct = (title = 'Product name', price = 0) => {
+    return `<div class="product-item">
+                <h3>${title}</h3>
+                <p>${price}</p>
+                <button class="by-btn">Добавить в корзину</button>
+              </div>`;
+};
+
+const catalogInit = (list) => {
+    const productList = list.map((item) => renderProduct(item.title, item.price));
+    document.querySelector('.products').innerHTML = productList.join('');
+};
+
+catalogInit(products);
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100755
index 0000000..70d2e0c
--- /dev/null
+++ b/style.css
@@ -0,0 +1,49 @@
+* {
+    margin: 0px;
+    padding: 0px;
+}
+
+.product-item {
+    position: relative;
+    display: inline-block;
+    width: 150px;
+    height: 150px;
+    outline: 1px solid black;
+    margin: 10px;
+
+}
+
+.product-item:hover {
+    outline: 0px solid black;
+
+}
+
+.product-item>button {
+    position: absolute;
+    bottom: 10px;
+    left: 10px;
+}
+
+.product-item>h3 {
+    position: absolute;
+    text-align: center;
+    top: 30px;
+}
+
+.product-item>p {
+    position: absolute;
+    bottom: 40px;
+}
+
+.btn-cart {
+    height: 50px;
+    width: 150px;
+    margin: 10px;
+    float: right;
+}
+
+.clearfix {
+    content: "";
+    clear: both;
+    display: table;
+}
\ No newline at end of file
