You are on page 1of 29

MAHARASHTRA STATE BOARD OF TECHNICAL

EDUCATION

P
AP
PROJECT REPORT

n
tio
Job Interview
lu
So

SUBMITTED BY
TE
SB

2020-21
M

DEPARTMENT OF INFORMATION TECHNOLOGY

SUPERVISED BY

Mr. Sameer Mulik


BHARATI VIDYAPEETH INSTITUTE OF TECHNOLOGY
Sector-7, C.B.D. Belapur, Navi Mumbai.

CERTIFICATE
This is to certify that the report of the project entitled

Job interview
Submitted by:

To the

P
AP
MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION
In partial fulfillment of the requirement for the Course of

n
DIPLOMA IN INFORMATION TECHNOLOGY
tio
Has been satisfactorily carried out under the guidance of
In SEM V during the academic year 2020 – 2021
lu
So

Project Guide Project Coordinator


TE

___________________ ___________________
SB

Head of Department Principal


M

___________________ ___________________

Content
1) Introduction

2) source code
3) output

Introduction
First impressions can play a major role in how an employer
perceives you as a candidate. What you say during the first
phase of the interview can make a difference in the outcome—

P
in a good way or in a bad way. You don't want to come across

AP
as awkward and lacking in social skills. Rather, you'll want to
show that you have the professionalism and communication

n
skills to be an asset to the company if hired.
tio
lu
So

Some hiring managers may even make a decision to reject a


candidate based on a poor first impression. For instance,
TE

showing up late or checking the phone throughout the


SB

interview, can lead the hiring manager to perceive candidate as


M

having an inability to make a commitment, meet deadlines,


focus, and follow-through, which are not qualities that will
impress an employer.

Little things make a big difference at this stage of a job search.


That's why it's important to pay attention to interview manners
and to think through how you will introduce yourself during the
job interview.

P
AP
n
tio
lu
So
TE
SB
M

Login
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="CSS/Style.css">
<title>Login </title>
</head>
<body>
<div class="login-wrapper">
<form action="" class="form">
<img src="img/avatar.png" alt="">
<h2>Login</h2>
<div class="input-group">
<input type="text" name="loginUser" id="loginUser" required>
<label for="loginUser">User Name</label>
</div>
<div class="input-group">

P
<input type="password" name="loginPassword" id="loginPassword" required>
<label for="loginPassword">Password</label>

AP
</div>
<input type="submit" value="Login" class="submit-btn">
<a href="#forgot-pw" class="forgot-pw">Forgot Password?</a>
</form>
n
tio
<div id="forgot-pw">
lu
<form action="" class="form">
So

<a href="#" class="close">&times;</a>


<h2>Reset Password</h2>
<div class="input-group">
TE

<input type="email" name="email" id="email" required>


<label for="email">Email</label>
</div>
SB

<input type="submit" value="Submit" class="submit-btn">


</form>
</div>
M

</div>
</body>
</html>
P
AP
n
tio
lu
<!DOCTYPE html>
<html lang="en">
So

<head>
<link rel="stylesheet" href="CSS/Style.css">
<title>Submit </title>
TE

</head>
<body>
SB

<div class="form-style-8">
<h2>Login to your account</h2>
<form>
M

<input type="text" name="field1" placeholder="Full Name" />


<input type="email" name="field2" placeholder="Email" />
<input type="url" name="field3" placeholder="Website" />
<textarea placeholder="Message" onkeyup="adjust_textarea(this)"></textarea>
<input type="button" value="Send Message" />
</form>
</div>
P
AP
n
tio
Job finder
lu
<!DOCTYPE html>
<html lang="en">
So

<head>
<title>Job Finder &mdash; Colorlib Website Template</title>
<meta charset="utf-8">
TE

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-


to-fit=no">
SB

<link href="https://fonts.googleapis.com/css?family=Amatic+SC:400,700|Work+Sa
ns:300,400,700" rel="stylesheet">
M

<link rel="stylesheet" href="fonts/icomoon/style.css">

<link rel="stylesheet" href="css2/bootstrap.min.css">


