Car Wraps & Window Tinting in Staten Island, NY

CALL or TEXT
CALL or TEXT

Auto Styling

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Habazzi Auto Styling - Select Car Areas</title>

<script src="https://cdn.tailwindcss.com"></script>

<!-- Google Fonts for Orbitron (for title) and Inter (for body) -->

<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

<style>

body {

font-family: 'Inter', sans-serif; /* Default font for most text */

background-image: url('Screenshot 2025-07-10 130741.png'); /* Your image as background */

background-size: contain; /* Ensures the whole image is visible */

background-repeat: no-repeat; /* Prevents tiling */

background-position: center; /* Centers the image */

background-color: #1a1a1a; /* Fallback background color if image fails to load */

color: #ffffff; /* White text for contrast */

min-height: 100vh; /* Ensure body takes full viewport height */

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

padding: 1rem; /* Add some padding for mobile */

}

.container {

background-color: rgba(42, 42, 42, 0.8); /* Slightly lighter dark background for the container with transparency */

backdrop-filter: blur(5px); /* Optional: Adds a blur effect to the background behind the container */

border-radius: 0.5rem; /* Rounded corners for the container */

box-shadow: 0 10px 15px rgba(0, 0, 0, 0.5); /* Stronger shadow for depth */

padding: 1.5rem 2rem; /* Adjusted padding */

max-width: 90%; /* Responsive max-width */

}

h1 {

font-family: 'Orbitron', sans-serif; /* Specific font for the main title */

}

.svg-container {

width: 100%;

max-width: 600px; /* Max width for the SVG diagram */

margin: 0 auto;

display: block;

overflow: visible; /* Allow checkmarks/labels to slightly overflow if needed */

}

/* Styles for car parts and text */

.car-part {

fill: #6a6a6a; /* Slightly lighter grey for car parts to stand out on image */

stroke: #cccccc; /* Light grey stroke for outlines */

stroke-width: 1;

cursor: pointer;

transition: fill 0.2s ease-in-out, stroke 0.2s ease-in-out;

opacity: 0.8; /* Slightly transparent to see background image through */

}

.car-part:hover {

fill: rgba(255, 255, 0, 0.3); /* Yellow hover effect */

}

.car-part.selected {

fill: rgba(255, 255, 0, 0.7); /* Solid yellow when selected */

opacity: 1; /* Fully opaque when selected */

}

.car-part.window {

fill: #4a4a4a; /* Slightly darker grey for windows */

}

.car-part.window:hover {

fill: rgba(255, 255, 0, 0.3); /* Yellow hover for windows too */

}

.car-part.window.selected {

fill: rgba(255, 255, 0, 0.7); /* Solid yellow for selected windows */

}


/* Labels within SVG */

.panel-label {

font-family: 'Inter', sans-serif;

font-size: 14px; /* Base font size for labels */

fill: #ffffff; /* White text for labels */

pointer-events: none; /* Allow clicks to pass through to the underlying SVG shape */

text-anchor: middle; /* Center text horizontally */

dominant-baseline: middle; /* Center text vertically */

text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* Shadow for readability */

opacity: 1;

transition: opacity 0.2s ease-in-out;

line-height: 1.2; /* For stacked text */

}

/* Hide label when parent part is selected */

.car-part.selected + .panel-label {

opacity: 0;

}


/* Checkmark within SVG */

.checkmark {

font-family: 'Inter', sans-serif; /* Use Inter for checkmark for consistency */

font-size: 30px; /* Large checkmark */

fill: #000000; /* Black checkmark */

pointer-events: none; /* Allow clicks to pass through */

text-anchor: middle; /* Center checkmark horizontally */

dominant-baseline: middle; /* Center checkmark vertically */

text-shadow: 1px 1px 2px rgba(255,255,255,0.2); /* White shadow for visibility on yellow */

display: none; /* Hidden by default */

}

/* Show checkmark when parent part is selected */

.car-part.selected + .panel-label + .checkmark {

display: block;

}

/* Adjustments for smaller screens */

@media (max-width: 640px) {

.panel-label {

font-size: 12px; /* Smaller font for labels on small screens */

}

.checkmark {

font-size: 24px;

}

.container {

padding: 1rem;

}

}

</style>

</head>

<body class="p-4 md:p-8">


<div class="container mx-auto max-w-4xl rounded-lg shadow-xl p-6 md:p-8 my-8">

<h1 class="text-3xl md:text-4xl font-bold text-center mb-4">Habazzi Auto Styling</h1>

<h2 class="text-xl md:text-2xl text-center text-gray-300 mb-6">Click to Select Areas for Service</h2>


<p class="text-center text-gray-400 mb-8">

Please click on the car panels or windows you'd like to have tinted or wrapped. A checkmark will appear to confirm your selection.

This helps us understand your needs for a quick quote!

</p>


<div class="svg-container">

<svg viewBox="0 0 600 700" xmlns="http://www.w3.org/2000/svg" version="1.1">

<defs>

<style>

/* Make the car-background transparent to show the HTML body background image */

.car-background {

fill: transparent;

}

.car-part {

fill: #6a6a6a; /* Slightly lighter grey for car parts to stand out on image */

stroke: #cccccc; /* Light grey stroke for outlines */

stroke-width: 1;

}

.car-part.window {

fill: #4a4a4a; /* Slightly darker grey for windows */

}

</style>

</defs>


<!-- Main Car Body Background (fills the entire viewBox) - now transparent -->

<rect class="car-background" x="0" y="0" width="600" height="700" />


<!-- Top View Body Panels (using paths for better shapes) -->

<path id="hood-top" class="car-part" d="M180,50 C190,40 410,40 420,50 L420,150 C410,160 190,160 180,150 Z"></path>

<text class="panel-label" x="300" y="100">HOOD</text>

<text class="checkmark" x="300" y="100">&#10003;</text>


<path id="roof-top" class="car-part" d="M180,150 L420,150 L420,450 L180,450 Z"></path>

<text class="panel-label" x="300" y="300">ROOF</text>

<text class="checkmark" x="300" y="300">&#10003;</text>


<path id="trunk-top" class="car-part" d="M180,450 C190,460 410,460 420,450 L420,550 C410,560 190,560 180,550 Z"></path>

<text class="panel-label" x="300" y="500">TRUNK</text>

<text class="checkmark" x="300" y="500">&#10003;</text>


<!-- Top View Bumpers (using paths for better shapes) -->

<path id="front-bumper-top" class="car-part" d="M180,0 C190,10 410,10 420,0 L420,50 C410,60 190,60 180,50 Z"></path>

<text class="panel-label" x="300" y="25">FRONT<tspan x="300" dy="1.2em">BUMPER</tspan></text>

<text class="checkmark" x="300" y="25">&#10003;</text>


<path id="rear-bumper-top" class="car-part" d="M180,550 C190,540 410,540 420,550 L420,600 C410,610 190,610 180,600 Z"></path>

<text class="panel-label" x="300" y="575">REAR<tspan x="300" dy="1.2em">BUMPER</tspan></text>

<text class="checkmark" x="300" y="575">&#10003;</text>


<!-- Top View Windows (using paths for better shapes) -->

<path id="top-front-windshield" class="car-part window" d="M190,160 C200,155 400,155 410,160 L410,220 C400,225 200,225 190,220 Z"></path>

<text class="panel-label" x="300" y="190">FRONT<tspan x="300" dy="1.2em">WINDSHIELD</tspan></text>

<text class="checkmark" x="300" y="190">&#10003;</text>


<path id="top-rear-window" class="car-part window" d="M190,380 C200,375 400,375 410,380 L410,440 C400,445 200,445 190,440 Z"></path>

<text class="panel-label" x="300" y="410">REAR<tspan x="300" dy="1.2em">WINDOW</tspan></text>

<text class="checkmark" x="300" y="410">&#10003;</text>


<!-- Left Side View Elements (using paths for better shapes) -->

<path id="left-front-fender" class="car-part" d="M50,100 C40,110 40,240 50,250 L100,250 C110,240 110,110 100,100 Z"></path>

<text class="panel-label" x="75" y="175">LEFT FRONT<tspan x="75" dy="1.2em">FENDER</tspan></text>

<text class="checkmark" x="75" y="175">&#10003;</text>


<path id="left-front-window" class="car-part window" d="M100,160 C95,165 95,245 100,250 L180,250 C185,245 185,165 180,160 Z"></path>

<text class="panel-label" x="140" y="205">LEFT FRONT<tspan x="140" dy="1.2em">WINDOW</tspan></text>

<text class="checkmark" x="140" y="205">&#10003;</text>


<path id="left-front-door" class="car-part" d="M100,250 L180,250 L180,350 L100,350 Z"></path>

<text class="panel-label" x="140" y="300">LEFT FRONT<tspan x="140" dy="1.2em">DOOR</tspan></text>

<text class="checkmark" x="140" y="300">&#10003;</text>


<path id="left-rear-door" class="car-part" d="M100,350 L180,350 L180,450 L100,450 Z"></path>

