All solutions

Hey there ! I would love some feedback, especially in my use of the picture element and whether this properly made use of images provided. Any other feedback would also be massively appreciated. I did use a small amout of JS as I'm learning this currently.

Thanks for taking the time to review my code ! Have a nice day !

Hi there 👋, I’m Dilhan Boca, and this is my solution for this challenge. 🚀

🎁 Features:

• A mixture of Grid, Flexbox and Position.
• Progressive Web App (PWA) support. 📱🌐
• Codebase is well-maintained and formatted using Prettier. 💻
• Resemblance with the original design. 🎨
• Media queries were used. 📱
• Responsive heights for cards used. ✨

Please advise on: I have not been able to get the box-shadow to go around the curved corners on the cards. I tried to achive this with pseudo-elements, but to no avail. If someone could show me how to do this or where I could learn I would be grateful.

Hello there !

All Lighthouse, all elements were 100% except for Performance on mobile devices, which came in at 91%📊.

• Codebase is well-maintained and formatted using Prettier. 💻
• Resemblance with the original design. 🎨
• Built with SASS

Any suggestions on how I can enhance this solution or achieve even better performance are welcome!

Thank you. 😊✌️

Hey there,

Would love to get some feedback if my use of semantic HTML was appropriate. Thanks !

Hey there ! Would love some feedback on this task. Especially as to whether my use of sematic html was appropriate. If there is anything wrong with my code, I'd be more than happy to take on your suggestions. Thanks so much !

I found this project difficult in parts. I would’ve liked to use more semantic html; but wasn’t sure where this would have been appropriate, so I opted for divs instead.

CHAT GPT recommended using the section element for “hero__section”, “banner__absolute”, “middle__section”, and “bottom__section”; although I’m not sure if this would have been the correct approach. It also suggested using the article element within “flex__container” for each of the three boxes (which are shaped with grid, by the way.) If anyone could provide some more info on the proper use of semantic html in this context, that would be great !

For the “middle section” I had to position: relative; and z-index: -1 while also playing with margin-top / padding-top in order to get into to smoothly sit below the purple section above with the curved bottom. If anyone has any ideas on how to do this more efficiently, I would love to find out.

I had difficulty using the fonts with the @font-face method; I tried this in multiple iterations, but still couldn't get it right. If someone could provide some help with this, it would be much appreciated. Eventually, I used the links in my header as a way around this difficulty.

I would love to hear any feedback, critical or otherwise.

Regards, Dilhan Boca [email protected]

Would like to know if my layout is good --- as well as all the questions below:

Was the use of clamp appropriate -- is this the best way to use this feature ? (line 122) I was aiming to have the h2 get slightly bigger as the screen grows. I believe this was achieved. Any feedback would be welcomed.

When you have a flexbox -- and you set gap to a percentage -- what is this percentage based on ? Is it based on the width of the parent element ?

I have used the picture element to change the different background images. I have used Kevin Powell's YouTube Short as the inspiration for this: https://www.youtube.com/shorts/d9i68C628Nk.

However, I have left px as the default unit on this. Should it be changed to rem or em ?

Hello,

For the design itself, I used a 3-column grid, transitioning into one-column @ 48em (768px). Please advise if this would be the sensible breakpoint for such a project.

Also, when you hover over the buttons -- there is a slight movement in the rest of the container -- what is the standard way of avoiding this?

Thanks so much for your feedback, Dilhan Boca

Hey there !

If anyone could please provide some feedback, I would really appreciate it :) I believe I've taken account of all the previous feedback I received for this challenge, however I did find the ARIA labelling a little confusing -- would love to know if I did this properly !?

The slideout footer at the bottom is meant only as a reference point for people to contact me personally. Let me know if this is inappropriate on front-end mentor.

Regards, Dilhan Boca

Hello, Thanks for providing me with some feedback:

1. Was the use of pos-absolute with the centering-translate feature appropriate ?
2. How could I better structure my CSS file ?
3. Was my use of semantic HTML ok ?
4. What else could I improve on ?

This is my second project, Thanks for your advice.

Hello,

Feedback welcome for my first frontend mentor task. I'm new to web-dev and I'm keen to learn more. I imagine there are easier ways to complete this task using CSS Grid (which I'm currently learning) -- is this correct?

Also, could someone comment on whether the sylistic changes I made on smaller screen sizes (via media queries) are correct ? Is the read-me file ok ? All other feedback is more than welcome. Thanks !