DEV Community

loading...
Cover image for Profile card design HTML CSS

Profile card design HTML CSS

stackfindover profile image Stackfindover Updated on ・3 min read

Hello, guys in this tutorial we will create an animated profile card design using HTML & CSS.

First, we need to create two files index.html and style.css then we need to do code for it.

CSS library for icons
Font Awesome

Profile card design step:1

Add below code inside index.html

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <title>Developer Profile Card</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <meta http-equiv="X-UA-Compatible" content="ie=edge" />
      <link rel="stylesheet" href="style.css" />
      <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   </head>
   <body>
      <section class="card-outer">
         <div class="card">
            <div class="top-content">
               <div class="top-bar">
                  <div class="top-icon">
                     <i class="fa fa-arrow-circle-o-left"></i>
                  </div>
                  <div class="top-icon">
                     <i class="fa fa-dot-circle-o"></i>
                  </div>
               </div>
               <div class="profile">
                  <img src="rahul.jpg">
               </div>
            </div>
            <div class="mid-content">
               <div class="info">
                  <h2>Rahul Jangid</h2>
                  <span>UI/UX Designer</span>
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                  <button class="follow">Follow</button>
                  <div class="follow-info">
                     <div>
                        <span>Followers</span>
                        <p>200k</p>
                     </div>
                     <div>
                        <span>Following</span>
                        <p>200</p>
                     </div>
                  </div>
               </div>
            </div>
            <div class="bottom-content">
               <button class="hire">Hire Me</button>
            </div>
         </div>
      </section>
   </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Profile card design step:2

Then we need to add code for style.css which code I provide in the below screen.

* {
    padding: 0;
    margin: 0;
    font-family: 'IBM Plex Sans', sans-serif;
}
body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: #f1f2f3;
}
.card {
    width: 350px;
    height: auto;
    background: #fefefe;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}
.card img {
    display: block;
    width: 100%;
}
.top-content {
    position: relative;
    width: 100%;
    height: 250px;
    display: flex;
    border-radius: 0 0 8% 8%;
}
.top-bar {
    position: absolute;
    padding: 20px 15px;
    display: flex;
    justify-content: space-between;
    width: 90%;
}
.top-icon {
    width: 25px;
    height: 25px;
    cursor: pointer;
    color: #fff;
    font-size: 30px;
    -webkit-text-stroke: 0.5px #000;
}
.mid-content {
    display: flex;
    justify-content: center;
}
.mid-content .info {
    position: absolute;
    padding: 20px 0 10px 0;
    top: 35%;
    width: 250px;
    height: 230px;
    text-align: center;
    z-index: 100;
    background: #fff;
    border-radius: 10px;
    box-shadow: 2px 2px 20px rgba(0,0,0,0.2);
    animation: anim 1s ease-in-out;
}
.info span {
    font-size: 15px;
    font-weight: 500;
    color: #b6b7b8;
}
.info p {
    font-size: 15px;
    font-weight: 500;
    margin-top: 10px;
    padding: 0 10px;
}
.follow-info p {
    margin: 0 !important;
    color: #e6391b;
    font-size: 14px;
    font-weight: 700;
}
.bottom-content {
    margin-top: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bottom-content button.hire {
    width: 100%;
    font-size: 15px;
    margin-top: 10px;
    background-color: #4b00ff;
    padding: 12px 0;
    font-weight: 600;
    color: #fff;
    border: unset;
    cursor: pointer;
}
.follow-info {
    display: flex;
    justify-content: space-around;
    margin-top: 15px;
    border-top: 1px solid #eee;
    padding: 8px 0;
}
button.follow {
    font-size: 15px;
    margin-top: 15px;
    color: #4b00ff;
    padding: 8px 30px;
    background: transparent;
    border: 1px solid;
    font-weight: 700;
    border-radius: 20px;
    cursor: pointer;
}
@keyframes anim {
    0% {
        top: -1000px;
    }
    100% {
        top: 35%;
    }
}
button {
    outline: 0;
}
Enter fullscreen mode Exit fullscreen mode

Profile card design Video Output:

Profile card design CodePen Output:

Trending Responsive Menu
Advance Testimonial Tabbing

Discussion (3)

pic
Editor guide
Collapse
kingleo10 profile image
Niroj Dahal

would be better if you attached codepen link .

Collapse
stackfindover profile image
Collapse
kingleo10 profile image
Niroj Dahal

please add the link in post description so that anyone who reads the post can quickly browse and see the working