Skip to content
OverviewSolutions
11
Comments
3
Alex Martos P.
@AlexMartosP

All comments

  • Lesley Kimutai•565
    @LeskimSubmitted about 2 years ago

    👋🏾 The dropdown section of the nav still not working ... any help on this / comments on how better I would have handled the challenge will be much appreciated.

    Intro Section with Nav Using React

    1
    Alex Martos P.•280
    @AlexMartosPPosted about 2 years ago

    Great work!

    First of all, you should have href="#", so that the website don't refresh.

    There are som ways you can fix the navbar, you could add a state called "isActive" and when you click a link the state changes with the clicked link for example "Company".

    Then you can do this: <ul classNamse={`nav-list_secondary ${isActive === "Features" ? "open" : ""}`}

    Another way you can do this, is by creating two different states, one for each nav link that have a drop down and then check like above but only checking if "isActive" is true or false.

    If you want to use vanilla JS like as you do, you can do that to. I changed your code so that it should work (not tested):

      const showDropDown = (e) => {
    e.target.nextElementSibling.classList.toggle("open");
  };

    Here is my solution if you want to take a look: https://www.frontendmentor.io/solutions/intro-section-with-dropdown-navigation-made-with-reactjs-AUet3fha6z

    Marked as helpful
    0
  • Alex Martos P.•280
    @AlexMartosPPosted about 2 years ago

    Great work man!!

    I see you use semantic HTML and that is very good.

    To change style on hover state you add :hover to the selector you want to change when hovering it.

    For example on your "Learn more button" you would do like this: main__learn:hover {}.

    I think you have done a good job on the responsive part, what I would do is increase the width when the image goes to the top. Otherwise the text area will become very small :)

    1
  • Arturo Gonzalez•30
    @Arthur-GnzSubmitted about 2 years ago

    Could you give me feedback? (Anything is accepted)

    flexbox

    4
    Alex Martos P.•280
    @AlexMartosPPosted about 2 years ago

    Good job! I see that you tried using the font from the design. To use it you have to.

    1. Get the Google fonts via the link here: https://fonts.google.com/specimen/Outfit?query=outfit
    2. Get the font family by font-family: 'Outfit', sans-serif (sans-serif is the fallback)

    Other thing you can think about is using padding/margin instead of <br> and "font-weight" instead of <strong>

    But again, good job!

    Marked as helpful
    0