What's new
  • When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Resource It's Showtime~☆

Nano

artistic shrimp
#mobile friendly
#interest check
#scroll
#3 tabs
ACT: 018: Beyond
This is not a drill! I repeat, this is not a drill.

I'm rather surprised I managed to get this up within a week. In any case, here is the real code for the mockup from last time! Unfortunately, this one is quite finicky, so I suggest to not touch the number of tabs or the loading circles unless you're familiar with bbcode/html. In addition, it's best to keep the titles of the links short, else it'll look odd on mobile due to lack of space.

That said, if you want to try your hand at adjusting the percentages of the loading circles, play around with the clip-path value located in the respective border tag. As a note, the current percentages are approximations. I am terrible at math, and I wasn't going to bother to figure out the exact whatevers for each circle.

Art is from Punishing: Gray Raven.






Beyond The Witch's Corridor
.
01000001 00100000 01110111
01100001
01110010 01110010 01101001 01101111
01110010
00100000 01101110 01100101 01100101 01100100 01110011 00100000 01101110 01101111 01110100 00100000
01100011
01101111 01101110 01100011 01100101 01110010 01101110 00100000 01110100 01101000 01100101 01101101 01110011 01100101 01101100 01110110 01100101 01110011 00100000 01110111 01101001 01110100 01101000 00100000 01101101
01100001
01110100 01110100 01100101
01110010
01110011 00100000 01110111 01101001 01110100 01101000 01101001 01101110 00100000 01110100 01101000 01100101 00100000 01110000
01110101
01110010 01110110 01101001 01100101 01110111 00100000 01101111 01100110 00100000
01101101
01100101 01101110
Interest
Check
.
  • File
    001
    Prelude
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse orci ex, pharetra id magna maximus, tempor condimentum dui. Donec dignissim erat eget enim placerat pulvinar. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras cursus dapibus mi, id consectetur quam feugiat in. Morbi molestie nisi tortor, ut tincidunt sem faucibus non. Quisque consequat sapien id tincidunt tincidunt. Nulla eu dolor nec nisi bibendum dapibus eget quis velit. Nunc at purus imperdiet sapien porttitor consectetur at in mi. Pellentesque euismod mi et mollis gravida. Praesent nec maximus justo, porttitor posuere quam. Etiam sed lectus sem. Quisque eu ultrices quam, sed tincidunt dui. Integer sit amet gravida massa.

    Nunc ac blandit tortor. Nullam eu tempor mi. Pellentesque aliquam sem risus, non posuere nisl laoreet nec. Sed at laoreet erat. Duis dictum lacinia justo vel semper. Maecenas efficitur sit amet quam at ullamcorper. Donec lacus augue, pulvinar sed volutpat eget, aliquet quis arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas eros justo, lobortis ac ligula elementum, porttitor ornare magna. Donec pulvinar vel nisl at lobortis. Pellentesque vitae libero lectus.
    File
    002
    The First Cataclysm
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse orci ex, pharetra id magna maximus, tempor condimentum dui. Donec dignissim erat eget enim placerat pulvinar. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras cursus dapibus mi, id consectetur quam feugiat in. Morbi molestie nisi tortor, ut tincidunt sem faucibus non. Quisque consequat sapien id tincidunt tincidunt. Nulla eu dolor nec nisi bibendum dapibus eget quis velit. Nunc at purus imperdiet sapien porttitor consectetur at in mi. Pellentesque euismod mi et mollis gravida. Praesent nec maximus justo, porttitor posuere quam. Etiam sed lectus sem. Quisque eu ultrices quam, sed tincidunt dui. Integer sit amet gravida massa.

    Nunc ac blandit tortor. Nullam eu tempor mi. Pellentesque aliquam sem risus, non posuere nisl laoreet nec. Sed at laoreet erat. Duis dictum lacinia justo vel semper. Maecenas efficitur sit amet quam at ullamcorper. Donec lacus augue, pulvinar sed volutpat eget, aliquet quis arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas eros justo, lobortis ac ligula elementum, porttitor ornare magna. Donec pulvinar vel nisl at lobortis. Pellentesque vitae libero lectus.
    60%
    Story...


code by Nano
 
Last edited:

Alteras

The Sleepy One
Moderator
Supporter
could've used CSS variables to do a Taylor Series for sine and cosine, and use a unit circle to get accurate percentages.
 

Users who are viewing this thread

Top