How to Design a Single Page HTML5 and CSS3 Web Layout

How to Design a Single Page HTML5 and CSS3 Web Layout
Advertisement

Single Page layouts have created a lot of buzz around the internet in the recent times… in fact they have created so much hype which I personally don’t think they deserve. But since they are in demand, I decided to make a template design for everybody.
I designed this layout in such a way that it can be used as a single page design, or it can also be used as the conventional design.
The web design contains “Click to readmore” links and they will open new pages even if you make it into a single page web design, that’s because putting a lot of text on the only page wouldn’t be a nice idea. Articles mostly have 1000 to 15000 words so they should be opened separately.

This is a pretty convenient layout. It can be used as a business, blog and almost every kind of web template. It includes a jQuery slider on the top. I’d like to add that you are not suppose to use this design as it is (although you are free to do that) but I think you’ll have to make a few adjustments according to your needs. For example you probably won’t need any article links, or you may not need the blocks.

Preview

View Demo

Single-Page-Simple-HTML5-CSS3-Tutorial

Header Area

As usual, not fancy stuff here. This is just to show you what jQuery I’m using.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!-- The new doctype -->

&nbsp;

&nbsp;

<!-- Linking scripts -->
<script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript" src="js/superfish.js"></script><script type="text/javascript" src="js/main.js"></script>

Body and Main Area

This is the main style sheet of our website.
HTML code

1

<header class="extra-wrap"><!-- Defining the header section of the page -->

CSS Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163

article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {
display:block;
}
mark, rp, rt, ruby, summary, time {
display:inline;
}
body {
background:#23231c;
color:#5d5d60;
font-family:Arial, Helvetica, sans-serif;
font-size:100%;
min-width:1010px;
position:relative;
}
html, body {
height:100%;
}
.bg {
background:url(../images/bg.jpg)50% 0 repeat #d3d3c9;
width:100%;
}
.main {
font-size:.8125em;
line-height:1.3846em;
margin:0 auto;
position:relative;
width:950px;
z-index:300;
}
.relative {
position:relative;
}
a {
color:#d54c20;
outline:none;
text-decoration:underline;
}
a:hover, a:focus {
text-decoration:none;
}
.clear {
clear:both;
font-size:0;
line-height:0;
width:100%;
}
.wrapper {
overflow:hidden;
width:100%;
}
p {
margin-bottom:18px;
}
.p1 {
margin-bottom:8px;
}
.m2 {
padding-bottom:15px;
}
.p3 {
margin-bottom:30px;
}
.alignright {
text-align:right;
}
.aligncenter {
text-align:center;
}
.img-indent-bot {
margin-bottom:25px;
}
.img-indent {
float:left;
margin:0 15px 0 0;
}
.border {
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);
-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);
background:#f8f8f6;
border:5px solid #f8f8f6;
box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);
}

Navigation bar and Logo

I’ve made an eco-friendly kind of a logo for this design, the multi-level drop down menu is also pretty decent.

Single-Page-Simple-HTML5-CSS3-Tutorial

HTML Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<div class="header-bg"></div>
<div class="main">
<div class="navi"><nav><!-- Defining the navigation menu -->
<ul class="sf-menu sf-js-enabled">
	<li class="current"><a href="#">Home</a></li>
	<li><a href="#">Element #2</a>
<ul style="display: none; visibility: hidden;">
	<li><a href="#">Element #21</a></li>
	<li><a href="#">Element #22</a></li>
	<li><a href="#">Element #23</a></li>
</ul>
</li>
	<li><a href="#">Element #3</a></li>
	<li><a href="#">Element #4</a></li>
	<li><a href="#">Element #5</a></li>
</ul>
</nav><a class="logo" href="#">My company</a>
<div class="clear"></div>
</div>
</div>

CSS code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217