<link rel="stylesheet" href="css2/magnific-popup.css">
<link rel="stylesheet" href="css2/jquery-ui.css">
<link rel="stylesheet" href="css2/owl.carousel.min.css">
<link rel="stylesheet" href="css2/owl.theme.default.min.css">
<link rel="stylesheet" href="css2/bootstrap-datepicker.css">
<link rel="stylesheet" href="css2/animate.css">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mediaelement@4.2.7/


build/mediaelementplayer.min.css">
<link rel="stylesheet" href="fonts/flaticon/font/flaticon.css">

<link rel="stylesheet" href="css2/aos.css">

<link rel="stylesheet" href="css2/style.css">

</head>
<body>

<div class="site-wrap">

<div class="site-mobile-menu">

P
<div class="site-mobile-menu-header">
<div class="site-mobile-menu-close mt-3">

AP
<span class="icon-close2 js-menu-toggle"></span>
</div>
</div>
<div class="site-mobile-menu-body"></div>
n
tio
</div> <!-- .site-mobile-menu -->
lu
So

<div class="site-navbar-wrap js-site-navbar bg-white">

<div class="container">
TE

<div class="site-navbar bg-light">


<div class="py-1">
<div class="row align-items-center">
SB

<div class="col-2">
<h2 class="mb-0 site-
logo"><a href="index.html">Job<strong class="font-weight-
M

bold">Finder</strong> </a></h2>
</div>
<div class="col-10">
<nav class="site-navigation text-right" role="navigation">
<div class="container">
<div class="d-inline-block d-lg-none ml-md-0 mr-auto py-
3"><a href="#" class="site-menu-toggle js-menu-toggle text-
black"><span class="icon-menu h3"></span></a></div>

<ul class="site-menu js-clone-nav d-none d-lg-block">


<li><a href="categories.html">For Candidates</a></li>
<li class="has-children">
<a href="category.html">For Employees</a>
<ul class="dropdown arrow-top">
<li><a href="category.html">Category</a></li>
<li><a href="#">Browse Candidates</a></li>
<li><a href="new-post.html">Post a Job</a></li>
<li><a href="#">Employeer Profile</a></li>
<li class="has-children">
<a href="#">More Links</a>
<ul class="dropdown">
<li><a href="#">Browse Candidates</a></li>
<li><a href="#">Post a Job</a></li>
<li><a href="#">Employeer Profile</a></li>
</ul>
</li>

P
</ul>
</li>

AP
<li><a href="contact.html">Contact</a></li>
<li><a href="new-post.html"><span class="bg-primary text-
white py-3 px-4 rounded"><span class="icon-plus mr-
3"></span>Post New Job</span></a></li>
n
tio
</ul>
</div>
lu
</nav>
So

</div>
</div>
</div>
TE

</div>
</div>
</div>
SB

<div style="height: 113px;"></div>


M

<div class="site-blocks-cover overlay" style="background-


image: url('images/hero_1.jpg');" data-aos="fade" data-stellar-background-
ratio="0.5">
<div class="container">
<div class="row align-items-center">
<div class="col-12" data-aos="fade">
<h1>Find Job</h1>
<form action="#">
<div class="row mb-3">
<div class="col-md-9">
<div class="row">
<div class="col-md-6 mb-3 mb-md-0">
<input type="text" class="mr-3 form-control border-0 px-
4" placeholder="job title, keywords or company name ">
</div>
<div class="col-md-6 mb-3 mb-md-0">
<div class="input-wrap">
<span class="icon icon-room"></span>
<input type="text" class="form-control form-control-
block search-input border-0 px-
4" id="autocomplete" placeholder="city, province or region" onFocus="geolocate()"
>
</div>
</div>
</div>
</div>

P
<div class="col-md-3">
<input type="submit" class="btn btn-search btn-primary btn-

AP
block" value="Search">
</div>
</div>
<div class="row">
n
tio
<div class="col-md-12">
<p class="small">or browse by category: <a href="#" class="cate
lu
gory">Category #1</a> <a href="#" class="category">Category #2</a></p>
So

</div>
</div>
TE

</form>
</div>
</div>
SB

</div>
</div>
M

