jay, novice human (![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
10billionghosts) wrote2025-09-21 04:58 pm
10billionghosts) wrote2025-09-21 04:58 pm
code: SOUND - a mood board & nav code
New mood/nav code for you! SOUND features space for 7 images and has an optional navigation/text layer you can customize or remove entirely. There are two different versions of the navigation overlay, one that presents the links as colored circles and one that uses anchor text for better accessibility.
Check out the HOW TO USE section for customization details as usual. Live previews of both styles are at the bottom of the post, and you can pick up each code below.
CREDITS FOR GIFS & STOCK IMAGE IN EXAMPLE: gif 1, gif 2, pop can image
TEXT LINK CODE HERE:
CIRCLE LINK CODE HERE:
HOW TO USE:
❣️ This code is mobile and (mostly) comment compatible! (For full comment compatibility, if you want header and footer text, you will have to add color:#fff to the header and footer sections of code.)
❣️ Be sure to change any instance of IMG_URL to the URL for a picture. Alternatively, if you'd like a given square to be a solid color, leave the IMG_URL placeholder text and instead change the hex code that precedes it to a color you'd like to use.
❣️ Remember to change #URL_HERE to an appropriate URL, and if you are using the anchor link version of the code, change the "link" placeholder text to appropriate descriptive text. Additionally, update each instance of title="label" to an appropriate descriptor for the link (e.g. title="bio", title="hmd?").
❣️ The entire FOREGROUND section of the code is optional and can be removed. Subsections of FOREGROUND (header, links, footer) are also each optional and can be deleted from the code without affecting the rest of the mood board.
❣️ You can add or remove as many links as you like for either code! Just copy paste or delete as needed.
❣️ On the circle code, to remove link functionality and just have color circles, delete each instance of href="#URL_HERE" from the code.
❣️ Font color is #fff (white), and is declared multiple times in the code to ensure compatibility. Use find-replace to update this color.
❣️ The other default color in this code is hex code #ef52bf. It's found only in the FOREGROUND section and is used exclusively on the links, and so you may want to individually update instances of this color if you are wanting to create a rainbow/alternating color effect.
❣️ This code comes with a credit by default. Appreciate it if you leave it in!
❣️ I love peeking at what people do with my codes, so feel free to comment if you use! If you're feeling generous, you can also donate to my ko-fi -- it's always greatly appreciated!
Check out the HOW TO USE section for customization details as usual. Live previews of both styles are at the bottom of the post, and you can pick up each code below.
CREDITS FOR GIFS & STOCK IMAGE IN EXAMPLE: gif 1, gif 2, pop can image
CIRCLE LINK CODE HERE:
HOW TO USE:
❣️ This code is mobile and (mostly) comment compatible! (For full comment compatibility, if you want header and footer text, you will have to add color:#fff to the header and footer sections of code.)
❣️ Be sure to change any instance of IMG_URL to the URL for a picture. Alternatively, if you'd like a given square to be a solid color, leave the IMG_URL placeholder text and instead change the hex code that precedes it to a color you'd like to use.
❣️ Remember to change #URL_HERE to an appropriate URL, and if you are using the anchor link version of the code, change the "link" placeholder text to appropriate descriptive text. Additionally, update each instance of title="label" to an appropriate descriptor for the link (e.g. title="bio", title="hmd?").
❣️ The entire FOREGROUND section of the code is optional and can be removed. Subsections of FOREGROUND (header, links, footer) are also each optional and can be deleted from the code without affecting the rest of the mood board.
❣️ You can add or remove as many links as you like for either code! Just copy paste or delete as needed.
❣️ On the circle code, to remove link functionality and just have color circles, delete each instance of href="#URL_HERE" from the code.
❣️ Font color is #fff (white), and is declared multiple times in the code to ensure compatibility. Use find-replace to update this color.
❣️ The other default color in this code is hex code #ef52bf. It's found only in the FOREGROUND section and is used exclusively on the links, and so you may want to individually update instances of this color if you are wanting to create a rainbow/alternating color effect.
❣️ This code comes with a credit by default. Appreciate it if you leave it in!
❣️ I love peeking at what people do with my codes, so feel free to comment if you use! If you're feeling generous, you can also donate to my ko-fi -- it's always greatly appreciated!
no subject