<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<div id="logo">Fabbryzz</div>
<div id="hint">hover it!</div>
@import url(https://fonts.googleapis.com/css?family=Audiowide);
body {
background: url("https://dl.dropboxusercontent.com/u/95690690/Web%20Design%20Public/pattern/ps_neutral.png");
text-align: center;
}
#logo {
font-family:Audiowide;
font-size:150px;
color: white;
margin:100px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
text-shadow:
1px 1px 0 rgba(36,117,203,1),
13px 3px 0 rgba(36,117,203,0.9),
5px 5px 0 rgba(36,117,203,0.8),
17px 7px 0 rgba(36,117,203,0.7),
9px -15px 0 rgba(36,117,203,0.6),
-11px 11px 0 rgba(36,117,203,0.5),
7px -13px 0 rgba(36,117,203,0.4),
15px 30px 0 rgba(36,117,203,0.3),
-20px 17px 0 rgba(36,117,203,0.2),
-19px 19px 0 rgba(36,117,203,0.1),
30px -21px 0 rgba(36,117,203,0.08),
23px 23px 0 rgba(36,117,203,0.06),
-25px 40px 0 rgba(36,117,203,0.04),
27px 27px 0 rgba(36,117,203,0.02),
-29px 29px 0 rgba(36,117,203,0.0);
}
#logo:hover {
-webkit-transform: rotate(1deg) scale(1.02);
-moz-transform: rotate(1deg) scale(1.02);
-o-transform: rotate(1deg) scale(1.02);
-ms-transform: rotate(1deg) scale(1.02);
transform: rotate(1deg) scale(1.02);
text-shadow:
10px 1px 0 rgba(36,117,203,0.1),
13px 23px 0 rgba(36,117,203,0.2),
15px 5px 0 rgba(36,117,203,0.03),
17px 7px 0 rgba(36,117,203,0.04),
9px 15px 0 rgba(36,117,203,0.2),
-11px -11px 0 rgba(36,117,203,0.06),
17px -13px 0 rgba(36,117,203,0.07),
15px 30px 0 rgba(36,117,203,0.1),
-20px -17px 0 rgba(36,117,203,0.06),
-19px 19px 0 rgba(36,117,203,0.08),
5px 21px 0 rgba(36,117,203,0.02),
23px -23px 0 rgba(36,117,203,0.1),
25px 40px 0 rgba(36,117,203,0.2),
27px 17px 0 rgba(36,117,203,0.1),
-29px -29px 0 rgba(36,117,203,0.1);
}
#hint {
margin:100px;
font-family:Courier;
font-size:30px;
font-weight:bold;
color:#666;
}
