Good Evening Reader,
I'm relatively new to the world of web design and need some pointers on a design that I've drawn up for practice. Up til now, my websites have been relatively plain and straight forward. However, in this highly competitive field I felt that I should begin to get my weight up and try and hang with my competition. So the idea that I had was to work on creating an HTML5 site with a UI that responds similarly to a Flash/ActionScript UI. I have a picture of the PSD Mock-up I created but I don't know how to display it here. If any of you know how and would like to tell me, please let me know.
The homepage has a very simple look. The logo of the company that I'm practicing with is diamond-shaped so imagine a webpage with a 960px wide wrapper centered on the screen. In the header is the company's long logo and in the center of the content area is just the diamond-shaped logo with a linkable image on all four sides. The images are square-shaped with the corner under the diamond cut off and a 25px gap between it and the diamond. A 50px gap between the boxes themselves. Hopefully this isn't too hard to imagine.
Here's my problem. I would like each box to serve as the main content area for the page it links to. I'm not suggesting that once clicked it goes to another page. That's simple and actually is what the current site does now. No, instead, I want the box to grow and transition to white background. During the transition, the image which was displayed in the box goes away and page information is displayed. I need it to function like a normal website at this point...sort of. I mean this in the sense that I want to display a sidebar and main content in the expanded box. When a link is clicked, the current content fades out and the new content fades in. I still haven't thought come up with a way to get back to the homepage without actually having to reload the page all over again.