Learn how to build a responsive car rental landing page using HTML and CSS. Source code included for easy implementation.
Table of Contents
Creating a captivating landing page is crucial for a car rental business to attract potential customers. In this tutorial, we'll explore how to build a professional and engaging car rental landing page using HTML and CSS.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our car rental landing page.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
Let's break down the HTML code section by section:
1. DOCTYPE and HTML Declaration:
- <!DOCTYPE html>: This line specifies that the document is written in HTML5.
- <html lang="en">: This line defines the document as HTML and sets the language attribute to English.
2. Head Section:
- This section contains meta-information about the webpage.
- <meta charset="UTF-8">: Defines the character encoding standard for the webpage.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: Sets the viewport to adjust the webpage width according to the device screen size and sets the initial zoom level to 100%.
- <title>Car Rental</title>: Defines the title of the webpage that will be displayed on the browser tab.
- <link href="https://cdn.jsdelivr..." rel="stylesheet">: This line imports the Bootstrap CSS framework from a CDN (Content Delivery Network) for styling the webpage.
- <link rel="stylesheet" href="https://cdn.jsdeli../bootstra....css">: This line imports Bootstrap Icons from a CDN for adding icons to the webpage.
- <link rel="stylesheet" href="styles.css">: This line links to an external stylesheet file named "styles.css" containing custom styling for the webpage.
3. Navbar Section:
- <nav class="navbar navbar-expand-lg fixed-top">: This code creates a navigation bar using Bootstrap classes. It includes features like expanding for larger screens and fixing the navbar to the top of the page while scrolling.
- <div class="container">: Defines a container element to hold the navbar content.
- <a class="navbar-brand" href="#"> Rent Car</a>: Creates a brand logo/link for the webpage.
- Creates a toggle button for collapsing the navbar menu on smaller screens.
- <div class="collapse navbar-collapse" id="navbarNav">: Defines a collapsible element for the navbar menu.
- <ul class="navbar-nav ms-auto">: Creates an unordered list containing the navbar menu items.
- Each list item <li> includes an anchor tag <a> defining the menu text and linking to corresponding sections of the webpage using IDs like "#our-service".
- A button element is included for user registration.
4. Main Section:
- <section class="main-section">: Creates a section element for the main content area.
- <div class="container pt-md-5 pt-sm-3">: Defines a container element with padding adjustments for different screen sizes.
- <div class="row align-items-center">: Creates a row element with elements aligned horizontally at the center.
- A first column containing a website description, welcome message, and a call to action button.
- A second column containing a background image and a car image on top.
5. Our Service, Why Us, and Testimonial Sections:
- These sections follow a similar structure using section elements, container elements, and rows with columns. They include content about the company's services, reasons to choose them, and customer testimonials with a carousel component for testimonials.
6. FAQ Section:
- This section includes an accordion component for displaying Frequently Asked Questions.
6. Footer Section:
- This section contains the company contact information, navigation links to other webpage sections, and social media icons.
This is the basic structure of our car rental landing page using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the car rental landing page is in place, the next step is to add styling to the car rental landing page using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to style our landing page.
Let's break down the CSS code section by section:
1. @import url("https://fonts.goog...");: This imports the Google Font "Poppins" to be used in the webpage.
2. * { margin: 0; padding: 0; font-family: "Poppins", sans-serif; }: This sets all elements to have no margin or padding and to use the "Poppins" font as the default font family, falling back to a generic sans-serif font if "Poppins" is not available.
3. :root { ... }: This defines some CSS custom properties (variables) to store color values that can be reused throughout the stylesheet.
4. p { ... }: This styles paragraph elements (<p>) with a specific font size, weight, and line height.
5. .navbar { ... }: Styles the navigation bar with a bold font and a background color defined by the --main-bg-color variable.
6. .nav-item { ... }: Styles navigation items by removing text decoration and adding a right margin.
7. .nav-link { ... }: Styles navigation links with a specific font weight and color.
8. .main-section { ... }, .our-section { ... }, .bg-car { ... }, etc.: These define styles for various sections of the webpage, such as background colors, positioning, and dimensions.
9. .item-list { ... }: Styles lists by setting them to display as flex containers with specific alignment and margins.
10. .card-item { ... }, .card-title { ... }, .card-desc { ... }, etc.: These styles define the appearance of cards on the webpage, including their layout, borders, padding, and typography.
11. .text-testimonial { ... }, .card-user-content { ... }, .rate-star { ... }, etc.: These styles further define various elements of the webpage, such as testimonials, user content, and star ratings.
12. .prev-button, .next-button: Styles for previous and next buttons, defining their appearance, including background color, border, and hover effects.
13. #img-profile, #banner-container h1, .content-banner, etc.: Styles for specific elements targeted by their IDs or classes.
14. @media (max-width: 768px) { ... }, @media (max-width: 1200px) { ... }: Media queries that apply specific styles when the viewport width is below certain thresholds, allowing for responsive design adjustments.
This will give our car rental landing page an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
* {
margin: 0;
padding: 0;
font-family: "Poppins", sans-serif;
}
:root {
--main-bg-color: rgba(241, 243, 255, 1);
--secondary-bg-color: rgba(13, 40, 166, 1);
--card-border-color: rgba(208, 208, 208, 1);
--button-primary-color:rgba(92, 184, 95, 1);
}
p {
font-size: 14px;
font-weight: 300;
line-height: 20px;
}
nav.navbar {
font-weight: bold;
background-color: var(--main-bg-color);
}
.nav-item {
text-decoration: none;
margin-right: 32px;
}
.nav-item .nav-link {
font-weight: 400;
color: black;
}
.nav-link:hover {
text-decoration: underline;
}
.main-section {
position: relative;
background-color: var(--main-bg-color);
}
.our-section {
background-color: white;
}
.bg-car {
position: absolute;
background-color: var(--secondary-bg-color);
height: 50%;
width: 50%;
bottom: 0;
right: 0;
border-radius: 100px 0 0 0;
}
#img-car {
z-index: 1
}
.content-our-section {
margin-left: 80px;
}
ul {
list-style: none;
}
.item-list {
display: flex;
align-items: center;
justify-content: start;
margin-top: 20px;
}
.item-list:before {
content: "";
background-image: url("https://i.ibb.co/DwWFsZQ/icon-list.png");
background-size: 24px 24px;
width: 24px;
height: 24px;
margin-right: 20px;
}
.card-item {
display: flex;
flex-direction: column;
justify-content: center;
min-height:300px;
height: 100%;
width: 100%;
margin-top: 10px;
border: 1px solid var(--card-border-color);
border-radius: 10px;
padding: 24px;
}
.card-title {
font-size: 16px;
margin-top: 16px;
font-weight: bold;
}
.card-desc {
font-size: 14px;
margin-top: 16px;
}
.icon-card {
width: 32px;
height: 32px;
margin: 10px 0 0 0;
}
.text-testimonial {
text-align: center;
padding: 10px 0 10px 0;
}
.text-testimonial .tagline-testimonial {
margin-top: 16px;
}
.card-user-content {
margin-left: 20px;
}
.rate-star {
width: 16px;
height: 16px;
}
#card-testimonial {
display: flex;
align-items: center;
background-color: var(--main-bg-color);
border: 0;
border-radius: 10px;
}
.prev-button,
.next-button {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: white;
color: black;
border: 1px solid rgba(0, 0, 0, 0.671);
border-radius: 50px;
width: 50px;
height: 50px;
}
.prev-button:hover,
.next-button:hover {
background-color: var(--button-primary-color);
border: 1px solid var(--button-primary-color);
color: white;
}
#img-profile {
width: 170px;
height: 170px;
}
#banner-container {
background-color: var(--secondary-bg-color);
border-radius: 10px;
padding: 50px;
}
#banner-container h1,
.content-banner {
color: white;
}
.item-navigation {
font-weight: bold;
}
.logo-copyright {
background-color: var(--secondary-bg-color);
width: 100px;
height: 34px;
flex-shrink: 0;
}
.icon-socmed {
width: 32px;
height: 32px;
margin-right: 10px;
}
#faq-section {
padding-bottom: 80px;
margin-top: 80px;
}
#icon-facebook,
#icon-instagram,
#icon-twitter,
#icon-email,
#icon-twitch {
color: var(--secondary-bg-color);
font-size: 32px;
margin-right: 20px;
}
@media (max-width: 768px) {
.main-section {
margin-top: 20px;
}
.bg-car {
position: absolute;
background-color: var(--secondary-bg-color);
height: 40%;
width: 60%;
bottom: 0;
right: 0;
border-radius: 100px 0 0 0;
}
#img-woman {
width: 100%;
}
.why-us-tagline {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.content-our-section {
margin-left: 0;
}
.card-user {
background-color: var(--main-bg-color);
width: 300px;
height: 700px;
border-radius: 10px;
}
.card-user .card-item-user {
padding: 20px;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
align-items: center;
}
#banner-section {
padding: 0 10px 10px 10px;
}
#faq-section {
padding: 30px 0 30px 0;
}
}
@media (max-width: 1200px) {
.car-img {
width: 100%;
}
.card-item {
min-height: 350px;
}
} Final Output:
See the Pen Untitled by Faraz (@codewithfaraz) on CodePen.
Conclusion:
Creating a responsive car rental landing page requires a combination of HTML and CSS skills, along with an understanding of user experience principles. By following the steps outlined in this guide and prioritizing responsiveness, you can create a website that effectively showcases your car rental business and attracts potential customers.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
