Scribd
Upload
76 views3 pages

Assignment # 03

The assignment requires creating a personal profile card webpage using HTML and CSS, including elements such as a name, description, quote, photo simulation, hobbies list, and contact details. Specific structure and styling requirements are outlined, including the use of divs, headings, and lists, along with CSS styling for layout and text formatting. Optional tasks include adding a fun fact box and experimenting with fonts, with submissions to be made via Microsoft Teams.

Uploaded by

Taya ki Baatain
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
76 views3 pages

Assignment # 03

The assignment requires creating a personal profile card webpage using HTML and CSS, including elements such as a name, description, quote, photo simulation, hobbies list, and contact details. Specific structure and styling requirements are outlined, including the use of divs, headings, and lists, along with CSS styling for layout and text formatting. Optional tasks include adding a fun fact box and experimenting with fonts, with submissions to be made via Microsoft Teams.

Uploaded by

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

Assignment #03: Design a Personal Profile Card Using HTML & CSS

Instructions:
Create a personal profile card webpage using HTML and CSS that displays
basic information about yourself, using the concepts you have learned so far.

Structure Requirements (HTML):


 Use a main <div> with the ID profile-card to contain the entire layout.
Inside #profile-card, include the following elements:
1. Your Full Name inside a heading tag (<h1>).
2. A short paragraph describing yourself (interests, hobbies, etc.).
3. A favorite quote or life goal in a separate div using <i> or font-style:
italic.
4. Another <div> to simulate a profile photo using border and background
color.
5. A list (<ul>) of 3–5 favorite hobbies or skills.
6. Another <div> to contain contact details, including:
o Your email (e.g., Email: [email protected])

o A phone number (e.g., Phone: 03XX-XXXXXXX)

7. A footer <div> containing a closing line such as:


"Thank you for viewing my profile!"

Styling Requirements (CSS):


Use only tag selectors and ID selectors (e.g., h1, p, #profile-card) to apply the
styles.
Style the #profile-card div:
 Add a border.
 Set a fixed width and height.
 Apply padding and margin.
 Set a background color.
Style the heading and text:
 Set font family, font size, and text color.
 Make the heading bold.
 Make the quote text italic using font-style: italic.
Style the "Photo Box" div:
 Set a fixed width and height.
 Add a border.
 Set a background color to simulate a photo area.
Style the list:
 Change the font color of the list items.
 Add spacing (margin or padding) between items.
Style the contact info:
 Add some margin or padding to separate it from the list.
 Apply a different text color or font size.
Style the footer:
 Center the text using text-align: center.
 Change its font weight or color to make it stand out.

Optional (Bonus Tasks):


 Add another <div> as a "Fun Fact" box and style it with a different
background.
 Use multiple nested <div>s to organize the sections more cleanly.
 Experiment with different fonts (e.g., Arial, Georgia, Verdana).

Submission:
 Submit:
o A .html file with all your HTML code.

o A .css file linked using <link rel="stylesheet" href="style.css">.

 Submit on Microsoft Teams, in the section of Assignment #03.

Learning Outcomes:
By completing this assignment, you will:
 Practice building layout using div tags.
 Apply text formatting and spacing using CSS.
 Use ID and tag selectors effectively.
 Understand how to combine structure and design to build a simple user
interface.
 Improve your confidence in writing clean, well-organized HTML and CSS.

You might also like