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">
<head>
<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>
</head>
<!--navbar-->
<body>
<header id="header">
<img id="header-img" src="https://cdn.shopify.com/s/files/1/0570/3640/6943/products/onepiecelogo2copy.png?v=1660094885" 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>
</ul>
</nav>
</header>
<!--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">
<h2>About</h2>
<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>
<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>
<button>Select</button>
</ul>
</div>
<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>
<button>Select</button>
</ul>
</div>
<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>
<button>Select</button>
</ul>
</div>
</section>
<!--video-->
<section id="video-section">
<p>Check out a quick explanation on Haki</p>
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/WYzw0wmX9aQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>
<!--video end-->
<!--footer-->
<footer id="contact">
<p>For any questions or concerns send us an email below</p>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input id="email" placeholder="Email" type="email" name="email">
<input id="submit" type="submit" ></input>
</form>
</footer>
<!--footer end-->
</body>
</html>
-----CSS-----
html{
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;
}
#pricing{
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/108.0.0.0 Safari/537.36
Challenge: Product Landing Page - Build a Product Landing Page
Link to the challenge: