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

Novel_Worm · June 25, 2021, 1:57pm

Yay! Thank you! I’m still very new to learning all this, and it’s great to have you guys here to help!

TheMidnightAssassin · June 25, 2021, 2:04pm

Pfft, so am I we’re all learning here!

No problem, I’m just here to get people to have fun again:)

Novel_Worm · June 25, 2021, 2:04pm

Well, this thread has been a lifesaver!

stella_vigo · June 25, 2021, 2:07pm

~~just want to let you know that I have a bunch of raw code on my personal thread that you can use for practice~~

Anyway, I’m really glad that my code is helping you with learning I’m also still learning like all of you guys, so that’s why I like to share my code—so that we can help each other

deathinreverie · June 25, 2021, 3:35pm

I’m assuming you mean the slideshow code? ~~which is the only one I’ve posted here xD~~ If so, it’s fine, I was just pointing out a function we already have

deathinreverie · June 25, 2021, 3:40pm

Also, just to say that this isn’t necessarily the case for everyone. Some might just drop it there to show how they’ve done it, but always ask first if you want to use it/a portion of it. Better safe than sorry xD

Novel_Worm · June 25, 2021, 6:47pm

Sure! I don’t copy cide, I just look at these threads to see the effect of a certain command. I use that command, maybe with certain changes like the specific values. Will ask, though!

deathinreverie · June 25, 2021, 6:52pm

Not necessarily copy xD but asking is a good practice either way!

Novel_Worm · June 25, 2021, 6:57pm

Will do! Thank you!

stella_vigo · June 26, 2021, 9:01am

Took me a long time to figure this out

Thank you @TheMidnightAssassin and @deathinreverie for helping me with learning how to code a slideshow!

BackNext

Title Slide

BackNext

Slide 1. Insert a question here. Or maybe a paragraph. I don't know.

Option A

Option B

Option C

Option D

BackNext

Slide 2. Insert a question here. Or maybe a paragraph. I don't know.

Option A

Option B

Option C

Option D

BackNext

Slide 3. Insert a question here. Or maybe a paragraph. I don't know.

Option A

Option B

Option C

Option D

Results

Mostly As: You got this result!

Mostly Bs: You got this result!

Mostly Cs: You got this result!

Mostly Ds: You got this result!

raw code

<div data-theme-slick="1">
<span style="font-size: 20px; display: block; font-family: Garamond; height: 300px; overflow: hidden; background-image: linear-gradient(to bottom right, #0f1a1a, #0a1f2f, #0f0f10); color: white;"><span style="font-size: 20px; display: block; position: relative; margin-top: 0px; pointer-events: none;"><details class="elided" open><summary><span style="font-size: 20px; display: block; position: absolute; bottom: -275px; height: 50px; width; 100px; left: 0; pointer-events: auto; line-height: 50px;">Back</span><span style="font-size: 20px; display: block; position: absolute; bottom: 25px; right: 0px; pointer-events: auto; line-height: 50px;">Next</span></summary><span style="font-size: 50px; font-family: Garamond; display: flex; height: 300px;"><span style="font-size: 30px; margin: auto;">Title Slide</span></span></details></span><span style="font-size: 20px; display: block; position: relative; margin-top: -2px; pointer-events: none;"><details class="elided" open><summary><span style="font-size: 20px; display: block; position: absolute; bottom: -275px; left: -30px; width: 100px; height: 50px; pointer-events: auto; line-height: 50px;">Back</span><span style="font-size: 20px; display: block; position: absolute; bottom: 25px; right: 0px; pointer-events: auto; line-height: 50px;">Next</span></summary><span style="font-size: 50px; font-family: Garamond; display: flex; height: 300px;"><span style="font-size: 18px; display: block; padding: 10px; margin: auto; text-align: justify;">Slide 1. Insert a question here. Or maybe a paragraph. I don't know.<br><br><span style="font-size: 12px; display: block; margin-top: 10px"><li>Option A<br><br>
<li>Option B<br><br>
<li>Option C<br><br>
<li>Option D<br></span></span></span></details></span><span style="font-size: 20px; display: block; position: relative; margin-top: -2px; pointer-events: none;"><details class="elided" open><summary><span style="font-size: 20px; display: block; position: absolute; bottom: -275px; left: -31px; width: 100px; height: 50px; pointer-events: auto; line-height: 50px;">Back</span><span style="font-size: 20px; display: block; position: absolute; bottom: 25px; right: 0px; pointer-events: auto; line-height: 50px">Next</span></summary><span style="font-size: 50px; font-family: Garamond; display: flex; height: 300px;"><span style="font-size: 18px; display: block; padding: 10px; margin: auto; text-align: justify;"> Slide 2. Insert a question here. Or maybe a paragraph. I don't know.<br><br><span style="font-size: 12px; display: block; margin-top: 10px"><li>Option A<br><br>
<li>Option B<br><br>
<li>Option C<br><br>
<li>Option D<br></span></span></span></details></span><span style="font-size: 20px; display: block; position: relative; margin-top: -2px; pointer-events: none;"><details class="elided" open><summary><span style="font-size: 20px; display: block; position: absolute; bottom: -275px; left: -31px; width: 100px; height: 50px; pointer-events: auto; line-height: 50px;">Back</span><span style="font-size: 20px; display: block; position: absolute; bottom: 25px; right: 0px; pointer-events: auto; line-height: 50px;">Next</span></summary><span style="font-size: 50px; font-family: Garamond; display: flex; height: 300px;"><span style="font-size: 18px; display: block; padding: 10px; margin: auto; text-align: justify;">Slide 3. Insert a question here. Or maybe a paragraph. I don't know.<br><br><span style="font-size: 12px; display: block; margin-top: 10px"><li>Option A<br><br>
<li>Option B<br><br>
<li>Option C<br><br>
<li>Option D<br></span></span></span></details></span><span style="font-size: 50px; font-family: Garamond; display: flex; height: 300px;"><span style="font-size: 18px; display: block; padding: 10px; margin: auto; text-align: justify;">Results<br><br><span style="font-size: 12px; display: block; margin-top: 10px"><li>Mostly As: You got this result!<br><br>
<li>Mostly Bs: You got this result!<br><br>
<li>Mostly Cs: You got this result!<br><br>
<li>Mostly Ds: You got this result!<br></span></span></span></details>
</div>

