Responsive Landing Page - Flex Box

Hello! Amazing work there~ 😀

I've got a few suggestions:

• To align the logo and navbar links, you can add this code to your .nav-bar

display:flex;
align-items:center;
justify-content:space-between;

• I don't think you have set the hover state for your social media links/icons. Anyhow, I would usually use the SVG code itself instead of img for these since I can more freely change the icons' color. You can refer to this 😁
• Looks like your .display-img images couldn't fit inside a row on laptop size. You can fix this by setting flex:1; to your picture tags within instead of setting width:25vw;. Then, on mobile, simply use a media query to change that to flex:100vw;.
• For your .show navbar, you can use media query to override/reset .show styling on desktop sizes. 🖊
• You should use <button> for the hamburger button since it's a well, button. 😂 I will let screen reader users to know it's one. Check this out 😉.
• The 'Learn More' text should be links 🔗 instead so they should be using <a> tags.
• The social media links should have a text telling screen reader users what each link is for. You can use the aria-label attribute on the <a> tags and set it to 'Facebook' or other values, then leave the alt attribute empty (This is what I would do 😀). You can check this out.

1. Set a media query to change the layout of the .nav-bar.

Some other things you should look into:

• Look into the accessibility and HTML issues raised here.

I hope this was helpful, Shalom!

Hi Joe, congratulations on finishing your second challenge here. A quick suggestion, try completing the newbies and some simple junior challenges as this would prepare you to handle the more difficult challenges.

Possible solutions:

1. You can add the following CSS rules

.nav-bar  {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

from here you can add more rules to make it look as you want. 2. I believe you selected the contact with the nth-child correctly but you set the rules wrong, try this instead

li:nth-child(4) {
    background-color: #fff;
}

li:nth-child(4) a {
    color: var(--Very-dark-blue);
}

this is because the rules set in the .nav-item a selector is more specific than the one you had set. For more info look up CSS Specificity.

Hello Joe,

Some suggestions from me:

gaps fixing:

.Random-img { display: block; }

.box{ display: block;}

hover fix (works for me):

.socials a:hover { }

At your Egg image you used id="egg-img" for <img> and <source> element too. There should be just one unique id.

Anyways good job on your second challenge! :)