Table of contents
Overview
The challenge
Users should be able to:
- View the optimal layout for the page depending on their device’s screen size
- See hover states for all interactive elements on the page
Screenshot

Links
My process
- Build the HTML with semantic markup.
- Add CSS for styling and responsiveness.
- Test the layout for browser inconsistencies.
Built with
- Semantic HTML5 markup
- Reset CSS
- CSS custom properties
- Flexbox
What I learned
- Applying rules to
that prevent the display of scrollbars, since all elements had to fit in the viewport.<body>
1 2 3 4 |
body { overflow: hidden; // ... } |
- Using SVG as a background image, resizing and stretching it to match the design.
1 2 3 4 5 6 7 8 9 10 |
body { background-image: url("./../images/bg-desktop.svg"); background-size: 92vw 100vh; background-position: left top; background-color: var(--main-bg-color); background-repeat: no-repeat; -apple-background-size: 100% auto; background-attachment: fixed; // ... } |
Continued development
- Get a better understanding of SVG.
Author
- Website – Angélique D. Faye
- Frontend Mentor – @angelique-df