They need your help, love, & support

This is a semi-transparant column with a span width of 7 and offset of 3. Check the layout pane. Lovely background kitty shot by Umberto Salvagnin

These little guys are waiting for you

The header row is positioned fixed. You can find the setting in the position section of the design pane. A result is that the header row does not take up any space, the next row flows under (or over, depending on the order in the html) it. To compensate for that a 50px top padding is added to the second ‘call-out’ row. Voluptatemsequi nesciunt orasario jauystase joasuaserya vytarsa numquam eius modi teincidunt, ut labore et dolore magnam liaseras.

Placeholder Image

Violet by Ella Mullins

For this section we are using 4 columns of 3 spans each. Yep, the total is 12 again!

The design for these section cards is straightforward, just a matter of playing with margins, padding, backgrounds and corner radius to get to this result.

Placeholder Image

Lily by Mark Sebastian

Oh, we forgot, the lovely picture in the call-out section is a background image on the row. Curabitur dictum, justo ut tempus consectetur, mi leo tincidunt risus, vel posuere leo neque vel libero. Duis porta tortor dui, eu lobortis turpis ultrices nec.

Placeholder Image

Doubles by Sneakerdog

Ut elementum lectus quam, ornare placerat erat tempor id. Donec ut tortor aliquam nulla egestas pulvinar. Vestibulum mollis erat in sem porta, nec congue dui varius. Mauris suscipit nisl et ornare feugiat. Duis commodo cursus eros et finibus.

Placeholder Image

Alfie by ~ezs

Nulla velit magna, consequat sit amet libero nec, porta auctor nibh. Curabitur tincidunt, urna in sollicitudin dapibus, enim lectus volutpat magna, a aliquam velit diam quis arcu.

Placeholder Image

Paulie by Shoichi Masuhara

Suspendisse eget ligula vitae lacus pretium iaculis. Sed tempor est id dui luctus viverra. Donec vehicula tellus nec diam finibus malesuada. Integer justo massa, gravida nec ipsum vitae.

Placeholder Image

Fiona by Basheer Tome

Morbi tristique diam ultricies, laoreet lectus in, vulputate nulla. Quisque fermentum elementum quam a gravida.

Placeholder Image

PePeLoLo by Hery Zo

Nunc sit amet nunc neque. Maecenas imperdiet lacus tellus, at suscipit nunc bibendum et. Sed viverra enim quis diam ultrices, quis ultrices mauris varius. Nam id libero a elit molestie sodales.

Placeholder Image

Bagheera by Alexandra Zakharova

Nunc sit amet nunc neque. Maecenas imperdiet lacus tellus, at suscipit nunc bibendum et. Sed viverra enim quis diam ultrices, quis ultrices mauris varius. Nam id libero a elit molestie sodales.

Love is give and take

This grey background row does not have a max-width and will always stretch the full width of the document. To center the content in the middle a subgrid is used. The subgrid has a max-width of 1600px and is center by setting the left and right margins to auto. This section is further constrained because the column only spans 8 of the 12 grid columns. This can be seen on the layout pane.


Placeholder Image

Urgent  program

This section uses the same type of subgrid as the row above.  Each subgrid row uses 2 columns of 6 spans.


Placeholder Image

Pets for adoption

Praesent eu lobortis nisi. Duis aliquam mauris ac suscipit ultrices. Aenean sit amet ipsum id metus elementum dapibus a nec felis. Nam ac massa purus.

Meet the family »

Placeholder Image

Our sponsors

Vivamus nec tincidunt risus, non semper dolor. Sed volutpat, sapien in pellentesque aliquet, metus mauris porta magna, sed egestas libero purus ut tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst.

They support us »

Placeholder Image

News & events

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc eu tempor lacus. Morbi eget ex sit amet nisi venenatis molestie eget ac diam.

Follow us on Facebook »