<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TimesJobs Registration</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f0f0f0;
}
.container {
max-width: 900px;
margin: 0 auto;
background-color: white;
padding: 20px;
border: 1px solid #ddd;
margin-top: 20px;
}
h1 {
color: #0099cc;
font-size: 18px;
margin-top: 0;
margin-bottom: 15px;
font-weight: normal;
}
.form-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 20px;
}
.form-column {
display: flex;
flex-direction: column;
}
label {
margin-bottom: 5px;
font-weight: bold;
}
input, select {
margin-bottom: 10px;
padding: 5px;
border: 1px solid #ccc;
width: 100%;
box-sizing: border-box;
}
.google-button {
background-color: #fff;
border: 1px solid #ccc;
padding: 5px 10px;
display: inline-flex;
align-items: center;
margin-bottom: 10px;
cursor: pointer;
}
.google-button img {
width: 20px;
margin-right: 5px;
}
.benefits {
background-color: #f9f9f9;
padding: 15px;
border: 1px solid #ddd;
}
.benefits h3 {
margin-top: 0;
font-size: 16px;
}
.benefits ul {
padding-left: 20px;
margin: 10px 0;
}
.benefits li {
margin-bottom: 5px;
}
.submit-button {
background-color: #0099cc;
color: white;
padding: 8px 20px;
border: none;
cursor: pointer;
font-weight: bold;
}
.mobile-input {
display: flex;
}
.mobile-input input[type="text"]:first-child {
width: 40px;
margin-right: 5px;
}
.experience-input {
display: flex;
gap: 10px;
}
.experience-input input {
width: 80px;
}
.file-input {
border: none;
padding: 0;
}
.checkbox-label {
font-weight: normal;
display: flex;
align-items: center;
margin-bottom: 10px;
}
.checkbox-label input {
margin-right: 5px;
width: auto;
}
.terms {
font-size: 12px;
margin-top: 10px;
}
@media (max-width: 768px) {
.container {
padding: 10px;
margin-top: 10px;
}
.form-grid {
grid-template-columns: 1fr;
}
h1 {
font-size: 16px;
}
.google-button {
width: 100%;
justify-content: center;
}
.experience-input {
flex-direction: column;
gap: 5px;
}
.experience-input input {
width: 100%;
}
.submit-button {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Let the top employers of your industry reach you. Register on TimesJobs for free!</h1>
<button class="google-button">
<img src="/api/placeholder/20/20" alt="Google logo">
Connect with GOOGLE
</button>
<p><strong>OR REGISTER USING FORM BELOW</strong></p>
<div class="form-grid">
<div class="form-column">
<form>
<label for="email">Email Id:</label>
<input type="email" id="email" required>
<label for="password">Password:</label>
<input type="password" id="password" required>
<div style="height: 5px; background-color: red; width: 50%; margin-bottom: 10px;"></div>
<label for="confirm-password">Confirm Password:</label>
<input type="password" id="confirm-password" required>
<label for="mobile">Mobile No:</label>
<div class="mobile-input">
<input type="text" value="+91" style="width: 40px;">
<input type="tel" id="mobile" required>
</div>
<small style="color: #666; margin-top: -5px; display: block;">(If you do not have a mobile, enter Landline No.)</small>
<label for="job-function">Job function:</label>
<select id="job-function" required>
<option value="">Please Select from Below Options</option>
</select>
<label>Experience:</label>
<div class="experience-input">
<input type="number" placeholder="Years">
<input type="number" placeholder="Months">
</div>
<label for="location">Current Work Location:</label>
<select id="location" required>
<option value="">Please Select</option>
</select>
<label for="skills">Key Skills:</label>
<input type="text" id="skills" required>
<label for="resume">Upload your Resume:</label>
<input type="file" id="resume" class="file-input">
<small style="color: #666;">Only Word, Text, RTF, HTML, PDF or DOT files of upto 5 MB</small>
<label class="checkbox-label">
<input type="checkbox"> I don't have a resume
</label>
<div class="terms">
By clicking on Continue, you agree to the <a href="#">Terms and Conditions</a> & <a href="#">Privacy Policy</a> of TimesJobs.com
</div>
<button type="submit" class="submit-button">CONTINUE >></button>
</form>
</div>
<div class="form-column">
<div class="benefits">
<p><strong>Few moments to submit your resume can take your career long way ahead!</strong></p>
<h3>Great Benefits only on TimesJobs</h3>
<ul>
<li>More than 2, 00,000 Top Jobs waiting for you</li>
<li>Get headhunted by over 25,000 respected employers searching our resume database</li>
<li>Receive matching jobs on your email twice a week</li>
<li>Added Security
<ul>
<li>Keep your job search secret</li>
<li>Ensure privacy of your personal details</li>
</ul>
</li>
</ul>
<p><strong>Register Now on Jobluu and get set to receive your dream job. Because you are worth more</strong></p>
</div>
</div>
</div>
</div>
</body>
</html>
0 Comments