<div class="site-section">
<div class="container">
<div class="row">
<div class="col-md-6 mx-auto text-center mb-5 section-heading">
<h2 class="mb-5">Popular Categories</h2>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-3 mb-3" data-aos="fade-up" data-
aos-delay="100">
<a href="#" class="h-100 feature-item">
<span class="d-block icon flaticon-calculator mb-3 text-
primary"></span>
<h2>Accounting / Finanace</h2>
<span class="counting">10,391</span>
</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mb-3" data-aos="fade-up" data-
aos-delay="200">
<a href="#" class="h-100 feature-item">
<span class="d-block icon flaticon-wrench mb-3 text-
primary"></span>
<h2>Automotive Jobs</h2>
<span class="counting">192</span>
</a>

P
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mb-3" data-aos="fade-up" data-

AP
aos-delay="300">
<a href="#" class="h-100 feature-item">
<span class="d-block icon flaticon-worker mb-3 text-
primary"></span>
n
tio
<h2>Construction / Facilities</h2>
<span class="counting">1,021</span>
lu
</a>
So

</div>
<div class="col-sm-6 col-md-4 col-lg-3 mb-3" data-aos="fade-up" data-
aos-delay="400">
TE

<a href="#" class="h-100 feature-item">


<span class="d-block icon flaticon-telecommunications mb-3 text-
primary"></span>
SB

<h2>Telecommunications</h2>
<span class="counting">1,219</span>
</a>
M

</div>
<div class="col-sm-6 col-md-4 col-lg-3 mb-3" data-aos="fade-up" data-
aos-delay="500">
<a href="#" class="h-100 feature-item">
<span class="d-block icon flaticon-stethoscope mb-3 text-
primary"></span>
<h2>Healthcare</h2>
<span class="counting">482</span>
</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mb-3" data-aos="fade-up" data-
aos-delay="600">
<a href="#" class="h-100 feature-item">
<span class="d-block icon flaticon-computer-graphic mb-3 text-
primary"></span>
<h2>Design, Art &amp; Multimedia</h2>
<span class="counting">5,409</span>
</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mb-3" data-aos="fade-up" data-
aos-delay="700">
<a href="#" class="h-100 feature-item">
<span class="d-block icon flaticon-trolley mb-3 text-
primary"></span>
<h2>Transportation &amp; Logistics</h2>
<span class="counting">291</span>
</a>

P
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mb-3" data-aos="fade-up" data-

AP
aos-delay="800">
<a href="#" class="h-100 feature-item">
<span class="d-block icon flaticon-restaurant mb-3 text-
primary"></span>
n
tio
<h2>Restaurant / Food Service</h2>
<span class="counting">329</span>
lu
</a>
So

</div>
</div>
TE

</div>
</div>
SB

<div class="site-section bg-light">


<div class="container">
M

<div class="row">
<div class="col-md-8 mb-5 mb-md-0" data-aos="fade-up" data-aos-
delay="100">
<h2 class="mb-5 h3">Recent Jobs</h2>
<div class="rounded border jobs-wrap">

<a href="job-single.html" class="job-item d-block d-md-flex align-


items-center border-bottom fulltime">
<div class="company-logo blank-logo text-center text-md-left pl-
3">
<img src="images/company_logo_blank.png" alt="Image" class="img
-fluid mx-auto">
</div>
<div class="job-details h-100">
<div class="p-3 align-self-center">
<h3>Restaurant Crew</h3>
<div class="d-block d-lg-flex">
<div class="mr-3"><span class="icon-suitcase mr-
1"></span> Resto Bar</div>
<div class="mr-3"><span class="icon-room mr-
1"></span> Florida</div>
<div><span class="icon-money mr-
1"></span> $55000 &mdash; 70000</div>
</div>
</div>
</div>
<div class="job-category align-self-center">

P
<div class="p-3">
<span class="text-info p-2 rounded border border-

AP
info">Full Time</span>
</div>
</div>
</a>
n
tio
<a href="job-single.html" class="job-item d-block d-md-flex align-
lu
items-center freelance">
So

<div class="company-logo blank-logo text-center text-md-left pl-


3">
<img src="images/logo_1.png" alt="Image" class="img-fluid mx-
TE

