UNPKG

16.9 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="msapplication-tap-highlight" content="no">
8 <meta name="description" content="Materialize is a modern responsive CSS framework based on Material Design by Google. ">
9 <title>Footer - Materialize</title>
10 <!-- Favicons-->
11 <link rel="apple-touch-icon-precomposed" href="images/favicon/apple-touch-icon-152x152.png">
12 <meta name="msapplication-TileColor" content="#FFFFFF">
13 <meta name="msapplication-TileImage" content="images/favicon/mstile-144x144.png">
14 <link rel="icon" href="images/favicon/favicon-32x32.png" sizes="32x32">
15 <!-- Android 5 Chrome Color-->
16 <meta name="theme-color" content="#EE6E73">
17 <!-- CSS-->
18 <link href="css/prism.css" rel="stylesheet">
19 <link href="css/ghpages-materialize.css" type="text/css" rel="stylesheet" media="screen,projection">
20 <link href="http://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet" type="text/css">
21 <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
22 <script>
23 window.liveSettings = {
24 api_key: "a0b49b34b93844c38eaee15690d86413",
25 picker: "bottom-right",
26 detectlang: true,
27 dynamic: true,
28 autocollect: true
29 };
30 </script>
31 <script src="//cdn.transifex.com/live.js"></script>
32 </head>
33 <body>
34 <header>
35 <nav class="top-nav">
36 <div class="container">
37 <div class="nav-wrapper"><a class="page-title">Footer</a></div>
38 </div>
39 </nav>
40 <div class="container"><a href="#" data-activates="nav-mobile" class="button-collapse top-nav full hide-on-large-only"><i class="material-icons">menu</i></a></div>
41 <ul id="nav-mobile" class="side-nav fixed">
42 <li class="logo"><a id="logo-container" href="http://materializecss.com/" class="brand-logo">
43 <object id="front-page-logo" type="image/svg+xml" data="res/materialize.svg">Your browser does not support SVG</object></a></li>
44 <li class="search">
45 <div class="search-wrapper card">
46 <input id="search"><i class="material-icons">search</i>
47 <div class="search-results"></div>
48 </div>
49 </li>
50 <li class="bold"><a href="about.html" class="waves-effect waves-teal">About</a></li>
51 <li class="bold"><a href="getting-started.html" class="waves-effect waves-teal">Getting Started</a></li>
52 <li class="no-padding">
53 <ul class="collapsible collapsible-accordion">
54 <li class="bold"><a class="collapsible-header waves-effect waves-teal">CSS</a>
55 <div class="collapsible-body">
56 <ul>
57 <li><a href="color.html">Color</a></li>
58 <li><a href="grid.html">Grid</a></li>
59 <li><a href="helpers.html">Helpers</a></li>
60 <li><a href="media-css.html">Media</a></li>
61 <li><a href="sass.html">Sass</a></li>
62 <li><a href="shadow.html">Shadow</a></li>
63 <li><a href="table.html">Table</a></li>
64 <li><a href="css-transitions.html">Transitions</a></li>
65 <li><a href="typography.html">Typography</a></li>
66 </ul>
67 </div>
68 </li>
69 <li class="bold"><a class="collapsible-header active waves-effect waves-teal">Components</a>
70 <div class="collapsible-body">
71 <ul>
72 <li><a href="badges.html">Badges</a></li>
73 <li><a href="buttons.html">Buttons</a></li>
74 <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
75 <li><a href="cards.html">Cards</a></li>
76 <li><a href="chips.html">Chips</a></li>
77 <li><a href="collections.html">Collections</a></li>
78 <li class="active"><a href="footer.html">Footer</a></li>
79 <li><a href="forms.html">Forms</a></li>
80 <li><a href="icons.html">Icons</a></li>
81 <li><a href="navbar.html">Navbar</a></li>
82 <li><a href="pagination.html">Pagination</a></li>
83 <li><a href="preloader.html">Preloader</a></li>
84 </ul>
85 </div>
86 </li>
87 <li class="bold"><a class="collapsible-header waves-effect waves-teal">JavaScript</a>
88 <div class="collapsible-body">
89 <ul>
90 <li><a href="carousel.html">Carousel</a></li>
91 <li><a href="collapsible.html">Collapsible</a></li>
92 <li><a href="dialogs.html">Dialogs</a></li>
93 <li><a href="dropdown.html">Dropdown</a></li>
94 <li><a href="media.html">Media</a></li>
95 <li><a href="modals.html">Modals</a></li>
96 <li><a href="parallax.html">Parallax</a></li>
97 <li><a href="pushpin.html">Pushpin</a></li>
98 <li><a href="scrollfire.html">ScrollFire</a></li>
99 <li><a href="scrollspy.html">Scrollspy</a></li>
100 <li><a href="side-nav.html">SideNav</a></li>
101 <li><a href="tabs.html">Tabs</a></li>
102 <li><a href="transitions.html">Transitions</a></li>
103 <li><a href="waves.html">Waves</a></li>
104 </ul>
105 </div>
106 </li>
107 </ul>
108 </li>
109 <li class="bold"><a href="http://materializecss.com/mobile.html" class="waves-effect waves-teal">Mobile</a></li>
110 <li class="bold"><a href="showcase.html" class="waves-effect waves-teal">Showcase</a></li>
111 </ul>
112 </header>
113 <main><div class="container">
114 <div class="row">
115
116 <div class="col s12 m9 l10">
117
118 <!-- Footer Section-->
119 <div id="footer" class="section scrollspy">
120 <p class="caption">Footers are a great way to organize a lot of site navigation and information at the end of a page. This is where the user will look once they have finished scrolling through the current page or are looking for additional information about your website. </p>
121 <h2 class="header">Introduction</h2>
122 <p>Note: We use flexbox to structure our html so that the footer is always on the bottom of the page. It is important to keep the structure of your page within the 3 HTML5 tags: <code class="language-markup">&lt;header></code>, <code class="language-markup">&lt;main></code>, <code class="language-markup">&lt;footer></code></p>
123 <footer class="page-footer example">
124 <div class="container">
125 <div class="row">
126 <div class="col l6 s12">
127 <h5 class="white-text">Footer Content</h5>
128 <p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
129 </div>
130 <div class="col l4 offset-l2 s12">
131 <h5 class="white-text">Links</h5>
132 <ul>
133 <li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
134 <li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
135 <li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
136 <li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
137 </ul>
138 </div>
139 </div>
140 </div>
141 <div class="footer-copyright">
142 <div class="container">
143 © 2014 Copyright Text
144 <a class="grey-text text-lighten-4 right" href="#!">More Links</a>
145 </div>
146 </div>
147 </footer>
148 <div class="row">
149 <div class="col s12">
150 <br>
151 <pre><code class="language-markup">
152 &lt;footer class="page-footer">
153 &lt;div class="container">
154 &lt;div class="row">
155 &lt;div class="col l6 s12">
156 &lt;h5 class="white-text">Footer Content&lt;/h5>
157 &lt;p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.&lt;/p>
158 &lt;/div>
159 &lt;div class="col l4 offset-l2 s12">
160 &lt;h5 class="white-text">Links&lt;/h5>
161 &lt;ul>
162 &lt;li>&lt;a class="grey-text text-lighten-3" href="#!">Link 1&lt;/a>&lt;/li>
163 &lt;li>&lt;a class="grey-text text-lighten-3" href="#!">Link 2&lt;/a>&lt;/li>
164 &lt;li>&lt;a class="grey-text text-lighten-3" href="#!">Link 3&lt;/a>&lt;/li>
165 &lt;li>&lt;a class="grey-text text-lighten-3" href="#!">Link 4&lt;/a>&lt;/li>
166 &lt;/ul>
167 &lt;/div>
168 &lt;/div>
169 &lt;/div>
170 &lt;div class="footer-copyright">
171 &lt;div class="container">
172 © 2014 Copyright Text
173 &lt;a class="grey-text text-lighten-4 right" href="#!">More Links&lt;/a>
174 &lt;/div>
175 &lt;/div>
176 &lt;/footer>
177 </code></pre>
178 </div>
179 </div>
180
181 </div> <!-- End of footer section -->
182
183 <div id="sticky-footer" class="section scrollspy">
184 <h2 class="header">Sticky Footer</h2>
185 <p>A sticky footer always stays on the bottom of the page regardless of how little content is on the page. However, this footer will be pushed down if there is a lot of content, so it is different from a fixed footer. Add the following code to your CSS file.</p>
186 <p>Note: This may cause issues in Internet Explorer which has weak support for flexbox.</p>
187 </div>
188
189 <pre><code class="language-css">
190 body {
191 display: flex;
192 min-height: 100vh;
193 flex-direction: column;
194 }
195
196 main {
197 flex: 1 0 auto;
198 }
199 </code></pre>
200
201 </div>
202
203 <div class="col hide-on-small-only m3 l2">
204 <div class="toc-wrapper">
205 <div class="buysellads hide-on-small-only">
206 <!-- CarbonAds Zone Code -->
207 <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=materializecss" id="_carbonads_js"></script>
208 </div>
209 <div style="height: 1px;">
210 <ul class="section table-of-contents">
211 <li><a href="#footer">Footer</a></li>
212 <li><a href="#sticky-footer">Sticky Footer</a></li>
213 </ul>
214 </div>
215 </div>
216 </div>
217
218 </div>
219</div>
220
221
222 </main> <footer class="page-footer">
223 <div class="container">
224 <div class="row">
225 <div class="col l4 s12">
226 <h5 class="white-text">Help Materialize Grow</h5>
227 <p class="grey-text text-lighten-4">We are a team of college students working on this project like it's our full time job. Any amount would help support and continue development on this project and is greatly appreciated.</p>
228 <form id="paypal-donate" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
229<input type="hidden" name="cmd" value="_s-xclick">
230<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
231">
232<button class="btn waves-effect waves-light red lighten-3" type="submit" name="action" alt="PayPal - The safer, easier way to pay online!">Donate Now
233</button>
234</form>
235
236 </div>
237 <div class="col l4 s12">
238 <h5 class="white-text">Join the Discussion</h5>
239 <p class="grey-text text-lighten-4">We have a Gitter chat room set up where you can talk directly with us. Come in and discuss new features, future goals, general problems or questions, or anything else you can think of.</p>
240 <a class="btn waves-effect waves-light red lighten-3" target="_blank" href="https://gitter.im/Dogfalo/materialize">Chat</a>
241 </div>
242 <div class="col l4 s12" style="overflow: hidden;">
243 <h5 class="white-text">Connect</h5>
244 <iframe src="http://ghbtns.com/github-btn.html?user=dogfalo&repo=materialize&type=watch&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
245 <br>
246 <a href="https://twitter.com/MaterializeCSS" class="twitter-follow-button" data-show-count="true" data-size="large" data-dnt="true">Follow @MaterializeCSS</a>
247 <br>
248 <div class="g-follow" data-annotation="bubble" data-height="24" data-href="https://plus.google.com/108619793845925798422" data-rel="publisher"></div>
249 </div>
250 </div>
251 </div>
252 <div class="footer-copyright">
253 <div class="container">
254 © 2014-2017 Materialize, All rights reserved.
255 <a class="grey-text text-lighten-4 right" href="https://github.com/Dogfalo/materialize/blob/master/LICENSE">MIT License</a>
256 </div>
257 </div>
258 </footer>
259
260 <!-- Scripts-->
261 <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
262 <script>if (!window.jQuery) { document.write('<script src="bin/jquery-2.1.1.min.js"><\/script>'); }
263 </script>
264 <script src="js/jquery.timeago.min.js"></script>
265 <script src="js/prism.js"></script>
266 <script src="jade/lunr.min.js"></script>
267 <script src="jade/search.js"></script>
268 <script src="bin/materialize.js"></script>
269 <script src="js/init.js"></script>
270 <!-- Twitter Button -->
271 <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
272
273 <!-- Google Plus Button-->
274 <script src="https://apis.google.com/js/platform.js" async defer></script>
275
276 <!-- Google Analytics -->
277 <script>
278 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
279 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
280 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
281 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
282
283 ga('create', 'UA-56218128-1', 'auto');
284 ga('require', 'displayfeatures');
285 ga('send', 'pageview');
286 </script>
287
288 </body>
289</html>
\No newline at end of file