diff --git a/package.json b/package.json index 88e2b37..588240a 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "gulp-boilerplate", + "name": "UberEats", "version": "1.0.0", "description": "Frontend boilerplate based on gulp", "main": "index.js", diff --git a/src/images/Group.png b/src/images/Group.png new file mode 100644 index 0000000..d769ec7 Binary files /dev/null and b/src/images/Group.png differ diff --git a/src/images/McDonalds.png b/src/images/McDonalds.png new file mode 100644 index 0000000..991c4c1 Binary files /dev/null and b/src/images/McDonalds.png differ diff --git a/src/images/arrow.svg b/src/images/arrow.svg new file mode 100644 index 0000000..767e5bc --- /dev/null +++ b/src/images/arrow.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/basket.svg b/src/images/basket.svg new file mode 100644 index 0000000..150a37e --- /dev/null +++ b/src/images/basket.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/brooklyn_pizza.png b/src/images/brooklyn_pizza.png new file mode 100644 index 0000000..f3cecc6 Binary files /dev/null and b/src/images/brooklyn_pizza.png differ diff --git a/src/images/download_on_the_App_Store.png b/src/images/download_on_the_App_Store.png new file mode 100644 index 0000000..05f5b33 Binary files /dev/null and b/src/images/download_on_the_App_Store.png differ diff --git a/src/images/download_on_the_Google_Play.png b/src/images/download_on_the_Google_Play.png new file mode 100644 index 0000000..a72d942 Binary files /dev/null and b/src/images/download_on_the_Google_Play.png differ diff --git a/src/images/druzi_cafe.png b/src/images/druzi_cafe.png new file mode 100644 index 0000000..a19513e Binary files /dev/null and b/src/images/druzi_cafe.png differ diff --git a/src/images/icon_facebook.svg b/src/images/icon_facebook.svg new file mode 100644 index 0000000..5732d56 --- /dev/null +++ b/src/images/icon_facebook.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icon_instagram.svg b/src/images/icon_instagram.svg new file mode 100644 index 0000000..c076b2d --- /dev/null +++ b/src/images/icon_instagram.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icon_twitter.svg b/src/images/icon_twitter.svg new file mode 100644 index 0000000..75a596a --- /dev/null +++ b/src/images/icon_twitter.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/logo.svg b/src/images/logo.svg index 058f4c3..41e2d62 100644 --- a/src/images/logo.svg +++ b/src/images/logo.svg @@ -1,30 +1,19 @@ - - - - - + + diff --git a/src/images/milk_bar.png b/src/images/milk_bar.png new file mode 100644 index 0000000..30e1341 Binary files /dev/null and b/src/images/milk_bar.png differ diff --git a/src/images/musafir.png b/src/images/musafir.png new file mode 100644 index 0000000..78b48a1 Binary files /dev/null and b/src/images/musafir.png differ diff --git a/src/images/search.svg b/src/images/search.svg new file mode 100644 index 0000000..5c70201 --- /dev/null +++ b/src/images/search.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/to_be.png b/src/images/to_be.png new file mode 100644 index 0000000..1e280e0 Binary files /dev/null and b/src/images/to_be.png differ diff --git a/src/images/wokwei1.png b/src/images/wokwei1.png new file mode 100644 index 0000000..890feed Binary files /dev/null and b/src/images/wokwei1.png differ diff --git a/src/images/wokwei2.png b/src/images/wokwei2.png new file mode 100644 index 0000000..eebe16a Binary files /dev/null and b/src/images/wokwei2.png differ diff --git a/src/images/world_language.svg b/src/images/world_language.svg new file mode 100644 index 0000000..45c01bf --- /dev/null +++ b/src/images/world_language.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/yizha.png b/src/images/yizha.png new file mode 100644 index 0000000..553c37b Binary files /dev/null and b/src/images/yizha.png differ diff --git a/src/index.html b/src/index.html index 300ceb0..8b14f72 100644 --- a/src/index.html +++ b/src/index.html @@ -1,14 +1,264 @@ - - - - - Title - - - - Logo -

Hello Mate Academy

- - + + + + + Uber Eats + + + +
+
+ +
+ + to +
+ + +
+
+
+ + Register + + basket + +
+
+
+
+
+
+ + +
+
+
+
+

When

+

To

+
+
+ +
+ + +
+
+
+
+

Kyiv Restaurants

+
+
+ + card_image +

Макдоналдс

+
+ ₴₴ • Бургеры +
+
+ 25 - 35 Min +
+ +
+
+ + card_image +

WOKWEI

+
+ ₴ • Китайська • Азіатська +
+
+ 40 - 50 Min +
+ +
+
+ + card_image +

YIZHA

+
+ ₴₴ • Американська • Бургери • Вулична їжа +
+
+ 35 - 45 Min +
+ +
+
+ + card_image +

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

+
+ ₴₴ • Близькосхідна +
+
+ 30 - 40 Min +
+ +
+
+ + card_image +

WOKWEI

+
+ ₴ • Китайська • Азіатська +
+
+ 40 - 50 Min +
+ +
+
+ + card_image +

