diff --git a/image/defGoods.png b/image/defGoods.png new file mode 100644 index 0000000..b2bf8af Binary files /dev/null and b/image/defGoods.png differ diff --git a/index.htm b/index.htm new file mode 100644 index 0000000..14e9164 --- /dev/null +++ b/index.htm @@ -0,0 +1,28 @@ + + + + + + + + + + Document + + +
+
+ +
+
+ +
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/script/main.js b/script/main.js new file mode 100644 index 0000000..8abfa53 --- /dev/null +++ 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') => + `
+ good +

${title}

+

${price}$

+ +
`; + +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 new file mode 100644 index 0000000..804125e --- /dev/null +++ b/style/scss/_elements.scss @@ -0,0 +1,5 @@ +.cartButton, +.cartButtonAdd { + padding: 4px 8px; + border-radius: 8px; +} \ No newline at end of file diff --git a/style/scss/_header.scss b/style/scss/_header.scss new file mode 100644 index 0000000..a4c4c6d --- /dev/null +++ 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; + } +} \ No newline at end of file diff --git a/style/scss/_main.scss b/style/scss/_main.scss new file mode 100644 index 0000000..23edf19 --- /dev/null +++ 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; + } + } +} \ No newline at end of file diff --git a/style/scss/_normalize.scss b/style/scss/_normalize.scss new file mode 100644 index 0000000..4505e3a --- /dev/null +++ b/style/scss/_normalize.scss @@ -0,0 +1,12 @@ +/* Указываем box sizing */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Убираем отступы */ +* { + padding: 0; + margin: 0; +} \ No newline at end of file diff --git a/style/style.css b/style/style.css new file mode 100644 index 0000000..f0349a4 --- /dev/null +++ b/style/style.css @@ -0,0 +1,67 @@ +@charset "UTF-8"; +/* Указываем box sizing */ +*, +*::before, +*::after { + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +/* Убираем отступы */ +* { + padding: 0; + margin: 0; +} + +.cartButton, +.cartButtonAdd { + padding: 4px 8px; + border-radius: 8px; +} + +/* Стили header */ +header .container { + border: 1px solid black; + padding: 8px 32px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; +} + +header__cartButton { + margin-left: auto; +} + +/* Стили main */ +main .container { + padding: 32px; +} + +main .goodsList { + display: -ms-grid; + display: grid; + -ms-grid-columns: (1fr)[6]; + grid-template-columns: repeat(6, 1fr); + gap: 16px; +} + +main .goodsItem { + border: 1px solid black; + border-radius: 8px; + padding: 16px; + text-align: right; +} + +main .goodsItem img { + max-width: 100%; +} + +main .goodsItem img, +main .goodsItem h3, +main .goodsItem p { + padding-bottom: 4px; +} +/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/style/style.css.map b/style/style.css.map new file mode 100644 index 0000000..4cb69e6 --- /dev/null +++ b/style/style.css.map @@ -0,0 +1,13 @@ +{ + "version": 3, + "mappings": ";ACAA,0BAA0B;AAC1B,AAAA,CAAC;AACD,CAAC,AAAA,QAAQ;AACT,CAAC,AAAA,OAAO,CAAC;EACP,UAAU,EAAE,UAAU;CACvB;;AAED,qBAAqB;AACrB,AAAA,CAAC,CAAC;EACA,OAAO,EAAE,CAAC;EACV,MAAM,EAAE,CAAC;CACV;;ACXD,AAAA,WAAW;AACX,cAAc,CAAC;EACX,OAAO,EAAE,OAAO;EAChB,aAAa,EAAE,GAAG;CACrB;;ACJD,kBAAkB;AAClB,AACI,MADE,CACF,UAAU,CAAC;EACP,MAAM,EAAE,eAAe;EACvB,OAAO,EAAE,QAAQ;EACjB,OAAO,EAAE,IAAI;EACb,eAAe,EAAC,QAAQ;CAC3B;;AAEA,AAAD,kBAAa,CAAC;EACV,WAAW,EAAE,IAAI;CACpB;;ACXL,gBAAgB;AAChB,AACI,IADA,CACA,UAAU,CAAC;EACP,OAAO,EAAE,IAAI;CAChB;;AAHL,AAKI,IALA,CAKA,UAAU,CAAC;EACP,OAAO,EAAE,IAAI;EACb,qBAAqB,EAAE,cAAc;EACrC,GAAG,EAAE,IAAI;CACZ;;AATL,AAWI,IAXA,CAWA,UAAU,CAAC;EACP,MAAM,EAAE,eAAe;EACvB,aAAa,EAAE,GAAG;EAClB,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,KAAK;CAWpB;;AA1BL,AAiBQ,IAjBJ,CAWA,UAAU,CAMN,GAAG,CAAC;EACA,SAAS,EAAE,IAAI;CAClB;;AAnBT,AAqBQ,IArBJ,CAWA,UAAU,CAUN,GAAG;AArBX,IAAI,CAWA,UAAU,CAWN,EAAE;AAtBV,IAAI,CAWA,UAAU,CAYN,CAAC,CAAA;EACG,cAAc,EAAE,GAAG;CACtB", + "sources": [ + "style.scss", + "scss/_normalize.scss", + "scss/_elements.scss", + "scss/_header.scss", + "scss/_main.scss" + ], + "names": [], + "file": "style.css" +} \ No newline at end of file diff --git a/style/style.scss b/style/style.scss new file mode 100644 index 0000000..30e326a --- /dev/null +++ b/style/style.scss @@ -0,0 +1,6 @@ +@import "scss/_normalize"; + +@import "scss/elements"; + +@import "scss/_header"; +@import "scss/_main"; \ No newline at end of file