Product Landing Page - Build a Product Landing Page

Tell us what’s happening:

How to move my nav links more evenly spaced out to the right if possible ?

Your code so far

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



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




<header id="header">
	<h1>Tahretti Drones</h1>
<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">
<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>

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





<form id="form" 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"></label>

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




<main>

		<section id="features">
			<h1>Our Goals</h1>
			<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>
			</section>

		<section>
			<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>
			</section>

			<section>
			<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>
			</section>
	
		<section id="shop">
			<header>FPV</header>
			<img id="image" src="https://www.stonehobby.com/cdn/shop/files/geprc711188_1200x.jpg?v=1704363014">
    			<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>
			
			</section>



		<section>
			<header>DJI Air 2s</header>
			<img id="image" src="https://www.unmannedtechshop.co.uk/wp-content/uploads/2021/04/DJI-AIR-2S-Drone%E4%B8%A8%E4%B8%BB%E6%9C%BA04-scaled.jpg">
    			<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>
			
			</section>


		<section>
			<header>DJI Mavic 3 Pro</header>
			<img id="image" src="https://store.bandccamera.com/cdn/shop/products/dji-mavic-3-pro-drone-with-dji-rc-387695.png?v=1682463061&width=1000">
    			<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>
			
			</section>
</main>














/* file: styles.css */
#nav-bar {
  width: 80%;
  height: 100%;
  margin: 0;
  top:0;
  position: fixed; 
}
.nav-link {
  font-family: Raleway;
  font-size: 18px;
  text-decoration: none;
  font-weight: normal;
  color: rgb(200,150,100);
  height: 100%;
}


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

Have you learned CSS flex yet?

1 Like

Yes I’m using the flex attribute to make it display more far right. Thanks for the suggestion !!

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