<div class="container">

		<div class="bg-image">
			<h3>Mostafa Hassani</h3>
		</div>

			<div class='followe'>
				<ul>
					<li><a href="#">
						<span id='number'>45</span>
						<span id='followe'>Followers</span>
					</a></li>
					<li><a href="#">
						<span id='number'>5</span>
						<span id='followe'>Following</span>
					</a></li>
					<div class="badboy"></div>
				</ul>
			</div>

		<div class="image"></div>

		<input type="radio" id='one' name='contorol' checked/> 
		<label for="one"><i class='icon-comments-alt'></i></label>
		<input type="radio" id='two' name='contorol' />
		<label for="two"><i class='icon-user'></i></label>
		<input type="radio" id='three' name='contorol' /> 
		<label for="three"><i class='icon-link'></i></label>
		
<div class="all">
		<div class="chat">
			<div class="show-message">
				<div class="friend">
					<img src="http://i.cubeupload.com/c6AJ19.png" width=32 height=32 />
					<div class="message">
						<p>Hi. Am searching for something about Css.
							would you mind helping me to find out?</br>
						</p>
					</div>
				</div>
				<div class="me">
					<img src="http://i.cubeupload.com/nD0XUv.png" width=32 height=32 />
					<div class="message">
						<p>Hi dear</br>
						of course if i can ...</p>
					</div>
				</div>				
				<div class="badboy"></div>
			</div>
			<div class="type-text">
				<input type="text" placeholder='Chat with Mostafa...' />
				<button type='submit'><i id='i' class='icon-comments-alt'></i></button>
			</div>
		</div>

		<div class="Description">
			<p>My name is Mostafa Hasani.</br>
				I'm in love with Html,Css and anything about front-end web.</br>
				I like sports too...</br>
				because healthy mind is in healthy body.
			</p>
		</div>

		<div class="Link">
			<div class="menu">
				<ul>
					<li><a href="">codepen.io/Hassani</a></li>
					<li><a href="">github.com/yegane</a></li>
					<li><a href="">seyedmostafahassani@gmail.com</a></li>
				</ul>
			</div>
		</div>

		<div class="badboy"></div>
	</div>
</div>

@import url(https://fonts.googleapis.com/css?family=Gudea);

body{
	font-family: Gudea;
	background : url('http://i.cubeupload.com/UWyvD2.jpg')
  no-repeat center center fixed;
  -webkit-background-size: cover;
  background-size: cover;
}

label i[class^='icon-'] , label i[class*='icon-']{
	display: block;
	padding: 14px 0;
}

a:hover i[class^='icon-'] , a:hover i[class*='icon-']{
	color : #837D7D;
}

.container{
	width: 402px;
	margin: 40px auto;
	position: relative;
	border: 1px solid #CFCFCF;
	overflow: hidden;
	background-color: #fff;
	border-radius: 7px;
}

.badboy{
	width: 0;
	height: 0;
	clear: both;
}

.bg-image{
	width: 402px;
	height: 157px;
	background-image: url('http://i.cubeupload.com/ksxXPp.png');
	position: relative;
	border-bottom: 1px solid #38393A;
}

.bg-image:before{
	content: '';
	position: absolute;
	width: 150px;
	height: 213px;
	background: -webkit-linear-gradient(rgba(240, 240, 240, 0.31) 22%, rgba(240, 237, 240, 0.22) 51%, rgba(214, 214, 214, 0.28) 80%);
	background: -moz-linear-gradient(rgba(240, 240, 240, 0.31) 22%, rgba(240, 237, 240, 0.22) 51%, rgba(214, 214, 214, 0.28) 80%);
	right: -56px;
	-webkit-transform: rotate(-43deg);
	-moz-transform: rotate(-48deg);
	top: -79px;
	
}

h3 {
	display: block;
	position: absolute;
	text-shadow : 0 -1px 2px #000;
	left: 10px;
	top: 14px;
	font-size : 16px;
	color : #F9F7F6;
	font-weight: normal;
}

.followe{
	background : -webkit-linear-gradient(rgb(112, 114, 119) 14%, rgb(101, 98, 98) 37%, rgb(80, 80, 81) 62%, rgb(65, 68, 67) 83%);
	background : -moz-linear-gradient(rgb(112, 114, 119) 14%, rgb(101, 98, 98) 37%, rgb(80, 80, 81) 62%, rgb(65, 68, 67) 83%);
	border-bottom: 1px solid #18191A;
}

.followe li{
	float: left;
  width: 201px;
	box-sizing : border-box;
	-moz-box-sizing : border-box;
}

.followe li:nth-child(1){
	border-right: 1px solid #2D3234;
}

.followe a{
	display: block;
	padding : 10px 0;
	text-decoration: none;
	color: #F5F5F5;
}

.followe span{
	display: block;
	text-align: center;
}

span#number{
	font-size: 20px;
	text-shadow: 0 -1px 2px #000;
}

