Product Landing Page - Build a Product Landing Page

I have everything done but am failing the last two tests for media query and css flexbox. As far as I am aware I definitley have working code for both but am still failing the test. I have no extensions except “walk me extension” and “walk me master extension” and am running through google chrome

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale="1.0">
    <meta http-equiv="x-UA-compatible" content="ie=edge">
    <title>Product Landing Page: Hypersoft Computer</title>
    
    <link rel="stylesheet" href="styles.css">
  </head>

  <body>

    <header id="header">Product Landing Page

    <img id="header-img" src="https://images.pexels.com/photos/1334597/pexels-photo-1334597.jpeg?auto=compress&cs=tinysrgb&w=600" alt="alt0"></img>


    <nav id="nav-bar">

      <a class="nav-link" href="#introduction">Introduction</a>

      <a class="nav-link" href="#summary">Summary</a>
      
      <a class="nav-link" href="#conclusion">Conclusion</a>
    </nav>

    </header>

    



    <script src="index.js"></script>
    <link rel="stylesheet" href="styles.css"/>

    <h1 id="introduction" class="header">2021 Apple 11 Inch iPad Pro</h1>

    

   <iframe width="696" height="392" src="https://www.youtube.com/embed/hH0OpS_PDgM" title="2021 Apple 11 Inch iPad Pro Demo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen id="video"></iframe>

    <h1 id="summary" class="header">Summary</h1>
    
    <h2 id="conclusion" class="header">Conclusion</h2>

    <form id="form" action="https://www.freecodecamp.com/email-submit">

    <input id="email" placeholder="Input email:" type="email" name="email">

    <input id="submit" type="submit"></input>

    

    </form>

     


  </body>
</html>
/* file: styles.css */
*{padding:auto;
  margin:auto;
  width:100%;
  position:relative;
  font:Arial Narrow, sans-serif;
  font-size:24;
  background:white;
  color:black;
  z-index:2;
 
}

.nav-link{text-align:center;
          
}


a{text-align:left;
  margin:0.1px;
  z-index:3;
  
}

#nav-bar{z-index:1;
        position: fixed;
        top: 0px;
        }

h1, h2{
  text-align:center;
}

form {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px;
}

@media only screen and (max-width: 768px) {
  .flex-container {
    text-align: center;}

Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

The media query doesn’t have the closing curly brace }.

I changed it to: @media only screen and (max-width: 768px) {
form {
text-align: center;}
}

stil failed. should i just try a computer with 0 extensions probably?

I fixed it:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Product Landing Page: Hypersoft Computer</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header id="header">
    <h1>Product Landing Page</h1>
    <img id="header-img" src="https://images.pexels.com/photos/1334597/pexels-photo-1334597.jpeg?auto=compress&cs=tinysrgb&w=600" alt="alt0">
    <nav id="nav-bar">
      <a class="nav-link" href="#introduction">Introduction</a>
      <a class="nav-link" href="#summary">Summary</a>
      <a class="nav-link" href="#conclusion">Conclusion</a>
    </nav>
  </header>

  <script src="index.js"></script>

  <h1 id="introduction" class="header">2021 Apple 11 Inch iPad Pro</h1>

  <iframe width="696" height="392" src="https://www.youtube.com/embed/hH0OpS_PDgM" title="2021 Apple 11 Inch iPad Pro Demo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen id="video"></iframe>

  <h1 id="summary" class="header">Summary</h1>
    
  <h2 id="conclusion" class="header">Conclusion</h2>

  <form id="form" action="https://www.freecodecamp.com/email-submit">
    <input id="email" placeholder="Input email:" type="email" name="email">
    <input id="submit" type="submit">
  </form>
</body>
</html>

CSS:

* {
  padding: auto;
  margin: auto;
  width: 100%;
  position: relative;
  font-family: 'Arial Narrow', sans-serif;
  font-size: 24px;
  background: white;
  color: black;
  z-index: 2;
}

.nav-link {
  text-align: center;
  padding-left: 10px;
}

a {
  text-align: left;
  margin: 0.1px;
  z-index: 3;
}

#nav-bar {
  z-index: 1;
  position: fixed;
  top: 0;
}

h1,
h2 {
  text-align: center;
}

form {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px;
}

@media only screen and (max-width: 768px) {
  form {
    text-align: center;
  }
}
1 Like

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like

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