WELCOME!

≡

❑

Hey, there! My name is Everett [they/them]. Welcome to the place where I put my layouts, icons, and whatever else I feel like sharing.

I'm a full-time software developer and I make things in sporadic bursts. I'm more of a back-end programmer, and I'm still learning the twists and turns of HTML. I'm excited to see what I can make!

All of my templates are free to use / reference / modify / remix / etc. Credit appreciated, but not necessary. If you end up using one of my templates, I'd love it if you commented and shared the result!

If you'd like to request a template, feel free to comment on this post! I can't guarantee that I'll get to it in a timely manner, but I'll do my darn best. If you'd like to throw me a tip, I have a ko-fi page linked below!

Thanks for checking out my stuff!

CODES

ICONS

PLURK

KO-FI

loupnoir

                    // NAV
                
                    TITLE

                    - SUBSECTION 

                    - LINK 

                    - LINK 

                    - LINK 

                    - LINK 

                        // TITLE HERE
                    
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                        et
                        dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                        aliquip
                        ex ea commodo consequat.

                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                        dolore eu
                        fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                        deserunt mollit anim id est laborum.

                            SUBSECTION
                        
                        Morbi quis commodo odio aenean sed adipiscing diam. Libero volutpat sed cras ornare arcu dui vivamus
                        arcu felis. Vel orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Adipiscing
                        tristique risus nec feugiat in fermentum posuere.
                    
                    < isopods >

                // TITLE HERE
            
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                    et
                    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                    aliquip
                    ex ea commodo consequat.

                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                    dolore eu
                    fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                    deserunt mollit anim id est laborum.

                    SUBSECTION
                
                Morbi quis commodo odio aenean sed adipiscing diam. Libero volutpat sed cras ornare arcu dui vivamus
                arcu felis. Vel orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Adipiscing
                tristique risus nec feugiat in fermentum posuere.
            
                    HOME
                
                    PREMISE
                
                    FAQ
                
                    TAKEN
                
                    RULES
                
                    LOCATIONS
                
                    MOD CONTACT
                
                    < isopods >

NOSTROMO

A minimal, terminal-style info/navigation page. Can be used for game info, FAQs, event posts, character info--whatever your heart desires! Comes in two different styles--sticky side navbar (best viewed on desktop), and footer navbar (mobile friendly)--and four preset colors!

( Instructions and code below the cut! )

loupnoir

▶ lieutenant columbo

INFO

name: lieutenant columbo
age: 43
birthday: ????
gender: male
sexuality: loves his wife

TRAITS

• amicable
• determined
• caring
• shrewd
• etc etc.

< isopods >

SUMMARY

One of the basic pieces of furniture, a chair is a type of seat. Its primary features are two pieces of a durable material, attached as back and seat to one another at a 90° or slightly greater angle, with usually the four corners of the horizontal seat attached in turn to four legs—or other parts of the seat's underside attached to three legs or to a shaft about which a four-arm turnstile on rollers can turn—strong enough to support the weight of a person who sits on the seat (usually wide and broad enough to hold the lower body from the buttocks almost to the knees) and leans against the vertical back (usually high and wide enough to support the back to the shoulder blades). The legs are typically high enough for the seated person's thighs and knees to form a 90° or lesser angle.

ABILITIES

Bacon ipsum dolor amet short loin t-bone swine boudin. Flank corned beef kielbasa doner. Andouille short ribs ground round jerky, kevin prosciutto meatball beef tail ribeye chislic sausage hamburger. Shank bacon pastrami, burgdoggen chuck turducken jowl tenderloin salami venison flank fatback frankfurter. Sirloin ball tip meatball turducken porchetta doner ground round chislic kevin chuck ribeye short loin landjaeger capicola salami.

Swine kielbasa sirloin turducken, tenderloin prosciutto frankfurter filet mignon ham. Pastrami chislic biltong, sirloin venison ground round fatback t-bone hamburger andouille tongue frankfurter meatball. Beef chuck andouille ham hock ground round drumstick.

RELATIONSHIPS

Spicy jalapeno bacon ipsum dolor amet tri-tip strip steak flank short loin, pork belly porchetta ball tip brisket ham. Prosciutto andouille pastrami venison burgdoggen meatball meatloaf chislic jowl buffalo landjaeger shankle. Kevin corned beef biltong, turkey ground round pig shank short loin pork chop ball tip meatball pastrami buffalo tenderloin. Burgdoggen tail leberkas alcatra meatball ground round.

