Tell us what’s happening:
I’m getting 2 errors on my project:
- Each .nav-link element should have an href attribute.
Failed: - Each .nav-link element should link to a corresponding element on the landing page (has an href with a value of another element’s id. e.g. #footer).
To me it looks like i have href’s corresponding to id’s further down the page and the links are functional in the preview. Can’t figure out what I’m missing.
I also can’t get my pricing area to move to column 2 with my current code. Thanks.
Your code so far
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=display-width, initial-scale=0">
<title>Product Landing Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header id="header">
<div class="header">
<div class="logo-tm">
<div class="logo">
<img src="https://media.istockphoto.com/id/1311587834/vector/blood-pressure-isolated-icon-illustration.jpg?s=612x612&w=0&k=20&c=6EHyfz5GYb8NMg8nyg7zccZF50zzDbfFwVs5_uo4mvQ=" alt="BP Cuff Logo" id="header-img">
</div>
<div class="tm">
<h1>Under Pressure ™</h1>
<h4>Premium Blood Pressure Cuffs</h4>
</div>
</div>
<div class="navbar">
<nav id="nav-bar">
<ul>
<li class="nav-link"><a href="#about">About</a></li>
<li class="nav-link"><a href="#how-to-use">How to Use</a></li>
<li class="nav-link"><a href="#pricing">Pricing</a></li>
</ul>
</nav>
</div>
</div>
</header>
<main>
<h1 class="title">Best Blood Pressure Cuffs Around!</h1>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<div class="form">
<div class="email-label">
<label for="email">Enter your Email Address Below: </label>
</div>
<div class="email-input">
<input id="email" type="email" name="email" placeholder="Enter Your Email Address Here">
</div>
<div class="submit">
<input id="submit" type="submit" value="Submit" method="post">
</div>
</div>
</form>
<div class="bottom-half">
<div id="about">
<h2>About Us</h2>
<p>Under Pressure ™ was founded in 2013. We believe blood pressure measurement should be accessible, easy, and affordable for people everywhere!</p>
<h2>Quality</h2>
<p>Our cuffs are made from durable materials and are built to last. Each cuff comes with a lifetime warranty. </p>
<h2>Questions?</h2>
<p>If you have any questions or concerns about our products please don't hesitate to call. Our support staff are available Mon-Fri 7am-7pm EST, Sat-Sun 9am-5pm EST.</p>
</div>
<div class="bottom">
<div class="caption-video"
<div class="caption">
<h2 id="how-to-use">How to properly use your blood pressure cuff:</h2>
</div>
<div class="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/wV75pey4u84?si=4UuJmQClMWqSFjLE" id= "video" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
</div>
<div id="pricing">
<div class="pricing-1">
<h3>Single Cuff</h3>
<p>$20 each</p>
</div>
<div class="pricing-2">
<h3>Two Cuffs</h3>
<p>$36 total</p>
</div>
<div class="pricing-3">
<h3>Bulk Purchase</h3>
<p>Discounts available, call for exact pricing.</p>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
/* file: styles.css */
* {
margin: 0;
font-family: Georgia;
}
.header {
width: 100%;
height: 150px;
background-color: rgb(200, 200, 200);
padding-left: 40px;
padding-right: 40px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
}
main {
background-color: rgb(0, 225, 225);
margin-top: 150px;
}
#header-img {
width: 150px;
}
.logo-tm {
display: flex;
}
.tm {
display: flex;
flex-direction: column;
justify-content: center;
Align-items: center;
padding-left: 30px;
}
.header h1 {
padding-bottom: 5px;
}
.header h4 {
padding-top: 5px;
}
ul {
list-style: none;
font-size: 30px;
}
li {
display: inline;
padding-left: 50px;
padding-right: 50px;
}
.title {
text-align: center;
padding-top: 30px;
padding-bottom: 20px;
}
.form {
font-size: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.email-label, .email-input {
padding-bottom: 5px;
}
#email {
height: 1.3rem;
width: 200px;
}
#submit {
height: 1.8rem;
width: 100px;
}
.bottom-half {
margin: 20px 40px;
}
#about h2 {
padding-bottom: 10px;
}
#about p {
font-size: 20px;
padding-bottom: 25px;
}
#how-to-use {
padding-top: 50px;
padding-bottom: 15px;
}
.bottom {
display: grid;
grid-template-columns: 600px 300px;
}
.caption {
display: grid;
grid-column: 1 / 2;
}
.video {
display: grid;
grid-column: 1 / 2;
}
#pricing {
display: grid;
grid-column: 2 / 3;
}
#pricing h3 {
font-size: 22px;
padding-bottom: 5px;
}
#pricing p {
font-size: 18px;
}
.pricing-1 {
height: 125px;
width: 250px;
border: 3px dashed black;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.pricing-2 {
height: 125px;
width: 250px;
border: 3px dashed black;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.pricing-3 {
height: 125px;
width: 250px;
border: 3px dashed black;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
@media screen and (max-width: 1260px) {
li {
padding-left: 12px;
padding-right: 12px;
}
ul {
font-size: 24px;
}
}
### Your browser information:
User Agent is: <code>Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36</code>
### Challenge Information:
Product Landing Page - Build a Product Landing Page
https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-product-landing-page-project/build-a-product-landing-page
. Sometimes I spend so much time trying to figure out all the flexbox stuff I loose track of the simple things.