<div class="frame">
  <div class="center">    
		<div class="profile">
			<div class="image">
				<div class="circle-1"></div>
				<div class="circle-2"></div>
				<img src="https://avatars0.githubusercontent.com/u/43162561?s=460&v=4" width="70" height="70" alt="Anushka Raj">
			</div>
			
			<div class="name">Anushka Raj</div>
			<div class="job">Codergirl</div>
			
			<div class="actions">
				<button class="btn">Follow</button>
				<button class="btn">Message</button>
			</div>
		</div>
		
		<div class="stats">
			<div class="box">
				<span class="value">295</span>
				<span class="parameter">Posts</span>
			</div>
			<div class="box">
				<span class="value">25000</span>
				<span class="parameter">Likes</span>
			</div>
			<div class="box">
				<span class="value">735</span>
				<span class="parameter">Followers</span>
			</div>
		</div>
  </div>
</div>
@import url('https://fonts.googleapis.com/css?family=Satisfy');

$blue:#6A1B9A;

.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: 1px 2px 10px 0px rgba(0,0,0,0.3);
	background: #833ab4;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #fcb045, #fd1d1d, #833ab4);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #fcb045, #fd1d1d, #833ab4); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
color: $blue;
font-family: 'Satisfy', cursive;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.center {
  position: absolute;
  top: 50px;
  left: 40px;
	height: 299px;
	width: 320px;
	background: #fff;
	border-radius: 3px;
	overflow: hidden;
	box-shadow: 10px 10px 15px 0 rgba(0,0,0,0.3);
}

.profile {
	float: left;
	width: 200px;
	height: 320px;
	text-align: center;
	
	.image {
		position: relative;
		width: 70px;
		height: 70px;
		margin: 38px auto 0 auto;
		
		.circle-1 {
			position: absolute;
			box-sizing: border-box;
			width: 76px;
			height: 76px;
			top: -3px;
			left: -3px;
			border-width: 1px;
			border-style: solid;
			border-color: $blue $blue $blue transparent;
			border-radius: 50%;
			transition: all 1.5s ease-in-out;
		}
		
		.circle-2 {
			@extend .circle-1;
			width: 82px;
			height: 82px;
			top: -6px;
			left: -6px;
			border-color: $blue transparent $blue $blue;
		}
		
		img {
			display: block;
			border-radius: 50%;
			background: #F5E8DF;
		}
		
		&:hover {
			cursor: pointer;
			
			.circle-1 {
				transform: rotate(360deg);
			}
			
			.circle-2 {
				transform: rotate(-360deg);
			}
			
		}
		
	}
	
	.name {
		font-size: 20px;
		font-weight: 600;
		margin-top: 20px;
	}
	
	.job {
		font-size: 15px;
		line-height: 15px;
	}
	
	.actions {
		margin-top: 33px;
		
		
		.btn {
			display: block;
			width: 120px;
			height: 30px;
			margin: 0 auto 10px auto;
			background: none;
			border: 1px solid $blue;
			border-radius: 15px;
			font-size: 18px;
			font-family: 'Satisfy', cursive;
			font-weight: 600;
			box-sizing: border-box;
			transition: all .3s ease-in-out;
			color: $blue;
			
			&:hover {
				background: $blue;
				color: #fff;
			}
		}
	}
	
}

.stats {
	float: left;
	
	.box {
		box-sizing: border-box;
		width: 120px;
		height: 99px;
		background: #F5E8DF;
		text-align: center;
		padding-top: 28px;
		transition: all .4s ease-in-out;
		
		&:hover {
			background:#F8BBD0 ;
			cursor: pointer;
		}
		
		&:nth-child(2) {
			margin: 1px 0;
		}
		
	}
	
	span {
		display: block;
		
	}
	
	.value {
		font-size: 18px;
		font-weight: 600;
	}
	
	.parameter {
		font-size: 20px;
	}
	
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.