HTML Code for Resume with Picture

 HTML Code for Resume with Picture

resume,HTML resume,web development,profile picture,contact information,education,work experience,skills,web developer,front-end development,linkedin,github,HTML5,CSS3,Javascript,React.js,Node.js.,

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.


<!DOCTYPE html>

<html lang="en">


    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Your Resume</title>


        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;






        <h1>Your Name</h1>

        <p>Web Developer</p>

        <img src="your-profile-picture.jpg" alt="Profile Picture">



        <h2>Contact Information</h2>



            <li>Phone: (123) 456-7890</li>





        <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>








            <!-- Add more skills as needed -->





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

Previous Post Next Post