Personal Profile Card Interface

This is a simple beginner-friendly project to help you learn HTML and CSS by creating a stylish profile card that displays a photo, name, role, and social media links.

---

? Project Overview

This project will teach you how to:

• Structure a basic HTML document.
• Apply CSS to style your content.
• Create a simple card layout with rounded corners and shadows.
• Add and style images, text, and links.
• Use Flexbox for arranging elements.

---

? File Structure

Your project will have two files:

personal-profile_card/
│-- index.html      ← The HTML structure
└-- styles.css      ← The CSS styling

---

? HTML File (index.html)

This file contains the structure (or skeleton) of the web page. Here's what it looks like:

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Personal Profile Card</title>
  <link rel="stylesheet" href="styles.css">


  <div>



<h3>
  
  
  <strong>Explanation of Key Elements</strong>
</h3>

<ol>
<li>
<p><strong>Profile Card Container</strong> (</p>
<div>
<br>
A box that holds the image, name, role, and social links.
<li><p><strong>Image Tag</strong> (<img  alt="Personal Profile Card Interface" >)<br><br>
Displays the profile picture.</p></li>
<li>
<p><strong>Headings and Paragraph</strong>  </p>

<ul>
<li>
<h2> for the user's name.
</h2>
</li>
<li>
<p> for the user's role.</p>
</li>
</ul>
</li>
<li><p><strong>Links</strong><br><br>
<a> tags for social media links.</a></p></li>



<hr>

<h2>
  
  
  ? <strong>CSS File (styles.css)</strong>
</h2>

<p>This file adds styling to your HTML. Here's what it looks like:<br>
</p>

<pre class="brush:php;toolbar:false">body {
  background-color: #f0f8ff;
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.profile-card {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 15px;
  text-align: center;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
  width: 300px;
}

.profile-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 15px;
}

.profile-name {
  font-size: 1.5em;
  margin: 10px 0 5px;
  color: #333;
}

.profile-role {
  font-size: 1em;
  color: #777;
  margin-bottom: 20px;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.social-link {
  text-decoration: none;
  color: #008cba;
  font-weight: bold;
  transition: color 0.3s ease;
}

.social-link:hover {
  color: #005f73;
}

Explanation of Key Styles

1. Background and Centering:
   
   The body centers the profile card using Flexbox and sets a light blue background color.

2. Profile Card Styling:

   • background-color: Sets a white background.
   • border-radius: Rounds the corners.
   • box-shadow: Adds a subtle shadow for depth.

3. Image Styling:

   • width and height: Set the image size.
   • border-radius: 50%: Makes the image circular.

4. Text Styling:
   
   Styles the name and role with different font sizes and colors.

5. Social Links:

   • Arranged with Flexbox for spacing.
   • Hover effect to change link color.

---

? How to Use This Project

1. Download the Files:
   
   Download or copy the index.html and styles.css files.

2. Open the HTML File:
   
   Double-click the index.html file to open it in your browser.

3. Edit the Content:

   • Change the name and role.
   • Replace the image URL with your own profile picture.
   • Update the social media links.

4. Experiment with CSS:
   
   Try changing colors, fonts, and sizes in styles.css to see how it affects the design!

---

? What You’ll Learn

• How to create an HTML layout.
• How to style elements with CSS.
• How to use Flexbox for alignment.
• How to add hover effects for interactivity.

---

? Next Steps

• Add More Features: Include a bio section or a contact button.
• Make It Responsive: Learn how to make the card look good on mobile devices.
• Add Animations: Use CSS animations to make the card more interactive.

---

Happy Coding! ??