Laures Christophe

Webdeveloper & Coder

About this Page

Used techniques

First of all the base is written in HTML5. When we have a look at the wireframe with the debug.css (a CSS file adding a colored border to the wireframe) loaded we can see the different sections of the page. The design is made with CSS3. I used the reset.css from to eliminate the Browser defaults. Now I could begin to create the 2 column design for the web page when displayed on a PC. After that I created the mobile design to display the page on mobile devices. And finally I crated the CSS-File for printing. When printing I added behind every link the destination and I removed the navigation. I also changed the font to a serif font so it's easier to read on paper.

The design

Now after the wireframe was created I began to create the design. The background of the body is an decent image with is repeated over all the page. The Wrapper has the same background color as the base color of the background image. The header, content with navigation and the footer have a background in carbon fiber optic. To create this optic I used CSS linear gradients with different colors. The font of all headers on the page is the digital dream font. All other text is in the Source™ Code Pro font. Both fonts are loaded using the CSS @fontface. The color of the text is a gray with fits perfect to the rest of the page. The header and the navigation have a green font color with gives a variety from the rest of the page.

The scripts

The page is loaded dynamically using Ajax. To reduce the calls to the server the page has a sort of buffer, once the new page is loaded the old one is not dumped. It's hidden and when you call the old page again, the actual page is simply hidden and the old one is shown. And when you open an new page witch wasn't loaded during your session the script downloads it from the server. This script and the tab-menu is mainly build with jQuery. The fractal tree script is only build with JavaScript.

Java Script Logo (unofficial) jQuery black Logo HTML5 Powered with CSS3 / Styling, Device Access, Graphics, 3D & Effects, Multimedia, and Semantics