header {
min-height:182px;
padding:0;
position:relative;
z-index:400;
}
.header-bg {
background:url(../images/header.jpg) 0 0 repeat-x;
height:76px;
left:0;
position:absolute;
top:1.4375em;
width:100%;
}
.logo {
background:url(../images/logo.png) 0 0 no-repeat;
display:block;
height:47px;
margin-top:18px;
text-indent:-5000px;
width:171px;
}
strong.title {
color:#181001;
display:block;
float:right;
font-size:19px;
letter-spacing:-1px;
line-height:25px;
padding:28px 0 0;
text-align:right;
}
.navi {
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);
-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);
background:url(../images/navi.png) 0 0 repeat-x #ebebeb;
border:1px solid #f8f8f6;
box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);
padding:0 0 0 18px;
}
nav {
float:right;
}
.sf-menu {
font-size:11px;
text-transform:uppercase;
}
.sf-menu ul {
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);
-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);
background:url(../images/submenu.png) 0 0 repeat;
border:1px solid #efefeb;
box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);
font-size:10px;
line-height:32px;
position:absolute;
top:-999em;
width:179px;
}
.sf-menu ul li {
float:none;
}
.sf-menu a:hover, .sf-menu li.sfHover a, .sf-menu li.current a {
background:#e0e0db;
color:#f15a29;
}
.sf-menu li {
background:url(../images/menu.gif) 0 0 repeat-y;
float:left;
padding-left:1px;
position:relative;
}
.sf-menu a {
color:#23231c;
display:block;
min-width:104px;
padding:31px 0;
text-align:center;
text-decoration:none;
}
.sf-menu li:hover ul, .sf-menu li.sfHover ul {
left:0;
top:81px;
z-index:99;
}
ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul {
top:-999em;
}
ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul {
left:181px;
top:-1px;
}
.sf-menu li li {
background:none;
padding:0;
}
.sf-menu ul a {
padding:0 0 0 39px;
text-align:left;
width:140px;
}
.sf-menu ul a, .sf-menu li.sfHover li a, .sf-menu li.current li a, .sf-menu li li.sfHover li a {
background:none;
color:#23231c;
}
.sf-menu ul a:hover, .sf-menu li.sfHover li a:hover, .sf-menu li li.sfHover a, .sf-menu li.current li a:hover, .sf-menu li li.current a, .sf-menu li li li.current a {
background:#23231c;
color:#e0e0db;
}

Slideshow

This includes a bit of a jQuery.

Simple-HTML5-CSS3-Tutorial

HTML Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div class="slider-wrapper" id="slider-wrapper">

&nbsp;
<div class="nivoSlider" id="slider"><img style="display: none;" title="#htmlcaption-1" src="images/promo1.jpg" alt="" /> <img style="display: none;" title="#htmlcaption-2" src="images/promo2.jpg" alt="" /> <img style="display: none;" title="#htmlcaption-3" src="images/promo3.jpg" alt="" /> <img style="display: none;" title="#htmlcaption-4" src="images/promo4.jpg" alt="" /></div>
<div class="nivo-html-caption" id="htmlcaption-1"><strong class="p2">Your promo text 1</strong> <span class="p5">Promo text description here</span> <a class="buttonz" href="#">More</a></div>
<div class="nivo-html-caption" id="htmlcaption-2"><strong class="p2">Your promo text 2</strong> <span class="p5">Promo text description here</span> <a class="buttonz" href="#">More</a></div>
<div class="nivo-html-caption" id="htmlcaption-3"><strong class="p2">Your promo text 3</strong> <span class="p5">Promo text description here</span> <a class="buttonz" href="#">More</a></div>
<div class="nivo-html-caption" id="htmlcaption-4"><strong class="p2">Your promo text 4</strong> <span class="p5">Promo text description here</span> <a class="buttonz" href="#">More</a></div>
</div>

CSS Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137

#slider-wrapper {
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);
-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);
border:8px solid #f5f5f5;
box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);
height:348px;
margin:0 auto;
overflow:hidden;
width:934px;
z-index:200
}
.slider-wrapper {
margin:32px auto 36px !important;
position:relative !important;
width:950px !important;
zoom:1;
top:0 !important;
background-color:#F5F5F5 !important
}
.cs-prev {
-moz-border-radius:28px 0 0 28px;
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);
-webkit-border-radius:28px 0 0 28px;
-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);
background:url(../images/prev.png) 50% 50% no-repeat #ebebeb;
border-radius:28px 0 0 28px;
box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);
height:55px;
width:29px
}
.cs-prev:hover {
background:url(../images/prev-hover.png) 50% 50% no-repeat #e55729
}
.cs-next {
-moz-border-radius:0 28px 28px 0;
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);
-webkit-border-radius:0 28px 28px 0;
-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);
background:url(../images/next.png) 50% 50% no-repeat #ebebeb;
border-radius:0 28px 28px 0;
box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);
height:55px;
width:29px
}
.cs-next:hover {
background:url(../images/next-hover.png) 50% 50% no-repeat #e55729
}
.cs-title {
color:#f5ffa8;
font-size:44px;
letter-spacing:-1px;
line-height:1.2em;
right:-360px;
top:200px;
width:360px
}
.cs-title em {
color:#b5ff99;
display:inline-block;
font-size:30px;
font-style:normal;
margin-left:25px
}
.cs-title strong {
color:#f5ffa8;
display:inline-block;
font-size:36px;
font-weight:400
}

Blocks Area

These are the 5 blocks below our slider. They will be handy if you are making a business/corporate web design. And after that, there are the links for articles and a sidebar space as well.

HTML5-CSS3-Tutorial

HTML Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165

<header class="extra-wrap"><section id="content"><!-- Defining the main content section of the page -->
<div class="blocks">
<div class="padding">

<img src="http://www.script-tutorials.com/demos/87/thumb.png" alt="" />
<h6>CSS3 Menu</h6>
Creating css3 menu tutorial.
<div class="alignright">More</div>
</div>
<div class="padding">

<img src="images/page1-icon2.png" alt="" />
<h6>News #2</h6>
Short text of this news post here. Short text of this news post here. Short text of this news post here.
<div class="alignright">More</div>
</div>
<div class="padding">

<img src="images/page1-icon2.png" alt="" />
<h6>News #3</h6>
Short text of this news post here. Short text of this news post here. Short text of this news post here.
<div class="alignright">More</div>
</div>
<div class="padding">

<img src="images/page1-icon2.png" alt="" />
<h6>News #4</h6>
Short text of this news post here. Short text of this news post here. Short text of this news post here.
<div class="alignright">More</div>
</div>
<div class="padding">

<img src="images/page1-icon2.png" alt="" />
<h6>News #5</h6>
Short text of this news post here. Short text of this news post here. Short text of this news post here.
<div class="alignright">More</div>
</div>
</div>
<div class="main">
<div class="line"></div>
</div>
<div class="container_24"><article class="grid_14 suffix_1">
<h3>Creating ajaxy chained selects with jQuery</h3>
&nbsp;

&nbsp;

<figure class="img-indent"><a class="lightbox-image border" href="#"><img src="http://www.script-tutorials.com/demos/85/thumb.png" alt="" /></a></figure>&nbsp;
<div class="extra-wrap">

Today we will talk about creating dependent (chained) selects for your projects. This can be any related elements at your website. As example dependent fields to select your profession, mobile phone, or location (which can include Country, State, Region etc). One important note – we will need all this working using AJAX technology (to make functionality fast and smooth). And, jQuery library provide us with that plugin – jquery.chainedSelects.js. I will show you how to create chained fields using this plugin.
<div class="p1"><a class="button" href="#">More</a></div>
</div>
<div class="clear"></div>
<h3>Creating Cross-browser Compatible Wave Effects Using Javascript</h3>
&nbsp;

&nbsp;

<figure class="img-indent"><a class="lightbox-image border" href="#"><img src="http://www.script-tutorials.com/demos/85/thumb.png" alt="" /></a></figure>&nbsp;
<div class="extra-wrap">

Today’s lesson quite entertaining, we’ll learn how to construct a wave effect. For clarity, we will apply that effect to the picture. I will explain how it works directly in our tutorial, now, its time to see our online demonstration.
<div class="p1"><a class="button" href="#">More</a></div>
</div>
<div class="clear"></div>
</article><article class="grid_9">
<h3 class="relative">Recent comments</h3>
<div class="wrapper p3">

