Bee's Website Resources [NEW: CSS Packs]

[fatgrrlz]

EDIT: I have decided to turn this thread into a general website resources thread, what with my recent CSS pack projects. Everything here will remain the same though :) If you just want to see my regular art, you can find it here. .

I hit the text limit in the post apparently, so if you want the landing page assets, they are here.

These resources are free to use for noncommercial purposes - personal pages are A-OK, putting them on a shirt is not. Attribution (ie crediting me somewhere on your website, not necessarily every page you use them on) is encouraged.

---CSS PACKS

Not sure if anyone has done this yet, but I've made what I like to call CSS Packs. It's a .zip file containing a bunch of aesthetic assets - backgrounds, banners, borders, cursors, etc. - and a stylesheet with some basic code to get it up and running. You can either include the style sheet itself in the header of your webpage's HTML, or take apart bits and pieces of it to make the assets work best on your site.

Spooky Cats

The download can be found here.

[close]

Blue Floral

The download can be found here.

[close]

[SilkSkull]

I absolutely love this idea I personally have always loved the ESRB logo and thought it would be cool to have one for my site! Thank you for making these! 

[serenefork]

This is so well done! I've been looking for something like this for a while! I really enjoy the Censor Pandas, but they don't really mesh with what I want my site to be like right now, but the ESRB logo fits much better for me! 

[fatgrrlz]

---LANDING PAGES

For the uninitiated, landing pages are very basic web pages that appear when you enter someone's site that gives a brief description of the site and has a link to the main site. The intent with landing pages is to make users privvy to important aspects of your site, such as 18+ content, flashing imagery, or content warnings. You can keep it simple, or dress it up a bit - it's all up to you!

Although the code and content here is specifically for landing pages, you can use these wherever on your site :3

NEW! Landing Page Doors

Basic Door sans Decor

[close]

Basic Door with Decor

Pink Door

Code

<div style="width: 95px; height: 175px;"> <a href="[INSERT LINK HERE]"> <div style="background-image: url('graphics/door/door01.GIF'); position: relative; width: 95px; height: 175px;"> <img src="freebs/roses/IMG_1636.GIF" style="position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; top: 8px"> </div> </a> </div> 

[close]

Purple Door

Code

<div style="width: 95px; height: 175px;"> <a href="[INSERT LINK HERE]"> <div style="background-image: url('graphics/door/door02.GIF'); position: relative; width: 95px; height: 175px;"> <img src="freebs/roses/IMG_1636.GIF" style="position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; top: 8px"> </div> </a> </div> 

[close]

Blue Door

Code

<div style="width: 95px; height: 175px;"> <a href="[INSERT LINK HERE]"> <div style="background-image: url('graphics/door/door03.GIF'); position: relative; width: 95px; height: 175px;"> <img src="freebs/roses/IMG_1636.GIF" style="position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; top: 8px"> </div> </a> </div> 

[close]

Green Door

Code

<div style="width: 95px; height: 175px;"> <a href="[INSERT LINK HERE]"> <div style="background-image: url('graphics/door/door04.GIF'); position: relative; width: 95px; height: 175px;"> <img src="freebs/roses/IMG_1636.GIF" style="position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; top: 8px"> </div> </a> </div> 

[close]

Yellow Door

Code

<div style="width: 95px; height: 175px;"> <a href="[INSERT LINK HERE]"> <div style="background-image: url('graphics/door/door05.GIF'); position: relative; width: 95px; height: 175px;"> <img src="freebs/roses/IMG_1636.GIF" style="position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; top: 8px"> </div> </a> </div> 

[close]

Orange Door

Code

<div style="width: 95px; height: 175px;"> <a href="[INSERT LINK HERE]"> <div style="background-image: url('graphics/door/door06.GIF'); position: relative; width: 95px; height: 175px;"> <img src="freebs/roses/IMG_1636.GIF" style="position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; top: 8px"> </div> </a> </div> 

[close]

Brown Door

Code

<div style="width: 95px; height: 175px;"> <a href="[INSERT LINK HERE]"> <div style="background-image: url('graphics/door/door07.GIF'); position: relative; width: 95px; height: 175px;"> <img src="freebs/roses/IMG_1636.GIF" style="position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; top: 8px"> </div> </a> </div> 

[close]

Red Door

Code

<div style="width: 95px; height: 175px;"> <a href="[INSERT LINK HERE]"> <div style="background-image: url('graphics/door/door08.GIF'); position: relative; width: 95px; height: 175px;"> <img src="freebs/roses/IMG_1636.GIF" style="position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; top: 8px"> </div> </a> </div> 

[close]

Black Door

Code

<div style="width: 95px; height: 175px;"> <a href="[INSERT LINK HERE]"> <div style="background-image: url('graphics/door/door09.GIF'); position: relative; width: 95px; height: 175px;"> <img src="freebs/roses/IMG_1636.GIF" style="position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; top: 8px"> </div> </a> </div> 

[close]

White Door

Code

<div style="width: 95px; height: 175px;"> <a href="[INSERT LINK HERE]"> <div style="background-image: url('graphics/door/door10.GIF'); position: relative; width: 95px; height: 175px;"> <img src="freebs/roses/IMG_1636.GIF" style="position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; top: 8px"> </div> </a> </div> 

[close]

[close]

Stained Glass sans Decor

[close]

Stained Glass Window Door with Decor

Pink

Code

    <div style="width: 95px; height: 195px;">
        <a href="[INSERT LINK HERE]">
            <div style="background-image: url('graphics/door/door11.GIF'); position: relative; width: 95px; height: 195px;">
                <img src="freebs/hanging/IMG_1844.GIF" style="position: absolute; left: 0; right: 0; margin-left: auto;  margin-right: auto; top: 18%">
            </div>
        </a>
    </div>

[close]

Purple

Code

    <div style="width: 95px; height: 195px;">
        <a href="[INSERT LINK HERE]">
            <div style="background-image: url('graphics/door/door12.GIF'); position: relative; width: 95px; height: 195px;">
                <img src="freebs/hanging/IMG_1844.GIF" style="position: absolute; left: 0; right: 0; margin-left: auto;  margin-right: auto; top: 18%">
            </div>
        </a>
    </div>

[close]

Indigo

Code

    <div style="width: 95px; height: 195px;">
        <a href="[INSERT LINK HERE]">
            <div style="background-image: url('graphics/door/door13.GIF'); position: relative; width: 95px; height: 195px;">
                <img src="freebs/hanging/IMG_1844.GIF" style="position: absolute; left: 0; right: 0; margin-left: auto;  margin-right: auto; top: 18%">
            </div>
        </a>
    </div>

[close]

Blue

Code

    <div style="width: 95px; height: 195px;">
        <a href="[INSERT LINK HERE]">
            <div style="background-image: url('graphics/door/door14.GIF'); position: relative; width: 95px; height: 195px;">
                <img src="freebs/hanging/IMG_1844.GIF" style="position: absolute; left: 0; right: 0; margin-left: auto;  margin-right: auto; top: 18%">
            </div>
        </a>
    </div>

[close]

Green

Code

    <div style="width: 95px; height: 195px;">
        <a href="[INSERT LINK HERE]">
            <div style="background-image: url('graphics/door/door15.GIF'); position: relative; width: 95px; height: 195px;">
                <img src="freebs/hanging/IMG_1844.GIF" style="position: absolute; left: 0; right: 0; margin-left: auto;  margin-right: auto; top: 18%">
            </div>
        </a>
    </div>

[close]

Yellow

Code

    <div style="width: 95px; height: 195px;">
        <a href="[INSERT LINK HERE]">
            <div style="background-image: url('graphics/door/door16.GIF'); position: relative; width: 95px; height: 195px;">
                <img src="freebs/hanging/IMG_1844.GIF" style="position: absolute; left: 0; right: 0; margin-left: auto;  margin-right: auto; top: 18%">
            </div>
        </a>
    </div>

[close]

Orange

