Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

How do I direct my href to my div links. So when I click a category on the navigation bar it redirects to the corresponding option

Your code so far

<!-- file: index.html -->



    <title>store</title>
    <link rel="stylesheet" href="styles.css">




<header id="header">
<img id="header-img" src="https://static.vecteezy.com/system/resources/thumbnails/008/843/643/large/drone-white-color-flying-at-beautiful-sky-animation-move-away-from-the-camera-on-green-screen-3d-render-video.jpg" alt="Tahretti Drones">
<nav id="nav-bar">

	<a class="nav-link" href="features">Features</a>
	<a class="nav-link" href="our_mission">Our Mission</a>
	<a class="nav-link" href="shop">Shop</a>


</nav>
</header>


	
	<iframe id="video" width="600" height="450" src="https://youtu.be/X8xQvwu29Wc?si=uAVP2m99z2S061G2" frameborder="0" style="border:0;" allowfullscreen="" loading="lazy" id="our_mission"></iframe>





<form id="form" id="our_mission"  action="https://www.freecodecamp.com/email-submit">

<header>Sign up to our Newsletter<header>

<label id="email-label">Email: <input id="email" name="email" type="email"  placeholder="Enter your email" required /></label>

<input id="email" type="submit" value="submit" />
</form>


		<div id="features">
			<header>Our Goals</header>
			<p>We prioritize in selling the ultimate flying experience drones in the market today. Specialized in camera features, capturing videos, speed and battery life.</p>
			<code></code>
			</div>

		<div id="features">
			<header>Shipping</header>
    			<p>We provide a tracking information to keep track on when you will receive your order. Also free insurance if your order is lost or stolen.</p>
			<code></code>
			</div>

			<div id="features">
			<header>Assurance</header>
			<p>All our drones will be tested and retested to ensure the overall qualities and battery are safe and secure before being shipped. If damaged we offer a free diagnosis and repair of the drone in return.</p>
			<code></code>
			</div>
	
		<div id="shop">
			<header>FPV</header>
			<img id="image" src=“https://images.app.goo.gl/RpMdj2WMaHXdQc5bA”>
    			<p> FPV drones are known for their high-speed capabilities. Racing drones, in particular, can reach impressive speeds, providing an exhilarating experience for pilots. </p>
			<h1>$500</h1>
			<button type="button">Add to cart</button>
			<code></code>
			</div>



		<div id="shop">
			<header>DJI Air 2s</header>
			<img id="image" src=“https://images.app.goo.gl/3BRSVgPrzRwMGHpVA”>
    			<p>The DJI Air 2S is known for its high-quality camera. It typically features a large image sensor and can capture images and record video in 4K resolution. With obstacle sensors on various sides, the drone can detect and avoid obstacles during flight, enhancing its safety and stability.</p>
			<h1>$800</h1>
			<button type="button">Add to cart</button>
			<code></code>
			</div>


		<div id="shop">
			<header>DJI Mavic 3 Pro</header>
			<img id="image" src=“https://images.app.goo.gl/MV1wxN3inYxNLkiY7>
    			<p> The Mavic 3 Pro offers exceptional flight performance, with stable and smooth flight controls, and a maximum flight speed of up to 42 mph in Sport mode. With a 20-megapixel 4/3 CMOS Hasselblad camera ,wide-angle lens, an improved battery system, allowing for stunning high-resolution photos and 5.1K video recording. </p>
			<h1>$1000</h1>
			<button type="button">Add to cart</button>
			<code></code>
			</div>
















/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.6 Safari/605.1.15

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

You can wrap your text in an anchor and set the href attribute the the class of the section of the page you want it to go to. Like this:

<a class="nav-link" href="#features">Features</a>

It looks like you forgot the hash symbol before your id name. Easy mistake to make! I’ve made it plenty myself. :smile:

1 Like
3

Hello!
In your a element in your href before your text try add a #
So and example is: <a href="#Hello_world!">

1 Like
4

Also a little bit of advice in your css display property and your position property. Your layout will look better.

1 Like
5

Did it work for you?

1 Like
6

Yes it did thank you so much for helping me with those lines of code !

7

Yea I’m working on it to improve the overall product page. Thank you so much for your help !!!

1 Like
8

Glad to help you. That was the first page I ever bothered doing a really good job on when I learned html and css at FCC. Here’s a link, if you want to look it over for ideas: Product_Land.

9

Hey mate! @FrontEndCodeLearner

Your link is goes to FFC curriculum Product Landing page project of that person who’s click on it. if you want to show your own Product Landing page project, then copy your HTML and CSS file from product landing page project of FFC curriculum and paste it in codepen or visual studio and save it there. Then copy your project link form there and wherever you want to show it, paste it there.

I’m sorry for my poor English language!

10

I’m sorry. I don’t quite understand what your trying to get across?

11

When I try to check your link Product_Land, you mentioned above in the post. Browser brings me to my own landing page project.
Got it?
@FrontEndCodeLearner

12

Oh! Thanks. I’ll fix that.

13

The link is fixed. Now it should brink anyone who clicks it to a CodePen project.

14

Yes! Now that is goes to your project. You project is Nice and classic style.

15

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