<time datetime="2011-04-25">25</time>
<div class="extra-wrap"><a class="time" href="#">June, 2011</a>
Pretty nice template, good !</div>
</div>
<div class="wrapper p3">

<time datetime="2011-04-20">20</time>
<div class="extra-wrap"><a class="time" href="#">June, 2011</a>
Another comments ...</div>
</div>
<div class="wrapper">

<time datetime="2011-04-15">15</time>
<div class="extra-wrap"><a class="time" href="#">June, 2011</a>
Another comments ...</div>
</div>
</article>
<div class="clear"></div>
</div>
</section></header>

CSS code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440

section#content {
overflow:hidden;
padding:0 0 64px;
zoom:1;
}
.line {
background:url(../images/line.png) 50% 0 no-repeat;
height:24px;
margin-bottom:20px;
}
.rss {
background:url(../images/rss.png) 0 0 no-repeat;
height:32px;
position:absolute;
right:80px;
top:-2px;
width:33px;
}
h1, h2, h3, h4, h5, h6 {
color:#23231c;
font-weight:400;
line-height:1.2em;
margin:0 0 34px;
text-shadow:0 0 #23231c, 0 0 #23231c, 0 0 #23231c;
}
h1 {
font-size:34px;
}
h2 {
font-size:31px;
}
h3 {
font-size:28px;
color:#c4c4c4;
text-shadow:0 2px 2px #000;
}
h4 {
font-size:25px
}
h5 {
font-size:22px
}
h6 {
font-size:19px
}
h1 strong {
font-size:60px;
font-weight:400;
line-height:1.2em
}
h1 em {
border-bottom:1px solid #ededed;
color:#23231c;
display:block;
font-size:48px;
font-style:normal;
line-height:1.2em;
padding-bottom:15px
}
strong, b, big {
color:#191001
}
.blocks {
margin:0 auto;
overflow:hidden;
padding-bottom:36px;
width:965px
}
.block {
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);
-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);
background:url(../images/block.png) 0 0 repeat;
border:1px solid #e6e6e0;
box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);
color:#5d5d60;
float:left;
font-size:13px;
line-height:18px;
margin:0 6px;
text-decoration:none;
width:179px;
border-radius:10px;
}
.block .padding {
padding:23px 22px 15px 19px;
}
.block h6 {
color:#393939;
font-size:18px;
margin:2px 0 17px;
text-align:center;
white-space:nowrap
}
.block p {
margin-bottom:15px;
color:#ffffff;
}
.block img {
display:block;
margin:0 auto
}
.block:hover {
background:#23231c;
border:1px solid #23231c;
color:#aeaeaa
}
.block:hover h6 {
color:#f5f5f5
}
.block .alignright {
color:#393939;
text-decoration:underline
}
.block:hover .alignright {
color:#f15a29
}
time {
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);
-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);
background:#e55729;
box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);
color:#fff;
float:left;
font-size:28px;
line-height:normal;
margin-right:16px;
min-width:50px;
padding:9px 0;
text-align:center
}
.time {
color:#fd863f;
text-decoration:underline;
font-size:16px;
font-style:italic;
}
aside {
padding:40px 0 0;
position:relative
}
aside h6 {
color:#d4d4ca;
font-size:18px;
margin:0 0 20px
}
aside li a {
color:#9b9b94;
line-height:24px;
text-decoration:none
}
aside li a:hover {
color:#fff;
text-decoration:underline
}