Strip steak venison tenderloin chicken, beef salami pork loin kielbasa porchetta hamburger shankle picanha. Picanha shankle kevin pancetta pork sausage jerky hamburger frankfurter prosciutto pork chop brisket meatloaf tenderloin. Tri-tip kielbasa cow, ham porchetta filet mignon biltong t-bone picanha shank prosciutto fatback spare ribs tail. Capicola doner picanha, shoulder cow ribeye ground round tail jowl sausage burgdoggen meatloaf pork loin.

INVENTORY

• notebook
• drawing of his fursona
• worm on a string
• or maybe put traits here
• do what you want

DETAILS GALORE

So many summary/detail tags on this one! Similar to At A Glance, in terms of having a polaroid picture and two columns. The left column is sticky and scrolls with you as you open the dropdowns!

( Instructions and code below the cut! )

loupnoir

What is this strange feeling I keep having? This cold... even now?

I AM LA REVACHOLIÈRE. I AM THE CITY.

What do you mean, you are the city?

I AM A FRAGMENT OF THE WORLD SPIRIT, THE GENIUS LOCI OF REVACHOL. MY HEART IS THE WIND CORRIDOR. THE BOTTOM OF MY AIR IS RED. I HAVE A HUNDRED THOUSAND LUMINOUS ARMS. COME MORNING, I CARRY INDUSTRIAL DUST AND LET IT SETTLE ON TREE LEAVES. I SHAKE THE DUST FROM THOSE LEAVES AND ONTO YOUR COAT. I'VE SEEN YOU, I'VE SEEN YOU! I'VE SEEN YOU WITH HER — AND I'VE SEEN YOU WITHOUT HER. I'VE SEEN YOU ON THE CRESCENT OF THE HILL.

She's speaking fast because she is afraid.

< isopods >
SPEECH BUBBLES

Simple speech bubbles for NPC dialogue, instant messaging, etc. This is kind of an old template that uses tables, so it might be a little janky in places. Feel free to modify and make it better (or worse?)

( Instructions and code below the cut! )

loupnoir

federal bureau of coherence

THE DETECTIVE

NAME: NICK VERGHESE

PRONOUNS: HE/HIM

HEIGHT: 5'-06"

EYES: BROWN

DOB: 1/2/199X

ID: E14-3923489723

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Diam vulputate ut pharetra sit amet aliquam id diam maecenas. Consequat ac felis donec et odio pellentesque diam volutpat commodo. Hendrerit dolor magna eget est lorem. Nascetur ridiculus mus mauris vitae. A arcu cursus vitae congue mauris rhoncus. Nec nam aliquam sem et tortor consequat id porta.

< isopods >

EMPLOYEE BADGE

A simple info page for a character.
Feel free to modify for your own needs!

( Instructions and code below the cut! )

loupnoir

THE ZONE: INTEREST CHECK

The Zone RPG, created by Raph D'Amico, is a tabletop storygame of surreal horror, magical realism, mutant weirdness, and collaborative self-destruction. Influences include Annihilation, Stalker, Roadside Picnic, Uzumaki, and the SCP Foundation.

The Zone (DWRP Version) is very much the same thing, except adapted to DWRP format.

How will this play out? You can look at an explanation of the original game here, and you can even play it for free in your browser with other people. I highly recommend it, if you have a group of people and have two to three hours of free time. You can even play it on your own as a journaling game!

This would be a six player game, maximum, and it would be invite only. This would probably run sometime mid/late October to early November. This seems like a small amount of people, but I just want to feel it out and see how it works closely to the original format and work out the kinks of adapting it to a new format. Additionally, due to the easy set-up and shared storytelling roles, this can be played multiple times with different groups.

Ideally, the game would run for two or three weeks maximum. I'm toying with the idea of it being entirely original characters to fit the setting, and I'm interested in hearing feedback about that.

If the game is a success, I'd love for other people to facilitate and run this game, too! (After all, I didn't come up with it.)

( Read more... )

loupnoir

Credit

isopods if using!

PREVIEW:

( Read more... )

