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

The Artists' Showroom Coding Wizards
,
188

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

2 Likes
189

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
190

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

3 Likes
191

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

3 Likes
192

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

4 Likes
193

Is it okay if I choose my own word? :sweat_smile:

3 Likes
194

That’s absolutely fine! I just wanted to do something fun:)

3 Likes
195

Oh that’s cool. The data themes work here. They didn’t on the original wp forums which was frustrating.

4 Likes
196

Yeah wow okay so yours is alot smarter and cleaner than how I did mine. Kinda jealous I didn’t figure that out x.x

Edit: Oh wait I think it’s the same technique, we just structure our code differently xD.
Edit 2: Got rid of some redundant code.

BackNext She saw a boy in the water.
BackNext Watching.
BackNext Watching..
BackNext Watching...
BackNext But that was all he ever did.
BackNext He was there every morning as she washed her face in the bathroom sink, he was there again in the night and every other time she saw her own reflection.
BackNext He was there every morning as she washed her face in the bathroom sink, he was there again in the night and every other time she saw her own reflection.
BackNext He was there every morning as she washed her face in the bathroom sink, he was there again in the night and every other time she saw her own reflection.
BackNext “Why don’t you say something?

Speak out and let them know you’re real.”
BackNext The boy did not respond but stared back at her with the same pleading eyes, which grew more and more desperate by the day.
BackNext “I know” she said,
BackNext “One of these days you’ll be free."
BackNext As she reached out to the boy, he too reached out to her, only when they touched,
BackNext ...the ripples distorted his image before the water in the sink began to steady and his image began to reform.
BackNext Outside she could hear footsteps getting louder and louder as it approached. This isn’t me, she thought looking down at her dress.
BackNext How many times had she tried to break free now? Tried to speak out only to have her words caught in her throat.
BackNext How many times had she tried to break free now? Tried to speak out only to have her words caught in her throat.
BackNext The door behind her was thrown open,
BackNext “Everything okay dear?
BackNext ... You looked like you had something to say to us and your father and I got worried when you ran off.”
BackNext She didn’t turn around but took a moment to compose herself. Leaning over the sink she looked into the boy’s eyes and said aloud
BackNext “Oh yes, I’m fine, just wanted to say I love you so much.”
The boy stared back at her with those eyes, ever so pitiful.
Source Code 
<span style="font-size: 2vmin; display: block; height: 500px; overflow: hidden;">
  <span style="font-size:; 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: -472px; left: 0; width: 100px; height: 50px; line-height: 50px; pointer-events: auto;">Back</span><span style="font-size: 20px; display: block; line-height: 50px; width: 100px; height: 50px; position: absolute; bottom: 30px; right: 0; pointer-events: auto;">Next</span></summary>
      <span style="font-size: 2em; font-family: Georgia; display: flex; height: 502px;"><span style="font-size:; margin: auto;">She saw a boy in the water.</span></span>
    </details>
  </span>
  <span style="font-size:; 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: -472px; left: 0; width: 100px; height: 50px; line-height: 50px; pointer-events: auto;">Back</span><span style="font-size: 20px; display: block; line-height: 50px; width: 100px; height: 50px; position: absolute; bottom: 30px; right: 0; pointer-events: auto;">Next</span></summary>
      <span style="font-size: 3em; font-family: Georgia; display: flex; height: 502px;"><span style="font-size:; margin: auto;">Watching.</span></span>
    </details>
  </span>
  <span style="font-size:; 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: -472px; left: 0; width: 100px; height: 50px; line-height: 50px; pointer-events: auto;">Back</span><span style="font-size: 20px; display: block; line-height: 50px; width: 100px; height: 50px; position: absolute; bottom: 30px; right: 0; pointer-events: auto;">Next</span></summary>
      <span style="font-size: 3em; font-family: Georgia; display: flex; height: 502px;"><span style="font-size:; margin: auto;">Watching..</span></span>
    </details>
  </span>
  <span style="font-size:; 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: -472px; left: 0; width: 100px; height: 50px; line-height: 50px; pointer-events: auto;">Back</span><span style="font-size: 20px; display: block; line-height: 50px; width: 100px; height: 50px; position: absolute; bottom: 30px; right: 0; pointer-events: auto;">Next</span></summary>
      <span style="font-size: 3em; font-family: Georgia; display: flex; height: 502px;"><span style="font-size:; margin: auto;">Watching...</span></span>
    </details>
  </span>
  <span style="font-size:; 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: -472px; left: 0; width: 100px; height: 50px; line-height: 50px; pointer-events: auto;">Back</span><span style="font-size: 20px; display: block; line-height: 50px; width: 100px; height: 50px; position: absolute; bottom: 30px; right: 0; pointer-events: auto;">Next</span></summary>
      <span style="font-size: 3em; font-family: Georgia; display: flex; height: 502px;"><span style="font-size:; margin: auto;">But that was all he ever did.</span></span>
    </details>
  </span>
  <span style="font-size:; 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: -472px; left: 0; width: 100px; height: 50px; line-height: 50px; pointer-events: auto;">Back</span><span style="font-size: 20px; display: block; line-height: 50px; width: 100px; height: 50px; position: absolute; bottom: 30px; right: 0; pointer-events: auto;">Next</span></summary>
      <span style="font-size: 2em; font-family: Georgia; display: flex; height: 502px;"><span style="font-size:; margin: auto 10%; padding: 0 10%;">He was there every morning as she washed her face in the bathroom sink,<span style="font-size:; opacity: 0;"> he was there again in the night and every other time she saw her own reflection.</span></span></span>
    </details>
  </span>
  <span style="font-size:; 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: -472px; left: 0; width: 100px; height: 50px; line-height: 50px; pointer-events: auto;">Back</span><span style="font-size: 20px; display: block; line-height: 50px; width: 100px; height: 50px; position: absolute; bottom: 30px; right: 0; pointer-events: auto;">Next</span></summary>
      <span style="font-size: 2em; font-family: Georgia; display: flex; height: 502px;"><span style="font-size:; margin: auto 10%; padding: 0 10%;">He was there every morning as she washed her face in the bathroom sink, he was there again in the night<span style="font-size:; opacity: 0;"> and every other time she saw her own reflection.</span></span></span>
    </details>
  </span>
  <span style="font-size:; 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: -472px; left: 0; width: 100px; height: 50px; line-height: 50px; pointer-events: auto;">Back</span><span style="font-size: 20px; display: block; line-height: 50px; width: 100px; height: 50px; position: absolute; bottom: 30px; right: 0; pointer-events: auto;">Next</span></summary>
      <span style="font-size: 2em; font-family: Georgia; display: flex; height: 502px;"><span style="font-size:; margin: auto 10%; padding: 0 10%;">He was there every morning as she washed her face in the bathroom sink, he was there again in the night and every other time she saw her own reflection.</span></span>
    </details>
  </span>
  <span style="font-size:; 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: -472px; left: 0; width: 100px; height: 50px; line-height: 50px; pointer-events: auto;">Back</span><span style="font-size: 20px; display: block; line-height: 50px; width: 100px; height: 50px; position: absolute; bottom: 30px; right: 0; pointer-events: auto;">Next</span></summary>
      <span style="font-size: 2em; font-family: Georgia; display: flex; height: 502px;"><span style="font-size:; margin: auto 10%; padding: 0 10%;">“Why don’t you say something?<br><br><span style="font-size:; display: inline-block; width: 2em;"> </span>Speak out and let them know you’re real.”</span></span>
    </details>
  </span>
  <span style="font-size:; 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: -472px; left: 0; width: 100px; height: 50px; line-height: 50px; pointer-events: auto;">Back</span><span style="font-size: 20px; display: block; line-height: 50px; width: 100px; height: 50px; position: absolute; bottom: 30px; right: 0; pointer-events: auto;">Next</span></summary>
      <span style="font-size: 2em; font-family: Georgia; display: flex; height: 502px; line-height: 1.5em;"><span style="font-size:; margin: auto 10%; padding: 0 10%;">The boy did not respond but stared back at her with the same pleading eyes, which grew more and more <span style="font-size: 1.5em;">desperate by the day.</span></span></span>
    </details>
  </span>
  <span style="font-size:; 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: -472px; left: 0; width: 100px; height: 50px; line-height: 50px; pointer-events: auto;">Back</span><span style="font-size: 20px; display: block; line-height: 50px; width: 100px; height: 50px; position: absolute; bottom: 30px; right: 0; pointer-events: auto;">Next</span></summary>
      <span style="font-size: 2em; font-family: Georgia; display: flex; height: 502px;"><span style="font-size:; margin: auto;">“I know” she said,</span></span>
    </details>
  </span>
  <span style="font-size:; 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: -472px; left: 0; width: 100px; height: 50px; line-height: 50px; pointer-events: auto;">Back</span><span style="font-size: 20px; display: block; line-height: 50px; width: 100px; height: 50px; position: absolute; bottom: 30px; right: 0; pointer-events: auto;">Next</span></summary>
      <span style="font-size: 2em; font-family: Georgia; display: flex; height: 502px;"><span style="font-size:; margin: auto; text-align: center;">“One of these days you’ll be free."</span></span>
    </details>
  </span>
  <span style="font-size:; 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: -472px; left: 0; width: 100px; height: 50px; line-height: 50px; pointer-events: auto;">Back</span><span style="font-size: 20px; display: block; line-height: 50px; width: 100px; height: 50px; position: absolute; bottom: 30px; right: 0; pointer-events: auto;">Next</span></summary>
      <span style="font-size: 2em; font-family: Georgia; display: flex; height: 502px;"><span style="font-size:; margin: auto; padding: 0 10%;">As she reached out to the boy, he too reached out to her, only when they touched,</span></span>
    </details>
  </span>
  <span style="font-size:; 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: -472px; left: 0; width: 100px; height: 50px; line-height: 50px; pointer-events: auto;">Back</span><span style="font-size: 20px; display: block; line-height: 50px; width: 100px; height: 50px; position: absolute; bottom: 30px; right: 0; pointer-events: auto;">Next</span></summary>
      <span style="font-size: 2em; font-family: Georgia; display: flex; height: 502px;"><span style="font-size:; margin: auto; padding: 0 10%;">...the ripples distorted his image before the water in the sink began to steady and his image began to reform.</span></span>
    </details>
  </span>
  <span style="font-size:; 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: -472px; left: 0; width: 100px; height: 50px; line-height: 50px; pointer-events: auto;">Back</span><span style="font-size: 20px; display: block; line-height: 50px; width: 100px; height: 50px; position: absolute; bottom: 30px; right: 0; pointer-events: auto;">Next</span></summary>
      <span style="font-size: 2em; font-family: Georgia; display: flex; height: 502px;"><span style="font-size:; margin: auto; padding: 0 10%;">Outside she could hear footsteps getting louder and louder as it approached. This isn’t me, she thought looking down at her dress. </span></span>
    </details>
  </span>
  <span style="font-size:; 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: -472px; left: 0; width: 100px; height: 50px; line-height: 50px; pointer-events: auto;">Back</span><span style="font-size: 20px; display: block; line-height: 50px; width: 100px; height: 50px; position: absolute; bottom: 30px; right: 0; pointer-events: auto;">Next</span></summary>
      <span style="font-size: 2em; line-height: 1.5em; font-family: Georgia; display: flex; height: 502px; text-align: justify;"><span style="font-size:; margin: auto; padding: 0 10%;"> How many times had she tried to break free now? Tried to speak out only to have her words <span style="font-size: 1.5em; opacity: 0;">caught in her throat.</span></span></span>
    </details>
  </span>
  <span style="font-size:; 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: -472px; left: 0; width: 100px; height: 50px; line-height: 50px; pointer-events: auto;">Back</span><span style="font-size: 20px; display: block; line-height: 50px; width: 100px; height: 50px; position: absolute; bottom: 30px; right: 0; pointer-events: auto;">Next</span></summary>
      <span style="font-size: 2em; line-height: 1.5em; font-family: Georgia; display: flex; height: 502px; text-align: justify;"><span style="font-size:; margin: auto; padding: 0 10%;"> How many times had she tried to break free now? Tried to speak out only to have her words <span style="font-size: 1.5em;">caught in her throat.</span></span></span>
    </details>
  </span>
  <span style="font-size:; 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: -472px; left: 0; width: 100px; height: 50px; line-height: 50px; pointer-events: auto;">Back</span><span style="font-size: 20px; display: block; line-height: 50px; width: 100px; height: 50px; position: absolute; bottom: 30px; right: 0; pointer-events: auto;">Next</span></summary>
      <span style="font-size: 2em; line-height: 1.5em; font-family: Georgia; display: flex; height: 502px; text-align: justify;"><span style="font-size:; margin: auto; padding: 0 10%;">The door behind her was thrown open, </span></span>
    </details>
  </span>
  <span style="font-size:; 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: -472px; left: 0; width: 100px; height: 50px; line-height: 50px; pointer-events: auto;">Back</span><span style="font-size: 20px; display: block; line-height: 50px; width: 100px; height: 50px; position: absolute; bottom: 30px; right: 0; pointer-events: auto;">Next</span></summary>
      <span style="font-size: 2em; font-family: Georgia; display: flex; height: 502px; text-align: justify;"><span style="font-size:; margin: auto; padding: 0 10%;">“Everything okay dear?</span></span>
    </details>
  </span>
  <span style="font-size:; 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: -472px; left: 0; width: 100px; height: 50px; line-height: 50px; pointer-events: auto;">Back</span><span style="font-size: 20px; display: block; line-height: 50px; width: 100px; height: 50px; position: absolute; bottom: 30px; right: 0; pointer-events: auto;">Next</span></summary>
      <span style="font-size: 2em; font-family: Georgia; display: flex; height: 502px; "><span style="font-size:; margin: auto; padding: 0 10%;">... You looked like you had something to say to us and your father and I got worried when you ran off.”</span></span>
    </details>
  </span>
  <span style="font-size:; 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: -472px; left: 0; width: 100px; height: 50px; line-height: 50px; pointer-events: auto;">Back</span><span style="font-size: 20px; display: block; line-height: 50px; width: 100px; height: 50px; position: absolute; bottom: 30px; right: 0; pointer-events: auto;">Next</span></summary>
      <span style="font-size: 2em; font-family: Georgia; display: flex; height: 502px; "><span style="font-size:; margin: auto; padding: 0 10%;">She didn’t turn around but took a moment to compose herself. Leaning over the sink she looked into the boy’s eyes and said aloud</span></span>
    </details>
  </span>
  <span style="font-size:; 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: -472px; left: 0; width: 100px; height: 50px; line-height: 50px; pointer-events: auto;">Back</span><span style="font-size: 20px; display: block; line-height: 50px; width: 100px; height: 50px; position: absolute; bottom: 30px; right: 0; pointer-events: auto;">Next</span></summary>
      <span style="font-size: 2em; font-family: Georgia; display: flex; height: 502px; "><span style="font-size:; margin: auto; padding: 0 10%;">“Oh yes, I’m fine, just wanted to say I love you so much.”</span></span>
    </details>
  </span>
  <span style="font-size:; display: block; position: relative; margin-top: -2px; pointer-events: none;">
    <details class="elided" open>
      <summary></summary>
      <span style="font-size: 2em; font-family: Georgia; display: flex; height: 502px; "><span style="font-size:; margin: auto; padding: 0 10%;">The boy stared back at her with those eyes, ever so pitiful.</span></span>
    </details>
  </span>
