About my product of landing page project

HTML-CSS
1

I just need help to understand why my video cannot play and as i make my header position to fixed which completes my project correctly, my entire web page will not scroll anymore, but when i make the header position relative, it works well… Please help, i need to submit this project, so i move on to the next… https://codepen.io/Karons101/pen/GegLjm

2

You are targeting the header element but you have more than one header element so it sets the styles for both. Give your top header a class and set the styles on that.

You have some issues with your HTML see if you can fix them.

  1. Some elements are not opened and closed correctly. It is much easier to see in a code editor which visually shows how the matching opening and closing tags fit. One option I like to use on Codepen is to change the Syntax Highlighting to one that shows errors in nesting. If you go to your Codepen settings and pick Oceanic Dark for the Syntax Highlighting, it should mark the tags in red.

  2. You have more than one main element, there should only be one main element per document.

  3. You are using the same id more then one time, ids should be unique and only used one time.

  4. For the video the url is wrong it should be https://www.youtube.com/embed/7oSj8isblTQ

3

Thanks a lot for the help, still cannot fix the header… can U just give me an example please…

4

Just delete the header tag at line 47, it serves no purpose anyway. Then set the header to be fixed.

I get that you want to just move to the next project but I would suggest not rushing this. Take some time and see if you can’t improve the page a bit. The page is not at all responsive and the CSS needs some work.

  1. Avoid using ids for styling, they are not needed and will just make your CSS unmaintainable in the long run.
  2. If elements share styles they should be given a class.
  3. Name your id/classes something meaningful, #div1 through #div9 are not useful names and makes your code unmaintainable and impossible to reason about. Naming is hard, but not as hard as remembering what #div7 is two months from now.
  4. If you just randomly order your CSS you’re going to get into trouble. It makes it impossible to find anything and the cascade will not work as intended.

Don’t do this:

#div1, #div2, #div3, #div7, #div8, #div9 {
  width: 215px;
  margin: 40px;
}
#div4, #div5, #div6 {
  width: 300px;
  margin: 40px;
}
5

Thank U so much, it worked out well, U are so kind, like U said, i just don’t need the pass, i need the true knowledge… Thank U.