Static Website – In Progress – Post 1

Here is the development of my website so far.
First

 

First I had just a few practices.

 

 

 

 

 

Second

 

….And more practice….

 

 

 

 

Third

Here is my website taking place, apologies for the lack of early stage screen shots. (Slipped my mind)

 

I have decided to have the navigation bar fixed to the top of the screen. This way no matter how far down the user has scrolled the navigation bar is always at the top of the screen.

 

I also created a tile with an aztec design. With this I set the tile to the background image and had it set to tiled.

 

 

 

Fourth

 

Here I have changed all of the colours and completed my drop down menu. The drop down menu I created using CSS only. At first I was a bit worried and thought I would have to use a spry menu bar but I was able to find bits of code online.

 

 

 

Fifth

 

Here I have changed the opacity of the background tile as it was too busy. I also took away the black outline but I feel it has taken the strength away a bit.

 

 

 

 

Sixth

 

I have also changed the opacity of the navigation bar. It took a long time to get this to work. Originally I tried to use this code: {{opacity:0.4;   filter:alpha(opacity=40); }} But this made the button’s transparent also. I finally found a piece of code that would allow me to change the transparency of the background colour which has worked well.

 

 

 

 

Seventh

 

I loved how this turned out, because it is always on screen and goes over the entire website being able to slightly see through it adds a slight texture. It is not a block colour.

 

 

 

 

 

 

Eight

 

Here I wanted to create a clear definition between the main section of the website and the tiled background. I created another container and and used the padding feature. The background colour I used the same style as the navigation bar. I think this ties it all together.

 

 

 

Ninth

 

Now all I have to do is get the profile picture in the correct place in the right bottom corner of the cover image. I can’t seem to get the code to work but I’ll continue to work on it till thursday.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s