Skip to content

Commit 4a1f66e

Browse files
simpaticohrsimpaticohr
authored
Refactor jobs.html structure and content
Updated the structure and content of the jobs page, including navigation, job listings, and footer.
1 parent 37575ab commit 4a1f66e

1 file changed

Lines changed: 34 additions & 106 deletions

File tree

‎jobs.html‎

Lines changed: 34 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1,115 +1,43 @@
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" />
6-
<title>Job Board | Simpatico HR</title>
7-
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
8-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
9-
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10-
<style>
11-
:root { --primary: #002d5a; --accent: #0078d4; --tech: #00c2ff; --light: #f4f8fb; }
12-
body { font-family: 'Poppins', sans-serif; margin: 0; background: var(--light); color: #333; }
13-
nav { background: var(--primary); padding: 15px 5%; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 1000; }
14-
.nav-links a { color: #fff; text-decoration: none; margin-left: 20px; font-weight: 600; font-size: 13px; text-transform: uppercase; }
15-
.container { max-width: 1200px; margin: 40px auto; padding: 20px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; }
16-
.job-card { background: #fff; padding: 20px; border-radius: 12px; margin-bottom: 20px; border-left: 5px solid var(--accent); transition: 0.3s; }
17-
.job-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
18-
.tag { display: inline-block; padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; margin-bottom: 10px; }
19-
.tag-remote { background: #e6fffa; color: #2c7a7b; }
20-
.tag-eng { background: #fff5f5; color: #c53030; }
21-
.apply-box { background: #fff; padding: 30px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); position: sticky; top: 100px; height: fit-content; }
22-
input, select, file { width: 100%; padding: 12px; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 8px; }
23-
.btn-select { background: #f0f7ff; color: var(--accent); border: 1px solid var(--accent); padding: 8px 15px; border-radius: 5px; cursor: pointer; font-weight: 600; }
24-
.btn-submit { background: var(--accent); color: #fff; border: none; padding: 15px; width: 100%; border-radius: 8px; font-weight: 700; cursor: pointer; }
25-
</style>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Job Openings | Simpatico HR</title>
7+
<link rel="stylesheet" href="css/style.css">
268
</head>
279
<body>
2810

29-
<nav>
30-
<a href="index.html" style="text-decoration:none; color:#fff; font-weight:700; font-size:1.4rem;">SIMPATICO HR</a>
31-
<div class="nav-links">
32-
<a href="index.html">Home</a>
33-
<a href="sectors.html">Sectors</a>
34-
<a href="employers.html">Employers</a>
35-
<a href="jobs.html">Jobs</a>
36-
</div>
37-
</nav>
38-
39-
<div class="container">
40-
<div class="job-list">
41-
<h2 data-aos="fade-right">Current Vacancies</h2>
42-
43-
<div class="job-card" data-aos="fade-up">
44-
<span class="tag tag-remote">HR Sector | Remote</span>
45-
<h4>HR Recruiter Internship</h4>
46-
<p><i class="fa-solid fa-earth-americas"></i> Worldwide (Work from Home)</p>
47-
<p><i class="fa-solid fa-clock"></i> Duration: 3-6 Months</p>
48-
<button class="btn-select" onclick="setJob('HR Recruiter Internship (Remote)')">Select & Apply</button>
49-
</div>
50-
51-
<div class="job-card" data-aos="fade-up" data-aos-delay="100">
52-
<span class="tag tag-eng">Engineering Sector</span>
53-
<h4>Project Engineer</h4>
54-
<p><i class="fa-solid fa-location-dot"></i> Regional (Local Candidates Only)</p>
55-
<p><i class="fa-solid fa-graduation-cap"></i> B.Tech / BE Required</p>
56-
<button class="btn-select" onclick="setJob('Project Engineer (Local)')">Select & Apply</button>
57-
</div>
58-
59-
<div class="job-card" data-aos="fade-up" data-aos-delay="200">
60-
<span class="tag" style="background:#eef2ff; color:#4338ca;">IT Sector</span>
61-
<h4>Senior Developer</h4>
62-
<p><i class="fa-solid fa-location-dot"></i> Local Region Only</p>
63-
<button class="btn-select" onclick="setJob('Senior Developer')">Select & Apply</button>
11+
<nav>
12+
<div class="nav-inner">
13+
<a href="index.html" class="logo-link">Simpatico HR</a>
14+
<ul class="nav-links">
15+
<li><a href="index.html">Home</a></li>
16+
<li><a href="about.html">About</a></li>
17+
<li><a href="jobs.html" class="active">Jobs</a></li>
18+
<li><a href="contact.html">Contact</a></li>
19+
</ul>
6420
</div>
65-
</div>
66-
67-
<div class="apply-box" data-aos="fade-left">
68-
<h3>Submit Application</h3>
69-
<p style="font-size:12px; color:#666;">Apply only if you are already based in the job region or for remote roles.</p>
70-
71-
<form action="https://formspree.io/f/mqeaalvd" method="POST" enctype="multipart/form-data">
72-
<input type="text" name="Selected_Job" id="jobField" readonly style="background:#f9f9f9; font-weight:700; color:var(--accent);" placeholder="Click 'Select' on a job">
73-
<input type="text" name="Full_Name" placeholder="Your Name" required>
74-
<input type="email" name="Email" placeholder="Email Address" required>
75-
<input type="tel" name="Phone" placeholder="Mobile Number" required>
76-
<label style="font-size:12px;">Resume (PDF)</label>
77-
<input type="file" name="Resume" accept=".pdf" required>
78-
<button type="submit" class="btn-submit">Send Application</button>
79-
</form>
80-
</div>
81-
</div>
82-
83-
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
84-
<script>
85-
AOS.init({ duration: 800, once: true });
86-
function setJob(title) {
87-
document.getElementById('jobField').value = title;
88-
window.scrollTo({ top: 0, behavior: 'smooth' });
89-
}
90-
</script>
91-
<footer style="background: #041221; color: #a1b1c1; padding: 60px 20px; text-align: center; border-top: 1px solid rgba(255,255,255,0.1);">
92-
<div style="margin-bottom: 25px;">
93-
<h3 style="color: #fff; margin-bottom: 20px;">Connect With Us</h3>
94-
95-
<a href="https://www.facebook.com/simpaticohrpmna" target="_blank" style="text-decoration: none; color: #fff; font-size: 28px; margin: 0 15px; transition: 0.3s;" onmouseover="this.style.color='#1877F2'" onmouseout="this.style.color='#fff'">
96-
<i class="fa-brands fa-facebook"></i>
97-
</a>
98-
99-
<a href="https://www.linkedin.com/company/simpatico-manpower/" target="_blank" style="text-decoration: none; color: #fff; font-size: 28px; margin: 0 15px; transition: 0.3s;" onmouseover="this.style.color='#0077B5'" onmouseout="this.style.color='#fff'">
100-
<i class="fa-brands fa-linkedin"></i>
101-
</a>
102-
103-
<a href="https://wa.me/919544842260" target="_blank" style="text-decoration: none; color: #fff; font-size: 28px; margin: 0 15px; transition: 0.3s;" onmouseover="this.style.color='#25D366'" onmouseout="this.style.color='#fff'">
104-
<i class="fa-brands fa-whatsapp"></i>
105-
</a>
106-
</div>
107-
108-
<p style="font-size: 14px; margin: 5px 0;">© 2026 Simpatico HR Consultancy | Perinthalmanna, Kerala</p>
109-
<p style="font-size: 11px; opacity: 0.6; max-width: 600px; margin: 10px auto;">
110-
Simpatico HR is a domestic recruitment specialist. We do not provide visa, work permit, or immigration services for any country.
111-
</p>
112-
</footer>
21+
</nav>
22+
23+
<header class="page-banner-small">
24+
<h1>Join Our Team</h1>
25+
<p>Current Career Opportunities</p>
26+
</header>
27+
28+
<main class="rich-form-box">
29+
<iframe
30+
src="https://docs.google.com/forms/d/e/1FAIpQLSdB_kE4VNDfxRINcg125miaAo-v-vBNnGW7TuXWPzAribpLwQ/viewform?embedded=true"
31+
width="100%"
32+
height="1800"
33+
frameborder="0"
34+
marginheight="0"
35+
marginwidth="0">Loading…</iframe>
36+
</main>
37+
38+
<footer>
39+
<p>&copy; 2026 Simpatico HR Consultancy. All rights reserved.</p>
40+
</footer>
11341

11442
</body>
11543
</html>

0 commit comments

Comments
 (0)