help! tried so many different ways of writing this but it keeps coming back telling me that the nav-bar should always be at the top of the viewport…what am I doing wrong?
Your code so far
<!-- file: index.html -->
/* file: styles.css */
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.0 Safari/605.1.15
Challenge Information:
Product Landing Page - Build a Product Landing Page
Hi thank you. I tried this. I reposted the codepen and adding my code below…
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset='UTF-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen and (min-width: 480px)" href="styles.css">
<title>Product Landing Page</title>
</head>
<body>
<div id="page-wrapper">
<section id="navsection">
<header id="header" class="nav-header">
<div class="logo">
<img src="https://img.freepik.com/premium-vector/fitness-logo-letter-f-gym-fitness-f-letter-sign-vector-template_754537-5784.jpg?w=1800" id="header-img" alt="header-img" width="150" height="150">
</div>
<nav class="nav-bar" id="nav-bar">
<a class="nav-link" href="#Hiit" id="#Hiit">Hiit</a>
<a class="nav-link" href="#Circuit-Training"id="#Circuit-Training"> Circuit Training</a>
<a class="nav-link" href="#strength-training" id="#strength-training"> Strength Training</a>
<a class="nav-link" href="#Yoga" id="#Yoga">Yoga</a>
</nav>
</header>
</section>
<main id="main-doc">
<section id="hero">
<h1>Fitness Friend</h1>
</section>
<img src="https://onnitacademy.imgix.net/2015/11/absworkout1.jpg" href="hero-img" id="hero-img" alt="hero-img">
</section>
<section id="Hiit">
<h1>
Hiit Lessons
</h1>
<p>
Join our instructors for live or recorded video tutorials for Hiit classes for High Intensity Interval Training.
</p>
<iframe width="420" height="315" id="video"
src="https://www.youtube.com/watch?v=adDGcsdu8WY">
</iframe>
</section>
<section id="Circuit-Training">
<h1>Curcuit Training</h1>
<p>
Join our instructors for live or recorded video tutorials of Cicuit Training. Weights or body weight training, there is something for everyone to get their blood pumping and their heatbeat raised.
</p>
<iframe width="420" height="315" id="video"
src="https://www.youtube.com/watch?v=adDGcsdu8WY">
</iframe>
</section>
<section id="strength-training">
<h1>Strength Training</h1>
<p>
Join our instructors for live or recorded video tutorials of Cicuit Training. Weights or body weight training, there is something for everyone to get their blood pumping and their heatbeat raised.
</p>
<iframe width="420" height="315" id="video"
src="https://www.youtube.com/watch?v=adDGcsdu8WY">
</iframe>
<iframe width="420" height="315" id="video"
src="https://www.youtube.com/watch?v=A5CWlen5N2I&t=433s">
</iframe>
</section>
<section id="Yoga">
<h1>Yoga</h1>
<div class="Yoga" id="Yoga">
<p>
Join our instructors for live or recorded video tutorials of Cicuit Training. Weights or body weight training, there is something for everyone to get their blood pumping and their heatbeat raised.
</p>
<iframe width="420" height="315" id="video"
src="https://www.youtube.com/watch?v=adDGcsdu8WY">
</iframe>
<iframe width="420" height="315" id="video"
src="https://www.youtube.com/watch?v=adDGcsdu8WY">
</iframe>
<iframe width="420" height="315" id="video"
src="https://www.youtube.com/watch?v=LZNcKO0N76I">
</iframe>
</section>
<section id="Signup">
<form id="form" action="https://www.freecodecamp.com/email-submit">
<h1>Sign Up for Our Channel</h1>
<input type="email" id="email" name="email" placeholder="email address" required>
</input>
<input type="submit" id="submit" action="https://www.freecodecamp.com/email-submit"></input>
<button id="subscribe">Subscribe</button>
</form>
</section>
</div>
</main>
</body>
</html>
I’ve edited your code for readability. 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.
This worked! Thank you. Can you tell me why it specifically should not be applied to the link elements in this case? I am finding conflicting information when searching for a reason to avoid this for future code.
