Responsive Job Portal Website Template using HTML, CSS, and JavaScript

Faraz

By Faraz -

Learn how to build a responsive job portal website template using HTML, CSS, and JavaScript. Step-by-step guide for beginners to create job portals.

Join us on Telegram
responsive-job-portal-website-template-using-html-css-and-javascript.webp
Read AlsoResponsive Contact Form Design using html, css, and javascript Step-by-Step with Source Code.jpgResponsive Contact Form Design using HTML, CSS, and JavaScript: Step-by-Step with Source Code

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. JavaScript Code
  5. Conclusion
  6. Preview

Today, almost everyone searches for jobs online. A job portal website helps employers post job openings and allows job seekers to apply easily. If you are learning web development, creating a job portal template is a great project to practice HTML, CSS, and JavaScript.

In this blog, you will learn how to create a responsive job portal website template step by step. This design will be mobile-friendly, easy to navigate, and simple to customize.

Prerequisites

Before you start, make sure you have:

  • Basic knowledge of HTML, CSS, and JavaScript
  • A code editor like VS Code
  • A web browser (Google Chrome, Edge, or Firefox)
  • Basic idea of responsive design (media queries, flexbox, or grid)

Source Code

Step 1 (HTML Code):

We will first start with HTML, where we create the layout of the website. In this step, we will design the basic structure of the job portal, including the header, navigation, job listings, and footer.

To make the website more attractive and professional, we will also use the Swiper plugin. This plugin will help us create a testimonials carousel and a top companies carousel.

Copy the HTML code given below and paste it into your index.html file.

Read AlsoCreate a Stunning Windows 10 Desktop Clone with HTML and CSS.jpgCreate a Stunning Windows 10 Desktop Clone with HTML and CSS

Step 2 (CSS Code):

After completing the HTML structure, the next step is CSS. With CSS, we will style our job portal and make it look modern, clean, and responsive.

We will use flexbox, grid, and media queries to ensure the website works perfectly on desktops, tablets, and mobile screens. CSS will also add hover effects, colors, and smooth spacing for a professional look.

Copy the CSS code below and paste it into your styles.css file.

:root {
  --primary: #3b82f6;
  --primary-dark: #2563eb;
  --primary-light: #93c5fd;
  --secondary: #8b5cf6;
  --accent: #ec4899;
  --dark: #1e293b;
  --darker: #0f172a;
  --light: #f8fafc;
  --lighter: #ffffff;
  --gray: #64748b;
  --gray-light: #e2e8f0;
  --gray-lighter: #f1f5f9;
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
  --transition: all 0.3s ease;
  --gradient: linear-gradient(135deg, var(--primary), var(--secondary));
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  color: var(--dark);
  line-height: 1.6;
  background-color: var(--light);
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

input,
select,
button,
textarea {
  font-family: inherit; /* inherit from body */
}

img {
  max-width: 100%;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

input {
  font-family: 'Inter', sans-serif;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  background: var(--gradient);
  color: white;
  border-radius: var(--radius);
  font-weight: 600;
  transition: var(--transition);
  border: none;
  cursor: pointer;
  font-size: 16px;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: linear-gradient(135deg, var(--primary-dark), var(--secondary));
  transition: var(--transition);
  z-index: -1;
}

.btn:hover::before {
  width: 100%;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn-secondary {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary-light);
}

.btn-secondary::before {
  display: none;
}

.btn-secondary:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.btn-accent {
  background: var(--accent);
}

.btn-accent::before {
  background: #db2777;
}

/* Header & Navigation */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 15px 0;
  transition: var(--transition);
}

header.scrolled {
  padding: 10px 0;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: 28px;
  font-weight: 800;
  color: var(--darker);
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-icon {
  width: 40px;
  height: 40px;
  background: var(--gradient);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.nav-menu {
  display: flex;
  gap: 30px;
}

.nav-link {
  font-weight: 500;
  transition: var(--transition);
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gradient);
  transition: var(--transition);
}

.nav-link:hover::after {
  width: 100%;
}

.nav-link:hover {
  color: var(--primary);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

.hamburger {
  display: none;
  cursor: pointer;
  width: 30px;
  height: 20px;
  position: relative;
}

.hamburger span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: var(--dark);
  border-radius: 3px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: 0.25s ease-in-out;
}

.hamburger span:nth-child(1) {
  top: 0px;
}

.hamburger span:nth-child(2) {
  top: 8px;
}

.hamburger span:nth-child(3) {
  top: 16px;
}

.hamburger.open span:nth-child(1) {
  top: 8px;
  transform: rotate(135deg);
}

.hamburger.open span:nth-child(2) {
  opacity: 0;
  left: -60px;
}

.hamburger.open span:nth-child(3) {
  top: 8px;
  transform: rotate(-135deg);
}

/* Hero Section */
.hero {
  padding: 180px 0 100px;
  background: linear-gradient(
      120deg,
      rgba(37, 99, 235, 0.9),
      rgba(139, 92, 246, 0.85)
    ),
    url('https://images.unsplash.com/photo-1507679799987-c73779587ccf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1771&q=80')
      center/cover no-repeat;
  color: white;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
  opacity: 0.5;
}

.hero-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 800;
  margin-bottom: 20px;
  line-height: 1.2;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.hero-subtitle {
  font-size: 1.25rem;
  margin-bottom: 40px;
  opacity: 0.9;
  font-weight: 400;
}

.search-container {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  padding: 8px;
  display: flex;
  box-shadow: var(--shadow-lg);
  margin-bottom: 30px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.search-input-container {
  flex: 1;
  position: relative;
}

.search-input {
  width: 100%;
  padding: 18px 20px 18px 50px;
  border: none;
  outline: none;
  font-size: 16px;
  border-radius: var(--radius) 0 0 var(--radius);
  background: white;
  color: var(--dark);
}

.search-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray);
}

.search-dropdown {
  position: relative;
  width: 200px;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.search-dropdown select {
  width: 100%;
  height: 100%;
  padding: 18px 45px 18px 20px;
  border: none;
  outline: none;
  background: rgba(255, 255, 255, 0.9);
  appearance: none;
  color: var(--dark);
  font-weight: 500;
  cursor: pointer;
  border-radius: 0;
}

.dropdown-arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--primary);
}

