Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

easybanking-frontend-mentor using tailwind and react

#react#tailwind-css
abhikr4545ā€¢ 280

@abhikr4545

Desktop design screenshot for the Easybank landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


How to make hero image overflow only in one direction acc. to the design given ?

Community feedback

P
Emmilie Estabilloā€¢ 5,540

@emestabillo

Posted

Hey @abhikr4545, looks good, congrats! Solving the issue with the background would involve removing overflow: hidden to the parent section, and then adding a higher z-index to the nav as follows:

position: relative;
    z-index: 1;
    background-color: white;

Just a couple more thoughts:

  • I suggest increasing the breakpoint because the layout looks tight at 768px. The hero paragraph is touching the phone image and the side by side columns have little breathing room. The text on the articles are also getting cut off and the images are stretched.
  • articles, footer list items, and social icons could be wrapped in <a> tags

Hope this helps!

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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