How to make a Profile Card - Using HTML & CSS

Hello coders, In this project you can learn about a simple Profile card it is a beginner-friendly Project If you’re a Beginner in a Development career it is a must and practical project for you.

Let’s Jump into HTML & CSS code

Let’s get started!

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Profile Card</title>
<!-- Export Script from fontawesome.com  -->
    <script
      src="https://kit.fontawesome.com/9faed27458.js"
      crossorigin="anonymous"
    ></script>
<!-- link to styles.css  -->
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    
    <div class="profile-container">
      <div class="image">
        <img src="Code with imran.png" class="pf-img" alt="" />
      </div>

      <div class="name">
        <h2>CodeWith<span>Imraan</span></h2>
      </div>

      <button class="btn">
        Follow
        <i class="fa-solid fa-user-plus"></i>
      </button>

      <ul>
        <li>
          <a class="fb" href="#">
            <i class="fa-brands fa-facebook"></i>
          </a>
        </li>
        <li>
          <a class="yt" href="#">
            <i class="fa-brands fa-youtube"></i>
          </a>
        </li>

        <li>
          <a class="twitter" href="#">
            <i class="fa-brands fa-twitter"></i>
          </a>
        </li>
        <li>
          <a class="insta" href="#">
            <i class="fa-brands fa-instagram"></i>
          </a>
        </li>
      </ul>

      <div class="social">
        <i class="fa-solid fa-heart social-btn">20l</i>
        <i class="fa-solid fa-comment social-btn">15k</i>
        <i class="fa-solid fa-share social-btn">100k</i>
      </div>
    </div>
  </body>
</html>

CSS

Here I provided CSS code, This is an interesting part for you to learn. You can learn like positioning, Flex, and other Box properties. here is your code

/* export a font from google fonts  */
@import url("https://fonts.googleapis.com/css2?family=Bona+Nova+SC:ital,wght@0,400;0,700;1,400&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Bona Nova SC", serif;
}

body {
  height: 100vh;
  background-color: #cccc;
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-container {
  width: 100%;
  max-width: 250px;
  height: 350px;
  background: whitesmoke;
  filter: drop-shadow(0px 0px 20px gray);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.image {
  position: relative;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  padding: 10px;
}
.image .pf-img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border: 3px solid #663399;
  border-radius: 50%;
}
.name:hover {
  transition: all 0.5s ease;
  color: #663399;
  cursor: pointer;
  text-decoration: underline;
}
span {
  color: #663399;
}

.btn {
  font-family: Georgia, Times, "Times New Roman", serif;
  border: none;
  color: white;
  background-color: #663399;
  border-radius: 20px;
  margin: 10px 0;
  padding: 5px 10px;
  transition: all 200ms linear;
}
.btn:hover {
  background: red;
  transform: scale(1.05);
  box-shadow: 1px 1px 5px black;
  cursor: pointer;
}
ul,
li {
  display: flex;
  padding: 10px 10px;
  font-size: 24px;
  transition: all 0.5s ease;
}
ul li:hover {
  transform: scale(1.08);
}
.fb {
  color: #3b5998;
}
.yt {
  color: red;
}
.twitter {
  color: #00acee;
}
.insta {
  color: red;
}
.social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.3rem;
  padding: 10px 0px;
  cursor: pointer;
}
.social-btn {
  opacity: 60%;
  transition: all 100ms linear;
}
.social-btn:hover {
  color: #2929c8;
  transform: translateY(-2px);
}

NOTE:-

Experiment with different background images and CSS properties to perfect your design. Happy coding, and enjoy the creativity of building your Profile Card!

If you’re facing any problems with your code – Feel free to download my Source code file

Happy Coding Mates

Download Source CODE