Personal Profile Page in HTML

  1. HTML Document Structure
      <!DOCTYPE html>
<html lang="en">
<head>
      • <!DOCTYPE html>: Declares that this document is an HTML5 document.
      • <html lang="en">: Specifies that the language of the content is English.

      2. <head> Section

      <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rupam's Personal Profile</title>
<style>
      • <meta charset="UTF-8">: Sets the character encoding to UTF-8, ensuring support for a wide range of characters.
      • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Enables responsive design, making the page adjust to different screen sizes.
      • <title>Rupam's Personal Profile</title>: Sets the title that appears on the browser tab.
      • <style>: Contains CSS for styling the page.

      3. CSS Styling

      body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f9;
}
.container {
    max-width: 800px;
    margin: auto;
    padding: 20px;
}
      • body: Sets the font, removes default margins and padding, and sets a light background color.
      • container: Creates a central, max-width container with padding, centered on the screen.

      Profile Header Styling

      .profile-header {
    text-align: center;
    padding: 20px;
}
.profile-header img {
    border-radius: 50%;
    width: 150px;
    height: 150px;
}
.profile-header h1 {
    margin: 10px 0;
    font-size: 2em;
    color: #333;
}
.profile-header p {
    color: #666;
    font-size: 1.2em;
}
      • profile-header: Centers content and adds padding.
      • img: Styles the profile image as a circle (border-radius: 50%) and sets its size.
      • h1 and p: Styles the header text with font size and color adjustments.

      Section Styling

      .section {
    margin-top: 30px;
}
.section h2 {
    color: #333;
    border-bottom: 2px solid #333;
    padding-bottom: 10px;
}
.section p {
    color: #666;
    line-height: 1.6;
}
      • .section: Adds space above each section.
      • h2 and p: Adds visual styling to headings and paragraphs.

      Contact Info Styling

      .contact-info {
    margin-top: 30px;
}
.contact-info h3 {
    color: #333;
    font-size: 1.5em;
}
.contact-info ul {
    list-style-type: none;
    padding: 0;
}
.contact-info ul li {
    color: #666;
    margin: 5px 0;
}
      • .contact-info: Adds spacing above the contact section.
      • ul and li: Removes bullet points from the list and adjusts colors.

      4. <body> Section

      <body>
<div class="container">
    <div class="profile-header">
        <img src="profile.jpg" alt="Profile Photo">
        <h1>Rupam</h1>
        <p>Canva Template Creator | Web Enthusiast | Digital Creator</p>
    </div>
      • <body>: Contains the main visible content.
      • <div class="container">: Central container that wraps all page content.
      • profile-header: Displays the profile image (<img src="profile.jpg">), name (<h1>Rupam</h1>), and title (<p>Canva Template Creator | Web Enthusiast | Digital Creator</p>).

      5. “About Me” Section

      <div class="section">
    <h2>About Me</h2>
    <p>Hello! I am Rupam, a creative professional specializing in designing templates and editing images on Canva...</p>
</div>
      • section: Introduces the “About Me” section, with a title (<h2>About Me</h2>) and a paragraph about yourself.


      6. Skills Section

      <div class="section">
    <h2>Skills</h2>
    <ul>
        <li>Template Design and Editing on Canva</li>
        <li>HTML & CSS for basic web development</li>
        <li>Content Creation and Digital Strategy</li>
    </ul>
</div>
      • Lists skills in an unordered list format.

      8. Lists skills in an unordered list format.

      <div class="contact-info">
    <h3>Contact Me</h3>
    <ul>
        <li>Email: yourname@example.com</li>
        <li>Phone: +123-456-7890</li>
        <li>LinkedIn: <a href="https://www.linkedin.com/in/yourprofile" target="_blank">linkedin.com/in/yourprofile</a></li>
    </ul>
</div>
      • Closes the main container, body, and html tags to complete the document.
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rupam's Personal Profile</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f9;
        }
        .container {
            max-width: 800px;
            margin: auto;
            padding: 20px;
        }
        .profile-header {
            text-align: center;
            padding: 20px;
        }
        .profile-header img {
            border-radius: 50%;
            width: 150px;
            height: 150px;
        }
        .profile-header h1 {
            margin: 10px 0;
            font-size: 2em;
            color: #333;
        }
        .profile-header p {
            color: #666;
            font-size: 1.2em;
        }
        .section {
            margin-top: 30px;
        }
        .section h2 {
            color: #333;
            border-bottom: 2px solid #333;
            padding-bottom: 10px;
        }
        .section p {
            color: #666;
            line-height: 1.6;
        }
        .contact-info {
            margin-top: 30px;
        }
        .contact-info h3 {
            color: #333;
            font-size: 1.5em;
        }
        .contact-info ul {
            list-style-type: none;
            padding: 0;
        }
        .contact-info ul li {
            color: #666;
            margin: 5px 0;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="profile-header">
        <img src="profile.jpg" alt="Profile Photo">
        <h1>Rupam</h1>
        <p>Canva Template Creator | Web Enthusiast | Digital Creator</p>
    </div>

    <div class="section">
        <h2>About Me</h2>
        <p>Hello! I am Rupam, a creative professional specializing in designing templates and editing images on Canva. My work focuses on blending visual aesthetics with user-friendly functionality to create compelling online experiences. I am currently working on building my personal website to expand my digital presence.</p>
    </div>

    <div class="section">
        <h2>Skills</h2>
        <ul>
            <li>Template Design and Editing on Canva</li>
            <li>HTML & CSS for basic web development</li>
            <li>Content Creation and Digital Strategy</li>
        </ul>
    </div>

    <div class="contact-info">
        <h3>Contact Me</h3>
        <ul>
            <li>Email: yourname@example.com</li>
            <li>Phone: +123-456-7890</li>
            <li>LinkedIn: <a href="https://www.linkedin.com/in/yourprofile" target="_blank">linkedin.com/in/yourprofile</a></li>
        </ul>
    </div>
</div>

</body>
</html>