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 0000000..196efdf Binary files /dev/null and b/practice/practice-02/src/assets/images/logo-desktop.png differ 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 0000000..6018302 Binary files /dev/null and b/practice/practice-02/src/assets/images/logo-mobile.png differ 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