loupnoir

Credit

isopods if using!

PREVIEW:

( Read more... )

loupnoir

Credit

isopods if using!

PREVIEW:

( Read more... )

loupnoir

Credit

isopods if using!

PREVIEW:

( Read more... )

loupnoir

Credit

isopods if using!

PREVIEW:

( Read more... )

loupnoir

Credit

isopods if using!

PREVIEW:

( Read more... )

loupnoir

Nick Verghese

GENDER: male [he/him]

SEXUALITY: bisexual

AGE: 29 [january 2nd]

HEIGHT: 5'6" [1.67 m]

OCCUPATION: private investigator

< code by isopods >

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquet risus feugiat in ante metus dictum at tempor commodo. Ornare aenean euismod elementum nisi quis eleifend quam adipiscing. Venenatis urna cursus eget nunc scelerisque viverra mauris in aliquam. In nibh mauris cursus mattis molestie a iaculis at. Volutpat consequat mauris nunc congue nisi vitae. Varius sit amet mattis vulputate. Aliquam nulla facilisi cras fermentum odio eu. Nibh mauris cursus mattis molestie a iaculis. Dictum sit amet justo donec enim diam.

Posuere morbi leo urna molestie at elementum eu facilisis. Eget mi proin sed libero enim sed. Rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar. Integer eget aliquet nibh praesent. Tempor id eu nisl nunc mi. Pharetra pharetra massa massa ultricies. Lacus vestibulum sed arcu non odio euismod. Justo donec enim diam vulputate ut pharetra sit amet aliquam. Amet luctus venenatis lectus magna fringilla urna porttitor. Vitae tortor condimentum lacinia quis vel eros donec ac odio.

In vitae turpis massa sed elementum tempus egestas. Felis imperdiet proin fermentum leo vel orci. Penatibus et magnis dis parturient montes nascetur. Mauris nunc congue nisi vitae suscipit tellus mauris a diam. Turpis cursus in hac habitasse platea dictumst quisque. Eget arcu dictum varius duis at consectetur lorem donec. Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget. Gravida cum sociis natoque penatibus et. Urna neque viverra justo nec ultrices dui. Ut morbi tincidunt augue interdum velit euismod in.

Eget est lorem ipsum dolor sit. Lectus sit amet est placerat in egestas erat imperdiet. Erat nam at lectus urna. Sed id semper risus in hendrerit gravida. Cras tincidunt lobortis feugiat vivamus at augue eget arcu dictum. Venenatis cras sed felis eget velit aliquet sagittis id. Aenean pharetra magna ac placerat. Vel fringilla est ullamcorper eget nulla facilisi. Quam nulla porttitor massa id neque aliquam vestibulum. Aliquet eget sit amet tellus cras adipiscing. Sociis natoque penatibus et magnis dis parturient montes. Eu nisl nunc mi ipsum faucibus vitae. Dui sapien eget mi proin sed. Et ligula ullamcorper malesuada proin libero nunc consequat interdum. Nulla at volutpat diam ut venenatis tellus in metus. Sociis natoque penatibus et magnis dis.

Nunc id cursus metus aliquam. Elit duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Cras adipiscing enim eu turpis. Et netus et malesuada fames ac turpis egestas sed tempus. Aliquam sem et tortor consequat id porta nibh. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Lobortis elementum nibh tellus molestie. Sit amet volutpat consequat mauris nunc congue. Scelerisque felis imperdiet proin fermentum leo vel orci porta non. Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare massa. Vulputate odio ut enim blandit volutpat maecenas volutpat blandit. Tincidunt vitae semper quis lectus nulla at. Dapibus ultrices in iaculis nunc sed augue. Suspendisse in est ante in nibh. Nibh tortor id aliquet lectus proin nibh. Libero volutpat sed cras ornare arcu dui vivamus arcu felis. Faucibus interdum posuere lorem ipsum. Dignissim enim sit amet venenatis urna cursus.

AT A GLANCE

A simple template to jot down information about a character. I made this to give people an overview of my original character without overloading people with too much info, but feel free to use this for whatever you'd like! I'll make another version for maximalists sometime....

( Instructions and code below the cut! )

loupnoir

Credit

isopods if using!

PREVIEW:

( Read more... )

loupnoir

LAYOUT: STACKED

