Skip to content
Submitted over 3 years ago

Sunnyside Agency | Technologies uses : HTML CSS JS

adarshvilasakavi•60
@adarshvilasakavi
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Agency landing page
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

I faced difficulty in designing the dropdown navigation for mobile screen. Please suggest me a solution resembling the original layout. Also, provide any other suggestions regarding the UI.

Community feedback

  • The Burrito Doggie•1,260
    @BurritoDoggiePosted over 3 years ago

    Hello adarshivilasakavi!

    I love your effort! It looks really good and and the effects are amazing! I have a small screen but it still fits and works perfectly. I'm not good enough to see any major mistakes, but if you want to improve you can look at the 'report' located above 'adarshivilasakavi's questions for the community'.

    Keep Coding!

                               (•‿•)
    Marked as helpful
    1
  • Chamu•13,130
    @ChamuMutezvaPosted over 3 years ago

    Greetings adarshvilasakavi

    Good job. I have one question , why are you using an old version of html when this can be simplified by using html5? I am referring to this declaration <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">.

    • You could have then made use of semantic html elements like (header, nav, main, footer).
    • the li tag holding the hamburger icon is not in the ordered list which i believe is not correct. See the code below
    <div class="navbar" role="navigation">
      <a href="index.html" class="active"><img src="images/logo.svg" class="nav-logo" alt="logo"></a>
      <ul>
        <li class="nav-item">About</li>
        <li class="nav-item">Services</li>
        <li class="nav-item">Projects</li>
        <li class="nav-item1">CONTACT</li>

      </ul>
      <li class="icon"> <img src="images/icon-hamburger.svg"  alt="toggler" onclick="myFunction()"></li> 
    </div>
    • alt values must provide meaning to assistive technology . Values like logo, image-header , image - are not clear or do not assist those who rely on assistive technology. You can either leave it as alt="" if the image is just for decorative purposes.
    • For the images , look into responsive images . Among other methods , you can use srcset or picture.
    • The items in the footer - i would recommend them to be in an unordered list

    Happy coding

    Marked as helpful
    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