[Basic Web Design] Final - The page footer

For this footer, I'll put some background at the bottom left and align the text to the right.

<footer>
<p><a href="#">Home</a> | <a href="#">About Me</a> | <a href="#">Portfolio</a> | <a href="#">Contact Me</a></p>
<p>© 2011 <a href="http://www.arafa-daming.co.cc" target="_blank">Arafa Daming</a></p>
</footer>

The style code :

footer {
    width: 950px;
    height: 50px;
    margin: 10px auto;
    background: #fff url(images/footer-bg.png) no-repeat bottom left;
    border: 1px solid #ccc;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    }

footer p {
    text-align: right;
    margin: 0;
    padding-right: 20px;
    font-size: 12px;
    }

footer p a {
    text-decoration: none;
    color: #000;
    }

footer p a:hover {
    text-decoration: underline;
    }

Finish! You can view demo at here.

Write by Arafa Daming