auto">
</div>
<div class="job-details h-100">
SB

<div class="p-3 align-self-center">


<h3>JavaScript Fullstack Developer</h3>
<div class="d-block d-lg-flex">
M

<div class="mr-3"><span class="icon-suitcase mr-


1"></span> Cooper</div>
<div class="mr-3"><span class="icon-room mr-
1"></span> Anywhere</div>
<div><span class="icon-money mr-
1"></span> $55000 &mdash; 70000</div>
</div>
</div>
</div>
<div class="job-category align-self-center">
<div class="p-3">
<span class="text-warning p-2 rounded border border-
warning">Freelance</span>
</div>
</div>
</a>

<a href="job-single.html" class="job-item d-block d-md-flex align-


items-center freelance">
<div class="company-logo blank-logo text-center text-md-left pl-
3">
<img src="images/logo_1.png" alt="Image" class="img-fluid mx-
auto">
</div>
<div class="job-details h-100">
<div class="p-3 align-self-center">

P
<h3>ReactJS Fullstack Developer</h3>
<div class="d-block d-lg-flex">

AP
<div class="mr-3"><span class="icon-suitcase mr-
1"></span> Cooper</div>
<div class="mr-3"><span class="icon-room mr-
1"></span> Anywhere</div>
n
tio
<div><span class="icon-money mr-
1"></span> $55000 &mdash; 70000</div>
lu
</div>
</div>
So

</div>
<div class="job-category align-self-center">
<div class="p-3">
TE

<span class="text-warning p-2 rounded border border-


warning">Freelance</span>
SB

</div>
</div>
</a>
M

<a href="job-single.html" class="job-item d-block d-md-flex align-


items-center fulltime">
<div class="company-logo blank-logo text-center text-md-left pl-
3">
<img src="images/company_logo_blank.png" alt="Image" class="img
-fluid mx-auto">
</div>
<div class="job-details h-100">
<div class="p-3 align-self-center">
<h3>Assistant Brooker, Real Estate</h3>
<div class="d-block d-lg-flex">
<div class="mr-3"><span class="icon-suitcase mr-
1"></span> RealState</div>
<div class="mr-3"><span class="icon-room mr-
1"></span> New York</div>
<div><span class="icon-money mr-
1"></span> $55000 &mdash; 70000</div>
</div>
</div>
</div>
<div class="job-category align-self-center">
<div class="p-3">
<span class="text-info p-2 rounded border border-
info">Full Time</span>
</div>

P
</div>
</a>

AP
<a href="job-single.html" class="job-item d-block d-md-flex align-
items-center partime">

n
<div class="company-logo blank-logo text-center text-md-left pl-
tio
3">
<img src="images/logo_2.png" alt="Image" class="img-fluid mx-
lu
auto">
So

</div>
<div class="job-details h-100">
<div class="p-3 align-self-center">
TE

<h3>Telecommunication Manager</h3>
<div class="d-block d-lg-flex">
<div class="mr-3"><span class="icon-suitcase mr-
SB

1"></span> Think</div>
<div class="mr-3"><span class="icon-room mr-
1"></span> London</div>
M

</div>
</div>
</div>
<div class="job-category align-self-center">
<div class="p-3">
<span class="text-danger p-2 rounded border border-
danger">Par Time</span>
</div>
</div>
</a>

</div>
<div class="col-md-12 text-center mt-5">
<a href="#" class="btn btn-primary rounded py-3 px-
5"><span class="icon-plus-circle"></span> Show More Jobs</a>
</div>
</div>
<div class="col-md-4 block-16" data-aos="fade-up" data-aos-delay="200">
<div class="d-flex mb-0">
<h2 class="mb-5 h3 mb-0">Featured Jobs</h2>
<div class="ml-auto mt-1"><a href="#" class="owl-custom-
prev">Prev</a> / <a href="#" class="owl-custom-next">Next</a></div>
</div>

<div class="nonloop-block-16 owl-carousel">

P
<div class="border rounded p-4 bg-white">

AP
<h2 class="h5">Restaurant Crew</h2>
<p><span class="border border-warning rounded p-1 px-2 text-
warning">Freelance</span></p>
<p>
n
tio
<span class="d-block"><span class="icon-
suitcase"></span> Resto Bar</span>
lu
<span class="d-block"><span class="icon-
So

