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

stella_vigo · June 26, 2021, 8:55pm

Is it okay if I choose my own word?

TheMidnightAssassin · June 26, 2021, 8:57pm

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

SockMonster1 · June 27, 2021, 7:46am

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

SockMonster1 · June 27, 2021, 7:57am

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>

SockMonster1 · June 27, 2021, 10:16am

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>

anon25068527 · June 27, 2021, 11:50am

♤ 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

anon25068527 · June 27, 2021, 11:51am

My word was ‘crescent’ and…

The lips

stella_vigo · June 27, 2021, 12:28pm

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>

anon25068527 · June 27, 2021, 1:54pm

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>

TheMidnightAssassin · June 27, 2021, 2:42pm

@stella_vigo @anon25068527 both of your codes look amazing!

stella_vigo · June 27, 2021, 2:43pm

Thank you

anon25068527 · June 27, 2021, 5:28pm

Thank you

48lexR · June 27, 2021, 5:58pm

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>

TheMidnightAssassin · June 27, 2021, 8:48pm

Oooh, interesting

48lexR · June 27, 2021, 9:50pm

Holy fuck it’s unreadable on mobile

stella_vigo · June 28, 2021, 8:31am

This is really cool

Mind if I modify and use this on my personal thread?

SockMonster1 · June 28, 2021, 8:37am

Sure go ahead

TheMidnightAssassin · June 29, 2021, 2:26am

— Aevyn's Books — — The EllstryleVerse — The Vagarian Duology Vagarious: erratic and unpredictable behavior or direction

Books:
1. King of Destiny
2. House of Lies

Main Characters:
1. Cyning Caestic Eviengaard
2. Quirin Deorc Sidero The Broken Queen Series Broken: (of a person) having given up all hope; despairing

Books:
1. Flight of Kestrel
2. Lake of Whispers
3. Fate of Four
4. Illusion of Hope
5. Fall of Ashes

Main Characters:
1. Kestrel Raevena Eviengaard/Sidero
2. Noctis Lodynstyn Galynthius
3. Ehren Andet Garten/Eviengaard
4. Yfel Beinnan Garten/Eviengaard The Assassin's King Chronicles King: the male ruler of an independent state, especially one who inherits the position by right of birth

Books:
1. The Garden of Killers
2. Light through Broken Glass
3. Two of Blood and Death

Main Characters:
1. Carmen Hecate Makoto/Eviengaard
2. Allyne Lucifer Eviengaard/Makoto Legacy Sequel/Standalone Book:
1. Crown of Thorns

Main Character:
1. Laelynn Eviengaard
Midquel Book:
1. Sea of Shadows

Main Character:
1. Acelyn Romannov
Short Stories/Collections Books:
1. Book of Magis
2. Tales of Fae — Greener Days — The Future Zombie Apocalypse Type: Novel

Genre: Horror, Thriller, Action, Apocalyptic, Sci-Fi, Dystopian, and Supernatural

Main Characters:
1. Kaelyn Abendroth
2. Aedyn Ezekiel

Suppoting/Side Characters:
1. Aedyn Ezekiel
2. Nicole Zaran
3. Alanea Ezekiel
4. Felix Baek
5. Christopher Choi

Summary: A government employee, forger, aspiring singer, hacker, sharpshooter and lab rat are chosen as the first group to try out a new cure. After years of the infected overrunning the United States of America, the top scientists and doctor have finally made the cure, or the next wave. The group of everyday people must avoid getting eaten by the infected, figure out the cure and maybe try not to piss off the U.S. government.
— The AevynVerse — Prequel Book:
1. A Crow's Murder

Main Characterss:
1. Lady Crow (Thuy Thanh Nguyen)

Genres: Murder Mystery, Thriller, and Historical Fiction Shadow and Ice Duology Books:
1. Ice and Shadow
2. Honor and Sacrifice

Main Characters:
1. Aevyn Aura Maestryn
2. Kieran Nyx Crowen

Genres: Fantasy, Action, Thiller, and Magical Realism

raw code

<div align= center>
 <span style="font-size:; display: block; background-color: #F0F8FF; border: solid none">
  <span style="font-size: 55px; display: block; border: 2px solid none; width: 620px; height: 60px; margin: 5px; padding: 10px; letter-spacing: 2px; line-height: 1.5; text-align: center; font-family: tangerine; color: #99adc6; text-shadow: 3px 2px #c7d4e5;">    — Aevyn's Books — </span>
   <span style="font-size:; display: flex; justify-content: space-around; border: 2px solid none; width: 645; height: auto; padding: 10px;">
    <span style="font-size:; display: inline-block; background-position: center; background-image: url(https://i.pinimg.com/236x/6d/b7/9a/6db79a1594fffeb0d9ba8bae9ac23faa.jpg); border: 2px solid none; width: 216px; height: 220px; padding: 10px;"></span>
     <span style="font-size: 23px; display: block; background-color: #F9FCF8; border: 2px solid #DBE9D7; width: 360px; height: 216px; padding: 10px; overflow-y: scroll; text-align: center; text-shadow: 2px 2px #D6E7D1; letter-spacing: 2px; font-family: cursive; color: #BBD4B3;"> <b> — The EllstryleVerse — </b>
      <span style="font-size:; display: block; border: 0.5px solid #DBE9D7; width: 358px; height:; margin-top: 5px;"></span>
       <span style="font-size:15px; display: block; border: 2px solid none; width: 335px; height: auto; margin-top: 5px; padding: 10px; text-transform: uppercase; text-align: left; text-shadow: 2px 2px #D6E7D1; letter-spacing: 2px; font-family: papyrus; color: #C4DBBD;"> <i> The Vagarian Duology </i>
        <span style="font-size: 10px; display: block; background-color: #EEF6EC; border-top: 3.5px solid #DBE9D7; width: 320; height: auto; margin-top: 5px; padding: 10px; text-transform: none; text-align: justify; letter-spacing: 3px; text-shadow: none; line-height: 15px;"> <i> <b> Vagarious: </b> erratic and unpredictable behavior or direction </i> <br><br>
        <b> Books: </b> <br>
        1. King of Destiny <br>
        2. House of Lies <br><br>
        <b> Main Characters: </b> <br>
        1. Cyning Caestic Eviengaard <br>
        2. Quirin Deorc Sidero
        </span>
       </span>
       <span style="font-size:15px; display: block; border: 2px solid none; width: 335px; height: auto; margin-top: 5px; padding: 10px; text-transform: uppercase; text-align: left; text-shadow: 2px 2px #D6E7D1; letter-spacing: 2px; font-family: papyrus; color: #C4DBBD;"> <i> The Broken Queen Series </i>
        <span style="font-size: 10px; display: block; background-color: #EEF6EC; border-top: 3.5px solid #DBE9D7; width: 320; height: auto; margin-top: 5px; padding: 10px; text-transform: none; text-align: justify; letter-spacing: 3px; text-shadow: none; line-height: 15px;"> <i> <b> Broken: </b> (of a person) having given up all hope; despairing </i> <br><br>
        <b> Books: </b> <br>
        1. Flight of Kestrel <br>
        2. Lake of Whispers <br>
        3. Fate of Four <br>
        4. Illusion of Hope <br>
        5. Fall of Ashes <br><br>
        <b> Main Characters: </b> <br>
        1. Kestrel Raevena Eviengaard/Sidero <br>
        2. Noctis Lodynstyn Galynthius <br>
        3. Ehren Andet Garten/Eviengaard <br>
        4. Yfel Beinnan Garten/Eviengaard
        </span>
       </span>
       <span style="font-size:15px; display: block; border: 2px solid none; width: 335px; height: auto; margin-top: 5px; padding: 10px; text-transform: uppercase; text-align: left; text-shadow: 2px 2px #D6E7D1; letter-spacing: 2px; font-family: papyrus; color: #C4DBBD;"> <i> The Assassin's King Chronicles </i>
        <span style="font-size: 10px; display: block; background-color: #EEF6EC; border-top: 3.5px solid #DBE9D7; width: 320; height: auto; margin-top: 5px; padding: 10px; text-transform: none; text-align: justify; letter-spacing: 3px; text-shadow: none; line-height: 15px;"> <i> <b> King: </b> the male ruler of an independent state, especially one who inherits the position by right of birth </i> <br><br>
        <b> Books: </b> <br>
        1. The Garden of Killers <br>
        2. Light through Broken Glass <br>
        3. Two of Blood and Death <br> <br>
        <b> Main Characters: </b> <br>
        1. Carmen Hecate Makoto/Eviengaard <br>
        2. Allyne Lucifer Eviengaard/Makoto
        </span>
       </span>
       <span style="font-size:15px; display: block; border: 2px solid none; width: 335px; height: auto; margin-top: 5px; padding: 10px; text-transform: uppercase; text-align: left; text-shadow: 2px 2px #D6E7D1; letter-spacing: 2px; font-family: papyrus; color: #C4DBBD;"> <i> Legacy Sequel/Standalone </i>
        <span style="font-size: 10px; display: block; background-color: #EEF6EC; border-top: 3.5px solid #DBE9D7; width: 320; height: auto; margin-top: 5px; padding: 10px; text-transform: none; text-align: justify; letter-spacing: 3px; text-shadow: none; line-height: 15px;"> 
        <b> Book: </b> <br>
        1. Crown of Thorns <br><br>
        <b> Main Character: </b> <br>
        1. Laelynn Eviengaard <br>
        </span>
       </span>
       <span style="font-size:15px; display: block; border: 2px solid none; width: 335px; height: auto; margin-top: 5px; padding: 10px; text-transform: uppercase; text-align: left; text-shadow: 2px 2px #D6E7D1; letter-spacing: 2px; font-family: papyrus; color: #C4DBBD;"> <i> Midquel </i>
        <span style="font-size: 10px; display: block; background-color: #EEF6EC; border-top: 3.5px solid #DBE9D7; width: 320; height: auto; margin-top: 5px; padding: 10px; text-transform: none; text-align: justify; letter-spacing: 3px; text-shadow: none; line-height: 15px;"> 
        <b> Book: </b> <br>
        1. Sea of Shadows <br><br>
        <b> Main Character: </b> <br>
        1. Acelyn Romannov <br>
        </span>
       </span>
       <span style="font-size:15px; display: block; border: 2px solid none; width: 335px; height: auto; margin-top: 5px; padding: 10px; text-transform: uppercase; text-align: left; text-shadow: 2px 2px #D6E7D1; letter-spacing: 2px; font-family: papyrus; color: #C4DBBD;"> <i> Short Stories/Collections </i>
        <span style="font-size: 10px; display: block; background-color: #EEF6EC; border-top: 3.5px solid #DBE9D7; width: 320; height: auto; margin-top: 5px; padding: 10px; text-transform: none; text-align: justify; letter-spacing: 3px; text-shadow: none; line-height: 15px;"> 
        <b> Books: </b> <br>
        1. Book of Magis <br>
        2. Tales of Fae 
        </span>
       </span>
     </span>
   </span>

   <span style="font-size:; display: flex; justify-content: space-around; border: 2px solid none; width: 645; height: auto; padding: 10px;">
    <span style="font-size:; display: inline-block; background-position: center; background-image: url(https://i.pinimg.com/564x/90/b9/b5/90b9b5bf4c5b36d8419e7cd177ebca0e.jpg); border: 2px solid none; width: 216px; height: 220px; padding: 10px;"></span>
     <span style="font-size: 20px; display: block; background-color: #FCF8F8; border: 2px solid #E9D7D7; width: 360px; height: 216px; padding: 10px; overflow-y: scroll; text-align: center; text-shadow: 2px 2px #E7D1D1; letter-spacing: 2px; font-family: Nosifer; color: #DBBDBD;"> — Greener Days — 
      <span style="font-size:; display: block; border: 0.5px solid #E9D7D7; width: 358px; height:; margin-top: 5px;"></span>
       <span style="font-size:15px; display: block; border: 2px solid none; width: 335px; height: auto; margin-top: 5px; padding: 10px; text-transform: uppercase; text-align: left; text-shadow: 2px 2px #E7D1D1; letter-spacing: 2px; font-family: copperplate; color: #DBBDBD"> <i> The Future Zombie Apocalypse </i>
        <span style="font-size: 10px; display: block; background-color: #F6ECEC; border-top: 3.5px solid #E9D7D7; width: 320; height: auto; margin-top: 5px; padding: 10px; text-transform: none; text-align: justify; letter-spacing: 3px; text-shadow: none; line-height: 15px;"> <b> Type: </b> Novel <br><br>
        <b> Genre: </b> Horror, Thriller, Action, Apocalyptic, Sci-Fi, Dystopian, and Supernatural <br><br>
        <b> Main Characters: </b> <br>
        1. Kaelyn Abendroth <br>
        2. Aedyn Ezekiel <br><br>
        <b> Suppoting/Side Characters: </b> <br>
        1. Aedyn Ezekiel <br>
        2. Nicole Zaran <br>
        3. Alanea Ezekiel <br>
        4. Felix Baek <br>
        5. Christopher Choi <br> <br>
        <b> Summary: </b> A government employee, forger, aspiring singer, hacker, sharpshooter and lab rat are chosen as the first group to try out a new cure. After years of the infected overrunning the United States of America, the top scientists and doctor have finally made the cure, or the next wave. The group of everyday people must avoid getting eaten by the infected, figure out the cure and maybe try not to piss off the U.S. government.<br>
        </span>
       </span>
     </span>
   </span>

   <span style="font-size:; display: flex; justify-content: space-around; border: 2px solid none; width: 645; height: auto; padding: 10px;">
    <span style="font-size:; display: inline-block; background-position: top; background-image: url(https://i.pinimg.com/236x/b8/b8/73/b8b873eeae4e0f0cb96b7faeb5ae04c2.jpg); border: 2px solid none; width: 216px; height: 220px; padding: 10px;"></span>
     <span style="font-size: 20px; display: block; background-color: #F8FAFC; border: 2px solid #D7DFE9; width: 360px; height: 216px; padding: 10px; overflow-y: scroll; text-align: center; text-shadow: 2px 2px #D1DCE7; letter-spacing: 2px; font-family: Raleway; color: #BDC7DB;"> <b> — The AevynVerse — </b>
      <span style="font-size:; display: block; border: 0.5px solid #D1DCE7; width: 358px; height:; margin-top: 5px;"></span>
       <span style="font-size:15px; display: block; border: 2px solid none; width: 335px; height: auto; margin-top: 5px; padding: 10px; text-transform: uppercase; text-align: left; text-shadow: 2px 2px #D1DCE7; letter-spacing: 2px; font-family: arial; color: #BDC7DB;"> <i> Prequel </i>
        <span style="font-size: 10px; display: block; background-color: #ECF0F6; border-top: 3.5px solid #D7DFE9; width: 320; height: auto; margin-top: 5px; padding: 10px; text-transform: none; text-align: justify; letter-spacing: 3px; text-shadow: none; line-height: 15px;"> <b> Book: </b> <br> 1. A Crow's Murder <br><br>
        <b> Main Characterss: </b> <br>
        1. Lady Crow (Thuy Thanh Nguyen) <br><br>
        <b> Genres: </b> Murder Mystery, Thriller, and Historical Fiction
        </span>
       </span>
       <span style="font-size:15px; display: block; border: 2px solid none; width: 335px; height: auto; margin-top: 5px; padding: 10px; text-transform: uppercase; text-align: left; text-shadow: 2px 2px #D1DCE7; letter-spacing: 2px; font-family: arial; color: #BDC7DB;"> <i> Shadow and Ice Duology </i>
        <span style="font-size: 10px; display: block; background-color: #ECF0F6; border-top: 3.5px solid #D7DFE9; width: 320; height: auto; margin-top: 5px; padding: 10px; text-transform: none; text-align: justify; letter-spacing: 3px; text-shadow: none; line-height: 15px;"> <b> Books: </b> <br> 1.  Ice and Shadow <br> 2. Honor and Sacrifice <br> <br>
        <b> Main Characters: </b> <br>
        1. Aevyn Aura Maestryn <br>
        2. Kieran Nyx Crowen <br><br>
        <b> Genres: </b> Fantasy, Action, Thiller, and Magical Realism
        </span>
       </span>
     </span>
   </span>
 </span>
</div>

TheMidnightAssassin · June 29, 2021, 2:28am

this took way too long, but it was worth it

stella_vigo · June 29, 2021, 4:44pm

I almost got it to work…

Sidera...
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non mi lobortis tortor ullamcorper laoreet. Maecenas in magna risus. Nulla ultrices porttitor magna, ultricies gravida enim tempus at. Donec non cursus urna. Nulla sit amet arcu leo. Etiam consequat et magna convallis vehicula.

There is a menu icon on the upper-left corner. Vivamus lacinia felis felis, ac ornare ipsum fermentum quis. Sed in arcu urna. Nunc molestie sapien id laoreet iaculis. Aliquam tempor commodo eros eget volutpat.

Maecenas pharetra leo eu mi tincidunt auctor. Vivamus molestie vitae arcu non mollis.

raw code

<span style="font-size: 33px; font-family: Garamond; display: block; border: 3px solid; border-color: #ffffff; box-shadow: 10px 10px 0px #000000; padding: 20px; margin-left: 5%; margin-right: 5%; text-align: center; background-image: url('https://lh5.googleusercontent.com/proxy/p9OQH5sMn3StgSjSwnReE04NIUFTnLLZlCXXb-qeYn2C0jODl2x-qTtQ755axiBeshQ=s0-d'); background-size: cover; background-position: bottom;">
<span style="font-size:; color: rgb(50, 50, 50); display: block; padding: 50px 30px 30px 30px; position: relative; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;">
  <span style="font-size:; display: block; width: 100%; 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><g id=%27menuitem_four%27 class=%27menuitem%27><text font-size=%2720px%27 x=%2710%27 y=%27260%27 fill=%27white%27>Item 4</text><rect width=%27210%27 height=%271%27 fill=%27rgb(170, 170, 170)%27 y=%27280%27/></g><g id=%27menuitem_five%27 class=%27menuitem%27><text font-size=%2720px%27 x=%2710%27 y=%27310%27 fill=%27white%27>Item 5</text><rect width=%27210%27 height=%271%27 fill=%27rgb(170, 170, 170)%27 y=%27330%27/></g><g id=%27menuitem_six%27 class=%27menuitem%27><text font-size=%2720px%27 x=%2710%27 y=%27360%27 fill=%27white%27>Item 6</text><rect width=%27210%27 height=%271%27 fill=%27rgb(170, 170, 170)%27 y=%27380%27/></g><g id=%27menuitem_seven%27 class=%27menuitem%27><text font-size=%2720px%27 x=%2710%27 y=%27410%27 fill=%27white%27>Item 7</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, %23menubar_four, %23menubar_five, %23menubar_six, %23menubar_seven, %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; } %23menuitem_four { -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; -o-transition-delay: 0.5s; transition-delay: 0.5s; } %23menuitem_five { -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s; } %23menuitem_six { -webkit-transition-delay: 0.7s; -moz-transition-delay: 0.7s; -o-transition-delay: 0.7s; transition-delay: 0.7s; } %23menuitem_seven { -webkit-transition-delay: 0.8s; -moz-transition-delay: 0.8s; -o-transition-delay: 0.8s; transition-delay: 0.8s; } %23menubar_one, %23menubar_two, %23menubar_three, %23menubar_four, %23menubar_five, %23menubar_six, %23menubar_seven, %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); } %23menubar_four { fill: rgb(170, 170, 170); opacity: 0; } %23menubar_five { fill: rgb(170, 170, 170); opacity: 0; } %23menubar_six { fill: rgb(170, 170, 170); opacity: 0; } %23menubar_seven { fill: rgb(170, 170, 170); opacity: 0; } }</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; 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 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>
          <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 style="font-size: 33px; display: block; font-family: Garamond; color: white; margin-bottom: 18px;">Sidera...<br></span>
<span style="font-size: 18px; font-family: Garamond; display: block; border: 3px transparent; color: #ffffff; padding: 12px; margin: auto; margin-bottom: 10px; text-align: justify; width: 85%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non mi lobortis tortor ullamcorper laoreet. Maecenas in magna risus. Nulla ultrices porttitor magna, ultricies gravida enim tempus at. Donec non cursus urna. Nulla sit amet arcu leo. Etiam consequat et magna convallis vehicula.<br><br>
There is a menu icon on the upper-left corner. Vivamus lacinia felis felis, ac ornare ipsum fermentum quis. Sed in arcu urna. Nunc molestie sapien id laoreet iaculis. Aliquam tempor commodo eros eget volutpat.<br><br>
Maecenas pharetra leo eu mi tincidunt auctor. Vivamus molestie vitae arcu non mollis.</span>
</span></span>

Sorry to bother you @SockMonster1 but how do you expand the background so when you click the icon all the links are against a grey background? Also why is Item 1 not working?