EDIT: Idk why but in the preview all the options are in different lines, but when I hit “save edit” it doesn’t show up that way. Any idea why?

EDIT 2: nvm I just needed to use <li>

Novel_Worm · June 26, 2021, 9:42am

nice! The text is hard to see on the background, tho!

stella_vigo · June 26, 2021, 9:46am

Thanks I guess the background’s not dark enough I’ll make it darker

EDIT: the text should be more visible now

tellyouwhat · June 26, 2021, 4:38pm

should probs go a bit darker since white on a light cyan/blue won’t be visible, maybe black? or a dark gray?

stella_vigo · June 26, 2021, 4:42pm

Just changed it. How’s it now? Trying to go for a soft gradient look

Zena · June 26, 2021, 4:58pm

~~it looks sooo good~~

stella_vigo · June 26, 2021, 4:59pm

Thanks

deathinreverie · June 26, 2021, 6:13pm

Happy to help! This looks pretty good.

TheMidnightAssassin · June 26, 2021, 7:17pm

Activity #5

Make a code based on a random word:

Here’s something I thought of. Vote on the poll I made and I’ll send you a random word through pm. You have a choice to ask for a new one (if you don’t like it) and create a code of your own based on that word. It could be anything you want, as long as the code relates to it.

Poll:

I’m in!
I’ll pass

0 voters

Example:

Word: Polaroid

Code Example:

Noémie Is a female name of French origin, meaning “pleasantness” ⟪ coded by Aevyn ⟫

raw code

<div align=center>
<span style="font-size:; display: block; border: 2px solid white; width: 220px; height: 365px; background-position: center; background-color: white; margin: 20px; padding: 10px; "><span style="font-size:; display: block; border: 2px solid black; width: 195px; height: 240px; background-position: center; background-color: white; background-image: url(https://i.pinimg.com/236x/97/67/53/9767532eca76c4a68a7e2ff55580587d.jpg); margin-top: 10px; margin-left: 10px; margin-right: 5px;"> </span> <span style="font-size:17px; display: block; margin-top: 12px; font-family: copperplate; letter-spacing: 1px; color: black;">Noémie</span><span style="font-size:; display: block; border: 0.5px solid black; width: 85px; height:;"> </span> <span style="font-size:12px; display: block; margin-top: 12px; font-family: verdana; letter-spacing: 1px; color: black;">Is a female name of French origin, meaning “pleasantness”</span></span> 
<span style="font-size: 10px; display:block; font-family: copperplate; text-align: center; letter-spacing: 1px; color:;">  ⟪ coded by Aevyn ⟫ </span>
</div>

raw code

<div align=center>
<span style="font-size:; display: block; border: solid 1px #211F2B; border-radius: 2px; background-color: #211F2B; width: 500px; height: auto; padding: 15px;">
<span style="font-size: 14px; display: block; letter-spacing: 2px; line-height: 1.5; text-align: right; font-family: arial; text-transform: uppercase; color: #98979F; text-shadow: 3px 3px #4A4853;"> <i> Activity #5</i> <span style="font-size:; display: block; border: 0.5px solid #98979F; margin-top: 3px; margin-left: 385px; width: 115px; height:;"> </span></span>

