Site Navigation

Article Heading

You can use the sidebar for additional information. If you choose to change the information from page to page, then you will need to make this an editable region.

More text can be added in this sidebar area. You can include images but you will need to limit the size to no more than 130px at the most. You can add links or special sale information.. Contact Us >

Connect with us on:
Connect with us on Facebook. Connect with us on Twitter.


Article Heading

The photo used in the masthead of this template was taken in August 2013 at Friday Harbor. Photographer is Leslie Geary. Friday Harbor, San Juan Island, Washington. 

You can use this sidebar for additional information, a supplemental menu or whatever.

Author: Kgrr (cc) 2007 by Konrad Roeder
Author Kgrr (cc) 2007 by Konrad Roeder

Friday Harbor Template

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 Red and Black Web Package.  Instructions.

The Friday Harbor template based on one of the newest templates offered on our sister site - Expression Web Mobile Friendly Site Templates. This template uses some CSS3 for the rounded corners which will display as intended in newer modern browsers. They will degrade gracefully in older browsers and default to rectangular corners. This template uses a fixed width layout and is mobile friendly.

This package also includes a blank template that can be used with any web editor.


 Classes are included to float your images left or right or center them on the page. The anchor image used as the menu bullet is from Icons etc. It has been resized much smaller.

Changing the Column Background Colors

A background image is used to create the equal height column look. If you wish to change the color of the columns, you will need to create a new image.


Screenshot of Friday Harbor template on various devices.


This templates makes use of one of the Google web fonts, Federo. Read more about Google web fonts.


The main menu for this template is on the left sidebar. You can add more items or additional sections. A top menu has also been included. If you would prefer not to have a top menu, just remove or comment out that section of the code.

Additional Resources

You can find detailed instructions for working with the mobile friendly site templates as well as a pdf file you can download and print.

Also resources on both drop shadows and rounded corners.


The XHTML code validates. Because the external style sheet uses some CSS3, it does not validate. However the CSS3 style rules used degrade gracefully in older browsers and you will see rectangular corners rather than the rounded corners the more modern browsers display.