room"></span> Florida</span>
<span class="d-block"><span class="icon-money mr-
1"></span> $55000 &mdash; 70000</span>
TE

</p>
<p class="mb-
0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi neque fugit te
SB

mpora, numquam voluptate veritatis odit id, iste eum culpa alias, ut officiis omn
is itaque ad, rem sunt doloremque molestias.</p>
</div>
M

<div class="border rounded p-4 bg-white">


<h2 class="h5">Javascript Fullstack Developer</h2>
<p><span class="border border-warning rounded p-1 px-2 text-
warning">Freelance</span></p>
<p>
<span class="d-block"><span class="icon-
suitcase"></span> Resto Bar</span>
<span class="d-block"><span class="icon-
room"></span> Florida</span>
<span class="d-block"><span class="icon-money mr-
1"></span> $55000 &mdash; 70000</span>
</p>
<p class="mb-
0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus accusamus ne
cessitatibus praesentium voluptate natus excepturi rerum, autem. Magnam laboriosa
m, quam sapiente laudantium iure sit ea! Tenetur, quasi, praesentium. Architecto,
eum.</p>
</div>

<div class="border rounded p-4 bg-white">


<h2 class="h5">Assistant Brooker, Real Estate</h2>
<p><span class="border border-warning rounded p-1 px-2 text-
warning">Freelance</span></p>
<p>
<span class="d-block"><span class="icon-
suitcase"></span> Resto Bar</span>

P
<span class="d-block"><span class="icon-
room"></span> Florida</span>

AP
<span class="d-block"><span class="icon-money mr-
1"></span> $55000 &mdash; 70000</span>
</p>
<p class="mb-
n
tio
0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus esse, quam
consectetur ipsum quibusdam ullam ab nesciunt, doloribus voluptatum neque iure pe
lu
rspiciatis vel vero illo consequatur facilis, fuga nobis corporis.</p>
So

</div>

<div class="border rounded p-4 bg-white">


TE

<h2 class="h5">Telecommunication Manager</h2>


<p><span class="border border-warning rounded p-1 px-2 text-
warning">Freelance</span></p>
SB

<p>
<span class="d-block"><span class="icon-
suitcase"></span> Resto Bar</span>
M

<span class="d-block"><span class="icon-


room"></span> Florida</span>
<span class="d-block"><span class="icon-money mr-
1"></span> $55000 &mdash; 70000</span>
</p>
<p class="mb-
0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid at ipsum com
modi hic, cum esse asperiores libero molestiae, perferendis consectetur assumenda
iusto, dolorem nemo maiores magnam illo laborum sit, dicta.</p>
</div>

</div>
</div>
</div>
</div>
</div>

<div class="site-section" data-aos="fade">


<div class="container">
<div class="row align-items-center">
<div class="col-md-6 mb-5 mb-md-0">

<div class="img-border">
<a href="https://vimeo.com/28959265" class="popup-vimeo image-
play">
<span class="icon-wrap">

P
<span class="icon icon-play"></span>
</span>

AP
<img src="images/hero_2.jpg" alt="Image" class="img-
fluid rounded">
</a>
</div>
n
tio
</div>
lu
<div class="col-md-5 ml-auto">
So

<div class="text-left mb-5 section-heading">


<h2>Testimonies</h2>
</div>
TE

<p class="mb-4 h5 font-italic lineheight1-


5">&ldquo;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, nisi L
SB

orem ipsum dolor sit amet, consectetur adipisicing elit. Odit nobis magni eaque v
elit eum, id rem eveniet dolor possimus voluptas..&rdquo;</p>
<p>&mdash; <strong class="text-black font-weight-
M

bold">John Holmes</strong>, Marketing Strategist</p>


<p><a href="https://vimeo.com/28959265" class="popup-vimeo text-
uppercase">Watch Video <span class="icon-arrow-right small"></span></a></p>
</div>
</div>
</div>
</div>

<div class="site-blocks-cover overlay inner-page" style="background-


