Product Landing Page - Build a Product Landing Page

I was able to complete the landing page but I do have a question regarding CSS and the Nav. I tried to style it with borders, hover and colors but no matter what I try it isnt changing. Can someone please explain why and how to correct it?

Your code so far

<!-- file: index.html -->


<!DOCTYPE html>
<html>
  <head>
    <link rel='stylesheet' href='styles.css' />
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <head>
  <header id="header">
    <nav id="nav-bar" >

<nav id="nav-bar" >
        <a id="Audiobooks" class="nav-link" href="#Audiobooks">Audiobooks<a/>
       
        <a id="Platforms" class="nav-link" href="#Platforms">Platforms<a/>
        
        <a id="Compatibility" class="nav-link" href="#Compatibility">Compatibility<a/>
      </nav>

              <img src="https://img.freepik.com/premium-vector/audiobook-logo-template-literature-ebooks-audio-format_349999-1240.jpg" width="100" height="" alt="audiobooks" id="header-img"/>
              <section id="#Audiobooks">
        <h2>What is an audiobook?</h2>
          <p>An audiobook is a book read by another person and listened to on any supported audio device. Examples include: Cell Phones, Tablets, Computers and Other Smart Devices</p>
        <h4>Is listening to an audiobook the same as reading?</h4>
          <p>This is a common question with many different opinions however Matthew Traxler (University Of California) states that our mental machinery processes audiobook information the same as if we were reading from a book. It is true that listening to an audiobook uses more auditory processing than that of visual processing but the results are the same according to a study by Beth Rogowsk (Bloomsburg University).</p>
        </section>
        <section id="#Platforms">
          <h2>Audiobook Platforms</h2>
          <p>As mentioned previously, there are plenty of devices that support audiobook and mobile applications out there that make accessability a breeze for users.</p>
          <p>The most common applications include Amazon's Audible, Nook Audiobooks, and websites like audiobooks.com. It should be noted that some audiobook services do have a subscription fee. For example audible charges for credits (1-3) but there can also be a montly subscription fee of $14.95 for 1 credit a month.</p>
          <iframe width="475" height="325" src="https://www.youtube.com/embed/T7xuRvN9PoM" id="video"></iframe>
        </section>

      <section id="#Compatibility">
        <h2>History and Compatibility</h2>
          <p>In 1932 the first form of audiobooks were made called "talking-books" which were used to help the blind. As technology has continued to advance we have moved on from audio records and proceeded into the digital age.</p>
          <p>Whether your on the go or on your computer, there is a way to listen to audiobooks. Android and Apple devices have applications as mentioned in the platform section that allow people to listen to audiobooks. Other websites such as Youtube and Tokybooks also have audiobook for listening pleasure. Music streaming applications such as spotify are now sharing audiobooks as well as podcast.</p>
        </section>

        <h3>Newsletter Sign Up</h3>
        <p>Please feel free to sign up for our weekly newsletter by submitting an email below</p>
        
<form id="form" action="https://www.freecodecamp.com/email-submit">
        <input id="email" type="email" name="email" placeholder="Shoot Us An Email"> </input>
        <input id="submit" type="submit" value="Submit">
      </form>
<footer>All rights reserved <span><a href="https://www.freecodecamp.com" target="_blank">Freecodecamp<span></a></footer>

</html>
/* file: styles.css */
body {
  background-image: linear-gradient(to right, rgba(255,153,192,1), rgba(0,204,204,1));
}

@media (max-width:500px){
    body{
        width: 400px;  
    }

header {
  position: fixed;
  top:0px;
  display: flex;
flex-direction: row;
flex-wrap: none;
width: 100%;
left: 0;
}

body {
  font-family: Arial, Helvetica;  
}

nav {
  border:solid black;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

You have too many mistakes here:

  • head element is not closed
  • duplicate ID nav-bar (forbidden)
  • two times the opening nav tag
  • nav-link elements improperly closed
    .
    .
    .

With all these issues you can not set ut the CSS validly.

Sorry for late response after I went over it a 2nd time I caught most of the mistakes you mentioned and have since corrected them

I made the corrections as shown below and checked with html validator for errors.

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel='stylesheet' href='styles.css'>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Landing Page</title>
  </head>
  <header id="header">

<nav id="nav-bar">
        <a id="Audiobooks" class="nav-link" href="#Audiobooks">Audiobooks</a>
       
        <a id="Platforms" class="nav-link" href="#Platforms">Platforms</a>
        
        <a id="Compatibility" class="nav-link" href="#Compatibility">Compatibility</a>
      </nav>

              <img src="https://img.freepik.com/premium-vector/audiobook-logo-template-literature-ebooks-audio-format_349999-1240.jpg" width="100" height="75" alt="audiobooks" id="header-img">
</header>
              <section id="#Audiobooks">
        <h2>What is an audiobook?</h2>
          <p>An audiobook is a book read by another person and listened to on any supported audio device. Examples include: Cell Phones, Tablets, Computers and Other Smart Devices</p>
        <h4>Is listening to an audiobook the same as reading?</h4>
          <p>This is a common question with many different opinions however Matthew Traxler (University Of California) states that our mental machinery processes audiobook information the same as if we were reading from a book. It is true that listening to an audiobook uses more auditory processing than that of visual processing but the results are the same according to a study by Beth Rogowsk (Bloomsburg University).</p>
        </section>
        <section id="#Platforms">
          <h2>Audiobook Platforms</h2>
          <p>As mentioned previously, there are plenty of devices that support audiobook and mobile applications out there that make accessability a breeze for users.</p>
          <p>The most common applications include Amazon's Audible, Nook Audiobooks, and websites like audiobooks.com. It should be noted that some audiobook services do have a subscription fee. For example audible charges for credits (1-3) but there can also be a montly subscription fee of $14.95 for 1 credit a month.</p>
          <iframe width="475" height="325" src="https://www.youtube.com/embed/T7xuRvN9PoM" id="video"></iframe>
        </section>

      <section id="#Compatibility">
        <h2>History and Compatibility</h2>
          <p>In 1932 the first form of audiobooks were made called "talking-books" which were used to help the blind. As technology has continued to advance we have moved on from audio records and proceeded into the digital age.</p>
          <p>Whether your on the go or on your computer, there is a way to listen to audiobooks. Android and Apple devices have applications as mentioned in the platform section that allow people to listen to audiobooks. Other websites such as Youtube and Tokybooks also have audiobook for listening pleasure. Music streaming applications such as spotify are now sharing audiobooks as well as podcast.</p>
        </section>

        <h3>Newsletter Sign Up</h3>
        <p>Please feel free to sign up for our weekly newsletter by submitting an email below</p>
        
<form id="form" action="https://www.freecodecamp.com/email-submit">
        <input id="email" type="email" name="email" placeholder="Shoot Us An Email">
        <input id="submit" type="submit" value="Submit">
      </form>
</html>

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.