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

Easybank Landing Page with Tailwind.css and Alpine.js

#accessibility#tailwind-css
Wendy 1,640

@wendyhamel

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


Pfew, a lot of layout shifts! Nice practice for complicated layouts with background images, grids and overlapping sections.

Community feedback

Anna Leigh 5,135

@brasspetals

Posted

Hi, Wendy! 👋 Nice job on this one! It responds great, which I know was definitely tricky. 👍

I know next to nothing about Tailwind and Alipine, so I can't comment on your use there. However, poking around the layout I managed to find a few minor things to improve on:

  • I believe the desktop nav links have a gradient on the bottom in the design - not just green. Although there are a few ways to achieve this, I suggest looking into the border-image property in combo with a linear-gradient.
  • The article titles should be links with a green hover state.

Like I said, very minor stuff. Again, great job on this one! 😄

Marked as helpful

1

Wendy 1,640

@wendyhamel

Posted

@brasspetals Thanks for looking at my solution! I didn't see the gradient and didn't notice the links for the article titles. I will take a look!

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