Uploading my Fonts

To get my fonts to work on my site, I used a site called Font Squirrel to mae working font faces with the fonts I had downloaded previously.

I used their @font-face generator to upload the fonts. I then had to download the folders with all the css and code necessary to get it working on my site.

This code linked the fonts to my site, I had two for both of the fonts I picked for my site.

I then had to specify where to show the font in my CSS

Changing my Content Sections

The slider template had its own layout template when I got it, and the navigation was on the content boxes itself. I had to changed the CSS of the page myself to have the navigation at the top of the page.

Here is the code for my navigation bar. The position of it is fixed so that it is always at the top of the page, even if the page is scrolling to another content box.
To get it to work with the content scroller, I had to add a class to the navigation div in the html, so it would work with the jQuery.

My content boxes were changed so I could add more content to them.

I also changed the background colour of the content box. This was done in RGB values so the transparency worked on the background. I wanted transparency so you could see the background images clearer.

The selected class works with the navigation. It puts a white border around the div you are currently on, which is useful for navigation.

Making My Backgrounds

Whilst making the site, I have found that making that background has been the most time consuming part of it, as many of these require drawing from scratch. For my backgrounds, I have looked at various existing levels and have given them my own personal style, and fit them into my site accordingly.

Whilst testing the slider on my site and trying to see how the backgrounds would fit together, I mocked up this sketchy version of a final background. After making this version, I then went over it again, but made it much more detailed. The lines are also neater, and were mainly done with the line tool in Photoshop.

This is part of my finished first background. The drawing is more detailed, and I imitated the style of the level from the game.

Getting the Content Slider to Work

I have now found the code for a content slider, one that works horizontally. I am starting to get it to work with my site, although there is not much to it yet as I am still planning out the background imagery.

This is how it looks so far. I need to change the colour scheme accordingly.

Starting to Build My Site

Before making the visuals, I want to make sure I can code the website properly and get that working. I am currently looking for a way to make the site scroll horizontally, but in the mean time I am going to plan out the sizes of the content divs and the navigation.

Pitch

In my pitch, I showed my progress on how I got to my proposed idea, including my failed experiment. Overall, my idea was praised for being visually appealing, which is good as I was not pleased with my first idea before I thought of the video game idea.
I was told that the site could look very good if done right, so I am hoping that I can make this site look visually appealing, and that I can get the background effect on my site to work.

Wire Frame Mock Up

For my mockup, I used the levels I had gathered, and have laid out where I would the navigation, background images and content boxes to go.
Firstly, I made the wire frame. This helped me plan out things at first.

I then went on to add more details for my mockup, including gradients and background images.

My finished site should look somewhat like this.