</span>
5 Likes
197

Edit:
If anyone is reading this, here is the updated version: Nyctophilia; a coding thread (new/old coders are encouraged to join!) - #250 by SockMonster1

This is one of my codes I was working on during the wp days. I first posted it on wacky to keep it safe for when the official wp forums died but that thread has now been sunk and hidden but now that people seem to be interested in coding again I thought I’d repost it here and hope someone can use this technique to create something cool.

Just finished updating it yet again since discourse did some updates (9 days ago I think it was) which broke all my svg animations x.x

Click on the menu icon.
Source Code 
<span style="font-size:; color: rgb(50, 50, 50); display: block; width: 300px; height: 280px; padding: 50px 30px 30px 30px; background: white; position: relative; overflow: hidden; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;">
  <span style="font-size:; display: block; width: 100%; height: auto; min-height: 290px; position: absolute; top: 0; left: 0;">
    <span style="font-size:; display: block; box-sizing: border-box; padding-left: 20px; height: 100%; width: 100%; position: absolute; pointer-events: none;">
      <span style="font-size:; display: block; position: relative; width: 100%; height: 100%; background-image: url('data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%27100%%27 height=%27100%%27><rect id=%27menublock%27 width=%2740px%27 height=%2738px%27 y=%2712%27 fill=%27transparent%27/><defs><rect id=%27menubar%27 width=%2730px%27 x=%275%27 height=%274px%27/></defs><use id=%27menubar_one%27 href=%27%23menubar%27 y=%2720%27 style=%27transform-origin: 5px 20px;%27/><use id=%27menubar_two%27 href=%27%23menubar%27 y=%2730%27/><use id=%27menubar_three%27 href=%27%23menubar%27 y=%2740%27 style=%27transform-origin: 5px 42px;%27/><rect id=%27menubody%27 height=%271%27 width=%27250%27 fill=%27rgb(60, 60, 60)%27></rect><g id=%27menuitem_one%27 class=%27menuitem%27><text font-size=%2720px%27 x=%2710%27 y=%2790%27 fill=%27white%27>Item 1</text><rect width=%27210%27 height=%271%27 fill=%27rgb(170, 170, 170)%27 y=%27110%27/></g><g id=%27menuitem_two%27 class=%27menuitem%27><text font-size=%2720px%27 x=%2710%27 y=%27150%27 fill=%27white%27>Item 2</text><rect width=%27210%27 height=%271%27 fill=%27rgb(170, 170, 170)%27 y=%27170%27/></g><g id=%27menuitem_three%27 class=%27menuitem%27><text font-size=%2720px%27 x=%2710%27 y=%27210%27 fill=%27white%27>Item 3</text><rect width=%27210%27 height=%271%27 fill=%27rgb(170, 170, 170)%27 y=%27230%27/></g><animate/><style>.menuitem { font: 1.2em Arial; transform: translateX(-220px); -webkit-transition: all 0.1s ease; -moz-transition: all 0.1s ease; -o-transition: all 0.1s ease; transition: all 0.1s ease; } %23menubar_one, %23menubar_two, %23menubar_three, %23menublock { -webkit-transition: all 0.3s 0s ease; -moz-transition: all 0.3s 0s ease; -o-transition: all 0.3s 0s ease; transition: all 0.2s 0.3s ease; } %23menubody { transform: translateY(50px) scaleY(0); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.3s ease; } @media (min-height: 291px) { .menuitem { transform: translateX(20px); -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } %23menuitem_one { -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; } %23menuitem_two { -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; } %23menuitem_three { -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; } %23menubar_one, %23menubar_two, %23menubar_three, %23menublock { -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } %23menubody { transform: translateY(50px) scaleY(210); -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; -o-transition-duration: 0.4s; transition-duration: 0.4s; } %23menublock { fill: rgb(60, 60, 60); } %23menubar_one { fill: rgb(170, 170, 170); transform: translateX(5px) rotateZ(45deg); } %23menubar_two { fill: rgb(170, 170, 170); opacity: 0; } %23menubar_three { fill: rgb(170, 170, 170); transform: translateX(5px) rotateZ(-45deg); }}</style></svg>')"></span>
    </span>
    <span style="font-size:; display: block; margin: 12px 0 0 20px; width: 40px; position: relative; color: transparent;">
      <details>
        <summary>
          <span style="font-size:; display: inline-block; height: 32px;"></span>
          <span style="font-size:; display: block; height: 40px; width: 100%; position: absolute; top: 12px; cursor: pointer;"></span>
        </summary>
        <span style="font-size:; display: inline-block; min-height: 300px; width: 250px; position: relative;">
          <a href="https://forum.wackywriters.com/t/nyctophilia-a-coding-thread-new-old-coders-are-encouraged-to-join/9166"><span style="font-size:; display: inline-block; width: 100%; height: 40px; margin-top: 12px;"></span></a>
          <a href="https://forum.wackywriters.com/t/nyctophilia-a-coding-thread-new-old-coders-are-encouraged-to-join/9166"><span style="font-size:; display: inline-block; width: 100%; height: 40px; margin-top: 14px;"></span></a>
          <a href="https://forum.wackywriters.com/t/nyctophilia-a-coding-thread-new-old-coders-are-encouraged-to-join/9166"><span style="font-size:; display: inline-block; width: 100%; height: 40px; margin-top: 13px;"></span></a>
        </span>
      </details>
    </span>
  </span>
</span>
6 Likes
198

♤ Liquid Roses ♤ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Coded by the Harbringer of Chaos





4 Likes
199

My word was ‘crescent’ and…

The lips :sparkles:

4 Likes
200

So for this activity, I chose the word “lassitude.”


lassitude noun
/ˈlæs.ə.tuːd/
 a state of physical or mental weariness; lack of energy lassitude: a poem

gulping cups
of sweet, hot tea
body stays up
on depleting energy

heavy eyelids
tap each other
oh God forbid
I succumb to slumber

mouth opens
and yawns audibly
neck weakens
head tilts slowly

jolt upright
must withstand
the call of night
and its beckoning hand

lassitude consumes
my remaining vigor
across the room
awaits torpor

soon I plummet
onto the bed
pillows and blankets
meet my head

darkness surrounds
breaths grow deep
in absence of sounds
I fall asleep

⭐︎ ✧ coded by stella_vigo ✧ ⭐︎

raw code 
<span style="font-size: 12px; display: block; font-family: Garamond; width: 85%; text-align: left; background-color: black; color: white; margin: auto; height: 500px; background-image: url('https://cdn69.picsart.com/192759895001201.gif?to=min&r=640'); background-size: 129%; background-repeat: no-repeat; background-position: center;">
<br><span style="font-size: 50px; display: block; font-family: serif; padding: 10px; letter-spacing: 2.2px; margin-top: 10px; text-align: center;"><i>lassitude</i></span>
<span style="font-size: 18px; display: flex; position: relative; bottom: -300px; margin: auto;">
<span style="font-size: 12px; text-align: left; display: inline-block; padding: 10px; margin: auto; margin-left: 4%; margin-right: 4%; width: 44%; height: 50px; line-height: 1.5; overflow-y: scroll;"><b>noun</b><br>
<span style="font-size: 10px;">/ˈlæs.ə.tuːd/<br></span>
a state of physical or mental weariness; lack of energy</span>
<span style="font-size: 10px; text-align: right; display: inline-block; padding: 10px; margin: auto; margin-left: 4%; margin-right: 4%; width: 44%; height: 50px; line-height: 1.5; overflow-y: scroll"><span style="font-size: 12px; letter-spacing: 1.2px; font-family: serif;"><b><i>lassitude: a poem</i></b></span><br><br>
gulping cups <br>
of sweet, hot tea <br>
body stays up <br>
on depleting energy<br><br>
heavy eyelids <br>
tap each other <br>
oh God forbid <br>
I succumb to slumber<br><br>
mouth opens <br>
and yawns audibly <br>
neck weakens <br>
head tilts slowly<br><br>
jolt upright <br>
must withstand <br>
the call of night <br>
and its beckoning hand<br><br>
lassitude consumes <br>
my remaining vigor <br>
across the room <br>
awaits torpor<br><br>
soon I plummet <br>
onto the bed <br>
pillows and blankets <br>
meet my head<br></span></span></span>

