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..73ecf04 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": "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/assets/images/platform/background-tablet.png b/practice/practice-02/src/assets/images/platform/background-tablet.png new file mode 100644 index 0000000..5cb6125 Binary files /dev/null and b/practice/practice-02/src/assets/images/platform/background-tablet.png differ diff --git a/practice/practice-02/src/assets/images/service/background-tablet.png b/practice/practice-02/src/assets/images/service/background-tablet.png new file mode 100644 index 0000000..ae824c2 Binary files /dev/null and b/practice/practice-02/src/assets/images/service/background-tablet.png differ 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..e660ff7 100644 --- a/practice/practice-02/src/layouts/footer.pug +++ b/practice/practice-02/src/layouts/footer.pug @@ -1,43 +1,43 @@ -- var image_footer_path = "./assets/images/footer/"; -- var about_us_links = ["About Us", "Service Us", "Contact", "Company"]; -- var company_links = ["Partnership", "Terms of Use", "Privacy", "Sitemap"]; +- var image_footer_path = './assets/images/footer/'; +- var about_us_links = ['About Us', 'Service Us', 'Contact', 'Company']; +- var company_links = ['Partnership', 'Terms of Use', 'Privacy', 'Sitemap']; footer.footer .footer__container .footer__introduction - p.footer__brand-name.primary-text Foodhut + p.footer__brand-name.text--primary Foodhut p.footer__description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor .footer__social-media - a.footer__social-link(href="javascript:void(0)") + a.footer__social-link(href='javascript:void(0)') img.facebook-icon( - src=image_footer_path + "facebook.png", - alt="Facebook icon" + src=image_footer_path + 'facebook.png', + alt='Facebook icon' ) - a.footer__social-link(href="javascript:void(0)") + a.footer__social-link(href='javascript:void(0)') img.instagram-icon( - src=image_footer_path + "instagram.png", - alt="Instagram icon" + src=image_footer_path + 'instagram.png', + alt='Instagram icon' ) - a.footer__social-link(href="javascript:void(0)") + a.footer__social-link(href='javascript:void(0)') img.twitter-icon( - src=image_footer_path + "twitter.png", - alt="Twitter icon" + src=image_footer_path + 'twitter.png', + alt='Twitter icon' ) .footer__information .footer__about-us - h3.footer__heading.primary-text About Us + h3.footer__heading.text--primary 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 + h3.footer__heading.text--primary 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 + h3.footer__heading.text--primary Get in touch p.footer__description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor - form.footer__form(action="#") - input.footer__email-input(type="text", placeholder="Email") - button.footer__submit-btn(type="submit") Subscribe + form.footer__form(action='#') + input.footer__email-input(type='text', placeholder='Email') + button.footer__submit-btn(type='submit') Subscribe p.footer__copyright Copyright © 2022 Foodhut. 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..fae4769 100644 --- a/practice/practice-02/src/sections/menu.pug +++ b/practice/practice-02/src/sections/menu.pug @@ -1,19 +1,21 @@ -- var image_menu_path = "./assets/images/menu/"; -- 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 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" }] }; +- 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 = [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 .menu__container h2.menu__heading - span.primary-text Menu - = " That " - span.secondary-text Always - = " Make You Fall In " - span.primary-text Love + span.text--primary Menu + = ' That ' + span.text--secondary Always + = ' Make You Fall In ' + span.text--primary Love .menu__list-category each item in list_category - a.menu__category-item.link-text(href="javascript:void(0)")= item + a.menu__category-item.link-text(href='javascript:void(0)')= item .menu__card-list each url in list_image_food - var image_food = { imageUrl: url }; diff --git a/practice/practice-02/src/sections/offer.pug b/practice/practice-02/src/sections/offer.pug index 2e6d4f9..0e9500b 100644 --- a/practice/practice-02/src/sections/offer.pug +++ b/practice/practice-02/src/sections/offer.pug @@ -1,22 +1,24 @@ -- var offer_img_path = "./assets/images/offer/"; +- 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 .offer__container .offer__dot-background img( - src=offer_img_path + "dot-background.png", - alt="Dot background image" + src=offer_img_path + 'dot-background.png', + alt='Dot background image' ) h2.offer__heading Today - = " " - span.primary-text Special - = " Offers" + = ' ' + span.text--primary Special + = ' Offers' p.offer__description Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s .offer__card-list each val in list_food @@ -24,7 +26,7 @@ section.offer .offer__rosemary-container picture source( - media="(min-width: 840px)", - srcset=offer_img_path + "rosemary-desktop.png" + media='(min-width: 840px)', + srcset=offer_img_path + 'rosemary-desktop.png' ) - img(src=offer_img_path + "rosemary-mobile.png", alt="Rosemary image") + img(src=offer_img_path + 'rosemary-mobile.png', alt='Rosemary image') diff --git a/practice/practice-02/src/sections/platform.pug b/practice/practice-02/src/sections/platform.pug index 11a2eef..0fe4beb 100644 --- a/practice/practice-02/src/sections/platform.pug +++ b/practice/practice-02/src/sections/platform.pug @@ -1,4 +1,4 @@ -- var platform_image_path = "./assets/images/platform/"; +- var platform_image_path = './assets/images/platform/'; - var list_food_image_path = [{mobile_image_path: platform_image_path + "food-1-mobile.png", desktop_image_path: platform_image_path + "food-1-desktop.png"}, {mobile_image_path: platform_image_path + "food-2-mobile.png", desktop_image_path: platform_image_path + "food-2-desktop.png"}, {mobile_image_path: platform_image_path + "food-3-mobile.png", desktop_image_path: platform_image_path + "food-3-desktop.png"}, {mobile_image_path: platform_image_path + "food-4-mobile.png", desktop_image_path: platform_image_path + "food-4-desktop.png"}]; section.platform @@ -6,43 +6,47 @@ section.platform .platform__image-container each item in list_food_image_path picture.platform__image-food - source(media="(min-width: 1200px)", srcset=item.desktop_image_path) - img(src=item.mobile_image_path, alt="Food image") + source(media='(min-width: 1200px)', srcset=item.desktop_image_path) + img(src=item.mobile_image_path, alt='Food image') picture source( - media="(min-width: 1200px)", - srcset=platform_image_path + "background-desktop.png" + media='(min-width: 1200px)', + srcset=platform_image_path + 'background-desktop.png' + ) + source( + media='(min-width: 600px)', + srcset=platform_image_path + 'background-tablet.png' ) img.platform__background-img( - src=platform_image_path + "background-mobile.png", - alt="Background image" + src=platform_image_path + 'background-mobile.png', + alt='Background image' ) picture source( - media="(min-width: 1200px)", - srcset=platform_image_path + "main-image-desktop.png" + media='(min-width: 1200px)', + srcset=platform_image_path + 'main-image-desktop.png' ) img.platform__main-image( - src=platform_image_path + "main-image-mobile.png", - alt="The image introduce the platform" + src=platform_image_path + 'main-image-mobile.png', + alt='The image introduce the platform' ) .platform__content h2.platform__heading It's Now - = " " - span.primary-text More Easy - = " to " - span.secondary-text Order - = " by Our Mobile " - span.primary-text App + = ' ' + span.text--primary More Easy + = ' to ' + span.text--secondary Order + = ' by Our Mobile ' + span.text--primary App p.platform__description All you need to do is downlode one of the best delivery apps, make a and most companies are opting for mobile app devlopment for food delivery .platform__store-container .platform__google-store img.platform__google-store-image( - src=platform_image_path + "chplay.png", - alt="Google store image" + src=platform_image_path + 'chplay.png', + alt='Google store image' ) .platform__app-store img.platform__app-store-image( - src=platform_image_path + "app-store.png", - alt="App store image" + src=platform_image_path + 'app-store.png', + alt='App store image' ) diff --git a/practice/practice-02/src/sections/service.pug b/practice/practice-02/src/sections/service.pug index 2902cb1..0826381 100644 --- a/practice/practice-02/src/sections/service.pug +++ b/practice/practice-02/src/sections/service.pug @@ -1,4 +1,4 @@ -- var service_img_path = "./assets/images/service/"; +- var service_img_path = './assets/images/service/'; - var list_service_category_1 = [{url_icon : service_img_path + "icon-1.png", content: "Online order"}, {url_icon : service_img_path + "icon-3.png", content: "Pre-Reservation"}, {url_icon : service_img_path + "icon-3.png", content: "Super chef"}]; - var list_service_category_2 = [{url_icon : service_img_path + "icon-2.png", content: "24/7 Service"}, {url_icon : service_img_path + "icon-3.png", content: "Oragonized foodhut place"}, {url_icon : service_img_path + "icon-3.png", content: "Clean Kitchen"}]; - var list_service_category = [list_service_category_1, list_service_category_2]; @@ -9,38 +9,42 @@ section.service .service__img-container picture source( - media="(min-width: 1200px)", - srcset=service_img_path + "background-desktop.png" + media='(min-width: 1200px)', + srcset=service_img_path + 'background-desktop.png' + ) + source( + media='(min-width: 600px)', + srcset=service_img_path + 'background-tablet.png' ) img.service__background-img( - src=service_img_path + "background-mobile.png", - alt="Background image" + src=service_img_path + 'background-mobile.png', + alt='Background image' ) picture source( - media="(min-width: 1200px)", - srcset=service_img_path + "main-character-desktop.png" + media='(min-width: 1200px)', + srcset=service_img_path + 'main-character-desktop.png' ) img.service__main-img( - src=service_img_path + "main-character-mobile.png", - alt="Main character image" + src=service_img_path + 'main-character-mobile.png', + alt='Main character image' ) picture source( - media="(min-width: 1200px)", - srcset=service_img_path + "vegetable-desktop.png" + media='(min-width: 1200px)', + srcset=service_img_path + 'vegetable-desktop.png' ) img.service__vegetable-img( - src=service_img_path + "vegetable-mobile.png", - alt="Vegetable background image" + src=service_img_path + 'vegetable-mobile.png', + alt='Vegetable background image' ) .service__content h2.service__heading We are - = " " - span.primary-text more - = " than " - span.secondary-text multiple - = " service" + = ' ' + span.text--primary more + = ' than ' + span.text--secondary multiple + = ' service' p.service__description This is a type of resturent which typically serves food and drink, in addition to light refreshments such as baked goods or snacks. The term comes frome the rench word meaning food .service__category each list in list_service_category @@ -49,7 +53,7 @@ section.service .service__category-item img.service__icon-category( src=item.url_icon, - alt="Icon category" + alt='Icon category' ) p.service__name-category= item.content - a.service__btn.btn(href="javascript:void(0)") About us + a.service__btn.btn(href='javascript:void(0)') About us diff --git a/practice/practice-02/src/sections/welcome.pug b/practice/practice-02/src/sections/welcome.pug index 784ac6b..30d0fe1 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,135 @@ 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 " - span.primary-text food - = " & " + = ' ' + span.text--primary serious + = ' for ' + span.text--primary food + = ' & ' .delivery-text-box - span.secondary-text delivery + span.text--secondary delivery .welcome__underline-img-container - img(src=welcome_img_path + "underline.png", alt="Underline image") - = "." + img.welcome__underline-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..ec1f792 100644 --- a/practice/practice-02/src/styles/bases/_typography.scss +++ b/practice/practice-02/src/styles/bases/_typography.scss @@ -1,46 +1,72 @@ -$font-path: "../assets/fonts"; +$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"), - url("#{$font-path}/sofia-pro-regular.ttf") format("truetype"); + font-family: 'Sofia Pro'; + src: url('#{$font-path}/sofia-pro-regular.woff2') format('woff2'), + url('#{$font-path}/sofia-pro-regular.ttf') format('truetype'); font-weight: 400; } @font-face { - font-family: "Sofia Pro"; - src: url("#{$font-path}/sofia-pro-medium.woff2") format("woff2"), - url("#{$font-path}/sofia-pro-medium.ttf") format("truetype"); + font-family: 'Sofia Pro'; + src: url('#{$font-path}/sofia-pro-medium.woff2') format('woff2'), + url('#{$font-path}/sofia-pro-medium.ttf') format('truetype'); font-weight: 600; } @font-face { - font-family: "Sofia Pro"; - src: url("#{$font-path}/sofia-pro-semi-bold.woff2") format("woff2"), - url("#{$font-path}/sofia-pro-semi-bold.ttf") format("truetype"); + font-family: 'Sofia Pro'; + src: url('#{$font-path}/sofia-pro-semi-bold.woff2') format('woff2'), + url('#{$font-path}/sofia-pro-semi-bold.ttf') format('truetype'); font-weight: 700; } @font-face { - font-family: "Sofia Pro"; - src: url("#{$font-path}/sofia-pro-bold.woff2") format("woff2"), - url("#{$font-path}/sofia-pro-bold.ttf") format("truetype"); + font-family: 'Sofia Pro'; + src: url('#{$font-path}/sofia-pro-bold.woff2') format('woff2'), + url('#{$font-path}/sofia-pro-bold.ttf') format('truetype'); font-weight: 900; } @font-face { - font-family: "Inter"; - src: url("#{$font-path}/inter.woff2") format("woff2"), - url("#{$font-path}/inter.ttf") format("truetype"); + font-family: 'Inter'; + src: url('#{$font-path}/inter.woff2') format('woff2'), + url('#{$font-path}/inter.ttf') format('truetype'); } @font-face { - font-family: "Poppins"; - src: url("#{$font-path}/poppins-medium.woff2") format("woff2"), - url("#{$font-path}/poppins-medium.ttf") format("truetype"); + font-family: 'Poppins'; + src: url('#{$font-path}/poppins-medium.woff2') format('woff2'), + url('#{$font-path}/poppins-medium.ttf') format('truetype'); } * { font-family: $primary-font; line-height: normal; + font-size: $fs-md; +} + +.link-text { + color: $black; + text-decoration: none; +} + +.link-text:hover { + color: $secondary-color; +} + +.text--primary { + @extend %fs-100; + + color: $primary-color; +} + +.text--secondary { + @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..f3999de 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,61 +59,68 @@ } &__contact { - margin-top: 30px; + padding-top: 30px; } &__contact .footer__description { max-width: 379px; color: $black; margin-top: 37px; - font-size: $fs-md; } &__form { - @include size(378px, auto); + @extend %d-flex; + @include flex-layout($justify: space-between, $gap: 15px, $wrap: wrap); + max-width: 338px; margin-top: 27px; } &__email-input { @include size(178px, 48px); - margin-right: 15px; border-radius: 40px; padding-left: 25px; border: none; background-color: #e8e8e8; + font-size: $fs-xx-sm; } &__submit-btn { @include size(118px, 50px); - border-radius: 40px; + border-radius: 30px; 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; } } -@media screen and (min-width: 840px) { +@media screen and (min-width: 600px) { .footer { &__container { display: grid; grid-template-columns: 1fr 1fr; max-width: $max-width; width: auto; - padding-inline: 90px; column-gap: 10px; + padding-inline: 10px; } &__introduction { @@ -128,33 +134,52 @@ &__contact { grid-column: -2; } + + &__information { + @include flex-layout($justify: space-between); + + max-width: 310px; + } + } +} + +@media screen and (min-width: 840px) { + .footer { + &__container { + padding-inline: 30px; + } } } @media screen and (min-width: 1200px) { .footer { &__container { - grid-template-columns: auto auto auto; + grid-template-columns: 505px auto auto; padding-left: 135px; - column-gap: 10px; + column-gap: 30px; } &__introduction { - padding-top: 119px; - padding-left: 112px; + padding-top: 89px; + padding-left: unset; } &__information { - padding-top: 155px; - } + @include flex-layout($justify: space-between, $gap: 30px); - &__description { - margin-top: 9px; - padding-left: 1px; + max-width: 304px; + padding-top: 138px; } &__contact { - padding-top: 125px; + padding-top: 138px; + padding-left: 5px; } } } + +@media screen and (min-width: 1300px) { + .footer__introduction { + padding-left: 112px; + } +} diff --git a/practice/practice-02/src/styles/layouts/_header.scss b/practice/practice-02/src/styles/layouts/_header.scss index 2af581f..e480a09 100644 --- a/practice/practice-02/src/styles/layouts/_header.scss +++ b/practice/practice-02/src/styles/layouts/_header.scss @@ -2,33 +2,39 @@ @extend %absolute; @include set-location($top: 0, $right: 0, $left: 0); - max-width: 428px; + 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: 600px) { + .header { + width: auto; + } +} + @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 +43,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..4e187d6 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; @@ -73,7 +72,7 @@ } } -@media screen and (min-width: 840px) { +@media screen and (min-width: 600px) { .menu { &__container { max-width: $max-width; @@ -83,6 +82,16 @@ max-width: 653px; } + &__card-list { + grid-auto-columns: unset; + grid-template-rows: 1fr 1fr; + row-gap: 66px; + } + } +} + +@media screen and (min-width: 840px) { + .menu { &__list-category { margin-inline: 59px; } diff --git a/practice/practice-02/src/styles/layouts/_navbar.scss b/practice/practice-02/src/styles/layouts/_navbar.scss index ca652ba..3d78f76 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: -5px; -.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..75cb543 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; @@ -78,6 +77,10 @@ row-gap: 30px; } + + &__description { + padding-inline: 24px; + } } } diff --git a/practice/practice-02/src/styles/layouts/_platform.scss b/practice/practice-02/src/styles/layouts/_platform.scss index 141bb2b..8e0d498 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; @@ -80,29 +79,48 @@ } } +@media screen and (min-width: 600px) { + .platform { + &__container { + max-width: $max-width; + } + + &__image-container { + width: fit-content; + margin-inline: auto; + } + + &__main-image { + @include set-location($top: 0, $left: 28px); + } + + &__heading, + &__description { + max-width: unset; + } + } +} + @media screen and (min-width: 840px) { .platform { &__container { - @include flex-layout($direction: row-reverse, $align: center); + @include flex-layout( + $direction: row-reverse, + $align: center, + $justify: space-between + ); + // width: 100%; display: flex; - max-width: $max-width; - max-height: 632px; padding-top: 50px; } &__image-container { - @include size(100%, 500px); - } - - &__background-img { - @include set-location($top: 0px, $right: 0px); - - position: absolute; + margin-inline: unset; } &__main-image { - @include set-location($top: 0px, $right: 58px, $left: unset); + @include set-location($top: 0, $right: 58px, $left: unset); } &__image-food:first-child { @@ -141,43 +159,35 @@ } &__image-container { - @include size(600px, 632px); + @include size(auto, 632px); + padding-top: 20px; text-align: right; } &__main-image { - @include set-location($top: 20px, $right: 105px); - } - - &__background-img { - @include set-location($top: 20px, $right: 00px); - } - - &__image-food:first-child { - @include set-location($bottom: -65px, $right: 263px); - } - - &__image-food:nth-child(2) { - @include set-location($bottom: -40px, $right: 190px); - } - - &__image-food:nth-child(3) { - @include set-location($bottom: -8px, $right: 125px); + @include set-location($top: 20px, $right: 107px); } + &__image-food:first-child, + &__image-food:nth-child(2), + &__image-food:nth-child(3), &__image-food:nth-child(4) { - @include set-location($bottom: 80px, $right: 80px); + display: none; + } + + &__content { + padding-top: 33px; } &__heading, &__description, &__store-container { - padding-left: 47px; + padding-left: 45px; } &__description { - margin-top: 52px; + margin-top: 58px; } } } diff --git a/practice/practice-02/src/styles/layouts/_service.scss b/practice/practice-02/src/styles/layouts/_service.scss index 2390a81..addd166 100644 --- a/practice/practice-02/src/styles/layouts/_service.scss +++ b/practice/practice-02/src/styles/layouts/_service.scss @@ -22,29 +22,24 @@ } &__img-container { - @include size(auto, 436.81px); - + padding-top: 75px; position: relative; - padding-top: 80px; - } - - &__background-img { - @extend %absolute; - @include set-location($top: 75px, $left: 0); + width: fit-content; } &__main-img { @extend %absolute; - @include set-location($top: 70px, $left: 35px); + @include set-location($top: 73px, $left: 35px); } &__vegetable-img { @extend %absolute; @include set-location($bottom: -10px, $left: 50px); + z-index: 4; } &__content { - margin-top: 65px; + margin-top: 61px; padding-inline: 24px; z-index: 1; @@ -52,7 +47,6 @@ &__heading { margin-top: 30px; - margin-inline: auto; font-size: $fs-xx-lg; line-height: 129.9%; font-weight: 700; @@ -61,9 +55,7 @@ &__description { margin-top: 29px; - margin-inline: auto; max-width: 381px; - font-size: $fs-md; } &__category { @@ -88,14 +80,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; @@ -105,15 +95,36 @@ } } +@media screen and (min-width: 600px) { + .service { + max-width: $max-width; + + &__main-img { + @include set-location($top: 30px, $left: 25px); + } + + &__heading { + max-width: unset; + } + + &__description { + max-width: 690px; + } + + &__category { + @include flex-layout($direction: row, $gap: 10px); + + margin-top: 29px; + } + } +} + @media screen and (min-width: 840px) { %absolute_840 { position: absolute; } .service { - max-width: $max-width; - margin-inline: auto; - &__container { @include flex-layout($align: center); @@ -125,6 +136,7 @@ @include size($width: 100%); max-width: 460px; + margin-inline: auto; } &__img-container { @@ -151,12 +163,12 @@ } &__main-img { - @include set-location($top: 95px, $left: 35px); + @include set-location($top: 55px, $left: 25px); @extend %absolute_840; } &__vegetable-img { - @include set-location($bottom: 145px, $left: 50px); + @include set-location($bottom: 180px, $left: 50px); @extend %absolute_840; } @@ -164,16 +176,6 @@ max-width: 452px; margin: unset; } - - &__description { - max-width: 690px; - } - - &__category { - @include flex-layout($direction: row, $gap: 10px); - - margin-top: 29px; - } } } @@ -188,25 +190,31 @@ } &__background-img { - @include set-location($top: 0px, $left: 0); + @include set-location($top: 0, $left: 0); @extend %absolute_1200; } + &__img-container { + margin-inline: unset; + } + &__background-color { - @include set-location($left: -150px); + @include set-location($left: -151px); @include size(500px, 50%); border-radius: 50%; background: radial-gradient( circle, - rgba(253, 197, 94, 0.6), - rgba(253, 197, 94, 0.4), + rgba(253, 197, 94, 0.3), rgba(253, 197, 94, 0.2), + rgba(253, 197, 94, 0.1), rgba(253, 197, 94, 0.06), rgba(253, 197, 94, 0.01), rgba(253, 197, 94, 0), rgba(253, 197, 94, 0) ); + + clip-path: polygon(30% 0, 100% 0, 100% 100%, 30% 100%); } &__description { @@ -230,8 +238,12 @@ } &__content { - padding-top: 78px; + padding-top: 69px; padding-left: 29px; } + + &__btn { + margin-top: 26px; + } } } diff --git a/practice/practice-02/src/styles/layouts/_welcome.scss b/practice/practice-02/src/styles/layouts/_welcome.scss index 97fcf74..8181de4 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-xx-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) { @@ -62,7 +63,7 @@ &__rate-card { @extend %absolute; - @include set-location($top: 103px, $right: 0); + @include set-location($top: 103px, $right: -5px); } &__background-banner { @@ -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); @@ -117,11 +120,11 @@ border-radius: 100px; padding: 4px; margin-left: 10px; - font-size: $fs-xx-sm; } &__text-box-content { font-family: $secondary-font; + font-size: $fs-xx-sm; } &__icon-container { @@ -139,20 +142,19 @@ } &__heading { - margin-top: 12px; + margin-top: 16px; font-size: $fs-xx-lg; text-transform: capitalize; font-weight: 900; - max-width: 530px; } &__underline-img-container { @extend %absolute; - @include set-location($bottom: -27px, $left: 0px); + @include set-location($bottom: -15px, $left: 0); } &__description { - margin-top: 40px; + margin-top: 36px; font-size: $fs-x-md; line-height: 140%; letter-spacing: -0.2px; @@ -162,7 +164,7 @@ &__search-form { @extend %d-flex; - margin-top: 32px; + margin-top: 30px; border-radius: 100px; border: 0.5px solid $black; max-width: 471px; @@ -177,7 +179,6 @@ &__text-input { @include size(100%, auto); - font-size: $fs-md; border: none; &:focus { @@ -269,6 +270,68 @@ display: none; } +@media screen and (min-width: 600px) { + .welcome { + &__container { + max-width: unset; + } + + &__banner-container { + width: unset; + } + + &__main-image { + margin-inline: auto; + position: relative; + padding-left: 50px; + } + + &__food-img:nth-child(2) { + @extend %absolute; + @include set-location($bottom: 75px, $left: 14px); + } + + &__food-img:nth-child(3) { + @extend %absolute; + @include set-location($bottom: -7px, $left: 105px); + } + + &__food-img:nth-child(4) { + @extend %absolute; + @include set-location($bottom: 0, $right: 80px); + } + + &__food-img:nth-child(5) { + @extend %absolute; + @include set-location($bottom: 85px, $right: 15px); + } + + &__review-card { + @extend %absolute; + @include set-location($top: 100px, $left: 10px); + } + + &__rate-card { + @extend %absolute; + @include set-location($top: 103px, $right: 0); + } + + &__content { + width: unset; + padding-inline: unset; + padding-left: 24px; + } + + &__underline-img-container { + @include set-location($bottom: 0px, $left: 0); + } + + &__underline-img { + width: 180px; + } + } +} + @media screen and (min-width: 840px) { .welcome { &__container { @@ -284,11 +347,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; } @@ -304,8 +372,12 @@ line-height: 125%; } + &__underline-img { + width: unset; + } + &__underline-img-container { - @include set-location($bottom: -25px, $left: 8px); + @include set-location($bottom: -10px, $left: 8px); } &__description { @@ -346,7 +418,7 @@ @media screen and (min-width: 1200px) { .welcome { - padding-top: 0px; + padding-top: 0; // Start banner &__banner { @@ -374,11 +446,11 @@ } &__lines-background { - @include set-location($top: -85px, $right: -98px); + @include set-location($top: -85px, $right: -96px); } &__review-card { - @include set-location($top: 160px, $left: -47px); + @include set-location($top: 160px, $left: 1px); } &__rate-card { @@ -386,11 +458,11 @@ } &__food-img:nth-child(2) { - @include set-location($bottom: 108px, $left: -68px); + @include set-location($bottom: 108px, $left: -18px); } &__food-img:nth-child(3) { - @include set-location($bottom: -29px, $left: 102); + @include set-location($bottom: -29px, $left: 151px); } &__food-img:nth-child(4) { @@ -411,10 +483,18 @@ padding-top: 81px; } + &__heading { + max-width: 530px; + } + &__text-box { padding-left: 1px; } + .delivery-text-box { + font-size: $fs-xxx-lg; + } + &__description { margin-top: 29px; } 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