Site © Your Name. Photos © Garry Crietee. Fonts from Google Fonts. Layout © ShadowFire.

Comments

Wow, so it's almost the end of 2013! Can't believe I'm gonna be 20 next year... Oh well, doesn't matter since I still look/act like a 16 year old LOL.

This layout is quite different from anything I've made in the past. In general, the entire layout deviates quite a bit from my past designs in terms of positioning and how I mark up the the content area. This is also my first full screen design and is much more fluid/responsive. The size of the images, menu, and content will adapt to fit the size of your screen. When your screen is smaller than 1000 or 800px, the three and two column grids (respectively) will turn into one column grids.

The coding for this layout is also much more semantic. I'm putting much more use to the new semantic tags in HTML tags and am trying hard to kick my habit of using <br> tags. And no, this isn't an iFrame layout! The images and menu are fixed so only the content is scrollable.

Customize!

My intent behind this layout was to design something more customizable; it is quite text heavy right now but it doesn't have to be! You can use this layout as some sort of photo gallery with minimal text. Depending on how you want to display your content, you can use one, two, or three column grids.

Using grids

You can choose from a 1, 2, or 3 column grid. To create a new grid, use the following code:

Change column3 to column2 or column1 for 2 or 1 column grids, respectively. Each <section> tag creates a new column.

Information

This layout was completed on December 29, 2013. It is a dividers layout.

You MUST follow the Terms of use on ShadowFire! Also, do NOT edit the credits except the section that reads Site ©<a href="">Your Name</a>.

Extras

Graphics

Form Elements



Check Box
Radio button

Dream Catcher