Product Landing Page - Build a Product Landing Page

HTML-CSS
1

i cannot get the image to move or do anything at all. i set width in height in the img tag and now its all squashed. this is bothering me, could someone point me to the lesson that covered this stuff specifically?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<meta name="viewport" content="width=device-width,initial-scale=1.0"

<link rel="stylesheet" href="styles.css">
 
 <div id="page-wrapper">
    <header id="header">
 
 <div class="image"><img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="original trombones logo" width="300px" height="300px"></div>
  <nav id="nav-bar">
        <ul>
          <li><a class="nav-link" href="#features">Features</a>
          <li><a class="nav-link" href="#features">How it Works</a>
          <li><a class="nav-link" href="#features">Pricing</a>
        </ul></nav></header>
    <div class="container"</div>
    <section id="hero">
      <h1>hand-crafted home made masterpieces</h1>
      <form id="form" action="https://www.freecodecamp.com/email-submit">
          <input name="email" id="email" type="email" placeholder="Enter your email address" required="">
          <input id="submit" type="submit" value="Get Started" class="btn"></form>
</section>
    <div class="container">
      <section id="features">
        <div class="grid">
          <div class="icon">
            <i class="fa fa-3x fa-                  fire"> </i></div>
          <div class="desc">
               <h1> best materials</h1>
        <p> we use only the best material; it sounds good to say</p></div>
    </div>
      </section>
      <section id="how-it-works"></section>
      <section id="pricing"></section>
    </div>
    <section ="how-it-works">
      <iframe id="video" height="315" src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen=""></iframe></section>
    <section id="pricing"> 
      <div ="product" id="tenor">
        <div class="level">tenor trombone</div><h2>$600</h2>
        <ol>
              <li>Lorem ipsum.</li>
              <li>Lorem ipsum.</li>
        <li>Lorem ipsum dolor.</li>
        </ol>
        <button class="btn">select</button>
      </div>
      <div class="product" id="bass">
            <div class="level">Bass Trombone</div>
            <h2>$900</h2>
            <ol>
              <li>Lorem ipsum.</li>
              <li>Lorem ipsum.</li>
              <li>Lorem ipsum dolor.</li>
              <li>Lorem ipsum.</li>
            </ol>
            <button class="btn">Select</button>
          </div>
      <div class="produict" id="valve"></div></section>
    <footer><span>copyright whenever go ahead and try me</span></footer>
  </div>
  </div>
</body>
</html>
      
      

/* file: styles.css */
*{
box-sizing: border-box;
margin: 0;
border: solid black 1px;
}

#header {
  display: flex;
  flex-direction: row;
  position: fixed;
  top: 0;
  align-items: center;
  justify-content: space-around;
  min-height: 75px;
  z-index: 10;
  width: 100%;
  background-color: transparent;
  
  
}
body {
  display: block;
  background-color: grey;
 font-family: tahoma;
  
}
a{
  text-decoration: none;
  color: #000;
}
 .image { 
height: 200px;
width: 200px;
background-color: #eee;
}


#hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: 50px;
  height: 200px;
}
.container {
  max-width: 1000px;
  width: 100%;
}
nav {
  display: block;
  font-weight: 400;
}
nav > ul {
    width: 35vw;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
#features .desc{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

Your browser information:

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

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

The meta element needs closing.

The trombone image needs to take up the whole width of the page.
This is why it is appearing squashed.
Try using a parent container and setting the width to 100%.
Happy coding

3

lol! when i saw your response in the email i only saw you referencing the viewport meta…so i jumped into it-google, etc because apparently idk whats going on. then i come here and read you said much more. I am my own worst enemy lol. thank you for your help!

1 Like
4

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