-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathModify.html
More file actions
185 lines (171 loc) · 12.6 KB
/
Modify.html
File metadata and controls
185 lines (171 loc) · 12.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modify</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css ">
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* Custom transition for the dropdown */
.dropdown-menu {
transition: max-height 0.3s ease-out;
}
</style>
</head>
<body class="bg-gray-200">
<nav class="bg-gray-800 p-2">
<div class="container mx-auto flex justify-between items-center py-2">
<ul class="hidden sm:flex space-x-4">
<li><a href="index.html" class="text-white hover:bg-gray-700 px-3 py-2 rounded">Home</a></li>
<li><a href="#collections" class="text-white hover:bg-gray-700 px-3 py-2 rounded">Collections</a></li>
</ul>
<div class="text-center sm:text-left text-white lg:text-2xl md:text-[23px]">Horizon Auto Group</div>
<ul class="hidden sm:flex space-x-4">
<li><a href="#about" class="text-white hover:bg-gray-700 px-3 py-2 rounded">About</a></li>
<li><a href="#contact" class="text-white hover:bg-gray-700 px-3 py-2 rounded">Contact</a></li>
</ul>
<div class="sm:hidden text-white">
<i class="fa-solid fa-bars pr-2 sm:text-xl cursor-pointer" id="menu-toggle"></i>
</div>
</div>
<div class="hidden sm:hidden transition-max-height duration-300 ease-out" id="mobile-menu">
<ul class="space-y-2 p-2">
<li><a href="index.html" class="text-white hover:bg-gray-700 block px-3 py-2 rounded">Home</a></li>
<li><a href="#collections" class="text-white hover:bg-gray-700 block px-3 py-2 rounded">Collections</a></li>
<li><a href="#about" class="text-white hover:bg-gray-700 block px-3 py-2 rounded">About</a></li>
<li><a href="#contact" class="text-white hover:bg-gray-700 block px-3 py-2 rounded">Contact</a></li>
</ul>
</div>
</nav>
<div class="mx-w-[1260px] mx-auto">
<h1 class="text-center py-5 text-4xl pb-10">Mods avaliable:</h1>
<div class="max-w-[1260px] mx-auto grid lg:grid-cols-4 md:grid-cols-2 sm:grid-cols-2 gap-5 p-5">
<div class="bg-white shadow-2xl rounded-lg overflow-hidden hover:bg-gray-200 duration-700">
<div class="overflow-hidden">
<img src="https://aldanamerican.com/wp-content/uploads/2020/04/muscle-car-suspension.jpg" alt="Skoda" class="w-full h-48 object-cover hover:scale-110 duration-1000 ">
</div>
<div class="p-5">
<h3 class="text-xl font-bold mb-2">Suspension upgrade</h3>
<p class="text-gray-700 mb-4">The Tesla Model S Plaid combines blistering speed, cutting-edge technology, and long-range capabilities, setting new benchmarks for electric performance sedans globally.</p>
<button class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-red-600 hover:scale-110 duration-1000 ">Add on</button>
</div>
</div>
<div class="bg-white shadow-lg rounded-lg overflow-hidden hover:bg-gray-200 duration-700">
<div class="overflow-hidden">
<img src="https://qph.cf2.quoracdn.net/main-qimg-6d95bcdc4dfb4486cbd6c4719b4290b7" alt="XUV" class="w-full h-48 object-cover hover:scale-110 duration-1000 ">
</div>
<div class="p-5">
<h3 class="text-xl font-bold mb-2">Turbochargers / Superchargers</h3>
<p class="text-gray-700 mb-4">
The BMW iX showcases futuristic design, advanced electric drivetrain, sustainability, and impressive range for modern electric vehicle enthusiasts.</p>
<button class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-red-600 hover:scale-110 duration-1000 ">Add on</button>
</div>
</div>
<div class="bg-white shadow-lg rounded-lg overflow-hidden hover:bg-gray-200 duration-700">
<div class="overflow-hidden">
<img src="https://bmwi.bimmerpost.com/forums/attachment.php?s=aaf81a74235cf2935224416583df3bec&attachmentid=2664941&stc=1&d=1628110015" alt="Ford" class="w-full h-48 object-cover hover:scale-110 duration-1000 ">
</div>
<div class="p-5">
<h3 class="text-xl font-bold mb-2">Sports seats</h3>
<p class="text-gray-700 mb-4">The Mercedes-Benz EQS 580 epitomizes luxury and innovation in electric mobility, featuring exquisite design, and a spacious, sustainable driving experience with impressive performance and range.</p>
<button class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-red-600 hover:scale-110 duration-1000 ">Add on</button>
</div>
</div>
<div class="bg-white shadow-lg rounded-lg overflow-hidden hover:bg-gray-200 duration-700">
<div class="overflow-hidden">
<img src="https://www.rg3collisionrepair.com/wp-content/uploads/2023/08/AdobeStock_223160543_FRONT-BUMPER-PAINT-TRI-STAGE-OR-RED-min-1-optimized.jpeg" alt="Jeep" class="w-full h-48 object-cover hover:scale-110 duration-1000 ">
</div>
<div class="p-5">
<h3 class="text-xl font-bold mb-2">Paint Jobs</h3>
<p class="text-gray-700 mb-4">
The Mercedes-Benz EQG combines iconic off-road capability with electric power, offering rugged durability, and sustainable performance for adventurous electric vehicle enthusiasts.</p>
<button class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-red-600 hover:scale-110 duration-1000 ">Add on</button>
</div>
</div>
</div>
<div class="max-w-[1260px] mx-auto grid lg:grid-cols-4 md:grid-cols-2 sm:grid-cols-2 gap-5 p-5">
<div class="bg-white shadow-2xl rounded-lg overflow-hidden hover:bg-gray-200 duration-700">
<div class="overflow-hidden">
<img src="https://bravoprotectionmn.com/wp-content/uploads/2021/03/How-Window-Tint-Works-5-scaled.jpg" class="w-full h-48 object-cover hover:scale-110 duration-1000 ">
</div>
<div class="p-5">
<h3 class="text-xl font-bold mb-2">Window Tint</h3>
<p class="text-gray-700 mb-4">The Tata Nexon EV blends affordability with eco-friendliness, featuring a practical SUV design, commendable range, and modern amenities, ideal for urban commuting with zero emissions.</p>
<button class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-red-600 hover:scale-110 duration-1000 ">Add on</button>
</div>
</div>
<div class="bg-white shadow-lg rounded-lg overflow-hidden hover:bg-gray-200 duration-700">
<div class="overflow-hidden">
<img src="https://static.overfuel.com/dealers/indy-auto-man/image/nos-system.jpg" alt="XUV" class="w-full h-48 object-cover hover:scale-110 duration-1000 ">
</div>
<div class="p-5">
<h3 class="text-xl font-bold mb-2">Nitrous oxide</h3>
<p class="text-gray-700 mb-4">
The Hyundai Kona Electric offers stylish design, impressive range, and advanced technology, making it a versatile and eco-friendly choice in the compact SUV segment.</p>
<button class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-red-600 hover:scale-110 duration-1000 ">Add on</button>
</div>
</div>
<div class="bg-white shadow-lg rounded-lg overflow-hidden hover:bg-gray-200 duration-700">
<div class="overflow-hidden">
<img src="https://cdn.jdpower.com/How%20Many%20Catalytic%20Converters%20Does%20A%20Car%20Have.jpg" alt="Ford" class="w-full h-48 object-cover hover:scale-110 duration-1000 ">
</div>
<div class="p-5">
<h3 class="text-xl font-bold mb-2">Altering Emissions or the Catalytic Converter</h3>
<p class="text-gray-700 mb-4">The BYD Seal Champion Edition combines sleek design, efficient electric powertrain, and advanced features for a sustainable and modern driving experience.</p>
<button class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-red-600 hover:scale-110 duration-1000 ">Add on</button>
</div>
</div>
<div class="bg-white shadow-lg rounded-lg overflow-hidden hover:bg-gray-200 duration-700">
<div class="overflow-hidden">
<img src="https://productimages.withfloats.com/tile/628cb3b8b8d6a40001d131ab.jpg" alt="Jeep" class="w-full h-48 object-cover hover:scale-110 duration-1000 ">
</div>
<div class="p-5">
<h3 class="text-xl font-bold mb-2">Ambient light application</h3>
<p class="text-gray-700 mb-4">
The Tesla Cybertruck revolutionizes the pickup segment with its bold design, robust electric performance, and cutting-edge tech, redefining expectations for electric trucks globally.</p>
<button class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-red-600 hover:scale-110 duration-1000 ">Add on</button>
</div>
</div>
</div>
<hr>
<!-- end -->
<hr><div class="container mx-auto py-8">
<h2 class="text-2xl font-bold mb-4 pl-3 text-center sm:text-left">Leave a Reply</h2>
<p class="mb-4 pl-3 text-center sm:text-left pb-2">Your email address will not be published. Required fields are marked *</p>
<form class="flex flex-wrap mb-4">
<div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
<label for="name" class="block text-gray-700 text-sm font-bold mb-2">Name *</label>
<input type="text" id="name" name="name" class="w-full px-3 py-2 border rounded-md text-gray-700 focus:outline-none focus:border-blue-500">
</div>
<div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
<label for="email" class="block text-gray-700 text-sm font-bold mb-2">Email Address *</label>
<input type="email" id="email" name="email" class="w-full px-3 py-2 border rounded-md text-gray-700 focus:outline-none focus:border-blue-500">
</div>
</form>
<div class="mb-4 pr-3 pl-3">
<label for="comment" class="block text-gray-700 text-sm font-bold mb-2">Comment</label>
<textarea id="comment" name="comment" rows="4" class="w-full px-3 py-2 border rounded-md text-gray-700 focus:outline-none focus:border-blue-500"></textarea>
</div>
<button type="submit" class="bg-gray-500 hover:bg-blue-700 text-white px-4 py-2 ml-4 rounded-md hover:scale-110 duration-500">Submit</button>
</div>
<!-- end -->
<hr><section>
<div class="container mx-auto bg-gray-500">
<div class="terms bg-white shadow-md rounded-md p-6">
<h2 class="text-2xl font-bold mb-4">Terms and Conditions</h2>
<p class="mb-4">Users must agree to terms and conditions; content accuracy not guaranteed and subject to change without notice.</p>
<p class="mb-4">Horizon Auto Group is not liable for any damages arising from the use or inability to use the website.</p>
<p class="mb-4">All website content, including logos and images, is protected by copyright and must not be used without permission.</p>
<p class="mb-4">Users must not post any unlawful, harmful, or offensive material; such content will be removed.</p>
<p class="mb-4">By using this website, you agree to comply with all applicable laws and regulations governing its use.</p>
</div>
<div class="mt-8 text-center text-white pb-8">
<p>© 2024 Horizon Auto Group. All rights reserved.</p>
</div>
</div>
</section>
<script src="Modify.js"></script>
</body>
</html>