← All elements
<footer class="fl"><div class="br"><b>Purely</b><span>Pure CSS, always.</span></div><div><h4>Library</h4><a>Buttons</a><a>Cards</a></div><div><h4>Learn</h4><a>Guides</a><a>About</a></div></footer>About this layout
A compact footer with a brand block and two link columns that nudge right on hover.
How it works
A flex footer holds a brand block and two columns of links. The links shift right a few pixels on hover and change colour, and headings use small uppercase letters.
Ways to customise it
- Add more columns.
- Change the link text.
- Switch the accent colour.
Good to know
Use a footer element and real links. Keep link contrast on the dark background above the minimum.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.