I didn’t want to make my footer really complex, so I simply coded it like this:

<footer>

There are only to <p> tags with a <br> tag to separate them. &copy; is the html way of writing the copyright logo. The <em> tag is the standard way of expressing italicised text and I used this to emphasise the point I was trying to make. This only appears on the home page and the events page, with both have asterisks aiming people to read this.

<P>Created by Daniel Tooley &copy;2013</P>
<br/>
<p><em>*We will not be liable for any damage to person or vehicle, nor loss of life</em></p>
<br/>
<p>

</footer>

Here is the css that went with it:

footer{

I set a clear attribute so that it didn’t conflict with anything around it.
clear:both;
Width is 100% so that it stretches right across the container.
width:100%;
Height is 120px to accomodate the text.
height:120px;
I’ve set the borders at 2px, and used the same box sizing rules as before, allowing me to have padding that doesn’t increase the size of the div.
border: 2px;
border-style:solid;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding:3.75%;
The background colour is the same gradient as I used in the footer, and again I’ve added a yellow background as well so that when IE can’t read the gradients it pushes out a yellow background instead.
background-color:#FF3;
background-image: linear-gradient(bottom, rgb(255,255,5) 10%, rgb(224,224,9) 55%);
background-image: -o-linear-gradient(bottom, rgb(255,255,5) 10%, rgb(224,224,9) 55%);
background-image: -moz-linear-gradient(bottom, rgb(255,255,5) 10%, rgb(224,224,9) 55%);
background-image: -webkit-linear-gradient(bottom, rgb(255,255,5) 10%, rgb(224,224,9) 55%);
background-image: -ms-linear-gradient(bottom, rgb(255,255,5) 10%, rgb(224,224,9) 55%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.1, rgb(255,255,5)),
color-stop(0.55, rgb(224,224,9))
);

This css shows that there is a box radius of 20px on the bottom left, and top left and right corners. The bottom right is a 200px radius so it matches the footer but in reverse. This matches the designs I drew for the footer.
-webkit-border-bottom-right-radius: 200px;
-moz-border-radius-bottomright: 200px;
border-bottom-right-radius: 200px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-topleft: 20px;
border-top-left-radius: 20px;-webkit-border-top-right-radius: 20px;
-moz-border-radius-topright: 20px;
border-top-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
border-bottom-left-radius: 20px;
}

The overall effect of the footer is shown here:

footer

 

Advertisements