Product Landing Page - Feedback Please

Hello,
I just finished my product Landing page. Please give me suggestions for improvements.
Thanks

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Maximus Cars</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="styles.css">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../CSS/ProductLandingPageStyles.css">
<script src="https://kit.fontawesome.com/aa0058d4fc.js" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime&family=Dancing+Script:wght@400;500;600;700&family=Poppins&display=swap" rel="stylesheet">

</head>
<body>
    <header id="header">

	   <nav id="nav-bar">
	         <div class="logo_text_container">
	            <img src="https://rulesofgames.github.io/Images/ProductLandingPage_logo.png"  >
	        	<p class="brand_name">MAXIMUS</p>
	        	
	        	
	         </div>  	
	   		<ul>
	   			<li ><a href="#header" class="nav-link">Home</a></li>
	   			<li><a href="#WhyChooseMaximus"  class="nav-link">Why Maximus?</a></li>
	   			<li><a href="#Pricing"  class="nav-link">Pricing</a></li>
	   		</ul>
	   </nav>
	   
	  </header> 
	   
	  <main id="main"> 
	   
	   <section class="image_container" id="home">
	       	 <header id="header">
	         <img src="https://rulesofgames.github.io/Images/ProductLandingPage_main.jpg" alt="Car image"  class="main-image" id="header-img">
	         <div class="text_above_image_container">
	            <p>Find the perfect car to conquer the great outdoors with</p>
	            <p class="product">Maximus rental services</p>
	            
	         </div>
	        	</header> 
	      </section>

	

	      
	      
	      <section class="features-container" id="WhyChooseMaximus">
	                  
	                  
	                 <div><i class="fa-solid fa-money-check-dollar"></i></div>
	        		<div>
	        		  <h3>Free cancellation</h3>
	        		  <p>Cancel for a full refund up to 24 hours before your trip starts. Because life happens and it helps to be flexible when it does.</p>
	        		</div>
	               
	      
	        		
	                <div><i class="fas fa-gas-pump"></i></div>
		        	<div>
		        		<h3>Fuel Plans</h3>
		        		<p>Maximus offers a number of convenient car rental fuel plan options.
		        		 Pay in advance for a full tank of gas and bring the car back empty or simply purchase a full 
		        		 tank just before you return the car.</p>
		        	</div>
		        	 
		        	 <div><i class="fa-solid fa-mobile-retro"></i></div>
		        	<div>
		        		<h3>Maximus App</h3>
		        		<p>Book and manage your Maximus car rental straight from your phone. Download the Maximus App <a href="">here</a>
Find the perfect car to conquer the great outdoors</p>
		        	</div>
		        	
		        	 <div><i class="fa-solid fa-hand-holding-dollar"></i></div>
	        		<div>
	        		  <h3>Pay Now Rates</h3>
	        		  <p>Get a Discount on rates at most Maximus locations by paying online at the time of reservation. Just another way that Maximus is saving you money when you book online.</p>
	        		</div>
	               
	      
	        		
	                <div><i class="fa-solid fa-road"></i></div>
		        	<div>
		        		<h3>Maximus e-toll</h3>
		        		<p>Maximus is pleased to provide cashless toll processing as a convenience to you.</p>
		        	</div>
		        	 
		        	 <div><i class="fa-solid fa-people-group"></i></div>
		        	<div>
		        		<h3>Maximus Insider</h3>
		        		<p>Become a Maximus Insider and earn points on every ride. Redeem your earned points on subsequent rides.</p>
		        	</div>
		            
		            
	        
	      </section>
	      
	    
	
	
			<section class="car_booking_section" id="Pricing">
				<div class="product_details">
				   <img src="https://rulesofgames.github.io/Images/ProductLandingPage_jeep.jpg" alt="model_1"></img>
				   <div class="vehicle_details">
					   <h3>Jeep</h3>
					   <p>Starting at $350/day</p>
					  <button>Book Now&nbsp;&nbsp;<span class="arrow">&#8594;</span></button>
				  </div>
				</div>
				<div class="product_details">
				   <img src="https://rulesofgames.github.io/Images/ProductLandingPage_Nissan.jpg" alt="model_1"></img>
				   <div class="vehicle_details">
					   <h3>Nissan</h3>
					   <p>Starting at $480/day</p>
					   <button>Book Now&nbsp;&nbsp;<span class="arrow">&#8594;</span></button> 
				   </div>
				</div>
				<div class="product_details">
				   <img src="https://rulesofgames.github.io/Images/ProductLandingPage_Subaru.jpg" alt="model_1"></img>
			        <div class="vehicle_details">
					   <h3>Subaru</h3>
					   <p>Starting at $530/day</p>
					   <button>Book Now&nbsp;&nbsp;<span class="arrow">&#8594;</span></button> 
				   </div>
				</div>
				
				<div class="product_details">
				   <img src="https://rulesofgames.github.io/Images/ProductLandingPage_porsche.jpg" alt="model_1"></img>
			        <div class="vehicle_details">
					   <h3>Porsche</h3>
					   <p>Starting at $650/day</p>
					   <button>Book Now&nbsp;&nbsp;<span class="arrow">&#8594;</span></button> 
				   </div>
				</div>
			</section>
			
			 <section id="video_container">
	        
	            <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/h-OATpMLUxM?start=30" title="YouTube video player" frameborder="2" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
	            <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/NQTP3yZsWUI" title="YouTube video player" frameborder="2" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
	        
	     
	      </section>
			
			<section class="subscribe">
			   <form action="https://www.freecodecamp.com/email-submit" id="form">
			     <input type="email" id="email" placeholder="Enter Your Email here" name="email">
			     <input type="submit" value="Submit" id="submit">
			   </form>
			   <p>Sign Up for Email Specials</p>
			
			</section>
			
			
			 
	
	</main>   
    <hr>
    <footer class="footer_css">
      <ul>
      <li>&copy;2022 Maximus.All Rights Reserved</li>
       <li><a href="#">Terms and Conditions</a>
       <li><a href="#">Privacy Policy</a></li>
     
      </ul>
      
    </footer>
