-
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
342 lines (308 loc) · 20.9 KB
/
index.html
File metadata and controls
342 lines (308 loc) · 20.9 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
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Super Hosting</title>
<!-- Choose either Tailwind or Bootstrap -->
<!-- Tailwind CSS (Recommended for customization)-->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<!-- Bootstrap CSS (Alternatively) -->
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> -->
<link rel="stylesheet" href="style.css">
</head>
<body class="bg-gray-50">
<!-- Navbar -->
<nav class="bg-white shadow-md py-4">
<div class="container mx-auto flex items-center justify-between px-4">
<!-- Logo on the Left -->
<a href="/" class="flex-shrink-0 mr-4">
<img src="images/logo.png" alt="Super Hosting Logo" class="h-14 pl-4">
</a>
<!-- Hamburger Menu Icon (Hidden on Large Screens) -->
<button id="menu-toggle" class="lg:hidden text-gray-700 focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
</button>
<!-- Centered Menu (Initially Hidden on Small Screens) -->
<div id="nav-links" class="nav-links lg:flex space-x-8 hidden lg:block">
<a href="#" class="text-gray-700 hover:text-blue-600 transition duration-200">Home</a>
<div class="relative group nav-item-hosting">
<a href="#" class="text-gray-700 hover:text-blue-600 transition duration-200">Hosting</a>
<!-- Submenu with a fixed height and overflow-y: auto -->
<div class="submenu-hosting absolute left-0 mt-2 w-48 bg-white shadow-lg">
<div class="submenu-content">
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Shared Hosting</a>
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Managed Hosting</a>
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">VPS Hosting: Unmanaged</a>
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">VPS Hosting: Managed</a>
</div>
</div>
</div>
<a href="#" class="text-gray-700 hover:text-blue-600 transition duration-200">Technology</a>
<a href="#" class="text-gray-700 hover:text-blue-600 transition duration-200">Help Center</a>
</div>
<!-- Right-aligned Actions -->
<div class="flex items-center space-x-4 navbar-actions">
<!-- Language selector -->
<select class="bg-gray-100 border border-gray-300 text-gray-700 rounded leading-tight focus:outline-none focus:border-blue-500">
<option value="en">EN</option>
<option value="ro">RO</option>
</select>
<a href="#" class="text-gray-700 hover:text-blue-600 transition duration-200">Login</a>
<a href="#" class="bg-blue-500 hover:bg-blue-600 text-white rounded transition duration-200 flex items-center">
<span class="get-started-text px-3 py-2">Sign up</span>
<span class="px-2 py-2 sm:hidden">→</span>
</a>
</div>
</div>
</nav>
<div id="content-wrapper">
<!-- Hero Section -->
<section id="hero-section"class="py-20 text-center bg-gradient-to-r from-blue-100 to-gray-100">
<div class="container mx-auto">
<h1 class="text-4xl font-bold mb-6 text-gray-800">Experience Reliable Hosting Solutions</h1>
<p class="text-xl text-gray-600 mb-10">
We provide top-tier web hosting services designed for performance and reliability.
</p>
<a href="#hosting-plans" class="bg-blue-500 hover:bg-blue-600 text-white py-3 px-8 rounded-md text-xl transition duration-200">View Plans</a>
</div>
</section>
<!-- Features -->
<section id="features-section" class="py-16 bg-white">
<div class="container mx-auto">
<!-- Centered Title -->
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Why Choose Us?</h2>
<!-- Centered Cards -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 justify-items-center">
<div class="feature-card text-center p-6 bg-gray-100 rounded-lg shadow w-full md:w-auto">
<img src="images/icon-speed.png" alt="Speed Icon" class="h-12 mx-auto mb-4">
<h3 class="text-xl font-semibold text-gray-700 mb-2">Lightning-Fast Servers</h3>
<p class="text-gray-600">Our servers are optimized for maximum speed and performance.</p>
</div>
<div class="feature-card text-center p-6 bg-gray-100 rounded-lg shadow w-full md:w-auto">
<img src="images/icon-uptime.png" alt="Uptime Icon" class="h-12 mx-auto mb-4" style="position: relative; left: 20px;">
<h3 class="text-xl font-semibold text-gray-700 mb-2">99.9% Uptime Guarantee</h3>
<p class="text-gray-600">Count on us to keep your website online and accessible 24/7.</p>
</div>
<div class="feature-card text-center p-6 bg-gray-100 rounded-lg shadow w-full md:w-auto">
<img src="images/icon-support.png" alt="Support Icon" class="h-12 mx-auto mb-4">
<h3 class="text-xl font-semibold text-gray-700 mb-2">24/7 Expert Support</h3>
<p class="text-gray-600">Our support team is available to assist you with any issues.</p>
</div>
</div>
</div>
</section>
<!-- Hosting Plans -->
<section id="hosting-plans" class="py-16 bg-gray-100 hosting-plans-container">
<div class="container mx-auto text-center">
<h2 class="section-title text-3xl font-bold text-center text-gray-800 mb-4">Our Hosting Plans</h2>
<h3 class="text-2xl font-semibold text-center text-gray-700 mb-8 shared-unmanaged-hosting-title">Shared Unmanaged Hosting</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 justify-center shared-unmanaged-hosting">
<div class="bg-white rounded-lg shadow-md p-8">
<h3 class="text-2xl font-semibold text-gray-700 mb-4">Stellar Start</h3>
<p class="text-4xl font-bold text-blue-500 mb-4"> 4€<span class="text-sm font-normal"> /month</span></p>
<ul class="list-disc list-inside mb-6 text-gray-600">
<li>10 GB SSD Storage</li>
<li>10 mailboxes ( 100 MB each )</li>
<li>1 live & 1 staging website</li>
<li class="bg-blue-100 text-blue-600 font-semibold px-3 py-1 rounded inline-block">Unlimited Bandwith</li>
<li class="bg-blue-300 text-blue-600 font-semibold px-3 py-1 rounded inline-block">Unlimited Page Views</li>
<li class="bg-blue-100 text-blue-600 font-semibold px-3 py-1 rounded inline-block">Unlimited Subdomains</li>
<li class="bg-blue-300 text-blue-600 font-semibold px-3 py-1 rounded inline-block">CPGuard Protection</li>
<li>Basic Support</li>
</ul>
<a href="https://billing.superhosting.vip/cart.php?a=add&pid=1" class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-6 rounded-lg transition duration-200">Order Now</a>
</div>
<div class="bg-white rounded-lg shadow-md p-8">
<h3 class="text-2xl font-semibold text-gray-700 mb-4">Stellar Standard</h3>
<p class="text-4xl font-bold text-blue-500 mb-4">6€<span class="text-sm font-normal"> /month</span></p>
<ul class="list-disc list-inside mb-6 text-gray-600">
<li>30 GB SSD Storage</li>
<li> 30 mailboxes ( 200 MB/ each )</li>
<li>2 Websites & 2 Staging Sites</li>
<li class="bg-blue-100 text-blue-600 font-semibold px-3 py-1 rounded inline-block">Unlimited Bandwith</li>
<li class="bg-blue-300 text-blue-600 font-semibold px-3 py-1 rounded inline-block">Unlimited Page Views</li>
<li class="bg-blue-100 text-blue-600 font-semibold px-3 py-1 rounded inline-block">Unlimited Subdomains</li>
<li class="bg-blue-300 text-blue-600 font-semibold px-3 py-1 rounded inline-block">CPGuard Protection</li>
<li>Basic Support</li>
</ul>
<a href="https://billing.superhosting.vip/cart.php?a=add&pid=2" class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-6 rounded-lg transition duration-200">Order Now</a>
</div>
<div class="bg-white rounded-lg shadow-md p-8">
<h3 class="text-2xl font-semibold text-gray-700 mb-4">Advanced</h3>
<p class="text-4xl font-bold text-blue-500 mb-4">10€<span class="text-sm font-normal"> /month</span></p>
<ul class="list-disc list-inside mb-6 text-gray-600">
<li>50 GB SSD Storage</li>
<li> 50 mailboxes ( 200 MB/ each )</li>
<li> 3 Websites & 3 Staging Sites</li>
<li class="bg-blue-100 text-blue-600 font-semibold px-3 py-1 rounded inline-block">Unlimited Bandwith</li>
<li class="bg-blue-300 text-blue-600 font-semibold px-3 py-1 rounded inline-block">Unlimited Page Views</li>
<li class="bg-blue-100 text-blue-600 font-semibold px-3 py-1 rounded inline-block">Unlimited Subdomains</li>
<li class="bg-blue-300 text-blue-600 font-semibold px-3 py-1 rounded inline-block">CPGuard Protection</li>
<li>Basic Support</li>
</ul>
<a href="https://billing.superhosting.vip/cart.php?a=add&pid=3" class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-6 rounded-lg transition duration-200">Order Now</a>
</div>
</div>
<h3 class="text-2xl font-semibold text-center text-gray-700 mb-8">Shared Managed Hosting</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 justify-center">
<div class="bg-white rounded-lg shadow-md p-8">
<h3 class="text-2xl font-semibold text-gray-700 mb-4">Basic</h3>
<p class="text-4xl font-bold text-blue-500 mb-4">€19<span class="text-sm font-normal"> /month</span></p>
<ul class="list-disc list-inside mb-6 text-gray-600">
<li>10 GB SSD Storage</li>
<li>Unlimited Bandwidth</li>
<li>1 Website</li>
<li>Basic Support</li>
</ul>
<a href="https://billing.superhosting.vip/cart.php?a=add&pid=4" class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-6 rounded-lg transition duration-200">Order Now</a>
</div>
<div class="bg-white rounded-lg shadow-md p-8">
<h3 class="text-2xl font-semibold text-gray-700 mb-4">Standard</h3>
<p class="text-4xl font-bold text-blue-500 mb-4">€29<span class="text-sm font-normal"> /month</span></p>
<ul class="list-disc list-inside mb-6 text-gray-600">
<li>50 GB SSD Storage</li>
<li>Unlimited Bandwidth</li>
<li>5 Websites</li>
<li>Premium Support</li>
</ul>
<a href="https://billing.superhosting.vip/cart.php?a=add&pid=5" class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-6 rounded-lg transition duration-200">Order Now</a>
</div>
<div class="bg-white rounded-lg shadow-md p-8">
<h3 class="text-2xl font-semibold text-gray-700 mb-4">Advanced</h3>
<p class="text-4xl font-bold text-blue-500 mb-4">€49<span class="text-sm font-normal"> /month</span></p>
<ul class="list-disc list-inside mb-6 text-gray-600">
<li>100 GB SSD Storage</li>
<li>Unlimited Bandwidth</li>
<li>10 Websites</li>
<li>VIP Support</li>
</ul>
<a href="https://billing.superhosting.vip/cart.php?a=add&pid=6" class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-6 rounded-lg transition duration-200">Order Now</a>
</div>
</div>
</div>
</section>
<!-- VPS Plans -->
<section class="py-16 bg-gray-100">
<div class="hosting-plans-container container mx-auto text-center">
<h2 class="text-3xl font-bold text-center text-gray-800 mb-4">Our VPS Plans</h2>
<h3 class="text-2xl font-semibold text-center text-gray-700 mb-8 unmanaged-vps-hosting-title">Unmanaged VPS Hosting</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 justify-center unmanaged-vps-hosting">
<div class="bg-white rounded-lg shadow-md p-8">
<h3 class="text-2xl font-semibold text-gray-700 mb-4">Basic</h3>
<p class="text-4xl font-bold text-blue-500 mb-4">€19<span class="text-sm font-normal"> /month</span></p>
<ul class="list-disc list-inside mb-6 text-gray-600">
<li>10 GB SSD Storage</li>
<li>Unlimited Bandwidth</li>
<li>1 Website</li>
<li>Basic Support</li>
</ul>
<a href="https://billing.superhosting.vip/cart.php?a=add&pid=7" class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-6 rounded-lg transition duration-200">Order Now</a>
</div>
<div class="bg-white rounded-lg shadow-md p-8">
<h3 class="text-2xl font-semibold text-gray-700 mb-4">Standard</h3>
<p class="text-4xl font-bold text-blue-500 mb-4">€29<span class="text-sm font-normal"> /month</span></p>
<ul class="list-disc list-inside mb-6 text-gray-600">
<li>50 GB SSD Storage</li>
<li>Unlimited Bandwidth</li>
<li>5 Websites</li>
<li>Premium Support</li>
</ul>
<a href="https://billing.superhosting.vip/cart.php?a=add&pid=8" class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-6 rounded-lg transition duration-200">Order Now</a>
</div>
<div class="bg-white rounded-lg shadow-md p-8">
<h3 class="text-2xl font-semibold text-gray-700 mb-4">Advanced</h3>
<p class="text-4xl font-bold text-blue-500 mb-4">€49<span class="text-sm font-normal"> /month</span></p>
<ul class="list-disc list-inside mb-6 text-gray-600">
<li>100 GB SSD Storage</li>
<li>Unlimited Bandwidth</li>
<li>10 Websites</li>
<li>VIP Support</li>
</ul>
<a href="https://billing.superhosting.vip/cart.php?a=add&pid=9" class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-6 rounded-lg transition duration-200">Order Now</a>
</div>
</div>
<h3 class="text-2xl font-semibold text-center text-gray-700 mb-8">Managed VPS Hosting</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 justify-center">
<div class="bg-white rounded-lg shadow-md p-8">
<h3 class="text-2xl font-semibold text-gray-700 mb-4">Basic</h3>
<p class="text-4xl font-bold text-blue-500 mb-4">€19<span class="text-sm font-normal"> /month</span></p>
<ul class="list-disc list-inside mb-6 text-gray-600">
<li>10 GB SSD Storage</li>
<li>Unlimited Bandwidth</li>
<li>1 Website</li>
<li>Basic Support</li>
</ul>
<a href="https://billing.superhosting.vip/cart.php?a=add&pid=10" class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-6 rounded-lg transition duration-200">Order Now</a>
</div>
<div class="bg-white rounded-lg shadow-md p-8">
<h3 class="text-2xl font-semibold text-gray-700 mb-4">Standard</h3>
<p class="text-4xl font-bold text-blue-500 mb-4">€29<span class="text-sm font-normal"> /month</span></p>
<ul class="list-disc list-inside mb-6 text-gray-600">
<li>50 GB SSD Storage</li>
<li>Unlimited Bandwidth</li>
<li>5 Websites</li>
<li>Premium Support</li>
</ul>
<a href="https://billing.superhosting.vip/cart.php?a=add&pid=11" class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-6 rounded-lg transition duration-200">Order Now</a>
</div>
<div class="bg-white rounded-lg shadow-md p-8">
<h3 class="text-2xl font-semibold text-gray-700 mb-4">Advanced</h3>
<p class="text-4xl font-bold text-blue-500 mb-4">€49<span class="text-sm font-normal"> /month</span></p>
<ul class="list-disc list-inside mb-6 text-gray-600">
<li>100 GB SSD Storage</li>
<li>Unlimited Bandwidth</li>
<li>10 Websites</li>
<li>VIP Support</li>
</ul>
<a href="https://billing.superhosting.vip/cart.php?a=add&pid=12" class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-6 rounded-lg transition duration-200">Order Now</a>
</div>
</div>
</div>
</section>
<footer class="bg-[#ff4500] py-8 md:py-12 lg:py-16">
<div class="container mx-auto px-4 md:px-6">
<!-- Three Column Menu Section -->
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 md:gap-8">
<!-- Column 1 - Latest News -->
<div class="text-center md:text-left">
<h3 class="text-white font-semibold text-lg md:text-xl mb-4">Latest News</h3>
<ul class="space-y-3">
<li><a href="#" class="text-white/80 hover:text-white transition-colors duration-300">Company News</a></li>
<li><a href="#" class="text-white/80 hover:text-white transition-colors duration-300">Product Updates</a></li>
<li><a href="#" class="text-white/80 hover:text-white transition-colors duration-300">Tech Blog</a></li>
</ul>
</div>
<!-- Column 2 - Best Sellers -->
<div class="text-center md:text-left">
<h3 class="text-white font-semibold text-lg md:text-xl mb-4">Best Sellers</h3>
<ul class="space-y-3">
<li><a href="#" class="text-white/80 hover:text-white transition-colors duration-300">Shared Hosting</a></li>
<li><a href="#" class="text-white/80 hover:text-white transition-colors duration-300">VPS Hosting</a></li>
<li><a href="#" class="text-white/80 hover:text-white transition-colors duration-300">Dedicated Servers</a></li>
</ul>
</div>
<!-- Column 3 - Connect With Us -->
<div class="text-center md:text-left">
<h3 class="text-white font-semibold text-lg md:text-xl mb-4">Connect With Us</h3>
<ul class="space-y-3">
<li><a href="#" class="text-white/80 hover:text-white transition-colors duration-300">Help Center</a></li>
<li><a href="#" class="text-white/80 hover:text-white transition-colors duration-300">Documentation</a></li>
<li><a href="#" class="text-white/80 hover:text-white transition-colors duration-300">Contact Support</a></li>
</ul>
</div>
</div>
<!-- Copyright Section -->
<div class="mt-8 md:mt-12 pt-6 md:pt-8 border-t border-white/20">
<p class="text-white/80 text-center text-sm md:text-base">
Copyright 2025 VIP Super Hosting. All rights reserved.
</p>
</div>
</div>
</footer>
<!-- (Bootstrap JS) -->
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> -->
<script src="menu.js"></script>
<!-- Make sure the path is correct -->
</body>
</html>