<div class="frame">
	<div data-v-053f5fce="" class="glass" style="width: 169px;position:absolute; height: 141px; transform: rotate(0.413021turn); opacity: 0.297862;"></div>
	<div data-v-053f5fce="" class="glass" style="width: 124px;
    position: absolute;
    height: 200px;
    top: 120px;
    left: 120px;
    transform: rotate(0.57turn);
    opacity: 0.31;"></div>
  <div class="center">
		<div class="container d-flex">
			<main class="left">
				<div class="profile">
					<div class="profileImageBox">
						<div class="circle-1 rounded absolute-center"></div>
						<div class="circle-2 rounded absolute-center"></div>
						<div class="profileImage"><img class="img-responsive rounded" src="https://media-exp1.licdn.com/dms/image/C5603AQHQV8DDluFzHg/profile-displayphoto-shrink_800_800/0/1636307339873?e=1669852800&v=beta&t=S2QAFV9YfCCkFvUCoWemDzBCR68d0nyvZ9JI7eBla6c" alt=""/></div>
					</div>
					<div class="profileDetails">
						<h2 class="profileName">Nabaraj Saha</h2>
						<h3 class="profileName">Web developer</h3>
					</div>
				</div>
				<div class="btnNav">
					<button class="btn glass">Follow</button>
					<button class="btn glass">Message</button>
				</div>
			</main>
			<aside class="right d-flex flex-column">
				<div class="socialInfo glass"><h5>523</h5>
<span>Posts</span></div>
				<div class="socialInfo glass"><h5>1387</h5>
<span>Likes</span></div>
				<div class="socialInfo glass"><h5>146</h5>
<span>Follower</span></div>
			</aside>
		</div>
  </div>
</div>

// delete the following line if no text is used
// edit the line if you wanna use other fonts
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);
.glass{    background: rgba(255, 255, 255, 0.9);
    
    box-shadow: 0 4px 30px rgb(0 0 0 / 10%);
    backdrop-filter: blur(7.7px);
    -webkit-backdrop-filter: blur(7.7px);
    border: 1px solid rgba(255, 255, 255, 0.56);}
// use only the available space inside the 400x400 frame
.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
	box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
	overflow: hidden;
  background: linear-gradient(to top right, #EEBE6C 0%, #CA7C4E 100%);
  color: #333;
	font-family: 'Open Sans', Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	border-radius:4px;
}

.center {
  // position: absolute;
  // top: 50%;
  // left: 50%;
  // transform: translate(-50%,-50%);
	padding-top:40px;
}
.d-flex{
	display:flex;
}
.flex-column{
	flex-flow:column;
}
.img-responsive{
	max-width:100%;
	height:auto;
}
.container{
	background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgb(0 0 0 / 10%);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
	max-width:320px;
	margin:0 auto;
	border-radius:5px;
	box-shadow:4px 3px 9px 0 #33333347;
	text-align:center;
	color:#786450;
	overflow:hidden;
	.left{
		flex-basis: 65%;
    display: flex;
    flex-flow: column;
		padding-top:10px;
	}
	.right{
		display:flex;
		flex-flow:column
	}
}
.rounded{
	border-radius:50%;
}
.absolute-center{
	position:absolute;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%);
}
.profileImageBox{
	width:80px;
	height:80px;
	// overflow:hidden;
	border-radius:50%;
	margin:0 auto;
	position:relative;
	cursor:pointer;
	padding:5px;
	box-sizing:border-box;
	&:hover{
		.circle-1{
			transform: translate(-50%, -50%) rotate(180deg);
		}
		.circle-2{
			transform:translate(-50%, -50%) rotate(-180deg);
		}
	}
	.profileImage{
		overflow:hidden;
	}
	.circle-1{
		position:absolute;
		width:100%;
		height:100%;
		padding:1px;
		border-top:1px solid #2e0000;
		border-right:1px solid #2e0000;
		border-bottom:1px solid #2e0000;
		border-left:1px solid transparent;
		transition:all 0.5s linear;
		transform-origin:center center;
	}
	.circle-2{
		width:95%;
		height:95%;
		border-top:1px solid #2e0000;
		border-right:1px solid transparent;
		border-bottom:1px solid #2e0000;
		border-left:1px solid #2e0000;
		transition:all 0.5s linear;
		transform-origin:center center;
	}
}
.profileDetails{
	// color:#ffffff;
	h2{
		font-size: 15px;
    font-weight: 600;
    margin-top: 20px;
		margin-bottom:0;
	}
	h3{
		    font-size: 11px;
    line-height: 15px;
		margin:0;
		font-weight:normal;
		color:#000000;
	}
}
.btnNav{
	display:flex;
	flex-flow:column;
	margin-top:auto;
	padding-bottom:20px;
	align-items:center;
	
	.btn{
		    display: block;
    width: 120px;
    height: 30px;
		background: none;
    border: 1px solid #786450;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 600;
    box-sizing: border-box;
    transition: all 0.3s ease-in-out;
		margin:3px 0;
		cursor:pointer;
		color:#786450;
		&:hover{
			background:#786450;
			color:#ffffff;
		}
	}
}
.socialInfo{
	box-sizing: border-box;
    width: 120px;
    height: 99px;
    background: #F5E8DF;
    text-align: center;
    transition: all 0.4s ease-in-out;
	margin-bottom:1px;
	cursor:pointer;
	    display: flex;
    flex-direction: column;
    justify-content: center;
	&:hover{
		background-color:#E1CFC2;
	}
	h5{
		margin:0;
		font-size:18px;
	}
	span{
		font-size:11px;
		display:block;
	}
}