diff --git a/dist/images/logo.svg b/dist/images/logo.svg deleted file mode 100644 index 058f4c3..0000000 --- a/dist/images/logo.svg +++ /dev/null @@ -1,30 +0,0 @@ - - - - - - - diff --git a/dist/index.html b/dist/index.html index f26f42b..985e665 100644 --- a/dist/index.html +++ b/dist/index.html @@ -1,13 +1,235 @@ - - - Title - - - - Logo -

Hello Mate academy

- - + + + + + Uber eats + + + + + +
+
+ +
+
+ +

to

+
+ + +
+ +
+
+
+ + register + +
+
+
+
+
+
+ + +
+
+

Moscow Restaurants

+
+
+ +

Макдоналдс

+
    +
  • + Бургери +
    • +
+

25-35 Min

+
+
+ +

WOKWEI

+
    +
  • + Китайська +
    • +
  • + Азіатська +
    • +
+

40-50 Min

+
+
+ +

YIZHA

+
    +
  • + Американська +
    • +
  • + Бургери +
    • +
  • + Вулична їжа +
    • +
+

35-45 Min

+
+
+ +

Musafir (вул. Саксаганська)

+
    +
  • + Близькосхідна +
    • +
+

30-40 Min

+
+
+ +

WOKWEI

+
    +
  • + Китайська +
    • +
  • + Азіатська +
    • +
+

40-50 Min

+
+
+ +

Milk Bar

+
    +
  • + Десерти +
    • +
  • + Європейська +
    • +
+

25-35 Min

+
+
+ +

Mimosa Brookly Pizza

+
    +
  • + Італійська +
    • +
  • + Піца +
    • +
  • + Американська +
    • +
+

15-25 Min

+
+
+ +

To Be

+
    +
  • + Японська +
    • +
  • + Азіатська +
    • +
  • + Суші +
    • +
+

25-35 Min

+
+
+ +

Druzi Cafe (вул. Прорізна)

+
    +
  • + Бургери +
    • +
+

30-40 Min

