diff --git a/.htmllintrc b/.htmllintrc index fbd6d94..76a7619 100644 --- a/.htmllintrc +++ b/.htmllintrc @@ -30,7 +30,6 @@ "spec-char-escape": true, "tag-bans": [ "b", - "i", "u", "center", "style", diff --git a/header.css b/header.css new file mode 100644 index 0000000..d9f1d11 --- /dev/null +++ b/header.css @@ -0,0 +1,88 @@ +.header +{ + grid-area: h; + padding: 5px 10px 10px; + display: grid; + background-color: #fff; +} + +.header__title +{ + grid-area: t; + font-size: 25px; + margin: 0; +} + +.header__burger +{ + display: none !important; +} + +.search +{ + grid-area: s; + width: 100%; + display: flex; +} + +.search__input, +.search__button +{ + box-sizing: border-box; + border: 1px solid #e8e8e8; + height: 30px; +} + +.search__input +{ + width: 90%; +} + +.search__button +{ + background-color: #e8e8e8; +} + +.header__search-icon +{ + display: none !important; +} + +@media screen and (min-width: 601px) +{ + .header + { + grid-template-areas: 't s'; + } +} + +@media screen and (min-width: 601px) and (max-width: 850px) +{ + .search + { + display: none; + } + + .header__search-icon + { + display: block !important; + position: absolute; + top: 10px ; + right: 10px; + } +} + +@media screen and (max-width: 600px) +{ + .header + { + grid-template-areas: 't b' 's s'; + } + + .header__burger + { + grid-area: b; + margin: auto 0 auto auto; + display: block !important; + } +} diff --git a/index.css b/index.css index e69de29..51c4b5d 100644 --- a/index.css +++ b/index.css @@ -0,0 +1,56 @@ +@import 'header.css'; +@import 'suggest.css'; +@import 'navigation.css'; +@import 'order.css'; +@import 'items.css'; +@import 'item.css'; + +body +{ + margin: 0; + font: 17px sans-serif; + background-color: #f6f6f6; +} + +main +{ + display: grid; + padding: 20px; + grid-row-gap: 10px; + width: 100%; + box-sizing: border-box; +} + +.link +{ + color: #3072c4; + text-decoration: none; +} + +@media screen and (min-width: 851px) +{ + main + { + grid-template-areas: 'n l s' '. l .' '. o .'; + grid-column-gap: 5px; + justify-items: center; + + } +} + +@media screen and (min-width: 601px) and (max-width: 850px) +{ + main + { + grid-template-areas: 'n' 'l' 's' 'o'; + } +} + +@media screen and (max-width: 600px) +{ + main + { + grid-template-areas: 's' 'l' 'o'; + justify-items: center; + } +} diff --git a/index.html b/index.html index 97f19ec..3530df8 100644 --- a/index.html +++ b/index.html @@ -2,9 +2,119 @@ + Задача «Тим слишком занят» + + +
+

Билли.Маркет

+ +
+ + +
+ +
+
+ +
+
+ Термокружкус +
+ Термокружкус «Батарейка» + 799 ₽ +
+ 4.5 + 123 отзыва +
+
+
+
+ Чесалка +
+ Чесалка + 1000 ₽ +
+ 3.0 + 2 отзыва +
+
+
+
+ Розеткус +
+ Удлиннитель «Розеткус» + 2000 ₽ +
+ 4.0 + 1321 отзыв +
+
+
+
+ Tesla X +
+ Tesla X + 1231232 ₽ +
+ 5.0 + 1 отзыв +
+
+
+
+ +
+

Заказать сувенир

+ + + + + +
+ + +
+
+
diff --git a/index.js b/index.js new file mode 100644 index 0000000..0fb49b7 --- /dev/null +++ b/index.js @@ -0,0 +1,29 @@ +window.onload = () => { + const burgerMenu = document.querySelector('.header__burger'); + const navigationClose = document.querySelector('.navigation__close'); + const navigation = document.querySelector('.navigation'); + const search = document.querySelector('.search'); + const searchInput = document.querySelector('.search__input'); + const searchIcon = document.querySelector('.header__search-icon'); + + burgerMenu.onclick = () => { + navigation.style.display = 'flex'; + }; + + navigationClose.onclick = () => { + navigation.style.display = 'none'; + }; + + searchIcon.onclick = () => { + search.style.display = 'flex'; + searchIcon.classList.remove('fa-search'); + }; + + searchInput.onblur = () => { + const width = document.documentElement.clientWidth; + if (width > 600 && width <= 850) { + search.style.display = 'none'; + searchIcon.classList.add('fa-search'); + } + }; +}; diff --git a/item.css b/item.css new file mode 100644 index 0000000..7a52fc1 --- /dev/null +++ b/item.css @@ -0,0 +1,50 @@ +.item +{ + display: flex; + flex-direction: column; + background-color: #fff; + padding: 20px; + align-items: center; + margin: 2px; + box-sizing: border-box; + width: 300px; + height: 320px; + justify-content: space-between; +} + +.item__description +{ + display: flex; + flex-direction: column; + text-align: left; + width: 100%; +} + +.item__price +{ + font-weight: bold; +} + +.item__rating-value +{ + position: relative; + background-color: #569f20; + padding: 1px; + width: 35px; + height: 20px; + box-sizing: border-box; +} + +.item__rating-reviews +{ + font-size: .7em; + color: #9d9d9d; +} + +@media screen and (min-width: 601px) and (max-width: 850px) +{ + .item + { + flex-grow: 1; + } +} diff --git a/items.css b/items.css new file mode 100644 index 0000000..21e9aa4 --- /dev/null +++ b/items.css @@ -0,0 +1,31 @@ +.items +{ + grid-area: l; + display: flex; + align-items: center; +} + +@media screen and (min-width: 851px) +{ + .items + { + width: 610px; + } +} + +@media screen and (min-width: 601px) +{ + .items + { + flex-wrap: wrap; + flex-direction: row; + } +} + +@media screen and (max-width: 600px) +{ + .items + { + flex-direction: column; + } +} diff --git a/navigation.css b/navigation.css new file mode 100644 index 0000000..c0c75f0 --- /dev/null +++ b/navigation.css @@ -0,0 +1,63 @@ +.navigation__close +{ + display: none; +} + +.navigation +{ + grid-area: n; + display: flex; + background-color: #fff; + flex-direction: column; + box-sizing: border-box; + padding: 10px; + width: 100%; +} + +.navigation__link +{ + margin-bottom: 10px; +} + +@media screen and (min-width: 601px) and (max-width: 850px) +{ + .navigation + { + flex-direction: row; + flex-wrap: wrap; + } + + .navigation__link + { + width: 50%; + flex-grow: 1; + text-align: center; + } + + .navigation__order + { + margin: 0 auto; + } +} + +@media screen and (max-width: 600px) +{ + .navigation + { + display: none; + position: fixed; + right: 0; + top: 0; + width: 50%; + height: 100%; + } + + .navigation__close + { + display: block; + position: absolute; + right: 15px; + top: 10px; + color: #9d9d9d; + } +} diff --git a/order.css b/order.css new file mode 100644 index 0000000..c342f4a --- /dev/null +++ b/order.css @@ -0,0 +1,51 @@ +.order +{ + display: flex; + flex-direction: column; + background-color: #fff; + padding: 20px; + grid-area: o; + box-sizing: border-box; +} + +.order__title +{ + margin: 0 0 10px; + font-weight: normal; +} + +.order__row +{ + display: flex; + justify-content: space-between; + margin-bottom: 5px; +} + +.order__input +{ + box-sizing: border-box; + min-width: 100px; + flex-basis: 50%; +} + +.order__buttons +{ + display: flex; + justify-content: space-between; +} + +@media screen and (min-width: 851px) +{ + .order + { + width: 610px; + } +} + +@media screen and (max-width: 600px) +{ + .order + { + width: 300px; + } +} diff --git a/static/chesalka.jpg b/static/chesalka.jpg new file mode 100644 index 0000000..9bf9968 Binary files /dev/null and b/static/chesalka.jpg differ diff --git a/static/rozetkus.jpg b/static/rozetkus.jpg new file mode 100644 index 0000000..58e3388 Binary files /dev/null and b/static/rozetkus.jpg differ diff --git a/static/tesla.jpeg b/static/tesla.jpeg new file mode 100644 index 0000000..433e726 Binary files /dev/null and b/static/tesla.jpeg differ diff --git a/static/thermokruzhkus.jpg b/static/thermokruzhkus.jpg new file mode 100644 index 0000000..a3e0560 Binary files /dev/null and b/static/thermokruzhkus.jpg differ diff --git a/suggest.css b/suggest.css new file mode 100644 index 0000000..5fc3dbc --- /dev/null +++ b/suggest.css @@ -0,0 +1,50 @@ +.suggest +{ + grid-area: s; + background-color: #fff; + padding: 20px; + box-sizing: border-box; + width: 100%; +} + +.suggest__title +{ + margin: 0 0 10px; +} + +.suggest__items +{ + position: relative; + display: flex; + padding-left: 15px; +} + +@media screen and (min-width: 851px) +{ + .suggest__items + { + flex-direction: column; + } +} + +@media screen and (min-width: 601px) and (max-width: 850px) +{ + .suggest__items + { + flex-direction: row; + justify-content: space-between; + } +} + +@media screen and (max-width: 600px) +{ + .suggest + { + width: 300px; + } + + .suggest__items + { + flex-direction: column; + } +}