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

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

3 Likes

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!

2 Likes

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

3 Likes

Will do! Thank you!

2 Likes

Took me a long time to figure this out :triumph:

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

BackNextTitle Slide
BackNextSlide 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
  • BackNextSlide 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?

    image

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

    3 Likes

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

    4 Likes

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

    EDIT: the text should be more visible now

    4 Likes

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

    2 Likes

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

    2 Likes

    it looks sooo good :eyes:

    3 Likes

    Thanks :smiley:

    4 Likes

    Happy to help! This looks pretty good. :smiley:

    4 Likes
    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>
    
    
    4 Likes

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

    taglist

    @stella_vigo @48lexr @anon25068527 @zena

    5 Likes

    It is impossible to read these on mobile-

    4 Likes

    I know lmao, I’ll try to make one that more mobile responsive next time-

    2 Likes

    ooooh :eyes:
    I love the example :joy:
    And ummm, I don’t think I can vote in it or see the options? :thinking:
    edit: eep, nvm I was able to vote XD

    4 Likes

    I couldn’t see the poll options but I kept clicking until I stopped on the right one :eyes: :joy:

    3 Likes

    Hmm, that’s weird :thinking: but I’m glad you got it!

    3 Likes

    Use your phone in landscape :slight_smile: that’s what I do

    4 Likes