Ajax Loader
×

Ghostpock

Design of imagination of Ghostpock. Developer @mrjopino

HTML 
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
1
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
2
<div class="carita" title="Ghostpock" alt="Ghostpock">
3
</div>
4
<h1 title="GhostPock">Ghostpock</h1>
5
<p class="texto" title="Cloud Security">Cloud Security</p>
6
<div class="flow">
7
      <boton class="copyright" title="Copyright © 2013 Fraph">©</boton>
8
  </div>
9
    <footer class="footer">
10
    <h5>Developed by <a target="_blank" href="https://twitter.com/mrjopino" title="José Pino">@mrjopino</a></h5>
 
CSS 
/* BugoneCSS3 by @mrjopino  */
1
/* BugoneCSS3 by @mrjopino  */
2
@charset "UTF-8";
3
@import url(http://fonts.googleapis.com/css?family=Pacifico);
4
 
5
body{
6
 background:url(https://dl.dropboxusercontent.com/u/16657557/scripts/blur/bg.jpg);
7
  background-size:cover;
8
  background-position:center center;
9
  background-attachment:fixed;
10
  font-family: helvetica, arial;
11
  text-align: center;
12
  margin:0;
13
  padding:0;
14
}
15
 
16
.carita {
17
  height: 100px;
18
  width: 200px;
19
  margin: 2% auto;
20
  background: url(http://jopbox.tk/i/u/ns_1388608540.png)center center no-repeat;
21
  -webkit-background-size: cover;
22
  -moz-background-size: cover;
23
  -o-background-size: cover;
24
  background-size: cover;
25
  background-image: linear-gradient(top, hsla(0,0%,100%,.2) 1px, hsla(0,0%,100%, 0) 1px, hsla(0,0%,0%, .1) 100% );
26
 0 60px 20px -12px hsla(0,0%,0%,.1);
27
  animation: animacion 1s infinite ease-in-out alternate;
28
  top:50px;
29
  left:15px;
30
}
31
 
32
@keyframes animacion {
33
  100% {
34
    transform: translateY(30px);
35
    box-shadow: 0 40px 10px -18px hsla(0,0%,0%,.2),
36
  }
37
}
38
 
39
 
40
.texto{
41
  color:white;
42
  font-size:30px;
43
  margin: 2% auto;
44
  text-align:center;
45
  font-family: 'pacifico', sans-serif;
46
  text-shadow: 1px 2px 1px rgba(0,0,0,.4); /* Sombrita */
47
}
48
 
49
h1{
50
  font-family:'Pacifico', cursive;
51
  font-size:4em;
52
  text-align:center;
53
  color: hsl(6, 78%, 57%);
54
  margin: 2% auto;
55
  text-shadow: #bbb 0 0 1px, #fff 0 -1px 2px, #fff 0 -0px 2px, rgba(0,0,0,0.8) 0 30px 25px;
56
}
57
 
58
h1:hover {
59
  text-shadow: 2px 2px 20px #2c90c6;
60
61
}
62
 
63
/* My Copyright */
64
.flow boton {
65
  border: none;
66
  background: hsl(192, 15%, 84%);
67
  border-radius: 4px;
68
  outline: none;
69
  padding: 7px 10px;
70
  color: #fff;
71
  font-size: 12px;
72
  box-shadow: 0 0 15px #000;
73
}
74
.flow boton:hover {
75
  background: hsl(204, 8%, 76%);
76
  transition: background .7s;
77
}
78
.flow boton:active {
79
  background: hsl(204, 8%, 66%);
80
}
81
.flow .copyright {
82
  border: none;
83
  background: hsl(6, 78%, 57%);
84
}
85
.flow .copyright:hover {
86
  background: #7db9e8
87
}
88
.flow .copyright:active {
89
  background: hsl(6, 64%, 36%)
90
}
91
 
92
 
93
/* Footer developed by @mrjopino */
94
.footer {
95
  display: block;
96
  max-width: 400px;
97
  font-family: helvetica, arial sans-serif;
98
  text-align: center;
99
  padding: 0;
100
  font-size: 0.8em;
101
  color: #888888;
102
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9);
103
}
104
.footer p a,
105
.footer a {
106
  color: white;
107
  text-decoration: none;
108
  font-weight: 700;
109
}
110
.footer p a:hover,
111
.footer a:hover,
112
.footer p a:active,
113
.footer a:active {
114
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.4);
115
  color: white;
116
}
117
 
118
footer {
119
  max-width: 175px;
120
  margin: 0 auto;
121
  display: block;
122
  padding: 2em;
123
  width: 100%;
124
}
 

Ghostpock

CSSDeck G+