Skip to content
Submitted almost 4 years ago

Multi Page site - lots of animation and UI treats.

David Payne•1,205
@dpayne713
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Designo multi-page website
  • HTML
  • CSS
  • JS
5guru

Design comparison

SolutionDesign

Solution retrospective

I am going to continue on with this project working on dynamically generated 'body' content so the header and footer stay in place and the rest generates. I also plan to update the 'locations' page to have better maps instead of just the placeholder images.

Happy to hear any notes / suggestions / formatting-bugs discovered.

Community feedback

  • Matt Studdert•13,611
    @mattstuddertPosted almost 4 years ago

    Amazing work on this challenge, David! You've done a really good job. Grace has made some great points for the mobile layout. Your layouts scale up/down really well for different device sizes, so you've done really well on the responsive side of things.

    You can also tell you've paid a lot of attention to detail, which is brilliant. I like the added animations and hover effects. They add a nice polished feel to the project!

    One thing I noticed on the form is that you use a span element to give the label/placeholder visual effect. Instead of span elements, I'd recommend using a label elements with for attributes tying each label to the corresponding input for accessibility purposes. At the moment, people who use screen reader software wouldn't know what each field is for.

    I hope that helps. Keep up the great work!

    2
    David Payne•1,205
    @dpayne713Posted almost 4 years ago

    @mattstuddert

    Thanks Matt, I will change the spans in the form - to be honest it completely slipped my mind!

    0
    Matt Studdert•13,611
    @mattstuddertPosted almost 4 years ago

    @dpayne713 no problem!

    0
  • Grace•31,270
    @grace-snowPosted almost 4 years ago

    Hey David, Really great work on this, I like it a lot!

    I'm viewing on mobile and have noticed a few small layout issues you may want to fix:

    • There's horizontal overflow on most pages, most noticeable in those ones off the homepage like Web design. When I scroll sideways there's a block of whitespace to the right

    • The hero text on homepage is touching the button underneath - probably needs some margin

    • I haven't seen the mobile design images so hard to tell if it's a bug or how the design is, but sometimes text goes closer to the edges of the screen than say images or other blocks. Usually designs try to keep consistent space on both sides.

    Anyway, that's all from me for now. Nice work again ☺

    2
    David Payne•1,205
    @dpayne713Posted almost 4 years ago

    @grace-snow

    Thank you for the heads up on these mobile issues you found. I'll take a look at these.

    0

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