<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TimesJobs Clone</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
.header {
background-color: #fff;
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #e0e0e0;
}
.logo {
width: 150px;
height: 40px;
background-color: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
.nav-links a {
margin-left: 15px;
text-decoration: none;
color: #333;
}
.auth-buttons button {
margin-left: 10px;
padding: 5px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.login-btn {
background-color: #fff;
color: #f44336;
border: 1px solid #f44336;
}
.register-btn {
background-color: #f44336;
color: #fff;
}
.search-section {
background-color: #0047ab;
padding: 30px 20px;
text-align: center;
}
.search-bar {
display: flex;
max-width: 800px;
margin: 0 auto;
}
.search-bar input, .search-bar select {
flex-grow: 1;
padding: 10px;
border: none;
margin-right: 5px;
}
.search-bar button {
padding: 10px 20px;
background-color: #f44336;
color: #fff;
border: none;
cursor: pointer;
}
.main-content {
display: flex;
padding: 20px;
gap: 20px;
}
.left-column {
flex: 3;
}
.right-column {
flex: 1;
}
.browse-jobs, .hiring-companies {
background-color: #fff;
padding: 20px;
margin-bottom: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.job-categories {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
}
.job-category {
background-color: #f9f9f9;
padding: 15px;
border-radius: 5px;
display: flex;
align-items: center;
}
.job-category i {
margin-right: 10px;
color: #0047ab;
}
.company-logos {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
}
.company-logo {
width: 100px;
height: 50px;
background-color: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
}
.consultants-zone, .campus-direct {
background-color: #fff;
padding: 20px;
margin-bottom: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.city-icons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.city-icon {
text-align: center;
}
.city-icon img {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<header class="header">
<div class="logo">TimesJobs</div>
<nav class="nav-links">
<a href="#">TimesJobs</a>
<a href="#">JobBuzz</a>
<a href="#">Gulf Jobs</a>
<a href="#">Career Insight</a>
</nav>
<div class="auth-buttons">
<button class="login-btn">LOGIN</button>
<button class="register-btn">REGISTER</button>
</div>
</header>
<section class="search-section">
<div class="search-bar">
<input type="text" placeholder="Enter Skills, Designation, etc">
<input type="text" placeholder="Enter Location">
<select>
<option>Experience</option>
</select>
<button>FIND JOBS</button>
</div>
</section>
<div class="main-content">
<div class="left-column">
<section class="browse-jobs">
<h2>BROWSE JOBS</h2>
<div class="job-categories">
<div class="job-category"><i class="fas fa-laptop-code"></i> Information Technology</div>
<div class="job-category"><i class="fas fa-industry"></i> Manufacturing / Engineering</div>
<div class="job-category"><i class="fas fa-chart-line"></i> Banking & Finance</div>
<div class="job-category"><i class="fas fa-cogs"></i> SCM & Operations/BPO</div>
<div class="job-category"><i class="fas fa-bullhorn"></i> Sales & Marketing Jobs</div>
<div class="job-category"><i class="fas fa-briefcase"></i> All Jobs</div>
</div>
</section>
<section class="hiring-companies">
<h2>HIRING COMPANIES</h2>
<div class="company-logos">
<div class="company-logo">Company 1</div>
<div class="company-logo">Company 2</div>
<div class="company-logo">Company 3</div>
<div class="company-logo">Company 4</div>
<div class="company-logo">Company 5</div>
<div class="company-logo">Company 6</div>
<div class="company-logo">Company 7</div>
<div class="company-logo">Company 8</div>
<div class="company-logo">Company 9</div>
<div class="company-logo">Company 10</div>
</div>
</section>
</div>
<div class="right-column">
<section class="consultants-zone">
<h3>BEST CONSULTANTS ZONE</h3>
<div class="city-icons">
<div class="city-icon">
<img src="/api/placeholder/50/50" alt="Mumbai">
<p>Mumbai</p>
</div>
<div class="city-icon">
<img src="/api/placeholder/50/50" alt="Pune">
<p>Pune</p>
</div>
<div class="city-icon">
<img src="/api/placeholder/50/50" alt="Chennai">
<p>Chennai</p>
</div>
<div class="city-icon">
<img src="/api/placeholder/50/50" alt="Bangalore">
<p>Bangalore</p>
</div>
<div class="city-icon">
<img src="/api/placeholder/50/50" alt="Hyderabad">
<p>Hyderabad</p>
</div>
<div class="city-icon">
<img src="/api/placeholder/50/50" alt="Kolkata">
<p>Kolkata</p>
</div>
<div class="city-icon">
<img src="/api/placeholder/50/50" alt="Delhi/NCR">
<p>Delhi/NCR</p>
</div>
<div class="city-icon">
<img src="/api/placeholder/50/50" alt="Ahmedabad">
<p>Ahmedabad</p>
</div>
</div>
<button>VIEW NATIONAL</button>
</section>
<section class="campus-direct">
<h3>IMPROVE YOUR ACADEMICS THROUGH CAMPUS DIRECT</h3>
<p>A Comprehensive Education Guide!</p>
<p>Get information related to institutes as well as Graduate and Post Graduate courses offered by various Institutes across the Globe.</p>
<button>VIEW INSTITUTES</button>
</section>
</div>
</div>
</body>
</html>
0 Comments