Code

    <div style="width: 95px; height: 195px;">
        <a href="[INSERT LINK HERE]">
            <div style="background-image: url('graphics/door/door17.GIF'); position: relative; width: 95px; height: 195px;">
                <img src="freebs/hanging/IMG_1844.GIF" style="position: absolute; left: 0; right: 0; margin-left: auto;  margin-right: auto; top: 18%">
            </div>
        </a>
    </div>

[close]

Red

Code

    <div style="width: 95px; height: 195px;">
        <a href="[INSERT LINK HERE]">
            <div style="background-image: url('graphics/door/door18.GIF'); position: relative; width: 95px; height: 195px;">
                <img src="freebs/hanging/IMG_1844.GIF" style="position: absolute; left: 0; right: 0; margin-left: auto;  margin-right: auto; top: 18%">
            </div>
        </a>
    </div>

[close]

White

Code

    <div style="width: 95px; height: 195px;">
        <a href="[INSERT LINK HERE]">
            <div style="background-image: url('graphics/door/door19.GIF'); position: relative; width: 95px; height: 195px;">
                <img src="freebs/hanging/IMG_1844.GIF" style="position: absolute; left: 0; right: 0; margin-left: auto;  margin-right: auto; top: 18%">
            </div>
        </a>
    </div>

[close]

Black

Code

    <div style="width: 95px; height: 195px;">
        <a href="[INSERT LINK HERE]">
            <div style="background-image: url('graphics/door/door10.GIF'); position: relative; width: 95px; height: 195px;">
                <img src="freebs/hanging/IMG_1844.GIF" style="position: absolute; left: 0; right: 0; margin-left: auto;  margin-right: auto; top: 18%">
            </div>
        </a>
    </div>

[close]

[close]

[close]

HTML-editable ESRB Content Rating Graphics

I've been working on a cute little project this weekend... I really like the Adopt-a-Censor Pandas and felt inspired to make my own set of very simple website content ratings! These are made to look like the ESRB warnings on video games. There are both singular .png graphics and larger ones with content descriptors. The intent with these is that you can add own specific warnings in the content descriptor box. See below for a couple examples:




Only current issue I'm having with it is that the content descriptors have some text spacing issues when you list more than two (I've found that playing with the padding-top CSS until it looks right does the trick but I'd like to find an easier way that doesn't involve too much user tweaking...). I'm also not quite content with the 8 in "18+" in the Adults Only graphic.

As you can see, I've made them in black as well as the brown tone I use on my website :3 Free to use, no credit needed.

Ratings in Black

E for Everyone

Code

    <div style="margin: 3px; position: relative; display: block; height: 93px; width: 225px;">
        <img src="rating/blk/1.png" style="position: absolute; left: 0px;">
        <div style="border: 3px solid black; height: 87px; width: 225px; background-color: white">
            <div style="padding-left: 80px; padding-top: 4%; color: black; font-family: 'Arial';">
                <p>Comic Mischief <br> Mild Lyrics</p>
            </div>
        </div>
    </div>

[close]

E 10+

Code

    <div style="margin: 3px; position: relative; display: block; height: 93px; width: 225px;">
        <img src="rating/blk/2.png" style="position: absolute; left: 0px;">
        <div style="border: 3px solid black; height: 87px; width: 225px; background-color: white">
            <div style="padding-left: 80px; padding-top: 4%; color: black; font-family: 'Arial';">
                <p>Fantasy Violence <br> Mild Blood</p>
            </div>
        </div>
    </div>

[close]

T for Teen

Code

    <div style="margin: 3px; position: relative; display: block; height: 93px; width: 225px;">
        <img src="rating/blk/3.png" style="position: absolute; left: 0px;">
        <div style="border: 3px solid black; height: 87px; width: 225px; background-color: white">
            <div style="padding-left: 80px; padding-top: 4%; color: black; font-family: 'Arial';">
                <p>Crude Humor<br> Violence</p>
            </div>
        </div>
    </div>

[close]

M for Mature

Code

    <div style="margin: 3px; position: relative; display: block; height: 93px; width: 225px;">
        <img src="rating/blk/4.png" style="position: absolute; left: 0px;">
        <div style="border: 3px solid black; background-color: white; height: 87px; width: 225px;">
            <div style="padding-left: 80px; padding-top: 4%; color: black; font-family: 'Arial';">
                <p>Flashing Imagery<br>Sexual Themes</p>
            </div>
        </div>
    </div>