</body>
</html>

:root{
	    --logo--color:red;
	    --header--footer--background:white;
	    --header-footer--color:#000;
	    --header--footer--hover--color:#ff5ea2;
	    --button--background--color:linear-gradient(to right,#fb5283, #ff3527);
	    --button--color:#fff;
	    --box--border--color: #fb517e;
      }
		
		  *{
				
				box-sizing:border-box;
			}
			
			p,body,html,ul,li,a,h3{
				margin:0;
				padding:0;
			
			}
			#main{
			  padding-top:40px;
			}
			
			section:not(.image_container){
			   padding-top:40px;
			}
		    
		    h3{
		       font-size:16px;
		    }
		    
		    #nav-bar{
			    position:fixed;
			    top:0;
			    right:0;
			    left:0;
				color:var(--header-footer--color);
				display:flex;
				justify-content:space-between;
				align-items:center;
				height:45px;
				padding-left:15px;
			    padding-right:15px;
			    background-color:var(--header--footer--background);
			    z-index:9999;
		   
		   }
		   
		   .logo_text_container {
		  	
		       display:flex;
		       align-items:center;
		       padding-top:3px;
		       
		       
		    }
		   
		   .logo_text_container img{
		       border-radius:5px;
		       width:45px;
		        height:42px;
		        margin-right:5px;
		   }
		.brand_name{
			  font-family:'Dancing Script', cursive;
			  font-weight:700;
			  font-size:30px;
			  display:inline-block;
			  color: var(--logo--color);
			  
			  display:block;
		}
		
		
		
		#nav-bar ul, .footer_css ul{
		  list-style:none;
		}
		
		#nav-bar li{
		   display:inline-block;
		   margin-left:10px;
		   margin-right:10px;
		  
		 }
		 
		 #nav-bar a{
		  font-size:18px;
		  color:var(--header-footer--color);
		  text-decoration:none;
		  
		 }
		 
		
		 #nav-bar a:hover, .footer_css a:hover{
		   color:var(--header--footer--hover--color);
		   
		 }
		
		.image_container{
		   position:relative;
		  
		}
		
		.text_above_image_container{
		  position:absolute;
		  top:20px;
		  right:20px;
		  color:white;

		  letter-spacing:2px;
		 
		}
		
		.text_above_image_container p:first-of-type{
		  font-size:20px;
		  font-weight:normal;
		  white-space: pre-line;
		  
		}
		
		.product{
		   text-align:center;
		   font-size:28px;
		}
		
		.main-image{
		  width:100%;
		  height:500px;
		 object-fit:cover;
		}
		
		
		
		.features-container{
		  display:grid;
		 grid-template-columns:50px 1fr 50px 1fr;
		  column-gap:20px;
		  row-gap:35px;
		  margin-right:20px;
		  margin-left:20px;
		}
		
		.features-container div:nth-of-type(odd){
		    text-align:right;
		    
		 }
		
		.features-container div:nth-of-type(even){
		  
		  text-align:left;
		  
		  grid-row:auto;
		}
	
		.features_container_image{
		  max-width:100%;
		}
		
		.fa-solid,.fas{
		   color:var(--logo--color);
		   font-size:50px;
		}
		
		#video_container{
		   display:flex;
		   flex-direction:row;
		   justify-content:space-around;
		   margin-left:70px;
		   margin-right:70px;
		   flex-wrap:wrap;
		}
		
		
		
		.car_booking_section{
			display:flex;
			justify-content:space-between;
			margin-left:70px;
			margin-right:70px;
			position:relative;
		    flex-wrap:wrap;
			
			
		}
		.product_details{
		   border:2px double black;
		    border-radius:15px;
		    overflow:hidden;
			text-align:center;
			padding-bottom:25px;
			position:relative;
			
		}
		
		.product_details img{
		    width:100%;
		    height:250px;
		    object-fit:cover;
		}
		.product_details p{
		   margin:5px 5px;
		}
		
		button{
		   color:var( --button--color);
            background: var(--button--background--color);
            border:0;
            width:100px;
            padding:8px 10px;
            border-radius:6px;
            cursor:pointer;
            transition:width 0.5s;
            margin:3px;
           
		}
		
		.arrow{
		  display:none;
		  width:10px;
		   transition:display 0.5s;
		  
		}

		
		button:hover{
		 
		 width:120px; 
		  
		}
		
		button:hover .arrow{
		   display:inline-block;
		}
		
		.subscribe{
		   text-align:center;
		}
		
		input[type="text"]{
		    box-shadow:0 0  2px;
		    border-radius:3px;
		    border:none;
		     width:190px;
		     height:33px;
		     margin-right:5px;
		}
		
		
		input[type="submit"]{
		   font-size:15px;
		   width: 118px;
		   height: 35px;
		   padding:7px 15px;
		   border-radius:3px;
		   border:none;
		    box-shadow:0 0  2px;
		    cursor:pointer;
		}
		
		.subscribe p{
		  font-weight:bold;
		   margin-top:10px;
		}
		
		.footer_css{
			
			color:var(--header-footer--color);
			margin-bottom:20px;
		}
		
		 .footer_css a{
		   font-size:12px;
		   color:var(--header-footer--color);
		   text-decoration:none;
		 }
		 .footer_css li{
		    display:inline-block;
		   margin-left:10px;
		   margin-right:10px;
		   font-size:12px;
		}
		
		@media (max-width:800px) {
		  
		        #nav-bar li{
					   display:inline-block;
					   margin-left:5px;
					   margin-right:5px;
		  
		      }
				 .text_above_image_container p:first-of-type{
				     display:none;
				  }
				 
				 .text_above_image_container{
				        top: 10px;
					    left: 0;
					    right: 0;
					   
				 }
				 
				 .product_details{
				    margin:5px;
				 }
				 
			  .subscribe{
			     text-align:left;
			     margin-left:70px;
			     
			  }
		
		}
 

Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

