1+ /*
2+ # Footer
3+
4+ ```
5+ <div class="footer background dark-grey">
6+ <div class="box-container container">
7+ <div class="box small">
8+ <span class="box-title">API ENGINE</span>
9+ <ul class="footer-links">
10+ <li><a href="">HOME</a></li>
11+ <li><a href="">PRICING</a></li>
12+ <li><a href="">FEATURES</a></li>
13+ </ul>
14+ </div>
15+ <div class="box small">
16+ <span class="box-title">OPEN SOURCE</span>
17+ <p class="footer-desc">The API Engine team are active in the Open Source community.</p>
18+ <p class="footer-desc">Visit our Open Source home page on Github to find out more about our Open Source projects .</p>
19+ <ul class="footer-links">
20+ <li><a href="">API ENGINE ON GITHUB</a>
21+ </ul>
22+ </div>
23+ <div class="box small">
24+ <span class="box-title">HELP</span>
25+ <ul class="footer-links">
26+ <li><a href="">GETTING STARTED</a></li>
27+ <li><a href="">CREATING APIS</a></li>
28+ <li><a href="">MANAGING APIS</a></li>
29+ <li><a href="">COLLABORATORS</a></li>
30+ </ul>
31+ </div>
32+ <div class="box large last">
33+ <span class="box-title">CONTACT</span>
34+ <form>
35+ <input type="text" />
36+ <input type="text" />
37+ <textarea></textarea>
38+ <button class="btn btn-blue">Submit</button>
39+
40+ </form>
41+
42+ </div>
43+ <div style="clear: both;"></div>
44+ </div>
45+ <div class="footer-terms-container">
46+ <ul class="footer-terms">
47+ <li><a href="">Privacy</a></li>
48+ <li><a href="">Privacy</a></li>
49+ <li><a href="">Privacy</a></li>
50+ <li class="last"><a href="">Privacy</a></li>
51+ </ul>
52+ <div style="clear: both;"></div>
53+
54+ </div>
55+ <div class="footer-copyright">
56+ Api Engine Inc, Copyright 2012
57+ </div>
58+ </div>
59+ ```
60+
61+ */
62+ .footer .box-container {
63+ padding : 50px 0 ;
64+ }
65+ .footer .box-container .box .last {
66+ margin-right : 0 ;
67+ }
68+ .footer .box {
69+ float : left;
70+ margin-right : 40px ;
71+ min-height : 50px ;
72+ }
73+ .footer .box .large {
74+ width : 352px ;
75+
76+ }
77+ .footer .box-title {
78+ color : # eee ;
79+ font-size : 20px ;
80+ font-family : 'Nexa Bold' ;
81+ margin-bottom : 25px ;
82+ display : inline-block;
83+ }
84+ .footer-links {
85+ margin : 0 ;
86+ padding : 0 ;
87+ list-style : none;
88+ }
89+ .footer-desc {
90+ margin : 0 ;
91+ margin-bottom : 25px ;
92+ color : # eee ;
93+ font-size : 14px ;
94+ }
95+ .footer-links li a {
96+ color : # fed563 ;
97+ font-size : 16px ;
98+ font-family : 'Nexa' ;
99+ }
100+ .footer-links li {
101+ margin-bottom : 25px ;
102+ }
103+ .footer .box .small {
104+ width : 184px ;
105+ }
106+
107+ .footer form input {
108+ width : 346px ;
109+ margin-bottom : 16px ;
110+ }
111+ .footer form textarea {
112+ margin-bottom : 16px ;
113+ width : 346px ;
114+ height : 150px ;
115+ }
116+ .footer-terms-container {
117+ text-align : center;
118+ margin-bottom : 50px ;
119+ }
120+ .footer-terms {
121+ list-style : none;
122+ margin : 0 ;
123+ padding : 0 ;
124+ display : inline-block;
125+ }
126+ .footer-terms li {
127+ float : left;
128+ margin-right : 40px ;
129+ }
130+ .footer-terms li .last {
131+ margin-right : 0 ;
132+ }
133+ .footer-terms li a {
134+
135+ color : # fed563 ;
136+ font-size : 16px ;
137+ font-family : 'Nexa' ;
138+ }
139+
140+ .footer-copyright {
141+ text-align : center;
142+ font-family : 'Nexa' ;
143+ color : # eee ;
144+ padding-bottom : 50px ;
145+ }
0 commit comments