.button {
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);
-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);
background:url(../images/block.png) 0 0 repeat;
border:1px solid #e6e6e0;
box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);
color:#000000;
cursor:pointer;
display:inline-block;
padding:5px 14px;
text-decoration:none
}
.lightbox-image {
display:inline-block;
overflow:hidden;
position:relative
}
.lightbox-image img {
position:relative;
z-index:2
}
.extra-wrap {
overflow:hidden;
color:#fff;
text-align:justify;
}
::selection, ::-moz-selection {
background:#bbb;
color:#fff
}
.button:hover, .button.hover, #newsletter-form .button:hover {
background:#888680;
color:#fff
}
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16, .grid_17, .grid_18, .grid_19, .grid_20, .grid_21, .grid_22, .grid_23, .grid_24 {
display:inline;
float:left;
position:relative;
margin-left:5px;
margin-right:5px
}
.container_24 {
margin-left:auto;
margin-right:auto;
width:960px;
font-size:0.8125em;
line-height:1.3846em;
}
.container_24 .grid_4 {
width:150px
}
.container_24 .grid_8 {
width:310px
}
.container_24 .grid_9 {
width:350px
}
.container_24 .grid_14 {
width:550px
}
.container_24 .suffix_1 {
padding-right:40px
}
.container_24 .suffix_3 {
padding-right:120px
}

Footer

And now we’re at the end. As you’d know I hate the idea of doing too much with the footer so I just kept it simple once again. But adding a subscription/contact form is always a good idea.

Single-Page-Simple-HTML5-CSS3-Tutorial

HTML Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

<header class="extra-wrap"><aside><!-- Beginning of bottom section -->
<div class="container_24 extra-wrap img-indent-bot"><article class="grid_4">
<h6>About Us</h6>
<ul>
	<li><a href="#">About Us</a></li>
	<li><a href="#">menu #1</a></li>
	<li><a href="#">menu #2</a></li>
	<li><a href="#">menu #3</a></li>
</ul>
</article><article class="grid_4">
<h6>Another column</h6>
<ul>
	<li><a href="#">menu #3</a></li>
	<li><a href="#">menu #4</a></li>
	<li><a href="#">menu #5</a></li>
	<li><a href="#">menu #6</a></li>
</ul>
</article><article class="grid_4 suffix_3">
<h6>Another column</h6>
<ul>
	<li><a href="#">menu #7</a></li>
	<li><a href="#">menu #8</a></li>
	<li><a href="#">menu #9</a></li>
</ul>
</article><article class="grid_8">
<h6>Subscribe us</h6>
<form id="newsletter-form" action="index.html" method="post">
<div><input type="text" name="search" /> <a class="button">Subscribe</a></div>
</form></article></div>
</aside></header>
<div class="main"><footer><!-- Defining the footer section of the page -->
Copyrighted © by Designzzz 2012    |    <a href="#">Privacy Policy</a></footer></div>

CSS code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

footer {
background:url(../images/border.png) 0 0 repeat-x;
color:#d4d4ca;
font-size:12px;
overflow:hidden;
padding:16px 0 15px;
width:100%
}
footer a {
color:#d4d4ca
}
input, select, textarea {
color:#5d5d60;
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
font-weight:400;
margin:0;
padding:0;
vertical-align:middle
}
#newsletter-form {
padding-top:10px
}
#newsletter-form div {
padding-bottom:10px
}
#newsletter-form input {
background:#393933;
border:1px solid #4c4c46;
border-right:0;
color:#a7a7a7;
padding:6px 5px;
width:189px
}
#newsletter-form .button {
background:#ebebeb;
border:1px solid #f8f8f6;
color:#d54c20;
cursor:pointer
}
#newsletter-form a {
color:#9b9b94
}

View Demo

Advertisement

Connect with us!


Related Stuff!

  1. 20 Free HTML5 CSS3 Web Templates
  2. Free Web Templates for Creating Dashboards and Admin Panels
  3. Creating a Bakery or Chef Web Design in Photoshop
  4. 20 Smooth Chocolaty Web Designs

Tags: , , , , , ,

One Response to “How to Design a Single Page HTML5 and CSS3 Web Layout”

  1. JohnK says:
    August 6, 2012 at 3:12 pm

    Cool theme. Nice work!

    Why have you used tiny graphics instead of coding backgrounds and borders in css?

    E.g., background:url(../images/block.png) 0 0 repeat;
    instead of
    background: hsla(0, 0%, 96%, 0.5);

    Reply

Leave a Reply

Powered by:

Designzzz.com