Footer
Footer HTML:
<footer>
<div class="footer-sitename">
<a><h3>Site Name Here</h3></a>
<a><h3>Some extra text here if wanted (else delete me)</h3></a>
</div>
<div class="footer-items">
<a href="your-link-here.com"><h3>Item 1</h3></a>
<a href="your-link-here.com"><h3>Item 2</h3></a>
<a href="your-link-here.com"><h3>Item 3</h3></a>
</div>
<a><h3 class="copyright">Copyright {year} - {creator}</h3></a>
</footer>
Footer with image HTML:
<footer>
<div class="footer-sitename">
<imgsrc="link.to.logo"/>
</div>
<div class="footer-items">
<a href="your-link-here.com"><h3>Item 1</h3></a>
<a href="your-link-here.com"><h3>Item 2</h3></a>
<a href="your-link-here.com"><h3>Item 3</h3></a>
</div>
<a><h3 class="copyright">Copyright {year} - {creator}</h3></a>
</footer>
<footer>
<div class="footer-sitename">
<a><h3>Site Name Here</h3></a>
<a><h3>Some extra text here if wanted (else delete me)</h3></a>
</div>
<div class="footer-items">
<a href="your-link-here.com"><h3>Item 1</h3></a>
<a href="your-link-here.com"><h3>Item 2</h3></a>
<a href="your-link-here.com"><h3>Item 3</h3></a>
</div>
<a><h3 class="copyright">Copyright {year} - {creator}</h3></a>
</footer>
Footer with image HTML:
<footer>
<div class="footer-sitename">
<imgsrc="link.to.logo"/>
</div>
<div class="footer-items">
<a href="your-link-here.com"><h3>Item 1</h3></a>
<a href="your-link-here.com"><h3>Item 2</h3></a>
<a href="your-link-here.com"><h3>Item 3</h3></a>
</div>
<a><h3 class="copyright">Copyright {year} - {creator}</h3></a>
</footer>
Navigation CSS (Static Colors):
footer {
height : 200px ; /*Dont forget that that if this is changed then change all the other values for height as well!*/
background-color : #2f2f2f ; /*Just the background color*/
}
.footer-items {
display : flex ;
justify-content : flex-end ;
flex-wrap : wrap ;
flex-direction : column ;
height : 180px ; /*If you changed the height change this to the new height - 30px*/
}
.footer-items a {
display : block ;
text-decoration : none ;
text-align : right ;
color : #FFF ;
height : 33% ; /*change this depending on the ammount of items you have (100% devided by the amount of items = this heigh)*/
}
.footer-items h3, .footer-sitename h3 {
padding-top : 20px ;
padding-right : 10px ;
}
.footer-sitename {
float : left ;
text-align : left ;
height : 170px ; /*If you changed the height change this to the new height - 30px*/
}
.footer-items .copyright {
font-size : medium ;
text-align : center ;
}
.footer-items img {
margin-left : 10px ; /*Only needed if you have a logo in your footer*/
}
footer {
height : 200px ; /*Dont forget that that if this is changed then change all the other values for height as well!*/
background-color : #2f2f2f ; /*Just the background color*/
}
.footer-items {
display : flex ;
justify-content : flex-end ;
flex-wrap : wrap ;
flex-direction : column ;
height : 180px ; /*If you changed the height change this to the new height - 30px*/
}
.footer-items a {
display : block ;
text-decoration : none ;
text-align : right ;
color : #FFF ;
height : 33% ; /*change this depending on the ammount of items you have (100% devided by the amount of items = this heigh)*/
}
.footer-items h3, .footer-sitename h3 {
padding-top : 20px ;
padding-right : 10px ;
}
.footer-sitename {
float : left ;
text-align : left ;
height : 170px ; /*If you changed the height change this to the new height - 30px*/
}
.footer-items .copyright {
font-size : medium ;
text-align : center ;
}
.footer-items img {
margin-left : 10px ; /*Only needed if you have a logo in your footer*/
}