<text class="panel-label" x="140" y="400">LEFT REAR<tspan x="140" dy="1.2em">DOOR</tspan></text>

<text class="checkmark" x="140" y="400">&#10003;</text>


<path id="left-rear-window" class="car-part window" d="M100,450 C95,455 95,535 100,540 L180,540 C185,535 185,455 180,450 Z"></path>

<text class="panel-label" x="140" y="495">LEFT REAR<tspan x="140" dy="1.2em">WINDOW</tspan></text>

<text class="checkmark" x="140" y="495">&#10003;</text>


<path id="left-rear-fender" class="car-part" d="M50,540 C40,550 40,680 50,690 L100,690 C110,680 110,550 100,540 Z"></path>

<text class="panel-label" x="75" y="615">LEFT REAR<tspan x="75" dy="1.2em">FENDER</tspan></text>

<text class="checkmark" x="75" y="615">&#10003;</text>


<!-- Right Side View Elements (using paths for better shapes) -->

<path id="right-front-fender" class="car-part" d="M550,100 C560,110 560,240 550,250 L500,250 C490,240 490,110 500,100 Z"></path>

<text class="panel-label" x="525" y="175">RIGHT FRONT<tspan x="525" dy="1.2em">FENDER</tspan></text>

<text class="checkmark" x="525" y="175">&#10003;</text>


<path id="right-front-window" class="car-part window" d="M420,160 C415,165 415,245 420,250 L500,250 C505,245 505,165 500,160 Z"></path>

<text class="panel-label" x="460" y="205">RIGHT FRONT<tspan x="460" dy="1.2em">WINDOW</tspan></text>

<text class="checkmark" x="460" y="205">&#10003;</text>


<path id="right-front-door" class="car-part" d="M420,250 L500,250 L500,350 L420,350 Z"></path>

<text class="panel-label" x="460" y="300">RIGHT FRONT<tspan x="460" dy="1.2em">DOOR</tspan></text>

<text class="checkmark" x="460" y="300">&#10003;</text>


<path id="right-rear-door" class="car-part" d="M420,350 L500,350 L500,450 L420,450 Z"></path>

<text class="panel-label" x="460" y="400">RIGHT REAR<tspan x="460" dy="1.2em">DOOR</tspan></text>

<text class="checkmark" x="460" y="400">&#10003;</text>


<path id="right-rear-window" class="car-part window" d="M420,450 C415,455 415,535 420,540 L500,540 C505,535 505,455 500,450 Z"></path>

<text class="panel-label" x="460" y="495">RIGHT REAR<tspan x="460" dy="1.2em">WINDOW</tspan></text>

<text class="checkmark" x="460" y="495">&#10003;</text>


<path id="right-rear-fender" class="car-part" d="M550,540 C560,550 560,680 550,690 L500,690 C490,680 490,550 500,540 Z"></path>

<text class="panel-label" x="525" y="615">RIGHT REAR<tspan x="525" dy="1.2em">FENDER</tspan></text>

<text class="checkmark" x="525" y="615">&#10003;</text>


<!-- Wheels (Simplified circles) - Repositioned -->

<circle id="wheel-front-left" class="car-part" cx="75" cy="70" r="40"></circle>

<text class="panel-label" x="75" y="70">FRONT LEFT<tspan x="75" dy="1.2em">WHEEL</tspan></text>

<text class="checkmark" x="75" y="70">&#10003;</text>


<circle id="wheel-rear-left" class="car-part" cx="75" cy="620" r="40"></circle>

<text class="panel-label" x="75" y="620">REAR LEFT<tspan x="75" dy="1.2em">WHEEL</tspan></text>

<text class="checkmark" x="75" y="620">&#10003;</text>


<circle id="wheel-front-right" class="car-part" cx="525" cy="70" r="40"></circle>

<text class="panel-label" x="525" y="70">FRONT RIGHT<tspan x="525" dy="1.2em">WHEEL</tspan></text>

<text class="checkmark" x="525" y="70">&#10003;</text>


<circle id="wheel-rear-right" class="car-part" cx="525" cy="620" r="40"></circle>

<text class="panel-label" x="525" y="620">REAR RIGHT<tspan x="525" dy="1.2em">WHEEL</tspan></text>

<text class="checkmark" x="525" y="620">&#10003;</text>


</svg>

</div>


<div class="text-center mt-8">

<button id="reset-button" class="bg-yellow-400 text-black font-bold py-3 px-6 rounded-lg shadow-md hover:bg-yellow-500 transition duration-300">

Reset All Selections

</button>

</div>

