Nyctophilia; a coding thread (new/old coders are encouraged to join!)

The Artists' Showroom Coding Wizards
,
345

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 :eyes: I used the cursor: tag and wanna know if it works for y’all too.

coded_notes.exeX 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.

Etiam in quam leo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla interdum ipsum orci. Vestibulum orci sapien, vulputate quis sollicitudin vitae, auctor at urna. Aenean sit amet efficitur arcu, in tempus mi. Ut suscipit velit eu risus commodo mattis. Donec feugiat rhoncus arcu nec blandit. Vivamus facilisis, justo ut rutrum blandit, mauris dui congue leo, quis convallis quam turpis eget neque. Aenean porttitor ultrices sem, ullamcorper tincidunt massa pulvinar non. Integer condimentum sapien at dui sollicitudin sodales. In mollis, elit vel convallis venenatis, nulla tortor congue neque, eget commodo metus magna et risus. Ut consectetur lacus eget ipsum ornare, id mattis nisi ultricies. In condimentum rutrum mattis. Suspendisse nisl ex, lacinia scelerisque turpis in, blandit maximus lorem. Pellentesque tellus ipsum, venenatis consequat mauris venenatis, blandit blandit orci.

Aliquam sed faucibus nulla. Aenean accumsan diam a accumsan ultricies. Maecenas tincidunt tortor non elit elementum, sed semper lectus ornare. Suspendisse eu euismod libero. Pellentesque viverra lacus sit amet ligula suscipit, vitae fringilla nibh volutpat. Duis a arcu in lacus iaculis vulputate. Vivamus ut justo nec metus sollicitudin finibus. In varius in lacus vel facilisis. Quisque sit amet neque enim. Donec pretium mauris ut ex dignissim convallis.

⭐︎ ✧ coded by stella_vigo ✧ ⭐︎ ◁ Back | Next ▷
4 Likes
346

Yes, the cursor does change, it’s working on my end!
Also the code looks great!

1 Like
347

Glad to know it works!

And thank you :wisp_heart:

1 Like
348

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
349
ㅤ 🔍 ㅤ 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 :skull: :skull:

5 Likes
351

@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 :blush:

Edit: @Farleykins here’s the thread too XD

4 Likes
352

Thank you! <3

3 Likes
353

Here’s the first piece of code I ever delivered through my graphic shop, starry sky! :smile:

OUT of the WOODS The Playlist
1:45   ━━━|━━━━━━━━   3:50

⇆           ◁     ❚❚     ▷           ↺

now 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 :eyes: miss seeing people code for fun :pensive:

3 Likes
354

This looks gooooood Stella!!! :star_struck:

1 Like
357

Thank you! Sorry it’s been… 2.5 years :sob:

I have forgotten how to code though so I will be using this space more the coming days!

2 Likes
358

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

Now to test scrolling with overflow-y.

Testing the scrolling function.

Can you scroll through

…
…
…
…
…
…

this?

3 Likes
359

Can confirm, scrolling worked!

2 Likes
360

(meant to post this ages ago but welp) this is quite late but i would like to try out the activities! (°◡°) i’ll try the intro form and post that once i’m through. (putting this here for some sense of accountability XD)