**Tell us what’s happening: the test says that I do not fill two requirments to pass the test:
Each .nav-link element should have an href attribute.
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 ).
but in my opinion I’ve filled the requierment as all of them have href and everyone is corresponding to the elements on the landing page.
Your code so far
WARNING
The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.
You will need to take an additional step here so the code you wrote presents in an easy to read format.
Please copy/paste all the editor code showing in the challenge from where you just linked.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landing page</title>
<link rel="stylesheet" href="styles.css">
<script src="https://kit.fontawesome.com/5ada82d516.js" crossorigin="anonymous"></script>
</head>
<body>
<header id="header">
<nav id="nav-bar">
<div id="logo-container">
<img
id="header-img"
src="https://i.ibb.co/5hkTrr7/logolandingpage.png"
alt="logo"
/>
<span>Arams Smurf Account</span>
</div>
<ul class="nav-links">
<li class="nav-link"><a href="#feauters">Information</a></li>
<li class="nav-link"><a href="#rating">Ratings</a></li>
<li class="nav-link"><a href="#pricing">Pricing</a></li>
</ul>
</nav>
</header>
<section id="email-section">
<h2>Handmade Smurf Accounts</h2>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input
name="email"
id="email"
type="email"
required
placeholder="Enter your email address">
</input>
<input
type="submit"
id="submit"
value="GET STARTED">
</input>
</form>
</section>
<section class="feauters" id="feauters">
<h2 class="title">Feauters</h2>
<p id="feaut-text"><i id="shield" class="fa-solid fa-shield-halved"></i>Handmade & Safe Accounts</p>
<div class="divider"></div>
<span class="description">Our accounts are safe with a 99.99% guarantee of no ban - and a reliable lifetime warranty to support that! (our operation is private & undetected for many years)</span>
<p id="feaut-text"><i id="shield" class="fa-solid fa-jet-fighter"></i>Auto Delivery</p>
<div class="divider"></div>
<span class="description">Your account will be delivered automatically after your purchase - or contact us on Discord for custom pricing!</span>
<p id="feaut-text"><i id="shield" class="fa-solid fa-cart-shopping"></i>Unmatched Prices</p>
<div class="divider"></div>
<span class="description">Our value proposition is unmatched! we offer the highest quality smurfs at the best possible price and discounts are available for bulk!</span>
</section>
<section class="rating" id="rating">
<h2 class="title">Ratings</h2>
<div class="canvas">
<p class="rat-text"><i>"wow the trade took my 3 minutes really nice guy and an awesome price for the quality, recommending this guy if you need a smurf" - John</i></p>
<p class="rat-text"><i>"Fast smooth trade, definetly trusted and professional. Highly recommended!" - Lilly</i></p>
<p class="rat-text"><i>Awesome guy, bought lvl 30 EUW smurf 42k ip, everything went smooth. Highly recommend! - Hugo</i></p>
</div>
</section>
<section id="league">
<iframe
id="video"
width="560"
height="315"
src="https://www.youtube.com/embed/mDYqT0_9VR4"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen>
</iframe>
</section>
<section class="pricing" id="pricing">
<h2 class="title">Pricing</h2>
<div class="canvas">
<div class="country">
<img
class="price-pic"
src="https://i.ibb.co/b247XDF/pngwing-com.png" />
<p id="price-title">EU West (EUW)</p>
<ul class="price-list">
<li>Level 30</li>
<li><b>Unverified Email</b></li>
<li>Fresh MMR</li>
<li>Ranked-ready</li>
<li><b>LIFETIME WARRANTY</b></li>
</ul>
</div>
<div class="country">
<img
class="price-pic"
src="https://i.ibb.co/RHMCLSL/north-america.png" />
<p id="price-title">North America (NA)</p>
<ul class="price-list">
<li>Level 30</li>
<li><b>Unverified Email</b></li>
<li>Fresh MMR</li>
<li>Ranked-ready</li>
<li><b>LIFETIME WARRANTY</b></li>
</ul>
</div>
<div class="country">
<img
class="price-pic"
src="https://i.ibb.co/374yfhk/eastern.png" />
<p id="price-title">Eu Nordic & East (EUNA)</p>
<ul class="price-list">
<li>Level 30</li>
<li><b>Unverified Email</b></li>
<li>Fresh MMR</li>
<li>Ranked-ready</li>
<li><b>LIFETIME WARRANTY</b></li>
</ul>
</div>
</div>
</section>
<footer id="bottom-side">
<div id="bottom-canvas">
<div class="bot-categories">
<ul id="cat">
<li><a href="#privacy">Pricavy</a></li>
<li><a href="#terms">Terms</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<div id="copyright">
<p>Copyright 2023, Original Aram</p>
</div>
</div>
</footer>
</body>
</html>
:root {
--white: hsl(0, 0%, 100%);
--text: hsl(0, 1%, 35%);
--background: hsl(122, 25%, 50%);
--background-sections: hsl(122, 25%, 44%);
}
* {
margin: 0;
}
body {
background-color: var(--background);
}
#header-img {
width: 60px;
object-fit: contain;
margin-right: 10px;
}
#nav-bar {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
position: fixed;
width: 100%;
top: 0;
background-color: var(--white);
padding: 10px;
}
.nav-links {
display: flex;
list-style: none;
margin: 0 10px;
margin-top: 15px;
}
.nav-links a:hover {
background-color: var(--background);
}
.nav-links a {
text-decoration: none;
padding: 0 10px;
color: var(--text);
}
#logo-container {
display: flex;
align-items: center;
}
#email-section {
margin-top: 250px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
h2 {
margin: 10px 0px;
}
#form {
display: flex;
flex-direction: column;
align-items: center;
}
#submit {
margin: 5px 0;
}
.feauters {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 100px;
}
#feaut-text {
margin-top: 20px;
}
.pricing {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 50px;
}
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
#shield {
margin: 0 10px;
}
.description {
text-align: center;
margin: 10px 0;
float: left;
}
.divider {
width: 50px;
background-color: black;
height: 2px;
margin-top: 10px;
}
.canvas {
width: 500px;
height: auto;
background-color: var(--background-sections);
display: flex;
align-items: center;
border-radius: 10px;
margin: 10px;
flex-direction: column;
}
#rating {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-top: -50px;
}
.rat-text {
padding: 10px 15px;
}
.price-pic {
margin: 10px 0;
border: 1px solid hsl(122, 25%, 50%);
}
.price-list {
margin: 10px
}
@media only screen and (min-width: 900px) {
#nav-bar {
flex-direction: row;
}
.canvas {
flex-direction: row;
width: auto;
}
.country {
margin: 0 10px;
}
}
#bottom-side {
display: flex;
justify-content: center;
align-items: center;
}
#bottom-canvas {
width: 95%;
height: 100%;
background-color: var(--white);
border-radius: 5px;
display: flex;
flex-direction: column;
}
.bot-categories ul {
list-style-type: none;
}
.bot-categories ul li {
padding: 0 10px;
}
#cat {
display: flex;
justify-content: flex-end;
padding: 5px 0;
}
#copyright {
display: flex;
justify-content: flex-end;
}
.bot-categories #cat a {
text-decoration: none;
color: black;
}
#copyright p {
color: var(--text);
font-size: small;
padding: 5px 10px;
}
#league {
display: flex;
justify-content: center;
align-items: center;
margin-top: 60px;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36
Challenge: Product Landing Page - Build a Product Landing Page
Link to the challenge: