How To Make User Profile UI Design Using HTML CSS

Irfan Hussain
May 14, 2020

How To Make User Profile UI Design Using HTML CSS
Profile UI Design





HTML

<html>

<head>
<title>Profile card</title>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>

<body>

<div class="wrapper">


<div class="profile-card js-profile-card">
<div class="profile-card__img">
<img src="../shakti.webp" alt="profile">
</div>

<div class="profile-card__cnt js-profile-cnt">
<div class="profile-card__name">Shakti Mohan</div>
<div class="profile-card__txt">Indian Dancer,<strong>Television Personality</strong></div>
<div class="profile-card-loc">
<span class="profile-card-loc__icon">
<img src="../location.webp" height="40px" width="40px">
</span>

<span class="profile-card-loc__txt">
Mumbai, India
</span>
</div>

<div class="profile-card-inf">
<div class="profile-card-inf__item">
<div class="profile-card-inf__title">5M+</div>
<div class="profile-card-inf__txt">Followers</div>
</div>

<div class="profile-card-inf__item">
<div class="profile-card-inf__title">615</div>
<div class="profile-card-inf__txt">Following</div>
</div>

<div class="profile-card-inf__item">
<div class="profile-card-inf__title">123</div>
<div class="profile-card-inf__txt">Show Performs</div>
</div>

<div class="profile-card-inf__item">
<div class="profile-card-inf__title">85</div>
<div class="profile-card-inf__txt">Movies</div>
</div>
</div>

<div class="profile-card-social">
<a href="#" class="profile-card-social__item facebook">
<span class="icon-font">
<i class="fa fa-facebook icon "></i>
</span>
</a>

<a href="#" class="profile-card-social__item twitter">
<span class="icon-font">
<i class="fa fa-twitter icon "></i>
</span>
</a>

<a href="#" class="profile-card-social__item instagram">
<span class="icon-font">
<i class="fa fa-instagram icon "></i>
</span>
</a>

<a href="#" class="profile-card-social__item behance">
<span class="icon-font">
<i class="fa fa-google icon "></i>
</span>
</a>

<a href="#" class="profile-card-social__item github">
<span class="icon-font">
<i class="fa fa-youtube icon "></i>
</span>
</a>

<a href="#" class="profile-card-social__item codepen">
<span class="icon-font">
<i class="fa fa-pinterest icon "></i>
</span>
</a>

<a href="#" class="profile-card-social__item link">
<span class="icon-font">
<i class="fa fa-behance icon "></i>
</span>
</a>

</div>

<div class="profile-card-ctr">
<button class="profile-card__button button--blue js-message-btn">Message</button>
<button class="profile-card__button button--orange">Follow</button>
</div>
</div>
</div>
</div>
</body>

</html
CSS
<style>
html {
position: relative;
overflow-x: hidden !important;
}

* {
box-sizing: border-box;
}

body {
font-family: 'Quicksand', sans-serif;
color: #324e63;
}

a,
a:hover {
text-decoration: none;
}

.icon {
display: inline-block;
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}