[close]

Adults Only

Code

    <div style="margin: 3px; position: relative; display: block; height: 93px; width: 225px;">
        <img src="rating/blk/5.png" style="position: absolute; left: 0px;">
        <div style="border: 3px solid black; height: 87px; width: 225px;  background-color: white">
            <div style="padding-left: 80px; padding-top: 4% ; color: black; font-family: 'Arial';">
                <p>Sexual Content <br> Anime Tiddies</p>
            </div>
        </div>
    </div>

[close]

[close]

Ratings in Brown

E for Everyone

Code

<div style="margin: 3px; position: relative; display: block; height: 93px; width: 225px;">
        <img src="rating/1.png" style="position: absolute; left: 0px;">
        <div style="border: 3px solid #965f24; height: 87px; width: 225px; background-color: white">
            <div style="padding-left: 80px; padding-top: 4%; color: #965f24; font-family: 'Arial';">
                <p>Comic Mischief <br> Mild Lyrics</p>
            </div>
        </div>
</div>

[close]

E 10+

Code

<div style="margin: 3px; position: relative; display: block; height: 93px; width: 225px;">
        <img src="rating/2.png" style="position: absolute; left: 0px;">
        <div style="border: 3px solid #965f24; height: 87px; width: 225px; background-color: white">
            <div style="padding-left: 80px; padding-top: 4%; color: #965f24; font-family: 'Arial';">
                <p>Fantasy Violence <br> Mild Blood</p>
            </div>
        </div>
</div>

[close]

T for Teen

Code

<div style="margin: 3px; position: relative; display: block; height: 93px; width: 225px;">
        <img src="rating/3.png" style="position: absolute; left: 0px;">
        <div style="border: 3px solid #965f24; height: 87px; width: 225px; background-color: white">
            <div style="padding-left: 80px; padding-top: 4%; color: #965f24; font-family: 'Arial';">
                <p>Crude Humor<br> Violence</p>
            </div>
        </div>
</div>

[close]

M for Mature

Code

<div style="margin: 3px; position: relative; display: block; height: 93px; width: 225px;">
        <img src="rating/4.png" style="position: absolute; left: 0px;">
        <div style="border: 3px solid #965f24; background-color: white; height: 87px; width: 225px;">
            <div style="padding-left: 80px; padding-top: 4%; color: #965f24; font-family: 'Arial';">
                <p>Flashing Imagery<br>Sexual Themes</p>
            </div>
        </div>
</div>

[close]

Adults Only

   

Code

<div style="margin: 3px; position: relative; display: block; height: 93px; width: 225px;">
        <img src="rating/5.png" style="position: absolute; left: 0px;">
        <div style="border: 3px solid #965f24; height: 87px; width: 225px;  background-color: white">
            <div style="padding-left: 80px; padding-top: 4% ; color: #965f24; font-family: 'Arial';">
                <p>Sexual Content <br> Anime Tiddies</p>
            </div>
        </div>
</div>

[close]

[close]

[close]

[fatgrrlz]

Turning this thread into a general landing page decor thread! I've become interested in making some fun little doodads for use on landing pages. Speaking of... I made some doors! I've also put together some very basic HTML for using them to enter your website, and it even has a little decoration that you can replace with any ~75x75px image!

I'd like to make a few different types of doors, but for now, here's a very basic one.

Basic Door with Decor

Pink Door

Code

<div style="width: 95px; height: 175px;"> <a href="[INSERT LINK HERE]"> <div style="background-image: url('graphics/door/door01.GIF'); position: relative; width: 95px; height: 175px;"> <img src="freebs/roses/IMG_1636.GIF" style="position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; top: 8px"> </div> </a> </div> 

[close]

Purple Door

Code

<div style="width: 95px; height: 175px;"> <a href="[INSERT LINK HERE]"> <div style="background-image: url('graphics/door/door02.GIF'); position: relative; width: 95px; height: 175px;"> <img src="freebs/roses/IMG_1636.GIF" style="position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; top: 8px"> </div> </a> </div> 

[close]

Blue Door

Code

<div style="width: 95px; height: 175px;"> <a href="[INSERT LINK HERE]"> <div style="background-image: url('graphics/door/door03.GIF'); position: relative; width: 95px; height: 175px;"> <img src="freebs/roses/IMG_1636.GIF" style="position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; top: 8px"> </div> </a> </div> 

[close]

Green Door

Code

<div style="width: 95px; height: 175px;"> <a href="[INSERT LINK HERE]"> <div style="background-image: url('graphics/door/door04.GIF'); position: relative; width: 95px; height: 175px;"> <img src="freebs/roses/IMG_1636.GIF" style="position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; top: 8px"> </div> </a> </div> 

[close]

Yellow Door

Code

<div style="width: 95px; height: 175px;"> <a href="[INSERT LINK HERE]"> <div style="background-image: url('graphics/door/door05.GIF'); position: relative; width: 95px; height: 175px;"> <img src="freebs/roses/IMG_1636.GIF" style="position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; top: 8px"> </div> </a> </div> 

[close]

Orange Door

Code

<div style="width: 95px; height: 175px;"> <a href="[INSERT LINK HERE]"> <div style="background-image: url('graphics/door/door06.GIF'); position: relative; width: 95px; height: 175px;"> <img src="freebs/roses/IMG_1636.GIF" style="position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; top: 8px"> </div> </a> </div> 

[close]

Brown Door

Code

<div style="width: 95px; height: 175px;"> <a href="[INSERT LINK HERE]"> <div style="background-image: url('graphics/door/door07.GIF'); position: relative; width: 95px; height: 175px;"> <img src="freebs/roses/IMG_1636.GIF" style="position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; top: 8px"> </div> </a> </div> 

[close]

Red Door

Code

<div style="width: 95px; height: 175px;"> <a href="[INSERT LINK HERE]"> <div style="background-image: url('graphics/door/door08.GIF'); position: relative; width: 95px; height: 175px;"> <img src="freebs/roses/IMG_1636.GIF" style="position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; top: 8px"> </div> </a> </div> 

[close]

Black Door

Code

<div style="width: 95px; height: 175px;"> <a href="[INSERT LINK HERE]"> <div style="background-image: url('graphics/door/door09.GIF'); position: relative; width: 95px; height: 175px;"> <img src="freebs/roses/IMG_1636.GIF" style="position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; top: 8px"> </div> </a> </div> 

[close]

White Door

Code

<div style="width: 95px; height: 175px;"> <a href="[INSERT LINK HERE]"> <div style="background-image: url('graphics/door/door10.GIF'); position: relative; width: 95px; height: 175px;"> <img src="freebs/roses/IMG_1636.GIF" style="position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; top: 8px"> </div> </a> </div> 

[close]

[close]

[fatgrrlz]

More doors :3 stained glass this time!



Also, a note - if the hanging decor is smaller than 75x75, you'll want to poke at the left, right, and top CSS properties to make them fit appropriately.

Stained Glass Window Door with Decor

Pink

Code

    <div style="width: 95px; height: 195px;">
        <a href="[INSERT LINK HERE]">
            <div style="background-image: url('graphics/door/door11.GIF'); position: relative; width: 95px; height: 195px;">
                <img src="freebs/hanging/IMG_1844.GIF" style="position: absolute; left: 0; right: 0; margin-left: auto;  margin-right: auto; top: 18%">
            </div>
        </a>
    </div>

[close]

Purple

Code

    <div style="width: 95px; height: 195px;">
        <a href="[INSERT LINK HERE]">
            <div style="background-image: url('graphics/door/door12.GIF'); position: relative; width: 95px; height: 195px;">
                <img src="freebs/hanging/IMG_1844.GIF" style="position: absolute; left: 0; right: 0; margin-left: auto;  margin-right: auto; top: 18%">
            </div>
        </a>
    </div>

[close]

Indigo

