# CAR RENTAL CATEGORY USING HTML AND CSS
The image below, we will be using HTML and CSS to replicate them.

## Steps how to build and style a Car Rental Category Section:
Creating a visually appealing car rental category section requires structuring HTML elements properly, applying CSS for design. The following steps will guide you through achieving the desired layout and style for the provided HTML structure.

**Step 1: Understanding the HTML Structure**
The given HTML code presents three car categories: Sedans, SUVs, and Luxury Cars. Each category is wrapped in a `<div>` with a relevant class and contains:
* An image representing the car type
* A heading (`<h2>`) for the category name
* A short description (`<p>`) explaining the features
* A button (`<button>`) with a link to learn more

**HTML code breakdown:**

<div class="main">
    <div class="sedans">
        <img src="./cars/sedan.png" width="40" alt="sedan">
        <h2>SEDANS</h2>
        <p>Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city or on your next road trip.</p>
        <button><a href="#">Learn More</a></button>
    </div>
    <div class="suv">
        <img src="./cars/mini.png" width="40" alt="suv">
        <h2>SUVS</h2>
        <p>Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation and off-road adventures.</p>
        <button><a href="#">Learn More</a></button>
    </div>
    <div class="luxury">
        <img src="./cars/pickup.png" width="40" alt="luxury">
        <h2>LUXURY</h2>
        <p>Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury rental and arrive in style.</p>
        <button><a href="#">Learn More</a></button>
    </div>
</div>

**Result:**

**Step 2: Styling the layout with CSS**
To make the section visually appealing, we will apply CSS styles to:

* Arrange the categories in a row (using flexbox or grid)
* Apply background colors to differentiate them
* Style buttons for better user experience

**CSS code breakdown:**

<style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f8f8f8;
            margin: 0;
            padding: 0;
        }
        .main {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 50px;
        }
        .main div {
            width: 200px;
            padding: 30px;
            color: white;
        }
        .sedans {
            background-color: #E38938;  /* Orange * /
            border-radius: 10px 0px 0px 10px;
            height: 350px;

        }
        .suv {
            background-color: #0B6E71;  /* Green * /
            height: 350px;

        }
        .luxury {
            background-color: #063E3E; /* Dark blue * /
            border-radius: 0px 10px 10px 0px;
            height: 350px;

        }
        h2 {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 15px;
        }
        p {
            font-size: 16px;
            line-height: 1.5;
        }
        button {
            background-color: white;
            border: none;
            padding: 10px 20px;
            margin-top: 50px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: bold;
        }
        button a {
            text-decoration: none;
            color: black;
        }
</style>

**Fineal Result:**

**Conclusion**
By following these steps, you can create a structured and stylish car rental category section. The combination of HTML for structure, CSS for styling can help create a visually appealing and user-friendly website.

Liked the article? **[Hack-md](https://hackmd.io/)** is a great platform that hosts thousands of great articles like this. Sign up for free today and enjoy!

You can as well follow me on [X (Twitter)](https://x.com/joeyovey1)