</div>


<script>

document.addEventListener('DOMContentLoaded', () => {

const panels = document.querySelectorAll('.car-part'); // Select SVG paths/polygons

const resetButton = document.getElementById('reset-button');


panels.forEach(panel => {

panel.addEventListener('click', () => {

panel.classList.toggle('selected');

});

});


resetButton.addEventListener('click', () => {

panels.forEach(panel => {

panel.classList.remove('selected');

});

});

});

</script>

</body>

</html>

A sleek black sports car with custom modifications is displayed indoors. The car's hood is open, revealing intricate detailing, and it features red accents on the wheels. People in casual attire are casually interacting and observing around the car. A vibrant booth with pink and neon colors serves as a backdrop, advertising a brand with banners and signs.
A sleek black sports car with custom modifications is displayed indoors. The car's hood is open, revealing intricate detailing, and it features red accents on the wheels. People in casual attire are casually interacting and observing around the car. A vibrant booth with pink and neon colors serves as a backdrop, advertising a brand with banners and signs.
Car Wraps

Vibrant wraps that enhance your car's appearance beautifully.

A white car with custom modifications is parked in a dimly lit urban setting. The vehicle features underglow neon lights that emit a red hue, highlighting its sporty design and aftermarket wheels. The scene has a soft blue and orange ambience due to overhead lighting.
A white car with custom modifications is parked in a dimly lit urban setting. The vehicle features underglow neon lights that emit a red hue, highlighting its sporty design and aftermarket wheels. The scene has a soft blue and orange ambience due to overhead lighting.
Window Tints

Protect your interior and enhance privacy with stylish tints.

A sleek, modified car is prominently displayed with its polished alloy wheels and distinctive decals. The setting is an indoor car show with several other vehicles and people in the background, including individuals examining the cars and engaging in conversations.
A sleek, modified car is prominently displayed with its polished alloy wheels and distinctive decals. The setting is an indoor car show with several other vehicles and people in the background, including individuals examining the cars and engaging in conversations.
A car exhibition features a row of modified cars. A black car with a reflective, chameleon paint job is prominently displayed with its hood open, showcasing a clean engine bay. The surrounding cars are also modified, including a noticeable orange car. People are casually walking and observing the cars in an outdoor parking lot setting.
A car exhibition features a row of modified cars. A black car with a reflective, chameleon paint job is prominently displayed with its hood open, showcasing a clean engine bay. The surrounding cars are also modified, including a noticeable orange car. People are casually walking and observing the cars in an outdoor parking lot setting.
Paint Protection

Keep your car's paint flawless with our protective films.

Ceramic Coating

Long-lasting shine and protection for your vehicle's surface.

→
→
→
→

Customer Reviews

See what our clients say about our auto styling services.

Absolutely loved the car wrap! Habazzi transformed my vehicle beautifully.

John Doe
A front view of a customized red SUV with black accents. The car has a prominent grille with multiple horizontal slots, a hood scoop, and a roof-mounted cargo box. The windshield has decals, including 'STNCSG,' and a piece of paper placed on the dashboard. The background includes a wall with vertical wooden panels and part of a ceiling structure.
A front view of a customized red SUV with black accents. The car has a prominent grille with multiple horizontal slots, a hood scoop, and a roof-mounted cargo box. The windshield has decals, including 'STNCSG,' and a piece of paper placed on the dashboard. The background includes a wall with vertical wooden panels and part of a ceiling structure.

Staten Island

The ceramic coating made my car shine like new! Highly recommend Habazzi.

A custom car show with a sleek, dark gray sports car prominently displayed. The car has black tinted windows and low-profile tires with shiny rims. Surrounding the car are banners and canopies with logos and branding, indicating a promotional setup. A crowd of people in casual attire gathers around, engaging with the exhibits.
A custom car show with a sleek, dark gray sports car prominently displayed. The car has black tinted windows and low-profile tires with shiny rims. Surrounding the car are banners and canopies with logos and branding, indicating a promotional setup. A crowd of people in casual attire gathers around, engaging with the exhibits.
Jane Smith

New York

★★★★★
★★★★★

Contact Us Today!

Reach out for auto styling inquiries, appointments, or customizations. We're excited to help you transform your vehicle into a masterpiece!

Connect

1234567890

Inquire

info@habazzi.com

info@habazzishop.com

INFO

© 2025. All rights reserved.

917-722-5825

3400 Richmond Ter, Staten Island, NY 10303

<img src="https://tracker.metricool.com/c3po.jpg?hash=dff9485562ffce3e238b49531c0fe42e"/>