isopods | [11] - info/navigation; nostromo

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

→ Feel free to edit, modify, or repurpose the template as you see fit.

→ I designed the sidebar nav with the intent of allowing the user to jump to different sections of the text--however, you are also free to have them link to external pages, too.

→ Not a fan of the scrolling scan lines? Delete background-image: url('https://i.imgur.com/i6QRZSX.gif'); in the first div tag, and adjust the --backgroundColor variable to be your desired background color.

→ This template uses variables for color/theme consistency. To change the colors, just find the appropriate variable(s) in the first div tag and put your new hex code. All of the appropriate elements will change color, accordingly!

→ I've provided four different preset pallets below for you to pick from: simply replace the variables at the top of the code with the following values for each color.

→ Need help or have any other questions? Let me know in the comments below!

SIDE NAV:

<raw-code>
    
    
    <div
        style="
            --backgroundColor: rgba(109, 177, 201, 0.25);
            --textColor: white;
            --boxColor: rgba(20, 68, 71, 0.8);
            --headerColor: rgba(78, 199, 205, 0.75);
            --navColor: rgba(78, 199, 205, 0.85);
            --borderSettings: 3px solid rgba(78, 199, 205, 0.75);
            --linkColor: white;
            border: var(--borderSettings);
            width: 900px;
            margin: auto;
            background-image: url('https://i.imgur.com/i6QRZSX.gif');">

<div style="color: var(--textColor); display: flex; align-items: flex-start; justify-content: space-around;">

<div
                    style="position: sticky;
                        display: inline-block;
                        font-size: 14px;
                        background-color: var(--boxColor);
                        margin: 15px; border: var(--borderSettings);
                        flex-grow: 1;
                        min-width: 200px;
                        top: 15px;">

<div
                        style="background-color: var(--headerColor);
                            font-size: 24px;
                            margin: 0px 0px 15px 0px;
                            padding: 5px 15px 5px 15px;
                            font-weight: 800;">

// NAV

</div>

<div style="margin: 15px;">
                        
                        
                        <big><b><a href="#title" style="color: var(--linkColor); text-decoration: none;">TITLE</a></b></big><br/>

- <a href="#subsection" style="color: var(--linkColor); text-decoration: none;">SUBSECTION</a> <br />
                        - <a href="https://crouton.net/" style="color: var(--linkColor); text-decoration: none;">LINK</a> <br />
                        - <a href="https://crouton.net/" style="color: var(--linkColor); text-decoration: none;">LINK</a> <br />
                        - <a href="https://crouton.net/" style="color: var(--linkColor); text-decoration: none;">LINK</a> <br />
                        - <a href="https://crouton.net/" style="color: var(--linkColor); text-decoration: none;">LINK</a> <br />

</div>

<div style="flex-grow: 2;">
                    <div
                        style="font-family: 'Lucida Console', monospace; font-size: 14px; text-align: justify; background-color: var(--boxColor); margin: 15px; border: var(--borderSettings);">
                        
                        
                        <a name="title"></a>

<div style="margin: 20px;">
                            
                            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.

<div
                                style="background-color: var(--headerColor); font-size: 24px; margin: 15px 0px 15px 0px; padding: 5px; font-weight: 800; text-align: center;">
                                
                                
                                
                                <a name="subsection"></a>

SUBSECTION
                            </div>

TEXT GOES HERE

</div>

</div>
                </div>

</div>
            
            
            
            <div>
                <center><a href="https://isopods.dreamwidth.org/9617.html"
                        style="text-decoration: none; color: white; font-size: 12px;">
                        < isopods >
                    </a></center>
            </div>

</div>

</div>
</raw-code>

BOTTOM NAV:

<div
                style="font-size: 14px; text-align: justify; background-color: var(--boxColor); margin: 15px; border: var(--borderSettings);">

<div
                    style="background-color: var(--headerColor); font-size: 24px; margin: 0px 0px 15px 0px; padding: 5px 15px 5px 15px; font-weight: 800;">
                    // TITLE HERE
                </div>
                
                
                <div style="margin: 20px;">
                    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.<br />

TEXT GOES HERE 
                </div>

</div>

<div style="margin: 10px; flex-grow: 1;">
                        <a href="" style="color: var(--linkColor); text-decoration: none;">
                            LINK NAME
                        </a>
                    </div>

LINK NAME

</a>
                    </div>

LINK NAME

</a>
                    </div>

LINK NAME

</a>
                    </div>

LINK NAME

</a>
                    </div>

</div>

<div>
                <center><a href="https://isopods.dreamwidth.org/9617.html"
                        style="text-decoration: none; color: white; font-size: 12px;">
                        < isopods >
                    </a></center>
            </div>

</div>
    </div>
</raw-code>

COLOR PRESETS:

BLUE (default):

GREEN:

RED:

YELLOW:

Flat | Top-Level Comments Only

Hello! I know this is a couple years late. However, I'm using this (absolutely fantastic) code to keep track of shop and personal inventory in a game. I seem to be having a bit of trouble with the subsections in that I can't click them in the Side Navigation. I'm able to click the title in the navigation and have it go to that section, but I can't seem to click on the subsections and do the same. I've double checked the code against your original code above, but it seems to be the same. I was wondering if you might have an idea as to why this is?

