How to Create Awesome Profile Card UI | HTML & CSS Project - Frontend everything 2022

Hello Everyone 👋 Welcome to My New Blog. Today I have made an Amazing Profile Card UI with the help of HTML and CSS Only! 😍

I am Piyush, Sharing About Web development Daily. You can also check out me at @frontendeverything.

Before starting the blog, you might think about where you can use this project in real-life-based projects. So it's an Amazing Product Card UI that you can use in your own blog project. So it will look attractive.

Let's start making these amazing Profile Card UI Using HTML & CSS step by step.

Photo of the project,

So that was the preview now let us start making the project 😄 First, we will code HTML then CSS, and also I have shared codepen ink to make it easier for you.

HTML 🎈( step - 1)

In HTML we have used divs for containers.

 <div class="card-container">  
      <span class="pro">PRO</span>  
      <img class="round" src="https://randomuser.me/api/portraits/women/79.jpg" alt="user" />  
      <h3>Ricky Park</h3>  
      <h6>New York</h6>  
      <p>User interface designer and <br/> front-end developer</p>  
      <div class="buttons">  
           <button class="primary">  
                Message  
           </button>  
           <button class="primary ghost">  
                Following  
           </button>  
      </div>  
      <div class="skills">  
           <h6>Skills</h6>  
           <ul>  
                <li>UI / UX</li>  
                <li>Front End Development</li>  
                <li>HTML</li>  
                <li>CSS</li>  
                <li>JavaScript</li>  
                <li>React</li>  
                <li>Node</li>  
           </ul>  
      </div>  
 </div>  
 <footer>  
      <p>  
           Created with <i class="fa fa-heart"></i> by  
           <a target="_blank" href="https://florin-pop.com">Florin Pop</a>  
           - Read how I created this  
           <a target="_blank" href="https://florin-pop.com/blog/2019/04/profile-card-design">here</a>  
           - Design made by  
           <a target="_blank" href="https://dribbble.com/shots/6276930-Profile-Card-UI-Design">Ildiesign</a>  
      </p>  
 </footer>

After the HTML we will design the Profile Card UI with CSS..

Output till now

CSS🎈( step - 2)

 @import url('https://fonts.googleapis.com/css?family=Montserrat');  
 * {  
      box-sizing: border-box;  
 }  
 body {  
      background-color: #28223F;  
      font-family: Montserrat, sans-serif;  
      display: flex;  
      align-items: center;  
      justify-content: center;  
      flex-direction: column;  
      min-height: 100vh;  
      margin: 0;  
 }  
 h3 {  
      margin: 10px 0;  
 }  
 h6 {  
      margin: 5px 0;  
      text-transform: uppercase;  
 }  
 p {  
      font-size: 14px;  
      line-height: 21px;  
 }  
 .card-container {  
      background-color: #231E39;  
      border-radius: 5px;  
      box-shadow: 0px 10px 20px -10px rgba(0,0,0,0.75);  
      color: #B3B8CD;  
      padding-top: 30px;  
      position: relative;  
      width: 350px;  
      max-width: 100%;  
      text-align: center;  
 }  
 .card-container .pro {  
      color: #231E39;  
      background-color: #FEBB0B;  
      border-radius: 3px;  
      font-size: 14px;  
      font-weight: bold;  
      padding: 3px 7px;  
      position: absolute;  
      top: 30px;  
      left: 30px;  
 }  
 .card-container .round {  
      border: 1px solid #03BFCB;  
      border-radius: 50%;  
      padding: 7px;  
 }  
 button.primary {  
      background-color: #03BFCB;  
      border: 1px solid #03BFCB;  
      border-radius: 3px;  
      color: #231E39;  
      font-family: Montserrat, sans-serif;  
      font-weight: 500;  
      padding: 10px 25px;  
 }  
 button.primary.ghost {  
      background-color: transparent;  
      color: #02899C;  
 }  
 .skills {  
      background-color: #1F1A36;  
      text-align: left;  
      padding: 15px;  
      margin-top: 30px;  
 }  
 .skills ul {  
      list-style-type: none;  
      margin: 0;  
      padding: 0;  
 }  
 .skills ul li {  
      border: 1px solid #2D2747;  
      border-radius: 2px;  
      display: inline-block;  
      font-size: 12px;  
      margin: 0 7px 7px 0;  
      padding: 7px;  
 }  
 footer {  
   background-color: #222;  
   color: #fff;  
   font-size: 14px;  
   bottom: 0;  
   position: fixed;  
   left: 0;  
   right: 0;  
   text-align: center;  
   z-index: 999;  
 }  
 footer p {  
   margin: 10px 0;  
 }  
 footer i {  
   color: red;  
 }  
 footer a {  
   color: #3c97bf;  
   text-decoration: none;  
 }

Now we have done the CSS coding as well, now we will see the final output and also check the codepen link mentioned below.

Final Output

The codepen link is here for making your work easier!

Click here for the code!

creator of project: Florin Pop

If you found any value in this blog you can support me by buying me a coffee.

Thank You For Scrolling Till here 😊. If You gain any knowledge then do checkout me at @frontendeverything. I am Piyush 🎉 I provide Content related to programming, technology, web development Daily.

More blogs you should give a check!

Pexels Website Clone With HTML< CSS and Javascript
Word Counter In Angular JS
Responsive Newsletter in CSS
Dark And Night mode toggle button in javascript
Best Youtube Channels For Learning Coding
Top-notch Project ideas For HTML< CSS< Javascript
Best Platform To sell your Website Templates
Google Homepage Clone With Html and CSS

Create Product Card using HTML and CSS - Frontend Everything

Create Awesome Profile Card UI - Frontend Everything