diff --git a/YandexSansDisplay-Thin.ttf b/YandexSansDisplay-Thin.ttf new file mode 100644 index 0000000..199c690 Binary files /dev/null and b/YandexSansDisplay-Thin.ttf differ diff --git a/form.css b/form.css new file mode 100644 index 0000000..f624a90 --- /dev/null +++ b/form.css @@ -0,0 +1,34 @@ +.form +{ + grid-area: form; + background-color: white; + padding: 0 30px 30px; + margin: 10px 10px 0; +} + +.field +{ + clear: both; + text-align: right; + margin-bottom: 16px; +} + +label +{ + float: left; + margin-right: 160px; +} + +.form__wrap +{ + float: left; +} + +@media screen and (max-width: 1200px) and (min-width: 720px) +{ + .form + { + margin: 0 125px; + } + +} diff --git a/header.css b/header.css new file mode 100644 index 0000000..dbea301 --- /dev/null +++ b/header.css @@ -0,0 +1,87 @@ +.header +{ + padding: 15px; +} + +.header__name +{ + font: 50px 'YandexSans'; + display: inline-block; + font-weight: bold; +} + +.header__input +{ + display: inline-block; + position: absolute; + padding-top: 18px; + padding-left: 20px; + width: 65%; +} + +.input__search +{ + width: 85%; + height: 35px; + outline: none; + border: 2px solid #dcdcdc; +} + +.input__button +{ + height: 41px; + width: 10%; + margin-left: -5px; + background-color: #dcdcdc; + outline: none; + box-shadow: 0; +} + +.input__icon_hidden +{ + display: none; + outline: none; + vertical-align: middle; +} + +@media screen and (max-width: 1200px) and (min-width: 720px) +{ + .input__button + { + display: none; + } + + .input__icon_search + { + display: inline-block; + } + + .input__search + { + border: none; + } + + .input__search:focus + { + border: 2px solid #dcdcdc; + } +} + +@media screen and (max-width: 720px) +{ + .input__icon_hamburger + { + display: inline-block; + } + + .input__search + { + display: block; + } + + .input__button, + .input__icon_search + { + display: none; + } +} diff --git a/icons/hamburger.png b/icons/hamburger.png new file mode 100644 index 0000000..ae9d9c5 Binary files /dev/null and b/icons/hamburger.png differ diff --git a/icons/magnifier.png b/icons/magnifier.png new file mode 100644 index 0000000..d2eae5b Binary files /dev/null and b/icons/magnifier.png differ diff --git a/images/img.png b/images/img.png new file mode 100644 index 0000000..999f9ae Binary files /dev/null and b/images/img.png differ diff --git a/index.css b/index.css index e69de29..a5edaa2 100644 --- a/index.css +++ b/index.css @@ -0,0 +1,72 @@ +@import './header.css'; +@import './nav.css'; +@import './items.css'; +@import './popularItems.css'; +@import './form.css'; + +@font-face +{ + font-family: 'YandexSans'; + src: url(YandexSansDisplay-Thin.ttf); +} + +body +{ + font: 18px Helvetica, sans-serif; +} + +a +{ + text-decoration: none; + color: #4169e0; +} + +.wrapper +{ + margin: 20px 0 60px; + background-color: #dcdcdc; + padding: 45px 0; + display: grid; +} + +@media screen and (min-width: 1200px) +{ + + .wrapper + { + grid-template-columns: 30px 230px auto 230px 30px; + grid-template-rows: auto; + grid-gap: 15px; + grid-template-areas: '. nav items popular .' + '. . items . .' + '. . form . .'; + } +} + +@media screen and (max-width: 1200px) and (min-width: 720px) +{ + .wrapper + { + grid-template-columns: 15px auto 15px; + grid-template-rows: auto; + grid-gap: 30px; + grid-template-areas: '. nav .' + '. items .' + '. popular .' + '. form .'; + } + +} + +@media screen and (max-width: 720px) +{ + .wrapper + { + grid-template-columns: 1fr 450px 1fr; + grid-template-rows: auto; + grid-gap: 30px; + grid-template-areas: '. popular .' + '. items .' + '. form .'; + } +} diff --git a/index.html b/index.html index 97f19ec..2d6da11 100644 --- a/index.html +++ b/index.html @@ -1,10 +1,162 @@ + + Задача «Тим слишком занят» + +
+
+ Билли.Маркет +
+ + + + +
+
+
+
+
+ Морские ракушки +
+
+ Сунвениры из тайланда +
+
+ Автомобили тесла +
+
+ Марки из разных стран +
+
+
+
+ Заказать сувенир +
+
+
+
+
+
+ Ракушка +
+
+ Ракушка морская +
+
100 ₽
+
+ 4.5 +
+
+
+
+ 111 отзывов +
+
+
+
+
+ Ракушка +
+
+ Ракушка морская +
+
100 ₽
+
+ 4.5 +
+
+
+
+ 111 отзывов +
+
+
+
+
+ Ракушка +
+
+ Ракушка морская +
+
100 ₽
+
+ 4.5 +
+
+
+
+ 111 отзывов +
+
+
+
+
+ Ракушка +
+
+ Ракушка морская +
+
100 ₽
+
+ 4.5 +
+
+
+
+ 111 отзывов +
+
+
+
+

+ Популярные товары +

+
+
+ Ракушка морская +
+
+ Чесалка для спины +
+
+ Четки +
+
+
+
+

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

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
diff --git a/items.css b/items.css new file mode 100644 index 0000000..b44dc1a --- /dev/null +++ b/items.css @@ -0,0 +1,108 @@ +.items +{ + grid-area: items; + display: flex; + flex-wrap: wrap; + align-items: center; + align-content: start; + justify-content: center; + width: 100%; +} + +.item +{ + background-color: white; + padding: 70px 30px; + margin: 1px; + width: 40%; +} + +.item__imgSource +{ + width: 100%; +} + +.item__img +{ + margin-bottom: 16px; +} + +.item__subtitle, +.item__price +{ + margin-bottom: 8px; +} + +.item__price +{ + font-weight: bold; +} + +.item__rating +{ + position: relative; + display: inline-block; + width: 27px; + height: 18px; + margin-right: 14px; + padding: 2px 0 0 2px; + color: #fff; + border-width: 2px 0 2px 2px; + border-style: solid; + border-color: #359e00; + background: #359e00; +} + +.rating__corner +{ + position: absolute; + top: -3px; + right: -11px; + bottom: -4px; + clip: rect(0,13px,26px,1px); + width: 12px; +} + +.rating__triangle +{ + position: absolute; + top: 3px; + bottom: -2px; + left: 0; + z-index: 1; + clip: rect(-1px,11px,21px,0); + width: 12px; + height: 26px; +} + +.rating__triangle:after +{ + width: 12px; + height: 12px; + -webkit-transform: scaleX(.5) rotate(45deg); + -ms-transform: scaleX(.5) rotate(45deg); + transform: scaleX(.5) rotate(45deg); + border-color: #359e00; + background: 0 0 #359e00; + top: 1px; + left: -8px; + border-width: 3px; +} + +.rating__corner:after, +.rating__triangle:after, +.rating_outline_yes:before +{ + position: absolute; + display: block; + content: ''; + border-style: solid; +} + +@media screen and (max-width: 1200px) and (min-width: 720px) +{ + .item + { + width: 30%; + } +} diff --git a/nav.css b/nav.css new file mode 100644 index 0000000..566290c --- /dev/null +++ b/nav.css @@ -0,0 +1,44 @@ +.nav +{ + grid-area: nav; + background-color: white; + padding: 30px; +} + +.nav div +{ + margin-bottom: 10px; +} + +@media screen and (max-width: 1200px) and (min-width: 720px) +{ + .nav + { + margin: 0 125px; + display: flex; + flex-wrap: wrap; + justify-content: center; + position: relative; + } + + .nav div + { + margin-left: 50px; + margin-right: 50px; + } + + .nav__order + { + position: absolute; + bottom: 5px; + left: 30%; + } +} + +@media screen and (max-width: 720px) +{ + .nav + { + display: none; + } +} diff --git a/popularItems.css b/popularItems.css new file mode 100644 index 0000000..ea98f47 --- /dev/null +++ b/popularItems.css @@ -0,0 +1,39 @@ +.popularItems +{ + grid-area: popular; + background-color: white; + padding: 30px; +} + +.popularItems__head +{ + margin-top: 0; +} + +.popularItems__items div +{ + margin-bottom: 10px; +} + +@media screen and (max-width: 1200px) and (min-width: 720px) +{ + .popularItems + { + margin: 0 125px; + } + + .popularItems__items + { + display: flex; + justify-content: space-between; + } +} + +@media screen and (max-width: 720px) +{ + .popularItems + { + margin: 0 37px; + } + +}