Neumorphism Profile Card UI Design using only HTML & CSS

0 Comments

Hello Friends, today I will tell you how you can create Neumorphism Profile Card UI Design using only HTML & CSS. In a previous post, I have shared how to create text animation using HTML and CSS only. Now I am going to create a professional profile card. Make sure to read this article to learn how to create a profile card.

A profile card is a card that conveys saved profile content. Profile Cards let you select profile esteems reliably over all things on your site. Neumorphism, or delicate UI, is a noticeable style that blends foundation tones, shapes, inclinations, features, and shadows.

In this program [Neumorphism Profile Card UI Design], there is a profile card with a neomorphic impact. This card contains a profile picture, web-based media catches, and some online media information. At the point when you float on specific web-based media catches, there is shown a neomorphic impact.

This card is completely founded on HTML and CSS. In case you're feeling hard to comprehend what I am saying. You can watch a full video instructional exercise on this program [Neumorphism Profile Card UI Design].

Video Tutorial of Neumorphism Profile Card UI Design

In the video, you have seen the Neumorphism Profile Card UI Design with Neomorphic Effect on Hover. I trust you have perceived the codes behind making this card. This is an unadulterated CSS program that implies just HTML and CSS are utilized to make this card and the neomorphic impact. So in the event that you are an amateur, you can likewise make this kind of profile card.

On the off chance that you like this card and need to get source codes of this program then you effectively duplicate the codes of this program just as download them from the beneath interface. You can openly utilize this card on your sites, undertakings, and HTML pages.

Neumorphism Profile Card UI Design [Source Codes]

To create this profile card then you need to create a folder and open your favorite code editor then paste this HTML & CSS code in your folder then change your name in this profile card and also change the other details which you want to change.

<!DOCTYPE html>
<!-- Created By Websitearo - www.khanaldamodar.com.np -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Neumorphism Profile Card | CodingNepal</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
  <div class="wrapper">
    <div class="img-area">
      <div class="inner-area">
        <img src="https://images.unsplash.com/photo-1492288991661-058aa541ff43?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
      </div>
    </div>
    <div class="icon arrow"><i class="fas fa-arrow-left"></i></div>
    <div class="icon dots"><i class="fas fa-ellipsis-v"></i></div>
    <div class="name">Websitearo</div>
    <div class="about">Designer & Developer</div>
    <div class="social-icons">
      <a href="#" class="fb"><i class="fab fa-facebook-f"></i></a>
      <a href="#" class="twitter"><i class="fab fa-twitter"></i></a>
      <a href="#" class="insta"><i class="fab fa-instagram"></i></a>
      <a href="https://www.youtube.com/channel/UCZ0B5j02jfvb_jSaUpPk70A" class="yt"><i class="fab fa-youtube"></i></a>
    </div>
    <div class="buttons">
      <button>Message</button>
      <button>Subscribe</button>
    </div>
    <div class="social-share">
      <div class="row">
        <i class="far fa-heart"></i>
        <i class="icon-2 fas fa-heart"></i>
        <span>10.4k</span>
      </div>
      <div class="row">
        <i class="far fa-comment"></i>
        <i class="icon-2 fas fa-comment"></i>
        <span>10.3k</span>
      </div>
      <div class="row">
        <i class="fas fa-share"></i>
        <span>1.8k</span>
      </div>
    </div>
  </div>
