Skip to content

Commit f37f1fa

Browse files
simpaticohrsimpaticohr
authored
Update index.html
1 parent d433da2 commit f37f1fa

1 file changed

Lines changed: 277 additions & 76 deletions

File tree

‎index.html‎

Lines changed: 277 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,97 +1,298 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
4+
<meta charset="utf-8" />
5+
<meta name="google-site-verification" content="W2MGk2YOgv_eBdixI_ToSnSiXOm_XZZ_27y-cX7Z5n8" />
6+
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
7+
<title>Simpatico HR Consultancy | Recruitment & HR Services in Perinthalmanna</title>
8+
<meta name="description" content="Simpatico HR Consultancy provides recruitment, staffing, RPO, and HR advisory services in Perinthalmanna, Kerala. Established in 2013.">
9+
<link rel="canonical" href="https://simpaticohr.github.io/Simpaticohrconsultancy-/" />
10+
11+
<meta property="og:type" content="business.business">
12+
<meta property="og:title" content="Simpatico HR Consultancy | Recruitment & HR Services">
13+
<meta property="og:description" content="Expert RPO and Recruitment services in Perinthalmanna, Kerala. Established in 2013.">
14+
<meta property="og:url" content="https://simpaticohr.github.io/Simpaticohrconsultancy-/">
15+
<meta property="og:site_name" content="Simpatico HR Consultancy">
16+
<meta property="og:image" content="https://simpaticohr.github.io/Simpaticohrconsultancy-/simpatico_hr_banner.png">
617

7-
<meta name="google-site-verification" content="W0MGKzYOgv_mBdiXI_TeSR6IX0w_XZZ_27y" />
8-
<title>Simpatico HR Consultancy | Best Job Consultancy in Kerala</title>
9-
<meta name="description" content="Simpatico HR Consultancy: Kerala's trusted recruitment partner. Bridging the gap between talent and opportunity in Perinthalmanna and beyond.">
10-
<meta name="keywords" content="HR Consultancy Kerala, Job consultancy Perinthalmanna, Recruitment agency, Simpatico HR">
11-
<meta name="author" content="Simpatico HR Consultancy">
18+
<meta property="business:contact_data:street_address" content="Perinthalmanna">
19+
<meta property="business:contact_data:locality" content="Malappuram">
20+
<meta property="business:contact_data:region" content="Kerala">
21+
<meta property="business:contact_data:country_name" content="India">
22+
1223
<meta name="robots" content="index, follow">
13-
<link rel="canonical" href="https://simpaticohr.github.io/" />
1424

