jackhuynh95 / smilegate_fe_test

Project Vuejs

Brief

Tecnologie

● HTML ● CSS / SCSS ● VueJs / Vite

Minimum technical requirements

1. Init a Vue or React or Angular project with SCSS
2. Don’t use any UI CSS framework/library
3. Create a simple layout with header and content
4. The header includes a logo, title, and 3 buttons, docked on the top
5. The content is a list of cards with image and text, there are gaps between cards
6. The image‘s ratio is always 3/2 regardless of image’s size
7. If the text is too long, it should be truncated
8. When resize the browser, the number of cards on a line will change (ie: screen size width 1920px -> 5 cards on a row, 1280 -> 4 cards on a row, 720 -> 3 cards, less than 576 -> 1 card), change font size in browser settings should trigger the change of the number of cards (default font-size of most of the browser is 16px, then the screen size is 1920px => 5 cards on a row, then we change the default font-size of the browser to 20px => 4 cards on a row. Note that this is just an example)
9. Try to make the UI consistent on different browsers

✨ 28_05_2024