Blogr Landing Page using HTML, CSS and Javascript
Design comparison
Solution retrospective
I didn't expect but it took me almost a week to get this done. Thought this was easy but it was not ! And also I over-complicated the header section a bit.
Please give me some feedback about the site. I got no idea how it will render in 4k displays.
Community feedback
- @utkuonursahinPosted over 3 years ago
Instead of doing dropdowns with Javascript, you can use CSS focus:within property just as I did. What focus:within does is when user clicks a dropdown button he simply focuses that button right ? So focus:within opens a new dropdown menu and dropdown will shown until focus loses so when user clicks out of the dropdown element, dropdown will be closed. Also you should design your header buttons' focus state. For example go your site hit tab and see what happens. Also you used absolute positioning for main SVGs. It worked but there are too much space between SVGs and text contents. I think this is not what expected and I didn't manage to this section too :( Eventually you did a great job, just keep going, keep coding. Find your weakness and improve them. Have fun with CSS :)
Marked as helpful2@Soumyajit2000-webPosted over 3 years ago@utkuonursahin thanks. Those were some very nice suggestions. I will try those.
0 - @palgrammingPosted over 3 years ago
Looks good ⭐⭐⭐⭐⭐ and you are right things look simple until you find all the little hidden traps of projects like this. But you did a good job on it the only thing I wonder is should the sub menus close when the user opens a different sub menus. But congrats for not giving up and producing a nice result on this challenge
1@Soumyajit2000-webPosted over 3 years ago@palgramming thanks for the feedback, I am definitely going to update the logic in future.
0
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