Hello Jade! Welcome:3
2 Likes
Ooh, pretty:0
2 Likes
The Pythagorean theorem is something I surprisingly found fun in school…
3 Likes
hewwo! thank you :>
3 Likes
Hehe, thanks! 
LOLOL That was me when I first learned it but I hate it when I have to find the hypotenuse’s square root (when it involves decimals) xD
3 Likes
Also: proofs for Pythagorean theorem are great.
4 Likes
Yuck just use simplified radicals
3 Likes
I wish I could 
But then it’s counted as wrong 
3 Likes
Conclusion: your teachers can suck it up
4 Likes
Took a quick peek at the post:
- It appears you might’ve accidentally deleted a section of your code, find the string “height;” and replace that with “height: 40px;”. That should fix your first link not working.
- To change the height look for the line “scaleY(210)” and insert your height there. Yes it’s a confusing way of stating the height but necessary since ‘scale’ animations can be done cheaply whilst animating ‘height’ will force the browser to recalculate the position of every single element in the SVG for every single frame <— can be slow and expensive and result in janky animations
- If you’re changing the height, you might also have to change the code for the trigger mechanism but I’ll get to that in a bit.
Currently rewriting the code for the menu feature to try make it as easy to customise as possible.
4 Likes
Thanks a lot! 
attempt 2:
I think it works! 
raw code
<span style="font-size: 3vmin; 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=%27270%27 fill=%27white%27>Item 4</text><rect width=%27210%27 height=%271%27 fill=%27rgb(170, 170, 170)%27 y=%27290%27/></g><g id=%27menuitem_five%27 class=%27menuitem%27><text font-size=%2720px%27 x=%2710%27 y=%27330%27 fill=%27white%27>Item 5</text><rect width=%27210%27 height=%271%27 fill=%27rgb(170, 170, 170)%27 y=%27350%27/></g><g id=%27menuitem_six%27 class=%27menuitem%27><text font-size=%2720px%27 x=%2710%27 y=%27390%27 fill=%27white%27>Item 6</text><rect width=%27210%27 height=%271%27 fill=%27rgb(170, 170, 170)%27 y=%27410%27/></g><g id=%27menuitem_seven%27 class=%27menuitem%27><text font-size=%2720px%27 x=%2710%27 y=%27450%27 fill=%27white%27>Item 7</text><rect width=%27210%27 height=%271%27 fill=%27rgb(170, 170, 170)%27 y=%27470%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(440); -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: 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/1"><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/2"><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/3"><span style="font-size:; display: inline-block; width: 100%; height: 40px; margin-top: 12px;"></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/4"><span style="font-size:; display: inline-block; width: 100%; height: 40px; margin-top: 9px;"></span></a>
<a href="https://forum.wackywriters.com/t/nyctophilia-a-coding-thread-new-old-coders-are-encouraged-to-join/9166/5"><span style="font-size:; display: inline-block; width: 100%; height: 40px; margin-top: 9px;"></span></a>
<a href="https://forum.wackywriters.com/t/nyctophilia-a-coding-thread-new-old-coders-are-encouraged-to-join/9166/6"><span style="font-size:; display: inline-block; width: 100%; height: 40px; margin-top: 7px;"></span></a>
<a href="https://forum.wackywriters.com/t/nyctophilia-a-coding-thread-new-old-coders-are-encouraged-to-join/9166/7"><span style="font-size:; display: inline-block; width: 100%; height: 40px; margin-top: 6px;"></span></a>
</span>
</details>
</span>
</span>
<span style="font-size: 6vmin; display: block; font-family: Garamond; color: white; margin-bottom: 18px; letter-spacing: 2.2px;">Sidera...<br></span>
<span style="font-size: 3vmin; font-family: Garamond; display: block; border: 3px transparent; color: #ffffff; padding: 12px; margin: auto; margin-bottom: 10px; text-align: justify;">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>
EDIT: It works! It looks good on mobile too. Thanks again 
3 Likes
doesn’t work either ;-;
2 Likes
ok so i still seem to require some assistance, here’s the thread i got
hey, i’m ana welcome to this smol shop where i’ll make covers ig???
i take fakes, just mention somewhere it’s a fake request 
there are no RULES, this is a CHAOS REGION and we love MAKING A MESS
form
form
( ) fake | ( ) real
title:
subtitle:
author:
theme:
ideas:
other
interesting fact:
raw code
<span style="font-size:8px;font-family:calibri;background:#fff;color:#EE6C4D;display:block;margin:auto;width:300px;text-transform:uppercase;letter-spacing:0.5px;line-height:13px;border-radius:5px;line-height:10.5px;padding:15px"><span style="font-size:; background-image: url('https://cdn.discordapp.com/attachments/854452066093367366/859493359731343360/IMG_4034.PNG'); background-size: 100px; background-repeat: no-repeat; background-position: center; height: 100px; width: 100px; outline: 1px solid #364463; margin-top: 10px; padding: 5px; display:block;"></span> <span style="font-size:;margin:-110px 0px 10px 120px;display:block;height:110px;overflow-y: scroll;"> hey, i'm *ana* welcome to this smol shop where i'll make covers ig??? <br>i take fakes, just mention somewhere it's a fake request 👍🏼 <br> <br> [u]there are no RULES, this is a CHAOS REGION and we love MAKING A MESS[/u] <br><br>**form**
<details>
<summary>form</summary>
( ) fake | ( ) real
title:
subtitle:
author:
theme:
ideas:
other
interesting fact:
</details> </span></span></span>
3 Likes
so, u can see the form details bit doesn’t go in the thread, and i can’t for the life of me figure out why. please help
2 Likes
I copied your raw code and pasted it. What I did was I pressed “enter” after the first <span> and before the second <span>, so that the second <span> is on a different line from the first one.
I also changed the ** around “form” into <b> </b> since the bold didn’t work
i take fakes, just mention somewhere it's a fake request 👍🏼
[u]there are no RULES, this is a CHAOS REGION and we love MAKING A MESS[/u]
form
form
( ) fake | ( ) real
title:
subtitle:
author:
theme:
ideas:
other
interesting fact:
raw code
<span style="font-size:8px;font-family:calibri;background:#fff;color:#EE6C4D;display:block;margin:auto;width:300px;text-transform:uppercase;letter-spacing:0.5px;line-height:13px;border-radius:5px;line-height:10.5px;padding:15px">
<span style="font-size:; background-image: url('https://cdn.discordapp.com/attachments/854452066093367366/859493359731343360/IMG_4034.PNG'); background-size: 100px; background-repeat: no-repeat; background-position: center; height: 100px; width: 100px; outline: 1px solid #364463; margin-top: 10px; padding: 5px; display:block;"></span> <span style="font-size:;margin:-110px 0px 10px 120px;display:block;height:110px;overflow-y: scroll;"> hey, i'm *ana* welcome to this smol shop where i'll make covers ig??? <br>i take fakes, just mention somewhere it's a fake request 👍🏼 <br> <br> [u]there are no RULES, this is a CHAOS REGION and we love MAKING A MESS[/u] <br><br><b>form</b>
<details>
<summary>form</summary>
( ) fake | ( ) real
title:
subtitle:
author:
theme:
ideas:
other
interesting fact:
</details> </span></span></span>
I also find hiding details under span to be a pain, you’re not alone 
2 Likes
thank u, you’re a lifesaver 
3 Likes
Live Demo:
Okay so I completely re-coded the menu feature making it alot easier to customise!
It’s functionally identical to the original but all visible elements can be customised without trawling through the code (see image below) and also supports up to 10 menu items (minimum 1) without the animations distorting.
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: show; 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: 690px; 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><style>:root {<!--
--> <!--
~~~ CUSTOMISATION ~~~
--> --number-of-menu-items: 3; <!--
--> --font-family: Arial; <!--
--> --text-color: white; <!--
--> --background-color: rgb(60,60,60); <!--
--> --divider-color: rgb(170,170,170); <!--
--> --menu-icon-color:black; <!--
--> --menu-icon-color-active: rgb(170,170,170); <!--
--> <!--
-->}</style><g class=%27menu_icon%27><rect class=%27icon_background%27 y=%2712%27/><rect class=%27menu_bar%27 x=%275%27 y=%2720%27 style=%27transform-origin: 5px 20px;%27/><rect class=%27menu_bar%27 x=%275%27 y=%2730%27/><rect class=%27menu_bar%27 x=%275%27 y=%2740%27 style=%27transform-origin: 5px 42px;%27/></g><g class=%27menu_body%27><rect class=%27menu_background%27/> <!--
--> <!--
~~~ MENU ITEMS ~~~
--> <g class=%27menu_item%27> <!--
--> <text class=%27item_text%27 x=%2710%27>Item 1</text> <!--
--> <rect class=%27divider%27/> <!--
--> </g> <!--
--> <!--
--> <g class=%27menu_item%27> <!--
--> <text class=%27item_text%27 x=%2710%27>Item 2</text> <!--
--> <rect class=%27divider%27/> <!--
--> </g> <!--
--> <!--
--> <g class=%27menu_item%27> <!--
--> <text class=%27item_text%27 x=%2710%27>Item 3</text> <!--
--> <rect class=%27divider%27/> <!--
--> </g> <!--
--> <!--
--></g><animate/><style>svg{width:100%;height:100%;}.icon_background{width:40px;height:38px;fill:var(--background-color);opacity:0;transition:all 0.2s 0.3s ease;}.menu_bar{width:30px;height:4px;fill:var(--menu-icon-color);transition:all 0.2s 0.3s ease;}.menu_background{width:250px;height:1px;fill:var(--background-color);transform:translateY(50px) scaleY(0);transition:all 0.3s ease;}.item_text{font-family:var(--font-family);font-size:20px;fill:var(--text-color);}.divider{width:210px;height:1px;fill:var(--divider-color);}.menu_item{transform:translateX(-220px);transition:all 0.1s ease;}.menu_item:nth-child(2) .item_text{transform:translateY(90px)}.menu_item:nth-child(3) .item_text{transform:translateY(150px)}.menu_item:nth-child(4) .item_text{transform:translateY(210px)}.menu_item:nth-child(5) .item_text{transform:translateY(270px)}.menu_item:nth-child(6) .item_text{transform:translateY(330px)}.menu_item:nth-child(7) .item_text{transform:translateY(390px)}.menu_item:nth-child(8) .item_text{transform:translateY(450px)}.menu_item:nth-child(9) .item_text{transform:translateY(510px)}.menu_item:nth-child(10) .item_text{transform:translateY(570px)}.menu_item:nth-child(11) .item_text{transform:translateY(630px)}.menu_item:nth-child(2) .divider{transform:translateY(110px)}.menu_item:nth-child(3) .divider{transform:translateY(170px)}.menu_item:nth-child(4) .divider{transform:translateY(230px)}.menu_item:nth-child(5) .divider{transform:translateY(290px)}.menu_item:nth-child(6) .divider{transform:translateY(350px)}.menu_item:nth-child(7) .divider{transform:translateY(410px)}.menu_item:nth-child(8) .divider{transform:translateY(470px)}.menu_item:nth-child(9) .divider{transform:translateY(530px)}.menu_item:nth-child(10) .divider{transform:translateY(590px)}.menu_item:nth-child(11) .divider{transform:translateY(650px)}@media(min-height:691px){.icon_background{transition-duration:0.3s;transition-delay:0s;opacity:1;}.menu_bar{transition-delay:0s;fill:var(--menu-icon-color-active);}.menu_bar:nth-child(2){transform:translateX(5px) rotateZ(45deg);}.menu_bar:nth-child(3){opacity:0;}.menu_bar:nth-child(4){transform:translateX(5px) rotateZ(-45deg);}.menu_background {--scaleY: calc(((var(--number-of-menu-items) - 1) * 60) + 90);transform:translateY(50px) scaleY(var(--scaleY));transition-delay:0.2s;transition-duration:0.4s;}.menu_item{transform:translateX(20px);transition-duration:0.3s;}.menu_item:nth-child(2){transition-delay:0.200s;}.menu_item:nth-child(3){transition-delay:0.275s;}.menu_item:nth-child(4){transition-delay:0.350s;}.menu_item:nth-child(5){transition-delay:0.425s;}.menu_item:nth-child(6){transition-delay:0.500s;}.menu_item:nth-child(7){transition-delay:0.575s;}.menu_item:nth-child(8){transition-delay:0.650s;}.menu_item:nth-child(9){transition-delay:0.725s;}.menu_item:nth-child(10){transition-delay:0.800s;}.menu_item:nth-child(11){transition-delay:0.875s;}}</style></svg>')"></span>
</span>
<span style="font-size:; display: block; margin: 12px 0 0 20px; width: 40px; position: relative; color: transparent; --primary-very-low: transparent; --d-hover: transparent;">
<details class="elided">
<summary>
<span style="font-size:; display: inline-block; height: 32px;"></span>
<span style="font-size:; display: block; height: 40px; width: 100%; position: absolute; top: 0; left: 0; cursor: pointer;"></span>
</summary>
<span style="font-size:; display: inline-block; min-height: 692px; width: 250px; position: relative;">
<!---->
<!-- INSERT LINKS HERE -->
<!-- Link 1 -->
<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>
<!-- Link 2 -->
<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>
<!-- Link 3 -->
<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>
Uncompiled SVG
<svg xmlns='http://www.w3.org/2000/svg'>
<style>
:root {
--number-of-menu-items: 3;
--font-family: Arial;
--text-color: white;
--background-color: rgb(60, 60, 60);
--divider-color: rgb(170, 170, 170);
--menu-icon-color: black;
--menu-icon-color-active: rgb(170, 170, 170);
}
</style>
<g class='menu_icon'>
<rect class='icon_background' y='12'/>
<rect class='menu_bar' x='5' y='20' style='transform-origin: 5px 20px;'/>
<rect class='menu_bar' x='5' y='30'/>
<rect class='menu_bar' x='5' y='40' style='transform-origin: 5px 42px;'/>
</g>
<g class='menu_body'>
<rect class='menu_background'/>
<g class='menu_item'>
<text class='item_text' x='10'>Item 1</text>
<rect class='divider'/></g>
<g class='menu_item'>
<text class='item_text' x='10'>Item 2</text>
<rect class='divider'/></g>
<g class='menu_item'>
<text class='item_text' x='10'>Item 3</text>
<rect class='divider'/></g>
</g>
<animate/>
<style>
svg {
width: 100%;
height: 100%;
}
.icon_background {
width: 40px;
height: 38px;
fill: var(--background-color);
opacity: 0;
transition: all 0.2s 0.3s ease;
}
.menu_bar {
width: 30px;
height: 4px;
fill: var(--menu-icon-color);
transition: all 0.2s 0.3s ease;
}
.menu_background {
width: 250px;
height: 1px;
fill: var(--background-color);
transform: translateY(50px) scaleY(0);
transition: all 0.3s ease;
}
.item_text {
font-family: var(--font-family);
font-size: 20px;
fill: var(--text-color);
}
.divider {
width: 210px;
height: 1px;
fill: var(--divider-color);
}
.menu_item {
transform: translateX(-220px);
transition: all 0.1s ease;
}
.menu_item:nth-child(2) .item_text { transform: translateY(90px) }
.menu_item:nth-child(3) .item_text { transform: translateY(150px) }
.menu_item:nth-child(4) .item_text { transform: translateY(210px) }
.menu_item:nth-child(5) .item_text { transform: translateY(270px) }
.menu_item:nth-child(6) .item_text { transform: translateY(330px) }
.menu_item:nth-child(7) .item_text { transform: translateY(390px) }
.menu_item:nth-child(8) .item_text { transform: translateY(450px) }
.menu_item:nth-child(9) .item_text { transform: translateY(510px) }
.menu_item:nth-child(10) .item_text { transform: translateY(570px) }
.menu_item:nth-child(11) .item_text { transform: translateY(630px) }
.menu_item:nth-child(2) .divider { transform: translateY(110px) }
.menu_item:nth-child(3) .divider { transform: translateY(170px) }
.menu_item:nth-child(4) .divider { transform: translateY(230px) }
.menu_item:nth-child(5) .divider { transform: translateY(290px) }
.menu_item:nth-child(6) .divider { transform: translateY(350px) }
.menu_item:nth-child(7) .divider { transform: translateY(410px) }
.menu_item:nth-child(8) .divider { transform: translateY(470px) }
.menu_item:nth-child(9) .divider { transform: translateY(530px) }
.menu_item:nth-child(10) .divider { transform: translateY(590px) }
.menu_item:nth-child(11) .divider { transform: translateY(650px) }
@media (min-height: 691px) {
.icon_background {
transition-duration: 0.3s;
transition-delay: 0s;
opacity: 1;
}
.menu_bar {
transition-delay: 0s;
fill: var(--menu-icon-color-active);
}
.menu_bar:nth-child(2) { transform: translateX(5px) rotateZ(45deg); }
.menu_bar:nth-child(3) { opacity: 0; }
.menu_bar:nth-child(4) { transform: translateX(5px) rotateZ(-45deg); }
.menu_background {
--scaleY: calc(((var(--number-of-menu-items) - 1) * 60) + 90);
transform: translateY(50px) scaleY(var(--scaleY));
transition-delay: 0.2s;
transition-duration: 0.4s;
}
.menu_item {
transform: translateX(20px);
transition-duration: 0.3s;
}
.menu_item:nth-child(2) { transition-delay: 0.200s; }
.menu_item:nth-child(3) { transition-delay: 0.275s; }
.menu_item:nth-child(4) { transition-delay: 0.350s; }
.menu_item:nth-child(5) { transition-delay: 0.425s; }
.menu_item:nth-child(6) { transition-delay: 0.500s; }
.menu_item:nth-child(7) { transition-delay: 0.575s; }
.menu_item:nth-child(8) { transition-delay: 0.650s; }
.menu_item:nth-child(9) { transition-delay: 0.725s; }
.menu_item:nth-child(10) { transition-delay: 0.800s; }
.menu_item:nth-child(11) { transition-delay: 0.875s; }
}
</style>
</svg>
Change Log
2024-03-29T00:54:00Z
- Code has been fixed after changes on the Discourse forums (Wacky) were made to the default css styling of
<details>and<summary>.
2021-12-17T08:23:00Z
- Fixed the
margin-topvalue of the links (under “INSERT LINK HERE” section) having inconsistent values. - Relevant sections of the code is now easier to read and edit. i.e. you no longer have to decompress the code in order to read and edit it; all edits can be done using a normal WackyWriters post. See image below.
3 Likes
Hello,
darling~
I wonder
how I
know you.
But anyways...
you are still
welcome.
If you only
see me,
a lot
could be revealed
lest you moved down ;) Title
Testing text inside the span
Title
more testing of text inside the span
coded by an angel
darling~
I wonder
how I
know you.
But anyways...
you are still
welcome.
If you only
see me,
a lot
could be revealed
lest you moved down ;) Title
Testing text inside the span
Title
more testing of text inside the span
coded by an angel
3 Likes
raw code
<div align=center>
<span style="font-size: 15px; font-family: times; display: flex; flex-direction: row; flex-wrap: nowrap; height: 530px; width: 600px; background-color: black; text-align: center; padding: 30px 30px; margin: 2px 6px; align-items: center; overflow: auto">
<span style="font-size: 10px; display: inline-block; height: 500px; width: 327px; background-color: black; margin: 0px 0px 0px 0px; vertical-align: center; color: white; padding: 10px 0px; text-align: center; overflow: auto; border: 1px solid white; outline: 2px solid white; outline-offset: 3px; align-items: center">
<span style="font-size: 15px; display: inline-block; height: 479px; width: 300px; background-color: black; background-image: url(http://cdn140.picsart.com/296544991070211.png); background-size: 300px; background-position: top; margin: 5px 10px"><br><br>
</span>
</span>
<span style="font-size: 10px; display: inline-block; height: 500px; width: 45px; background-color: black; margin: 5px"></span>
<span style="font-size: 10px; display: flex; flex-direction: column; height: 530px; width: 35%; background-color: black; margin: 0px; align-items: center; color: white; padding: 0px 0px; text-align: center; overflow: auto; ">
<span style="font-size: 10px; display: inline-block; height: 480px; width: 95%; background-color: black; color: white; padding: 10px 0px; text-align: center; overflow: auto; border: 1px solid white; outline: 2px solid white; outline-offset: 3px;margin: 5px 0px">
<b>testing text inside the span</b><br>more testing of text inside the span
</span><br><br>
<span style="font-size: 10px; display: inline-block; height: 480px; width: 95%; background-color: black; color: white; padding: 10px 0px; text-align: center; overflow: auto; border: 1px solid white; outline: 2px solid white; outline-offset: 3px; margin: 5px 0px">
<b>testing text inside the span</b><br>more testing of text inside the span
</span>
</span>
</span>
2 Likes
[ • HAŽÉNŪLÌ • ]
l.o.e: Noi’jlaan-di-Téz’a’fel
[adj.]
/ɦa·tzæ·ny·li/
A body (tzō) in need of a soul (qō).
Purpose:
Used by the caretakers of Téz’a’fel to refer to their creations before the completion of the hae-di-ga’a, or reincarnation process.
♢ coded by an angel ♢
3 Likes