Skip to content

Commit 67383f7

Browse files
simpaticohrsimpaticohr
authored
Update job.html
1 parent abe9f21 commit 67383f7

1 file changed

Lines changed: 54 additions & 32 deletions

File tree

‎job.html‎

Lines changed: 54 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,70 @@
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 Openings | Simpatico HR</title>
7-
<link rel="icon" type="image/png" href="favicon.png">
8-
<link rel="stylesheet" href="CSS/style.css">
9-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>Job Board | Apply at Simpatico HR</title>
7+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
8+
<style>
9+
/* Reuse same CSS as index.html for consistency */
10+
:root { --blue: #003366; --accent: #0063b2; --light: #f3f7fb; --text: #072433; }
11+
body { font-family: 'Poppins', sans-serif; margin: 0; background: var(--light); }
12+
nav { background: var(--blue); padding: 15px 5%; display: flex; justify-content: space-between; color:white; }
13+
.container { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; padding: 50px 5%; }
14+
.job-card { background: white; padding: 25px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
15+
.apply-box { background: white; padding: 30px; border-radius: 12px; position: sticky; top: 100px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
16+
input, select, textarea { width: 100%; padding: 12px; margin: 10px 0; border: 1px solid #ddd; border-radius: 6px; }
17+
.btn { background: var(--accent); color: white; padding: 12px 28px; border: none; border-radius: 8px; cursor: pointer; width: 100%; font-weight: 600; }
18+
@media (max-width: 800px) { .container { grid-template-columns: 1fr; } }
19+
</style>
1020
</head>
1121
<body>
1222
<nav>
13-
<div class="nav-inner">
14-
<strong>Simpatico HR</strong>
15-
<ul class="nav-links">
16-
<li><a href="index.html">Home</a></li>
17-
<li><a href="job.html" class="active">Jobs</a></li>
18-
<li><a href="candidates.html">Register</a></li>
19-
<li><a href="contact.html">Contact</a></li>
20-
</ul>
23+
<strong>Simpatico HR</strong>
24+
<div class="nav-links">
25+
<a href="index.html" style="color:white; text-decoration:none;">Home</a>
2126
</div>
2227
</nav>
2328

24-
<header class="page-banner-small">
25-
<h1>Current Vacancies</h1>
26-
<p>Your Global Career Starts Here</p>
27-
</header>
28-
29-
<main style="max-width: 1200px; margin: auto; padding: 0 20px;">
30-
<div class="jobs-grid">
29+
<div class="container">
30+
<div>
31+
<h2 style="color: var(--blue);">Latest Openings</h2>
32+
3133
<div class="job-card">
32-
<h3>Registered Nurse</h3>
33-
<p><i class="fas fa-map-marker-alt"></i> United Kingdom</p>
34-
<p>OET/IELTS Required. Competitive Salary.</p>
35-
<a href="candidates.html" class="btn btn-blue" style="margin-top:15px;">Apply Now</a>
34+
<h3>Backend Developer</h3>
35+
<p><i class="fa-solid fa-location-dot"></i> Kochi | Full-Time</p>
36+
<button class="btn" style="width: auto;" onclick="selectJob('Backend Developer')">Apply Now</button>
3637
</div>
38+
3739
<div class="job-card">
38-
<h3>Civil Engineer</h3>
39-
<p><i class="fas fa-map-marker-alt"></i> Saudi Arabia</p>
40-
<p>5+ Years Experience. Immediate Joining.</p>
41-
<a href="candidates.html" class="btn btn-blue" style="margin-top:15px;">Apply Now</a>
40+
<h3>HR Executive</h3>
41+
<p><i class="fa-solid fa-location-dot"></i> Perinthalmanna | Full-Time</p>
42+
<button class="btn" style="width: auto;" onclick="selectJob('HR Executive')">Apply Now</button>
4243
</div>
4344
</div>
44-
</main>
4545

46-
<footer>© 2026 Simpatico HR Consultancy</footer>
46+
<aside>
47+
<div class="apply-box">
48+
<h3 id="form-title">Application Form</h3>
49+
<form action="https://formspree.io/f/YOUR_ID_HERE" method="POST" enctype="multipart/form-data">
50+
<input type="text" name="Applying_For" id="job_field" readonly placeholder="Select a job...">
51+
<input type="text" name="Full_Name" placeholder="Your Name" required>
52+
<input type="email" name="Email" placeholder="Email Address" required>
53+
<label style="font-size: 0.8rem;">Attach Resume (PDF)</label>
54+
<input type="file" name="Resume" required>
55+
<button type="submit" class="btn">Submit Application</button>
56+
</form>
57+
</div>
58+
</aside>
59+
</div>
60+
61+
<script>
62+
function selectJob(title) {
63+
document.getElementById('job_field').value = title;
64+
document.getElementById('form-title').innerText = "Apply for " + title;
65+
window.scrollTo({ top: 0, behavior: 'smooth' });
66+
}
67+
</script>
4768
</body>
4869
</html>
70+

0 commit comments

Comments
 (0)