Product landing page flexbox issues

This is the LINK to my project
(https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-product-la)](https://)

I cant seem to pass my last user story yet im using css flexbox

Can you post your code here. The code in the link will only be available for you.

I’m trying to but apparently I can only post two links since im a new user

<style>

#header{

  display:flex;

  justify-content:flex-start;

  flex:0 1 auto;  

  height:100vh;

  width:100px;

  font-family:san-serif;

  top:0px; 

}

p{

  font-size:20px;

}

@media (max-width: 200) { 

  p{

    font-size:10px;

    }

  }

</style>
<link rel="stylesheet" href="styles.css" />

<html>

<header id="header">

 <nav id="nav-bar">

  <br><h>BIC-KENYA</h>/<br>

<a href="#header"class="nav-link">Partners</a>

<a href="#content"class="nav-link"> Mission</a>

<a href="#content"class="nav-link">Goals</a>

<a href="#footer"class="nav-link">Progress</a>

</nav>

<img src=https://www.pexels.com/photo/close-up-photo-of-colored-pencils-4117257/.jpg"

alt="BIC-KENYA" 

id="header-img">

<div id="gallery"></div>

</header>

<main>

 <body id="body">

   <h1 id="header">Our Mission </h1>

 <p>

 BIC is now i kenya and in all stores near you.Give your child a strong fondation with BIC and watch our child grow

 </p>

   <h2 id="content">Partners</h2>

   <p>We have partnered with Unilever to work with the nearby shools and donate all the statonery they need to acquire a basic eduation</p>

   <h3 id="content">Goals<h3>

     <p>we are working to expand BIC-AFRICA  while simoultaneously ensuring that all children have access to basic education</p>

      <h4 id="footer">Progress<h4>

     <p>we now have branches in all major cities in Kenya with the aim of making our services more available to our dear customers</p>

  </title>

   </main>

     <video

  id="video"width="200px"controls>

         <source src="https://www.youtube.com/watch?v=OrJ4rPSlrlI">

         

 <footer>

<form 

id="form" 

action="https://www.freecodecamp.com/email-submit"

>

<input 

name="email" 

id="email" 

type="email" 

placeholder="xyz123@gmail.com"

required>

</input>

<br>

 <input

type="submit"

 value="submit"

 id="submit"

 class="">

 </input>

 </form>

 

</body>

</html>

Have you linked the css to the html file using the link tag:

<link href="styles.css">

yes i already tried that

When you paste code make sure you use three backticks before and after the code block so that the code can be seen.
Code with backticks:

 <h1>This is a heading</h1> 

Code without backticks(`):

This is a heading

Ive added it for you.

Pardon me i’m not sure i fully understand you but ,was the issue with my code was the backticks?

No the backticks are used for formatting code blocks on the forum
Code without the backtick’s are not readable. You dont need to worry about this now, I am checking your code

Thanks I now get what you meant by backticks

What happened to the opening quote of your src attribute. When I add that the tests pass. Also the css should be used in a separate tab assigned, you will find it on the top(“styles.css”)

ok thanks let e correct my code and get back to you

i made the correction but i still cant pass could there be any external factors or something that could be the issue

Can you give your current code.

After making changes to the <img> src, also put the css in a separate file.
I have showed the file in the screenshot. Then the tests should pass

i have done that but only my flexbox isnt passing

External css doesn’t use a <style> element

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