15-
<meta property="og:title" content="Simpatico HR Consultancy - Global Recruitment Experts">
16-
<meta property="og:description" content="Leading Kerala's global recruitment for IT, Healthcare, & Engineering sectors.">
17-
<meta property="og:image" content="https://simpaticohr.github.io/simpatico_hr_banner.png">
18-
<meta property="og:url" content="https://simpaticohr.github.io/">
19-
<meta property="og:type" content="website">
25+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
26+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
27+
28+
<style>
29+
:root{
30+
--header-h:72px;
31+
--header-h-mobile:60px;
32+
--accent:#0063b2;
33+
--accent2:#004a88;
34+
--radius:12px;
35+
--max-width:1200px;
36+
--hero-base-down:140px;
37+
--mobile-hero-base-down:120px;
38+
--mobile-menu-w:260px;
39+
--text-dark:#072433;
40+
--muted:#6b7280;
41+
}
42+
*{box-sizing:border-box}
43+
html,body{height:100%;margin:0;font-family:'Poppins',sans-serif;-webkit-font-smoothing:antialiased;color:var(--text-dark);background:#f3f7fb;scroll-behavior: smooth;}
44+
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
45+
img{max-width:100%;height:auto;display:block}
46+
47+
nav{position:fixed;inset:0 0 auto 0;height:var(--header-h);background:linear-gradient(180deg, rgba(0,51,102,0.98), rgba(0,51,102,0.9));backdrop-filter:blur(6px);z-index:99999}
48+
.nav-inner{max-width:var(--max-width);margin:0 auto;height:100%;display:flex;align-items:center;justify-content:space-between;padding:6px 20px;color:#fff}
49+
.brand{display:flex;gap:12px;align-items:center}
50+
.brand .title{font-weight:700;color:#fff;letter-spacing:0.2px}
51+
ul#nav-links{display:flex;gap:12px;list-style:none;margin:0;padding:0;align-items:center}
52+
ul#nav-links a{color:#eaf4ff;font-weight:600;padding:8px;border-radius:8px}
53+
.hamburger{display:none;width:44px;height:44px;border-radius:8px;background:transparent;border:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer}
54+
.nav-right{display:flex;gap:12px;align-items:center}
55+
.nav-right a{font-size:18px;color:#eaf4ff}
56+
57+
.hero{position:relative;height:76vh;min-height:420px;padding-top:var(--header-h);display:flex;align-items:flex-start;justify-content:center;overflow:hidden;color:#fff}
58+
.hero::before{
59+
content:"";
60+
position:absolute;inset:0;
61+
background-image:url("simpatico_hr_banner.png");
62+
background-size:cover;
63+
background-position:center center;
64+
filter:brightness(0.94) contrast(1.02);
65+
z-index:0;pointer-events:none;
66+
}
67+
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(2,6,23,0.17), rgba(2,6,23,0.06));z-index:1}
68+
.hero-inner{position:relative;z-index:2;max-width:var(--max-width);width:100%;padding:18px 24px;display:flex;gap:24px;align-items:flex-start;justify-content:flex-start;transform: translateY(var(--hero-base-down));transition: transform 360ms cubic-bezier(.2,.9,.2,1);}
69+
.glass{background:rgba(255,255,255,0.085);backdrop-filter:blur(6px);padding:20px;border-radius:var(--radius);box-shadow:0 18px 48px rgba(2,6,23,0.14);border:1px solid rgba(255,255,255,0.06);max-width:760px;width:100%}
70+
.hero-title{font-size:28px;font-weight:700;margin:0 0 8px;color:#fff;line-height:1.05;letter-spacing:0.2px}
71+
.hero-sub{margin:0 0 12px;color:#e9f3ff}
72+
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
73+
.btn{background:linear-gradient(90deg,var(--accent),var(--accent2));border:none;color:#fff;padding:10px 14px;border-radius:10px;font-weight:600;cursor:pointer;box-shadow:0 8px 20px rgba(6,38,79,0.14);transition: transform 0.2s;}
74+
.btn:active{transform: scale(0.98);}
75+
.btn-light{background:#fff;color:#072433;padding:10px 14px;border-radius:10px;border:none}
76+
77+
section{padding:56px 20px;max-width:var(--max-width);margin:0 auto;scroll-margin-top:calc(var(--header-h) + 12px)}
78+
h2{color:#06324f;margin:0 0 12px}
79+
.muted{color:var(--muted)}
80+
81+
.job-board{display:grid;grid-template-columns:1fr 360px;gap:18px}
82+
.jobs{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
83+
.job{background:#fff;padding:12px;border-radius:10px;border:1px solid #eef2f7;color:var(--text-dark)}
84+
form{background:#fff;padding:14px;border-radius:12px;border:1px solid #eef2f7}
85+
input,textarea,select{width:100%;padding:10px;border-radius:8px;border:1px solid #e6eef8;margin-bottom:8px;font-size:14px;font-family: inherit;}
86+
.file-name{font-size:13px;color:#374151;margin-top:6px}
2087

21-
<link rel="icon" type="image/png" href="favicon.png">
22-
<link rel="stylesheet" href="CSS/style.css">
23-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
88+
footer{padding:24px 20px;background:#071726;color:#cbd5e1;margin-top:18px}
89+
90+
.mobile-panel{position:fixed;top:0;left:-100%;width:var(--mobile-menu-w);height:100%;background:#06263f;z-index:100500;transition:left 320ms;padding:20px;color:#fff;display:flex;flex-direction:column;gap:12px}
91+
.mobile-panel.open{left:0}
92+
.mobile-panel .close-btn{align-self:flex-end;background:transparent;border:0;color:#fff;font-size:24px;cursor:pointer}
93+
.mobile-panel nav a{display:block;padding:12px 8px;border-bottom: 1px solid rgba(255,255,255,0.1)}
94+
.mobile-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:100400;display:none}
95+
.mobile-backdrop.show{display:block}
96+
97+
.typing-cursor{border-right:3px solid rgba(255,255,255,0.95);padding-right:6px}
98+
99+
@media (max-width:900px){
100+
ul#nav-links{display:none}
101+
.hamburger{display:flex}
102+
.hero{height:68vh}
103+
}
104+
@media (max-width:600px){
105+
nav{height:var(--header-h-mobile)}
106+
.hero-title{font-size:20px}
107+
.job-board{grid-template-columns:1fr}
108+
.jobs{grid-template-columns:1fr}
109+
.hero-inner{ transform: translateY(var(--mobile-hero-base-down)) !important; }
110+
}
111+
112+
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:20px;}
113+
.service-card{background:#fff;padding:20px;border-radius:12px;border:1px solid #eef2f7;display:flex;gap:15px;transition: 0.3s;}
114+
.service-card:hover{box-shadow: 0 10px 20px rgba(0,0,0,0.05);}
115+
.service-icon{font-size:24px;color:var(--accent);background:rgba(0,99,178,0.1);padding:15px;border-radius:10px;height:fit-content;}
116+
</style>
24117
</head>
25118
<body>
26119

27-
<nav>
28-
<div class="nav-inner">
29-
<a href="index.html" class="logo-link"><strong>Simpatico HR</strong></a>
30-
<ul class="nav-links">
31-
<li><a href="index.html" class="active">Home</a></li>
32-
<li><a href="about.html">About</a></li>
33-
<li><a href="job.html">Jobs</a></li>
34-
<li><a href="candidates.html">Register</a></li>
35-
<li><a href="contact.html">Contact</a></li>
36-
<li>
37-
<a href="https://www.facebook.com/YOUR_PAGE" target="_blank" class="social-btn">
38-
<i class="fab fa-facebook"></i> Facebook
39-
</a>
40-
</li>
41-
<li>
42-
<a href="https://www.linkedin.com/company/YOUR_PAGE" target="_blank" class="social-btn">
43-
<i class="fab fa-linkedin"></i> LinkedIn
44-
</a>
45-
</li>
46-
</ul>
120+
<nav>
121+
<div class="nav-inner">
122+
<div style="display:flex;gap:12px;align-items:center">
123+
<button id="hamburgerBtn" class="hamburger" aria-label="Open menu">
124+
<i class="fa-solid fa-bars"></i>
125+
</button>
126+
<div class="brand">
127+
<div class="title">Simpatico HR</div>
47128
</div>
129+
</div>
130+
131+
<ul id="nav-links">
132+
<li><a href="#home">Home</a></li>
133+
<li><a href="#about">About</a></li>
134+
<li><a href="#services">Services</a></li>
135+
<li><a href="#jobs">Jobs</a></li>
136+
<li><a href="#contact">Contact</a></li>
137+
</ul>
138+
139+
<div class="nav-right">
140+
<a href="https://wa.me/919544842260" target="_blank" rel="noopener"><i class="fa-brands fa-whatsapp"></i></a>
141+
<a href="https://www.linkedin.com/company/simpatico-manpower/" target="_blank" rel="noopener"><i class="fa-brands fa-linkedin"></i></a>
142+
<a href="https://www.facebook.com/simpaticohrpmna" target="_blank" rel="noopener"><i class="fa-brands fa-facebook"></i></a>
143+
</div>
144+
</div>
145+
</nav>
146+
147+
<div id="mobilePanel" class="mobile-panel">
148+
<button id="mobileClose" class="close-btn">&times;</button>
149+
<nav>
150+
<a href="#home" class="mobile-link">Home</a>
151+
<a href="#about" class="mobile-link">About</a>
152+
<a href="#services" class="mobile-link">Services</a>
153+
<a href="#jobs" class="mobile-link">Jobs</a>
154+
<a href="#contact" class="mobile-link">Contact</a>
48155
</nav>
156+
</div>
157+
<div id="mobileBackdrop" class="mobile-backdrop"></div>
49158

50-
<header class="page-banner">
51-
<div class="banner-content">
52-
<span class="badge">ESTD 2018</span>
53-
<h1>Expertise Across All Sectors</h1>
54-
<p>Leading Kerala's global recruitment for IT, Healthcare & Engineering</p>
55-
<div style="margin-top: 30px;">
56-
<a href="job.html" class="btn btn-primary">Browse Current Openings</a>
57-
</div>
159+
<main id="main">
160+
<header id="home" class="hero">
161+
<div class="hero-overlay"></div>
162+
<div class="hero-inner">
163+
<div class="glass">
164+
<h1 class="hero-title"><span id="typingText" class="typing-cursor"></span></h1>
165+
<p class="hero-sub">Providing specialized RPO, recruitment systems, and talent acquisition in Perinthalmanna.</p>
166+
<div class="cta-row">
167+
<button class="btn" onclick="document.getElementById('jobs').scrollIntoView()">View Jobs</button>
168+
<button class="btn btn-light" onclick="window.open('https://wa.me/919544842260')">WhatsApp Us</button>
169+
</div>
58170
</div>
171+
</div>
59172
</header>
60173

61-
<main class="container">
62-
<section class="expertise-intro">
63-
<h2>Our Specialized Industry Sectors</h2>
64-
<p>Dedicated recruitment solutions for high-demand global markets.</p>
65-
</section>
66-
67-
<div class="expertise-grid">
68-
<div class="expertise-card">
69-
<i class="fas fa-laptop-code"></i>
70-
<h3>Information Technology</h3>
71-
<p>Software Engineering, Cloud, and Fintech roles for UK & GCC markets.</p>
72-
</div>
73-
<div class="expertise-card">
74-
<i class="fas fa-user-nurse"></i>
75-
<h3>Healthcare</h3>
76-
<p>OET/IELTS Nurses for NHS UK and European healthcare providers.</p>
77-
</div>
78-
<div class="expertise-card">
79-
<i class="fas fa-hard-hat"></i>
80-
<h3>Engineering</h3>
81-
<p>Civil, Mechanical, and Electrical roles for GCC mega-infrastructure.</p>
82-
</div>
83-
<div class="expertise-card">
84-
<i class="fas fa-hotel"></i>
85-
<h3>Hospitality</h3>
86-
<p>Elite staffing for International hotel chains and luxury resorts.</p>
87-
</div>
174+
<section id="about">
175+
<h2>Professional HR Solutions</h2>
176+
<p class="muted">Based in Perinthalmanna, Simpatico HR Consultancy (Est. 2013) bridges the gap between top talent and leading organizations through innovative recruitment processes.</p>
177+
</section>
178+
179+
<section id="services">
180+
<h2>Our Expertise</h2>
181+
<div class="services-grid">
182+
<div class="service-card">
183+
<div class="service-icon"><i class="fa-solid fa-users-gear"></i></div>
184+
<div><h4>RPO Services</h4><p class="muted">Recruitment Process Outsourcing for high-growth firms.</p></div>
88185
</div>
89-
</main>
186+
<div class="service-card">
187+
<div class="service-icon"><i class="fa-solid fa-laptop-code"></i></div>
188+
<div><h4>Job Portals</h4><p class="muted">Advanced ATS and hiring automation systems.</p></div>
189+
</div>
190+
<div class="service-card">
191+
<div class="service-icon"><i class="fa-solid fa-file-pen"></i></div>
192+
<div><h4>Resume Optimization</h4><p class="muted">Professional ATS-friendly CV writing services.</p></div>
193+
</div>
194+
</div>
195+
</section>
196+
197+
<section id="jobs">
198+
<h2>Open Positions</h2>
199+
<div class="job-board">
200+
<div id="jobsList" class="jobs">
201+
</div>
202+
<aside>
203+
<h4>Register with Us</h4>
204+
<form id="candidateForm">
205+
<input type="text" placeholder="Name" required>
206+
<input type="email" placeholder="Email" required>
207+
<input type="tel" placeholder="Phone" required>
208+
<label style="font-size: 12px;">Upload CV</label>
209+
<input type="file">
210+
<button type="submit" class="btn" style="width: 100%;">Register</button>
211+
</form>
212+
</aside>
213+
</div>
214+
</section>
215+
216+
<section id="contact">
217+
<h2>Get In Touch</h2>
218+
<div style="display: grid; grid-template-columns: 1fr 300px; gap: 20px;">
219+
<form id="contactForm">
220+
<input type="text" placeholder="Your Name" required>
221+
<input type="email" placeholder="Email Address" required>
222+
<textarea rows="4" placeholder="Your Message"></textarea>
223+
<button type="submit" class="btn">Send Message</button>
224+
</form>
225+
<div style="background: #fff; padding: 20px; border-radius: 12px; border: 1px solid #eef2f7;">
226+
<h4>Office Details</h4>
227+
<p>Perinthalmanna, Kerala</p>
228+
<p><strong>Tel:</strong> +91 9544842260</p>
229+
<p><strong>Email:</strong> simpaticohrconsultancy@gmail.com</p>
230+
</div>
231+
</div>
232+
</section>
233+
</main>
234+
235+
<footer>
236+
<div style="max-width:var(--max-width);margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;">
237+
<div>© <span id="year"></span> Simpatico HR Consultancy</div>
238+
<div style="display:flex;gap:15px;font-size: 20px;">
239+
<a href="https://wa.me/919544842260" target="_blank" rel="noopener"><i class="fa-brands fa-whatsapp"></i></a>
240+
<a href="https://www.linkedin.com/company/simpatico-manpower/" target="_blank" rel="noopener"><i class="fa-brands fa-linkedin"></i></a>
241+
<a href="https://www.facebook.com/simpaticohrpmna" target="_blank" rel="noopener"><i class="fa-brands fa-facebook"></i></a>
242+
</div>
243+
</div>
244+
</footer>
245+
246+
<script>
247+
document.getElementById('year').textContent = new Date().getFullYear();
248+
249+
// Typing Effect
250+
const text = "Simpatico HR Consultancy";
251+
const el = document.getElementById('typingText');
252+
let i = 0;
253+
function type() {
254+
if (i < text.length) {
255+
el.textContent += text.charAt(i);
256+
i++;
257+
setTimeout(type, 80);
258+
} else {
259+
el.classList.remove('typing-cursor');
260+
}
261+
}
262+
type();
263+
264+
// Mobile Menu
265+
const menu = document.getElementById('mobilePanel');
266+
const backdrop = document.getElementById('mobileBackdrop');
267+
document.getElementById('hamburgerBtn').onclick = () => {
268+
menu.classList.add('open');
269+
backdrop.classList.add('show');
270+
}
271+
document.getElementById('mobileClose').onclick = backdrop.onclick = () => {
272+
menu.classList.remove('open');
273+
backdrop.classList.remove('show');
274+
}
90275

91-
<footer>
92-
<p>&copy; 2026 Simpatico HR Consultancy | Perinthalmanna, Kerala</p>
93-
</footer>
276+
// Static Job Data
277+
const jobs = [
278+
{title: "HR Executive", loc: "Perinthalmanna", type: "Full-time"},
279+
{title: "Recruiter", loc: "Kochi", type: "Full-time"},
280+
{title: "Data Entry", loc: "Remote", type: "Contract"}
281+
];
282+
const jobsList = document.getElementById('jobsList');
283+
jobs.forEach(j => {
284+
jobsList.innerHTML += `<div class="job"><h4>${j.title}</h4><p class="muted">${j.loc} • ${j.type}</p><button class="btn" style="padding:5px 10px; font-size:12px">Apply</button></div>`;
285+
});
94286

287+
// Form Submissions
288+
document.querySelectorAll('form').forEach(form => {
289+
form.onsubmit = (e) => {
290+
e.preventDefault();
291+
alert("Thank you! Your submission has been received.");
292+
form.reset();
293+
}
294+
});
295+
</script>
95296
</body>
96297
</html>
97298

0 commit comments

Comments
 (0)