jay, novice human (![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
10billionghosts) wrote2021-09-13 07:41 pm
10billionghosts) wrote2021-09-13 07:41 pm
Entry tags:
code: loverboy - a heart horny mood board
I've been desperate to make some more mood board/aesthetic board codes lately, and have started trolling Canva looking for inspiration. This mood board is an HTML rework of this photo collage template. Thank you Canva.
This code caused me a bit of grief, so in lieu of something that scales, I'm releasing it in two flavors: small, which is a bit more friendly for narrow layouts, and large, which is not really mobile friendly, but would make a pretty great splash page for a journal, imo. I've added a nice sample of the "big" code to the very bottom of this post.
Here is the smaller (max width 625px) code:
Here is the larger (max width 800px) code:
HOW TO USE
❣️ Mind the lj-raw tags!!
❣️ This code will not break itself on mobile, but will cause horizontal scrolling. It is insanejournal friendly, though!
❣️ For best results, paste into a new blank post.
❣️ Each square is arranged in the code top-to-bottom, left-to-right. So, row one is the two small top squares and the topmost large square.
❣️ To change the color of each square, change the #bbb hex value to whatever hex code you'd like.
❣️ To change the image, paste the URL of an image into the space that says 'IMG_URL_ROW#' or 'BIG_IMG_URL_ROW#'.
❣️ I personally recommend using images for the larger squares and colors or textures for the smaller squares.
❣️ Advanced users may be able to get a bit creative with how things scale by messing with the background-size and background position values.
❣️ Feel free to edit this as you'd like -- I was just turning a mock up into code, after all! While I don't put a code link on any of my codes, I always appreciate credit back to my journal here. :)
❣️ If there's any interest, I can put together a moodboard that turns the larger images into links for nav. Just let me know.
❣️ Keep scrolling to see a preview of the larger mood board!
As always, I do not require credit, but it is appreciated, especially if you are editing my base code. I love to see what people have done with my code, so drop me a comment with a link if you decide to use!
This code is compatible with InsaneJournal.
This code caused me a bit of grief, so in lieu of something that scales, I'm releasing it in two flavors: small, which is a bit more friendly for narrow layouts, and large, which is not really mobile friendly, but would make a pretty great splash page for a journal, imo. I've added a nice sample of the "big" code to the very bottom of this post.
Here is the smaller (max width 625px) code:
Here is the larger (max width 800px) code:
HOW TO USE
❣️ Mind the lj-raw tags!!
❣️ This code will not break itself on mobile, but will cause horizontal scrolling. It is insanejournal friendly, though!
❣️ For best results, paste into a new blank post.
❣️ Each square is arranged in the code top-to-bottom, left-to-right. So, row one is the two small top squares and the topmost large square.
❣️ To change the color of each square, change the #bbb hex value to whatever hex code you'd like.
❣️ To change the image, paste the URL of an image into the space that says 'IMG_URL_ROW#' or 'BIG_IMG_URL_ROW#'.
❣️ I personally recommend using images for the larger squares and colors or textures for the smaller squares.
❣️ Advanced users may be able to get a bit creative with how things scale by messing with the background-size and background position values.
❣️ Feel free to edit this as you'd like -- I was just turning a mock up into code, after all! While I don't put a code link on any of my codes, I always appreciate credit back to my journal here. :)
❣️ If there's any interest, I can put together a moodboard that turns the larger images into links for nav. Just let me know.
❣️ Keep scrolling to see a preview of the larger mood board!
As always, I do not require credit, but it is appreciated, especially if you are editing my base code. I love to see what people have done with my code, so drop me a comment with a link if you decide to use!
This code is compatible with InsaneJournal.