Build A Product Landing Page 10

HTML-CSS
1

Guys how do i add (.nav-link and href attribute) to my code, i’m sure i’m making some mistakes

   **Your code so far**

/* file: index.html */
<html>

<div class="main">
<header id= "header"> 
<img id="header-img" src="https://www.google.co.za/url?sa=i&url=https%3A%2F%2Fsashares.co.za%2Fnasdaq-forex-brokers%2F&psig=AOvVaw2lMNrV_Am0uq4DJU5h0xDY&ust=1654376453638000&source=images&cd=vfe&ved=0CAwQjRxqFwoTCLi999qWkvgCFQAAAAAdAAAAABAD" alt="header-img">


<nav id= "nav-bar">
 <ul>
<li><a class="nav link" href="#features">features</a></li>
<li><a class="nav link" href="#How it works">How it works</a></li>
<li><a class="nav link" href="#Pricing">Pricing</a></li>
   </ul>
</nav>
</header>

<div class=" subscribers">
 <h2>Full Stack Smart Money Concept</h2>
<form action= "https://www.freecodecamp.com/email-submit" id="form">
<input id="email" type="email" placeholder="Entre Your email address">
<input id="input" type="submit" value="Get Stated">
</form>
</div>

<section id="featured" class= "container">
 <div class="featured-wrapper">
 <div class="featured-icon"> 
 <div class="fire">  
</div>
<div class="featured-text">
 <h3>Smart money Blue Print Course </h3> 
 <p> Gain Access to our Smart Money Concept course and learn <br> how we achieve plus 1:10 Risk Reward as a minimum     </p>
</div> 
</div>

<div class="featured-wrapper">
 <div class="featured-icon"> 
 <div class="fire">  
</div>
<div class="featured-text">
 <h3>Kick start your Trading Career the right way.
   <br>
   <br>
   These course is Suitable for all experiece levels including absolute beginners.  </h3> 
   
</div> 
</div>
 <div class="featured-wrapper">
 <div class="featured-icon"> 
 <div class="fire">  
</div>
<div class="featured-text">
 <h3>First LEARN...then remove 'L' Dumb Money Can Become Smart Money </h3> 

</div> 
</div>
 </section>

<section id= "video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/y8Yv4pnO7qc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>    

<section id="pricing">
 <div class=" Course Pricing">
 <div class="pricing-Box">
<h4> PACKAGE 1 </h4>
<p class="Price">R3500 </p> 
<p> Access to Full Course</p>
<p>Access to Telegram Private Group</p>
<p>12 Months Mentorship </p>
<p>One On One Session Per Week </p>

</div>  
 
<div class=" Course Pricing">
 <div class="pricing-Box">
<h4> PACKAGE 2 </h4>
<p class="Price">R2000 </p> 
<p> Access to Full Course</p>
<p>Access to Telegram Private Group</p>

</div>
 <div class=" Course Pricing">
 <div class="pricing-Box">
<h4> PACKAGE 3 </h4>
<p class="Price">R1000 </p> 
<p>Access to Full Course</p>
<p>One On One Session Per Week for 2 Months </p>
</div>     

</div>
</section>

<footer>
<div class="footer-nav">
<ul>
<li><a href="">Privacy</li>
<li><a href="">Terms</li> 
<li><a href="">Contacts</li> 
</ul>
</div>
<div class="footer-copyright">
<p>Copyright 2016, Original Trombones</p>
</div>
</footer>
</html>

/* file: styles.css */


   **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.64 Safari/537.36 Edg/101.0.1210.53

Challenge: Build a Product Landing Page

Link to the challenge:

2

What do you mean? What are you trying to do? What is happening instead? Which part of your code should we look at?

3

@xynoan the code that you should look at is
what i need the code to do is go to the website when you click any features in my code.

4 
<a class="nav link" href="#How it works">

This is a snippet of your code, one of the links you have in place in your nav bar. Currently this link has two classes- “nav” and “link”. If you want it to have one class named “nav-link”, im sure you can figure how to do that :slight_smile: . The href value is also wrong. It usually should list an id of an element on your page. For example you’ve got elements with id’d “pricing” and “video”. You can make the ling target those by saying href="pricing", or href="video". If you wanna use multiple words for a more descriptive id name, you can use hyphens like you do with classes, e.g. `id=“how-to”. Also, its generally avoided to use uppercase in id/class names. They are not there to serve as visible titles. The visible content is the text those elements contain, which is visible to the user and thats where we should more core concerned for that.
There are also some others typos in your solution. You can use some html validator online, to check your code, for example Ready to check - Nu Html Checker , simply paste your code and click check. It can be a bit confusing at first, but its good to spend some time and figure how it works and how to read the results, it can serve you great deal in the long run, to figure out how to format html properly.

1 Like
5

@Sylvant Thank you very much, I managed to identify my code errors after going though your statement. Next time i’ll try to debug my code with html validator online :pray:t6: :grinning:

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.