From 5423681c088d273d75b6e5a77039668ce7be0822 Mon Sep 17 00:00:00 2001 From: Loi Phan Date: Mon, 31 Jul 2023 17:33:28 +0700 Subject: [PATCH] Fix UI and refactor code --- README.md | 1 - practice/practice-02/.prettierrc | 8 + practice/practice-02/README.md | 68 +++++++ practice/practice-02/package.json | 2 +- .../images/{offer => common}/item-card.png | Bin .../assets/images/{offer => common}/star.png | Bin .../assets/images/{offer => food}/food-1.png | Bin .../{menu/food-7.png => food/food-10.png} | Bin .../{menu/food-8.png => food/food-11.png} | Bin .../assets/images/{offer => food}/food-2.png | Bin .../assets/images/{offer => food}/food-3.png | Bin .../assets/images/{offer => food}/food-4.png | Bin .../{menu/food-2.png => food/food-5.png} | Bin .../{menu/food-3.png => food/food-6.png} | Bin .../{menu/food-4.png => food/food-7.png} | Bin .../{menu/food-5.png => food/food-8.png} | Bin .../{menu/food-6.png => food/food-9.png} | Bin .../src/assets/images/logo-desktop.png | Bin 0 -> 4258 bytes .../src/assets/images/logo-mobile.png | Bin 0 -> 3287 bytes .../practice-02/src/assets/images/logo.svg | 23 --- .../src/assets/images/nav-button.svg | 7 - practice/practice-02/src/includes/mixins.pug | 30 +-- practice/practice-02/src/layouts/footer.pug | 4 +- practice/practice-02/src/layouts/header.pug | 27 +-- practice/practice-02/src/sections/menu.pug | 6 +- practice/practice-02/src/sections/offer.pug | 10 +- practice/practice-02/src/sections/welcome.pug | 130 ++++++------- .../src/styles/abstracts/_mixins.scss | 62 +++---- .../src/styles/abstracts/_variables.scss | 1 - .../practice-02/src/styles/bases/_base.scss | 18 +- .../practice-02/src/styles/bases/_reset.scss | 1 - .../src/styles/bases/_typography.scss | 26 +++ .../src/styles/components/_button.scss | 1 - .../src/styles/components/_card-item.scss | 171 +++++++++--------- .../src/styles/components/_logo.scss | 21 --- .../src/styles/components/_toggle-menu.scss | 55 ------ .../src/styles/layouts/_footer.scss | 22 ++- .../src/styles/layouts/_header.scss | 14 +- .../practice-02/src/styles/layouts/_menu.scss | 3 +- .../src/styles/layouts/_navbar.scss | 164 +++++++++++------ .../src/styles/layouts/_offer.scss | 5 +- .../src/styles/layouts/_platform.scss | 7 +- .../src/styles/layouts/_service.scss | 8 +- .../src/styles/layouts/_welcome.scss | 21 ++- practice/practice-02/src/styles/main.scss | 2 - 45 files changed, 479 insertions(+), 439 deletions(-) delete mode 100644 README.md create mode 100644 practice/practice-02/.prettierrc create mode 100644 practice/practice-02/README.md rename practice/practice-02/src/assets/images/{offer => common}/item-card.png (100%) rename practice/practice-02/src/assets/images/{offer => common}/star.png (100%) rename practice/practice-02/src/assets/images/{offer => food}/food-1.png (100%) rename practice/practice-02/src/assets/images/{menu/food-7.png => food/food-10.png} (100%) rename practice/practice-02/src/assets/images/{menu/food-8.png => food/food-11.png} (100%) rename practice/practice-02/src/assets/images/{offer => food}/food-2.png (100%) rename practice/practice-02/src/assets/images/{offer => food}/food-3.png (100%) rename practice/practice-02/src/assets/images/{offer => food}/food-4.png (100%) rename practice/practice-02/src/assets/images/{menu/food-2.png => food/food-5.png} (100%) rename practice/practice-02/src/assets/images/{menu/food-3.png => food/food-6.png} (100%) rename practice/practice-02/src/assets/images/{menu/food-4.png => food/food-7.png} (100%) rename practice/practice-02/src/assets/images/{menu/food-5.png => food/food-8.png} (100%) rename practice/practice-02/src/assets/images/{menu/food-6.png => food/food-9.png} (100%) create mode 100644 practice/practice-02/src/assets/images/logo-desktop.png create mode 100644 practice/practice-02/src/assets/images/logo-mobile.png delete mode 100644 practice/practice-02/src/assets/images/logo.svg delete mode 100644 practice/practice-02/src/assets/images/nav-button.svg delete mode 100644 practice/practice-02/src/styles/components/_logo.scss delete mode 100644 practice/practice-02/src/styles/components/_toggle-menu.scss diff --git a/README.md b/README.md deleted file mode 100644 index 6defcd2..0000000 --- a/README.md +++ /dev/null @@ -1 +0,0 @@ -Loi Phan Internship \ No newline at end of file diff --git a/practice/practice-02/.prettierrc b/practice/practice-02/.prettierrc new file mode 100644 index 0000000..22ca4b4 --- /dev/null +++ b/practice/practice-02/.prettierrc @@ -0,0 +1,8 @@ +{ + "bracketSameLine": false, + "bracketSpacing": true, + "semi": true, + "singleQuote": true, + "tabWidth": 2, + "useTabs": false +} diff --git a/practice/practice-02/README.md b/practice/practice-02/README.md new file mode 100644 index 0000000..c4b782a --- /dev/null +++ b/practice/practice-02/README.md @@ -0,0 +1,68 @@ +# PROJECT + +- This is a basic web application with responsive written by HTML5, CSS3, Pug and SCSS. + +## Overview + +- Introduce: + - Build a website using HTML5, CSS3, Pug and SCSS. +- Design: [link]() +- Plan: [practice-two](https://docs.google.com/document/d/1h43ur7SoS9SYnvJJ75ajS7sq4lzrROyQvuVCrFlXoXk/edit?usp=sharing) +- Deploy: _Update later_ + +## Requirements + +- Apply knowledge to responsive website. +- Getting the code to work cross-browsers latest version (Chrome, Firefox, MS Edge, Opera, Safari) +- Use media queries for popular screen sizes. ( 428px, 768px, 1440px) +- Apply [Grid Layout](https://www.w3schools.com/css/css_grid.asp), Pugjs and SCSS on project. + +## Target + +- Build a responsive website. +- Know how to use Pugjs and SCSS on project. +- Understand the concept of [Grid Layout](https://www.w3schools.com/css/css_grid.asp). + +## Technical + +- [HTML5](https://www.tutorialspoint.com/html5/html5_overview.htm): CSS (Cascading Style Sheets) consist of a group of formatting rules that you use to control the layout and appearance of the content on a web page. +- [CSS3](https://www.htmlgoodies.com/html5/an-overview-of-css3/): Cascading Style Sheets (CSS) is a language used to illustrate a document’s look, style, and format in any markup language. In simple words, it is used to style and organize the layout of Web pages. CSS3 is the latest version of an earlier CSS version, CSS2. +- [Pugjs](https://pugjs.org/api/getting-started.html): Pug.js is a template engine for Node.js and browsers to render dynamic reusable content. At compile time, the template engine compiles our Pug template code to HTML. +- [SCSS](https://sass-lang.com/): Scss is a stylesheet language that’s compiled to CSS. It allows you to use variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized and makes it easy to share design within and across projects. + +## Information + +- Timeline: + - Estimate: 6 days + - Actual: 12 days. + - Calendar: + - Start: 2023/07/13 + - End: ... + +## Development Environment + +- Node: v18.17.0 +- Npm: v9.6.7 + +## Getting started + +- Step 1: Clone repository. + - With HTTPS: + - `$ git clone https://github.com/phuocduong-agilityio/loi-phan-internship.git`. +- Step 2: Move to folder which just cloned in your computer. + - `cd ./internship-loi-phan`. +- Step 3: Move it to branch html-css-practice-two. + - `$ git checkout html-css-practice-two`. +- Step 4: Move to folder practice-02. + - `$ cd ./practice/practice-02`. +- Step 5: + - Open terminal > `npm i`. +- Step 6: + - Run `npm start`. +- Step 7: + - Open http://localhost:1234/ in browser. + +## Author + +- Loi Phan. +- Email: [phanhuuloi15@gmail.com](phanhuuloi15@gmail.com). diff --git a/practice/practice-02/package.json b/practice/practice-02/package.json index 0eb6ef4..6669216 100644 --- a/practice/practice-02/package.json +++ b/practice/practice-02/package.json @@ -3,7 +3,7 @@ "version": "1.0.0", "description": "Practice 02", "scripts": { - "start": "del -rf dist && del -rf .parcel-cache && parcel ./src/*.pug --no-cache --no-source-maps", + "start": "rm -rf build && rm -rf .parcel-cache && parcel ./src/*.pug --no-cache --no-source-maps", "build": "rm -rf build && rm -rf .parcel-cache && parcel build ./src/*.pug --no-cache --no-source-maps --dist-dir dist", "test": "echo \"Error: no test specified\" && exit 1" }, diff --git a/practice/practice-02/src/assets/images/offer/item-card.png b/practice/practice-02/src/assets/images/common/item-card.png similarity index 100% rename from practice/practice-02/src/assets/images/offer/item-card.png rename to practice/practice-02/src/assets/images/common/item-card.png diff --git a/practice/practice-02/src/assets/images/offer/star.png b/practice/practice-02/src/assets/images/common/star.png similarity index 100% rename from practice/practice-02/src/assets/images/offer/star.png rename to practice/practice-02/src/assets/images/common/star.png diff --git a/practice/practice-02/src/assets/images/offer/food-1.png b/practice/practice-02/src/assets/images/food/food-1.png similarity index 100% rename from practice/practice-02/src/assets/images/offer/food-1.png rename to practice/practice-02/src/assets/images/food/food-1.png diff --git a/practice/practice-02/src/assets/images/menu/food-7.png b/practice/practice-02/src/assets/images/food/food-10.png similarity index 100% rename from practice/practice-02/src/assets/images/menu/food-7.png rename to practice/practice-02/src/assets/images/food/food-10.png diff --git a/practice/practice-02/src/assets/images/menu/food-8.png b/practice/practice-02/src/assets/images/food/food-11.png similarity index 100% rename from practice/practice-02/src/assets/images/menu/food-8.png rename to practice/practice-02/src/assets/images/food/food-11.png diff --git a/practice/practice-02/src/assets/images/offer/food-2.png b/practice/practice-02/src/assets/images/food/food-2.png similarity index 100% rename from practice/practice-02/src/assets/images/offer/food-2.png rename to practice/practice-02/src/assets/images/food/food-2.png diff --git a/practice/practice-02/src/assets/images/offer/food-3.png b/practice/practice-02/src/assets/images/food/food-3.png similarity index 100% rename from practice/practice-02/src/assets/images/offer/food-3.png rename to practice/practice-02/src/assets/images/food/food-3.png diff --git a/practice/practice-02/src/assets/images/offer/food-4.png b/practice/practice-02/src/assets/images/food/food-4.png similarity index 100% rename from practice/practice-02/src/assets/images/offer/food-4.png rename to practice/practice-02/src/assets/images/food/food-4.png diff --git a/practice/practice-02/src/assets/images/menu/food-2.png b/practice/practice-02/src/assets/images/food/food-5.png similarity index 100% rename from practice/practice-02/src/assets/images/menu/food-2.png rename to practice/practice-02/src/assets/images/food/food-5.png diff --git a/practice/practice-02/src/assets/images/menu/food-3.png b/practice/practice-02/src/assets/images/food/food-6.png similarity index 100% rename from practice/practice-02/src/assets/images/menu/food-3.png rename to practice/practice-02/src/assets/images/food/food-6.png diff --git a/practice/practice-02/src/assets/images/menu/food-4.png b/practice/practice-02/src/assets/images/food/food-7.png similarity index 100% rename from practice/practice-02/src/assets/images/menu/food-4.png rename to practice/practice-02/src/assets/images/food/food-7.png diff --git a/practice/practice-02/src/assets/images/menu/food-5.png b/practice/practice-02/src/assets/images/food/food-8.png similarity index 100% rename from practice/practice-02/src/assets/images/menu/food-5.png rename to practice/practice-02/src/assets/images/food/food-8.png diff --git a/practice/practice-02/src/assets/images/menu/food-6.png b/practice/practice-02/src/assets/images/food/food-9.png similarity index 100% rename from practice/practice-02/src/assets/images/menu/food-6.png rename to practice/practice-02/src/assets/images/food/food-9.png diff --git a/practice/practice-02/src/assets/images/logo-desktop.png b/practice/practice-02/src/assets/images/logo-desktop.png new file mode 100644 index 0000000000000000000000000000000000000000..196efdf2ddce9f6bdadd597ccac5fd9e4485e744 GIT binary patch literal 4258 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 Ef=KH+KmY&$ literal 0 HcmV?d00001 diff --git a/practice/practice-02/src/assets/images/logo-mobile.png b/practice/practice-02/src/assets/images/logo-mobile.png new file mode 100644 index 0000000000000000000000000000000000000000..6018302bd2f41231aa37bba5e79818bc25b86b8e GIT binary patch literal 3287 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 VBgNCDbNB!N002ovPDHLkV1na`N?ZT{ literal 0 HcmV?d00001 diff --git a/practice/practice-02/src/assets/images/logo.svg b/practice/practice-02/src/assets/images/logo.svg deleted file mode 100644 index bc274f3..0000000 --- a/practice/practice-02/src/assets/images/logo.svg +++ /dev/null @@ -1,23 +0,0 @@ - - - diff --git a/practice/practice-02/src/assets/images/nav-button.svg b/practice/practice-02/src/assets/images/nav-button.svg deleted file mode 100644 index 6aa0de7..0000000 --- a/practice/practice-02/src/assets/images/nav-button.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/practice/practice-02/src/includes/mixins.pug b/practice/practice-02/src/includes/mixins.pug index 1cfd9c6..78e8d6d 100644 --- a/practice/practice-02/src/includes/mixins.pug +++ b/practice/practice-02/src/includes/mixins.pug @@ -1,19 +1,19 @@ -- var avatar_img_path = "./assets/images/avatar/"; +- var common_img_path = "./assets/images/common/"; mixin foodItemCard(food) - .card-item - img.card-img(src=offer_img_path + "item-card.png", alt="Item card image") - img.food-image(src=food.imageUrl, alt=food.name + " image") - span.price= food.price + "$" - .content-card - .rate - .avatar-container + .card + img.card__img(src=common_img_path + "item-card.png", alt="Item card image") + img.card__food-image(src=food.imageUrl, alt=food.name + " image") + span.card__price= food.price + "$" + .card__content + .card__rate + .card__avatar-container if food.avatarImageList && food.avatarImageList.length > 0 each avatar, index in food.avatarImageList - img.avatar(src=avatar.avatarUrl, alt="Avatar user rate") - .star-container - img(src=offer_img_path + "star.png", alt="Star image") - span.rate-point= "(" + food.ratePoint + ")" - p.food-name= food.foodName - p.food-description= food.foodDescription - a.order-btn.btn(href="javascript:void(0)") Order now + img.card__avatar(src=avatar.avatarUrl, alt="Avatar user rate") + .card__star-container + img(src=common_img_path + "star.png", alt="Star image") + span.card__rate-point= "(" + food.ratePoint + ")" + p.card__food-name= food.foodName + p.card__food-description= food.foodDescription + a.card__order-btn.btn(href="javascript:void(0)") Order now diff --git a/practice/practice-02/src/layouts/footer.pug b/practice/practice-02/src/layouts/footer.pug index bea0d01..fbef4f5 100644 --- a/practice/practice-02/src/layouts/footer.pug +++ b/practice/practice-02/src/layouts/footer.pug @@ -28,12 +28,12 @@ footer.footer h3.footer__heading.primary-text About Us .footer__link each item in about_us_links - p.link-text= item + a.link-text(href="javascript:void(0)")= item .footer_company h3.footer__heading.primary-text Company .footer__link each item in company_links - p.link-text= item + a.link-text(href="javascript:void(0)")= item .footer__contact h3.footer__heading.primary-text Get in touch p.footer__description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor diff --git a/practice/practice-02/src/layouts/header.pug b/practice/practice-02/src/layouts/header.pug index 1c68e70..b177da9 100644 --- a/practice/practice-02/src/layouts/header.pug +++ b/practice/practice-02/src/layouts/header.pug @@ -1,16 +1,21 @@ - var list = ["Today Special Offers", "Why FoodHut", "Our Menu", "Our Popular Food"]; header.header - .header-container - .logo-wrapper - a.logo-link(href="javascript:void(0)") - img.logo(src="./assets/images/logo.svg", alt="Food Hut logo") - .header-content + .header__container + .header__logo-wrapper + a.header__logo-link(href="javascript:void(0)") + picture + source( + media="(min-width: 840px)", + srcset="./assets/images/logo-desktop.png" + ) + img.logo(src="./assets/images/logo-mobile.png", alt="Food Hut logo") + .header__content nav.nav - input.toggle-menu(type="checkbox") - .icon-menu - ul.nav-list + input.nav__toggle-menu(type="checkbox") + .nav__icon-menu + ul.nav__list each val in list - li.nav-item - a.nav-link.link-text(href="javascript:void(0)")= val - a.btn.nav-download-btn(href="javascript:void(0)") Download App + li.nav__item-wrapper + a.nav__link.link-text(href="javascript:void(0)")= val + a.btn.nav__download-btn(href="javascript:void(0)") Download App diff --git a/practice/practice-02/src/sections/menu.pug b/practice/practice-02/src/sections/menu.pug index 1dc6463..0ef3ccc 100644 --- a/practice/practice-02/src/sections/menu.pug +++ b/practice/practice-02/src/sections/menu.pug @@ -1,6 +1,8 @@ -- var image_menu_path = "./assets/images/menu/"; +- var avatar_img_path = "./assets/images/avatar/"; +- var food_img_path = "./assets/images/food/"; + - var list_category = ["Ramen", "Breakfast", "Lunch", "Dinner", "Maxican", "Italian", "Desserts", "Drinks"]; -- var list_image_food = ["./assets/images/offer/food-1.png", image_menu_path + "food-2.png", image_menu_path + "food-3.png", image_menu_path + "food-4.png", image_menu_path + "food-5.png", image_menu_path + "food-6.png", image_menu_path + "food-7.png", image_menu_path + "food-8.png"]; +- var list_image_food = [food_img_path + "food-1.png", food_img_path + "food-2.png", food_img_path + "food-3.png", food_img_path + "food-4.png", food_img_path + "food-5.png", food_img_path + "food-6.png", food_img_path + "food-7.png", food_img_path + "food-8.png"]; - var default_food_data = { price: "10", ratePoint: "4.5", foodName: "Kebab", foodDescription: "Lorem Ipsum is simply dummy text of the printing and typesetting industry", avatarImageList: [{ avatarUrl: avatar_img_path + "avatar-1.png" }, { avatarUrl: avatar_img_path + "avatar-2.png" }, { avatarUrl: avatar_img_path + "avatar-3.png" }] }; section.menu diff --git a/practice/practice-02/src/sections/offer.pug b/practice/practice-02/src/sections/offer.pug index 2e6d4f9..ade9599 100644 --- a/practice/practice-02/src/sections/offer.pug +++ b/practice/practice-02/src/sections/offer.pug @@ -1,9 +1,11 @@ - var offer_img_path = "./assets/images/offer/"; +- var avatar_img_path = "./assets/images/avatar/"; +- var food_img_path = "./assets/images/food/"; -- var food_1 = { imageUrl: offer_img_path + "food-1.png", price: "10", ratePoint: "4.5", foodName: "Kebab", foodDescription: "Lorem Ipsum is simply dummy text of the printing and typesetting industry", avatarImageList: [{ avatarUrl: avatar_img_path + "avatar-1.png" }, { avatarUrl: avatar_img_path + "avatar-2.png" }, { avatarUrl: avatar_img_path + "avatar-3.png" }] }; -- var food_2 = { imageUrl: offer_img_path + "food-2.png", price: "15", ratePoint: "4.8", foodName: "Chicken Tikka", foodDescription: "Lorem Ipsum is simply dummy text of the printing and typesetting industry", avatarImageList: [{ avatarUrl: avatar_img_path + "avatar-4.png" }, { avatarUrl: avatar_img_path + "avatar-5.png" }, { avatarUrl: avatar_img_path + "avatar-6.png" }] }; -- var food_3 = { imageUrl: offer_img_path + "food-3.png", price: "8", ratePoint: "4.2", foodName: "Desi Chowmein", foodDescription: "Lorem Ipsum is simply dummy text of the printing and typesetting industry", avatarImageList: [{ avatarUrl: avatar_img_path + "avatar-7.png" }, { avatarUrl: avatar_img_path + "avatar-8.png" }, { avatarUrl: avatar_img_path + "avatar-9.png" }] }; -- var food_4 = { imageUrl: offer_img_path + "food-4.png", price: "28", ratePoint: "5.0", foodName: "Chicken Chargha", foodDescription: "Lorem Ipsum is simply dummy text of the printing and typesetting industry", avatarImageList: [{ avatarUrl: avatar_img_path + "avatar-1.png" }, { avatarUrl: avatar_img_path + "avatar-2.png" }, { avatarUrl: avatar_img_path + "avatar-3.png" }] }; +- var food_1 = { imageUrl: food_img_path + "food-1.png", price: "10", ratePoint: "4.5", foodName: "Kebab", foodDescription: "Lorem Ipsum is simply dummy text of the printing and typesetting industry", avatarImageList: [{ avatarUrl: avatar_img_path + "avatar-1.png" }, { avatarUrl: avatar_img_path + "avatar-2.png" }, { avatarUrl: avatar_img_path + "avatar-3.png" }] }; +- var food_2 = { imageUrl: food_img_path + "food-2.png", price: "15", ratePoint: "4.8", foodName: "Chicken Tikka", foodDescription: "Lorem Ipsum is simply dummy text of the printing and typesetting industry", avatarImageList: [{ avatarUrl: avatar_img_path + "avatar-4.png" }, { avatarUrl: avatar_img_path + "avatar-5.png" }, { avatarUrl: avatar_img_path + "avatar-6.png" }] }; +- var food_3 = { imageUrl: food_img_path + "food-3.png", price: "8", ratePoint: "4.2", foodName: "Desi Chowmein", foodDescription: "Lorem Ipsum is simply dummy text of the printing and typesetting industry", avatarImageList: [{ avatarUrl: avatar_img_path + "avatar-7.png" }, { avatarUrl: avatar_img_path + "avatar-8.png" }, { avatarUrl: avatar_img_path + "avatar-9.png" }] }; +- var food_4 = { imageUrl: food_img_path + "food-4.png", price: "28", ratePoint: "5.0", foodName: "Chicken Chargha", foodDescription: "Lorem Ipsum is simply dummy text of the printing and typesetting industry", avatarImageList: [{ avatarUrl: avatar_img_path + "avatar-1.png" }, { avatarUrl: avatar_img_path + "avatar-2.png" }, { avatarUrl: avatar_img_path + "avatar-3.png" }] }; - var list_food = [food_1, food_2, food_3, food_4]; section.offer diff --git a/practice/practice-02/src/sections/welcome.pug b/practice/practice-02/src/sections/welcome.pug index 784ac6b..477a457 100644 --- a/practice/practice-02/src/sections/welcome.pug +++ b/practice/practice-02/src/sections/welcome.pug @@ -1,4 +1,4 @@ -- var welcome_img_path = "./assets/images/welcome/"; +- var welcome_img_path = './assets/images/welcome/'; - var list_food_image_mobile = [{img_mobile_path: welcome_img_path + "food-1-mobile.png", img_desktop_path: welcome_img_path + "food-1-desktop.png"}, {img_mobile_path: welcome_img_path + "food-2-mobile.png", img_desktop_path: welcome_img_path + "food-2-desktop.png"}, {img_mobile_path: welcome_img_path + "food-3-mobile.png", img_desktop_path: welcome_img_path + "food-3-desktop.png"}, {img_mobile_path: welcome_img_path + "food-4-mobile.png", img_desktop_path: welcome_img_path + "food-4-desktop.png"}]; section.welcome @@ -8,132 +8,132 @@ section.welcome .welcome__main-image picture source( - media="(min-width: 1200px)", - srcset=welcome_img_path + "welcome-image-desktop.png" + media='(min-width: 1200px)', + srcset=welcome_img_path + 'welcome-image-desktop.png' ) img.welcome__banner-img( - src=welcome_img_path + "welcome-image-mobile.png", - alt="Welcome banner image" + src=welcome_img_path + 'welcome-image-mobile.png', + alt='Welcome banner image' ) each item in list_food_image_mobile picture.welcome__food-img - source(media="(min-width: 1200px)", srcset=item.img_desktop_path) - img(src=item.img_mobile_path, alt="Food image") + source(media='(min-width: 1200px)', srcset=item.img_desktop_path) + img(src=item.img_mobile_path, alt='Food image') picture source( - media="(min-width: 1200px)", - srcset=welcome_img_path + "review-card-desktop.png" + media='(min-width: 1200px)', + srcset=welcome_img_path + 'review-card-desktop.png' ) img.welcome__review-card( - src=welcome_img_path + "review-card-mobile.png", - alt="Review card" + src=welcome_img_path + 'review-card-mobile.png', + alt='Review card' ) picture source( - media="(min-width: 1200px)", - srcset=welcome_img_path + "rate-card-desktop.png" + media='(min-width: 1200px)', + srcset=welcome_img_path + 'rate-card-desktop.png' ) img.welcome__rate-card( - src=welcome_img_path + "rate-card-mobile.png", - alt="Review card" + src=welcome_img_path + 'rate-card-mobile.png', + alt='Review card' + ) + picture + source( + media='(min-width: 1200px)', + srcset=welcome_img_path + 'arrow-desktop.png', + alt='Arrow image' + ) + img.welcome__arrow-img-up( + src=welcome_img_path + 'arrow-mobile.png', + alt='Arrow image' ) .welcome__background-banner picture source( - media="(min-width: 1200px)", - srcset=welcome_img_path + "lines-background-desktop.png" + media='(min-width: 1200px)', + srcset=welcome_img_path + 'lines-background-desktop.png' ) img.welcome__lines-background( - src=welcome_img_path + "lines-background-mobile.png", - alt="Lines background" + src=welcome_img_path + 'lines-background-mobile.png', + alt='Lines background' ) picture source( - media="(min-width: 1200px)", - srcset=welcome_img_path + "arrow-desktop.png", - alt="Arrow image" - ) - img.welcome__arrow-img-up( - src=welcome_img_path + "arrow-mobile.png", - alt="Arrow image" - ) - picture - source( - media="(min-width: 1200px)", - srcset=welcome_img_path + "mint-desktop.png" + media='(min-width: 1200px)', + srcset=welcome_img_path + 'mint-desktop.png' ) img.welcome__mint-img( - src=welcome_img_path + "mint-mobile.png", - alt="Mint image" + src=welcome_img_path + 'mint-mobile.png', + alt='Mint image' ) .welcome__content .welcome__arrow-down-img-wrapper img.welcome__arrow-img-down( - src=welcome_img_path + "arrow-desktop-2.png", - alt="Arrow image down" + src=welcome_img_path + 'arrow-desktop-2.png', + alt='Arrow image down' ) .welcome__orange-img-wrapper picture source( - media="(min-width: 840px)", - srcset=welcome_img_path + "orange-desktop.png" + media='(min-width: 840px)', + srcset=welcome_img_path + 'orange-desktop.png' ) img( - src=welcome_img_path + "orange.png", - alt="Orange background image" + src=welcome_img_path + 'orange.png', + alt='Orange background image' ) .welcome__text-box .welcome__icon-container img.welcome__love-icon( - src=welcome_img_path + "love-icon.png", - alt="Love icon" + src=welcome_img_path + 'love-icon.png', + alt='Love icon' ) .welcome__head-arrow-container - img(src=welcome_img_path + "head-arrow.png", alt="Head arrow image") + img(src=welcome_img_path + 'head-arrow.png', alt='Head arrow image') p.welcome__text-box-content People Trust us h1.welcome__heading We're - = " " + = ' ' span.primary-text serious - = " for " + = ' for ' span.primary-text food - = " & " + = ' & ' .delivery-text-box span.secondary-text delivery .welcome__underline-img-container - img(src=welcome_img_path + "underline.png", alt="Underline image") - = "." + img(src=welcome_img_path + 'underline.png', alt='Underline image') + = '.' p.welcome__description Best cooks and best delivery guys all at your service. Hot tasty food will reach you in 60 minutes. - form.welcome__search-form(action="#") + form.welcome__search-form(action='#') .welcome__search-icon-wrapper img.welcome__search-icon( - src=welcome_img_path + "search-icon.png", - alt="Search icon" + src=welcome_img_path + 'search-icon.png', + alt='Search icon' ) - input.welcome__text-input(type="text", placeholder="Search food") - button.welcome__submit-btn(type="submit") + input.welcome__text-input(type='text', placeholder='Search food') + button.welcome__submit-btn(type='submit') img.welcome__search-icon-btn( - src=welcome_img_path + "search-icon-btn.svg", - alt="Search button image" + src=welcome_img_path + 'search-icon-btn.svg', + alt='Search button image' ) .welcome__action-container - a.welcome__download-btn.btn(href="javascript:void(0)") Download App - a.welcome__watch-video-link.link-text(href="javascript:void(0)") + a.welcome__download-btn.btn(href='javascript:void(0)') Download App + a.welcome__watch-video-link.link-text(href='javascript:void(0)') .welcome__play-icon-wrapper svg.welcome__play-icon( - width="12", - height="12", - viewBox="0 0 12 13", - fill="none", - xmlns="http://www.w3.org/2000/svg" + width='12', + height='12', + viewBox='0 0 12 13', + fill='none', + xmlns='http://www.w3.org/2000/svg' ) path( - d="M12 6.5L0.749999 12.9952L0.75 0.00480889L12 6.5Z", - fill="currentColor" + d='M12 6.5L0.749999 12.9952L0.75 0.00480889L12 6.5Z', + fill='currentColor' ) span.welcome__text-download-btn Watch Video .welcome__slider-container img.welcome__slider-img( - src=welcome_img_path + "slider.png", - alt="Slider image" + src=welcome_img_path + 'slider.png', + alt='Slider image' ) diff --git a/practice/practice-02/src/styles/abstracts/_mixins.scss b/practice/practice-02/src/styles/abstracts/_mixins.scss index c7b1623..7439a8b 100644 --- a/practice/practice-02/src/styles/abstracts/_mixins.scss +++ b/practice/practice-02/src/styles/abstracts/_mixins.scss @@ -1,25 +1,11 @@ -%d-flex { - display: flex; -} +@mixin size($width: null, $height: null) { + @if $width != null { + width: $width; + } -%absolute { - position: absolute; -} - -@mixin base-icon-menu { - @include size(36px, 5px); - - background: #000000; - border-radius: 10px; - transition: 0.3s; -} - -@mixin icon-menu { - @include base-icon-menu; - @extend %absolute; - - content: ""; - right: 0; + @if $height != null { + height: $height; + } } @mixin flex-layout( @@ -50,16 +36,6 @@ } } -@mixin size($width: null, $height: null) { - @if $width != null { - width: $width; - } - - @if $height != null { - height: $height; - } -} - @mixin set-location($top: null, $left: null, $right: null, $bottom: null) { @if $top != null { top: $top; @@ -77,3 +53,27 @@ bottom: $bottom; } } + +@mixin base-icon-menu { + @include size(36px, 5px); + + background: #000000; + border-radius: 10px; + transition: 0.3s; +} + +%d-flex { + display: flex; +} + +%absolute { + position: absolute; +} + +.line-icon-menu { + @include base-icon-menu; + @extend %absolute; + + content: ""; + right: 0; +} diff --git a/practice/practice-02/src/styles/abstracts/_variables.scss b/practice/practice-02/src/styles/abstracts/_variables.scss index 72d5adb..d9147cd 100644 --- a/practice/practice-02/src/styles/abstracts/_variables.scss +++ b/practice/practice-02/src/styles/abstracts/_variables.scss @@ -23,4 +23,3 @@ $fs-xxx-lg: 58px; // Size $max-width: 1440px; -$min-width: 320px; diff --git a/practice/practice-02/src/styles/bases/_base.scss b/practice/practice-02/src/styles/bases/_base.scss index 2652adf..f9309c0 100644 --- a/practice/practice-02/src/styles/bases/_base.scss +++ b/practice/practice-02/src/styles/bases/_base.scss @@ -1,17 +1,3 @@ -.link-text { - font-size: $fs-md; - color: $black; - text-decoration: none; -} - -.primary-text { - color: $primary-color; -} - -.secondary-text { - color: $secondary-color; -} - -* { - line-height: normal; +body { + min-width: 428px; } diff --git a/practice/practice-02/src/styles/bases/_reset.scss b/practice/practice-02/src/styles/bases/_reset.scss index 509a8bc..863650f 100644 --- a/practice/practice-02/src/styles/bases/_reset.scss +++ b/practice/practice-02/src/styles/bases/_reset.scss @@ -87,7 +87,6 @@ video { margin: 0; padding: 0; border: 0; - font-size: 100%; vertical-align: baseline; } diff --git a/practice/practice-02/src/styles/bases/_typography.scss b/practice/practice-02/src/styles/bases/_typography.scss index dd250e8..72c0b7c 100644 --- a/practice/practice-02/src/styles/bases/_typography.scss +++ b/practice/practice-02/src/styles/bases/_typography.scss @@ -1,5 +1,9 @@ $font-path: "../assets/fonts"; +%fs-100 { + font-size: 100%; +} + @font-face { font-family: "Sofia Pro"; src: url("#{$font-path}/sofia-pro-regular.woff2") format("woff2"), @@ -43,4 +47,26 @@ $font-path: "../assets/fonts"; * { font-family: $primary-font; line-height: normal; + font-size: $fs-md; +} + +.link-text { + color: $black; + text-decoration: none; +} + +.link-text:hover { + color: $secondary-color; +} + +.primary-text { + @extend %fs-100; + + color: $primary-color; +} + +.secondary-text { + @extend %fs-100; + + color: $secondary-color; } diff --git a/practice/practice-02/src/styles/components/_button.scss b/practice/practice-02/src/styles/components/_button.scss index c15fc81..f89f831 100644 --- a/practice/practice-02/src/styles/components/_button.scss +++ b/practice/practice-02/src/styles/components/_button.scss @@ -3,7 +3,6 @@ padding: 11px 20px; background-color: $primary-color; border-radius: 100px; - font-size: $fs-md; color: $white; white-space: nowrap; transition: 0.2s; diff --git a/practice/practice-02/src/styles/components/_card-item.scss b/practice/practice-02/src/styles/components/_card-item.scss index d4e5f80..b8a64b6 100644 --- a/practice/practice-02/src/styles/components/_card-item.scss +++ b/practice/practice-02/src/styles/components/_card-item.scss @@ -2,105 +2,100 @@ @include flex-layout($align: center, $direction: column); } -.card-item { +.card { @extend %d-flex, %align-center-col; @include size(auto, 516px); position: relative; -} -.food-image { - @extend %absolute; - @include set-location($top: 29px); - - margin: auto; -} - -.price { - @extend %absolute; - @include set-location($top: 176px, $right: 70px); - @include size(52px, 52px); - - color: $white; - border: 4px solid $white; - border-radius: 50px; - background-color: $secondary-color; - font-size: $fs-md; - text-align: center; - line-height: 50px; -} - -.content-card { - @extend %d-flex, %align-center-col, %absolute; - @include set-location($bottom: 72px); - @include size(100%, auto); -} - -.rate { - @extend %d-flex; - @include flex-layout($align: center, $gap: 10px); -} - -.rate-point { - font-size: $fs-md; -} - -.star-container { - @include size(24px, 22px); -} - -.avatar-container { - @include size(74px, 38px); - - position: relative; -} - -.avatar { - &:first-child { + &__food-image { @extend %absolute; - @include set-location($left: 38px); + @include set-location($top: 29px); - z-index: 2; + margin: auto; } - &:nth-child(2) { + &__price { @extend %absolute; - @include set-location($left: 19px); + @include set-location($top: 176px, $right: 70px); + @include size(52px, 52px); - z-index: 1; - } - - &:last-child { - @extend %absolute; - @include set-location($left: 0); - } -} - -.food-name { - margin-top: 30px; - color: $primary-color; - font-size: $fs-lg; - font-weight: 600; -} - -.food-description { - @include size(100%, auto); - - max-width: 243px; - margin-top: 13px; - text-align: center; - text-transform: capitalize; - color: $black; -} - -.order-btn { - @extend %absolute; - @include set-location($bottom: 0px); - - padding: 10px 20px; - text-transform: capitalize; - - &:hover { + color: $white; + border: 4px solid $white; + border-radius: 50px; background-color: $secondary-color; + text-align: center; + line-height: 50px; + } + + &__content { + @extend %d-flex, %align-center-col, %absolute; + @include set-location($bottom: 72px); + @include size(100%, auto); + } + + &__rate { + @extend %d-flex; + @include flex-layout($align: center, $gap: 10px); + } + + &__star-container { + @include size(24px, 22px); + } + + &__avatar-container { + @include size(74px, 38px); + + position: relative; + } + + &__avatar { + &:first-child { + @extend %absolute; + @include set-location($left: 38px); + + z-index: 2; + } + + &:nth-child(2) { + @extend %absolute; + @include set-location($left: 19px); + + z-index: 1; + } + + &:last-child { + @extend %absolute; + @include set-location($left: 0); + } + } + + &__food-name { + margin-top: 30px; + color: $primary-color; + font-size: $fs-lg; + font-weight: 600; + } + + &__food-description { + @include size(100%, auto); + + max-width: 243px; + margin-top: 13px; + text-align: center; + text-transform: capitalize; + color: $black; + } + + &__order-btn { + @extend %absolute; + @include set-location($bottom: 0); + + padding: 10px 20px; + text-transform: capitalize; + + &:hover { + background-color: $secondary-color; + } } } diff --git a/practice/practice-02/src/styles/components/_logo.scss b/practice/practice-02/src/styles/components/_logo.scss deleted file mode 100644 index aeb0333..0000000 --- a/practice/practice-02/src/styles/components/_logo.scss +++ /dev/null @@ -1,21 +0,0 @@ -.logo { - @include size(100%, 100%); -} - -.logo-wrapper { - @include size(97px, 62px); - - flex-shrink: 0; -} - -.logo-link { - @include size(100%, 100%); - - display: inline-block; -} - -@media screen and (min-width: 840px) { - .logo-wrapper { - @include size(121px, 78px); - } -} diff --git a/practice/practice-02/src/styles/components/_toggle-menu.scss b/practice/practice-02/src/styles/components/_toggle-menu.scss deleted file mode 100644 index 953a85a..0000000 --- a/practice/practice-02/src/styles/components/_toggle-menu.scss +++ /dev/null @@ -1,55 +0,0 @@ -.icon-menu { - @include base-icon-menu; - - position: relative; - cursor: pointer; - top: -1px; - - &:before { - @include icon-menu; - - top: -11px; - } - - &:after { - @include icon-menu; - - top: 11px; - } -} - -.toggle-menu { - @extend %absolute; - @include size(36px, 27px); - - top: 46px; - right: 21px; - cursor: pointer; - z-index: 1; - opacity: 0; -} - -.toggle-menu:checked ~ .icon-menu { - background: transparent; -} - -.toggle-menu:checked ~ .icon-menu:before { - top: 0; - transform: rotate(-45deg); -} - -.toggle-menu:checked ~ .icon-menu:after { - top: 0; - transform: rotate(45deg); -} - -.toggle-menu:checked ~ .nav-list { - display: block; -} - -@media screen and (min-width: 840px) { - .icon-menu, - .toggle-menu { - display: none; - } -} diff --git a/practice/practice-02/src/styles/layouts/_footer.scss b/practice/practice-02/src/styles/layouts/_footer.scss index 920fe34..410bb01 100644 --- a/practice/practice-02/src/styles/layouts/_footer.scss +++ b/practice/practice-02/src/styles/layouts/_footer.scss @@ -17,8 +17,7 @@ } &__introduction .footer__description { - margin-top: 8 px; - font-size: $fs-md; + margin-top: 8px; max-width: 325px; } @@ -60,14 +59,13 @@ } &__contact { - margin-top: 30px; + padding-top: 30px; } &__contact .footer__description { max-width: 379px; color: $black; margin-top: 37px; - font-size: $fs-md; } &__form { @@ -84,6 +82,7 @@ padding-left: 25px; border: none; background-color: #e8e8e8; + font-size: $fs-xx-sm; } &__submit-btn { @@ -93,16 +92,22 @@ color: $white; background-color: $primary-color; border: none; + cursor: pointer; + font-size: $fs-xx-sm; + + &:hover { + background-color: $secondary-color; + } } &__copyright { @extend %mr-ml-auto; - @include size(fit-content, auto); font-size: $fs-x-sm; font-family: $secondary-font; margin-top: 80px; padding-bottom: 29px; + text-align: center; } } @@ -136,7 +141,7 @@ &__container { grid-template-columns: auto auto auto; padding-left: 135px; - column-gap: 10px; + column-gap: 40px; } &__introduction { @@ -145,6 +150,9 @@ } &__information { + @include flex-layout($justify: space-between, $gap: 30px); + + max-width: 304px; padding-top: 155px; } @@ -154,7 +162,7 @@ } &__contact { - padding-top: 125px; + padding-top: 155px; } } } diff --git a/practice/practice-02/src/styles/layouts/_header.scss b/practice/practice-02/src/styles/layouts/_header.scss index 2af581f..81b5083 100644 --- a/practice/practice-02/src/styles/layouts/_header.scss +++ b/practice/practice-02/src/styles/layouts/_header.scss @@ -1,34 +1,34 @@ .header { @extend %absolute; @include set-location($top: 0, $right: 0, $left: 0); + @include size(428px, auto); - max-width: 428px; margin: auto; } -.header-container { +.header__container { @extend %d-flex; @include flex-layout($align: center); justify-content: space-between; position: relative; - max-width: 428px; - min-width: $min-width; padding: 24px; margin: auto; } -.header-content { +.header__content { @extend %d-flex; @include flex-layout($justify: space-between); } @media screen and (min-width: 840px) { .header { + @include size(auto, auto); + max-width: $max-width; } - .header-container { + .header__container { @include flex-layout($gap: 10px); padding-top: 32px; @@ -37,7 +37,7 @@ max-width: 1309px; } - .header-content { + .header__content { @include flex-layout($gap: 10px); @include size(100%, auto); diff --git a/practice/practice-02/src/styles/layouts/_menu.scss b/practice/practice-02/src/styles/layouts/_menu.scss index 0c9f8fb..d6c389c 100644 --- a/practice/practice-02/src/styles/layouts/_menu.scss +++ b/practice/practice-02/src/styles/layouts/_menu.scss @@ -3,7 +3,6 @@ } %style-category-item { - font-size: $fs-md; padding: 8px 18px; border-radius: 50px; } @@ -40,7 +39,7 @@ } } - &__category-item:focus { + &__category-item:first-child { @extend %style-category-item; color: $white; diff --git a/practice/practice-02/src/styles/layouts/_navbar.scss b/practice/practice-02/src/styles/layouts/_navbar.scss index ca652ba..1dcdc52 100644 --- a/practice/practice-02/src/styles/layouts/_navbar.scss +++ b/practice/practice-02/src/styles/layouts/_navbar.scss @@ -1,40 +1,87 @@ -.nav-list { - @extend %absolute; - @include size(max-content, auto); +.nav { + &__icon-menu { + @include base-icon-menu; - display: none; - list-style: none; - transition: 0.1s; - border: 2px solid $primary-color; - top: 100px; - right: 25px; - background-color: $white; - z-index: 2; - border-radius: 20px; -} + position: relative; + cursor: pointer; + top: -1px; -.nav-download-btn { - display: none; + &:before { + @extend .line-icon-menu; - z-index: 1; -} + top: -11px; + } -.nav-item { - font-size: $fs-xx-sm; - padding: 14px; - border-bottom: 1px solid $black; + &:after { + @extend .line-icon-menu; - &:last-child { - border-bottom: unset; + top: 11px; + } } - &:hover .nav-link { - color: $secondary-color; - } -} + &__toggle-menu { + @extend %absolute; + @include size(36px, 27px); -.nav-link { - color: $black; + top: 37px; + right: 21px; + cursor: pointer; + z-index: 1; + opacity: 0; + } + + &__toggle-menu:checked ~ &__icon-menu { + background: transparent; + } + + &__toggle-menu:checked ~ &__icon-menu:before { + top: 0; + transform: rotate(-45deg); + } + + &__toggle-menu:checked ~ &__icon-menu:after { + top: 0; + transform: rotate(45deg); + } + + &__toggle-menu:checked ~ &__list { + display: block; + } + + &__list { + @extend %absolute; + @include size(max-content, auto); + + display: none; + list-style: none; + transition: 0.1s; + border: 2px solid $primary-color; + top: 100px; + right: 25px; + background-color: $white; + z-index: 2; + border-radius: 20px; + } + + &__download-btn { + display: none; + + z-index: 1; + } + + &__item-wrapper { + font-size: $fs-xx-sm; + padding: 14px; + border-bottom: 1px solid $black; + + &:last-child { + border-bottom: unset; + } + } + + &__link { + color: $black; + } } @media screen and (min-width: 840px) { @@ -42,35 +89,40 @@ @include size(100%, auto); margin: auto; - } - .nav-download-btn { - display: block; + &__icon-menu, + &__toggle-menu { + display: none; + } - &:hover { - background-color: $secondary-color; + &__download-btn { + display: block; + + &:hover { + background-color: $secondary-color; + } + } + + &__list { + @include size(auto, auto); + @include flex-layout( + $justify: space-between, + $direction: row, + $gap: 10px + ); + + display: flex; + position: unset; + border: none; + max-width: 660px; + margin: unset; + background-color: transparent; + } + + &__item-wrapper { + border-bottom: none; + padding: 0; + text-align: center; } } - - .nav-list { - @include size(auto, auto); - @include flex-layout($justify: space-between, $direction: row, $gap: 10px); - - display: flex; - position: unset; - border: none; - max-width: 660px; - margin: unset; - background-color: transparent; - } - - .nav-item { - border-bottom: none; - padding: 0; - text-align: center; - } - - // .nav-link:hover { - // color: $secondary-color; - // } } diff --git a/practice/practice-02/src/styles/layouts/_offer.scss b/practice/practice-02/src/styles/layouts/_offer.scss index d7c65ff..1e4e489 100644 --- a/practice/practice-02/src/styles/layouts/_offer.scss +++ b/practice/practice-02/src/styles/layouts/_offer.scss @@ -15,7 +15,7 @@ &__dot-background { @extend %absolute; - @include set-location($top: 168px, $left: 0px); + @include set-location($top: 168px, $left: 0); display: none; } @@ -27,7 +27,6 @@ } &__description { - font-size: $fs-md; font-weight: 400; text-transform: capitalize; text-align: center; @@ -60,7 +59,7 @@ } } -@media screen and (min-width: 840px) { +@media screen and (min-width: 600px) { .offer { max-width: $max-width; diff --git a/practice/practice-02/src/styles/layouts/_platform.scss b/practice/practice-02/src/styles/layouts/_platform.scss index 141bb2b..3797922 100644 --- a/practice/practice-02/src/styles/layouts/_platform.scss +++ b/practice/practice-02/src/styles/layouts/_platform.scss @@ -23,7 +23,7 @@ &__main-image { @extend %absolute; - @include set-location($top: 0px, $left: 60px); + @include set-location($top: 0, $left: 60px); } &__image-food:first-child { @@ -66,7 +66,6 @@ } &__description { - font-size: $fs-md; color: $black; margin-top: 31px; max-width: 366px; @@ -96,13 +95,13 @@ } &__background-img { - @include set-location($top: 0px, $right: 0px); + @include set-location($top: 0, $right: 0); position: absolute; } &__main-image { - @include set-location($top: 0px, $right: 58px, $left: unset); + @include set-location($top: 0, $right: 58px, $left: unset); } &__image-food:first-child { diff --git a/practice/practice-02/src/styles/layouts/_service.scss b/practice/practice-02/src/styles/layouts/_service.scss index 2390a81..0f45a34 100644 --- a/practice/practice-02/src/styles/layouts/_service.scss +++ b/practice/practice-02/src/styles/layouts/_service.scss @@ -52,7 +52,6 @@ &__heading { margin-top: 30px; - margin-inline: auto; font-size: $fs-xx-lg; line-height: 129.9%; font-weight: 700; @@ -63,7 +62,6 @@ margin-top: 29px; margin-inline: auto; max-width: 381px; - font-size: $fs-md; } &__category { @@ -88,14 +86,12 @@ } &__name-category { - font-size: $fs-md; text-transform: capitalize; } &__btn { - display: block; + display: inline-block; margin-top: 43px; - max-width: 74px; text-transform: capitalize; padding: 10px 20px; @@ -188,7 +184,7 @@ } &__background-img { - @include set-location($top: 0px, $left: 0); + @include set-location($top: 0, $left: 0); @extend %absolute_1200; } diff --git a/practice/practice-02/src/styles/layouts/_welcome.scss b/practice/practice-02/src/styles/layouts/_welcome.scss index 97fcf74..8dfbca6 100644 --- a/practice/practice-02/src/styles/layouts/_welcome.scss +++ b/practice/practice-02/src/styles/layouts/_welcome.scss @@ -1,6 +1,7 @@ .delivery-text-box { position: relative; display: inline-block; + font-size: $fs-xxx-lg; } .welcome { @@ -47,7 +48,7 @@ &__food-img:nth-child(4) { @extend %absolute; - @include set-location($bottom: 0px, $right: 80px); + @include set-location($bottom: 0, $right: 80px); } &__food-img:nth-child(5) { @@ -78,17 +79,19 @@ &__arrow-img-up { @extend %absolute; @include set-location($top: -15px, $right: 40px); + + z-index: -1; } &__mint-img { @extend %absolute; - @include set-location($bottom: 90px, $right: 0px); + @include set-location($bottom: 90px, $right: 0); } // End banner // Start content &__content { - @include size(calc(428px - 48px), auto); + @include size(380px, auto); @extend %d-flex; @include flex-layout($direction: column); @@ -148,7 +151,7 @@ &__underline-img-container { @extend %absolute; - @include set-location($bottom: -27px, $left: 0px); + @include set-location($bottom: -27px, $left: 0); } &__description { @@ -177,7 +180,6 @@ &__text-input { @include size(100%, auto); - font-size: $fs-md; border: none; &:focus { @@ -284,11 +286,16 @@ } // Start content + + &__head-arrow-container { + display: none; + } + &__content { @include size(auto, auto); padding-left: 70px; - padding-right: 0px; + padding-right: 0; padding-top: 70px; max-width: 560px; } @@ -346,7 +353,7 @@ @media screen and (min-width: 1200px) { .welcome { - padding-top: 0px; + padding-top: 0; // Start banner &__banner { diff --git a/practice/practice-02/src/styles/main.scss b/practice/practice-02/src/styles/main.scss index 6ae40f4..cbf8b6d 100644 --- a/practice/practice-02/src/styles/main.scss +++ b/practice/practice-02/src/styles/main.scss @@ -9,8 +9,6 @@ // Components @import "./components/button"; -@import "./components/toggle-menu"; -@import "./components/logo"; @import "./components/card-item"; // Layouts