.search-btn {
  padding: 18px 30px;
  background: var(--gradient);
  color: white;
  border: none;
  border-radius: 0 var(--radius) var(--radius) 0;
  cursor: pointer;
  font-weight: 600;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-btn:hover {
  background: linear-gradient(135deg, var(--primary-dark), var(--secondary));
}

.hero-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Featured Jobs */
.section {
  padding: 100px 0;
}

.section-header {
  text-align: center;
  margin-bottom: 60px;
}

.section-title {
  font-size: 2.8rem;
  font-weight: 800;
  margin-bottom: 15px;
  color: var(--darker);
  position: relative;
  display: inline-block;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: var(--gradient);
  border-radius: 2px;
}

.section-subtitle {
  color: var(--gray);
  max-width: 600px;
  margin: 30px auto 0;
  font-size: 1.1rem;
}

.jobs-filter {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 12px 24px;
  background: white;
  border: 1px solid var(--gray-light);
  border-radius: 50px;
  cursor: pointer;
  transition: var(--transition);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-btn.active,
.filter-btn:hover {
  background: var(--gradient);
  color: white;
  border-color: transparent;
  box-shadow: var(--shadow);
}

.jobs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 30px;
}

.job-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: var(--shadow);
  transition: var(--transition);
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
}

.job-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 0;
  background: var(--gradient);
  transition: var(--transition);
}

.job-card:hover::before {
  height: 100%;
}

.job-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary-light);
}

.job-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.company-logo {
  width: 70px;
  height: 70px;
  border-radius: 16px;
  object-fit: cover;
  background: var(--gray-lighter);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--primary);
  box-shadow: var(--shadow);
}

.job-meta {
  text-align: right;
}

.job-type {
  display: inline-block;
  padding: 6px 14px;
  background: var(--gray-lighter);
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
}

.job-type.remote {
  background: #dcfce7;
  color: #16a34a;
}

.job-type.fulltime {
  background: #dbeafe;
  color: var(--primary);
}

.job-type.contract {
  background: #fef3c7;
  color: var(--warning);
}

.job-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--darker);
}

