Posted in
1077
12:31 am, April 1, 2022
Footer Design and Redesign
I never usually look this far down on the site, but its a bit average...
Lets fix it!
Some simple changes
Just a few elements added and moved around a bit.
Added another row to the footer and the logo to the left, and then the links into cards and list groups.
Not sure if i like the list group and card sections there, seems to be a bit too boxy. Might change it to just flat lists.
Still looks a bit better than the non formatted footer.
HTML
<!-- current or old footer code -->
<div class="footer-wrap">
<div class="wrap">
<div class="container">
<div class="footer">
<div class="row">
<div class="col">
<h4>Quick Links</h4>
<ul class="quick-links">
<li><a href="/view/content/udOmD/privacy/">Privacy</a></li>
<li><a href="/hits/">Top Pages</a></li>
<li><a href="/views/">Top 100 Pages this Week</a></li>
<li><a href="/top-referrers/">Referrers</a></li>
</ul>
</div>
</div>
<div class="page-load-time mb-3 text-center">
Load Time: 0.1536 sec
</div>
<div class="page-load-time mb-3 text-center">
🦴 Core Custom [10.02.21] 🛡
</div>
</div>
</div>
</div>
</div>
<!-- new updated footer code -->
<div class='footer-wrap-new'>
<div class='wrap'>
<div class='container'>
<div class='footer'>
<div class='row'>
<div class='col'>
<img src="https://kruxor.com/images/kruxor_logo_small.png" class="footer-logo" />
</div>
<div class='col'>
<div class='card'>
<h5 class='card-header'>Quick Links</h5>
<div class='card-body'>
<div class="list-group">
<a href='/view/content/udOmD/privacy/' class="list-group-item">Privacy</a>
<a href='/hits/' class="list-group-item">Top Pages</a>
<a href='/views/' class="list-group-item">Top 100 Pages this Week</a>
<a href='/top-referrers/' class="list-group-item">Referrers</a>
</div>
</div>
</div>
</div>
<div class='col'>
<div class='card'>
<h5 class='card-header'>Sections</h5>
<div class='card-body'>
<div class="list-group">
<a href='/section/code/' class="list-group-item">Code</a>
<a href='/section/content/' class="list-group-item">Articles</a>
<a href='/section/css_reference/' class="list-group-item">CSS</a>
<a href='/section/linx/' class="list-group-item">Linx</a>
<a href='/view/content/ZFxT4/tools/' class="list-group-item">Tools</a>
</div>
</div>
</div>
</div>
</div>
<div class='page-load-time mb-3 text-center'>
</div>
<div class='page-load-time mb-3 text-center'>
</div>
</div>
</div>
</div>
</div>
<div class="below-footer">
<div class='container'>
<div class='row'>
<div class='col text-left'>
<span class='twitter-link'><a href='https://twitter.com/kruxor' target='_blank'>@kruxor</a></span>
</div>
<div class='col text-center'>
<span class='page-load-time'>Load Time: 0.0308 sec</span>
</div>
<div class='col text-end'>
<span class='site-version'>🦴 Core Custom [10.02.21] 🛡</span>
</div>
</div>
</div>
</div>
CSS
/* padding and some colour changes */
.footer-wrap-new {
padding:40px 0;
background:#1e1e1e;
}
.below-footer {
padding:20px 0;
background:#161616;
color:#666;
}
.below-footer a {
color:#666;
}
Scripts
<meta name="color-scheme" content="dark light">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.0.1/dist/css/bootstrap-dark.min.css" />
View Statistics
This Week
117
This Month
495
This Year
1077
Add Comment
Other Items in html
share to twitter html link only
linked in share link html only, linkedin, linked-in
Facebook HTML for Sharing a Link
Footer Design and Redesign
Regions of New Zealand - In Dropdown Form
content editable p tag with spell check enabled
get directions from google maps form embed
Common and Uncommon Meta Tag's and Social Meta Tags
Input Suggestions using a datalist
Add custom symbol to ul li list and align text items
using the kbd html tag
twitter social sharing meta tags
test image url that always changes unsplash placeholder
set the amount of lines to show in a textarea field
Scroll down indicator css javascript and html
a page with two images
Aligning Images in TinyMCE or Floating them left and right (code)
test page for the custom css 12 grid used on this site
easy twitter embed code
Custom JS Tabs - No Jquery or Jquery UI
scroll to top html css and js
hide parts of a form until the 1st item is selected
load a youtube video in a fancybox modal
add google captcha to enable and disable a form button
template for testing and live reloading html files
toggle div function with chevron up down toggle
Bootstrap Card Formatting HTML and CSS - Header and Footer
Applied Accessibility - Tab Index
Applied Accessibility - Access Keys
Dropdown Box with Searchable Text
meta keywords tag
meta description tag
favicon code meta tag
foundation includes cdnjs
Form elements New Zealand region list
video embed no controls
video embed tag
video embed full screen all screen sizes
del
youtube embed iframe
take full page screenshot screencapture using chrome dev tools
flexbox layout template
simple dropdown navigation ul li css
responsive viewport meta tag (responsive meta tag)
youtube embed no controls auto play iframe
make all links target new window
lorem ipsum
copy image to data uri using chrome base64 encode
youtube extract thumbnail from video link
using foundation 6.4 xy grid basics
Related Search Terms
Other Categories in Code
alpine js apps c css images site bugs slick slider testing apache api apps asp bat bootstrap bootstrap templates core css css grid design elements docker emoji fancybox fonts foundation framework gimp git html icons ideas images javascript jquery js linux mac nginx node php php functions php simple html dom pi400 python react sections site bugs site documentation sql sqlite ssh sublime svg templates tools virtual box vscode webdev windows wordpress