Skip to content
Submitted almost 3 years ago

Insure Landing Page with SCSS, BEM, CSS Animations, and Vanilla JS

Ken•4,915
@kens-visuals
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Insure landing page
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

This project helped me to experiment with some new ideas about layouts. I've experimented with containers and how to position them correctly, so I can control it from a single place. Another thing that I wanted to accomplish with this project was to add some scroll-reveal animations with JS, I was expecting it to be a lot more complex with Vanilla JS. However, it turned out to be a single API called IntersectionObserver that will help you to add the stuff. I didn't do anything crazy, but definitely got some practice and had some fun with it. That pretty much was the main goal of this project, and I'm glad how it came out. For the future project, I'll most certainly implement similar things. Moreover, I'll try to come up with more complex animations and how to achieve them with Vanilla JS. Super excited about this feature and how it can help to make the website come alive.

Got some feedback, comment it 👨🏻‍💻 Cheers 👾

Community feedback

  • Raymart Pamplona•16,100
    @pikapikamartPosted almost 3 years ago

    Hey, awesome work on this one. The desktop layout looks really great and those animations is really nice and suits well on the design. The site is responsive and the mobile state looks great as well.

    Here are some suggestions for the site:

    • For the .intro selector, I would change the usage of min-height: 65vh into using rem unit so that it will be consistent. At my monitor, the hero-section's bottom part is touching the view plans because my screen is not that tall since I am just using 1366x768.
    • The source from the picture doesn't really need to use the aria-hidden attribute.
    • For me, the hero-image could be a meaningful element since if you read the hero-text, it is all about the image, meaning it paves way to the image.

    FOOTER

    • Each of the a tag for the social media should be using the social media name as the aria-label text, currently all a tag uses social media as the value which is ambiguous for user to where this link would take them.
    • Add an extra aria-hidden="true" on the svg for each of the social media icon.
    • aria-label="footer" is much used rather than secondary. You want the nav to be more clearer for what it will serve to the user. Because there are breadcrumbs usage of nav as well.

    MOBILE

    • It's just an idea if you want. You could create a trap focus on the navbar when toggled. This way, if I toggle the hamburger, even if I use tab again when I am at the last link-item, I would end up on the hamburger again and vice-versa when using shift + tab on the hamburger, I would end up on the last link-item, hence focus trapping. This way, user won't go out of place when such pop ups appear.

    This is a really nice solution to be honest. Usage are really great^^

    Marked as helpful
    0
    Ken•4,915
    @kens-visualsPosted almost 3 years ago

    Thank you @pikapikamart, you've got some good suggestions will, follow up with them ✔️

    1

Please log in to post a comment

Log in with GitHub

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