STAR WARS ENCYCLOPEDIA: A layout implementation using HTML5 and CSS3

STAR WARS Encyclopedia

Hi, there.
Before we go further, if you are a STAR WARS fan like me you are going to love this one.
This time i would love to share my another layout creation using HTML5 and CSS3 only.
And the most interesting part, this effort was dedicated to STAR WARS.

The Wire Frame

High resolution wire frame.
Wire frame of the web page.

After creating the aire frame, the next step was to make things really come to life in the photoshop.

The final design

High resolution des
The final design

Whoa! things are looking nice until now.

Next what?

You got me. Let’s get that coded. Again I am using only HTML% and CSS3.

Phew! finally we are done. You can have a look at it, Any comments or suggestions are more then welcome.

STAR WARS Encyclopedia

House Of Horrors : A responsive web design

Hi there.
This post is to share my experience and work under getting started with ‘Responsive web design‘.
I created a website under the theme of House Of Horrors, and I am not even leaving my desk and posting this right away.
Any suggestions are more then welcome!.As it was a project under ‘Responsive Web design’, so firstly what i did was, i created 3 wire frames of the website as high resolution, medium resolution and low resolution.High resolution layout will target the devices having more then 1024 px width.
Medium resolution layout will target the devices having width between 481px to 1023 px.
Low resolution layout will target the devices having width lass then 481px.

High resolution wireframe

High resolution wire frame.
High resolution wire frame. for devices having greater then 1024 px width.

Medium resolution wire frame

Medium resolution wire frame.
Medium resolution wire frame for devices having width between 481px to 1024px.

Low resolution wire frame

Low resolution wire frame.
Low resolution wire frame for devices having width less then 481px..

When i was really satisfied with the wire frame i created, the next step was to make things little more alive in the photoshop.
Here are the snaps of the designs created in the photoshop.

High resolution design

High resolution design.
High resolution design created in photoshop targeting high resolution devices.

Medium resolution design

Medium resolution design.
Medium resolution design targeting tablets and phablets.

Medium resolution design targeting tablets and phablets.

Low resolution design

Low resolution design.
Low resolution design targeting hand held devices.

Phew! finally the task was done and i got that coded.

You can have a look at it.

House of horrors