span#followe{
	text-shadow: 0 -1px 2px #000;
	font-size: 15px;
}

.image{
	width: 120px;
	height: 120px;
	position: absolute;
	background: #F7F9F9;
	border: 1px solid #211410;
	top: 89px;
	left: 140px;
	border-radius: 50%;
}

.image:before{
	content: '';
	position: absolute;
	width: 110px;
	height: 110px;
	border-radius: 50%;
	top: 5px;
	left: 5px;
	background-image: url('http://i.cubeupload.com/Cocek1.png');
}

.image:after{
	content: '';
	position: absolute;
	width: 110px;
	height: 65px;
	border-radius: 90px 90px 0 0;
	background: rgba(255, 255, 255, 0.22);
	left: 29px;
	-webkit-transform: rotate(42deg);
	-moz-transform: rotate(42deg);
}

label{
	display: inline-block;
	width: 134px;
	height: 52px;
	text-align: center;
	margin: 0 -2px;
	text-decoration: none;
	color : #9B9E8D;
	font-size: 22px;
	box-shadow: 0 2px 3px 0px #D8D7D7;
	position: relative;
	background: #fff;
	z-index: 1;
	-webkit-transition : all .25s ease;
	-moz-transition : all .25s ease;
}

label:hover{
	color: #767968;
}

.all:before{
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 9px 15px 0px 15px;
	border-color: rgb(255, 255, 255) rgba(255, 0, 0, 0) rgb(27, 169, 236) rgba(0, 0, 255, 0);
	left: 52px;
	z-index: 1;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
}

.all{
	width: 1208px;
}

.chat{
	float: left;
	position: relative;
	width: 403px;
}

.chat .show-message{
	background : -webkit-linear-gradient(rgb(242, 242, 243) 15%, rgb(240, 243, 241) 36%, rgb(241, 240, 241) 58%, rgb(236, 236, 236) 81%);
	background : -moz-linear-gradient(rgb(242, 242, 243) 15%, rgb(240, 243, 241) 36%, rgb(241, 240, 241) 58%, rgb(236, 236, 236) 81%);
	border-bottom: 1px solid #D3D3D3;
	padding-bottom: 30px;
}

.chat .type-text{
	background : -webkit-linear-gradient(rgb(251, 251, 254) 18%, rgb(250, 251, 253) 51%, rgb(251, 251, 252) 78%);
	background : -moz-linear-gradient(rgb(251, 251, 254) 18%, rgb(250, 251, 253) 51%, rgb(251, 251, 252) 78%);
	padding-bottom: 13px;
}

input[type='text']{
	border: 1px solid #CED3D9;
	margin: 13px 0 0 28px;
	padding: 10px;
	outline: 0;
	border-radius: 5px;
	width: 235px;
	color : #A0A0A0;
}