"SUNRISE, PARABELLUM."

< isopods >

LAYOUT: STACKED + CONDENSED (w/o icon)

NAVIGATION

GENERAL RP

GAME NAME

< isopods >

LAYOUT: HORIZONTAL FLEXBOX (w/ inverted button colors)

"SUNRISE, PARABELLUM."

< isopods >

CLEAN & SIMPLE 2.0

A simple navigation layout that is modular and easy to customize. An attempt to improve upon my first HTML template from two years ago, back when I didn't understand padding and margins.

( Instructions and code below the cut! )

loupnoir

( Live preview, instructions, and code below the cut! )

loupnoir

From Chapters 1 to 73. Credit

isopods if using!

PREVIEW:

( Read more... )

loupnoir

November 2022 Update: Nix (

nixthat) made a tweaked version of the AC tracker that improves and clarifies the spreadsheet layout--you can check it out here!

Hey, everyone! This is Everett (

wolfnoir), and I've put together an AC tracker for Ryslig in Google Sheets! I've seen people struggling to putting together their AC comments, and I figure, why not make a spreadsheet that automatically generates the comment and calculates bonus AC? The neat thing about this AC tracker is that you're free to put in threads that are less than three comments, as it will only count threads that are eligible for AC!

This tracker was inspired by Xy's Deerington AC Tracker, who was kind enough to let me use their script as a starting point! Please let me know if you have any questions using this spreadsheet.
( Read more... )

loupnoir

boomstick69 - Instant Message

□

File

Edit

Insert

People

boomstick69 Warning Level: 45%

boomstick69: what's up?
unknown_user: hey
boomstick69: i can show you my boomstick if you'd like ;)
unknown_user: no thanks
unknown_user has blocked boomstick69!

unknown_user: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consectetur aliquam imperdiet. Nullam congue scelerisque leo rutrum pulvinar.
unknown_user: Donec lobortis justo vitae metus semper laoreet. Phasellus feugiat metus sit amet risus suscipit, id lacinia diam fermentum. Aliquam lobortis lacus dui, non pretium enim tincidunt non.
unknown_user: Sed consequat commodo augue eu hendrerit. Nulla id mauris eu erat luctus iaculis auctor ut leo. Curabitur euismod interdum ex, sed pulvinar augue. Sed eget nunc faucibus, varius eros pretium, maximus quam.

code @

isopods
AOL Instant Messaging Template

Pretend like it's the '90s by using this extremely cool and modern AOL Instant Messaging template. I have no idea what you would use this for, but feel free to take this code and modify it to your whims.

( Instructions and code below the cut! )

loupnoir

HOME

PAGE 2

PAGE 3

PAGE 4

PAGE 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et aliquam tortor. Morbi iaculis orci ipsum, a rutrum nibh maximus a. Nulla lacus ante, dignissim sit amet lacus ac, lacinia ultrices massa. Vestibulum volutpat, turpis ut tempor tempus, augue enim pharetra eros, et condimentum urna nulla at neque.

Maecenas at augue imperdiet, pellentesque augue sed, volutpat metus. Quisque auctor dolor sit amet auctor ullamcorper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec suscipit est ut libero tempus ultrices. Interdum et malesuada fames ac ante ipsum primis in faucibus.

HOME

PAGE 2

PAGE 3

PAGE 4

PAGE 5

 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin diam nec nisi consectetur, eget volutpat leo varius. Vestibulum malesuada erat felis, eu finibus nibh viverra quis. Maecenas at augue imperdiet, pellentesque augue sed, volutpat metus. Quisque auctor dolor sit amet auctor ullamcorper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec suscipit est ut libero tempus ultrices. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Etiam eleifend faucibus ornare. Sed eget vestibulum ipsum, eu pulvinar purus. Donec accumsan, risus ac lobortis scelerisque, nulla lacus porttitor diam, vestibulum fermentum ante diam vel velit. Pellentesque aliquam quam nisl, quis bibendum risus posuere eu. Ut ullamcorper erat ac est dictum cursus. Aliquam erat volutpat. Curabitur quis mauris dui. Duis tempor dolor magna, in interdum magna pharetra vitae. Sed eros ex, interdum vitae pharetra eget, commodo quis turpis. Nam gravida metus finibus massa vehicula, vitae vestibulum leo rhoncus. Donec semper est sagittis ante auctor, a vulputate augue aliquet.

