Design a Job Search Portal using HTML and CSS

Last Updated : 17 Nov, 2023

This article will show how to Job Portal static website using HTML, CSS, and JavaScript. We generally see these effects in portfolios of professionals. We have written a code that creates a customized job portal website. Users can easily search for job opportunities by category, and all available jobs are displayed in an organized format with important details such as job title, company designation, and an “Apply Now” button.

Preview

Approach

Create a header labeled “Job Search Portal” with a navigation bar menu.
Create three input boxes for filtering jobs by company, category, and location, and a “Filter” button.
Now add the CSS properties for proper styling of the navigation bar and the three input boxes.
Add the cards with job titles, company names, and positions for available job listings.
Finally, ensure to include an “Apply” button to allow users to apply for the job openings.

Examples: This HTML code sets up the basic structure of your job search portal. We have a header, navigation menu, search section, and a footer. Now, let’s move on to styling these elements with the CSS.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <title> 
        Design a Job Search Portal  
        using HTML and CSS 
    </title> 
      
    <link rel="stylesheet" href="style.css"> 
</head> 
  
<body> 
    <header> 
        <h1>Job Search Portal</h1> 
    </header> 
    <nav> 
        <ul> 
            <li><a href="#">Home</a></li> 
            <li><a href="#">Jobs</a></li> 
            <li><a href="#">Companies</a></li> 
            <li><a href="#">About Us</a></li> 
            <li><a href="#">Contact</a></li> 
        </ul> 
    </nav> 
    <section class="search"> 
        <h2>Find Your Dream Job</h2> 
        <form action="#" method="get"> 
            <input type="text" name="keywords" 
                placeholder="Keywords"> 
            <input type="text" name="location" 
                placeholder="Location"> 
            <input type="text" name="company" 
                placeholder="Company"> 
            <button type="submit"> 
                Search 
            </button> 
        </form> 
    </section> 
  
    <section class="job-listings"> 
        <h2>Latest Job Listings</h2> 
        <ul> 
            <li> 
                <h3>Web Developer</h3> 
                <p>Company: ABC Tech</p> 
                <p>Location: India</p> 
                <p>Description: Good Web Developer</p> 
                <a href="#">Apply Now</a> 
            </li> 
            <li> 
                <h3>Graphic Designer</h3> 
                <p>Company: XYZ Design</p> 
                <p>Location: India </p> 
                <p>Description:Good Graphic Designer</p> 
                <a href="#">Apply Now</a> 
            </li> 
        </ul> 
    </section> 
      
    <footer> 
        <p>© 2023 Job Search Portal</p> 
    </footer> 
</body> 
  
</html>

CSS

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 
  
body { 
    font-family: Arial, sans-serif; 
    background-color: #f4f4f4; 
    line-height: 1.6; 
    color: #333; 
} 
  
header { 
    background-color: #46812a; 
    color: #fff; 
    text-align: center; 
    padding: 1rem 0; 
} 
  
nav ul { 
    list-style: none; 
    display: flex; 
    justify-content: center; 
    background-color: #746f6f; 
    padding: 0.5rem 0; 
} 
  
nav li { 
    margin-right: 20px; 
} 
  
nav a { 
    text-decoration: none; 
    color: #fff; 
    font-weight: bold; 
    transition: color 0.3s; 
} 
  
nav a:hover { 
    color: #ff6600; 
} 
  
.search { 
    text-align: center; 
    margin-top: 2rem; 
} 
  
.search h2 { 
    font-size: 24px; 
    margin-bottom: 1rem; 
} 
  
.search form { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 
  
.search input[type="text"] { 
    padding: 10px; 
    margin-right: 10px; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
} 
  
.search button { 
    background-color: #ff6600; 
    color: #fff; 
    border: none; 
    padding: 10px 20px; 
    border-radius: 4px; 
    cursor: pointer; 
    transition: background-color 0.3s; 
} 
  
.search button:hover { 
    background-color: #ff3300; 
} 
  
.job-listings { 
    margin: 2rem 0; 
} 
  
.job-listings h2 { 
    font-size: 24px; 
    margin-bottom: 1rem; 
    text-align: center; 
} 
  
.job-listings ul { 
    list-style: none; 
} 
  
.job-listings li { 
    background-color: #fff; 
    border: 1px solid #ccc; 
    padding: 20px; 
    margin-bottom: 20px; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
} 
  
.job-listings h3 { 
    font-size: 20px; 
    margin-bottom: 10px; 
} 
  
.job-listings p { 
    font-size: 14px; 
    margin-bottom: 10px; 
} 
  
.job-listings a { 
    background-color: #333; 
    color: #fff; 
    text-decoration: none; 
    padding: 10px 20px; 
    border-radius: 4px; 
    display: inline-block; 
    transition: background-color 0.3s; 
} 
  
.job-listings a:hover { 
    background-color: #ff6600; 
} 
  
footer { 
    text-align: center; 
    background-color: #333; 
    color: #fff; 
    padding: 1rem 0; 
}