<br>

<span style="font-size: 12px; font-family: Garamond; display: block; margin: auto; text-align: center; color: #e08080; letter-spacing: 1.2px;">`⭐︎` ✧ coded by stella_vigo ✧ `⭐︎`</span>
6 Likes
201

Whoops, forgot.

Raw code 
<span style="font-size: 15px; font: small-caps 12px/30px arial; color: #ffffff; display: block; width: 85%; height: 370px; background-color: #000000; background-size: 100px; text-align: center; margin: auto; padding: 30px 10px; box-shadow: 7px 7px #ff4d4d"><span style="font-size: 27px; line-height: 45px; color: white; font-family: times NR; display: inline-block; margin: auto; text-align: left; width: 90%; height: 15%; border: 3px solid; justify; background-color: black; padding: 5px 3px 0px 11px; text-shadow: 1px 1px #ff9999; text-align: center"> <strong> ♤ <i>Liquid Roses</i> ♤ </strong></span><span style="font-size: 15px; line-height: 13px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin: auto; width: 90%; height: 320px"> <span style="font-size: 11px; display: inline-block; width: 50%; height: 70%; background-color: black; padding: 7px 7px; overflow: scroll; text-align: justify; border: 2px solid #ffffff; text-transform: lowercase; text-kerning: 1px; text-shadow: 0px 0px 2px #ff9999"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br>
<span style="font-size:10px; display: inline-block; margin: auto; text-align: center;">*Coded by the Harbringer of Chaos*</span>
</span><span style="font-size:10px; display: inline-block; height: 250px; margin: 3px 10px">
</span>
<span style="font-size: 1px; font-family: times new roman; color: #ffffff; display: inline-block; width: 50%; height: 70%; border: 2px solid #ffff; background-color: black; background-size: 267px; margin: auto; padding: 7px 7px; background-position: center; background-image: url(https://i.pinimg.com/736x/6e/04/10/6e0410402b3ed5605234bacb78f2d558--graphic-tees-bad-blood.jpg);">
</span>
</span>
</span>
3 Likes
202

@stella_vigo @anon25068527 both of your codes look amazing!

4 Likes
203

Thank you :smiley:

3 Likes
205

Thank you :blush:

2 Likes
206
Kingdom Animalia
There are seven major phyla in Kingdom Animalia, and each one is different. Animals have many differentiated kinds of cells (except for sponges) and are typically diploid, in addition to not having cell walls. There are many more crustaceans than chordates comparatively.
Poliferae
Poliferae are sponges! They are marine animals (except for one species of freshwater sponge), and all sponges are capable of both fatherhood and motherhood. Cnidara
Cnidaria are jellyfish, corals, and anemonies! While they are all drastically different, some clues lead us to believe they all share a common ancestor. Platyhelminthes
Platyhelminthes are flatworms! They are all made up of three layers of cells, and they all are internal parasites that have barely any internal organs. Annelida
Annelids are segmented worms! These include leeches, earthworms, and other bristled worms! While some are parasites, some are not. Mollusca
Mollusca means mollusks! There are an estimated 200,000 species of mollusks worldwide, and all mollusks have an exoskeleton made of chitin. Arthropoda
Arthropods make up 75% of all living (and fossilized) organisms. Like Mollusks, they have exoskeletons of chitin, but they are also motile. Chordata
Chordates are known for having a backbone. This phylum includes humans, chimpanzees, alligators, snakes, birds, and any fishes.
Coded by a friendly Siren. I hope you learned something about animals!
code 
<div>
  <span style="font-size:; display: inline-block; width: 100%; height: 2ch; ">
    <span style="font-size: 25pt; display: block; padding: 1ch; font-family: serif; background: SteelBlue; color: white;"><strong>Kingdom Animalia</strong></span><br>
      <span style="font-size:; display: block; padding: 2ch; font-family: Trebuchet MS, sans-serif; background: SteelBlue;"> There are seven major phyla in Kingdom Animalia, and each one is different. Animals have many differentiated kinds of cells (except for sponges) and are typically diploid, in addition to not having cell walls. There are many more crustaceans than chordates comparatively.</span>
  </span>
