Scribd
Upload
5 views4 pages

HTML Project1

The document outlines the structure and content for a Personal Profile Card webpage. It includes sections for a header with the user's name and description, an 'About Me' section, a list of hobbies, a contact section with a clickable Instagram link, and a footer message. The document also provides guidance on the appropriate HTML tags to use for each section.

Uploaded by

shivaniaeluka
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views4 pages

HTML Project1

The document outlines the structure and content for a Personal Profile Card webpage. It includes sections for a header with the user's name and description, an 'About Me' section, a list of hobbies, a contact section with a clickable Instagram link, and a footer message. The document also provides guidance on the appropriate HTML tags to use for each section.

Uploaded by

shivaniaeluka
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Personal Profile Card or Personal CV

Question:

You are shown the output photo of a webpage. This webpage contains a Personal Profile
Card that includes your name, a short description about you, your hobbies, contact details,
and a footer message.
In the photo, you see the following sections:
1. Header:
- Your name is displayed in a big, bold font.
- Below your name, there is a short description about your profession or role.
2. About Me Section:
- There is a heading titled "About Me".
- A short paragraph explaining who you are and what you do.
3. Hobbies Section:
- A heading titled "Hobbies".
- A list of hobbies, shown with bullet points (like video editing and traveling).
4. Contact Section:
- A heading titled "Contact".
- A clickable link to your Instagram profile.
5. Footer:
- At the bottom of the page, there is a small message saying "Thanks for visiting my
profile!".

________________________________________
Your task:
Write the HTML code for the webpage shown in the output photo. Use the correct tags to
create the profile card. Follow the instructions carefully to create the following sections:
1. Header:
- Use an appropriate tag for your name and the description below it.
2. About Me:
- Use a heading tag for the title "About Me".
- Write a small paragraph that describes who you are and what you do.
3. Hobbies:
- Use a heading tag for the title "Hobbies".
- List at least two hobbies using bullet points.
4. Contact:
- Use a heading tag for "Contact".
- Provide a clickable link to your Instagram using the <a> tag. Make sure it opens in a new
tab.
5. Footer:
- Write a closing message saying "Thanks for visiting my profile!".
- Add the copyright message at the bottom with your name and the year.

________________________________________
What to use in your code:
1. <header>: To create the section that contains your name and short description.
2. <h1>, <p>: To display the name and short description.
3. <section>, <article>: To group related content like About Me and Hobbies.
4. <ul>, <li>: To create a list of hobbies.
5. <a>: To create a clickable link for Instagram.
6. <footer>: To include the footer message at the bottom of the page.
7. <hr>: To create horizontal lines between sections.
________________________________________
Example Output:
The output should look like a Profile Card with your name at the top, followed by a
description, hobbies, a clickable Instagram link, and a footer message. Make sure to follow
the structure and use the right tags!

Answer final code:

<!DOCTYPE html>
<html>
<head>
<title>Personal Profile Card</title>
</head>
<body>

<!-- Profile Card Container -->


<main>
<!-- Header with Name -->
<header>
<h1>Vamsi Krishna</h1> <!-- Name -->
<p><i>Passionate Content Creator | Video Editor</i></p> <!-- Subtitle -->
</header>
<hr>

<!-- Profile Details Section -->


<section>
<article>
<h2>About Me</h2>
<p>I'm a video editor and web development enthusiast with a passion for
storytelling and content creation.</p>
</article>

<article>
<h2>Hobbies</h2>
<ul>
<li>Exploring video editing techniques</li>
<li>Traveling to scenic places</li>
</ul>
</article>
</section>
<hr>
<!-- Contact Section -->
<aside>
<h2>Contact</h2>
<p> Instagram: <a href="https://instagram.com/Vamsi_journey"
target="_blank">Vamsi_journey</a></p>
</aside>
</main>

<!-- Footer with Closing Statement -->


<footer>
<p>Thanks for visiting my profile!</p>
</footer>

</body>
</html>

You might also like