Simple Profile Card

A clean, modern, and responsive profile card component built with HTML and CSS. This project provides a simple template for showcasing a user's profile information, including a picture, bio, stats, and social media links.

Features

• Profile Information: Displays a user's name, job title, and a short biography.
• Profile Picture: Includes a circular profile image with a border that overlaps the header.
• User Stats: A section to showcase key statistics like followers, projects, and following count.
• Social Media Links: Integrated Font Awesome icons for linking to social profiles (Twitter, LinkedIn, GitHub, etc.).
• Hover Effect: A subtle lift effect on the card when the user hovers over it.
• Responsive Design: The layout is centered and designed to look great on various screen sizes.

Technologies Used

• HTML5: For the structure and content of the card.
• CSS3: For all styling, layout (Flexbox), and animations.
• Google Fonts: Uses the 'Poppins' font for a clean and modern typeface.
• Font Awesome: For scalable vector icons for the social media links.

How to Use

To use this profile card in your own project, follow these simple steps:

1. Download the files:

   • index.html
   • style.css

2. Place them in the same project directory.

3. Open index.html in your web browser to view the profile card.

Customization

You can easily customize the profile card by editing the index.html and style.css files.

Changing Content (index.html)

• Profile Picture: Change the src attribute of the <img> tag with the class profile-img.
• Name, Title, and Bio: Edit the text content within the .card-body div.
• Stats: Update the numbers and labels inside the .stats div.
• Social Links: Update the href attribute for each <a> tag in the .social-links div to point to your actual profiles. You can also change the icons by using different Font Awesome classes.

Changing Styles (style.css)

• Colors: Modify the color values for properties like background-color and color. The main theme color is set in the .card-header class (#4a90e2) and can be easily changed.
• Fonts: Change the font by updating the @import rule at the top of the file and the font-family property in the body selector.
• Sizing: Adjust width, padding, and font-size values to fit your design needs.