.wrapper {
width: 100%;
width: 100%;
height: auto;
min-height: 100vh;
padding: 50px 20px;
padding-top: 100px;
display: flex;
background-image: linear-gradient(-20deg, #7f2de6 0%, #03f6d9 100%);
display: flex;
background-image: linear-gradient(-20deg, #7f2de6 0%, #03f6d9 100%);
}

@media screen and (max-width: 768px) {
.wrapper {
height: auto;
min-height: 100vh;
padding-top: 100px;
}
}

.profile-card {
width: 100%;
min-height: 460px;
margin: auto;
box-shadow: 0px 8px 60px -10px rgba(13, 28, 39, 0.6);
background: #fff;
border-radius: 12px;
max-width: 700px;
position: relative;
}

.profile-card.active .profile-card__cnt {
filter: blur(6px);
}

.profile-card.active .profile-card-message,
.profile-card.active .profile-card__overlay {
opacity: 1;
pointer-events: auto;
transition-delay: .1s;
}

.profile-card.active .profile-card-form {
transform: none;
transition-delay: .1s;
}

.profile-card__img {
width: 150px;
height: 150px;
margin-left: auto;
margin-right: auto;
transform: translateY(-50%);
border-radius: 50%;
overflow: hidden;
position: relative;
z-index: 4;
box-shadow: 0px 5px 50px 0px #6c44fc, 0px 0px 0px 7px rgba(107, 74, 255, 0.5);
}

@media screen and (max-width: 576px) {
.profile-card__img {
width: 120px;
height: 120px;
}
}

.profile-card__img img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}

.profile-card__cnt {
margin-top: -35px;
text-align: center;
padding: 0 20px;
padding-bottom: 40px;
transition: all .3s;
}

.profile-card__name {
font-weight: 700;
font-size: 24px;
color: #6944ff;
margin-bottom: 15px;
}

.profile-card__txt {
font-size: 18px;
font-weight: 500;
color: #324e63;
margin-bottom: 15px;
}

.profile-card__txt strong {
font-weight: 700;
}

.profile-card-loc {
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
font-weight: 600;
}

.profile-card-loc__icon {
display: inline-flex;
font-size: 27px;
margin-right: 10px;
}

.profile-card-inf {
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: flex-start;
margin-top: 35px;
}

.profile-card-inf__item {
padding: 10px 35px;
min-width: 150px;
}

@media screen and (max-width: 768px) {
.profile-card-inf__item {
padding: 10px 20px;
min-width: 120px;
}
}

.profile-card-inf__title {
font-weight: 700;
font-size: 27px;
color: #324e63;
}

.profile-card-inf__txt {
font-weight: 500;
margin-top: 7px;
}

.profile-card-social {
margin-top: 25px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}

.profile-card-social__item {
display: inline-flex;
width: 55px;
height: 55px;
margin: 15px;
border-radius: 50%;
align-items: center;
justify-content: center;
color: #fff;
background: #405de6;
box-shadow: 0px 7px 30px rgba(43, 98, 169, 0.5);
position: relative;
font-size: 21px;
flex-shrink: 0;
transition: all .3s;
}

@media screen and (max-width: 768px) {
.profile-card-social__item {
width: 50px;
height: 50px;
margin: 10px;
}
}

@media screen and (min-width: 768px) {
.profile-card-social__item:hover {
transform: scale(1.2);
}
}

.profile-card-social__item.facebook {
background: linear-gradient(45deg, #3b5998, #0078d7);
box-shadow: 0px 4px 30px rgba(43, 98, 169, 0.5);
}

.profile-card-social__item.twitter {
background: linear-gradient(45deg, #1da1f2, #0e71c8);
box-shadow: 0px 4px 30px rgba(19, 127, 212, 0.7);
}

.profile-card-social__item.instagram {
background: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
box-shadow: 0px 4px 30px rgba(120, 64, 190, 0.6);
}

.profile-card-social__item.behance {
background: linear-gradient(45deg, #1769ff, #213fca);
box-shadow: 0px 4px 30px rgba(27, 86, 231, 0.7);
}

.profile-card-social__item.github {
background: linear-gradient(45deg, #333333, #626b73);
box-shadow: 0px 4px 30px rgba(63, 65, 67, 0.6);
}

.profile-card-social__item.codepen {
background: linear-gradient(45deg, #324e63, #414447);
box-shadow: 0px 4px 30px rgba(55, 75, 90, 0.6);
}

.profile-card-social__item.link {
background: linear-gradient(45deg, #d5135a, #f05924);
box-shadow: 0px 4px 30px rgba(223, 45, 70, 0.6);
}

.profile-card-social .icon-font {
display: inline-flex;
}

.profile-card-ctr {
display: flex;
justify-content: center;
align-items: center;
margin-top: 40px;
}

@media screen and (max-width: 576px) {
.profile-card-ctr {
flex-wrap: wrap;
}
}

.profile-card__button {
background: none;
border: none;
font-family: 'Quicksand', sans-serif;
font-weight: 700;
font-size: 19px;
margin: 15px 35px;
padding: 15px 40px;
min-width: 201px;
border-radius: 50px;
min-height: 55px;
color: #fff;
cursor: pointer;
backface-visibility: hidden;
transition: all .3s;
}

@media screen and (max-width: 768px) {
.profile-card__button {
min-width: 170px;
margin: 15px 25px;
}
}

@media screen and (max-width: 576px) {
.profile-card__button {
min-width: inherit;
margin: 0;
margin-bottom: 16px;
width: 100%;
max-width: 300px;
}

.profile-card__button:last-child {
margin-bottom: 0;
}
}

.profile-card__button:focus {
outline: none !important;
}

@media screen and (min-width: 768px) {
.profile-card__button:hover {
transform: translateY(-5px);
}
}

.profile-card__button:first-child {
margin-left: 0;
}

.profile-card__button:last-child {
margin-right: 0;
}

.profile-card__button.button--blue {
background: linear-gradient(45deg, #1da1f2, #0e71c8);
box-shadow: 0px 4px 30px rgba(19, 127, 212, 0.4);
}

.profile-card__button.button--blue:hover {
box-shadow: 0px 7px 30px rgba(19, 127, 212, 0.75);
}

.profile-card__button.button--orange {
background: linear-gradient(45deg, #d5135a, #f05924);
box-shadow: 0px 4px 30px rgba(223, 45, 70, 0.35);
}

.profile-card__button.button--orange:hover {
box-shadow: 0px 7px 30px rgba(223, 45, 70, 0.75);
}

.profile-card__button.button--gray {
box-shadow: none;
background: #dcdcdc;
color: #142029;
}

</style>