<head>
// Product Landing Page
//I found one Error-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).
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<div id="page-wrapper">
<header id="header"> <div class="logo"><img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="original trombone image"/></div><nav id="nav-bar">
<ul>
<li>
<a href="#features" class="nav-link" id="Tenor_Trombone"></a>
</li>
<li>
<a href="#how_it_works" class="nav-link" id="Bass_Trombone"></a>
</li>
<li>
<a href="#pricing" class="nav-link" id="Valve_Trombone"></a>
</li>
</ul>
<div class="container"></div>
<section id="hero">
<h2 id="heading1">Handcrafted, home-made masterpieces</h2>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input id="email" placeholder="Enter your email address" type="email" name="email"/>
<input id="submit" type="submit" value="GET STARTED" class="btn"/>
</form>
</section>
<div class="container">
<section id="premium-materials">
<div class="icon">
<i class="fa fa-3x fa-fire"></i></div>
<div class="desc">
<h2>Premium Materials</h2>
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
</div>
</section>
<section id="fast-shipping">
<div class="icon"><i class="fa fa-3x fa-truck"></i></div>
<h2>Fast Shipping</h2>
<p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.
</p>
</section>
<section id="quality-assurance">
<div class="icon">
<i class="fa fa-3x fa-battery-full" aria-hidden="true"></i>
<h2>Quality Assurance</h2>
<p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.
</p>
</section>
<section id="how-it-work">
<iframe id="video" src="https://www.youtube.com/embed/JEwOy5Fm1yw"></iframe>
</section>
<footer>
<div class="footer-img">
<img src="https://i.imgur.com/hCrQkJi.png">
</div>
<ul>
<li><a href="#" class="footer-link">Privacy</a></li>
<li><a href="#" class="footer-link">Terms</a></li>
<li><a href="#" class="footer-link">Contact</a></li>
</ul>
<span>Copyright 2016, Alok</span>
</footer>
</div>
</nav>
</div></header>
html {
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
}
header .logo-image {
float: left;
width: 70px;
height: 63px;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
}
.background {
background-image: url(https://images.pexels.com/photos/754082/pexels-photo-754082.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
height: 670px;
}
header {
position: fixed;
background: black;
height: 70px;
width: 100vw;
box-shadow: 0 3px 0 #EC7063;
}
header ul {
float: right;
margin: 0px;
padding: 0px;
padding-right: 10px;
list-style: none;
}
header .menu-toggle {
display: none;
}
header ul li {
float: left;
}
header ul li a {
display: block;
color: white;
padding: 25px;
font-weight: bold;
font-size: 17px;
text-decoration: none;
font-family: monospace;
}
header ul li a:hover {
background: #3498DB;
transition: 0.5s;
color: black;
padding: 25px;
border-top: 0px;
border-bottom: 0px;
}
.sign-up-page {
display: flex;
justify-content: center;
align-items: ;
font-size: 14px;
padding-top: 30px;
}
#submit {
padding: 5px;
border-radius: 5px;
margin-top: 6px;
font-size: 15px;
font-weight: bold;
background: black;
color: #1ABC9C;
}
input:hover[type="submit"] {
transform: scale(1.05);
}
.description {
width: 500px;
font-size: 19px;
color: white;
display: inline-block;
padding-top: 170px;
}
.center {
text-align: center;
}
#form {
text-align: center;
margin-bottom: 25px;
color: white;
}
#email {
width: 230px;
}
#overview {
display: flex;
justify-content: center;
align-content: center;
background: #1ABC9C;
color: black;
padding-top: 40px;
font-size: 25px;
font-family: monospace;
text-shadow: 3px 3px #EC7063;
}
.vdeo {
text-align: center;
padding-top: 40px;
padding-bottom: 160px;
}
#services {
background: #1ABC9C;
color: black;
}
.services1 {
display: inline-block;
width: 400px;
font-size: 20px;
padding-left: 12%;
padding-bottom: 200px;
}
.services2 {
display: inline-block;
padding-left: 9%;
padding-top: 200px;
padding-bottom: 200px;
}
#process {
background: black;
color: #1ABC9C;
}
.process1 {
display: inline-block;
padding-left: 12%;
padding-top: 200px;
padding-bottom: 200px;
}
.process2 {
display: inline-block;
width: 370px;
font-size: 20px;
padding-left: 9%;
padding-bottom: 200px;
}
#team {
background: #1ABC9C;
color: black;
}
.team1 {
display: inline-block;
width: 400px;
font-size: 20px;
padding-left: 12%;
padding-bottom: 200px;
}
.team2 {
display: inline-block;
padding-left: 9%;
padding-bottom: 200px;
padding-top: 200px;
}
#culture {
background: black;
color: #1ABC9C;
}
.culture1 {
display: inline-block;
padding-left: 12%;
padding-top: 200px;
padding-bottom: 200px;
}
.culture2 {
display: inline-block;
width: 370px;
font-size: 20px;
padding-left: 9%;
padding-bottom: 200px;
}
footer {
margin-top: 0px;
background-color: black;
padding: 10px;
border-top: 3px solid #EC7063;
}
.footer-img img {
padding-top: 15px;
padding-bottom: 18px;
height: 55px;
width: 58px;
padding-left: 48%;
}
footer > ul {
display: flex;
justify-content: center;
padding-right: 30px;
list-style: none;
}
.footer-link {
color: orange;
text-decoration: none;
font-family: serif;
font-size: 17px;
}
.footer-link:hover {
color: gray;
}
footer > ul > li {
padding: 0px 35px;
}
footer > span {
display: flex;
justify-content: center;
font-size: 1em;
color: skyblue;
}
@media (max-width: 600px) {
header {
position: fixed;
box-shadow: 0 2px 0 #EC7063;
}
header ul {
width: 100%;
background: #3498DB;
max-height: 0px;
overflow: hidden;
}
.showing {
max-height: 100em;
transition: 1.5s;
}
header ul li {
width: 100%;
border-bottom: 1px solid black;
height: 61px;
}
header ul li:nth-child(5) {
border-bottom: 1px solid black;
}
header ul li a {
padding: 22px;
font-size: 14.5px;
}
header ul li a:hover {
padding: 22px;
font-size: 14.5px;
}
header .menu-toggle {
display: block;
position: absolute;
right: 20px;
top: 22px;
font-size: 25px;
color: white;
cursor: pointer;
}
header .menu-toggle:hover {
color: #1ABC9C;
transition: 0.5s;
}
header .logo-image {
width: 65px;
height: 62.5px;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
}
.sign-up-page {
display: flex;
justify-content: center;
align-items: top;
font-size: 9px;
}
#submit {
padding: 5px;
border-radius: 5px;
margin-top: 3px;
font-size: 8px;
font-weight: bold;
background: black;
color: #1ABC9C;
}
input:hover[type="submit"] {
transform: scale(1.05);
}
.description {
width: 250px;
font-size: 11px;
color: white;
display: inline-block;
padding-top: 120px;
}
.center {
text-align: center;
}
#form {
text-align: center;
margin-bottom: 60px;
color: white;
}
#email {
width: 150px;
}
#services {
background: #1ABC9C;
color: black;
}
.services1 {
padding-top: 65px;
display: inline-block;
width: 260px;
padding-right: 11%;
font-size: 12px;
padding-left: 11%;
padding-bottom: 0px;
}
.services2 {
display: inline-block;
padding-left: 11%;
padding-top: 20px;
padding-right: 11%;
padding-bottom: 75px;
}
.services2 img {
max-width: 100%;
height: auto;
}
#process {
background: black;
color: #1ABC9C;
display: flex;
flex-wrap: wrap-reverse;
}
.process1 {
padding-left: 11%;
padding-top: 20px;
padding-bottom: 75px;
padding-right: 11%;
}
.process2 {
width: 260px;
font-size: 12px;
padding-left: 11%;
padding-top: 65px;
padding-right: 11%;
padding-bottom: 0px;
}
.process1 img {
max-width: 100%;
height: auto;
}
#team {
background: #1ABC9C;
color: black;
}
.team1 {
padding-top: 65px;
display: inline-block;
width: 260px;
font-size: 12px;
padding-left: 11%;
padding-bottom: 0px;
}
.team2 {
display: inline-block;
padding-left: 11%;
padding-top: 20px;
padding-right: 11%;
padding-bottom: 75px;
}
.team2 img {
max-width: 100%;
height: auto;
}
#culture {
background: black;
color: #1ABC9C;
display: flex;
flex-wrap: wrap-reverse;
}
.culture1 {
padding-left: 11%;
padding-top: 20px;
padding-bottom: 75px;
padding-right: 11%;
}
.culture2 {
width: 260px;
font-size: 12px;
padding-left: 11%;
padding-top: 65px;
padding-right: 11%;
padding-bottom: 0px;
}
.culture1 img {
max-width: 100%;
height: auto;
}
#overview {
display: flex;
justify-content: center;
align-content: center;
background: #1ABC9C;
color: black;
padding-top: 40px;
font-size: 100%;
font-family: monospace;
text-decoration: bold;
text-shadow: 2px 2px #EC7063;
padding-bottom: 0px;
}
.vdeo {
text-align: center;
padding-top: 50px;
}
#overview #video {
max-width: 280px;
height: auto;
}
footer {
margin-top: 0px;
background-color: black;
padding: 8px;
height: 136px;
border-top: 2px solid #EC7063;
}
.footer-img img {
padding-top: 15px;
padding-bottom: 15px;
padding-left: 43%;
height: 45px;
width: 47px;
}
footer > ul {
display: flex;
justify-content: center;
padding-right: 35px;
list-style: none;
}
.footer-link {
color: orange;
text-decoration: none;
font-family: serif;
font-size: 14px;
font-weight: bold;
}
a:hover[class="footer-link"] {
color: gray;
}
footer > ul > li {
padding: 0px 15px;
}
footer > span {
display: flex;
justify-content: center;
font-size: 13px;
color: skyblue;
line-height: 2px;
}
}
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.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').
Please let us know what you want help with. Thanks
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.