Milk Bar

+
+ ₴₴ • Десерти • Європейська +
+
+ 25 - 35 Min +
+ +
+
+ + card_image +

Mimosa Brooklyn Pizza

+
+ ₴₴ • Італійська • Піца • Американська +
+
+ 15 - 25 Min +
+ +
+
+ + card_image +

To Be

+
+ ₴₴ • Японська • Азіатська • Суші +
+
+ 25 - 35 Min +
+ +
+
+ + card_image +

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/style.css b/src/style.css new file mode 100644 index 0000000..4daaa7c --- /dev/null +++ b/src/style.css @@ -0,0 +1,532 @@ +@import url("https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap&subset=cyrillic,cyrillic-ext"); + +body { + margin: 0; +} + +.header { + display: flex; + justify-content: space-between; + align-items: center; + max-width: 100vw; + height: 70px; + padding: 0 30px; + margin: 0 auto; + box-shadow: 0 0 16px rgba(38, 38, 38, 0.16); +} + +.header__logo { + height: 15px; +} + +.header__logo__img { + height: 100%; +} + +.header__delivery-form { + display: flex; + align-items: center; + height: 40px; +} + +.header__delivery-form__text { + width: 15px; + padding: 0 10px; + font-family: roboto, sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 19px; + color: #626262; +} + +.header__delivery-time { + box-sizing: border-box; + width: 65px; + height: 40px; + border: 1px solid #e0e0e0; + border-radius: 2px; + outline-color: #57ad56; +} + +.header__delivery-time:hover { + border: 1px solid darkgreen; +} + +.header__delivery-address { + display: flex; + box-sizing: border-box; + width: 290px; + height: 40px; + border: 1px solid #e0e0e0; + border-radius: 2px; +} + +.header__delivery-address:hover { + border: 1px solid darkgreen; +} + +.header__delivery-address__img { + height: 15px; + padding: 12px; +} + +.header__delivery-address__label { + width: 100%; + padding: 5px 0; + outline: none; +} + +.header__delivery-address__input { + width: 100%; + border: none; + font-family: roboto, sans-serif; + font-size: 16px; + line-height: 24px; + color: #1d1d1d; + outline: none; +} + +.header__buttons-box { + display: flex; + justify-content: space-between; + align-items: center; + width: 230px; +} + +.header__button { + display: flex; + justify-content: center; + align-items: center; + box-sizing: border-box; + width: 80px; + height: 40px; + border-radius: 2px; + font-family: roboto, sans-serif; + font-weight: 500; + font-size: 13px; + line-height: 24px; + text-decoration: none; +} + +.header__button--sign-in { + border: 1px solid #e0e0e0; + color: #1d1d1d; +} + +.header__button--sign-in:hover { + background-color: #57ad56; + color: white; +} + +.header__button--register { + background-color: #262626; + color: #fff; +} + +.header__button--register:hover { + background-color: white; + color: #57ad56; + border: 1px solid darkblue; +} + +.header__basket { + display: flex; + justify-content: center; + align-items: center; +} + +.search-form { + max-width: 960px; + height: 50px; + margin: 30px auto 0; + padding: 0 30px; +} + +.search-container { + display: flex; + align-items: center; + box-sizing: border-box; + width: 100%; + height: 100%; + border: 1px solid white; + border-bottom: 1px solid rgba(117, 117, 117, 0.3); + border-radius: 2px; +} + +.search-container:hover { + border: 1px solid #57ad56; +} + +.search-container__img { + width: 25px; + padding: 5px; +} + +.search-container__label { + width: 100%; + outline: none; +} + +.search-container__input { + width: 100%; + border: none; + font-family: roboto, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 24px; + outline: none; +} + +.main-delivery { + display: none; + margin: 25px 0 30px; + padding: 0 10px; +} + +.main-delivery__text-container { + display: flex; +} + +.main-delivery__text { + margin: 0 55px 10px 0; + font-family: roboto, sans-serif; + font-size: 11px; + line-height: 13px; + color: #626262; +} + +.main-delivery__form { + display: flex; + align-items: center; + height: 40px; +} + +.main-delivery__time { + box-sizing: border-box; + width: 65px; + height: 40px; + margin-right: 15px; + border: 1px solid #e0e0e0; + border-radius: 2px; + outline-color: #57ad56; +} + +.main-delivery__address { + display: flex; + box-sizing: border-box; + width: 100%; + height: 40px; + border: 1px solid #e0e0e0; + border-radius: 2px; +} + +.main-delivery__address__img { + height: 15px; + padding: 12px; +} + +.main-delivery__address__label { + width: 100%; + padding: 5px 0; + outline: none; +} + +.main-delivery__address__input { + width: 100%; + border: none; + font-family: roboto, sans-serif; + font-size: 13px; + line-height: 24px; + color: #1d1d1d; + outline: none; +} + +.content { + width: 960px; + margin: 0 auto 80px; + padding: 0 30px; +} + +.content__heading { + margin: 55px 0 15px; + font-family: roboto, sans-serif; + font-weight: 400; + font-size: 22px; + line-height: 34px; + color: #1d1d1d; +} + +.content-container { + display: grid; + grid-template: repeat(3, 365px) / repeat(auto-fill, 310px); + grid-gap: 15px; +} + +.content-card:hover { + transform: scale(1.02); +} + +.content-card__link { + display: block; + text-decoration: none; +} + +.content-card__img { + width: 100%; +} + +.content-card__heading { + margin: 15px 0 5px; + font-family: roboto, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 24px; + color: #1d1d1d; +} + +.content-card__details { + margin-bottom: 5px; + font-family: roboto, sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 21px; + color: #626262; +} + +.content-card__delivery-time { + font-family: roboto, sans-serif; + font-weight: 400; + font-size: 13px; + line-height: 21px; + color: #1d1d1d; +} + +.footer { + width: 100vw; + background: #262626; + position: relative; +} + +.footer__btn-up { + display: flex; + justify-content: center; + align-items: center; + bottom: 25px; + right: 15px; + width: 80px; + height: 80px; + background-color: #59bd5a; + border-radius: 2px; + position: absolute; +} + +.footer-wrap { + display: grid; + grid-template: 115px 220px 120px 95px / 960px; + width: 960px; + height: 550px; + margin: 0 auto; + padding: 0 30px; +} + +.footer-wrap__box { + border-bottom: 1px solid rgba(155, 148, 148, 0.3); +} + +.footer-wrap__box--logo { + grid-column: 1; + grid-row: 1; +} + +.footer-wrap__box__nav { + grid-column: 1; + grid-row: 2; + display: grid; + grid-template: 220px / repeat(3, 1fr); +} + +.footer-wrap__box__nav--left { + grid-column: 1; + grid-row: 1; +} + +.footer-wrap__box__nav--center { + grid-column: 2; + grid-row: 1; +} + +.footer-wrap__box__nav--right { + grid-column: 3; + grid-row: 1; +} + +.footer-wrap__box--downloads { + display: flex; + align-items: center; + justify-content: center; + grid-column: 1; + grid-row: 3; +} + +.footer-wrap__box__aside { + grid-column: 1; + grid-row: 4; + display: grid; + grid-template: 95px / repeat(3, 1fr); +} + +.footer-wrap__box__aside--copyright { + grid-column: 1; + grid-row: 1; + align-self: center; +} + +.footer-wrap__box__aside--privacy { + grid-column: 2; + grid-row: 1; + align-self: center; +} + +.footer-wrap__box__aside--terms { + grid-column: 3; + grid-row: 1; + align-self: center; +} + +.footer-wrap__logo { + width: 190px; + height: 20px; + margin: 55px 0 40px; +} + +.footer-wrap__site-language { + display: flex; + width: 230px; + height: 40px; + margin: 30px 0 35px; + border-radius: 2px; + border: 1px solid #3b3b3b; + background-color: #3b3b3b; +} + +.footer-wrap__site-language:hover { + border: 1px solid #57ad56; +} + +.footer-wrap__site-language__img { + height: 16px; + padding: 12px 17px; +} + +.footer-wrap__site-language__label { + width: 100%; + height: 20px; + padding: 10px 0; + outline: none; +} + +.footer-wrap__site-language__list { + width: 100%; + border: none; + font-family: roboto, sans-serif; + font-size: 13px; + line-height: 15px; + background-color: #3b3b3b; + color: white; + outline: none; +} + +.footer-wrap__site-language__item { + color: white; +} + +.footer-wrap__uber-hashtag { + margin-bottom: 10px; + font-family: roboto, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 19px; + color: white; +} + +.footer-wrap__uber-hashtag:hover { + color: #49a144; +} + +.footer-wrap__uber-hashtag::before { + content: "#"; + font-family: roboto, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 19px; + color: #49a144; +} + +.footer-wrap__socials { + display: flex; + justify-content: space-between; + width: 90px; + height: 25px; +} + +.footer-wrap__link { + text-decoration: none; +} + +.footer-wrap__link:hover { + color: #57ad56; +} + +.footer-wrap__link--default { + display: block; + width: fit-content; + margin-bottom: 25px; + font-family: roboto, sans-serif; + font-weight: 400; + font-size: 13px; + line-height: 16px; + color: white; +} + +.footer-wrap__link--default:first-child { + margin-top: 40px; +} + +.footer-wrap__link--app-store { + display: block; + width: 120px; + height: 40px; + margin-right: 40px; +} + +.footer-wrap__link--google-play { + display: block; + width: 135px; + height: 40px; +} + +.footer-wrap__link--app-store:hover, +.footer-wrap__link--google-play:hover { + transform: scale(1.03); +} + +.footer-wrap__link--privacy, +.footer-wrap__link--terms { + font-family: roboto, sans-serif; + font-weight: 400; + font-size: 11px; + line-height: 13px; + color: white; +} + +.footer-wrap__copyright-text { + font-family: roboto, sans-serif; + font-weight: 400; + font-size: 11px; + line-height: 13px; + color: white; +} + +.footer-wrap__copyright-text:hover { + color: #57ad56; +}