Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

Im all ticks!! but im stuck on one thing and have been for hours.
“24. Your Product Landing Page should use at least one media query.”
What am i missing/doing wrong??? ive tried so many different ways…

Your code so far

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


/* file: styles.css */

Your browser information:

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

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

how do i attach my code?

3

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.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

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

4 
:root{
  --white: white;
  --grey: grey;
  --pale: hsl(200, 50%, 50%)
}

*,
::before
::after{
  box-sizing: border-box;
}

body {
  color: linen;
 background-color: var(--pale);
 font-family: Raleway;
 font-size: 1.5rem;
}

#header-img{
  width: 140;
  object-fit: contain;
}

#nav-bar{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: fixed;
  width: 100%;
  top: 0;
  background-color: var(--grey);
  position: fixed;
}

.nav-links {
  display: flex;
  list-style: none;
}

.nav-links a{
  text-decoration: none;
  color: var(--white);

}

.logo-container{
  display: flex;
  align-items: center;
}

.the-product{
  font-size: 50px;
  margin-left: 50px;
  font-weight: 700;
  font-family: fantasy;
}

h1{
  color: black;;
  font-family: Anton;
  align-items: center;
}

h2{
  color: black;;
  font-family: Anton;
  align-items: center;
  text-decoration: underline;
  margin-bottom: 10px
}

.quote {
  color: #00beef;
  font-size: 1.6rem;
  text-align: center;
  font-family: "Raleway", sans-serif;

section::before{
  display: block;
  content: " ";
  margin-top: 100px;
  height: 100px;
  visability: hidden;
pointer-events: none;
}

section{
  margin: 40px 20px;
  text-align: center;
}

.icon{
  color: var(--grey);
  margin-right: 30px;
}

#feature {
  text-align: left;
  max-width: 800px;
  margin: auto;
}

.feature {
  display: flex;
  align-items: center;
  justify-content: center; 
  margin: 20px;
  font-family: montserrat;
}

iframe {
  width: 100%
}

  .header {
    width: 20px;
    display: flex;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
  }
---(</>)---
@media only screen and (max-width: 550px){
  .header {
    width: 20px;
  }
}
---(</>)---
5 
<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./styles.css"></link>
  <title>Mental Health</title>
</head>

<body>
   <header id="header">
   <nav id="nav-bar">
    <div class="logo-container">
      <img 
      id="header-img" 
      class="logo" 
      alt="Menatl Health logo" 
      loading="lazy"
      width= "150"
      src="https://img.freepik.com/premium-vector/mental-health-wellness-logo_1251502-1281.jpg" >
</img>
<span class="the-product">Mental Heath</span>
</div>
  <ul class="nav-links">
    <a class="nav-link" href="#first" >Excerises</a>
    <a class="nav-link" href="#second" >Awareness</a>
    <a class="nav-link" href="#third" >Health</a>
    </ul>
    </nav>
    </header>

      <h1>Mental Health is just as important as our physical health</h1>
<p>Here are some resources to help with how to look after your mentals</p>
<div class="author">
          <p class="author-name">By Shian Beaumont</p>
          <p clas="publish-date">March 27, 2025</p>
      <section class="#Mental-Exercises" id="first">
        <h2 class="list-subtitle">Mental Exercises</h2>
        <p class="first-paragraph-ME"> 
          Brain exercises are designed to maintain and strengthen cognitive abilities such as working memory, processing speed, and executive function.</p>
<p>A lot of cognitive scientists suggest that claims about the effects of brain training are often exaggerated and misleading. However, there is an abundance of research showing that how certain types of activities *can* be beneficial for your brain's health.<p/>
<p>Here are three exercises you can try at home;</p>
<ul>
  <li><p>Taking care of your body! Exercise & proper nutrition, helps you become less susceptible to cognitive declines associated with ageing.</p></li>
<li><p>Challeng your brain to draw a map of your town or neighborhood from memory.
Include major streets, side streets, and landmarks.</p></li>
<li><p>Try switching hands while you are eating dinner or when you are trying to write something down. It will be difficult, but that is exactly the point.</p></li>
<img src="https://th.bing.com/th/id/R.6778412cde1986b12ffba3f24325cea6?rik=%2bJKv3QdLTavCzA&pid=ImgRaw&r=0" 
id="writing-image" 
      class="writing-image" 
      alt="woman writing" 
      loading="lazy"></img>
    </section>

<section class="Mental-Awareness" id="second" >
  <h2 class="mental-awareness">Mental Awareness</h2>
  <p class="second-paragraph-MA">Become more observant of your surroundings and senses. In your day-to-day activities, try to take stock of the environment, your senses, and your breathing.</p>
  <p> People often rush between day-to-day activities needlessly. This decreases mental awareness and can contribute to feelings of stress. Try to pause between activities.</p>
  <blockquote class="mental-awareness-quote">
   <hr />
   <p class="quote">
  "There is hope, even when you tell your brain there isnt"- John Green</p>
   <hr />
   </blockquote>
    <p>A short video message from Bubble Light Productions to highlight Mental Health Awareness Week 2017.
Mental Health Awareness Week 2017 takes place from the 8th-14th of May across the UK.</p>
            <iframe id="video" src="https://www.youtube.com/watch?v=8oog-4t9n2A" class="mental-health-transparency-video" alt="mental-health-transparency-video" loading="laxy"></iframe>
  </section>

  <section class="mental health" id="third">
    <h2 class="mental-health">Mental Health</h2>
    <p class="third-paragraph-MH">Prioritise your mental helth; you deserve to be happy.</p>
<p>Sleep well: Good quality sleep is a key factor in supporting your mental health and wellbeing. It can help with your mood, your memory and your ability to manage stress.</p>
<p>Staying in contact with people is also important. Talk to people you work with or friends about how you're feeling.</p>
<img src="https://th.bing.com/th/id/OIP.Hr7L7oSIaH1YPH7-J68TdwHaE7?w=600&h=399&rs=1&pid=ImgDetMain" 
id="sleeping-image" 
      class="sleeping-image" 
      alt="man sleeping" 
      loading="lazy"></img>
      </section>

     <form 
     id="form" action="https://www.freecodecamp.com/email-submit">
      <h2 class="feedback">Feedback</h2> 
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="Email" ></input>
<input id="submit" type="submit" action="https://www.freecodecamp.com/email-submit">
</input>
    </form>
   </body> 
  </html>
6

I’ll close this post down . Please open one topic for each query.