And we're done with header.

Step 22 - a bit of JavaScript / contact form

We will make our contact form as a rollover div. That's why I included jquery in template. We will use it so the animation will be a matter of few lines of code. First of all, let's change a link of contact in navigation, make it like this:

write something to me right <a href="" class="rockandroll">here.</a>

As you can see we just added a class to achieve onlick action. Then in the header section below jquery implementation add this piece of JavaScript code:

<script> $(document).ready(function() { $('#contactform').hide(); $('.rockandroll').click(function() { $('#contactform').slideToggle(400); return false; }); }); </script>

For those who don't know what it means I am just describing: When the document is ready hide a div with id contactform and if someone clicks link with class rockandroll then slide contactform div. In the brackets is speed of sliding. Here's html, add this and we can head to tests:

</p> <div id="contactform"> <div id="contact"> <p style="background:red;">This is the text<br />that will be altered<br />with our contact form<br />but we will do that later and this is<br />just for testing.</p> </div> </div> <p>

We will craft contact form now, that was just check if this work. It actually does. the same way we can make 'about me' box but I will go easy way and will just send visitor to the footer. I have prepared some simple background on the side. Check by yourselves how everything looks in source files. I have included there mock-up of contact form (it is not working and don't sends any e-mails).

Step 23 - the content

I have changed my mind and disabled that big white layer which was our base. Think it looks better, but you can cut it te way you want with or without this layer. If you would like to use my finished template with white background then it's a matter of one image to change.

Alright, firstly we need a paper background. Hide unneeded layers. Cut out a big rectangle and do the same mirror trick as we made with very first header background. Name it bg2.jpg. Now update your css 'html' declaration, all should looks like this: