HTML: 

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>User Profile</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>

  <div class="profile-card">
    <img src="profile-pic.jpg" alt="Profile Picture">
    <h1>John Doe</h1>
    <p>Web Developer</p>
    <p>Location: New York City</p>
    <a href="#" class="btn">Contact</a>
  </div>

  </body>
  </html>

CSS: 

  body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f4f4f4;
}

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

.profile-card img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin-bottom: 20px;
}

.profile-card h1 {
  margin: 10px 0;
  color: #333;
}

.profile-card p {
  color: #666;
  margin-bottom: 10px;
}

.btn {
  display: inline-block;
  padding: 8px 16px;
  text-decoration: none;
  background-color: #007bff;
  color: #fff;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.btn:hover {
  background-color: #0056b3;
}

Try to answer about this code:

What does the CSS property border-radius: 50%; do in the .profile-card img class?

Adds a border of 50 pixels to the image
Creates a circular shape for the image

Sets the image width to 50%
Adds rounded corners with a 50% curve to the image

What is the purpose of justify-content: center; in the body class?

Centers the text content within the profile card
Aligns items horizontally to the center

Centers the profile card within the viewport vertically
Sets the background color of the body

What effect does transition: background-color 0.3s ease; have in the .btn class?

Adds a background color to the button with ease animation
Sets the button's text color transition duration

Changes the button's background color smoothly on hover
Sets the ease of button click action

Why is height: 100vh; used in the body class?

Sets the height of the profile card
Ensures the body takes the full height of the viewport

Specifies the height of the image in the profile card
Makes the profile card take 100% of the viewport height