Best Job Board HTML Website Templates 2023 For Vacancies & Requirements 1. INTENSE Job Board Website Template. Employment Responsive web Template is aimed for a job portal the place that you.
HTML code👇
<!DOCTYPE html>
<html>
<link rel="stylesheet"href="styles.css">
<body>
<fieldset id="titlecolor">
<div class="box">
<div class="card"></div>
<div class="card1"></div>
<div class="card"></div>
<div class="card1"></div>
</div>
<div><label class="title">Welcome To My BlogSpot</label>
</div>
</fieldset>
<hr>
<div class="card3">
<label id="job">JOB Search</label>
<ul>
<li><a href="http://biharboardonline.bihar.gov.in/">Bihar Board 10th Matric Compartment Result 2023</a></li>
<li><a href="https://www.mha.gov.in/en">IB Security Assistant, MTS Result 2023</a></li>
<li><a href="https://upsc.gov.in/">UPSC CPF AC 2021 Final Result</a></li>
<li><a href="https://upsc.gov.in/whats-new">UPSC CMS 2022 Final Result</a></li>
<li><a href="https://rsmssb.rajasthan.gov.in/page?menuName=ApBuI6wdvnNKC6MoOgFsfXwFRsE7cKLr">RSMSSB REET Main Upper Primary Level Result 2023</a></li>
<li><a href="https://ssc.nic.in/">SSC CHSL 2022 Tier I Additional Result</a></li>
<li><a href="https://rajeduboard.rajasthan.gov.in/">Rajasthan Board RBSE 10th Result 2023</a></li>
<li><a href="#">NHPC THDC Various Post Online Form 2023</a></li>
<li><a href="https://www.joinindiannavy.gov.in/">Navy B.Tech Entry January 2024 Online Form</a></li>
<li><a href="http://upsssc.gov.in/Default.aspx">UPSSSC X Ray Technician Online Form 2023</a></li>
</ul>
</div>
<div class="card4">
<label id="notification">Notifications</label>
<ul>
<li>Staff Selection Commission SSC All Region CR, MPR, NR, WR, KKR, and Other Region Are Yet to be Issued Combined Higher Secondary Level CHSL 10+2 Recruitment 2021. Notification and Invited Online</li>
<li>A total of 10,66,300 candidates are registered in Rajasthan Board Class 10th Secondary Exam 2023.d</li>
<li>THDC India Limited only: Dehradun, Haldwani, Haridwar, Roorkee, Agra, Aligarh, Greater Noida, Jhansi, Kanpur, Lucknow, Prayagraj & Varanasi</li>
</ul>
</div>
<div class="card5">
<label id="social">social Medial links</label>
<label><a href="https://www.youtube.com/"><img class="youtub"src="https://logos-world.net/wp-content/uploads/2020/04/YouTube-Symbol.png"></a></label>
<label><a href="https://www.instagram.com/?hl=en"><img class="instagram"src="https://pluspng.com/img-png/instagram-png-instagram-logo-2-png-8-de-abril-de-2017-927-kb-3500-3393-3500.png"></a></label>
<div><a href="https://web.telegram.org/k/"><img class="telegram"src="https://logodix.com/logo/1255309.png"></a></div>
<label><a href="https://web.whatsapp.com/"><img class="whatsapp"src="https://clipart.info/images/ccovers/1499955335whatsapp-icon-logo-png.png"></a></label>
</div>
<div class="card6">
<div class="feedback">FeedBack</div>
<div class="user">
<label id="email">Email:<input class="id"type ="email"placeholder="Enter Valid Email ID!"></label>
</div>
<div class="user">
<label id="email">Phone No:<input class="id"type ="number"placeholder="Enter Valid Number!"></label>
</div>
<textarea class="text" placeholder="Please Enter feedback!"></textarea>
<div class="send"><button id="send_now">Send Now!</button></div>
</div>
<hr>
<div class="btn">
<button id="btn_new">New Registration...</button>
<button id="btn_login">Login Here...</button>
</div>
<div class="forget">
<a href="#">Forget My Password</a>
</div>
</body>
</html>
Normal flow. Normal flow is how the browser lays out HTML pages CSS CODE👇
body{
background:rgb(88, 133, 125);
}
.card{
background: #fff;
height:28px;
border:2px solid rgb(255, 255, 255);
width:-1%;
float: left;
margin-top:20px;
margin-left:3px;
padding-left:3px;
border-radius: 10px;
box-shadow: 10px 0px 10px 0px rgb(255, 51, 0);
overflow: hidden;
animation: infinite;
}
.card1{
background: #fff;
height:20px;
border:2px solid rgb(255, 255, 255);
width:-1%;
margin-left:3px;
float: left;
padding-left:3px;
margin-top:26px;
border-radius: 10px;
box-shadow: 10px 0px 10px 0px rgb(255, 51, 0);
}
.box{
background:rgb(26, 255, 0);
height:70px;
width:5%;
border-radius: 40px 40px 40px 0px;
padding-left:10px;
margin-left:300px;
box-shadow: 10px 0px 10px 0px rgb(255, 51, 0);
overflow: auto;
float:left;
}
.box:hover{
padding-left:11px;
margin-left:302px;
cursor: pointer;
}
/*.box:hover{
margin-left:505px;
margin-top:51px;
width:9%;
cursor:pointer;
}
*/
.title{
display:flex;
justify-content: center;
font-size: 40px;
margin: 20px 300px 0px 300px;
font-weight: 600;
box-shadow: 10px 0px 10px 0px rgb(107, 95, 90);
}
#titlecolor{
background-color:#f5d8d8;
box-shadow: 10px 0px 20px 0px rgb(89, 84, 82);
}
hr{
border:2px solid red;
}
.card3{
height:476px;
width:20%;
border:2px solid black;
float:left;
}
.card4{
border:2px solid black;
height:200px;
width:80%;
margin-left:245px;
}
.card5{
height:270px;
width:25%;
border:2px solid black;
margin-left:0px;
float:left;
}
.card6{
margin-left:545px;
height:270px;
width:55%;
border:2px solid black;
}
/*job search */
#job{
background-color: rgb(164, 16, 16);
color:#fff;
font-weight: 600;
font-size: 25px;
border:2px solid black;
margin-left:45px;
margin-top:10px;
padding:5px 5px 5px 5px;
border-radius:10px 0px 10px 0px;
}
#job:hover{
background-color:rgb(177, 18, 18);
font-size: 26px;
margin-right:44px;
margin-left:46px;
cursor: pointer;
}
/*END*/
/*notifications */
#notification{
background-color:rgb(164, 16, 16);
color:#fff;
font-size: 30px;
width:30%;
font-family: sans-serif;
font-weight: 600;
border:2px solid black;
padding:10px 10px 8px 10px;
display:flex;
justify-content: center;
margin-left:300px;
border-radius:15px 0px 15px 0px;
}
#notification:hover{
background-color:rgb(177, 18, 18);
font-size: 31px;
padding:10px 11px 8px 11px;
cursor: pointer;
}
li{
margin-top:8px;
}
/*END*/
/*social medial links*/
#social{
color:#fff;
font-size: 30px;
font-family: sans-serif;
font-weight: 600;
display:flex;
justify-content: center;
border:2px solid black;
border-radius:20px 0px 20px 0px;
background-color:rgb(164, 16, 16);
}
#social:hover{
background: rgb(188, 18, 18);
padding:1px 1px 1px 1px;
}
.youtub{
height:50px;
margin-left:10px;
}
.youtub:hover{
padding:1px 1px 1px 1px;
}
.instagram{
margin-top:20px;
height:55px;
margin-left:55px;
}
.instagram:hover{
padding:1px 1px 1px 1px;
}
.telegram{
margin:50px 0px 0px 30px;
height:55px;
float:left;
}
.telegram:hover{
padding:2px 2px 2px 2px;
}
.whatsapp{
margin-left:20px;
height:50px;
padding:50px 0px 0px 50px;
}
.whatsapp:hover{
padding:51px 1px 1px 51px;
}
/* END Social Medial Links*/
/*registration page*/
.btn{
display: flex;
justify-content: center;
}
#btn_new{
color:blue;
padding:5px 15px 5px 15px;
cursor: pointer;
}
#btn_login{
color:blue;
padding:5px 15px 5px 15px;
margin-left:100px;
cursor: pointer;
}
.forget{
display:flex;
justify-content: center;
margin-top:5px;
}
/*END registration page */
/*feedback */
.feedback{
color:#fff;
font-size: 30px;
font-family: sans-serif;
font-weight: 600;
border:2px solid black;
width:45%;
display:flex;justify-content: center;
margin-left:150px;
border-radius: 20px 0px 20px 0px;
background-color:rgb(164, 16, 16);
}
.feedback:hover{
background-color:rgb(195, 30, 30);
padding:1px 1px 1px 1px;
}
.user{
display: flex;
justify-content: center;
}
.id{
margin-top:20px;
outline:none;
border-radius:5px;
height:25px;
border:none;
padding-left:50px;
}
#email{
color:#fff;
font-size: 22px;
font-family: sans-serif;
font-weight: 600;
}
.text{
margin:20px 0px 0px 270px;
height:50px;
outline:none;
border-radius:0px 10px 0px 10px;
}
.send{
display:flex;
justify-content: center;
}
#send_now{
color:black;
font-size: 15px;
font-family: sans-serif;
font-weight: 600;
margin-top:20px;
padding: 5px 12px 5px 12px;
border-radius:5px;
}
#send_now:hover{
background-color:#dcdcdc;
padding:6px 13px 6px 13px;
}
Download html and css code pdf just click the links and download pdf👇
css pdf click here...
html pdf click here..