image: url('images/hero_1.jpg');" data-aos="fade" data-stellar-background-
ratio="0.5">
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-md-6 text-center" data-aos="fade">
<h1 class="h3 mb-0">Your Dream Job</h1>
<p class="h3 text-white mb-5">Is Waiting For You</p>
<p><a href="#" class="btn btn-outline-warning py-3 px-
4">Find Jobs</a> <a href="#" class="btn btn-warning py-3 px-
4">Apply For A Job</a></p>

</div>
</div>
</div>
</div>

P
<div class="site-section site-block-feature bg-light">

AP
<div class="container">

<div class="text-center mb-5 section-heading">


<h2>Why Choose Us</h2>
n
tio
</div>
lu
<div class="d-block d-md-flex border-bottom">
So

<div class="text-center p-4 item border-right" data-aos="fade">


<span class="flaticon-worker display-3 mb-3 d-block text-
primary"></span>
TE

<h2 class="h4">More Jobs Every Day</h2>


<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati
reprehenderit explicabo quos fugit vitae dolorum.</p>
SB

<p><a href="#">Read More <span class="icon-arrow-


right small"></span></a></p>
</div>
M

<div class="text-center p-4 item" data-aos="fade">


<span class="flaticon-wrench display-3 mb-3 d-block text-
primary"></span>
<h2 class="h4">Creative Jobs</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati
reprehenderit explicabo quos fugit vitae dolorum.</p>
<p><a href="#">Read More <span class="icon-arrow-
right small"></span></a></p>
</div>
</div>
<div class="d-block d-md-flex">
<div class="text-center p-4 item border-right" data-aos="fade">
<span class="flaticon-stethoscope display-3 mb-3 d-block text-
primary"></span>
<h2 class="h4">Healthcare</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati
reprehenderit explicabo quos fugit vitae dolorum.</p>
<p><a href="#">Read More <span class="icon-arrow-
right small"></span></a></p>
</div>
<div class="text-center p-4 item" data-aos="fade">
<span class="flaticon-calculator display-3 mb-3 d-block text-
primary"></span>
<h2 class="h4">Finance &amp; Accounting</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati
reprehenderit explicabo quos fugit vitae dolorum.</p>

P
<p><a href="#">Read More <span class="icon-arrow-
right small"></span></a></p>

AP
</div>
</div>
</div>
</div>
n
tio
lu
So

<div class="site-section block-15">


<div class="container">
<div class="row">
TE

<div class="col-md-6 mx-auto text-center mb-5 section-heading">


<h2>Recent Blog</h2>
SB

</div>
</div>
M

<div class="nonloop-block-15 owl-carousel">

<div class="media-with-text">
<div class="img-border-sm mb-4">
<a href="#" class="image-play">
<img src="images/img_1.jpg" alt="" class="img-fluid">
</a>
</div>
<h2 class="heading mb-0 h5"><a href="#">Jobs are made easy</a></h2>
<span class="mb-3 d-block post-
date">January 20, 2018 &bullet; By <a href="#">Josh Holmes</a></span>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio d
olores culpa qui aliquam placeat nobis veritatis tempora natus rerum obcaecati.</
p>
</div>

<div class="media-with-text">
<div class="img-border-sm mb-4">
<a href="#" class="image-play">
<img src="images/img_2.jpg" alt="" class="img-fluid">
</a>
</div>
<h2 class="heading mb-0 h5"><a href="#">Jobs are made easy</a></h2>
<span class="mb-3 d-block post-
date">January 20, 2018 &bullet; By <a href="#">Josh Holmes</a></span>

P
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio d
olores culpa qui aliquam placeat nobis veritatis tempora natus rerum obcaecati.</

AP
p>
</div>

<div class="media-with-text">
n
tio
<div class="img-border-sm mb-4">
<a href="#" class="image-play">
lu
<img src="images/img_3.jpg" alt="" class="img-fluid">
So

</a>
</div>
<h2 class="heading mb-0 h5"><a href="#">Jobs are made easy</a></h2>
TE

<span class="mb-3 d-block post-


date">January 20, 2018 &bullet; By <a href="#">Josh Holmes</a></span>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio d
SB

