If you want to know how to make resume in HTML. But before that, let’s know what a resume means. Resume prepaired for job purposes includes writing a brief about your personal details, educational qualification, and your work experience. However, to attract the attention of recruiters, you need to create a beautiful crafted resume. However, most job seekers use a printed resume for their job interview. The more efficiently and modernly you can create your resume, the more effective it will be. So nowadays many people create a digital resume or a resume website for themselves. Digital resume has many advantages. You can design it in a very beautiful way in the most modern way and you can edit it as needed at anytime. Below is the HTML code for creating digital resume for job purposes, which you can use. As an example, below is programming code for a Resume.
index.html >>
<html>
<head>
<title>Resume</title>
<link rel=”stylesheet” href=”style.css”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
</head>
<hr>
<body>
<div class=”content”>
<style>
img {
border-radius: 50%;
}
table {
border: 1px solid;
border-radius:8px;
}
.line {
border: none;
height: 2px;
background-color: blue;
width: 80%;
margin: 20px auto;
}
</style>
<div align=”center”><img src=”Desert.jpg” height=120 width=120 1px><br><br>
<font face=”Courier New” size=”5″><b>Deepika chowdhury</b></font></div><br>
<hr class=”line”><br>
Father’s name: Dinesh chowdhury<br>
Mothers’s name: Sujata chowdhury<br>
Date of Birth: 18:12:1997<br>
Gender: Male<br>
Permanant Address: Nagerbazar, Dumdum, Kolkata<br>
Present Address: Nagerbazar, Dumdum, Kolkata<br>
Religion: Hindu<br>
Caste: General<br>
Nationality: Indian<br>
Mobile no: 1234566543<br>
Email Id: example@gmail.com<br><br>
<b><u>Work Experience:</u></b> I worked as a website developer in NMK Technologies from 2 years<br><br>
</font>
<div align=”center”>
<table style=”width:80%” border=2>
<tr>
<th colspan=”6″>Academic Qualification</th>
</tr>
<tr>
<th>Exam</th>
<th>Board/University</th>
<th>Full Marks</th>
<th>Marks Obtained</th>
<th>Percentage</th>
<th>Passing Year</th>
</tr>
<tr>
<th>HS</th>
<th>Netaji Subhas Open University</th>
<th>900</th>
<th>700</th>
<th>80%</th>
<th>2020</th>
</tr>
<tr>
<th>HS</th>
<th>Netaji Subhas Open University</th>
<th>900</th>
<th>700</th>
<th>80%</th>
<th>2020</th>
</tr>
</table>
<div>
<br>
<div align=”left”>I hereby state that all the information noted above is accurate to the best of my beliefs and I take full responsibility for the correctness of the information.</div>
<br><br><br>
<div align=”right”>Signature</div>
</div>
</body>
</html>
style.css>>
@page {
size: A4;
margin: 20mm;
}
body {
margin: 0;
padding: 0;
}
.content {
width: 40%;
padding: 20mm;
box-sizing: border-box;
background-color: #FFFFFF;
border: 2px solid #333;
margin: 20px auto;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 15px;
padding: 60px;
}
h1, p {
margin: 0 0 10px;
}
.title {
color: #5C6AC4;
}
.printbutton {
bottom: 80px;
right: 750px;
z-index: 1000;
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.print-button:hover {
background-color: #0056b3;
}
@media screen and (max-width: 600px) {
body { font-size: 12px; }
.content {
width: 80%;
}
img{
height: 40;
width: 40;
}
table {
font-size: 8px;
width: 30%;
}
.printbutton{
display: none
}
}
@media print {
@page {
margin: 20mm;
size: A4 portrait;
margin: 1cm;
.printbutton{
display: none
}
.content {
width: 80%;
height: 90%;
}
img{
height: 80;
width: 80;
}
table {
font-size: 12px;
}
}