<span style="font-size: 9px; display: block; border-left: solid 2px #98979F; padding: 1% 2%; text-transform: uppercase; text-align: left; letter-spacing: 2.5px; text-shadow: none; line-height: 1.5px; color: #98979F; margin: 5px;">Make a code based on a random word:</span>

<span style="font-size: 11px; display: block; border-right: solid 2px #98979F; padding: 1% 2%; text-transform: lowercase; text-align: justify; letter-spacing: 3px; text-shadow: none; line-height: 14px; color: #98979F; margin: 5px;"> Here’s something I thought of. Vote on the poll I made and I’ll send you a random word through pm. You have a choice to ask for a new one (if you don’t like it) and create a code of your own based on that word. It could be anything you want, as long as the code relates to it. </span>

<span style="font-size: 9px; display: block; border-left: solid 2px #98979F; padding: 1% 2%; text-transform: uppercase; text-align: left; letter-spacing: 2.5px; text-shadow: none; line-height: 1.5px; color: #98979F; margin: 5px;">Poll:</span>

<span style="font-size: 11px; display: block; border-right: solid 2px #98979F; padding: 1% 2%; text-transform: lowercase; text-align: justify; letter-spacing: 3px; text-shadow: none; line-height: 14px; color: #98979F; margin: 5px;"> 

[poll type=regular results=always public=true chartType=bar]
* I’m in!
* I’ll pass
[/poll]

</span>

<span style="font-size: 9px; display: block; border-left: solid 2px #98979F; padding: 1% 2%; text-transform: uppercase; text-align: left; letter-spacing: 2.5px; text-shadow: none; line-height: 1.5px; color: #98979F; margin: 5px;">Example:</span>

<span style="font-size: 11px; display: block; border-right: solid 2px #98979F; padding: 1% 2%; text-transform: lowercase; text-align: justify; letter-spacing: 3px; text-shadow: none; line-height: 14px; color: #98979F; margin: 5px;"> 
Word: Polaroid </span>

<span style="font-size: 9px; display: block; border-left: solid 2px #98979F; padding: 1% 2%; text-transform: uppercase; text-align: left; letter-spacing: 2.5px; text-shadow: none; line-height: 1.5px; color: #98979F; margin: 5px;">Code Example:</span>
<div align=center>

<div align=center>
<span style="font-size:; display: block; border: 2px solid white; width: 220px; height: 365px; background-position: center; background-color: white; margin: 20px; padding: 10px; "><span style="font-size:; display: block; border: 2px solid black; width: 195px; height: 240px; background-position: center; background-color: white; background-image: url(https://i.pinimg.com/236x/97/67/53/9767532eca76c4a68a7e2ff55580587d.jpg); margin-top: 10px; margin-left: 10px; margin-right: 5px;"> </span> <span style="font-size:17px; display: block; margin-top: 12px; font-family: copperplate; letter-spacing: 1px; color: black;">Noémie</span><span style="font-size:; display: block; border: 0.5px solid black; width: 85px; height:;"> </span> <span style="font-size:12px; display: block; margin-top: 12px; font-family: verdana; letter-spacing: 1px; color: black;">Is a female name of French origin, meaning “pleasantness”</span></span> 
<span style="font-size: 10px; display:block; font-family: copperplate; text-align: center; letter-spacing: 1px; color:;">  ⟪ coded by Aevyn ⟫ </span>
<br>

[details="raw code"]

    <div align=center>
    <span style="font-size:; display: block; border: 2px solid white; width: 220px; height: 365px; background-position: center; background-color: white; margin: 20px; padding: 10px; "><span style="font-size:; display: block; border: 2px solid black; width: 195px; height: 240px; background-position: center; background-color: white; background-image: url(https://i.pinimg.com/236x/97/67/53/9767532eca76c4a68a7e2ff55580587d.jpg); margin-top: 10px; margin-left: 10px; margin-right: 5px;"> </span> <span style="font-size:17px; display: block; margin-top: 12px; font-family: copperplate; letter-spacing: 1px; color: black;">Noémie</span><span style="font-size:; display: block; border: 0.5px solid black; width: 85px; height:;"> </span> <span style="font-size:12px; display: block; margin-top: 12px; font-family: verdana; letter-spacing: 1px; color: black;">Is a female name of French origin, meaning “pleasantness”</span:</span> 
    <span style="font-size: 10px; display:block; font-family: copperplate; text-align: center; letter-spacing: 1px; color:;">  ⟪ coded by Aevyn ⟫ </span>
    </div>

[/details]

</div>
<span>
</div>

TheMidnightAssassin · June 26, 2021, 7:18pm

I’m on time! Hope you enjoy this one:3

taglist

@stella_vigo @48lexr @anon25068527 @zena

48lexR · June 26, 2021, 7:19pm

It is impossible to read these on mobile-