</div>
  <span style="font-size:; display: flex; flex-wrap: wrap; margin: 2%; font-family: Trebuchet MS, sans-serif;">
    <span style="font-size:; display: inline-block; width: 14%; height: 50%; margin: 2px; border: 1px solid; padding: 2ch;"><strong>Poliferae</strong><br> Poliferae are sponges! They are marine animals (except for one species of freshwater sponge), and all sponges are capable of both fatherhood and motherhood.</span> 
    <span style="font-size:; display: inline-block; width: 14%; height: 50%; margin: 2px; border: 1px solid; padding: 2ch;"> <strong>Cnidara</strong><br>Cnidaria are jellyfish, corals, and anemonies! While they are all drastically different, some clues lead us to believe they all share a common ancestor.</span>
    <span style="font-size:; display: inline-block; width: 14%; height: 50%; margin: 2px; border: 1px solid; padding: 2ch;"><strong>Platyhelminthes</strong><br>Platyhelminthes are flatworms! They are all made up of three layers of cells, and they all are internal parasites that have barely any internal organs.</span>
    <span style="font-size:; display: inline-block; width: 14%; height: 50%; margin: 2px; border: 1px solid; padding: 2ch;"><strong>Annelida</strong><br> Annelids are segmented worms! These include leeches, earthworms, and other bristled worms! While some are parasites, some are not.</span>
    <span style="font-size:; display: inline-block; width: 14%; height: 50%; margin: 2px; border: 1px solid; padding: 2ch;"><strong>Mollusca</strong><br>Mollusca means mollusks! There are an estimated 200,000 species of mollusks worldwide, and all mollusks have an exoskeleton made of chitin.</span>
    <span style="font-size:; display: inline-block; width: 14%; height: 50%; margin: 2px; border: 1px solid; padding: 2ch;"><strong>Arthropoda</strong><br>Arthropods make up 75% of all living (and fossilized) organisms. Like Mollusks, they have exoskeletons of chitin, but they are also motile.</span>
    <span style="font-size:; display: inline-block; width: 14%; height: 50%; margin: 2px; border: 1px solid; padding: 2ch;"><strong>Chordata</strong><br>Chordates are known for having a backbone. This phylum includes humans, chimpanzees, alligators, snakes, birds, and any fishes.</span>
  </span>

<div align="center">
<span style="font-size:; display: inline-block; background: black; color: white; padding: 2%;"><small>Coded by a friendly Siren. I hope you learned something about animals!</small></span>
</div>
3 Likes
207

Oooh, interesting :eyes:

2 Likes
208

Holy fuck it’s unreadable on mobile

2 Likes