olores culpa qui aliquam placeat nobis veritatis tempora natus rerum obcaecati.</
p>
</div>
M

<div class="media-with-text">
<div class="img-border-sm mb-4">
<a href="#" class="image-play">
<img src="images/img_1.jpg" alt="" class="img-fluid">
</a>
</div>
<h2 class="heading mb-0 h5"><a href="#">Jobs are made easy</a></h2>
<span class="mb-3 d-block post-
date">January 20, 2018 &bullet; By <a href="#">Josh Holmes</a></span>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio d
olores culpa qui aliquam placeat nobis veritatis tempora natus rerum obcaecati.</
p>
</div>

<div class="media-with-text">
<div class="img-border-sm mb-4">
<a href="#" class="image-play">
<img src="images/img_2.jpg" alt="" class="img-fluid">
</a>
</div>
<h2 class="heading mb-0 h5"><a href="#">Jobs are made easy</a></h2>
<span class="mb-3 d-block post-
date">January 20, 2018 &bullet; By <a href="#">Josh Holmes</a></span>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio d
olores culpa qui aliquam placeat nobis veritatis tempora natus rerum obcaecati.</
p>

P
</div>

AP
<div class="media-with-text">
<div class="img-border-sm mb-4">
<a href="#" class="image-play">

n
<img src="images/img_3.jpg" alt="" class="img-fluid">
tio
</a>
</div>
lu
<h2 class="heading mb-0 h5"><a href="#">Jobs are made easy</a></h2>
So

<span class="mb-3 d-block post-


date">January 20, 2018 &bullet; By <a href="#">Josh Holmes</a></span>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio d
TE

olores culpa qui aliquam placeat nobis veritatis tempora natus rerum obcaecati.</
p>
</div>
SB

<div class="media-with-text">
<div class="img-border-sm mb-4">
M

<a href="#" class="image-play">


<img src="images/img_1.jpg" alt="" class="img-fluid">
</a>
</div>
<h2 class="heading mb-0 h5"><a href="#">Jobs are made easy</a></h2>
<span class="mb-3 d-block post-
date">January 20, 2018 &bullet; By <a href="#">Josh Holmes</a></span>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio d
olores culpa qui aliquam placeat nobis veritatis tempora natus rerum obcaecati.</
p>
</div>

<div class="media-with-text">
<div class="img-border-sm mb-4">
<a href="#" class="image-play">
<img src="images/img_2.jpg" alt="" class="img-fluid">
</a>
</div>
<h2 class="heading mb-0 h5"><a href="#">Jobs are made easy</a></h2>
<span class="mb-3 d-block post-
date">January 20, 2018 &bullet; By <a href="#">Josh Holmes</a></span>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio d
olores culpa qui aliquam placeat nobis veritatis tempora natus rerum obcaecati.</
p>
</div>

<div class="media-with-text">

P
<div class="img-border-sm mb-4">
<a href="#" class="image-play">

AP
<img src="images/img_3.jpg" alt="" class="img-fluid">
</a>
</div>

n
<h2 class="heading mb-0 h5"><a href="#">Jobs are made easy</a></h2>
tio
<span class="mb-3 d-block post-
date">January 20, 2018 &bullet; By <a href="#">Josh Holmes</a></span>
lu
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio d
So

olores culpa qui aliquam placeat nobis veritatis tempora natus rerum obcaecati.</
p>
</div>
TE

</div>

<div class="row">
SB

</div>
</div>
M

</div>

<footer class="site-footer">
<div class="container">

<div class="row">
<div class="col-md-4">
<h3 class="footer-heading mb-4 text-white">About</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat
quos rem ullam, placeat amet.</p>
<p><a href="#" class="btn btn-primary pill text-white px-
4">Read More</a></p>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
<h3 class="footer-heading mb-4 text-white">Quick Menu</h3>
<ul class="list-unstyled">
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Approach</a></li>
<li><a href="#">Sustainability</a></li>

P
<li><a href="#">News</a></li>
<li><a href="#">Careers</a></li>

AP
</ul>
</div>
<div class="col-md-6">

n
<h3 class="footer-heading mb-4 text-white">Categories</h3>
tio
<ul class="list-unstyled">
<li><a href="#">Full Time</a></li>
lu
<li><a href="#">Freelance</a></li>
So