Here's a copy of the code as I have it set up right now. Thank you for your time, and for this really excellent code!!

<raw-code>
    
    
    <div
        style="
        --backgroundColor: rgba(146, 132, 50, 0.25);
        --textColor: white;
        --boxColor: rgba(71, 70, 20, 0.8);
        --headerColor: rgba(252, 199, 26, 0.75);
        --navColor: rgba(252, 199, 26, 0.85);
        --borderSettings: 3px solid rgba(252, 199, 26, 0.75);
        --linkColor: white;
            border: var(--borderSettings);
            width: 900px;
            margin: auto;
            background-image: url('https://i.imgur.com/i6QRZSX.gif');">

- <a href="#shop" style="color: var(--linkColor); text-decoration: none;"></a>SHOP<br />
                        - <a href="#BAR" style="color: var(--linkColor); text-decoration: none;"></a>BAR <br />
                        - <a href="#PERSONAL" style="color: var(--linkColor); text-decoration: none;"></a>PERSONAL<br />

<div
                            style="background-color: var(--headerColor); font-size: 24px; margin: 0px 0px 15px 0px; padding: 5px 15px 5px 15px; font-weight: 800;">
                            INVENTORY
                        </div>

<div style="margin: 20px;">

<u><b>FOOD</b></u><ul>
<li><b>DELICIOUS APPLE</b> - A definitely non-poisoned apple! Why would it be poisoned, don’t even worry about it.
<li><b> Smile Dip:</b> A sugary treat banned in most civilized locations! Don't eat more than one serving at a time.
<li><b>Potatogre:</b> An average-appearing onion. Cutting into it reveals each layer is a different color and potato-chip flavor.
</ul>
<b><u>CLOTHING</u></b><ul>
<li><b>A Pirate's Life For Me:</b> Not an actual life, just the outfit. But you could MAKE it a life if you wanted, because a pirate is free. Eye-Patch not included.
<li><b>Halo Holder: </b>Crude headwear consisting of a headband and a clothes hanger. The halo it holds isn't real, but it catches the light pretty nicely.
<li><b>Bath Robe:</b> IT'S SO FLUFFY.
<li><b>Kitty Hairpin (Melted)*:</b> A cat-shaped hairpin that’s kind of cute, but appears to have melted a bit.
<li><b>Fanny Pack:</b> Looks disgustingly tacky, but at least it holds your stuff.
</ul>
<b><u>TOYS</u></b><ul>
<li><b>Sanic the Hawtdawg Plush:</b> An ill-advised tie-in toy to an even more ill-advised movie. The eyes haunt you.
<li><b>Official Buzz Lightyear Action Figure:</b> Does not actually fly, but sometimes you swear it's not where you left it last night.
<li><b>Monster Hydra Puppets:</b> One head for each finger!
<li><b>Sing-A-Ma-Jig:</b> Your fuzzy singing pal!
<li><b>Otamatone:</b> Play it as loud as possible to annoy your friends.
</ul>
<b><u>TOOLS</u></b><ul>
<li><li><b>Shovel: A normal shovel. For digging treasure. Or graves.
</ul>

<b><u>CURIOSITIES</u></B><ul>
<li><b>a weeeeeeed:</b> haha what. did you know we can put, like, anything here? what's a 420J
<li><b>Giant Pencil:</b> MEHOY MINOY!
<li><b>An Entire Pumpkin:</b> What?
<li><b>Krazy Gloo:</b> Caution, may adhere to skin. Dries instantly.

BAR
                            </div>

<ul><li>Dim-berries: A handful of very delicious berries. Give you a LOT of pep in your step.
<li>Mountain Dew Hot Pink: Tastes like pomegranate and sour apple. Effects on robots unknown.
</ul>
 
                            <div
                                style="background-color: var(--headerColor); font-size: 24px; margin: 15px 0px 15px 0px; padding: 5px; font-weight: 800; text-align: center;">
                                
                                
                                
                                <a name="PERSONAL"></a>

PERSONAL
                            </div>

</div>
            
            
            
            <div>
                <center><a href="https://isopods.dreamwidth.org/9617.html"
                        style="text-decoration: none; color: white; font-size: 12px;">
                        < isopods >
                    </a></center>
            </div>

Lmao you know when you spend hours trying to figure out what you did wrong and then the moment you ask, five minutes later a friend takes another look and figures it out for you??? Yeah that's me rn. It's all fixed! Thank you again for the fantastic code!!

LOL I'm glad you ended up figuring it out! what ended up being the issue?

putting my face in my hands because like any good heckup it's an I canNOT believe I did that moment, but I put the link name behind the /a instead of in front of it

Edited 2025-07-12 17:35 (UTC)

LOLLLL It happens to the best of us!

...........okay even funnier moment

Ev I 10000% did not realize this was ur journal until I read the name and I was like huh that sounds familiar I wonder--oh

Edited 2025-07-12 17:56 (UTC)

LMFAOOOO

[11] - info/navigation; nostromo

no subject

no subject

no subject

no subject

no subject

no subject

no subject