Design 4.75 by B9
Welcome to 48 Degrees North, my latest design for the community at Open Web Design. This is a modification of an intermediate template in the Blue Too series, and most of the code remains the same. Note that at this point, this template does not contain multiple layouts as does Blue Too Two (or B2B9), but it would be a simple matter to do that, as I have not changed much in the way of layout or code.
The header image is derived from a photo I took a number of years ago while flying over the San Juan Islands of Washington State, where I lived aboard my old wooden cabin cruiser and had very few cares in the world. From Puget Sound (Seattle area), it is possible to take a small boat to Alaska via the fabled Inside Passage. This amazingly beautiful route is generally considered to begin just North of the Straits of Juan de Fuca, in the San Juan Islands, which are nestled in a pocket of US territory inside of Southern Vancouver Island. A territorial dispute between the US and Britain in the 1800's found opposing camps of soldiers entrenched at different ends of a small island, and ultimately led to the demise of a pig. It took a German Chancellor to settle the border dispute (also known as the 'Pig War'), but rumor has it the pig never got a proper burial :)
If you had NASA WorldWind, -- (Download link) -- (Forum Link),
you could click on the following url and go to the location shown in the banner: worldwind://goto/world=Earth&lat=48.52505&lon=-122.84683&alt=1093&dir=75.9&tilt=76.1.
But without WorldWind, you could still extrapolate the coordinates and viewing angle from this URL, and use any mapping service/Geo-imagery viewer you like. WorldWind is very powerful and it is an Open Source Application - check it out!
This template is an attempt to address some comments I got on the earlier designs, regarding navigation and simplicity. Those familiar with the B2 templates will note that the navigation has been reduced/simplified in this template, but the original code was left in comments so the template can easily and instantly be expanded to fit larger/more complex websites.
This is essentially Blue Too with a cleaner interface and simplified navigation. Please note that I have not 'stripped' this template, but I have done a little housecleaning and so far I like the results. Undoubtedly I will find issues to deal with, but I think it is ready for some public consumption. Below is generic Blue Too series commentary and a little of my philosophy on Open Source.
back to top »Features
48° North is hand coded in xhtml 1.1 and CSS2 - it validates, but more importantly, the 'spirit' of web standards compliance dictated many design choices above and beyond simple compliance. It is far from semantically perfect, but this template is fairly robust and portable, and I intend to update this template in an effort to make it as versatile and accessible as I can while also preserving simplicity and flexibility.
This section uses the .hilite class to set off a bit of text- note that it uses the same background image that tiles across the top of the page - so if the section will be longer than that image is tall, you may want to change the image or just change the .hilite style to not use a background image- the background color which is specified should work fine by itself.
The navbar below the header uses the id #navbar. I have used it for linking to various sections on this page, so that you can 'jump' to each section - use it as you wish. The navbar at the very top of the page uses the id #topnav - I have used it for global site related links, but as I said . . .
back to top »This is a section which uses the blockquote element - it is used for (you guessed it) quoting. Sometimes web authors like to use this element to highlight sections of text, but that is not 100% semantically accurate. Of course, you may do what you wish. Note I have created the .hilite class shown above for drawing attention to nonquoted text.
Caveats
The design works fine at 800x600 screen resolution and I made a little effort to avoid total ugliness at higher resolutions. This is a fixed-width template, but it was designed to (hopefully) work well and look good at a variety of resolutions and font sizes.
I intend to upate this template at some point soon to use alternate layouts - for now, I have provided a simple print stylesheet which basically prints only the header, navbar menu, and content, while hiding the footer, sidebars, and most background graphics.
back to top »Terms of Use
This is an Open Source template. This means it is free to use and modify.
I do not place any restrictions on this template, but I do ask that you respect my work. See below for ways you can do this.
All graphics were created by myself, using source images in the public domain or made from scratch. The use of these images is not restricted in any way.
While I do not in any way restrict the use of this template, I would appreciate it if you observed some or all of the following:
- Leave the comments in the source code
- Leave a link to Open Web Design, at least in the source
- Contact me with any questions, comments, or links
- Try out NASA WorldWind
- I would love to be hired to do web design
- Enjoy this template, and tell others about Open Web Design
- Respect and promote Open Source as a philosophy
Open Source Ideals
Open Source is more than just free- it is an entire philosophy which drives the benefits of technology to the common person- Open Source is about freedom and empowerment to all. Open Source technologies help to 'level the playing field' in a world driven by greed and profit, where a few wealthy individuals control vast amounts of resources while billions grow poorer.
- Free
- Educational
- Fun
- Real Value -
- Get What Works
- Don't Pay for Crap
- Your Choice
- Revolutionary
Thank you for viewing/downloading this template and helping to spread the use of Open Source designs.
Please check out the many incredible designs featured at Open Web Design, and tell others about this site.
Cheers - Barnacle 9
B9