Code

    <div style="width: 95px; height: 195px;">
        <a href="[INSERT LINK HERE]">
            <div style="background-image: url('graphics/door/door13.GIF'); position: relative; width: 95px; height: 195px;">
                <img src="freebs/hanging/IMG_1844.GIF" style="position: absolute; left: 0; right: 0; margin-left: auto;  margin-right: auto; top: 18%">
            </div>
        </a>
    </div>

[close]

Blue

Code

    <div style="width: 95px; height: 195px;">
        <a href="[INSERT LINK HERE]">
            <div style="background-image: url('graphics/door/door14.GIF'); position: relative; width: 95px; height: 195px;">
                <img src="freebs/hanging/IMG_1844.GIF" style="position: absolute; left: 0; right: 0; margin-left: auto;  margin-right: auto; top: 18%">
            </div>
        </a>
    </div>

[close]

Green

Code

    <div style="width: 95px; height: 195px;">
        <a href="[INSERT LINK HERE]">
            <div style="background-image: url('graphics/door/door15.GIF'); position: relative; width: 95px; height: 195px;">
                <img src="freebs/hanging/IMG_1844.GIF" style="position: absolute; left: 0; right: 0; margin-left: auto;  margin-right: auto; top: 18%">
            </div>
        </a>
    </div>

[close]

Yellow

Code

    <div style="width: 95px; height: 195px;">
        <a href="[INSERT LINK HERE]">
            <div style="background-image: url('graphics/door/door16.GIF'); position: relative; width: 95px; height: 195px;">
                <img src="freebs/hanging/IMG_1844.GIF" style="position: absolute; left: 0; right: 0; margin-left: auto;  margin-right: auto; top: 18%">
            </div>
        </a>
    </div>

[close]

Orange

Code

    <div style="width: 95px; height: 195px;">
        <a href="[INSERT LINK HERE]">
            <div style="background-image: url('graphics/door/door17.GIF'); position: relative; width: 95px; height: 195px;">
                <img src="freebs/hanging/IMG_1844.GIF" style="position: absolute; left: 0; right: 0; margin-left: auto;  margin-right: auto; top: 18%">
            </div>
        </a>
    </div>

[close]

Red

Code

    <div style="width: 95px; height: 195px;">
        <a href="[INSERT LINK HERE]">
            <div style="background-image: url('graphics/door/door18.GIF'); position: relative; width: 95px; height: 195px;">
                <img src="freebs/hanging/IMG_1844.GIF" style="position: absolute; left: 0; right: 0; margin-left: auto;  margin-right: auto; top: 18%">
            </div>
        </a>
    </div>

[close]

White

Code

    <div style="width: 95px; height: 195px;">
        <a href="[INSERT LINK HERE]">
            <div style="background-image: url('graphics/door/door19.GIF'); position: relative; width: 95px; height: 195px;">
                <img src="freebs/hanging/IMG_1844.GIF" style="position: absolute; left: 0; right: 0; margin-left: auto;  margin-right: auto; top: 18%">
            </div>
        </a>
    </div>

[close]

Black

Code

    <div style="width: 95px; height: 195px;">
        <a href="[INSERT LINK HERE]">
            <div style="background-image: url('graphics/door/door10.GIF'); position: relative; width: 95px; height: 195px;">
                <img src="freebs/hanging/IMG_1844.GIF" style="position: absolute; left: 0; right: 0; margin-left: auto;  margin-right: auto; top: 18%">
            </div>
        </a>
    </div>

[close]

[close]

[brisray]

@fatgrrlz I keep coming back to this thread, your artwork, especially the doors are great.

[fatgrrlz]

@fatgrrlz I keep coming back to this thread, your artwork, especially the doors are great.

Thank you!! It's been a minute since I worked on one of these, I've been meaning to. I really like the concept of landing pages and I think there can be some fun, creative things to be done with them :3

I have worked on some general site resources, however - I've put together what I've been calling "CSS packs", with various website graphics and some basic CSS to get it up and running. Here's one I've recently completed - Blue Floral.

Spoiler

[close]

[fatgrrlz]

I ended up making another one - Spooky Cats!!

I've also turned this thread into a general resource thread, since these resources aren't limited to landing pages

Spooky Cats

[close]