.job-company {
  color: var(--gray);
  margin-bottom: 20px;
  display: block;
  font-weight: 500;
}

.job-details {
  display: flex;
  gap: 15px;
  margin-bottom: 25px;
  flex-wrap: wrap;
}

.job-detail {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gray);
  font-size: 14px;
  font-weight: 500;
}

.job-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid var(--gray-light);
}

.job-salary {
  font-weight: 700;
  color: var(--darker);
  font-size: 1.1rem;
}

.view-more {
  text-align: center;
  margin-top: 50px;
}

/* Top Companies */
.companies-section {
  background: var(--gray-lighter);
  position: relative;
  overflow: hidden;
}

.companies-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%233b82f6' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.companies-slider {
  padding: 30px 10px;
  position: relative;
}

.company-slide {
  background: white;
  border-radius: var(--radius-lg);
  padding: 30px;
  text-align: center;
  box-shadow: var(--shadow);
  transition: var(--transition);
  border: 1px solid transparent;
}

.company-slide:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary-light);
}

.company-logo-large {
  width: 100px;
  height: 100px;
  border-radius: 20px;
  margin: 0 auto 25px;
  background: var(--gray-lighter);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: var(--primary);
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.company-slide:hover .company-logo-large {
  transform: scale(1.1);
  background: var(--gradient);
  color: white;
}

.company-name {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--darker);
}

.company-rating {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-bottom: 15px;
  color: var(--warning);
}

.company-jobs {
  color: var(--gray);
  margin-bottom: 25px;
  font-weight: 500;
}

/* Why Choose Us */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
}

.feature-card {
  text-align: center;
  padding: 40px 30px;
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: var(--gradient);
  transition: var(--transition);
}

.feature-card:hover::before {
  height: 100%;
  opacity: 0.05;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary-light);
}

.feature-icon {
  margin-bottom: 25px;
  height: 100px;
  position: relative;
  z-index: 1;
}

.feature-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: var(--darker);
  position: relative;
  z-index: 1;
}

.feature-desc {
  color: var(--gray);
  position: relative;
  z-index: 1;
}

/* Testimonials */
.testimonials-section {
  background: linear-gradient(to right, var(--primary), var(--secondary));
  color: white;
  position: relative;
  overflow: hidden;
}

.testimonials-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.testimonials-section .section-title,
.testimonials-section .section-subtitle {
  color: white;
  position: relative;
  z-index: 1;
}

.testimonial-slide {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  padding: 40px;
  margin: 20px 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
  position: relative;
  overflow: hidden;
}

.testimonial-slide::before {
  content: '';
  position: absolute;
  top: -30px;
  left: -30px;
  font-size: 200px;
  color: rgba(255, 255, 255, 0.05);
  font-family: Arial;
}

.testimonial-content {
  margin-bottom: 25px;
  font-style: italic;
  line-height: 1.8;
  font-size: 1.1rem;
  position: relative;
  z-index: 1;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 15px;
}

.author-avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--gray-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--primary);
  flex-shrink: 0;
  box-shadow: var(--shadow);
}

.author-details {
  flex: 1;
}

.author-name {
  font-weight: 700;
  margin-bottom: 5px;
  font-size: 1.1rem;
}

.author-role {
  font-size: 14px;
  opacity: 0.8;
}

.testimonial-rating {
  color: var(--warning);
  font-size: 1.1rem;
}

