Adding revised footer demo (Closes #613)
Sérgio Gomes
Addy Osmani
parent
23ab494c01
commit
a48a9bd30e
|
|
@ -154,6 +154,15 @@ categories:
|
|||
- name: footer
|
||||
caption: Footer
|
||||
class: mdl-mega-footer / mdl-mini-footer
|
||||
snippets:
|
||||
- snippet_group:
|
||||
- caption: Mega footer
|
||||
file: mega-footer.html
|
||||
full_width: true
|
||||
- snippet_group:
|
||||
- caption: Mini footer
|
||||
file: mini-footer.html
|
||||
full_width: true
|
||||
- name: loading
|
||||
title: Loading
|
||||
description: Indicate loading and progress states.
|
||||
|
|
|
|||
|
|
@ -1,24 +0,0 @@
|
|||
/**
|
||||
* Copyright 2015 Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
.demo-page--footer {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.demo-page--footer .mdl-mega-footer,
|
||||
.demo-page--footer .mdl-mini-footer {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
|
@ -1,88 +0,0 @@
|
|||
<div class="demo-preview-block demo-page--footer">
|
||||
|
||||
<footer class="mdl-mega-footer">
|
||||
<div class="mdl-mega-footer--top-section">
|
||||
<div class="mdl-mega-footer--left-section">
|
||||
<!-- Content for the left section -->
|
||||
</div>
|
||||
<div class="mdl-mega-footer--right-section">
|
||||
<a href="#">App Status Dashboard</a>
|
||||
<a href="#">Terms of Service</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mdl-mega-footer--middle-section">
|
||||
|
||||
<div class="mdl-mega-footer--drop-down-section">
|
||||
<input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked>
|
||||
<h1 class="mdl-mega-footer--heading">Learning & Support</h1>
|
||||
<ul class="mdl-mega-footer--link-list">
|
||||
<li><a href="#">Resource Center</a></li>
|
||||
<li><a href="#">Help Center</a></li>
|
||||
<li><a href="#">Community</a></li>
|
||||
<li><a href="#">Learn with Google</a></li>
|
||||
<li><a href="#">Small Business Community</a></li>
|
||||
<li><a href="#">Think Insights</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="mdl-mega-footer--drop-down-section">
|
||||
<input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked>
|
||||
<h1 class="mdl-mega-footer--heading">Just for Developers</h1>
|
||||
<ul class="mdl-mega-footer--link-list">
|
||||
<li><a href="#">Google Developers</a></li>
|
||||
<li><a href="#">AdWords API</a></li>
|
||||
<li><a href="#">AdWords Scipts</a></li>
|
||||
<li><a href="#">AdWords Remarketing Tag</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="mdl-mega-footer--drop-down-section">
|
||||
<input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked>
|
||||
<h1 class="mdl-mega-footer--heading">Related Products</h1>
|
||||
<ul class="mdl-mega-footer--link-list">
|
||||
<li><a href="#">Analytics Standard</a></li>
|
||||
<li><a href="#">Shopping Ads</a></li>
|
||||
<li><a href="#">Trusted Store</a></li>
|
||||
<li><a href="#">AdSense</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="mdl-mega-footer--drop-down-section">
|
||||
<input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked>
|
||||
<h1 class="mdl-mega-footer--heading">More solutions from Google</h1>
|
||||
<ul class="mdl-mega-footer--link-list">
|
||||
<li><a href="#">Google for Advertising</a></li>
|
||||
<li><a href="#">Google for Business</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mdl-mega-footer--bottom-section">
|
||||
<div class="mdl-logo mdl-typography--subhead">
|
||||
<strong>Title</strong>
|
||||
</div>
|
||||
<ul class="mdl-mega-footer--link-list">
|
||||
<li><a href="#">Help</a></li>
|
||||
<li><a href="#">Privacy & Terms</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
|
||||
<footer class="mdl-mini-footer">
|
||||
<div class="mdl-mini-footer--left-section">
|
||||
<div class="mdl-logo mdl-typography--subhead">
|
||||
<strong>Title</strong>
|
||||
</div>
|
||||
<ul class="mdl-mini-footer--link-list">
|
||||
<li><a href="#">Help</a></li>
|
||||
<li><a href="#">Privacy & Terms</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mdl-mini-footer--right-section">
|
||||
<!-- Content for the right section -->
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<footer class="mdl-mega-footer">
|
||||
<div class="mdl-mega-footer--middle-section">
|
||||
|
||||
<div class="mdl-mega-footer--drop-down-section">
|
||||
<input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked>
|
||||
<h1 class="mdl-mega-footer--heading">Features</h1>
|
||||
<ul class="mdl-mega-footer--link-list">
|
||||
<li><a href="#">About</a></li>
|
||||
<li><a href="#">Terms</a></li>
|
||||
<li><a href="#">Partners</a></li>
|
||||
<li><a href="#">Updates</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="mdl-mega-footer--drop-down-section">
|
||||
<input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked>
|
||||
<h1 class="mdl-mega-footer--heading">Details</h1>
|
||||
<ul class="mdl-mega-footer--link-list">
|
||||
<li><a href="#">Specs</a></li>
|
||||
<li><a href="#">Tools</a></li>
|
||||
<li><a href="#">Resources</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="mdl-mega-footer--drop-down-section">
|
||||
<input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked>
|
||||
<h1 class="mdl-mega-footer--heading">Technology</h1>
|
||||
<ul class="mdl-mega-footer--link-list">
|
||||
<li><a href="#">How it works</a></li>
|
||||
<li><a href="#">Patterns</a></li>
|
||||
<li><a href="#">Usage</a></li>
|
||||
<li><a href="#">Products</a></li>
|
||||
<li><a href="#">Contracts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="mdl-mega-footer--drop-down-section">
|
||||
<input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked>
|
||||
<h1 class="mdl-mega-footer--heading">FAQ</h1>
|
||||
<ul class="mdl-mega-footer--link-list">
|
||||
<li><a href="#">Questions</a></li>
|
||||
<li><a href="#">Answers</a></li>
|
||||
<li><a href="#">Contact us</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mdl-mega-footer--bottom-section">
|
||||
<div class="mdl-logo mdl-typography--subhead">
|
||||
<strong>Title</strong>
|
||||
</div>
|
||||
<ul class="mdl-mega-footer--link-list">
|
||||
<li><a href="#">Help</a></li>
|
||||
<li><a href="#">Privacy & Terms</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<footer class="mdl-mini-footer">
|
||||
<div class="mdl-mini-footer--left-section">
|
||||
<div class="mdl-logo mdl-typography--subhead">
|
||||
<strong>Title</strong>
|
||||
</div>
|
||||
<ul class="mdl-mini-footer--link-list">
|
||||
<li><a href="#">Help</a></li>
|
||||
<li><a href="#">Privacy & Terms</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
Loading…
Reference in New Issue