Skip to content

Commit abe9f21

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

1 file changed

Lines changed: 45 additions & 272 deletions

File tree

‎index.html‎

Lines changed: 45 additions & 272 deletions
Original file line numberDiff line numberDiff line change
@@ -2,297 +2,70 @@
22
<html lang="en">
33
<head>
44
<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.">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
6+
<title>Simpatico HR Consultancy | Recruitment & RPO Services Perinthalmanna</title>
7+
8+
<meta name="google-site-verification" content="W2MGk2YOgv_eBdixI_ToSnSiXOm_XZZ_27y-cX7Z5n8" />
9+
<meta name="description" content="Simpatico HR Consultancy: Leading Recruitment, RPO, and HR advisory services in Perinthalmanna, Kerala. Established 2013.">
10+
<meta name="keywords" content="HR Consultancy Perinthalmanna, Recruitment Kerala, RPO India, Job Portals, Simpatico HR">
11+
<meta name="robots" content="index, follow">
912
<link rel="canonical" href="https://simpaticohr.github.io/Simpaticohrconsultancy-/" />
1013

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:title" content="Simpatico HR Consultancy | Expert Recruitment">
15+
<meta property="og:description" content="Professional RPO and Staffing solutions in Perinthalmanna.">
16+
<meta property="og:type" content="website">
1417
<meta property="og:url" content="https://simpaticohr.github.io/Simpaticohrconsultancy-/">
15-
<meta property="og:site_name" content="Simpatico HR Consultancy">
1618
<meta property="og:image" content="https://simpaticohr.github.io/Simpaticohrconsultancy-/simpatico_hr_banner.png">
17-
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-
23-
<meta name="robots" content="index, follow">
19+
<meta property="og:site_name" content="Simpatico HR">
2420

25-
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
21+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
2622
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
27-
2823
<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}
87-
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;}
24+
:root { --blue: #003366; --accent: #0063b2; --light: #f3f7fb; --text: #072433; }
25+
body { font-family: 'Poppins', sans-serif; margin: 0; background: var(--light); color: var(--text); line-height: 1.6; }
26+
nav { background: var(--blue); padding: 15px 5%; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
27+
.logo { color: #fff; font-weight: 700; font-size: 1.4rem; }
28+
.nav-links a { color: #fff; text-decoration: none; margin-left: 20px; font-weight: 400; font-size: 0.9rem; }
29+
.hero { background: linear-gradient(rgba(0,51,102,0.8), rgba(0,51,102,0.8)), url('simpatico_hr_banner.png'); background-size: cover; background-position: center; height: 70vh; display: flex; align-items: center; justify-content: center; color: white; text-align: center; padding: 0 20px; }
30+
.btn { background: var(--accent); color: white; padding: 12px 28px; border: none; border-radius: 8px; cursor: pointer; text-decoration: none; display: inline-block; font-weight: 600; transition: 0.3s; }
31+
.btn:hover { background: #004a88; transform: translateY(-2px); }
32+
footer { background: #071726; color: #cbd5e1; padding: 40px 5%; text-align: center; }
33+
.social-icons a { color: #fff; font-size: 1.5rem; margin: 0 15px; transition: 0.3s; }
34+
.social-icons a:hover { color: var(--accent); }
11635
</style>
11736
</head>
11837
<body>
119-
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>
128-
</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>
14938
<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>
39+
<div class="logo">Simpatico HR</div>
40+
<div class="nav-links">
41+
<a href="index.html">Home</a>
42+
<a href="about.html">About</a>
43+
<a href="jobs.html">Jobs</a>
44+
<a href="contact.html">Contact</a>
45+
</div>
15546
</nav>
156-
</div>
157-
<div id="mobileBackdrop" class="mobile-backdrop"></div>
15847

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>
48+
<header class="hero">
49+
<div>
50+
<h1 style="font-size: 3rem; margin-bottom: 10px;">Strategic Talent Solutions</h1>
51+
<p style="font-size: 1.2rem; margin-bottom: 30px;">Your trusted HR partner in Perinthalmanna since 2013.</p>
52+
<a href="jobs.html" class="btn">View Open Positions</a>
17053
</div>
171-
</div>
17254
</header>
17355

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>
56+
<section style="padding: 80px 10%; text-align: center; background: white;">
57+
<h2 style="color: var(--blue);">Recruitment. RPO. Consulting.</h2>
58+
<p style="max-width: 800px; margin: 20px auto; color: #666;">We provide end-to-end recruitment systems and specialized job portals designed to scale your business and find the perfect cultural fit.</p>
17759
</section>
17860

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>
185-
</div>
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>
61+
<footer>
62+
<div class="social-icons" style="margin-bottom: 20px;">
63+
<a href="https://www.facebook.com/simpaticohrpmna" target="_blank" aria-label="Facebook"><i class="fa-brands fa-facebook"></i></a>
64+
<a href="https://www.linkedin.com/company/simpatico-manpower/" target="_blank" aria-label="LinkedIn"><i class="fa-brands fa-linkedin"></i></a>
65+
<a href="https://wa.me/919544842260" target="_blank" aria-label="WhatsApp"><i class="fa-brands fa-whatsapp"></i></a>
19366
</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-
}
275-
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-
});
286-
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>
67+
<p>© 2026 Simpatico HR Consultancy. All Rights Reserved.</p>
68+
</footer>
29669
</body>
29770
</html>
29871

0 commit comments

Comments
 (0)