One last code before I go to bed. It should work on phones and in dark mode. Oh, psst, if you’re on desktop, hover your cursor over the “x” and the “back | next” text box, as well as the big (transparent) text box in the middle cursor: tag and wanna know if it works for y’all too.
coded_notes.exe X
25 June 2022
Daily Journal. . . Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu nisi id dolor cursus condimentum in a lorem. Vestibulum odio arcu, hendrerit at turpis nec, pharetra maximus est. Proin volutpat porttitor posuere. Donec vitae maximus erat. Curabitur aliquam faucibus ullamcorper. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer porta erat sed sem placerat consequat.⭐︎ ✧ coded by stella_vigo ✧ ⭐︎
◁ Back | Next ▷
4 Likes
stella_vigo:
Oh, psst, if you’re on desktop, hover your cursor over the “x” and the “back | next” text box, as well as the big (transparent) text box in the middle
Yes, the cursor does change, it’s working on my end!
1 Like
Scroll-Snap Gallery
Images from: https://doodleipsum.com/
Source Code
<span style="font-size: 45px; display: block; text-align: center;">Scroll-Snap Gallery</span>
<span style="font-size:; display: block; height: 400px; overflow-x: hidden; scroll-snap-type: y mandatory; scroll-behavior: smooth;">
<span style="font-size:; display: inline-block; height: 100%; width: 100%; padding: 30px; box-sizing: border-box; scroll-snap-align: start; background-image: url('https://doodleipsum.com/400/abstract?i=533d71e7733d1ad05ecdc25051eed663'); background-size: contain; background-repeat: no-repeat; background-position: center;"></span>
<span style="font-size:; display: inline-block; height: 100%; width: 100%; padding: 30px; box-sizing: border-box; scroll-snap-align: start; background-image: url('https://doodleipsum.com/400/abstract?i=d298131eb7322b7002e6fd50e9dd8c41'); background-size: contain; background-repeat: no-repeat; background-position: center;"></span>
<span style="font-size:; display: inline-block; height: 100%; width: 100%; padding: 30px; box-sizing: border-box; scroll-snap-align: start; background-image: url('https://doodleipsum.com/400/abstract?i=cb0515299c600124805d923f3619c1ad'); background-size: contain; background-repeat: no-repeat; background-position: center;"></span>
<span style="font-size:; display: inline-block; height: 100%; width: 100%; padding: 30px; box-sizing: border-box; scroll-snap-align: start; background-image: url('https://doodleipsum.com/400/abstract?i=f701b63cfe38e57fa0408c238af32027'); background-size: contain; background-repeat: no-repeat; background-position: center;"></span>
<span style="font-size:; display: inline-block; height: 100%; width: 100%; padding: 30px; box-sizing: border-box; scroll-snap-align: start; background-image: url('https://doodleipsum.com/400/abstract?i=5af1ef6e7de4a6e775448b69ac0a9851'); background-size: contain; background-repeat: no-repeat; background-position: center;"></span>
</span>
<span style="font-size:; display: block; text-align: center;">Images from: https://doodleipsum.com/</span>
2 Likes
ㅤ 🔍 ㅤ RavenHeart Commissions
ㅤㅤ X
home
tos
price
queue
uhhh, i was actually gonna make a whole big code but it took too long and i was getting impatient lmao so have this~ (links don't work)
Contacts:
instagram
email
other socials
ㅤ▷ be free — kb
ㅤ ㅤㅤ ㅤ 2:38 - 3:07
raw code
<div align=center>
<span style="font-size:; display: block; background-color: #F0F2F7; padding: 15px; width: 500px; height: auto;">
<div align= left>
<span style="font-size:; display: inline-block; width: 500px; border: 2px solid #C5CFDE; background-color: #C5CFDE; border-radius: 20px;">
<span style="font-size: 12px; background-color: #E6EBF2; display: inline-block; border-radius: 20px 0px 0px 20px; width: 420px; padding: 10px; letter-spacing: 2px; text-align: left; font-family: arial; text-transform: uppercase; color: #7B8594;">ㅤ 🔍 ㅤ RavenHeart Commissions
</span>
<span style="font-size: 12px; display: inline-block; text-align: right; font-family: arial; text-transform: uppercase; color: #7B8594;"> ㅤㅤ X
</span>
</span>
<span style="font-size:; display: flex; justify-content: space-around;">
<span style="font-size: 15px; display: inline-block; border: 2px solid #C5CFDE; background-color: #C5CFDE; width: 120px; height: auto; margin-top: 10px; margin-bottom: 0px; margin-left: 0px; margin-right: 5px; padding-top: 7px; padding-bottom: 7px; text-transform: lowercase; text-align: center; font-family: arial; letter-spacing: 3px; color: #7B8594;">home
</span>
<span style="font-size: 15px; display: inline-block; border: 2px solid #C5CFDE; background-color: #C5CFDE; width: 120px; height: auto; margin-top: 10px; margin-bottom: 0px; margin-left: 0px; margin-right: 5px; padding-top: 7px; padding-bottom: 7px; text-transform: lowercase; text-align: center; font-family: arial; letter-spacing: 3px; color: #7B8594;">tos
</span>
<span style="font-size: 15px; display: inline-block; border: 2px solid #C5CFDE; background-color: #C5CFDE; width: 120px; height: auto; margin-top: 10px; margin-bottom: 0px; margin-left: 0px; margin-right: 5px; padding-top: 7px; padding-bottom: 7px; text-transform: lowercase; text-align: center; font-family: arial; letter-spacing: 3px; color: #7B8594;">price
</span>
<span style="font-size: 15px; display: inline-block; border: 2px solid #C5CFDE; background-color: #C5CFDE; width: 120px; height: auto; margin-top: 10px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; padding-top: 7px; padding-bottom: 7px; text-transform: lowercase; text-align: center; font-family: arial; letter-spacing: 3px; color: #7B8594;">queue
</span>
</span>
<span style="font-size:; display: flex; justify-content: space-around;">
<span style="font-size:; display: inline-block; background-image: url(https://i.pinimg.com/564x/90/ad/08/90ad084404f66fceb74b92cd7d01e90d.jpg); background-position: center; width: 150px; height: 143px; margin-top: 10px; margin-bottom: 0px; margin-left: 0px; margin-right: 12px; border-radius: 2px;">
</span>
<span style="font-size: 11px; display: inline-block; border: 1.5px solid #C5CFDE; width: 155px; height: 124px; margin-top: 10px; margin-bottom: 0px; margin-left: 0px; margin-right: 12px; padding: 8px; text-transform: lowercase; text-align: left; font-family: arial; letter-spacing: 3px; color: #7B8594;"> uhhh, i was actually gonna make a whole big code but it took too long and i was getting impatient lmao so have this~ (links don't work)
</span>
<span style="font-size: 15px; display: block; width: 160px; height: auto; margin-top: 13.5px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; text-transform: lowercase; text-align: center; font-family: arial; letter-spacing: 3px; color: #7B8594;"> Contacts:
<span style="font-size: 11px; display: block; border: 1.5px solid #C5CFDE; width: 160px; height: auto; margin-top: 7px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; padding-top: 7px; padding-bottom: 7px; text-transform: lowercase; text-align: center; font-family: arial; letter-spacing: 3px; color: #7B8594;">instagram
</span>
<span style="font-size: 11px; display: block; border: 1.5px solid #C5CFDE; width: 160px; height: auto; margin-top: 7px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; padding-top: 7px; padding-bottom: 7px; text-transform: lowercase; text-align: center; font-family: arial; letter-spacing: 3px; color: #7B8594;">email
</span>
<span style="font-size: 11px; display: block; border: 1.5px solid #C5CFDE; width: 160px; height: auto; margin-top: 7px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; padding-top: 7px; padding-bottom: 7px; text-transform: lowercase; text-align: center; font-family: arial; letter-spacing: 3px; color: #7B8594;">other socials
</span>
</span>
</span>
<span style="font-size:; display: inline-block; width: 500px; height: 22px; border: 2px solid #C5CFDE; background-color: #C5CFDE; margin-top: 10px;">
<span style="font-size: 10px; display: inline-block; width: 344px; text-transform: lowercase; text-align: left; font-family: arial; letter-spacing: 3px; color: #7B8594;"> ㅤ▷ be free — kb
</span>
<span style="font-size: 10px; background-color: #E6EBF2; display: inline-block; padding: 3.5px; text-transform: lowercase; text-align: right; font-family: arial; letter-spacing: 3px; color: #7B8594;">ㅤ ㅤㅤ ㅤ 2:38 - 3:07
</span>
</span>
</div>
</span>
</div>
rip phone users im sorry, but its been a long time since i coded and i wanted to copy my carrd but uh it took too much outta me (not to mention its almost 5am and i spent 4 hours on this shit-) so imma just treat this as an exercise because this almost made me quit multiple times
5 Likes
@DeeIsDead here’s the coding thread I like to hang out in! There are a lot of helpful exercises if you scroll up, as well as raw code you can practice with
Edit: @Farleykins here’s the thread too XD
4 Likes
Here’s the first piece of code I ever delivered through my graphic shop, starry sky !
1:45 ━━━|━━━━━━━━ 3:50now playing: My Nocturnal Serenade – YOHIO
Queue:
≡ Where the Dark Things Are – Kerli Become the Beast – Karliene Free the Animal – Sia Pomegrenate of a Dead Girl – Gloombug Welcome To My World – Tommee Profitt, LYRA OUTLAW – Neoni The Horror and the Wild – The Amazing Devil
⭐︎ ✧ coded by stella_vigo ✧ ⭐︎
And man, been a long time since code was last posted here
3 Likes
Thank you! Sorry it’s been… 2.5 years
I have forgotten how to code though so I will be using this space more the coming days!
2 Likes
Currently copying and pasting old code I’ve done to learn how to do this again.
Alright, so that’s how I make a box.
Testing padding here. Also, apparently "color" changes the font color and not "font-color" here. Pretty neat.
Now how do I scroll again
Now to test scrolling with overflow-y.
Testing the scrolling function.
Can you scroll through
…
this?
3 Likes
Can confirm, scrolling worked!
2 Likes
I used the 
