forked from coreysyms/foundationStickyFooter
-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo.html
147 lines (111 loc) · 5.09 KB
/
demo.html
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
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width" />
<title>Sticky Footer Example With Foundation</title>
<!-- Included CSS Files (Uncompressed) -->
<!--
<link rel="stylesheet" href="foundation.css">
-->
<!-- Included CSS Files (Compressed) -->
<link rel="stylesheet" href="foundation.min.css">
<link rel="stylesheet" href="app.css">
<script src="modernizr.foundation.js"></script>
</head>
<body>
<!-- Header and Nav -->
<div class="row">
<div class="three columns">
<h1><img src="http://placehold.it/400x100&text=Logo" /></h1>
</div>
<div class="nine columns">
<ul class="nav-bar right">
<li><a href="#">Nav</a></li>
<li><a href="#">Nav</a></li>
<li><a href="#">Nav</a></li>
<li><a href="#">Nav</a></li>
<li><a href="#">Nav</a></li>
</ul>
</div>
</div>
<!-- End Header and Nav -->
<!-- Two-up Content Blocks -->
<div class="row">
<div class="five columns">
<h4>Sticky Footer.</h4>
<p>The Sticky footer will use the <b><footer></b> tag and make it "stick" to the bottom of the page. </p><p>You may pre-style the <b><footer></b> in your css file. The stiky footer will remember your original styles if the page is not long enough to "stick" to the bottom of the page! Even after resize! </p><p>There are no requirements for CSS! You don't even need a fixed height, or a wrapper!</p>
<p>It even works in mobile! Go on, check it out by scaling your browser or opening on a mobile device!</p>
</div>
<div class="seven columns">
<h4>Right Side.</h4>
<p><input type="text" value="Name" class="six"></p>
<p><input type="text" value="Email" class="six"></p>
<p><input type="text" value="Phone" class="six"></p>
<p><textarea style="height:100px;">Message</textarea></p>
<p><input type="submit" class="button radius"></p>
</div>
</div>
<!-- Footer -->
<footer>
<div class="row">
<hr />
<div class="twelve columns">
<div class="row">
<div class="five columns">
<p><img src="http://placehold.it/50x50&text=logo" /></p>
<p>This is a Sticky Footer.<br />It will stick to the bottom of the page onload().<br />It will also re-stick after a window resize or DOM change event.</p>
<p>© Copyright | <a href="#">Privacy Policy</a></p>
</div>
<div class="two columns">
<p><a href="#">Nav</a></p>
<p><a href="#">Nav</a></p>
<p><a href="#">Nav</a></p>
<p><a href="#">Nav</a></p>
<p><a href="#">Nav</a></p>
</div>
<div class="two columns">
<p><img src="http://placehold.it/25x25" align="absmiddle" /> Twitter</p>
<p><img src="http://placehold.it/25x25" align="absmiddle" /> Facebook</p>
<p><img src="http://placehold.it/25x25" align="absmiddle" /> Email</p>
</div>
<div class="three columns">
<p>Newsletter:</p>
<p><input type="text" value="Email Address"><input type="submit" class="button radius right"></p>
</div>
</div>
</div>
</div>
</footer>
<!-- Included JS Files (Uncompressed) -->
<!--
<script src="javascripts/jquery.js"></script>
<script src="javascripts/jquery.foundation.mediaQueryToggle.js"></script>
<script src="javascripts/jquery.foundation.forms.js"></script>
<script src="javascripts/jquery.foundation.reveal.js"></script>
<script src="javascripts/jquery.foundation.orbit.js"></script>
<script src="javascripts/jquery.foundation.navigation.js"></script>
<script src="javascripts/jquery.foundation.buttons.js"></script>
<script src="javascripts/jquery.foundation.tabs.js"></script>
<script src="javascripts/jquery.foundation.tooltips.js"></script>
<script src="javascripts/jquery.foundation.accordion.js"></script>
<script src="javascripts/jquery.placeholder.js"></script>
<script src="javascripts/jquery.foundation.alerts.js"></script>
<script src="javascripts/jquery.foundation.topbar.js"></script>
<script src="javascripts/jquery.foundation.joyride.js"></script>
<script src="javascripts/jquery.foundation.clearing.js"></script>
<script src="javascripts/jquery.foundation.magellan.js"></script>
-->
<!-- Included JS Files (Compressed) -->
<script src="jquery.js"></script>
<script src="foundation.min.js"></script>
<script src="jquery.stickyFooter.js"></script>
<!-- Initialize JS Plugins -->
<script src="app.js"></script>
</body>
</html>