-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfooters.html
169 lines (165 loc) · 5.93 KB
/
footers.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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tuxedo CSS - Footers</title>
<link rel="stylesheet" href="css/styles.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="js/tuxedo.js" charset="utf-8"></script>
</head>
<body>
<nav class="nav-dark fixed tablet-flex">
<header>
<a href="index.html"><img src="img/logo-thick-light.svg" alt="Tuxedo Logo"></a>
</header>
<ul class="mobile-nav flex-center">
<div class="hamburger"></div>
</ul>
<div class="flyout">
<div class="bar">
<header class="f-col-4">
<a href="index.html"><img src="img/logo-thick-light.svg" alt="Tuxedo Logo">
</a>
</header>
<div class="close f-col-1"></div>
</div>
<ul class="flyout-menu">
<li><a href="start.html">Getting Started</a></li>
<li class="fly-dropdown">Docs +
<ul class="dropdown-menu">
<li><a href="animations.html">Animations</a></li>
<li><a href="buttons.html">Buttons</a></li>
<li><a href="colors.html">Colors</a></li>
<li><a href="fonts.html">Fonts</a></li>
<li><a href="footers.html">Footers</a></li>
<li><a href="forms.html">Forms</a></li>
<li><a href="grid.html">Grid</a></li>
<li><a href="helpers.html">Helpers</a></li>
<li><a href="hero.html">Hero</a></li>
<li><a href="nav.html">Nav</a></li>
<li><a href="sidebar.html">Sidebar</a></li>
<li><a href="threejs.html">Three.js</a></li>
</ul>
</li>
<li><a href="about.html">About</a></li>
</ul>
</div>
</nav>
<div class="side-bar bg-dark">
<head>
<a href="index.html"><img src="img/thin-logo-large.svg" alt="tuxedo logo"></a>
</head>
<ul class="underline-light">
<li><a href="start.html">Getting Started</a></li>
<li><a href="animations.html">Animations</a></li>
<li><a href="buttons.html">Buttons</a></li>
<li><a href="colors.html">Colors</a></li>
<li><a href="fonts.html">Fonts</a></li>
<li class="active"><a href="footers.html">Footers</a></li>
<li><a href="forms.html">Forms</a></li>
<li><a href="grid.html">Grid</a></li>
<li><a href="helpers.html">Helpers</a></li>
<li><a href="hero.html">Hero</a></li>
<li><a href="nav.html">Nav</a></li>
<li><a href="sidebar.html">Sidebar</a></li>
<li><a href="threejs.html">Three.js</a></li>
</ul>
<ul>
<li><a href="about.html">About</a></li>
</ul>
</div>
<div class="side-bar-content">
<h1 class="text-dark underline-dark">Footers</h1>
<p>
A footer is a great way to add additional content to your web apps. Tuxedo's footer is simple, straightforward, and easily customized. Give it a whirl.
</p>
<h3 class="text-dark">Basic Footer</h3>
<p>
To use the footer place it at the very bottom of your <code>body</code> tag below your other content.
</p>
<div class="code-example">
<footer class="f-row bg-dark text-light responsive">
<small class="f-col-3 flex-center">Item 1
</small>
<small class="f-col-3 flex-center">Item 2
</small>
<small class="f-col-3 flex-center">Item 3
</small>
<small class="f-col-3 flex-center"> Item 4
</small>
</footer>
</div>
<div class="code">
<xmp>
<footer class="f-row bg-dark text-light responsive">
<small class="f-col-3 flex-center">Item 1</small>
<small class="f-col-3 flex-center">Item 2</small>
<small class="f-col-3 flex-center">Item 3</small>
<small class="f-col-3 flex-center"> Item 4</small>
</footer>
</xmp>
</div>
<h3 class="text-dark">Double Decker Footer</h3>
<p>
This option is great if there are a few more items you want to add to your footer.
</p>
<div class="code-example">
<footer>
<div class="f-row responsive bg-dark text-light">
<small class="f-col-3 flex-center">Item 1
</small>
<small class="f-col-3 flex-center">Item 2
</small>
<small class="f-col-3 flex-center">Item 3
</small>
<small class="f-col-3 flex-center"> Item 4
</small>
</div>
<div class="f-row responsive">
<h5 class="f-col-3 flex-center">Link 1
</h5>
<h5 class="f-col-3 flex-center">Link 2
</h5>
<h5 class="f-col-3 flex-center">Link 3
</h5>
<h5 class="f-col-3 flex-center"> Link 4
</h5>
</div>
</footer>
</div>
<div class="code">
<xmp>
<footer>
<div class="f-row responsive bg-dark text-light">
<small class="f-col-3 flex-center">Item 1
</small>
<small class="f-col-3 flex-center">Item 2
</small>
<small class="f-col-3 flex-center">Item 3
</small>
<small class="f-col-3 flex-center"> Item 4
</small>
</div>
<div class="f-row responsive">
<h5 class="f-col-3 flex-center">Link 1
</h5>
<h5 class="f-col-3 flex-center">Link 2
</h5>
<h5 class="f-col-3 flex-center">Link 3
</h5>
<h5 class="f-col-3 flex-center"> Link 4
</h5>
</div>
</footer>
</xmp>
</div>
</div>
<footer class="f-row responsive">
<small class="f-col-1 flex-center">2017 Erica Nafziger, All rights reserved.
</small>
<small class="f-col-1 flex-center">MIT License
</small>
</footer>
</body>
</html>