DEV Community

Cover image for Create stunning profile card || HTML & CSS 👌👌
Femil Savaliya
Femil Savaliya

Posted on

Create stunning profile card || HTML & CSS 👌👌

In this blog i coverd how you can make amazing and stunning profile card.

Profile Card

You can use this card to showcase your skills and share your social network for contact.

No need to take a cup of coffee or tea it takes two minutes like Meggie :)


Let's design,

Folder Structure

Profile Card
- index.html
- style.css

1.HTML

Add this code into your index.html file, change name, img and links and other stuff according to your preferences

<html>
   <head>
      <title>Page Title</title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
      <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css2?family=Varela+Round&display=swap" rel="stylesheet">
      <link rel="stylesheet" href="style.css" />
   </head>
   <body>
      <div class="main-container">
         <div class="icons">
            <ul>
               <li>
                  <a href="https://codepen.io/Femil_32/"><i class="fa fa-dribbble" aria-hidden="true"></i></a>
               </li>
               <li>
                  <a href="https://www.instagram.com/femil_32/"><i class="fa fa-instagram" aria-hidden="true"></i></a>
               </li>
               <li>
                  <a href="https://codepen.io/Femil_32/"><i class="fa fa-twitter" aria-hidden="true"></i></a>
               </li>
            </ul>
         </div>
         <div class="layer">
            <div class="text">
               <h4>Femil Savaliya</h4>
               <p>Web designer</p>
               <div class="skill">
                  <i class="fab fa-html5"></i>
                  <i class="fab fa-css3-alt"></i>
                  <i class="fab fa-js"></i>
                  <i class="fab fa-react"></i>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>
Enter fullscreen mode Exit fullscreen mode

2.CSS

Now time to give awesome look to our HTML skeleton, add the below style in your style.css file

*{
    padding:0;
    margin:0;
    box-sizing:border-box;
}
.main-container{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:300px;
    height:400px;
   box-shadow:0 5px 10px rgba(0,0,0,.2); 
   border-radius:10px;
   overflow:hidden;
}
.main-container::before{
    content:"";
    position:absolute;
    width:100%;
    height:100%; background:url("https://images.unsplash.com/photo-1552562739-152fee1f81f3?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Njd8fG1hbGUlMjBwb3J0cmFpdCUyMGJsYWNrJTIwYW5kJTIwd2hpdGV8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1100&q=60") center/cover;
    transition:.7s cubic-bezier(.46, 1.48, .18, .81);
}
.icons{
    position:absolute;
    right:-30px;
    top:130px;
}
ul{
position:relative;
width:100px;
height:150px;
    list-style:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:space-around;
    perspective:300px;
}
ul li{
    width:50px;
    height:2px;
    transform:rotateY(-100deg);
    opacity:0;
    transform-origin:right;
}
li:nth-child(1){
    transition-delay:.3s;
}
li:nth-child(2){
    transition-delay:.2s;
}
li:nth-child(3){
    transition-delay:.1s;
}
li a{
    display:block;
    width:40px;
    height:40px;
    position:absolute;
    top:50%;
    left:0;
    transform:translate(-50%,-50%);
    border-radius:50%;
    text-align:center;
    line-height:43px;
    font-size:1.4rem;
    text-decoration:none;
    color:#fff;
}
li:nth-child(1) a{
    background:#EA4C89;
}
li:nth-child(2) a{
    background:#dd2a7b;
}
li:nth-child(3) a{
    background:#1DA1F2;
}
.layer{
    position:absolute;
    bottom:0;
    width:100%;
    height:100px;
    transform:translateY(150px);
}
li,a,.layer{
    background:#fff;
    transition:.7s cubic-bezier(.46, 1.48, .18, .81);
}
.text{
    margin:.6rem;
    padding:5px;
font-family: 'Varela Round', sans-serif;
}
.text p{
    color:#bfbfbf;
}
.skill{
    font-size:1.7rem;
    padding-top:.5rem;
}
.fab{
    margin:0 1rem 0 0;
}
.fab:nth-child(1){
color:#E34F26;
}
.fab:nth-child(2){
color:#1572B6;
}
.fab:nth-child(3){
color:#f7df1e;
}
.fab:nth-child(4){
color:#61DAFB;
}
.main-container:hover .layer{
    transform:translateY(0);
}
.main-container:hover:before{
    transform:scale(1.1);
}
.main-container:hover  ul li{
    transform:rotateY(0);
    opacity:1;
} 
Enter fullscreen mode Exit fullscreen mode

3.RESULT

Demo

Profile Card


Drop your thought in the comment section below and Thank you for reading ❤❤

Top comments (0)