Project Activity 2: CSS Fundamentals

Project Activity 2: CSS Fundamentals

Create a Styled Profile Card

In this project, you will create a styled profile card using HTML and CSS. The profile card will include an image, name, job title, and a short description. Follow the steps below to complete the project:

Step 1: Set up the HTML structure

Create a new HTML file and set up the basic HTML structure. Add a div element with a class of “profile-card” to serve as the container for the profile card.

Step 2: Add the profile image

Inside the “profile-card” div, add an img element to display your profile image. Set the src attribute to the path of an image file of your choice.

Step 3: Add the profile details

Below the profile image, add heading elements (h1, h2, etc.) to display your name and job title. Add a paragraph element to provide a short description or bio.

Step 4: Style the profile card

In a separate CSS file or within a <style> tag in the HTML file, add styles to the “profile-card” class. Experiment with different CSS properties to customize the appearance of the profile card. You can change the font properties, background color, padding, border, and more.

Step 5: Test and refine

Save your HTML and CSS files and open the HTML file in a web browser. Test your profile card to ensure it is displayed correctly and the styles are applied as expected. Make any necessary adjustments to the layout or styles until you are satisfied with the result.