<!DOCTYPE html>
<html lang=»en»>
<head>
<meta charset=»UTF-8″>
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
<title></title>
<link rel=»stylesheet» href=»https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css»/>
</head>
<body>
<div class=»profile-card»>
<div class=»card-header»>
<div class=»pic»>
<img src=»SherzodMustafaev.jpg» alt=»»>
</div>
<div class=»name»>Sherzod Mustafaev</div>
<div class=»desc»>Architector & Designer</div>
<div class=»sm»>
<a href=»sherzodmustafaev.html»></a>
<a href=»https://www.youtube.com/c/ARTDECODESIGNUZ» class=»fab fa-youtube»></a>
<a href=»https://t.me/SherzodMustafaev» class=»fab fa-telegram»></a>
</div>
<a href=»+998935156270″ class=»contact-btn»>Contact Me</a>
</div>
<div class=»card-footer»>
<div class=»numbers»>
<div class=»item»>
<span>Art deco Design & 1000Proektov</span>
founder
</div>
</div>
</div>
</div>
</div>
<style> *{
margin: 0;
padding: 0;
font-family: «Ubuntu», sans-serif;
box-sizing: border-box;
text-decoration: none;
}
body{
height: 100vh;
background: url(bg.jpg) no-repeat center;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
}
.profile-card{
width: 360px;
text-align: center;
border-radius: 8px;
overflow: hidden;
}
.card-header{
background: #242424;
padding: 60px 40px;
}
.pic{
display: inline-block;
padding: 4px;
background: linear-gradient(120deg, #ffffff, #ffffff);
margin: auto;
border-radius: 50%;
background-size: 200% 200%;
animation: animated-gradient 2s linear infinite;
}
@keyframes animated-gradient{
25%{
background-position: left bottom;
}
50%{
background-position: right bottom;
}
75%{
background-position: right top;
}
100%{
background-position: left top;
}
}
.pic img{
display: block;
width: 100px;
height: 100px;
border-radius: 50%;
}
.name{
color: #f2f2f2;
font-size: 28px;
font-weight: 600;
margin: 10px 0;
}
.desc{
font-size: 18px;
color: #e66767;
}
.sm{
display: flex;
justify-content: center;
margin: 20px 0;
}
.sm a{
color: #f2f2f2;
width: 56px;
font-size: 22px;
transition: .3s linear;
}
.sm a:hover{
color: #e66767;
}
.contact-btn{
display: inline-block;
padding: 12px 50px;
color: #e66767;
border: 2px solid #e66767;
border-radius: 6px;
margin-top: 16px;
transition: .3s linear;
}
.contact-btn:hover{
background: #e66767;
color: #f2f2f2;
}
.card-footer{
background: #f4f4f4;
padding: 40px 10px;
}
.numbers{
display: flex;
align-items: center;
}
.item{
flex: 1;
text-transform: uppercase;
font-size: 15px;
color: #e66767;
}
.item span{
display: block;
color: #2c3a47;
font-size: 20px;
}
.border{
width: 1px;
height: 30px;
background: #bbb;
}
</style>
</body>
</html>