+
+ +
+
+
+
+ + diff --git a/dist/scripts/main.js b/dist/scripts/main.js index df811b4..ad9a93a 100644 --- a/dist/scripts/main.js +++ b/dist/scripts/main.js @@ -1,3 +1 @@ 'use strict'; - -console.log('hello mate academy!'); diff --git a/dist/styles/main.css b/dist/styles/main.css deleted file mode 100644 index d04391a..0000000 --- a/dist/styles/main.css +++ /dev/null @@ -1,14 +0,0 @@ -h1 { - font-family: "Roboto", sans-serif; - font-weight: 400; } - -@font-face { - font-family: "Roboto"; - src: url("../fonts/Roboto-Regular-webfont.woff") format("woff"); - font-weight: normal; - font-style: normal; } - -body { - background: #eee; } - -/*# sourceMappingURL=main.css.map */ diff --git a/dist/styles/main.css.map b/dist/styles/main.css.map deleted file mode 100644 index b97d669..0000000 --- a/dist/styles/main.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["utils/_extends.scss","_fonts.scss","main.scss","utils/_vars.scss"],"names":[],"mappings":"AAAA;EACE,iCAAiC;EACjC,gBAAgB,EAAA;;ACFlB;EACE,qBAAqB;EACrB,+DAA+D;EAC/D,mBAAmB;EACnB,kBAAkB,EAAA;;ACApB;EACE,gBCLW,EAAA","file":"main.css","sourcesContent":["%h1 {\n font-family: \"Roboto\", sans-serif;\n font-weight: 400;\n}\n","@font-face {\n font-family: \"Roboto\";\n src: url(\"../fonts/Roboto-Regular-webfont.woff\") format(\"woff\");\n font-weight: normal;\n font-style: normal;\n}\n","@import \"utils\";\n@import \"fonts\";\n@import \"typography\";\n\nbody {\n background: $c-gray;\n}\n","$c-gray: #eee;\n"]} \ No newline at end of file diff --git a/src/README.md b/src/README.md new file mode 100644 index 0000000..dea424e --- /dev/null +++ b/src/README.md @@ -0,0 +1 @@ +https://koretskyi.github.io/gulp-template/ diff --git a/src/images/Stores__img/Group.png b/src/images/Stores__img/Group.png new file mode 100644 index 0000000..ffa3eab Binary files /dev/null and b/src/images/Stores__img/Group.png differ diff --git a/src/images/Stores__img/en_badge_web_generic-cf6dad406f.png b/src/images/Stores__img/en_badge_web_generic-cf6dad406f.png new file mode 100644 index 0000000..a72d942 Binary files /dev/null and b/src/images/Stores__img/en_badge_web_generic-cf6dad406f.png differ diff --git a/src/images/icon/Arr__down.png b/src/images/icon/Arr__down.png new file mode 100644 index 0000000..57c790c Binary files /dev/null and b/src/images/icon/Arr__down.png differ diff --git a/src/images/icon/Arr__up.svg b/src/images/icon/Arr__up.svg new file mode 100644 index 0000000..2c1ebe3 --- /dev/null +++ b/src/images/icon/Arr__up.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/Group.png b/src/images/icon/Group.png new file mode 100644 index 0000000..d769ec7 Binary files /dev/null and b/src/images/icon/Group.png differ diff --git a/src/images/icon/Shape.svg b/src/images/icon/Shape.svg new file mode 100644 index 0000000..673f935 --- /dev/null +++ b/src/images/icon/Shape.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/Shape1.svg b/src/images/icon/Shape1.svg new file mode 100644 index 0000000..aa5c18b --- /dev/null +++ b/src/images/icon/Shape1.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/basket.svg b/src/images/icon/basket.svg new file mode 100644 index 0000000..150a37e --- /dev/null +++ b/src/images/icon/basket.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/icon/facebook__icon.svg b/src/images/icon/facebook__icon.svg new file mode 100644 index 0000000..e93d2a1 --- /dev/null +++ b/src/images/icon/facebook__icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/instagram__icon.svg b/src/images/icon/instagram__icon.svg new file mode 100644 index 0000000..b1c617c --- /dev/null +++ b/src/images/icon/instagram__icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/tweeter__icon.svg b/src/images/icon/tweeter__icon.svg new file mode 100644 index 0000000..e6ffa84 --- /dev/null +++ b/src/images/icon/tweeter__icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/logo.svg b/src/images/logo.svg deleted file mode 100644 index 058f4c3..0000000 --- a/src/images/logo.svg +++ /dev/null @@ -1,30 +0,0 @@ - - - - - - - diff --git a/src/images/menue__items__img/95b745f6ce6a45903c3ed254afd72e46-w550-27.png b/src/images/menue__items__img/95b745f6ce6a45903c3ed254afd72e46-w550-27.png new file mode 100644 index 0000000..91fdf91 Binary files /dev/null and b/src/images/menue__items__img/95b745f6ce6a45903c3ed254afd72e46-w550-27.png differ diff --git a/src/images/menue__items__img/95b745f6ce6a45903c3ed254afd72e46-w550-272.png b/src/images/menue__items__img/95b745f6ce6a45903c3ed254afd72e46-w550-272.png new file mode 100644 index 0000000..acb0239 Binary files /dev/null and b/src/images/menue__items__img/95b745f6ce6a45903c3ed254afd72e46-w550-272.png differ diff --git a/src/images/menue__items__img/95b745f6ce6a45903c3ed254afd72e46-w550-273.png b/src/images/menue__items__img/95b745f6ce6a45903c3ed254afd72e46-w550-273.png new file mode 100644 index 0000000..1b85884 Binary files /dev/null and b/src/images/menue__items__img/95b745f6ce6a45903c3ed254afd72e46-w550-273.png differ diff --git a/src/images/menue__items__img/95b745f6ce6a45903c3ed254afd72e46-w550-274.png b/src/images/menue__items__img/95b745f6ce6a45903c3ed254afd72e46-w550-274.png new file mode 100644 index 0000000..d49a067 Binary files /dev/null and b/src/images/menue__items__img/95b745f6ce6a45903c3ed254afd72e46-w550-274.png differ diff --git a/src/images/menue__items__img/95b745f6ce6a45903c3ed254afd72e46-w550-276.png b/src/images/menue__items__img/95b745f6ce6a45903c3ed254afd72e46-w550-276.png new file mode 100644 index 0000000..255106c Binary files /dev/null and b/src/images/menue__items__img/95b745f6ce6a45903c3ed254afd72e46-w550-276.png differ diff --git a/src/images/menue__items__img/95b745f6ce6a45903c3ed254afd72e46-w550-277.png b/src/images/menue__items__img/95b745f6ce6a45903c3ed254afd72e46-w550-277.png new file mode 100644 index 0000000..e660574 Binary files /dev/null and b/src/images/menue__items__img/95b745f6ce6a45903c3ed254afd72e46-w550-277.png differ diff --git a/src/images/menue__items__img/95b745f6ce6a45903c3ed254afd72e46-w550-2778.png b/src/images/menue__items__img/95b745f6ce6a45903c3ed254afd72e46-w550-2778.png new file mode 100644 index 0000000..4c5a0cf Binary files /dev/null and b/src/images/menue__items__img/95b745f6ce6a45903c3ed254afd72e46-w550-2778.png differ diff --git a/src/images/menue__items__img/95b745f6ce6a45903c3ed254afd72e46-w550-278.png b/src/images/menue__items__img/95b745f6ce6a45903c3ed254afd72e46-w550-278.png new file mode 100644 index 0000000..1882738 Binary files /dev/null and b/src/images/menue__items__img/95b745f6ce6a45903c3ed254afd72e46-w550-278.png differ diff --git a/src/images/menue__items__img/95b745f6ce6a45903c3ed254afd72e46-w550-279.png b/src/images/menue__items__img/95b745f6ce6a45903c3ed254afd72e46-w550-279.png new file mode 100644 index 0000000..8d3a91b Binary files /dev/null and b/src/images/menue__items__img/95b745f6ce6a45903c3ed254afd72e46-w550-279.png differ diff --git a/src/index.html b/src/index.html index 300ceb0..985e665 100644 --- a/src/index.html +++ b/src/index.html @@ -1,14 +1,235 @@ - - - - Title - - - - Logo -

Hello Mate Academy

- - + + + + + Uber eats + + + + + +
+
+ +
+
+ +

to

+
+ + +
+ +
+
+
+ + register + +
+
+
+
+
+
+ + +
+
+

Moscow Restaurants

+
+
+ +

Макдоналдс

+
    +
  • + Бургери +
    • +
+

25-35 Min

+
+
+ +

WOKWEI

+
    +
  • + Китайська +
    • +
  • + Азіатська +
    • +
+

40-50 Min

+
+
+ +

YIZHA

+
    +
  • + Американська +
    • +
  • + Бургери +
    • +
  • + Вулична їжа +
    • +
+

35-45 Min

+
+
+ +

Musafir (вул. Саксаганська)

+
    +
  • + Близькосхідна +
    • +
+

30-40 Min

+
+
+ +

WOKWEI

+
    +
  • + Китайська +
    • +
  • + Азіатська +
    • +
+

40-50 Min

+
+
+ +

Milk Bar

+
    +
  • + Десерти +
    • +
  • + Європейська +
    • +
+

25-35 Min

+
+
+ +

Mimosa Brookly Pizza

+
    +
  • + Італійська +
    • +
  • + Піца +
    • +
  • + Американська +
    • +
+

15-25 Min

+
+
+ +

To Be

+
    +
  • + Японська +
    • +
  • + Азіатська +
    • +
  • + Суші +
    • +
+

25-35 Min

+
+
+ +

Druzi Cafe (вул. Прорізна)

+
    +
  • + Бургери +
    • +
+

30-40 Min

+
+ +
+
+
+
+ + diff --git a/src/scripts/main.js b/src/scripts/main.js index df811b4..ad9a93a 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1,3 +1 @@ 'use strict'; - -console.log('hello mate academy!'); diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss deleted file mode 100644 index 2067b3f..0000000 --- a/src/styles/_fonts.scss +++ /dev/null @@ -1,6 +0,0 @@ -@font-face { - font-family: "Roboto"; - src: url("../fonts/Roboto-Regular-webfont.woff") format("woff"); - font-weight: normal; - font-style: normal; -} diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss deleted file mode 100644 index 1837eb4..0000000 --- a/src/styles/_typography.scss +++ /dev/null @@ -1,3 +0,0 @@ -h1 { - @extend %h1; -} diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss deleted file mode 100644 index 1366a06..0000000 --- a/src/styles/_utils.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import "utils/vars"; -@import "utils/mixins"; -@import "utils/extends"; diff --git a/src/styles/main.css b/src/styles/main.css new file mode 100644 index 0000000..01e12c9 --- /dev/null +++ b/src/styles/main.css @@ -0,0 +1,299 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + background: none; +} + +ul, +li { + list-style: none; +} + +a { + text-decoration: none; + color: #1d1d1d; + font-weight: normal; +} + +body { + font-family: "Roboto", sans-serif; +} + +.box-content { + max-width: 956px; + margin: 0 auto; +} + +header { + box-shadow: 0 0 16px rgba(38, 38, 38, 0.16); + font-size: 16px; +} + +.header { + display: flex; + justify-content: space-around; + align-items: center; + height: 72px; +} + +.logo { + text-transform: uppercase; + font-weight: bold; + font-size: 20px; +} + +.logo span { + font-weight: normal; + color: #57ad56; +} + +.asap { + display: flex; +} + +.button:hover { + color: #fff; + background: #262626; + cursor: pointer; +} + +.filead { + display: inline-block; + text-align: center; + font-weight: normal; + font-size: 16px; + border: 1px solid #e0e0e0; + border-radius: 2px; + padding: 12px 8px; +} + +.asap__button { + background-color: #fff; + padding: 0 12px; +} + +.asap__text { + padding: 12px 8px; + color: #626262; +} + +.asap__adres { + display: flex; + align-items: center; +} + +.asap__adres input { + display: inline-block; + text-align: center; + border: none; + font-size: 16px; +} + +.asap__adres input:focus { + outline: none; +} + +.inits_button { + display: flex; + align-items: center; + justify-content: space-between; + width: 200px; +} + +.search { + display: flex; + border-bottom: 1px solid rgba(117, 117, 117, 0.3); +} + +.search img { + padding: 40px 0 15px; +} + +.search__input { + border: none; + opacity: 0.5; + font-size: 16px; + padding: 40px 0 15px 10px; + +} + +.search__input:focus { + outline: none; +} + +h1 { + margin-top: 56px; + font-weight: normal; + font-size: 22px; + line-height: 34px; +} + +.menue { + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +.menue__item { + width: 30%; + margin: 16px 0; +} + +.menue__item img { + width: 100%; +} + +.menue__item__restaurant { + padding: 16px 0 4px; +} + +.menue__item__tag { + font-size: 14px; + color: #626262; +} + +.one__tag::before { + content: "₴"; +} + +.double__tag::before { + content: "₴₴"; +} + +.menue__item__tag li { + list-style: none; + display: inline-block; +} + +.menue__item__tag li::before { + content: "•"; +} + +.menue__item__time { + padding: 4px 0 0; + margin-bottom: 20px; +} + +footer { + background: #262626; + color: #fff; +} + +footer a { + color: #fff; +} + +.footer__logo { + align-items: center; + padding: 40px 0; + border-bottom: 2px solid rgba(117, 117, 117, 0.4); +} + +.footer__logo .logo { + font-size: 26px; + color: #fff; + letter-spacing: 2px; +} + +.footer__info { + border-bottom: 2px solid rgba(117, 117, 117, 0.4); + display: flex; + flex-direction: row; + justify-content: space-around; +} + +.footer__info ul { + margin-top: 32px; + margin-bottom: 60px; + display: flex; + flex-flow: column wrap; +} + +.footer__info ul li { + display: inline-block; + width: 227px; + margin-top: 23px; +} + +.select__lang { + font-size: 13px; + border-radius: 2px; + background: #3b3b3b; + width: 227px; +} + +.select__lang select { + color: #fff; + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + margin-left: 32px; + border: none; + height: 40px; + letter-spacing: 2px; +} + +select:focus { + background-color: #3b3b3b; + outline: none; +} + +.globe { + position: relative; + left: 16px; + top: 4px; +} + +.arr__down { + position: relative; + right: -35px; +} + +.logo__tag span { + color: #49a144; +} + +.soc__tag a { + margin-right: 20px; +} + +.footer__stores { + border-bottom: 2px solid rgba(117, 117, 117, 0.4); + height: 120px; + display: flex; + justify-content: center; + align-items: center; +} + +.footer__stores a:first-child { + margin-right: 20px; +} + +.footer__stores a:last-child { + margin-left: 20px; +} + +.footer__end { + height: 93px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.footer__end a:last-child { + margin-right: 30%; +} + +.button__up { + display: flex; + justify-content: center; + align-items: center; + height: 80px; + width: 80px; + background: #59bd5a; + border-radius: 2px; + position: fixed; + bottom: 24px; + right: 16px; +} diff --git a/src/styles/main.scss b/src/styles/main.scss deleted file mode 100644 index 0f8860e..0000000 --- a/src/styles/main.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import "utils"; -@import "fonts"; -@import "typography"; - -body { - background: $c-gray; -} diff --git a/src/styles/media__query.css b/src/styles/media__query.css new file mode 100644 index 0000000..7e57e05 --- /dev/null +++ b/src/styles/media__query.css @@ -0,0 +1,76 @@ + +@media only screen and (max-width: 1024px) { + .box-content { + max-width: 96%; + } + + .menue { + justify-content: space-between; + } + + .menue__item { + width: 48%; + } + + .footer__info ul:nth-child(2) { + width: 170px; + } + + .footer__info ul:last-child { + width: 120px; + } +} + +@media only screen and (max-width: 640px) { + .box-content { + width: 96%; + } + + .asap { + display: none; + } + + .basket { + display: none; + } + + h1 { + text-align: center; + } + + .menue { + flex-direction: column; + align-items: center; + } + + .menue__item { + width: 90%; + } + + .inits_button { + justify-content: space-around; + } + + .footer__info { + flex-direction: column; + padding-bottom: 40px; + font-size: 13px; + } + + .footer__info ul { + margin-top: 0; + margin-bottom: 0; + } + + .footer__end { + flex-direction: column; + align-items: end; + font-size: 11px; + padding: 40px 0; + height: 167px; + } + + .footer__end a { + padding-bottom: 24px; + } +} diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss deleted file mode 100644 index a1a5dd0..0000000 --- a/src/styles/utils/_extends.scss +++ /dev/null @@ -1,4 +0,0 @@ -%h1 { - font-family: "Roboto", sans-serif; - font-weight: 400; -} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss deleted file mode 100644 index 80c7978..0000000 --- a/src/styles/utils/_mixins.scss +++ /dev/null @@ -1,6 +0,0 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; - &:hover { - #{$_property}: $_toValue; - } -} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss deleted file mode 100644 index aeb006f..0000000 --- a/src/styles/utils/_vars.scss +++ /dev/null @@ -1 +0,0 @@ -$c-gray: #eee;