When i click on the link it takes me to my product landing page…Preferably share your code from code pen!!!

When I click on the link it takes me to my Product landing page(Car Rental Service). I have copy pasted my freeCodeCamp productLanding Page link here. Is there any other way to share my project?

Yeah you can using codepen.io

I have updated the Project Link. Please provide feedback.Thanks

hi there! Thanks for posting your code in codepen. It makes it a bit easier to review.

I wanted to point out that you can see some issues in the HTML if you use codepen’s “Analyze HTML” option. It shows this:


       <li><a href="#">Terms and Conditions</a>
       <li><a href="#">Privacy Policy</a></li>

Codepen noticed that you forgot to close your <li> tag on the Terms and Conditions line.

Codepen also noticed that you have a duplicate display target in your css here:

		.brand_name{
			  font-family:'Dancing Script', cursive;
			  font-weight:700;
			  font-size:30px;
			  display:inline-block;
			  color: var(--logo--color);
			  
			  display:block;
		}

I believe the browser will just use the later one, so you can probably comment out the first one (or delete it).

I am unable to review your page in the “full page view” at the moment because you still have to verify your email address with codepen. So I’ll just limit my review to what I can see in the editor mode.

  • in a narrow mode (like a cellphone) the page appears to push the menu items into one sentence, so it was not clear to me that they were different things. You may want to add a media section to handle this better.

  • I love the responsiveness on the book now buttons. That’s a cool touch.

  • the bottom of the page where you allow people to sign up is a little bit wonky in my view. (the layout can be improved as right now the words “Sign Up for Email Specials” is showing up underneath the input area, which doesn’t make sense to me. I would move it to the left of the input)

(maybe the problem is that you haven’t setup codepen to pull in all the frameworks you are using, you may want to read up on how codepen setup works to maximize how well the site looks)

Great work on this project.

1 Like

You’ve done a great job but with my little experience, your website is not orderly alligned
For example, you didn’t add some padding to your video so it makes it look wrapped together and also, your image are not alligned properly and lacks some margin which makes it close to each other which is not meant to be…Everything should be alligned properly at the center of the page but you’ve really done a great job to come this far…Here’s a link to my portfolio below on tips on how you can improve your landing page…

Thank you for your feedback. i will incorporate the same. I have verified my email in codePen. Could you please review my project in “full page view”.

Thank you for your feedback.
I will incorporate the same. I have verified my email in codePen. Could you please review my project in “full page view”.