Recreate the mock-up below as accurately as possible, utilising flexbox, positioning, and principles of UI/UX design.
- Your website should display three products. Position the products using css flexbox.
- Define at least 3 links for your navigation bar.
- Don't forget the
footerelement. - Make sure to use semantically correct HTML elements. i.e.
<header>,<nav>,<main>,<footer>etc. - Use the mock-up as a guide, but feel free to add your own style and flair.
- Make the page fully responsive
- Create and link more pages
Font: Work Sans from Google Fonts
⌛ Give it a minute. As long as you see the orange dot
on top, CodeBuddy is still processing. Refresh this page to see it's current status.
This is what CodeBuddy found when running your code. It is to show you what you have achieved and to give you hints on how to complete the exercise.
| Status | Check |
|---|---|
 |
Header should contain title The Speaker Shop |
| Status | Check |
|---|---|
 |
Navigation should contain 3 links |
| Status | Check |
|---|---|
 |
Flexbox is used to lay out the products |