Aspen Beverage Group - I enjoy taking layouts that were developed with tables and converting it to a div layout. The menu bar uses a spry framework for the dropdown functionality. I developed the same look using CSS. This was a fun exercise. The HTML and CSS validate and the layout is confirmed to render on all major browsers. Browsers include Internet Explorer 7, Google's Chrome, Firefox, Safari (Windows), and Opera. The original site can be seen here.
Course Trends - This web site uses image mapping for it's navigation. My version of this web site gives more visual feedback which enables the user to know they can expect something when they click on it. Although there is a little too much gray and black for my taste, I still like the presentation. I chose a colorful hover effect for the navigation in an attempt to try to bring in more color to break things up a bit.
There is some jQuery that is used with the <marquee> tag which prevents this page from validating. To see the original site click here.
Q2 eBanking - This layout combines tables and CSS positioning for it's presentational structure. This developer introduced some coding techniques that I was not familiar with and I'm glad to include them in my future projects. The only thing I did was remove the tables and make the presentation all in CSS. The dropdown menu is all CSS which is something that I like. The CSS for the jQuery slideshow is on a separate stylesheet because it was basically copy & paste. Some minor changes were made just for web standard compliance. To see the original site click here.
Spibelt - The navigation uses a pure CSS dropdown menu. jQuery was used to create a delayed effect. If javascript were disabled, the navigation would still be operational. The page was tested on several browsers and rendered consistently on all. Internet Explorer 7 is a little glitchy but still rendered the hover effect correctly. I added a border to the right side of the dropdown menu and a hover effect for each menu item which is a slight difference from the original. The code makes the page web standard compliant and cross browser compatible. To see the original site click here.