1.0 Creating the Structure using HTML5 and CSS

Creation of Navigation Bar

Using a mixture of java script and HTML5 I have created a off screen navigation bar. I believe that this gives the website a professional feel to it.

Code for the off-screen navigation bar

CSS for the off-screen navigation bar

Creation of Title

Title div was easy to create, HTML5 was used again; although a name has not been decided upon

HTML 5 code used to create title

CSS used to alter the font, size and border of the title div

Information

Information div called information created this will hold information such as upcoming films

Basic Information will be stored here

CSS for Information div

Search bar

The search bar is being created at this moment however some problems have been noted

Update...

Search Bar problem fixed, (search icon was not showing), now I just need to edit it and change the position on the web-page, I might even try and add the search feature to the navigation bar

HTML5 used to create search bar

CSS used to alter search bar

Comments

5.5 Finished Product

Here is a image of the finished homepage with the navigation bar showing Image of the finished homepage

With a lot of trial and error I figured that the reason the map was not showing was because of the wrapper I had placed around my div. By ending the div earlier the map can now be shown and accessed. I also added a 'wrapmenu' around the search-bar. '</div>' Closed the 'Wrapper' (example of) Image shows the 'wrapmenu' Map shows the Markers within a 10 mile radius of Wigan

5.0 Creating Offers Pages and Slideshow for Home Page

The image below shows the code used to implement the navigation bar and offers list using <ul> tag this allows the lists to be un-ordered. Snippet of code navigation and offers Front end view of the offers page The slideshow was created using a mixture of html code and java-script which allowed the images to display automoatically Example of the html and java-script code for the automatic slide show Front end of the Home Page shows the automatic slideshow

The Darkroom - Cinema, Event Application

Search This Blog