Home Entrance Wiki Search Login Register

Welcome, Guest. Please login or register. - Thinking of joining the forum??
April 14, 2024 - @748.99 (what is this?)
Forum activity rating: Four Star Posts: 56/1k.beats Unread Topics | Unread Replies | Own Posts | Own Topics | Random Topic | Recent Posts
News: :dive: Are u having fun?? :dive:

+  MelonLand Forum
|-+  World Wild Web
| |-+  ☆ ∙ Showcase & Links
| | |-+  ⚛︎ ∙ Share your Resources
| | | |-+  Bee's Website Resources [NEW: CSS Packs]


« previous next »
Pages: [1] Print
Author Topic: Bee's Website Resources [NEW: CSS Packs]  (Read 797 times)
fatgrrlz
Jr. Member ⚓︎
**


She/They Girl-thing


View Profile WWW

First 1000 Members!Joined 2023!
« on: August 06, 2023 @926.71 »

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.

« Last Edit: September 24, 2023 @8.50 by fatgrrlz » Logged

SilkSkull
Hero Member ⚓︎
*****


SpaceHey: Friend Me!
iMood: SilkSkull
Matrix: Chat!

View Profile WWW

First 1000 Members!MARIO64.PNGCool Dude AwardJoined 2022!High Speed Ozwomp!
« Reply #1 on: August 08, 2023 @262.38 »

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!  :chef:
Logged

She/Her
"Will you stop adding lampposts to my games?"

serenefork
Jr. Member ⚓︎
**


a Beanie Buddy!

StatusCafe: serenefork
iMood: serenefork

View Profile WWW

First 1000 Members!Joined 2023!
« Reply #2 on: August 08, 2023 @266.05 »

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!  :transport:
Logged

(he/they)

fatgrrlz
Jr. Member ⚓︎
**


She/They Girl-thing


View Profile WWW

First 1000 Members!Joined 2023!
« Reply #3 on: August 10, 2023 @93.83 »

---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]
« Last Edit: September 24, 2023 @7.60 by fatgrrlz » Logged

fatgrrlz
Jr. Member ⚓︎
**


She/They Girl-thing


View Profile WWW

First 1000 Members!Joined 2023!
« Reply #4 on: August 12, 2023 @858.43 »

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]
Logged

fatgrrlz
Jr. Member ⚓︎
**


She/They Girl-thing


View Profile WWW

First 1000 Members!Joined 2023!
« Reply #5 on: August 16, 2023 @167.67 »

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]
Logged

brisray
Full Member ⚓︎
***



View Profile WWW

First 1000 Members!Joined 2023!
« Reply #6 on: August 24, 2023 @657.47 »

@fatgrrlz I keep coming back to this thread, your artwork, especially the doors are great.
Logged
fatgrrlz
Jr. Member ⚓︎
**


She/They Girl-thing


View Profile WWW

First 1000 Members!Joined 2023!
« Reply #7 on: September 21, 2023 @207.78 »

@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]
Logged

fatgrrlz
Jr. Member ⚓︎
**


She/They Girl-thing


View Profile WWW

First 1000 Members!Joined 2023!
« Reply #8 on: September 24, 2023 @8.94 »

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 :cheesy:



Spooky Cats

[close]
Logged

Pages: [1] Print 
« previous next »
 

Vaguely similar topics! (3)

Website size

Started by RolyBoard ✁ ∙ Web Crafting

Replies: 59
Views: 5351
Last post March 30, 2024 @910.61
by Semper
Website example page

Started by Icey!Board ☆ ∙ Showcase & Links

Replies: 3
Views: 1824
Last post December 16, 2021 @285.10
by cinni
Website status (Check replies for part 2)

Started by Icey!Board ☆ ∙ Showcase & Links

Replies: 8
Views: 2062
Last post December 26, 2021 @841.50
by Icey!

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021, Simple Machines | Terms and Policies Forum Guide | Rules | RSS | WAP2


MelonLand Badges and Other Melon Sites!

MelonLand Project! Visit the MelonLand Forum! Support the Forum
Visit Melonking.Net! Visit the Gif Gallery! Pixel Sea TamaNOTchi