<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/Hazem/pen/oaCtE?depth=everything&limit=all&order=popularity&page=19&q=avatar&show_forks=false" />
<style class="cp-pen-styles">body{
background: #EEE;
text-align: center;
/*overflow: hidden;*/
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
cursor: default;
}
body:after{
content: "";
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MHB4IiBoZWlnaHQ9IjUwcHgiIHZpZXdCb3g9IjAgMCA1MCA1MCI+PHJlY3QgeD0iMjMuODQ2IiB5PSIwLjMzMSIgdHJhbnNmb3JtPSJtYXRyaXgoMC43MDczIC0wLjcwNjkgMC43MDY5IDAuNzA3MyAtMTAuNDM3MiAyNC45ODY3KSIgd2lkdGg9IjIuMjIxIiBoZWlnaHQ9IjQ5LjUzMiIvPjxyZWN0IHg9IjIzLjg0NSIgeT0iMC4zMzIiIHRyYW5zZm9ybT0ibWF0cml4KDAuNzA2OSAwLjcwNzMgLTAuNzA3MyAwLjcwNjkgMjUuMDY3NSAtMTAuMjk1MykiIHdpZHRoPSIyLjIyMSIgaGVpZ2h0PSI0OS41MzIiLz48L3N2Zz4=);
opacity: 0.020;
/*width: 120%;
height: 120%;
animation: move 5s linear infinite;
top:-50px; left:-50px;*/
top:0; left:0; bottom:0; right:0;
position: absolute;
z-index: -1;
}
/*@keyframes move {
to{
left: 0px;
top: 0px;
}
}*/
#container{
top: 50%; left: 50%;
margin-top: -200px; /*-1/2 of height*/
margin-left: -125px; /*-1/2 of width*/
position: fixed;
}
#avatar{
border: white solid 7px;
box-shadow: 0px 1px 0px rgba(0,0,0,0.25);
/*box-shadow: 0px 2px 3px rgba(0,0,0,0.25);*/
/*transition: all 0.5s cubic-bezier(0.19,1.0,0.22,1.0);*/
border-radius: 50%;
animation: bounce cubic-bezier(0.19,1.0,0.22,1.0) 1.5s alternate infinite;
-webkit-animation: bounce cubic-bezier(0.19,1.0,0.22,1.0) 1.5s alternate infinite;
/*maxthon duplicate*/
}
@keyframes bounce {
to{
transform: translateY(-12px) scale(1.03);
box-shadow: 0px 5px 10px rgba(0,0,0,0.15);
}
}
@-webkit-keyframes bounce { /*maxthon duplicate*/
to{
-webkit-transform: translateY(-12px) scale(1.03);
box-shadow: 0px 5px 10px rgba(0,0,0,0.15);
}
}
/*#avatar:hover{
transform: translateY(-7px) scale(1.05);
-webkit-transform: translateY(-7px) scale(1.05); /*maxthon
box-shadow: 0px 5px 10px rgba(0,0,0,0.15);
}*/
#text{
margin-top: 7px;
}
h1, p{
margin: 0;
padding: 0;
font-family: Segoe UI, sans-serif;
font-weight: 100;
font-style: normal;
color: rgba(0,0,0,1);
}
h1{
color: rgba(1,106,154,0.75); /*#016A9A;*/
text-shadow: 0px 1px 0px rgba(255,255,255,1.0);
}
p{
color: rgba(0,0,0,0.25);
text-shadow: 0px 1px 0px rgba(255,255,255,0.75);
}</style></head><body>
<head>
<title>Hazem AbuMostafa (Coming Soon)</title>
<style>@import url(/assets/style.css)</style>
</head>
<div id=container>
<img src="https://pbs.twimg.com/profile_images/459505368234606592/nuxaaQoo_400x400.jpeg"" id="avatar" width="250" draggable="false"/>
<div id=text>
<h1>Building…</h1>
<p title="(I guess)">(coming soon)</p>
</div>
</div>
</body></html>
