isopods | Entries tagged with *code

                    // 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

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

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

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! )

loupnoir

ELLEN RIPLEY
alien (franchise)

xenoqueen

You can put some stuff about your CR or whatever games you've played in. Totally up to you.

UNDYNE
undertale

fuhuhuhuhu

This text box is really long and automatically adds a scrollbar.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta, libero id hendrerit interdum, enim eros laoreet nisl, vitae dignissim eros arcu at massa. In nec enim eros. Donec in augue aliquet, varius felis ac, pretium elit. Curabitur fermentum, erat sed dapibus ullamcorper, lorem nisl rutrum massa, id mattis lorem tortor a risus.

THE PYRO
team fortress 2

rainblower

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta, libero id hendrerit interdum, enim eros laoreet nisl, vitae dignissim eros arcu at massa. In nec enim eros. Donec in augue aliquet, varius felis ac, pretium elit. Curabitur fermentum, erat sed dapibus ullamcorper, lorem nisl rutrum massa, id mattis lorem tortor a risus.