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 <span class="arrow">→</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 <span class="arrow">→</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 <span class="arrow">→</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 <span class="arrow">→</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>©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: