Hey all,
Having issues with some of the user stories not passing for the test. I’ve posted the code into codepen and it passes the test there. Also, as far as I can tell both my flexbox and media queries are working in the page itself ALSO within the test on the FCC site, however it still doesn’t pass the user stories. Any assistance and advice is much appreciated! So close to the finish line haha
Hi, can you create two code blocks on the forum, one for your css and one for the html code. I think the version on the codepen site is not complete? (For eg there is no link tag to the styles.css ?)
Oh yeah, I was editing it, I realized I didn’t save before I linked it, sorry. Let me try to put the code here too
Hey all,
Sorry for the double-post, I couldn’t figure out how to add the code to a previously existing topic and it wouldn’t let me delete the other one.
Having issues with some of the user stories not passing for the test. I’ve posted the code into codepen and it passes the test there. Also, as far as I can tell both my flexbox and media queries are working in the page itself ALSO within the test on the FCC site, however it still doesn’t pass the user stories. Any assistance and advice is much appreciated! So close to the finish line haha
https://codepen.io/PirateOfJustice/pen/jOYazyg
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="styles.css">
<header id="header">
<img src="https://64.media.tumblr.com/1664a8b3ceb7dfd9d7d32c00dffb0d42/9dd40614837df0c4-c9/s400x600/e2dab29f03ab88338e44c7ac11747392e352b353.jpg" id="header-img" alt="product-logo">
<nav id="nav-bar">
<a id="nav-link" class="nav-link" href="#process"> Process</a>
<a id="nav-link" class="nav-link" href="#guarantee"> Guarantee</a>
<a id="nav-link" class="nav-link" href="#shipping">Shipping </a>
</header>
<head>
<meta charset="UTF-8">
<title>Product Landing Page</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<label id="process" class="label">The Process</label>
<p>Our elite specialists will handle the memories of your childhood with absolute care, ensuring your product will be even better than the day it was released. You can see in this video how one of our top technicians restores an old toy truck which most would have simply tossed.</p>
<iframe id="video" class="video" width="560" height="315" src="https://www.youtube.com/embed/oLfZBYboQY0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p>Now the truck is good as new, and you never have guessed it could've been so easily overlooked or considered for the rubbish or recycle bin</p>
<label id="guarantee" class="label">A+ Guarantee</label>
<p>When you decide to do business with us, you can rest assured your memories are in excellent hands as all our goods and services come with our A-PLUS guarantee!</p>
<p>In the unlikely event we are unable to restore your beloved item or our services do not meet your expectations, you are fully guaranteed your money back, no questions asked!</p>
<label id="shipping" class="label">Expedited Shipping</label>
<p>Barring any special circumstances such as inclement weather or issues with distribution, you can always count on us to provide expedited shipping.</p>
<p>Whether you're buying one of our precious memories or sending us yours to be REjuvenated, you can expect the absolute fastest turnaround time in the business!</p>
<label id="contact" class="label">Order Now!</label>
<p>So what are you waiting for? Join our mailing list and we'll send you an order form and a list of the monthly specials!</p>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input id="email" name="email" type="email" required placeholder="Let's Do Business!">
<input id="submit" type="submit" value="Join Us!" >
</body>
</html>
/* file: styles.css */
@media print and (max-width 500px) {
* {
text-decoration: none;
}
}
@media screen and (any-hover: hover) {
a:hover {
color: red;
}
}
#nav-bar {
background: white;
padding: 63px;
padding-left: 65
}
#header-img {
height: 250%;
padding-bottom: 1px;
padding-left: 6;
padding-right: 5;
margin: 0;
background: white;
}
header {
width: 100%;
height: 50px;
display: flex;
justify-content: space-between;
align-items: left;
position: fixed;
top: 0;
}
#submit {
background: #3692a9;
color: white;
border-bottom: 2px solid #e43613;
border-radius: 8px;
}
a {
border-bottom: 2px solid #e43613;
background: #3692a9;
color: white;
font-size: 16px;
font-family: "Optima";
font-weight: bold;
text-decoration: none;
padding: 2px;
border-radius: 3px;
}
label {
font-size: 20;
font-family: "Optima";
font-weight: bold;
color: white;
background: #3692a9;
padding: 5px;
border-radius: 8px;
border-bottom: solid #e43613;
margin: ;
}
hr {
background: blue;
color: blue;
border-bottom: solid red;
height: 3px;
margin:
}
body {
margin-top: 150px;
}
p {
margin: 40;
display: flex;
wrap: wrap;
}
input {
margin-left: 40;
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:106.0) Gecko/20100101 Firefox/106.0
Challenge: Product Landing Page - Build a Product Landing Page
Link to the challenge:
I see some syntax issues in your html so I would begin by fixing these.
Here is a html validator that you can paste the code into and it will report all the errors it finds.
Use that to fix as much as you can from the reported errors (you may have to do this multiple times to see all the errors reported as you fix things and update the code)
THANK YOU!! I’m setting that link as a favorite immediately, thank you!
Also found I linked the stylesheet twice again, I think the issue is I type what I can remember of the boilerplate but then I copy-paste my note for what I missed. So going forward I’m just going to type it each time to sort of double-check myself, that’s where I think I keep doubling up is pasting the boilerplate after typing in the link to make sure it’s there.
I appreciate your help so much, you’ve saved me twice now 
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.