zqwang39 / homework2--page-layout-card-design Goto Github PK

JR Academy----Full Stack Online Course

Project 2

Overall:

Make 3-5 travel Cards by using BEM class naming, HTML, SCSS, using display-grid to adjust the page layout and flex-box to adjust small parts. ※Please be informed, in order to use grid display meanwhlie present a better look, there are few cards are actually disabled(background pics only), the styles for those disabled cards are saved in disable.scss.

Purpose:

Pratice two page layout methods of display-grid and flex-box.

Requirments:

Plan the HTML structure, use BEM to name the Class Name.Try to use SCSS method to decorate the cards and use display-grid and flex-box to control the page layout.The page must be present and the app must successfully render a home page with clear design and usable across modern desktop, tablet, phone browsers. No errors should display in console.

Note:

1. Pay attention to the Name Convention, use a professional Name Convention, and make all Class names meaningful, pay attention to issues such as capitalization, typo, etc.
2. When submitting, pay attention to the index.html file used on the homepage and the file structure
3. Pay attention to the planning file structure, css, images shoule be placed in a separate folder