button[type='submit']{
	-webkit-appearance: none;
	-moz-appearance: none;
	background: -webkit-linear-gradient(rgb(32, 199, 127) 21%, rgb(30, 180, 115) 52%, rgb(28, 160, 101) 79%);
	background: -moz-linear-gradient(rgb(32, 199, 127) 21%, rgb(30, 180, 115) 52%, rgb(28, 160, 101) 79%);
	background: -ms-linear-gradient(rgb(32, 199, 127) 21%, rgb(30, 180, 115) 52%, rgb(28, 160, 101) 79%);
	box-shadow: inset 0 0 2px 1px #DDD7D7;
	border: 1px solid #A0A0A0;
	padding: 2px 22px 10px 20px;
	margin: 0px 0 0 25px;
	border-radius: 4px;
}

button[type='submit']:hover{
	cursor: pointer;
}

button[type='submit']:hover #i{
	color : #fff;
}

.friend{	
	float: left;
	margin: 30px 0 0 15px;
}

.me{
	float: right;
	margin : 20px 15px 0 0;
}

.friend img , .me img{
	border-radius: 2px;
} 

.friend img{
	float: left;
	margin: 10px 0 0 7px;
}

.me img{
	float: right;
	margin: 10px 7px 0 ;
}

.friend .message{
	border : 1px solid #E2E2E2;
	margin: 2px 0 0 55px;
	padding: 10px;
	background: #FDFCF5;
	border-radius: 6px;
	width: 180px;
	position: relative;
}

.me .message{
	border: 1px solid #BFE3EE;
	margin: 2px 51px 0 0;
	padding: 10px;
	background: #DCEAF7;
	border-radius: 6px;
	position: relative;
	width: 160px;
}

.friend p , .me p{
	font-size: 14px;
}

.me p{
	color : #6AA0F0;
}

.friend p{
	color : #AEB0A4;
}

#i{
	font-size: 25px;
	color: #E8E8E8;
	display: block;
	margin-top: 4px;
	-webkit-transition : all .25s ease;
	-moz-transition : all .25s ease;
}

label:hover{
	cursor: pointer;
}

input[type='radio']{
	display: none;
}

input[type='radio']:checked + label{
	color: #767968;
}

input[type='radio']#one:checked ~ .all{
	margin-left: 0px;
	-webkit-transition : all .5s ease-in-out;
	-moz-transition : all .5s ease-in-out;
}

.Description , .Link{
	width:402px;
	height:282px;
	float:left;
	padding: 10px 0;
	background : -webkit-linear-gradient(rgb(242, 242, 243) 15%, rgb(240, 243, 241) 36%, rgb(241, 240, 241) 58%, rgb(236, 236, 236) 81%);
	background : -moz-linear-gradient(rgb(242, 242, 243) 15%, rgb(240, 243, 241) 36%, rgb(241, 240, 241) 58%, rgb(236, 236, 236) 81%);
}

.Description  p {
	margin : 60px 0;
	text-align: center;
	line-height: 30px;
	color: #535252;
	font-size: 18px;
}

input[type='radio']#two:checked  ~  .all{
	margin-left: -403px;
	-webkit-transition : all .5s ease-in-out;
	-moz-transition : all .5s ease-in-out;
}

input[type='radio']#two:checked ~  .all:before{
	left: 183px;
}

input[type='radio']#three:checked  ~  .all{
	margin-left: -805px;
	-webkit-transition : all .5s ease-in-out;
	-moz-transition : all .5s ease-in-out;
}

input[type='radio']#three:checked ~  .all:before{
	left: 319px;
}

.menu{
	width: 350px;
	height: inherit;
	margin: 0 auto ;
}

ul{
	width: inherit;
	height: inherit;
	list-style: none;
}

.menu li{
	width: inherit;
	border-bottom : 1px solid rgb(235, 235, 235);
}

.menu li:nth-child(1){
	margin-top: 67px;
}

.menu li:last-child{
	border-bottom: 0;
}

.Link a{
	display: block;
	padding: 8px 15px;
	text-decoration: none;
	color : #4B4E43;
	font-size: 18px;
	text-align: center;
	text-shadow : 0 0 2px #4F5144;
	opacity: .7;
}

.Link a:hover{
	text-shadow : 0 0 0;
	opacity: 1;
}