Skip to content
Submitted about 2 years ago

Sunnyside-agency-landing-page

Oubaid•180
@oubaidelmoudhik
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

This is my first whole-page design! I can't believe I got here from coding a simple QR card! It was hard but extremely fun. I used everything I learned and more. My questions as always: -What could I improve? -How do I change the width of the logo svg?? I tried to set width, min-width, and max-width, but none of them worked. -Was my choice of making the two pics in main as an <img> inside a div right? or should I make them appear as a div's background? Thank you!!

Community feedback

  • Dusan Brankov•860
    @dusan-bPosted about 2 years ago

    Hello Oubaid,

    I just looked at your code and I like your solution.

    To answer your question, you can easily change the size of inline SVG images by adding viewBox and removing the height attribute. Then, you define the size you want by changing the value of width.

    Here's an example with a width of 200px:

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 124 24" width="200">
  ...
</svg>

    Just make sure that the last two values of viewBox are the width and height of the original SVG image.

    Regarding the main navigation, the menu links should always live inside nav, otherwise they are not properly accessible to assistive technology users. Also, your menu button should be a button element, not a div.

    There's always space for improvement, but overall I think you made a good job.

    Keep it up, and happy coding!

    Marked as helpful
    1
    Oubaid•180
    @oubaidelmoudhikPosted about 2 years ago

    @dusan-b Thank you very much!! I will implement your feedback into my code!

    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