How To Design Job Portal Website In HTML And CSS
Preview Link
Quick Info
| Youtube : | https://youtu.be/JrGq_l5h2bE |
| Views : | 24221 |
| Skills : | html, css |
| Category : | Web Design |
| Tag : | job portal |
In This Tutorial We Are Learning How To Design Job Portal Website In HTML And CSS. Our Job portal website website is going to be design using pure HTML and CSS only, we are not going to use any javascript and jquery.
Table of contents
Section We Are Going To Design In Our Job Portal Website using HTML and CSS
In job portal website, we are going to design three main section : Header section, Main Body And Footer section
In this tutorial we are going to design these three section with the help of their subsections. Subsections are created as per the website content.
Header
- Logo
- Main menu
Main Body
- Search Panel
- Skill
- Recent Job
- Company List
- Candidate
Footer
- Quick Link
- Job Type
- Social media link
- Resources
Video Tutorial
You can also watch our video on How To Design Job Portal Website In HTML And CSS to understand easily. You can watch the video tutorial below.
Let's Start The Coding
Firstly, Create the folder on dekstop, my folder name is : job portal website Inside folder job portal website folder, create two sub folder : - 1) css and 2) images
Inside job portal website folder, I am creating one HTML file file name - index.html
Inside css folder, I am creating one CSS file - file name - style.css
Let's start with writing basic in head section of index.html, and link the style.css file to index.html file
Meta html code. Copy And paste the code in index.html
index.html
<!-----META SECTION----->
<>
<>
<>
<>Search Job<>
<>
<>
<>
<>
<>
<>
<>
Common CSS. Copy And Paste The Code in style.css
style.css
/*****COMMON CSS SECTION*****/
* {
margin: 0px;
padding: 0px;
}
html, body {
font-family 'Roboto', sans-serif, arial;
font-size: 15px;
}
.container {
width: 1170px;
margin: 0px auto;
}
.width-100 {
width: 100%;
float: left;
}
.width-66 {
width: 66%;
float: left;
}
.width-50 {
float: left;
width: 50%;
}
.width-75 {
width: 75%;
float: left;
}
.width-33 {
width: 33%;
float: left;
}
.width-25 {
width: 25%;
float: left;
}
2) Now, we will design Header Section.
In Our Top Header section, we are having content. we are using content and button are written in ul tag and button tag.
Please copy and paste the below code to design header section
Header Section HTML code. Copy this code and paste in index.html file
index.html
<!------HEADER SECTION HEADER SECTION HEADER SECTION ------>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>Home <>
<>
<>
<>Jobs <>
<>
<>
<>Companies <>
<>
<>
<>Services <>
<>
<>
<>Contact Us <>
<>
<>
<>
<>
<>
<><> Submit a Job <>
<>
<><> Create Resume <>
<>
<>
<>
<>
Header Section CSS code. Copy The Code And Paste in style.css
style.css
/*****HEADER SECTION*****/
.header {
padding-top: 20px;
padding-bottom: 60px
}
.header-menu {
list-style: none;
margin-top: 10px;
}
.header-menu li {
float: left;
font-size: 15px;
}
.header-menu a {
font-size: 17px;
text-decoration: none;
color: black;
font-weight: 500;
padding: 10px;
}
.button-job-post {
background-color: #e34216;
color: white;
border: none;
border-radius: 2px;
font-size: 14px;
float: left;
padding: 10px;
text-decoration: none;
}
.button-resume {
background-color: #17acda;
color: white;
border: none;
border-radius: 2px;
font-size: 14px;
float: left;
margin-left: 10px;
padding: 10px;
text-decoration: none;
}
Output Of Header Section
3) Now, we will design banner search panel of job portal website using html and css.
In banner search panel section, we are having content, and text box for filting jobs and search button, which we are going to design using html and css.
Please copy and paste the below code to design Banner section
Search Panel Section HTML code. Copy This Code And Paste In index.html file
index.html
<!------SEARCH SECTION SEARCH SECTION SEARCH SECTION ------>
<>
<>
<>Find The Best Job For Your Future<>
<>its a long established fact that a reader will be distracted by the readable<>
<>
<>
<>
<>
<>
<><>
<>
<>
<>
<><>
<>
<>
<>
<><> Search Here <>
<>
<>
<>
Search Panel section CSS code. Copy The Code And Paste in style.css
style.css
/*****BANNER SECTION*****/
.banner-section {
background-image: url("../images/banner.jpg");
background-repeat: no-repeat;
background-size: cover;
text-align: center;
height: 350px;
position: relative;
width: 100%;
}
.banner-heading {
font-size: 40px;
color: white;
padding-top: 70px
}
.banner-para {
font-size: 15px;
color: #fff;
padding-top: 10px;
}
.search-sect {
margin-top: 40px;
width: 25%;
float: left;
position: relative;
}
.search-textbox {
height: 40px;
width: 100%;
padding-left: 10px;
border-top: none;
border-bottom: none;
border-color: #d9d9d9;
border-right: none;
border-width: 1px;
}
.search-button {
width: 100%;
height: 40px;
background-color: #e34216;
border: none;
color: white;
}
.search-sect .icons {
position: absolute;
top: 12px;
right: 10px
}
Output Of Search Panel Section
4) Now, we will design skill section.
Now we are going to create skill section. In this section we have content, paragraph tag and img tag. For creating content we are using paragraph tag and img tag
Please copy and paste the below code to design Skill section
Skill Section HTML Code. Copy This Code And Paste in index.html file
index.html
<!------CATEGORY SECTION CATEGORY SECTION CATEGORY SECTION ------>
<>
<>
<>
<>
<>
<>
<>
<>It Sector<>
<>7,600 jobs<>
<>
<>
<>
<>
<>
<>
<>
<>Call Center<>
<>5,000 jobs<>
<>
<>
<>
<>
<>
<>
<>
<>BPO<>
<>1,100 jobs<>
<>
<>
<>
<>
<>
<>
<>
<>Sales<>
<>2,345 jobs<>
<>
<>
<>
<>
Skill Section CSS Code. Copy The Code And Paste in style.css
style.css
/*****SKILL SECTION SKILL SECTION SKILL SECTION*****/
.skill-section {
background-color: #00000008;
padding-top: 40px;
padding-bottom: 40px;
}
.skill-list {
background-color: white;
width: 23%;
float: left;
margin-left: 15px;
padding-top: 10px;
border-radius: 5px;
padding-left: 8px;
padding-bottom: 10px;
}
.skill-list img {
width: 70px;
height: 70px;
border-radius: 100px;
}
.skill-list h4 {
font-size: 16px;
color: #313538;
font-weight: bold;
padding-left: 8px;
padding-top: 8px
}
.view-button {
width: 45%;
height: 20px;
border-radius: 20px;
border: none;
background-color: #e34216;
color: white;
font-size: 11px;
padding-left: 5px;
margin-top: 15px;
}
Output Of skill Section
5) Now, we will design Recent Job section using html and css.
In our Recent Job section, we are having content and icons. For Creating content that we are using pragraph tag and icon tag.
Please copy and paste the below code to design Recent Job section
Recent Job Section HTML Code. Copy This Code And Paste in index.html file
index.html
<!-----RECENT JOB SECTION RECENT JOB SECTION RECENT JOB SECTION ----->
<>
<>
<>RECENT JOB<>
<>Get the list of all recent jobs<>
<!-----JOB LIST----->
<>
<>
<>
<>HTML Designer<>
<>Dezven Software Solution <><> | 234 Reviews <>
<>
<>
<><> 1 to 4 Years
<>
<>
<><> No disclosed
<>
<>
<><> Pune
<>
<>
<>
<>Skills : <>HTML, CSS, JAVASCRIPT, JQUERY, BOOTSTRAP, PHOTOSHOP
<>
<>
<>
<>Apply Now<>
<>
<>
<>
<!-----JOB LIST------>
<>
<>
<>
<>CSS Designer<>
<>Dezven Group <><> | 234 Reviews <>
<>
<>
<><> 1 to 4 Years
<>
<>
<><> No disclosed
<>
<>
<><> Pune
<>
<>
<>
<>Skills : <>HTML, CSS, JAVASCRIPT, JQUERY, BOOTSTRAP, PHOTOSHOP
<>
<>
<>
<>Apply Now<>
<>
<>
<>
<!-----JOB LIST----->
<>
<>
<>
<>Bootstrap Developer<>
<>Apple Incorporation <><> | 234 Reviews <>
<>
<>
<><> 1 to 4 Years
<>
<>
<><> No disclosed
<>
<>
<><> Pune
<>
<>
<>
<>Skills : <>HTML, CSS, JAVASCRIPT, JQUERY, BOOTSTRAP, PHOTOSHOP
<>
<>
<>
<>Apply Now<>
<>
<>
<>
<!-----JOB LIST----->
<>
<>
<>
<>Javascript Developer<>
<>Wipro Software Sol <><> | 234 Reviews <>
<>
<>
<><> 1 to 4 Years
<>
<>
<><> No disclosed
<>
<>
<><> Pune
<>
<>
<>
<>Skills : <>HTML, CSS, JAVASCRIPT, JQUERY, BOOTSTRAP, PHOTOSHOP
<>
<>
<>
<>Apply Now<>
<>
<>
<>
<!-----JOB LIST----->
<>
<>
<>
<>Graphic Designer<>
<>Microsoft Solution INC <><> | 234 Reviews <>
<>
<>
<><> 1 to 4 Years
<>
<>
<><> No disclosed
<>
<>
<><> Pune
<>
<>
<>
<>Skills : <>HTML, CSS, JAVASCRIPT, JQUERY, BOOTSTRAP, PHOTOSHOP
<>
<>
<>
<>Apply Now<>
<>
<>
<>
<!-----JOB LIST------>
<>
<>
<>
<>jQuery Developer<>
<>Google Corporation <><> | 234 Reviews <>
<>
<>
<><> 1 to 4 Years
<>
<>
<><> No disclosed
<>
<>
<><> Pune
<>
<>
<>
<>Skills : <>HTML, CSS, JAVASCRIPT, JQUERY, BOOTSTRAP, PHOTOSHOP
<>
<>
<>
<>Apply Now<>
<>
<>
<>
<>
<>
Recent Job Section CSS Code. Copy The Code And Paste in style.css
style.css
/*****RECENT JOB SECTION RECENT JOB SECTION*****/
.recent-job {
padding-top: 50px;
background-color: #f0f3fa;
padding-bottom: 60px;
}
.recent-job-heading {
text-align: center;
color: #343a40;
}
.recent-job-sub-heading {
text-align: center;
margin-bottom: 30px;
}
.recent-job-list {
float: left;
background-color: white;
padding: 20px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 20px;
}
.job-title {
font-size: 20px;
}
.job-company {
margin-top: 10px;
margin-bottom: 20px;
}
.job-company i {
color: orange;
margin-left: 10px;
}
.job-skill {
margin-top: 20px;
margin-bottom: 10px;
font-size: 16px;
}
.job-apply-button {
background: blue;
padding: 10px;
color: white;
text-decoration: none;
float: right;
}
Output Of Recent Job Section
6) Now, we will design Top Company section.
Now we are going to create Top Company section. In this section we have content and image at a particular size. For creating image we are using img tag
Please copy and paste the below code to design Top Company section
Company List Section HTML Code. Copy This Code And Paste in index.html file
index.html
<!------TOP COMPANY SECTION TOP COMPANY SECTION TOP COMPANY SECTION----->
<>
<>
<>Top Company Hiring<>
<>List of Top Company Hiring With Us<>
<!-----START COMPANY LIST----->
<>
<>
<>
<>
<>
<>
<>
<>Google Company<>
<>
<><>
<><>
<><>
<><>
<><>
<>
<>( 874 Reviews)<>
<>
<>
<>New York, USA<>
<>25 Job Opening <>
<>
<>
<>
<!-----START COMPANY LIST----->
<>
<>
<>
<>
<>
<>
<>
<>Microsoft Company<>
<>
<><>
<><>
<><>
<><>
<><>
<>
<>( 874 Reviews)<>
<>
<>
<>New York, USA<>
<>25 Job Opening <>
<>
<>
<>
<!-----START COMPANY LIST----->
<>
<>
<>
<>
<>
<>
<>
<>IBM Company<>
<>
<><>
<><>
<><>
<><>
<><>
<>
<>( 874 Reviews)<>
<>
<>
<>New York, USA<>
<>25 Job Opening <>
<>
<>
<>
<!-----START COMPANY LIST----->
<>
<>
<>
<>
<>
<>
<>
<>Apple Company<>
<>
<><>
<><>
<><>
<><>
<><>
<>
<>( 874 Reviews)<>
<>
<>
<>New York, USA<>
<>25 Job Opening <>
<>
<>
<>
<!-----START COMPANY LIST----->
<>
<>
<>
<>
<>
<>
<>
<>InfoSys Company<>
<>
<><>
<><>
<><>
<><>
<><>
<>
<>( 874 Reviews)<>
<>
<>
<>New York, USA<>
<>25 Job Opening <>
<>
<>
<>
<!-----START COMPANY LIST------>
<>
<>
<>
<>
<>
<>
<>
<>Wipro Company<>
<>
<><>
<><>
<><>
<><>
<><>
<>
<>( 874 Reviews)<>
<>
<>
<>New York, USA<>
<>25 Job Opening <>
<>
<>
<>
<!-----START COMPANY LIST------>
<>
<>
<>
<>
<>
<>
<>
<>HCL Company<>
<>
<><>
<><>
<><>
<><>
<><>
<>
<>( 874 Reviews)<>
<>
<>
<>New York, USA<>
<>25 Job Opening <>
<>
<>
<>
<!-----START COMPANY LIST----->
<>
<>
<>
<>
<>
<>
<>
<>Linkedin Company<>
<>
<><>
<><>
<><>
<><>
<><>
<>
<>( 874 Reviews)<>
<>
<>
<>New York, USA<>
<>25 Job Opening <>
<>
<>
<>
<>
<>
Company List Section CSS Code. Copy The Code And Paste in style.css
style.css
/*****TOP COMPANY SECTION*****/
.top-company {
padding-top: 50px;
background-color: #f9f9f9;
padding-bottom: 60px;
}
.top-company-heading {
text-align: center;
color: #343a40;
}
.top-company-sub-heading {
text-align: center;
margin-bottom: 30px;
}
.company-list {
float: left;
background-color: white;
padding: 20px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 20px;
border: 1px solid #e9e9e9;
}
.company-image img {
width: 100%;
height: auto;
}
.company-name {
color: #343a40;
font-size: 16px;
}
.company-rating i {
padding-left: 1px;
color: #f4dc1f;
}
.company-address {
margin-top: 10px;
font-size: 14px;
font-weight: bold;
color: #686868;
}
.company-opening {
margin-top: 10px;
font-size: 14px;
font-weight: bold;
color: #686868;
}
Output Of Company List Section
7) Now, we will design Future section.
In our Future section, we are having content, images and button. For Creating image and button we are img and button tag.
Please copy and paste the below code to design future section
Future Section HTML Code. Copy This Code And Paste in index.html file
index.html
<!-------FEATURE SECTION FEATURE SECTION FEATURE SECTION------->
<>
<>
<>
<>
<>
<>DO YOU WANT TO FIND A JOB ?<>
<>It look like readable English. Many desktop publishing packagesand web page editors now use Lorem Ipsum as their default model text<>
<>Find Job<>
<>
<>
<>
<>
<>
<> ARE YOU LOOKING FOR A CANDIDATE ?<>
<>It look like readable English. Many desktop publishing packagesand web page editors now use Lorem Ipsum as their default model text<>
<>Find Candidates<>
<>
<>
<>
<>
Future Section CSS Code. Copy The Code And Paste in style.css
style.css
/******FEATURE SECTION******/
.feature-sect {
padding-top: 60px;
padding-bottom: 60px;
}
.feature-panel {
background-color: #f9f9f9;
text-align: center;
padding: 30px;
border: 1px solid #f0f3fa;
margin-left: 20px;
margin-right: 20px;
}
.feature-title {
padding-top: 20px
}
.feature-desc {
margin-top: 10px;
}
.feature-img {
width: 120px;
height: 120px;
border-radius: 80px;
background-color: white;
}
.feature-btn {
background-color: #1650e2;
height: 35px;
border: none;
color: white;
border-radius: 4px;
font-size: 13px;
margin-top: 10px;
padding: 10px;
}
Output Of Candidate Section
8) Now, we will design Footer section of job portal using html and css.
In our footer section, we are having content our get in social media icons. For Creating footer section we have ul, a(anchor) tag and paragraph tag.
Please copy and paste the below code to design Footer section
Footer Section HTML Code. Copy This Code And Paste in index.html file
index.html
<!------FOOTER SECTION FOOTER SECTION FOOTER SECTION ------->
<>
<>
<>
<>
<>QUICK LINKS<>
<>
<>C / C++ Jobs In Bhopal<>
<>Java Jobs In Bhopal<>
<>HTML Jobs In Bhopal<>
<>PHP Jobs In Bhopal<>
<>
<>
<>
<>JOB TYPE<>
<>
<>Bootstrap Jobs In Bhopal<>
<>Website Designer Jobs In Bhopal<>
<>Mobile App Jobs In Bhopal<>
<>HR Executive Jobs In Bhopal<>
<>
<>
<>
<>RESOURCES<>
<>
<>Home<>
<>Post Free Job<>
<>Recruiter Login<>
<>Contact us<>
<>
<>
<>
<>GET IN TOUCH<>
<>
<>
<><>
<>E-MAIL: info@dezven.com<>
<>
<>
<><>
<>WHATS-APP: +91 -123 456 789<>
<>
<>
<><>
<>CONTACT NO.: +91 -(123)-4567890<>
<>
<>
<><>
<>WEBSITE: https://www.dezven.com<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<!------FOOTER SECTION FOOTER SECTION FOOTER SECTION ------>
Footer Section CSS Code. Copy The Code And Paste in style.css
style.css
/******FOOTER SECTION******/
.footer-list {
list-style: none;
line-height: 35px;
padding-top: 20px;
}
.footer-background {
background-color: #222328;
padding-top: 60px;
padding-bottom: 80px;
color: rgba(255, 255, 255, .86);
}
.get-in-touch {
list-style: none;
line-height: 15px;
padding-top: 20px
}
.get-in-touch img {
width: 30px;
height: 30px;
margin-left: 10px;
border-radius: 0px;
float: left;
padding-top: 20px
}
.get-in-touch i {
float: left;
color: #eb372a;
font-size: 16px;
line-height: 15px;
}
.get-in-touch p {
padding-left: 30px;
color: rgba(255, 255, 255, .86);
margin-top: 20px
}
/******FOOTER SECTION******/
Good content
Very easy to understand job portal website in html
Perfect design
Can you please design more pages in job portal website
I like your tutorial, it is very easy to understand. thank you
great tutorial
very awesome job portal website using html and css