Ajax Loader
HTML 
<!DOCTYPE html>
1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <meta charset="UTF-8">
5
 
6
  <title>Get in Touch with [YOUR NAME]</title>
7
 
8
  <!-- SEO -->
9
  <meta name="description" content="[YOUR NAME]'s">
10
  <meta name="author" content="[YOUR NAME], AKA [YOUR NICKNAME]">
11
 
12
  <!-- Viewport Meta Tag -->
13
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
14
 
15
  <!-- Stylesheets -->
16
  <link rel="stylesheet" href="style.css" />
17
 
18
  <!--[if lt IE 9]>
19
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
20
  <![endif]-->
21
</head>
22
<body>
23
  <main class=pulse>
24
    <a href="mailto:[YOUR EMAIL]">
25
      <i class="icon-envelope"></i>
26
    </a>
27
  </main>
28
</body>
29
</html>
 
CSS 
/*------------------------------------*\
1
/*------------------------------------*\
2
        $IMPORT
3
\*------------------------------------*/
4
@import url("http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css");
5
 
6
 
7
 
8
 
9
 
10
/*------------------------------------*\
11
                $RESET
12
            v2.0 | 20110126
13
http://meyerweb.com/eric/tools/css/reset
14
\*------------------------------------*/
15
html, body, div, span, applet, object, iframe,
16
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
17
a, abbr, acronym, address, big, cite, code,
18
del, dfn, em, img, ins, kbd, q, s, samp,
19
small, strike, strong, sub, sup, tt, var,
20
b, u, i, center,
21
dl, dt, dd, ol, ul, li,
22
fieldset, form, label, legend,
23
table, caption, tbody, tfoot, thead, tr, th, td,
24
article, aside, canvas, details, embed,
25
figure, figcaption, footer, header, hgroup,
26
menu, nav, output, ruby, section, summary,
27
time, mark, audio, video {
28
  margin: 0;
29
  padding: 0;
30
  border: 0;
31
  font-size: 100%;
32
  font: inherit;
33
  vertical-align: baseline;
34
}
35
article, aside, details, figcaption, figure,
36
footer, header, hgroup, menu, nav, section {
37
  display: block;
38
}
39
body {
40
  line-height: 1;
41
}
42
ol, ul {
43
  list-style: none;
44
}
45
blockquote, q {
46
  quotes: none;
47
}
48
blockquote:before, blockquote:after,
49
q:before, q:after {
50
  content: '';
51
  content: none;
52
}
53
table {
54
  border-collapse: collapse;
55
  border-spacing: 0;
56
}
57
a{
58
  text-decoration: none;
59
}
60
 
61
 
62
 
63
 
64
 
65
/*------------------------------------*\
66
        $STRUCTURE
67
\*------------------------------------*/
68
body {
69
  background: #2C3E51;
70
  font-size: 256px;
71
}
72
 
73
main {
74
  position: fixed;
75
  top: 50%;
76
  left: 50%;
77
  margin-top: -140px;
78
  margin-left: -128px;
79
  font-size: 100%;
80
}
81
 
82
a {
83
  color: #009484;
84
  text-shadow: 0 6px 0 rgba(0,0,0,0.25);
85
}
86
 
87
a:active {
88
  color: #007B6B;
89
}
90
 
91
 
92
 
93
 
94
 
95
/*------------------------------------*\
96
        $ANIMATION
97
\*------------------------------------*/
98
.pulse {
99
  animation-name: pulse;
100
  -webkit-animation-name: pulse;
101
 
102
  animation-duration: 1.5s;
103
  -webkit-animation-duration: 1.5s;
104
 
105
  animation-iteration-count: infinite;
106
  -webkit-animation-iteration-count: infinite;
107
}
108
 
109
@keyframes pulse {
110
  0% {
111
    transform: scale(0.9);
112
    opacity: 0.7;
113
  }
114
  50% {
115
    transform: scale(1);
116
    opacity: 1;
117
  }
118
  100% {
119
    transform: scale(0.9);
120
    opacity: 0.7;
121
  }
122
}
123
 
124
@-webkit-keyframes pulse {
125
  0% {
126
    -webkit-transform: scale(0.95);
127
    opacity: 0.7;
128
  }
129
  50% {
130
    -webkit-transform: scale(1);
131
    opacity: 1;
132
  }
133
  100% {
134
    -webkit-transform: scale(0.95);
135
    opacity: 0.7;
136
  }
137
}
138
 
139
 
140
 
141
 
142
 
 

Simple Get in Touch by Email Page

CSSDeck G+