Project Overview
Jobi is a responsive recruitment website HTML template built on Bootstrap 5.1.3, offering job listings, candidate showcases, company pages, blogs, and other functional pages. It is ideal for quickly building a recruitment platform or a flexible staffing display page.
Tech Stack
- Bootstrap v5.1.3
- HTML5 / CSS3
- Vanilla JavaScript
- SCSS (source included)
Project Structure
jobi/
├── index.html # Homepage (includes 7 homepage variants)
├── job-list-v1.html # Job listing page (3 layouts)
├── job-list-v2.html
├── job-list-v3.html
├── job-grid-v1.html # Job grid page
├── job-details-v1.html # Job details page
├── candidates-v1.html # Candidate listing page
├── candidate-profile-v1.html # Candidate profile page
├── company-v1.html # Company listing page
├── company-details.html # Company details page
├── contact.html # Contact page
├── blog-v1.html # Blog listing page
├── 404.html # Error page
├── css/
│ ├── style.css
│ └── responsive.css
├── js/theme.js
├── vendor/ # Third-party plugins (jQuery/Bootstrap JS)
├── images/ # Image assets
└── scss/ # SCSS source files
Core File Description
index.html— Homepage entry, includes 7 visual variantsjob-list-v1.html— Job listing page, supports multiple layout switchingcandidate-profile-v1.html— Candidate profile displaycontact.html— Contact form page (includes map section)css/style.css— Main global stylesheetjs/theme.js— Template interaction logic (navigation, lazy loading, etc.)
Quick Start
After extracting the package, open Template/jobi/index.html directly in your browser to preview all pages. For a local server, use VS Code Live Server or any static server to open the directory.
Usage Suggestions
When modifying the template, pay attention to adjusting section margin/padding spacing; the contact page form relies on backend processing and requires your own integration; image paths need to be adjusted based on the actual deployment environment. SCSS source files can be used for deep style customization.
