@font-face; media queries, flexbox; custom properties
Design comparison
Solution retrospective
The two big challenges for me were the layout design, with respect to the front card and the card behind. Also the manipulation of the SVG provided, for mobile responsiveness. I'd probably need more research about SVGs for future projects, but I still think I came very close to the design version.
What challenges did you encounter, and how did you overcome them?Cropping the SVG as per mobile specification was difficult. In the end I had to manipulate the container it was in, not the properties of the SVG.
What specific areas of your project would you like help with?Is there a specific technique I should've used to crop the SVG? I feel the way I achieved it was a bit of a hack.
Community feedback
- @Zy8712Posted 7 months ago
Hi there! Your site looks great!
To answer your question, the way you implemented the svg is perfectly fine.
Another way you could have do this is that you set the
svg-container
to the desired width and height and then used the svg as the background. Alternatively, you could have also imported the svg using an<img>
tag and then just set the size of the container (or image) and the useoverflow: hidden
(similar to what you already did).Aside from that the only other things I'd change/add are:
- using semantic tags like
<main>
so its better for accessibility - reduce the amount of divs used, as some weren't really needed
- use
<h1>
instead of<h2>
because header tags are meant to be used in order<h1>
to<h6>
without skipping. There can only be one<h1>
tag per page, but multiple of the others. The tags come with default font sizes which can be modified usingfont-sizes
in css
Hope you find this feedback useful 👍
Marked as helpful1@Devs-advocatePosted 7 months ago@Zy8712 Wonderful feedback thanks. Will implement your suggestions in my next challenges.
0 - using semantic tags like
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord