ChatGPT

Share

Profile image

html example code

Here’s a simple HTML example code that creates a personal profile webpage with a heading, image, paragraph, and a list of hobbies:

html

Copy

Edit

                        
                    <!DOCTYPE html>
                    <html lang="en">
                    <head>
                      <meta charset="UTF-8">
                      <title>My Personal Profile</title>
                      <style>

                        body {
                          font-family: Arial, sans-serif;
                          background-color: #f0f0f0;
                          text-align: center;
                          padding: 20px;
                        }

                        img {
                          width: 150px;
                          border-radius: 50%;
                        }

                        .card {
                          background-color: white;
                          padding: 20px;
                          border-radius: 10px;
                          display: inline-block;
                          box-shadow: 0 0 10px rgba(0,0,0,0.1);
                        }

                      </style>
                    </head>
                    <body>
                    
                      <div class="card">
                        <h1>Hello, I'm Nasiba!</h1>
                        <img src="https://via.placeholder.com/150"
                        alt="My Profile Picture">

                        <p>I am learning HTML and love creating websites.
                        I also enjoy reading and volunteering at tech events.</p>
                        
                        <h3>My Hobbies:</h3>

                        <ul style="text-align: left;">

                          <li>Reading books</li>
                          <li>Coding simple projects</li>
                          <li>Helping at IT events</li>

                        </ul>
                      </div>
                    
                    </body>
                    </html>
                      
                    

What this code includes:

  • <!DOCTYPE html> - declares the document as HTML5.
  • <head> - sets the title and CSS styles.
  • <body> - displays your content inside a centered card.
  • An example image ( via.placeholder.com ) - you can replace it with your own.
  • A short introduction and a list of hobbies.

Let me know if you want this to be more interactive (e.g., with buttons, JavaScript, or form inputs).