</body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #ecf0f3;
}
.wrapper,
.wrapper .img-area,
.social-icons a,
.buttons button{
  background: #ecf0f3;
  box-shadow: -3px -3px 7px #ffffff,
               3px 3px 5px #ceced1;
}
.wrapper{
  position: relative;
  width: 350px;
  padding: 30px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.wrapper .icon{
  font-size: 17px;
  color: #31344b;
  position: absolute;
  cursor: pointer;
  opacity: 0.7;
  top: 15px;
  height: 35px;
  width: 35px;
  text-align: center;
  line-height: 35px;
  border-radius: 50%;
  font-size: 16px;
}
.wrapper .icon i{
  position: relative;
  z-index: 9;
}
.wrapper .icon.arrow{
  left: 15px;
}
.wrapper .icon.dots{
  right: 15px;
}
.wrapper .img-area{
  height: 150px;
  width: 150px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-area .inner-area{
  height: calc(100% - 25px);
  width: calc(100% - 25px);
  border-radius: 50%;
}
.inner-area img{
  height: 100%;
  width: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.wrapper .name{
  font-size: 23px;
  font-weight: 500;
  color: #31344b;
  margin: 10px 0 5px 0;
}
.wrapper .about{
  color: #44476a;
  font-weight: 400;
  font-size: 16px;
}
.wrapper .social-icons{
  margin: 15px 0 25px 0;
}
.social-icons a{
  position: relative;
  height: 40px;
  width: 40px;
  margin: 0 5px;
  display: inline-flex;
  text-decoration: none;
  border-radius: 50%;
}
.social-icons a:hover::before,
.wrapper .icon:hover::before,
.buttons button:hover:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: 50%;
  background: #ecf0f3;
  box-shadow: inset -3px -3px 7px #ffffff,
              inset 3px 3px 5px #ceced1;
}
.buttons button:hover:before{
  z-index: -1;
  border-radius: 5px;
}
.social-icons a i{
  position: relative;
  z-index: 3;
  text-align: center;
  width: 100%;
  height: 100%;
  line-height: 40px;
}
.social-icons a.fb i{
  color: #4267B2;
}
.social-icons a.twitter i{
  color: #1DA1F2;
}
.social-icons a.insta i{
  color: #E1306C;
}
.social-icons a.yt i{
  color: #ff0000;
}
.wrapper .buttons{
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.buttons button{
  position: relative;
  width: 100%;
  border: none;
  outline: none;
  padding: 12px 0;
  color: #31344b;
  font-size: 17px;
  font-weight: 400;
  border-radius: 5px;
  cursor: pointer;
  z-index: 4;
}
.buttons button:first-child{
  margin-right: 10px;
}
.buttons button:last-child{
  margin-left: 10px;
}
.wrapper .social-share{
  display: flex;
  width: 100%;
  margin-top: 30px;
  padding: 0 5px;
  justify-content: space-between;
}
.social-share .row{
  color: #31344b;
  font-size: 17px;
  cursor: pointer;
  position: relative;
}
.social-share .row::before{
  position: absolute;
  content: "";
  height: 100%;
  width: 2px;
  background: #e0e6eb;
  margin-left: -25px;
}
.row:first-child::before{
  background: none;
}
.social-share .row i.icon-2{
  position: absolute;
  left: 0;
  top: 50%;
  color: #31344b;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}
.row:nth-child(1):hover i.fa-heart,
.row:nth-child(2):hover i.fa-comment{
  opacity: 1;
  pointer-events: auto;
}

Now Your Project of profile card has been finished. If Your code doesn't work then click on the download button to download this code for free. It's a zip file download and Extract this file and work on this.

Download Links

Latest

Earn money online in Nepal & withdraw in e-Sewa, e-Sewa earning Methods

Oxford English Book For BCA First Semester Student

Earn Money With Starting Blogging in 0 Investment

YouTube Dislike Counter Removed | YouTube Update

Mathematics Chapter One SETS Notes BCA First Semester 2079 BCA TU

Top 10 Nepali E-commerce (Shopping) Website In Nepal

How to earn money online in Nepal without investment.

IOE Entrance Preparation MCQ Question 2078

Garena Free Fire Battel Royal Game is most popular in Indian region.

How to Earn money online from Nepal 2022

Earn money online in Nepal & withdraw in e-Sewa, e-Sewa earning Methods

Download khuda Hafiz Full Movie In 1080 P

IOE Entrance Preparation MCQ Question 2078

Top 5 Games For Football Lovers In 2020

Earn Money With Starting Blogging in 0 Investment

Vestige Full plan explain in 2020 | How to Explain Vestige Marketing In 2020 |

How to earn money online in Nepal without investment.

Garena Free Fire Battel Royal Game is most popular in Indian region.

Oxford English Book For BCA First Semester Student

YouTube Dislike Counter Removed | YouTube Update

Earn money online in Nepal & withdraw in e-Sewa, e-Sewa earning Methods

Top 10 Nepali E-commerce (Shopping) Website In Nepal

Neumorphism Profile Card UI Design using only HTML & CSS

Video Tutorial of Neumorphism Profile Card UI Design

You might like this:

Neumorphism Profile Card UI Design [Source Codes]

Related Posts

Post a Comment

Earn money online in Nepal & withdraw in e-Sewa, e-Sewa earning Methods

Oxford English Book For BCA First Semester Student