HTML Code for Resume with Picture
Below is a basic example of an HTML resume with a picture. Note that this is a simple template, and you may need to customize it based on your specific needs.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Resume</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}
header {
background-color: #3498db;
color: #fff;
padding: 20px;
text-align: center;
}
section {
max-width: 800px;
margin: 20px auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
img {
max-width: 100%;
height: auto;
border-radius: 50%;
}
h1, h2, h3 {
color: #3498db;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin-bottom: 10px;
}
p {
line-height: 1.6;
}
</style>
</head>
<body>
<header>
<h1>Your Name</h1>
<p>Web Developer</p>
<img src="your-profile-picture.jpg" alt="Profile Picture">
</header>
<section>
<h2>Contact Information</h2>
<ul>
<li>Email: your.email@example.com</li>
<li>Phone: (123) 456-7890</li>
<li>LinkedIn: linkedin.com/in/yourusername</li>
<li>GitHub: github.com/yourusername</li>
</ul>
<h2>Education</h2>
<p><strong>Degree in Web Development</strong><br>University Name, Graduation Year</p>
<h2>Work Experience</h2>
<p><strong>Web Developer</strong><br>Company Name, Location (City, State)<br>Start Date - End Date</p>
<h2>Skills</h2>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>React.js</li>
<li>Node.js</li>
<!-- Add more skills as needed -->
</ul>
</section>
</body>
</html>
Replace `"your-profile-picture.jpg"` in the `<img>` tag with the actual path to your profile picture. Customize the content, such as your name, contact information, education, work experience, and skills, according to your resume. Additionally, you can extend or modify the template to suit your specific requirements.
Post a Comment