<li><a href="#">Temporary</a></li>
<li><a href="#">Internship</a></li>
</ul>
TE

</div>
</div>
</div>
SB

<div class="col-md-2">
M

<div class="col-md-12"><h3 class="footer-heading mb-4 text-


white">Social Icons</h3></div>
<div class="col-md-12">
<p>
<a href="#" class="pb-2 pr-2 pl-0"><span class="icon-
facebook"></span></a>
<a href="#" class="p-2"><span class="icon-twitter"></span></a>
<a href="#" class="p-2"><span class="icon-
instagram"></span></a>
<a href="#" class="p-2"><span class="icon-vimeo"></span></a>

</p>
</div>
</div>
</div>
<div class="row pt-5 mt-5 text-center">
<div class="col-md-12">
<p>
<!--
Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --
>
Copyright &copy; <script data-cfasync="false" src="/cdn-
cgi/scripts/5c5dd728/cloudflare-static/email-
decode.min.js"></script><script>document.write(new Date().getFullYear());</script
> All Rights Reserved | This template is made with <i class="icon-heart text-
warning" aria-
hidden="true"></i> by <a href="https://colorlib.com" target="_blank" >Colorlib</a

P
>
<!--

AP
Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --
>
</p>
</div>
n
tio
</div>
lu
</div>
So

</footer>
</div>
TE

<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery-migrate-3.0.1.min.js"></script>
<script src="js/jquery-ui.js"></script>
SB

<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
M

<script src="js/jquery.stellar.min.js"></script>
<script src="js/jquery.countdown.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/bootstrap-datepicker.min.js"></script>
<script src="js/aos.js"></script>

<script src="js/mediaelement-and-player.min.js"></script>

<script src="js/main.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
var mediaElements = document.querySelectorAll('video, audio'), to
tal = mediaElements.length;

for (var i = 0; i < total; i++) {


new MediaElementPlayer(mediaElements[i], {
pluginPath: 'https://cdn.jsdelivr.net/npm/mediaelement@4.
2.7/build/',
shimScriptAccess: 'always',
success: function () {
var target = document.body.querySelectorAll('.player'
), targetTotal = target.length;
for (var j = 0; j < targetTotal; j++) {
target[j].style.visibility = 'visible';

P
}
}

AP
});
}
});
</script>
n
tio
lu
<script>
// This example displays an address form, using the autocomplete feature
So

// of the Google Places API to help users fill in the information.

// This example requires the Places library. Include the libraries=places


TE

// parameter when you first load the API. For example:


// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&li
SB

braries=places">

var placeSearch, autocomplete;


M

var componentForm = {
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'short_name',
country: 'long_name',
postal_code: 'short_name'
};

function initAutocomplete() {
// Create the autocomplete object, restricting the search to geographical
// location types.
autocomplete = new google.maps.places.Autocomplete(
/** @type {!HTMLInputElement} */(document.getElementById('autocomplet
e')),
{types: ['geocode']});

// When the user selects an address from the dropdown, populate the addre
ss
// fields in the form.
autocomplete.addListener('place_changed', fillInAddress);
}

function fillInAddress() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();

P
for (var component in componentForm) {
document.getElementById(component).value = '';

AP
document.getElementById(component).disabled = false;
}

n
// Get each component of the address from the place details
tio
// and fill the corresponding field on the form.
for (var i = 0; i < place.address_components.length; i++) {
lu
var addressType = place.address_components[i].types[0];
So

if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById(addressType).value = val;
TE

}
}
}
SB

// Bias the autocomplete object to the user's geographical location,


// as supplied by the browser's 'navigator.geolocation' object.
M

function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var circle = new google.maps.Circle({
center: geolocation,
radius: position.coords.accuracy
});
autocomplete.setBounds(circle.getBounds());
});
}
}
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7
SQ74_uJiULgl1JY0H2s&libraries=places&callback=initAutocomplete"

async defer></script>

</body>
</html>

P
AP
n
tio
lu
So
TE
SB
M
M
SB
TE
So
lu
tio
n
AP
P

You might also like