I had this one lying around for a few weeks, but I'd noticed I was struggling to understand flexbox. I got into learning and tweaking and trying and eventually created this. I'm clueless about the JavaScript and how to properly implement this. I'll continue looking, but I was just too ecstatic having finally finished the css (apart from a hover/focus-effect on the button). To be continued :)
Dean Hope
@deanhopesAll comments
- @katrien-sSubmitted about 4 years ago
- @torhuusSubmitted about 4 years ago@deanhopesPosted about 4 years ago
Of the submissions I've been studying, this is the best one. Great job.
The only thing I can spot missing is the backgrounds.
0 - @paulh-afkSubmitted about 4 years ago@deanhopesPosted about 4 years ago
Initially came to steal how you positioned the illustration @ 375px but I will leave with some feedback.
When you resize to around 417px the design breaks quite a lot & would be worth looking into that.
Your code in .container is also quite hard to read. I love your little animations though 👍
Marked as helpful2 - @chri55Submitted about 4 years ago
I tried to make the mock-up image's position match the design files and I found out css overflow properties are not friendly lol.
@deanhopesPosted about 4 years ago10/10
What you did well
- Hero image flipped works better than the original
- Much better spacing between the main header, body text, and button on the hero
- I'm hoping to get to your level soon as I'm not great at coding but have a background in design
Criticism
- You've given the navbar more breathing room but it might be too spacy now?
- Is there enough space between the "Why choose easybank" section and the hero? I think the original is slightly better to the eye.
- Same with "latest articles". More 'whitespace' needed.
Awesome work I think. Something to aspire to :)
2 - @ubong-sSubmitted about 4 years ago@deanhopesPosted about 4 years ago
8/10
What you did well
- Almost perfect, well done
- Good sense of layout
Room for improvements
- Everything is ever so slightly larger than it should be. This pushes everything down and creates a larger page.
- White space between the header and body text is slightly off. Make sure you measure this in the future.
- Main colours slightly off (but this might be the screenshot so my apologies if so)
- Navbar text size too big
- "Simple bookmarking" in the "features" section should be black when active
- "Download the extension" cards too big
You're pretty much there. It's those tiny changes that will get you to 'pixel perfect'.
1