Product Landing Page - Build a Product Landing Page

HTML-CSS
1

It does not take my code for … Your #nav-bar should always be at the top of the viewport…and now I seem to have broken the responsiveness, it loses the background color when I stretch the window:
Describe your issue in detail here.

**@media (max-aspect-ratio: 1/1) {
li {
height: 5vh;
}
header {
position: fixed;
width: 100%;
top: 0;
left: 0;
padding: 1em;

display: flex;
flex-direction: row; align-items: center;

text-transform: uppercase;
border-bottom: 4px solid #fdb347;
border-top: 4px solid #fdb347;
background-color: #f6d29c}

html{align: center}

body{
font-family: ‘Baskervville’, serif; color: #20B2AA; background-color: #fad3bf;
margin: 1px padding: 2px}

h2{align: center}

.info{text-align: center}

ul {list-style-type: none;
}

  .box {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
}

footer{align: center}
span{align: center}**

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

<header id="header">
<!--logo-->
<img id="header-img" src="https://i.ibb.co/dMwsqpJ/logo.png" alt="logo" border="0">
<!--logo-->

<!--nav-bar-->
<nav id="nav-bar">
<ul>
<li><a href="#About" class="nav-link">
  About</a></li>

<li><a href="#Contact-us"  class="nav-link" >Contact us</a></li>

<li><a href="#Products"  class="nav-link">Products</a></li>
</ul></nav>

</header>

<!--nav-bar-->
<!--header-->



</section>
<!--form-->
<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="Submit" class="btn"/>
</form>

<!--form-->

<!--info-->
<div class="info" id="About">
<ul>
<h2>About us</h2>
<h2>Local Farmers based in the UK
</h2>
We are local farmers operating from Cubria UK. We run our family business from a smallholding in the Lake District. Between family  members we take care of the plants directly in our green houses and  only use the best  organic fertilizers</ul></div>

<div class="info" id="Contact-us">
<ul>
<h2>Contact us</h2>
<h2>Have a look at our producst and get in touch</h2>
Cumbria, LA12, United Kingdom
Tel:........</ul></div>

<div class="info" id="Products">
<ul>
<h2>Products</h2>
<h2>This season we are focussing on Suculents</h2>
We recommend the powerful healling properties of Aloe Vera and the exhuberant beauty of suculents.
</ul></div>

   <!--video-->   
 <section id="container" class="container">
   <h2>The wonderful healing properties of Aloe Vera</h2>
   
   <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/9BAEBq66t2M?si=ad8kC4pH0riJK80R" title="YouTube video player" frameborder="3px" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>
</iframe>
</section>
<!--video-->

<!--products-->
     
<div class="box" >
  <div class="title">
<H2>Aloe Vera</h2></div>
</div>
<div class="price"><h3>£15.00</h3></div>

<img id="Aloe-Vera" src="https://i.ibb.co/vYg8DhM/Aloe-Vera.png" alt="Aloe-Vera" border="1"></a>
</div>

<section id="button">
<button class="btn">Select</button>
</section>
          

<h2>Purple Suculent</h2>
<div class="price"><h3>£25.00</h3></div>

<img id="Purple-Suculent" src="https://i.ibb.co/6R7M7DP/Purple-Suculent.png" alt="Purple-Suculent" border="1"></a>
<section id="button">
<button class="btn">Select</button></section>


<h2>Suculent Lamp</h2></div>
</div><h3>£35.00</h3></div>
<img src="https://i.ibb.co/Jk9G8Qz/Suculent-Lamp.png" alt="Suculent-Lamp" border="1"></a>

<section id="button">
<button class="btn">Select</button></section>
</div>
<!--products-->

<div id="footer"><hr></hr>
<footer><ul>
<li><a href="#">Privacy</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Contact</a></li>
</ul></div><hr></hr>
          
<span>Copyright 2023 Plant Lovers</span>
        </footer>
      </div>
    

  
  </body>
</html>

/* file: styles.css */
@media (max-aspect-ratio: 1/1) {
  li {
    height: 5vh;
  }
header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  padding: 1em;

display: flex;
flex-direction: row;  align-items: center;

text-transform: uppercase;
border-bottom: 4px solid #fdb347;
border-top: 4px solid #fdb347;
background-color: #f6d29c}

html{align: center}

body{
font-family: 'Baskervville', serif; color: #20B2AA; background-color: #fad3bf;
margin: 1px padding: 2px}

h2{align: center}

.info{text-align: center}

ul {list-style-type: none;
}


      .box {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 100%;
        padding: 10px;
        box-sizing: border-box;
    }


footer{align: center}
span{align: center}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/118.0

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

You didn’t close the media query.

I don’t know where you meant to close the media query but you need to do it before the header CSS. Not that it makes a ton of sense anyway.

@media (max-aspect-ratio: 1/1) {
  li {
    height: 5vh;
  }
}

  • You have errors in the CSS. You can use a validator.

  • I would strongly suggest you format the code. Each style should be on a separate line and they should end with a semi-colon.

  • align is not a valid property.

3

#nav-bar should always be at the top of the page or if it can be located somewhere else, such as at the bottom, it depends on your design preferences and the user experience you want to offer on your website. Both locations are possible and may have their advantages and disadvantages:

4

Hello!
This is missing a curly closing bracket. Every opening one, requires a closing one.

I think this could fix the issue.

Try it. :slight_smile: