Product Landing Page - Build a Product Landing Page

Tell us what’s happening:
Need help keeping img in header and keeping the header from blocking the h1 element. Also any other advice is welcome.

Your code so far

<!DOCTYPE html>
<html lang="en">
    <link rel="stylesheet" href="styles.css" />
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>One Piece Training Camp Prodcut Landing Page</title>
      <header id="header">
        <img id="header-img" src="" alt="straw hat logo">
  <nav id="nav-bar">
    <ul id="nav">
      <li><a class="nav-link" href="#about">About</a></li>
      <li><a class="nav-link" href="#pricing">Pricing</a></li>
      <li><a class="nav-link" href="#contact">Contact Us</a></li>
<!--navbar end-->

        <h1>Want to be strong and skilled enough to set sail in the New World? Join the Straw Hats Training Club!</h1>
        <section id="about">
          <p>We specialize in training up and coming pirates in various forms of combat and skills. Our specialties include but are not limited to: swordsmanship, sniping, weather control, leadership, devil fruit mastery, haki training of all types, and combat including punching and kicking. Whether you've never thrown a punch or can beat someone in one punch we teach any level of experienced fighters. Choose between our three available levels.</p>
          <section id="pricing">
            <div class="square">
        <h3>Supernova Level</h3>
        <ul>This level is for beginners looking to shape the world in the future. Included are:
          <li>-Basics of Armament and Observation Haki</li>
            <li>-Weapons Expertise</li>
            <li>-Basic Assasin Skills</li>
              <li>-Free Ship Coating</li>
          <div class="square">
        <h3>Emporer Level</h3>
        <ul>This level is for intermediate pirates looking to run the New World. Included are:
          <li>-Unlock Kings Haki(if applicable)</li>
          <li>-Future Sight and Ryou Training</li>
          <li>-Devil Fruit Tips & Tricks</li>
            <li>-How to Lead A Grand Fleet</li>
              <li>-Haki Weapon Inffusion</li>
          <div class="square">
        <h3>Pirate King Level</h3>
        <ul>This level is for those looking to be at the top of the pirate world. Included are:
          <li>-Devil Fruit Awakening</li>
            <li>-Kings Haki Infussion(if applicable)</li>
              <li>-Read Poneglyphs</li>
              <li>-Access to Top Secret Germa Technology</li>

<section id="video-section">
  <p>Check out a quick explanation on Haki</p>
  <iframe id="video" width="560" height="315" src="" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<!--video end-->

          <footer id="contact">
            <p>For any questions or concerns send us an email below</p>
            <form id="form" action="">
            <input id="email" placeholder="Email" type="email" name="email">
            <input id="submit" type="submit" ></input>
            <!--footer end-->


  font-family: Lucida Console, monospace;
  line-height: 1.2;

header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-block: 15px;
  background-color: #00b9ff;
  height: 14%;
  color: white;
  border: 1px solid white;
  z-index: 1;
  position: fixed;
  width: 100%;

#nav {
  list-style: none;
  display: flex;
  gap: 25px;
  margin-right: 50px;

li {
  list-style: none;

img {
  margin-right: 50px;
  width: 15%;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  mix-blend-mode: darken;

body {
background-color: #a90000;
text-align: center;
margin: 0;

  margin-top: 100px;
  justify-content: center;
  align-items: center;
  display: flex;
  text-align: center;

.square {
  border: solid #0549a5;
  border-radius: 10px;
  margin: 20px;
  max-width: 400px;
  min-width: 300px;
  background-color: #dfd500;

button {
  background-color: #0549a5;
  color: white;

#video-section {
  margin: 50px 0;
  max-width: 100%;

footer {
background-color: #ffb300;
border: 1px solid black;

#submit {
  background-color: #0549a5;
  color: white;

@media (max-width: 600px) {
  .nav-link {
    font-size: 2.5vw;

Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

You can create a REPL project like this for better visualization in terms of code and output.

Can you please elaborate the question?

My img in the header won’t stay within the border. Also the header covers the top part of the page. So half the text in h1 element is covered. I hope that clarifies.

to line up the h1 underneath the navigation you need to make the body have a flex layout with flex-direction of column.

here’s how that would look

1 Like

Thank you for your help!

1 Like

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