Product Landing Page

Hello fellow campers,

I have just created my Product Landing Page for Responsive Web Design. I am mostly happy with it, and I can already past the tests.

My issue is that the whilst the .nav-link and #title-headers appear to be linking correctly in HTML, when on the live server it does not appropriately behave and jump the correct position.

My initial thoughts are that it could be to do with the size of the project being small, not having much space to actually ‘jump’ to and therefore creating a strange effect.

Any feedback would be greatly appreciate, thanks for taking the time.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>AI Chat Coach Services Page</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div id="page=wrapper">
    <header id="header">
        <img 
        src="https://app.brandmark.io/v3/brand/design-svg.php?id=C30AA14DB8AA4E8C9C222D0FD4E2DAC6&type=logo-files&template=color"                                           
        id="header-img" 
        alt="AI Chat Coach logo" 
        />
        <nav id="nav-bar">
            <ul>
              <li><a class="nav-link" href="#feature-section">Features</a></li>
              <li><a class="nav-link" href="#business-benefits-section">Benefits</a></li>
              <li><a class="nav-link" href="#testimonials-section">Testimonials</a></li>
            </ul>
    </header>

    <section id="hero">
        <h2>Find Your Coach. Find Your Class.</h2>
        <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 id="feature-section">
    <section id="features">
        <h1>Discover the Power of AI: Unlock Your Potential with Personalized Small Group Tutoring</h1>
          <h2>Join our online community and learn how to harness AI tools to enhance your productivity, creativity, and professional growth.</h2>
        </section>
      </div>
    
      <div id="business-benefits-section">
    <section id="business-benefits">
        <iframe width="560" 
      height="315" 
      id="video"
      src="https://www.youtube.com/embed/P_CHTabYa-0?si=xW3YXjl_QEQ8L02D" title="YouTube video player" 
      frameborder="0" 
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
      allowfullscreen></iframe>
    </section>
    </div>

    <div id="testimonials-section">
    <section id="testimonials" class="testimonials-container">
        <div class="testimonial" id="testimonial-1">
            <div class="level">Testimonial</div>
            <h2>Sarah, Writer</h2>
            <p>"Before joining these tutoring sessions, I was overwhelmed by AI 
              technology. Now, I feel confident using AI tools to save time and 
              improve my workflow. Highly recommended!"</p>
        </div>
        <div class="testimonial" id="testimonial-2">
            <div class="level">Testimonial</div>
            <h2>John, Writer</h2>
            <p>"Thanks to these small group tutoring sessions, I've been able to 
              make better-informed decisions for my company's growth by leveraging 
              AI-driven business planning tools. Worth every penny!"</p>
        </div>
        <div class="testimonial" id="testimonial-3">
            <div class="level">Testimonial</div>
            <h2>Emily, Researcher</h2>
            <p>"Since enrolling in these tutoring sessions, I've seen a remarkable 
              transformation in my research work. These sessions have been a 
              game-changer for my academic career!"</p>
        </div>
      </div>
    </section>
    </div>
  </body>
  </html>
:root {
  --primary-color1: #06B5F0;
  --secondary-color1: #FAC600;
  --text-color1: #464242;
  --font-family: Arial, sans-serif;
}

html {
  box-sizing: border-box;
}

body{
  font-family: var(--font-family);
  line-height: 1.6;
  margin: 0;
  padding:0;
}

#page-wrapper {
  position:relative;
  padding-top: 80px;
}

header {
  background-color: var(--primary-color1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 10px;
  position:fixed;
  top: 0;
  left:0;
  right:0;
}

#header-img {
  width: 350px;
  max-width: 100%;
  max-height: auto;
}

#nav-bar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#nav-bar li {
  display: inline;
  margin-right: 20px;
}

.nav-link {
  text-decoration: none;
  color: white;
  font-weight: bold;
  font-size: 2rem;
}
.nav-link:hover {
  background-color: var(--secondary-color1); /* Change the background color on hover */
  border-radius: 3%;
  
}


@media (max-width: 500px) {
  header {
    flex-direction: column; /* Stack items vertically */
    text-align: center; 
    padding:20px 0;
  }

  #nav-bar ul {
    flex-direction: column; /* Stack navigation links vertically */
    margin: 0; /* Remove default margin */
  }

  #nav-bar li {
    margin-right: 0; /* Remove margin between navigation items */
    margin-bottom: 10px; /* Add vertical spacing between navigation items */
  }

  #hero {
    margin-top: 100px; /* Adjust margin for better spacing */
  }

  #hero input[type='submit'] {
    margin: 15px 15px; /* Adjust margin for better spacing */
  }
}

#hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height:auto;
  margin-top: 400px;
  padding: 20px;
  
}

#hero > h2 {
  margin-bottom: 20px;
  overflow-wrap: break-word;
  font-family: var(--font-family);
  font-size: 1.8rem;

}

#hero input[type='email'] {
  max-width: 100%;
  padding: 10px;
}

#hero input[type='submit'] {
  max-width: 150px;
  width: 90%;
  height: 30px;
  margin: 15px 0px;
  border: 0;
  font-size: 1.2rem;
  color: var(--text-color1);
  background-color: var(--secondary-color1);
}

#hero input[type='submit']:hover {
  font-weight: bold;
  transition: background-color 1s;
}

#email::placeholder {
    text-align: center; /* Center-align the placeholder text */
}


@media (max-width: 650px) {
  #hero {
    margin-top: 120px;
  }
}

#features {
  width: 100%;
  margin: 20px 0px;
  padding: 20px;
  color: var(--text-color1);
  text-align: center; 
}

#features h2 {
  font-size: 1.5rem; 
}

/* Media query for smaller screens */
@media (max-width: 768px) {
  #features {
    margin: 30px 15px; /* Adjust margin for smaller screens */
  }

  #features h2 {
    font-size: 1.2rem; /* Reduce font size for smaller screens */
  }

}

#business-benefits{
  width: 100%;
  margin: 50px 15px;
  color: var(--text-color1);
  text-align: center; /* Center-align the text on smaller screens */
}

.testimonials-container {
  display: flex;
  justify-content: space-between; /* Adjust this to control spacing between testimonials */
  align-items: flex-start; /* Align testimonials at the top of the container */
  flex-wrap: nowrap; /* Prevent testimonials from wrapping onto the next line */
  padding: 20px;
}

.testimonial {
  width: calc(33.33% - 20px); /* Adjust width and margin as needed */
  margin: 0 10px;
  text-align: center;
  background: #f9f9f9;
  padding: 20px;
  border: 1px solid #ddd;
}

.level {
  font-weight: bold;
  color: #555;
}

h2 {
  font-size: 1.2rem;
  margin: 10px 0;
}

p {
  font-size: 1rem;
}

hello and welcome to fcc forum :slight_smile:

share this “step/exercise url” as well, thanks and happy coding :slight_smile:

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