.wrapper
	%h1 
		Emad Elsaid
		%span{:style=>"color:#666;"} Web Developer
	.avatar
		%img{:src=>"https://si0.twimg.com/profile_images/2243819521/f910067ea4ee11e192e91231381b3d7a_7_reasonably_small.jpg" ,:width=>"100px"}
	.skills
		%ul
			%li HTML5
			%li CSS3
			%li jQuery
			%li PHP
			%li Python
		%div{:class=>"hr"}
		%div{:class=>"button"}
			%a{:style=>"text-decoration:none; href='https://codepen.io/blazeeboy'"} Follow me on Codepen

body {
 	background:url('http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/use_your_illusion.png');
	padding-top:5px;
}
.wrapper {
  width:250px;
  background:#f3f3f3;
  border-radius:8px;
  margin: 0px auto;
  padding:10px;
  border: 1px solid #000;
  box-shadow:0px 1px 0px #000 inset;
  position: relative;
}
h1 {
  border-top-left-radius: 9px;
	border-top-right-radius: 9px;
  text-align:center;
  width:auto;
  font-family:arial;
  text-transform:uppercase;
  font-size:9px;
  font-weight:bold;
  color:#fff;
  text-shadow:1px 1px 1px #111;
  background:#000;
  position:absolute;
  top:-10px;
  left:-1px;
  width:244px;
  padding:14px;
  border-bottom:solid 1px #111;

}
.avatar {
  margin-top:30px;
  border:5px solid #fff;
  overflow:hidden;
  width:100px;
  height:86px;
}
ul{position:absolute;top:30px;left:140px;}
li {color:#93836e;list-style:square;font-family:arial;font-size:12px;font-weight:bold;text-shadow:1px 1px 1px #fff}
.button{
  background-color: #ffb94b;
  background-image: linear-gradient(top, #fddb6f, #ffb94b);
  border-radius: 3px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;    
  border-width: 1px;
  border-style: solid;
  border-color: #d69e31 #e3a037 #d5982d #e3a037;
  text-align:center;
  padding: 5px;
  width: auto;
  cursor: pointer;
  font: bold 15px Arial, Helvetica;
  color: #8f5a0a;
}
ul h1 {background:none;}

.hr{
  height:1px;
  border-bottom: 1px dashed #888;
  margin-bottom: 10px;
  margin-top: 6px;
  box-shadow: 0px 1px 0px #fff;
}

.button:hover,.button:focus {
    background-color: #fddb6f;
    background-image: linear-gradient(top, #ffb94b, #fddb6f);
}
.button:active{        
    outline: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}
.button::-moz-focus-inner{
  border: none;
}