Navigation

Heading

News

Images within the content area are from Fotolia and are samples only to demonstrate the image classes.

You may use any of my free templates for non-commercial purposes (personal sites, non-profit organizations, etc.). I do require that you keep the credit link on all pages.

Soccer Template - Red

If you are using Firefox and click the Download button, you will see a bunch of gibberish. Instead, right click the Download button and save the file to your computer.

Download Soccer Web Package.  Instructions.

http://www.fotolia.com/id/646489This is a fluid width template which means it will resize to fit the viewer's browser window with no horizontal scroll at 800x600. The width of the container is set at 90%. A maximum width for the container has been set at 1400pixels. Because IE 6 and below do NOT recognize max width, I have added minmax.js so that the page will render properly in those browsers. You can read CSS minimum and maximum sizes to learn more. This script makes these CSS properties work transparently in IE version 5.0 upwards. At 800x600 the red background will look more like a wide border.  The code is written using XHTML Transitional doctype and validates as does the external style sheet.

The navigation menu for this template is from CSS Drive - Dashed Vertical Menu. Other vertical menus are available from CSS Library.

Editable regions include doctitle, headsection for description and keywords, and the content area. The masthead image is 400x163 pixels with the background color set to #A70622 .  If you change the image, make sure you change the background color to match. The masthead logo is a transparent image. You may request the text in the logo be changed for your site name or substitute the top logo for one of your own. The class of imgrgt or imglft has been applied to the images within the content area.

Changes to the "look" of the site should be made to the external style sheet. You will need to create additional styles as you add content. If you change the width of the left navigation, make sure you adjust the left margin for the content area. The soccer template is also available in green and blue.

Soccer Template Package

The soccer template package contains the DWT for ALL three versions, an default.html file with the DWT attached, and all supporting files, folders and graphic images including a shortcut icon.

H2 Tag - Sub Topic

Mauris ligula metus, accumsan quis, lacinia sed, tincidunt vitae, ligula. Nulla bibendum sagittis metus. Nam arcu lacus, luctus sit amet, pretium ut, congue in, velit. Vivamus justo magna, laoreet vel, porta eleifend, aliquet ac, mauris. Vestibulum luctus lectus et lorem. Quisque ac tortor ac nibh interdum aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce et est vel libero dapibus accumsan. Aliquam dapibus nunc in ante. Ut sagittis, leo nec volutpat ultrices, leo dolor eleifend ligula, at dictum dolor augue tincidunt tortor. Morbi hendrerit. Donec facilisis interdum eros. Sed posuere, augue imperdiet consectetuer posuere, magna magna euismod nunc, ut facilisis dui ipsum quis tortor. Pellentesque feugiat, justo eu auctor iaculis, sapien quam convallis neque, non sodales ligula orci ut mauris. Vivamus tincidunt lobortis magna. Maecenas tempor.

H3 Tag - Sub Topic

http://www.fotolia.com/id/722412

Phasellus tempor blandit risus. Integer at quam ac ante bibendum varius. Aenean ac nisl. Nam a enim eu orci interdum blandit. Pellentesque ipsum. Fusce at odio a enim vehicula sagittis. Integer eu arcu. In sodales justo eu dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam at mauris. Pellentesque imperdiet, justo id pellentesque tristique, dolor dolor rutrum justo, eget luctus leo orci ac sem. Morbi neque erat, vestibulum quis, eleifend eu, blandit id, urna. Ut non enim. Pellentesque egestas mollis nisl. Donec vel neque eu ipsum aliquet luctus. Proin luctus. Proin pretium.

Ut quis odio. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In hac habitasse platea dictumst. Nunc mi. Integer congue, eros eu elementum gravida, nibh augue hendrerit purus, sed vehicula tellus augue id justo. Mauris et massa. Vestibulum viverra nonummy erat. Pellentesque pellentesque dui non est aliquet accumsan. Proin tellus mauris, fermentum ornare, rhoncus volutpat, ultricies vel, metus. Proin pulvinar, massa et porttitor eleifend, tortor lacus suscipit quam, id molestie dui sem non turpis. Cras suscipit, elit porttitor fringilla consequat, orci massa ullamcorper urna, vitae lacinia pede dolor eget ligula. Nulla augue felis, venenatis nec, rutrum et, sagittis id, odio. Duis vitae augue.

Nunc urna. Mauris lectus. Nunc mollis vulputate dolor. Etiam odio enim, bibendum sed, egestas sed, pharetra vel, elit. Maecenas eros ligula, viverra a, plcerat a, dictum et, risus. Mauris elit. Vivamus cursus consequat nunc. Proin et nunc sed nibh tempus tempus. Curabitur hendrerit interdum nisl. Nulla bibendum varius turpis. In condimentum ultrices eros. Nullam ligula tellus, pharetra et, faucibus non, vestibulum eget, leo. Vestibulum vitae nisi sed eros condimentum rutrum. Pellentesque in purus. Proin nisi risus, tempor sit amet, auctor eu, ultrices vitae, nisi. Donec rhoncus semper nunc. Nunc feugiat sodales dui. Morbi lectus. Vestibulum non dolor nec nibh egestas gravida. Vestibulum augue.

This is how a list will look: