forked from vimal-java-dev/portfolio
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathservices.html
More file actions
172 lines (157 loc) · 6.64 KB
/
services.html
File metadata and controls
172 lines (157 loc) · 6.64 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vimal Tech • Services</title>
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
<!-- CSS -->
<link rel="stylesheet" href="/css/services.css">
<link rel="stylesheet" href="/css/common.css">
<link rel="stylesheet" href="/css/dropdown.css">
<link rel="stylesheet" href="/css/live-projects.css">
<!-- Popup Window CSS -->
<link rel="stylesheet" href="/css/open-modal-btn.css">
<link rel="stylesheet" href="/css/whatsapp-floating.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Particles.js Library -->
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
</head>
<style>
a {
color: sandybrown;
}
a:hover {
color: blue;
}
</style>
<body>
<!-- Navbar -->
<nav class="navbar">
<div>
<a href="index.html" class="brand">
<img src="/images/logo.jpeg" alt="Brand Logo" class="logo">
<span class="brand-name">Vimal Tech</span>
</a>
</div>
<ul class="nav-links" id="nav-links">
<li><a href="index.html">Home</a></li>
<!-- Dropdown Section -->
<li class="dropdown">
<a href="#hero" class="dropdown-toggle active;">Services</a>
<ul class="dropdown-menu">
<li><a href="#services-offer">Offer Services</a></li>
<li><a href="#live-projects">Live</a></li>
</ul>
</li>
<!-- New Expertise link -->
<li><a href="expertise.html">Expertise</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
</ul>
<!-- hamburger icon -->
<div style="display: flex; align-items: center;">
<div class="hamburger" id="hamburger">☰</div>
</div>
</nav>
<!-- Hero Section with Particles + Animated Overlay -->
<section id="hero" class="hero-services">
<div id="particles-js"></div>
<div class="gradient-overlay"></div>
<div class="hero-content">
<h1>Our <span class="highlight">Professional Services</span></h1>
<p>Delivering scalable, secure, and modern efficient solutions for web, mobile, and enterprise systems.
</p>
</div>
</section>
<!-- Services Section -->
<section id="services-offer" class="container">
<h2 class="section-title fade-in">Services We Offer</h2>
<p class="fade-in">Explore our expertise to scale your projects efficiently:</p>
<div class="services-grid">
<div class="service-card fade-in" style="--delay:0s;">
<i class="fas fa-server"></i>
<h3>Backend Development</h3>
<p>Scalable applications using Java, Spring Boot, and Microservices.</p>
</div>
<div class="service-card fade-in" style="--delay:0.1s;">
<i class="fas fa-cloud"></i>
<h3>Cloud Integration</h3>
<p>Deploy and manage apps efficiently on AWS and cloud platforms.</p>
</div>
<div class="service-card fade-in" style="--delay:0.2s;">
<i class="fas fa-database"></i>
<h3>Database Management</h3>
<p>Relational and NoSQL database design & management.</p>
</div>
<div class="service-card fade-in" style="--delay:0.3s;">
<i class="fas fa-project-diagram"></i>
<h3>Project Consulting</h3>
<p>Architecture guidance and microservices design for enterprise projects.</p>
</div>
<div class="service-card fade-in" style="--delay:0.4s;">
<i class="fas fa-code"></i>
<h3>API Development</h3>
<p>RESTful APIs and integrations for modern web & mobile apps.</p>
</div>
<div class="service-card fade-in" style="--delay:0.5s;">
<i class="fas fa-shield-alt"></i>
<h3>Security & Optimization</h3>
<p>Secure, optimized, and maintainable solutions following best practices.</p>
</div>
</div>
</section><br />
<!-- Live Projects Section -->
<section id="live-projects" class="container fade-in live-projects counter-container">
<div class="live-projects-card">
<h2>Live Websites</h2>
<!-- Button to open modal -->
<button class="open-modal-btn">Tap to Open</button>
</div>
</section><br />
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-content">
<span class="close">×</span>
<div class="cta-section fade-in" style="--delay:0.6s; margin-bottom: 60px;">
<a href="https://sumanenterprise.vercel.app/" target="_blank" class="btn">
Suman Enterprise
</a><br /><br /><br />
<a href="https://chaimakers.vercel.app/" target="_blank" class="btn">
Chai Makers Café
</a><br /><br /><br />
<a href="https://alexfoodcorner.netlify.app/" target="_blank" class="btn">
Alex Food Corner
</a>
</div>
</div>
</div>
<!-- Floating WhatsApp -->
<a href="https://wa.me/919638474047?text=Hello%20Vimal%2C%0AI%20would%20like%20to%20know%20more%20about%20your%20tech%20services."
class="whatsapp-float" target="_blank">
<i class="fab fa-whatsapp"></i>
</a>
<!-- Footer -->
<footer>
<p>Contact No : 9638 474047</p>
<p>Email ID : vimal.patel@vimaltech.dev</p>
<p>© 2025 Vimal Patel | Java Developer</p>
</footer>
<!-- Dark Mode Toggle & ScrollTop Button -->
<button id="darkModeToggle" class="tooltip">🌙</button>
<!-- Scroll to Top Button -->
<button id="scrollTopBtn" title="Go to top">
<i class="fas fa-arrow-up"></i>
</button>
<!-- JS -->
<script src="/js/common.js"></script>
<!-- Popup Window JS -->
<script src="/js/open-modal-btn.js"></script>
<script src="/js/dropdown.js"></script>
<script src="/js/services.js"></script>
</body>
</html>