How To Design Job Portal Website In HTML And CSS

    Last updated on 12 May 2023

    Preview Link
    Quick Info
    Youtube : https://youtu.be/JrGq_l5h2bE
    Views : 17843
    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.

    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----->
    <!DOCTYPE html>
     <html lang="en">
      <head>
       <title>Search Job</title>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
       <link rel="stylesheet" href="css/style.css">
       <meta name="robots" content="noindex, nofollow">
      </head>
      <body>

    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 ------>
    <header>
      <div class="width-100">
        <div class="container header">
          <div class="width-25">
            <img src="images/logo.png">
          </div>
          <div class="width-50">
            <ul class="header-menu ">
              <li>
                <a href="#">Home </a>
              </li>
              <li>
                <a href="#">Jobs </a>
              </li>
              <li>
                <a href="#">Companies </a>
              </li>
              <li>
                <a href="#">Services </a>
              </li>
              <li>
                <a href="#">Contact Us </a>
              </li>
            </ul>
          </div>
          <div class="width-25">
            <a href="#" class="button-job-post">
              <i class="fa fa-shopping-bag" aria-hidden="true"></i> Submit a Job </a>
            <a href="#" class="button-resume">
              <i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create Resume </a>
          </div>
        </div>
      </div>
    </header>

    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

    portal job website 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 ------>
    <div class="width-100 banner-section">
      <div class="container">
        <h1 class="banner-heading">Find The Best Job For Your Future</h1>
        <p class="banner-para">its a long established fact that a reader will be distracted by the readable</p>
        <div class="search-sect">
          <input type="text" class="search-textbox" placeholder="Search Company">
        </div>
        <div class="search-sect">
          <input type="text" class="search-textbox" placeholder="Select Location">
          <i class="fa fa-life-ring icons" aria-hidden="true"></i>
        </div>
        <div class="search-sect">
          <input type="text" class="search-textbox" placeholder="All categories">
          <i class="fa fa-caret-down icons" aria-hidden="true"></i>
        </div>
        <div class="search-sect">
          <button class="search-button">
            <i class="fa fa-search " aria-hidden="true"></i> Search Here </button>
        </div>
      </div>
    </div>

    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

    portal job website 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 ------>
    <div class="width-100 skill-section">
      <div class="container">
        <div class="skill-list">
          <div class="width-33">
            <img class="skill-img" src="images/skill-1.png">
          </div>
          <div class="width-66">
            <h4>It Sector</h4>
            <button class="view-button">7,600 jobs</button>
          </div>
        </div>
        <div class="skill-list">
          <div class="width-33">
            <img class="skill-img" src="images/skill-2.png">
          </div>
          <div class="width-66">
            <h4>Call Center</h4>
            <button class="view-button">5,000 jobs</button>
          </div>
        </div>
        <div class="skill-list">
          <div class="width-33">
            <img class="skill-img" src="images/skill-3.png">
          </div>
          <div class="width-66">
            <h4>BPO</h4>
            <button class="view-button">1,100 jobs</button>
          </div>
        </div>
        <div class="skill-list">
          <div class="width-33">
            <img class="skill-img" src="images/skill-4.png">
          </div>
          <div class="width-66">
            <h4>Sales</h4>
            <button class="view-button">2,345 jobs</button>
          </div>
        </div>
      </div>
    </div>

    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

    portal job website 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 ----->
    <div class="width-100 recent-job">
      <div class="container">
        <h2 class="recent-job-heading">RECENT JOB</h2>
        <p class="recent-job-sub-heading">Get the list of all recent jobs</p>
        <!-----JOB LIST----->
        <div class="width-50">
          <div class="recent-job-list">
            <div class="width-100">
              <h4 class="job-title">HTML Designer</h4>
              <p class="job-company">Dezven Software Solution <i class="fa fa-star" aria-hidden="true"></i> | 234 Reviews </p>
            </div>
            <div class="width-33">
              <i class="fa fa-briefcase" aria-hidden="true"></i> 1 to 4 Years
            </div>
            <div class="width-33">
              <i class="fa fa-inr" aria-hidden="true"></i> No disclosed
            </div>
            <div class="width-33">
              <i class="fa fa-map-marker" aria-hidden="true"></i> Pune
            </div>
            <div class="width-100">
              <p class="job-skill">
                <b>Skills : </b>HTML, CSS, JAVASCRIPT, JQUERY, BOOTSTRAP, PHOTOSHOP
              </p>
            </div>
            <div class="width-100">
              <a href="#" class="job-apply-button">Apply Now</a>
            </div>
          </div>
        </div>
        <!-----JOB LIST------>
        <div class="width-50">
          <div class="recent-job-list">
            <div class="width-100">
              <h4 class="job-title">CSS Designer</h4>
              <p class="job-company">Dezven Group <i class="fa fa-star" aria-hidden="true"></i> | 234 Reviews </p>
            </div>
            <div class="width-33">
              <i class="fa fa-briefcase" aria-hidden="true"></i> 1 to 4 Years
            </div>
            <div class="width-33">
              <i class="fa fa-inr" aria-hidden="true"></i> No disclosed
            </div>
            <div class="width-33">
              <i class="fa fa-map-marker" aria-hidden="true"></i> Pune
            </div>
            <div class="width-100">
              <p class="job-skill">
                <b>Skills : </b>HTML, CSS, JAVASCRIPT, JQUERY, BOOTSTRAP, PHOTOSHOP
              </p>
            </div>
            <div class="width-100">
              <a href="#" class="job-apply-button">Apply Now</a>
            </div>
          </div>
        </div>
        <!-----JOB LIST----->
        <div class="width-50">
          <div class="recent-job-list">
            <div class="width-100">
              <h4 class="job-title">Bootstrap Developer</h4>
              <p class="job-company">Apple Incorporation <i class="fa fa-star" aria-hidden="true"></i> | 234 Reviews </p>
            </div>
            <div class="width-33">
              <i class="fa fa-briefcase" aria-hidden="true"></i> 1 to 4 Years
            </div>
            <div class="width-33">
              <i class="fa fa-inr" aria-hidden="true"></i> No disclosed
            </div>
            <div class="width-33">
              <i class="fa fa-map-marker" aria-hidden="true"></i> Pune
            </div>
            <div class="width-100">
              <p class="job-skill">
                <b>Skills : </b>HTML, CSS, JAVASCRIPT, JQUERY, BOOTSTRAP, PHOTOSHOP
              </p>
            </div>
            <div class="width-100">
              <a href="#" class="job-apply-button">Apply Now</a>
            </div>
          </div>
        </div>
        <!-----JOB LIST----->
        <div class="width-50">
          <div class="recent-job-list">
            <div class="width-100">
              <h4 class="job-title">Javascript Developer</h4>
              <p class="job-company">Wipro Software Sol <i class="fa fa-star" aria-hidden="true"></i> | 234 Reviews </p>
            </div>
            <div class="width-33">
              <i class="fa fa-briefcase" aria-hidden="true"></i> 1 to 4 Years
            </div>
            <div class="width-33">
              <i class="fa fa-inr" aria-hidden="true"></i> No disclosed
            </div>
            <div class="width-33">
              <i class="fa fa-map-marker" aria-hidden="true"></i> Pune
            </div>
            <div class="width-100">
              <p class="job-skill">
                <b>Skills : </b>HTML, CSS, JAVASCRIPT, JQUERY, BOOTSTRAP, PHOTOSHOP
              </p>
            </div>
            <div class="width-100">
              <a href="#" class="job-apply-button">Apply Now</a>
            </div>
          </div>
        </div>
        <!-----JOB LIST----->
        <div class="width-50">
          <div class="recent-job-list">
            <div class="width-100">
              <h4 class="job-title">Graphic Designer</h4>
              <p class="job-company">Microsoft Solution INC <i class="fa fa-star" aria-hidden="true"></i> | 234 Reviews </p>
            </div>
            <div class="width-33">
              <i class="fa fa-briefcase" aria-hidden="true"></i> 1 to 4 Years
            </div>
            <div class="width-33">
              <i class="fa fa-inr" aria-hidden="true"></i> No disclosed
            </div>
            <div class="width-33">
              <i class="fa fa-map-marker" aria-hidden="true"></i> Pune
            </div>
            <div class="width-100">
              <p class="job-skill">
                <b>Skills : </b>HTML, CSS, JAVASCRIPT, JQUERY, BOOTSTRAP, PHOTOSHOP
              </p>
            </div>
            <div class="width-100">
              <a href="#" class="job-apply-button">Apply Now</a>
            </div>
          </div>
        </div>
        <!-----JOB LIST------>
        <div class="width-50">
          <div class="recent-job-list">
            <div class="width-100">
              <h4 class="job-title">jQuery Developer</h4>
              <p class="job-company">Google Corporation <i class="fa fa-star" aria-hidden="true"></i> | 234 Reviews </p>
            </div>
            <div class="width-33">
              <i class="fa fa-briefcase" aria-hidden="true"></i> 1 to 4 Years
            </div>
            <div class="width-33">
              <i class="fa fa-inr" aria-hidden="true"></i> No disclosed
            </div>
            <div class="width-33">
              <i class="fa fa-map-marker" aria-hidden="true"></i> Pune
            </div>
            <div class="width-100">
              <p class="job-skill">
                <b>Skills : </b>HTML, CSS, JAVASCRIPT, JQUERY, BOOTSTRAP, PHOTOSHOP
              </p>
            </div>
            <div class="width-100">
              <a href="#" class="job-apply-button">Apply Now</a>
            </div>
          </div>
        </div>
      </div>
    </div>

    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

    portal job website 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----->
    <div class="width-100 top-company">
      <div class="container">
        <h2 class="top-company-heading">Top Company Hiring</h2>
        <p class="top-company-sub-heading">List of Top Company Hiring With Us</p>
        <!-----START COMPANY LIST----->
        <div class="width-25">
          <div class=" company-list">
            <div class="width-100">
              <div class="width-25 company-image">
                <img src="images/company-1.png">
              </div>
              <div class="width-75">
                <h4 class="company-name">Google Company</h4>
                <p class="company-rating">
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star " aria-hidden="true"></i>
                </p>
                <p class="company-review">( 874 Reviews)</p>
              </div>
            </div>
            <div class="width-50 company-address">New York, USA</div>
            <div class="width-50 company-opening">25 Job Opening </p>
            </div>
          </div>
        </div>
        <!-----START COMPANY LIST----->
        <div class="width-25">
          <div class=" company-list">
            <div class="width-100">
              <div class="width-25 company-image">
                <img src="images/company-2.png">
              </div>
              <div class="width-75">
                <h4 class="company-name">Microsoft Company</h4>
                <p class="company-rating">
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star " aria-hidden="true"></i>
                </p>
                <p class="company-review">( 874 Reviews)</p>
              </div>
            </div>
            <div class="width-50 company-address">New York, USA</div>
            <div class="width-50 company-opening">25 Job Opening </p>
            </div>
          </div>
        </div>
        <!-----START COMPANY LIST----->
        <div class="width-25">
          <div class=" company-list">
            <div class="width-100">
              <div class="width-25 company-image">
                <img src="images/company-3.png">
              </div>
              <div class="width-75">
                <h4 class="company-name">IBM Company</h4>
                <p class="company-rating">
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star " aria-hidden="true"></i>
                </p>
                <p class="company-review">( 874 Reviews)</p>
              </div>
            </div>
            <div class="width-50 company-address">New York, USA</div>
            <div class="width-50 company-opening">25 Job Opening </p>
            </div>
          </div>
        </div>
        <!-----START COMPANY LIST----->
        <div class="width-25">
          <div class=" company-list">
            <div class="width-100">
              <div class="width-25 company-image">
                <img src="images/company-4.png">
              </div>
              <div class="width-75">
                <h4 class="company-name">Apple Company</h4>
                <p class="company-rating">
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star " aria-hidden="true"></i>
                </p>
                <p class="company-review">( 874 Reviews)</p>
              </div>
            </div>
            <div class="width-50 company-address">New York, USA</div>
            <div class="width-50 company-opening">25 Job Opening </p>
            </div>
          </div>
        </div>
        <!-----START COMPANY LIST----->
        <div class="width-25">
          <div class=" company-list">
            <div class="width-100">
              <div class="width-25 company-image">
                <img src="images/company-5.png">
              </div>
              <div class="width-75">
                <h4 class="company-name">InfoSys Company</h4>
                <p class="company-rating">
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star " aria-hidden="true"></i>
                </p>
                <p class="company-review">( 874 Reviews)</p>
              </div>
            </div>
            <div class="width-50 company-address">New York, USA</div>
            <div class="width-50 company-opening">25 Job Opening </p>
            </div>
          </div>
        </div>
        <!-----START COMPANY LIST------>
        <div class="width-25">
          <div class=" company-list">
            <div class="width-100">
              <div class="width-25 company-image">
                <img src="images/company-6.png">
              </div>
              <div class="width-75">
                <h4 class="company-name">Wipro Company</h4>
                <p class="company-rating">
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star " aria-hidden="true"></i>
                </p>
                <p class="company-review">( 874 Reviews)</p>
              </div>
            </div>
            <div class="width-50 company-address">New York, USA</div>
            <div class="width-50 company-opening">25 Job Opening </p>
            </div>
          </div>
        </div>
        <!-----START COMPANY LIST------>
        <div class="width-25">
          <div class=" company-list">
            <div class="width-100">
              <div class="width-25 company-image">
                <img src="images/company-7.png">
              </div>
              <div class="width-75">
                <h4 class="company-name">HCL Company</h4>
                <p class="company-rating">
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star " aria-hidden="true"></i>
                </p>
                <p class="company-review">( 874 Reviews)</p>
              </div>
            </div>
            <div class="width-50 company-address">New York, USA</div>
            <div class="width-50 company-opening">25 Job Opening </p>
            </div>
          </div>
        </div>
        <!-----START COMPANY LIST----->
        <div class="width-25">
          <div class=" company-list">
            <div class="width-100">
              <div class="width-25 company-image">
                <img src="images/company-8.png">
              </div>
              <div class="width-75">
                <h4 class="company-name">Linkedin Company</h4>
                <p class="company-rating">
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star " aria-hidden="true"></i>
                </p>
                <p class="company-review">( 874 Reviews)</p>
              </div>
            </div>
            <div class="width-50 company-address">New York, USA</div>
            <div class="width-50 company-opening">25 Job Opening </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    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------->
    <div class="width-100 feature-sect">
      <div class="container">
        <div class="width-50">
          <div class="feature-panel">
            <img src="images/feature-1.png" class="feature-img">
            <h4 class="feature-title">DO YOU WANT TO FIND A JOB ?</h4>
            <p class="feature-desc">It look like readable English. Many desktop publishing packagesand web page editors now use Lorem Ipsum as their default model text</p>
            <button class="feature-btn">Find Job</button>
          </div>
        </div>
        <div class="width-50">
          <div class="feature-panel">
            <img src="images/feature-2.png" class="feature-img">
            <h4 class="feature-title"> ARE YOU LOOKING FOR A CANDIDATE ?</h4>
            <p class="feature-desc">It look like readable English. Many desktop publishing packagesand web page editors now use Lorem Ipsum as their default model text</p>
            <button class="feature-btn">Find Candidates</button>
          </div>
        </div>
      </div>
    </div>

    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

    portal job website 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 ------->
    <footer>
      <div class="width-100 footer-background">
        <div class="container">
          <div class="width-25">
            <h4>QUICK LINKS</h4>
            <ul class="footer-list">
              <li>C / C++ Jobs In Bhopal</li>
              <li>Java Jobs In Bhopal</li>
              <li>HTML Jobs In Bhopal</li>
              <li>PHP Jobs In Bhopal</li>
            </ul>
          </div>
          <div class="width-25">
            <h4>JOB TYPE</h4>
            <ul class="footer-list">
              <li>Bootstrap Jobs In Bhopal</li>
              <li>Website Designer Jobs In Bhopal</li>
              <li>Mobile App Jobs In Bhopal</li>
              <li>HR Executive Jobs In Bhopal</li>
            </ul>
          </div>
          <div class="width-25">
            <h4>RESOURCES</h4>
            <ul class="footer-list">
              <li>Home</li>
              <li>Post Free Job</li>
              <li>Recruiter Login</li>
              <li>Contact us</li>
            </ul>
          </div>
          <div class="width-25">
            <h4>GET IN TOUCH</h4>
            <ul class="get-in-touch">
              <li>
                <i class="fa fa-envelope-o" aria-hidden="true"></i>
                <p>E-MAIL: info@dezven.com</p>
              </li>
              <li>
                <i class="fa fa-headphones" aria-hidden="true"></i>
                <p>WHATS-APP: +91 -123 456 789</p>
              </li>
              <li>
                <i class="fa fa-fax" aria-hidden="true"></i>
                <p>CONTACT NO.: +91 -(123)-4567890</p>
              </li>
              <li>
                <i class="fa fa-globe" aria-hidden="true"></i>
                <p>WEBSITE: https://www.dezven.com</p>
              </li>
              <li>
                <img src="images/icon-facebook.png">
              </li>
              <li>
                <img src="images/icon-twitter.png">
              </li>
              <li>
                <img src="images/icon-instagram.png">
              </li>
              <li>
                <img src="images/icon-linkedin.png">
              </li>
            </ul>
          </div>
        </div>
      </div>
    </footer>
    <!------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******/

    Output Of Footer Section

    job portal website footer section

    Post your comment

    For any query, information or suggestion, post your comment below. We love to hear from your.

    • Vivek singh

      Very easy to understand job portal website in html

    • Vihaan

      Perfect design

    • Victor Ted

      Can you please design more pages in job portal website

    • Harvey Glen

      I like your tutorial, it is very easy to understand. thank you

    • Patricia

      great tutorial

    • Abigail Kye

      very awesome job portal website using html and css