HOME

PAGE 2

PAGE 3

PAGE 4

PAGE 5

Vestibulum malesuada erat felis, eu finibus nibh viverra quis. Maecenas at augue imperdiet, pellentesque augue sed, volutpat metus. Quisque auctor dolor sit amet auctor ullamcorper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec suscipit est ut libero tempus ultrices. Interdum et malesuada fames ac ante ipsum primis in faucibus.

HOME

PAGE 2

PAGE 3

PAGE 4

PAGE 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vulputate aliquam maximus. Praesent sit amet ex posuere, tincidunt lectus ut, fermentum tortor. Etiam elementum dolor nec imperdiet aliquet. Ut mollis in lorem in laoreet. Donec porttitor eu tortor et placerat.

HOME

PAGE 2

PAGE 3

PAGE 4

PAGE 5

idk what to put here

INFO

CR CHART

IMPRESSIONS

VISUALS

THREADS

Here's some info text, maybe a quote. Blah blah blah. Pretend I'm saying some important stuff here. Juno Steel deserves all the hugs in the world. Lorem ipsum whatever. Ask me how I make a "polaroid" border for icons using only HTML.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada interdum nisi ut varius.
© isopods

INFO

CR CHART

IMPRESSIONS

VISUALS

THREADS

WOOHOO a cr chart or something goes here idk

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin aliquam arcu quis auctor viverra. Nunc volutpat ante a semper tempor. Quisque feugiat elit vitae mauris convallis luctus. Curabitur a orci elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean suscipit mi sem. Vestibulum semper elementum lorem non mattis. Maecenas suscipit facilisis luctus. Sed turpis tortor, tempus eu sagittis eu, accumsan vel odio. 
© isopods

INFO

CR CHART

IMPRESSIONS

VISUALS

THREADS

congrats you made it to page 3
© isopods

INFO

CR CHART

IMPRESSIONS

VISUALS

THREADS

i'm not sure what else to put here. i'm running out of lorem ipsum stuff

© isopods

INFO

CR CHART

IMPRESSIONS

VISUALS

THREADS

i guess you could put thread tracking here if you were a madman

© isopods

TABBED (TERMINAL & FOLDER)

A tabbed navigation template that comes in two different flavors! Use this for whatever the hell you want--navigation, game info, whatever. I mostly just made these templates as a way of proving to myself that I could conquer this hellish HTML challenge and be satisfied with myself. If you do decide to use this template, I'd love to see what you use this for!

( Instructions and code below the cut! )

Profile

Real Isopod Hours

November 2023

S	M	T	W	T	F	S
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30

Syndicate

Page Summary

loupnoir - WELCOME!
loupnoir - [11] - info/navigation; nostromo
loupnoir - [10] - info; details galore
loupnoir - [09] - misc; speech bubbles
loupnoir - [08] - info; employee badge
loupnoir - The Zone Interest Check
loupnoir - hi-fi rush | chai | 139 icons
loupnoir - hi-fi rush | peppermint | 110 icons
loupnoir - hi-fi rush | korsica | 59 icons
loupnoir - hi-fi rush | macaron | 66 icons
loupnoir - hi-fi rush | CNMN | 46 icons
loupnoir - spider-man: into the spiderverse | dr. olivia octavius / doc ock | 37 icons
loupnoir - [07] - info; at a glance
loupnoir - deca-dence | kaburagi | 133 icons
loupnoir - [06] - navigation; clean & simple 2.0
loupnoir - [05] info; id card profile
loupnoir - dungeon meshi | laios touden | 122 icons
loupnoir - RYSLIG - THREAD/AC TRACKER
loupnoir - [04] misc; AIM template
loupnoir - [03] navigation; tabbed (terminal & folder)

Style Credit

Base style: Five AM by winterfish
Theme: Broad Horizons by timeasmymeasure

Expand Cut Tags

No cut tags

Page generated Jan. 17th, 2026 08:07 am

Real Isopod Hours

Recent Entries

Sticky: WELCOME!

[11] - info/navigation; nostromo

[10] - info; details galore

[09] - misc; speech bubbles

[08] - info; employee badge