Ajax Loader
HTML 
<html>
1
<html>
2
  <head>
3
    <title>Home</title>
4
    <link rel="stylesheet" type="text/css" href="main.css">
5
    <meta charset="utf-8"/>
6
    <meta name="viewport" content="width=device-width, user-scalable=no">
7
  </head>
8
  <body>
9
    <div id="wrapper">
10
      <div class="nav">
11
        <ul>
12
          <li><a href="index.html">Home</a></li>
13
          <li><a href="#">Recipes</a></li>
14
          <li><a href="#">Popular</a></li>
15
          <li><a href="#">Contact</a></li>
16
          <li><a href="#" class="login">Sign In</a></li>
17
        </ul>
18
      </div>
19
    
20
      <div class="header">
21
        <h3>Welcome to OptimaLife</h3>
22
      </div>
23
 
24
      <div class="content">
25
        <div class="first-column column">
26
          <img src="http://s7.directupload.net/images/140511/9y5i2p9l.png">
27
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
28
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
29
          <a href="#">Read more&hellip;</a>
30
        </div>
31
        <div class="second-column column">
32
          <img src="http://s7.directupload.net/images/140511/9y5i2p9l.png">
33
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
34
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
35
          <a href="#">Read more&hellip;</a>
36
        </div>
37
        <div class="last-column column">
38
          <img src="http://s7.directupload.net/images/140511/9y5i2p9l.png">
39
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
40
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
41
          <a href="#">Read more&hellip;</a>
42
        </div>
43
        <div class="first-column column">
44
          <img src="http://s7.directupload.net/images/140511/9y5i2p9l.png">
45
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
46
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
47
          <a href="#">Read more&hellip;</a>
48
        </div>
49
        <div class="second-column column">
50
          <img src="http://s7.directupload.net/images/140511/9y5i2p9l.png">
51
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
52
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
53
          <a href="#">Read more&hellip;</a>
54
        </div>
55
        <div class="last-column column">
56
          <img src="http://s7.directupload.net/images/140511/9y5i2p9l.png">
57
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
58
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
59
          <a href="#">Read more&hellip;</a>
60
        </div>
61
      </div>
62
    </div>
63
  </body>
64
</html>
 
CSS 
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
1
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
2
 
3
@font-face {
4
  font-family: gotham;
5
  src: url(Gotham-Light.otf);
6
}
7
 
8
* {
9
  font-family: 'gotham', sans-serif;
10
  box-sizing: border-box;
11
}
12
 
13
body {
14
  width: 100%;
15
  height: 100%;
16
  padding: 0;
17
  margin: 0;
18
  margin: 0 auto;
19
  background: #f9f9f9;
20
}
21
 
22
div#wrapper {
23
  width: 100%;
24
  height: auto;
25
  margin: 0 auto;
26
}
27
 
28
div#wrapper .nav {
29
  width: 100%;
30
  height: auto;
31
  margin: 0 auto;
32
  background: #ffffff;
33
  text-align: center;
34
  padding: 10px;
35
}
36
 
37
div#wrapper .nav ul {
38
  margin: 0;
39
  padding: 0;
40
}
41
 
42
div#wrapper .nav ul li {
43
  display: inline;
44
}
45
 
46
div#wrapper .nav ul li a {
47
  text-decoration: none;
48
  padding: 4px 8px;
49
  font-family: 'Open Sans', sans-serif;
50
  font-size: 13px;
51
  color: #222222;
52
  border-radius: .15em;
53
  transition: all .1s ease;
54
  box-sizing: border-box;
55
  display: inline-block;
56
  -webkit-border-radius: .2em;
57
          border-radius: .2em;
58
}
59
 
60
div#wrapper .nav ul li a:hover {
61
  background-color: #222222;
62
  color: #fff;
63
}
64
 
65
div#wrapper .nav ul li .login {
66
  color: #81a90b;
67
  transition: all .1s ease;
68
}
69
 
70
div#wrapper .nav ul li .login:hover {
71
  background-color: #81a90b;
72
  color: #ffffff;
73
}
74
 
75
div#wrapper .content {
76
  width: 80%;
77
  height: auto;
78
  line-height: 1.6em;
79
  margin: 0 auto;
80
  font-family: 'Open Sans', sans-serif;
81
  font-size: 14px;
82
  text-align: center;
83
  padding: 0 0 20px 0;
84
}
85
 
86
div#wrapper .content .column {
87
  width: 31%;
88
  height: auto;
89
  display: inline-block;
90
  padding: 0px;
91
  box-sizing: border-box;
92
  background-color: #fff;
93
  border: thin solid #ededed;
94
  margin: 0 auto;
95
  margin: 2% 0 0 0;
96
}
97
 
98
div#wrapper .content .column p {
99
  margin: 0;
100
  padding: 0 25px;
101
  font-size: 1em;
102
  text-align: center;
103
}
104
 
105
div#wrapper .content .column a {
106
  text-decoration: none;
107
  padding: 2px 10px;
108
  font-size: .8em;
109
  color: #383838;
110
  display: inline-block;
111
  margin: 10px 0 15px 0;
112
  border-radius: .2em;
113
  box-sizing: border-box;
114
  text-align: center;
115
  font-family: 'Open Sans', sans-serif;
116
  transition: all .1s ease;
117
}
118
 
119
div#wrapper .content .column a:hover {
120
  background-color: #383838;
121
  color: #fff;
122
}
123
 
124
div#wrapper .content .column img {
125
  width: 100%;
126
  height: 150px;
127
  padding: 0 0 15px 0;
128
  -webkit-background-size: cover;
129
       -o-background-size: cover;
130
          background-size: cover;
131
}
132
 
133
div#wrapper .content .second-column {
134
  margin: 0 1.5%;
135
}
136
 
137
div.header {
138
  width: 100%;
139
  height: 200px;
140
  background: url(http://www.directupload.net/file/d/3619/xquvo72a_jpg.htm);
141
  -webkit-background-size: cover;
142
       -o-background-size: cover;
143
          background-size: cover;
144
}
145
 
146
div.header h3 {
147
  padding: 0;
148
  margin: 0;
149
  font-family: 'Open Sans', sans-serif;
150
  font-weight: 200;
151
  line-height: 200px;
152
  text-align: center;
153
  color: #f7f7f7;
154
  font-size: 1.2em;
155
}
156
 
157
/*
158
  Media for screen size = 1060px
159
*/
160
 
161
@media only screen and (max-width:1060px) {
162
 
163
  div#wrapper .nav ul li a {
164
    margin: 0 5px;
165
  }
166
 
167
  div#wrapper .content {
168
    width: auto;
169
    margin: 0 auto;
170
    height: auto;
171
    display: block;
172
    float: left;
173
    padding: 20px 20px;
174
  }
175
 
176
  div#wrapper .content .column {
177
    width: 48.5%;
178
    box-sizing: border-box;
179
    height: auto;
180
    display: block;
181
    float: left;
182
    margin: 1% .7% 0 .8%;
183
    text-align: center;
184
  }
185
 
186
  div#wrapper .content .column a {
187
    padding: 2px 12px;
188
    color: #222222;
189
  }
190
 
191
  div#wrapper .content .column a:hover {
192
    background-color: #222222;
193
  }
194
 
195
  div#wrapper .content .column p {
196
    margin: 0;
197
    padding: 0 25px;
198
  }
199
 
200
  div#wrapper .content .last-column img {
201
    width: 100%;
202
    border-radius: .2em;
203
  }
204
 
205
  div.header {
206
    height: 150px;
207
  }
208
 
209
  div.header h3 {
210
    line-height: 150px;
211
  }
212
}
213
 
214
/*
215
  Media for screen size = 640px
216
*/
217
 
218
@media only screen and (max-width:645px) {
219
220
  div#wrapper .nav {
221
    padding: 8px 0;
222
    border-bottom: thin solid #efefef;
223
  }
224
 
225
  div#wrapper .nav ul li a {
226
    display: block;
227
    padding: 8px 0;
228
    border-radius: 0;
229
    margin: 0 0;
230
  }
231
 
232
  div#wrapper .nav ul li .login {
233
    border: 0;
234
    padding-left: 0;
235
    background: none;
236
  }
237
 
238
  div#wrapper .content {
239
    width: auto;
240
    height: auto;
241
    display: block;
242
    float: left;
243
    margin: 0 auto;
244
  }
245
 
246
  div#wrapper .content .column {
247
    width: 100%;
248
    box-sizing: border-box;
249
    height: auto;
250
    display: block;
251
    float: left;
252
    padding: 0 0 8px 0;
253
    margin-top: 1%;
254
  }
255
 
256
  div#wrapper .content .column p {
257
    padding: 0 20px;
258
  }
259
 
260
  div#wrapper .content .first-column {
261
    margin: 5% 0 0 0;
262
  }
263
 
264
  div#wrapper .content .second-column {
265
    margin: 5% 0 0 0;
266
  }
267
 
268
  div#wrapper .content .last-column {
269
    margin: 5% 0 0 0;
270
  }
271
 
272
  div#wrapper .content .column a {
273
    width: 100%;
274
    text-align: center;
275
    text-decoration: none;
276
    padding: 5px 0;
277
    font-family: 'Open Sans', sans-serif;
278
    font-size: 11px;
279
    color: #222222;
280
    margin: 8px 0 0 0;
281
    border-radius: 0;
282
    transition: all .1s ease;
283
  }
284
 
285
  div#wrapper .content .column a:hover {
286
    background-color: #222222;
287
    color: #fff;
288
  }
289
 
290
  div.header {
291
    display: none;
292
  }
293
 
294
}
 

Fully Responsive Blog

CSSDeck G+