/* CTA Section */
.cta-section {
  text-align: center;
  background: var(--darker);
  color: white;
  position: relative;
  overflow: hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%233b82f6' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.cta-title {
  font-size: 2.8rem;
  font-weight: 800;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.cta-subtitle {
  margin-bottom: 40px;
  opacity: 0.8;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.1rem;
  position: relative;
  z-index: 1;
}

.cta-form {
  display: flex;
  max-width: 500px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.cta-input {
  flex: 1;
  padding: 18px 25px;
  border: none;
  border-radius: var(--radius) 0 0 var(--radius);
  outline: none;
  font-size: 16px;
  background: rgba(255, 255, 255, 0.9);
}

.cta-btn {
  padding: 18px 30px;
  background: var(--gradient);
  color: white;
  border: none;
  border-radius: 0 var(--radius) var(--radius) 0;
  cursor: pointer;
  font-weight: 600;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 8px;
}

.cta-btn:hover {
  background: linear-gradient(135deg, var(--primary-dark), var(--secondary));
}

/* Footer */
footer {
  background: var(--darker);
  color: white;
  padding: 0 0 30px;
  position: relative;
}

footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%233b82f6' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 50px;
  margin-bottom: 70px;
  position: relative;
  z-index: 1;
}

.footer-brand {
  /*  grid-column: 1 / -1; */
  max-width: 400px;
}

.footer-logo {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 25px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.footer-logo-icon {
  width: 40px;
  height: 40px;
  background: var(--gradient);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.footer-desc {
  margin-bottom: 25px;
  opacity: 0.8;
  line-height: 1.7;
}

.social-links {
  display: flex;
  gap: 15px;
}

.social-link {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  font-size: 18px;
}

.social-link:hover {
  background: var(--primary);
  transform: translateY(-3px);
}

.footer-heading {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 25px;
  position: relative;
  padding-bottom: 15px;
}

.footer-heading::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 3px;
  background: var(--gradient);
  border-radius: 2px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.footer-link {
  opacity: 0.8;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-link i {
  font-size: 14px;
  color: var(--primary);
}

.footer-link:hover {
  opacity: 1;
  color: var(--primary-light);
  padding-left: 5px;
}

.footer-bottom {
  text-align: center;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  opacity: 0.7;
  font-size: 14px;
  position: relative;
  z-index: 1;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .hero-title {
    font-size: 3rem;
  }

  .section-title {
    font-size: 2.5rem;
  }
}

@media (max-width: 992px) {
  .hero-title {
    font-size: 2.5rem;
  }

  .nav-menu {
    position: fixed;
    top: 80px;
    left: -100%;
    background: white;
    width: 100%;
    flex-direction: column;
    gap: 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 30px;
    transition: 0.3s;
    z-index: 999;
  }

  .nav-menu.active {
    left: 0;
  }

  .nav-link {
    padding: 15px 0;
    border-bottom: 1px solid var(--gray-light);
    width: 100%;
    display: block;
  }

  .hamburger {
    display: block;
  }

  .search-dropdown {
    width: 150px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .hero {
    padding: 150px 0 80px;
  }

  .hero-title {
    font-size: 2.2rem;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .search-container {
    flex-direction: column;
    background: transparent;
    gap: 15px;
    backdrop-filter: none;
    border: none;
    padding: 0;
  }

  .search-input,
  .search-dropdown,
  .search-btn {
    border-radius: var(--radius);
    width: 100%;
  }

  .search-input {
    padding: 16px 20px 16px 50px;
  }

  .search-dropdown {
    border-right: none;
  }

  .search-dropdown select {
    padding: 16px 20px;
    border-radius: var(--radius);
  }

  .dropdown-arrow {
    right: 20px;
  }

  .hero-actions {
    flex-direction: column;
  }

  .section {
    padding: 80px 0;
  }

  .section-title {
    font-size: 2rem;
  }

  .jobs-grid {
    grid-template-columns: 1fr;
  }

  .cta-form {
    flex-direction: column;
    gap: 15px;
  }

  .cta-input,
  .cta-btn {
    border-radius: var(--radius);
    width: 100%;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 576px) {
  .job-card,
  .feature-card {
    padding: 25px;
  }

  .job-details {
    flex-direction: column;
    gap: 10px;
  }

  .job-footer {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }

  .testimonial-author {
    flex-direction: column;
    text-align: center;
  }

  .testimonial-rating {
    margin-top: 10px;
  }

  .cta-title {
    font-size: 2.2rem;
  }
}

Step 3 (JavaScript Code):

Finally, we move to the last step, JavaScript. In this step, we will add functions and interactivity to our website.

With JavaScript, we can create features like:

  • Interactive effects for the carousels

Copy the JavaScript code below and paste it into your script.js file.

// Mobile Navigation
const hamburger = document.querySelector('.hamburger');
const navMenu = document.querySelector('.nav-menu');

hamburger.addEventListener('click', () => {
  navMenu.classList.toggle('active');
  hamburger.classList.toggle('open');
});

// Close mobile menu when clicking on a link
document.querySelectorAll('.nav-link').forEach((link) => {
  link.addEventListener('click', () => {
    navMenu.classList.remove('active');
    hamburger.classList.remove('open');
  });
});

// Header scroll effect
window.addEventListener('scroll', () => {
  const header = document.querySelector('header');
  if (window.scrollY > 100) {
    header.classList.add('scrolled');
  } else {
    header.classList.remove('scrolled');
  }
});

// Initialize Swiper sliders
const companiesSwiper = new Swiper('.companies-slider', {
  slidesPerView: 1,
  spaceBetween: 30,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  breakpoints: {
    640: {
      slidesPerView: 2,
    },
    992: {
      slidesPerView: 3,
    },
    1200: {
      slidesPerView: 4,
    },
  },
  autoplay: {
    delay: 3000,
    disableOnInteraction: false,
  },
});

const testimonialsSwiper = new Swiper('.testimonials-slider', {
  slidesPerView: 1,
  spaceBetween: 30,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  breakpoints: {
    768: {
      slidesPerView: 2,
    },
  },
  autoplay: {
    delay: 5000,
    disableOnInteraction: false,
  },
});

// Job filter functionality
const filterButtons = document.querySelectorAll('.filter-btn');

filterButtons.forEach((button) => {
  button.addEventListener('click', () => {
    // Remove active class from all buttons
    filterButtons.forEach((btn) => btn.classList.remove('active'));

    // Add active class to clicked button
    button.classList.add('active');

    // In a real application, this would filter the job listings
    // For this demo, we'll just simulate the filtering
    console.log(`Filtering by: ${button.textContent}`);
  });
});

// CTA form validation
const ctaForm = document.querySelector('.cta-form');

ctaForm.addEventListener('submit', (e) => {
  e.preventDefault();
  const email = ctaForm.querySelector('input[type="email"]').value;

  if (validateEmail(email)) {
    // In a real application, this would submit the form
    alert('Thank you for subscribing! We will be in touch soon.');
    ctaForm.reset();
  } else {
    alert('Please enter a valid email address.');
  }
});

function validateEmail(email) {
  const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return re.test(email);
}

// Enhanced dropdown functionality
document.querySelectorAll('.search-dropdown select').forEach((dropdown) => {
  dropdown.addEventListener('focus', () => {
    dropdown.parentElement.style.boxShadow = '0 0 0 2px var(--primary-light)';
  });

  dropdown.addEventListener('blur', () => {
    dropdown.parentElement.style.boxShadow = 'none';
  });

  dropdown.addEventListener('change', () => {
    console.log(`Selected: ${dropdown.value}`);
  });
});

// Animation on scroll
const animatedElements = document.querySelectorAll(
  '.feature-card, .job-card, .company-slide'
);

function checkScroll() {
  animatedElements.forEach((element) => {
    const elementPosition = element.getBoundingClientRect().top;
    const screenPosition = window.innerHeight / 1.3;

    if (elementPosition < screenPosition) {
      element.style.opacity = 1;
      element.style.transform = 'translateY(0)';
    }
  });
}

// Initialize elements for animation
animatedElements.forEach((element) => {
  element.style.opacity = 0;
  element.style.transform = 'translateY(20px)';
  element.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
});

window.addEventListener('scroll', checkScroll);
window.addEventListener('load', checkScroll);

Final Output:

responsive-job-portal-website-template-using-html-css-and-javascript.gif
Read Alsocreating a personal portfolio website a step-by-step guide with html, css, and javascript.jpgPersonal Portfolio Website: A Step-by-Step Guide with HTML, CSS, and JavaScript

Conclusion:

By following these steps, you have built a responsive job portal website template using HTML, CSS, and JavaScript. This project is perfect for beginners in web development who want to learn about responsive design, search functionality, and UI layout.

You can improve it further by:

  • Adding a login/signup system
  • Connecting with a backend database
  • Allowing users to upload resumes and apply online

Building this project not only improves your coding skills but also gives you a real-world example to add to your portfolio.

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: responsive job portal website template using html css js, how to create job portal website with html css javascript, job portal template design with html css javascript, responsive job website design step by step, create job portal frontend template, job portal landing page, job portal template, job website design, responsive job portal, html css job template, javascript job portal
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Components

Please allow ads on our site🥺