Project #3 Landing Page

Hi,
I am having two issues, and I cannot for the life of me figure them out. They are part of the Landing Page Project.

#1 Horizontal Navigation Bar
HTML:

<header id="header">
      <img id="header-img"><!--User Story 2-->
      <nav id="nav-bar">
        <ul>
          <li class="nav-link"><a href="#first-section">section1</li>
          <li class="nav-link"><a href="#second-section">section 2</li>
          <li class="nav-link"><a href="#third-section">section 3</li><!--User Story 4 5-->
        </ul>
      </nav><!--User Story 3-->
    </header><!--User Story 1-->

CSS:
/*User Story 1*/
#header{
  display: flex;
  justify-content: space-between;
}
/*User Story 2*/
#header-img{  
}
/*User Story 3*/
#nav-bar{
  display: flex;
  flex-direction: row;

I am using flexbox, yet I do not understand how/why my three option remain vertical and do not line up horizontally.

#2 Video

I cannot get the video to work - I am only doing it on CodePen - I don’t know if that influences at all?

HTML

    <main>
      <iframe src="https://www.youtube.com/watch?v=AXrHbrMrun0">        
      </iframe>
    </main>

No CSS, since I have not done any work there yet. I get an error message and it says youtube has rejected the connection (I am on Spanish computer, so maybe not a standadized error message)

As ever, many thanks to anyone who helps!
All the best!

1 Like

#1 Horizontal Navigation bar
Yes your are using Flexbox .The navigation bar has a CS with flex - direction : row ; The flexbox items are ordered the same way as the text direction , along the main axis. * so the options will be vertical.

#2 Video
First of all let me distinguish this two elements that i think has not well covered in Freecodecamp <iframe> and <video>.An iFrame (a frame within a frame)is a component of an HTML element that allows you to embed documents, videos, and interactive media within a page and video is used to embed video content in a document, such as a movie clip or other video streams.
When someone uploads a video to YouTube , they can choose whether or not others will be able to embed their video around the web. If they chose not to allow it, no matter what you do, you won’t be able to embed it into your site.

2 Likes

Hi Sajjad,

Thanks so much for your reply.

#1 - So how do I get them to line up horizontally? I have tried both flex-direction: row and :column but both remain the same!

#2 - Oh! I see! So its an issue that the original user who uploaded the video does not let me embed the video! I understand!

Thanks and regards,

1 Like

You must list in the navigation barto be displayed inline using the following CSS:

nav li {
      display:  inline;
}

This means select all li elements inside nav elements and display it horizontally.
Good Luck!

1 Like