UICodex

Learn UI Design by Programming

Designing User Profile Card UI Using CSS

  • / uicodex

profile-card is a simple UI profile card template using CSS. You can learn how to do by this example easily.

Designing User Profile Card UI Using CSS

AuthorLinksMade withLast update
naveensing575Office HomeCSSOct 09, 2022

How to use it?

Download profile-card source code then open index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  
  <title>Frontend Mentor | Profile card component</title>

  <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
  <div id="container">
  <img src="images/bg-pattern-top.svg" class="top-svg" alt="background_svg" />
  <header>
  <div class="profile-card-top">
  <img src="images/bg-pattern-card.svg" class="profile-card-top-svg" alt="card_svg"/>
  <div class="circle">
  <img src="images/navi.jpeg" class="image" alt="profile_pic"/>
  </div>
  </div>
  <div class="profile-card-body">
  <div class="content">
  <h1 class="name">Naveen Singh</h1>
  <p class="age">20</p>
  <p class="city">India</p><br/><hr/><br/>
  <p class="card-follow-count">80K</p>
  <p class="card-follow">Followers</p>
  <p class="card-like-count">803K</p>
  <p class="card-like">Likes</p>
  <p class="card-photo-count">1.4K</p>
  <p class="card-photo">Photos</p>
  </div>
  </div>
  </header>
  <img src="images/bg-pattern-bottom.svg" class="bottom-svg" alt="background_svg" />
  </div>
  <footer>
    Challenge by <a href="https://www.frontendmentor.io/solutions" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="https://github.com/naveensing575/profile-card" target="_blank">Naveen Singh</a>.
  </footer>
</body>
</html>

Related