[ [ [ bloggin space w i k i ] ] ]Difference between revisions of "Test page"
| Line 249: | Line 249: | ||
<html> | <html> | ||
<div style="width:100%;max-width:340px;height:80px;margin:30px auto;border-radius:12px;background:linear-gradient(90deg,#ff9a9e,#fad0c4,#ff9a9e);background-size:200%;animation:wave 8s linear infinite;"></div><style>@keyframes wave{background-position:0% 50%,100% 50%}</style> | <div style="width:100%;max-width:340px;height:80px;margin:30px auto;border-radius:12px;background:linear-gradient(90deg,#ff9a9e,#fad0c4,#ff9a9e);background-size:200%;animation:wave 8s linear infinite;"></div><style>@keyframes wave{background-position:0% 50%,100% 50%}</style> | ||
</html> | |||
==Shimmer== | |||
<html> | |||
<div style="display:flex;justify-content:center;"><div style="width:300px;height:50px;background:#eee;border-radius:12px;overflow:hidden;position:relative;"><div style="position:absolute;top:0;left:-150%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);animation:shimmer 2s infinite;"></div><div style="padding:20px;color:#666;">totally fabbbbbbulous!</div></div></div><style>@keyframes shimmer{0%{left:-150%}100%{left:100%}}</style> | |||
</html> | |||
==Bubbles?== | |||
<html><div style="position:relative;height:120px;margin:40px;"><div style="position:absolute;width:20px;height:20px;background:#4caf50;border-radius:50%;animation:float 6s infinite ease-in-out;bottom:0;left:20%;background:rgba(76,175,80,.4);"></div><div style="position:absolute;width:30px;height:30px;background:#4caf50;border-radius:50%;animation:float 5s infinite ease-in-out .8s;bottom:0;left:60%;background:rgba(76,175,80,.4);"></div></div><style>@keyframes float{0%{transform:translateY(0)}100%{transform:translateY(-120px);opacity:0}}</style> | |||
</html> | |||
==Rainbow WTF?== | |||
<html> | |||
<div style="display:flex;justify-content:center;margin:40px;"><div style="padding:20px;border:10px solid;border-radius:12px;border-image:conic-gradient(red,orange,yellow,green,blue,indigo,violet,red) 1;animation:rainbow 7s linear infinite;color:#333;font-weight:bold;">What is this thing doing?</div></div><style>@keyframes rainbow{100%{transform:rotate(720deg)}}</style> | |||
</html> | </html> | ||
[[Category:Help]] | [[Category:Help]] | ||
Revision as of 08:35, 28 November 2025
Test Page is the page where I try out random stuff on the wiki that may be used elsewhere. One product of this page (that has been removed and given it's own page) is Current Weather.
blah blah blah
This is a horizontal info box you can add stuff like Current Weather or images.
Blah?
Another info box that is collapsable.
This text is hidden until you click the line above. You can hide stuff here.
Quote Box 3.0
A different quote box than I normally use. - me
Pro Box
I hate rounded corners using the border-radius attribute. Also, green doesn't make something look professional.
That Stupid Warning Box
Warning: You need to be warned.
I don't know why they keep wanting border-radius
Welcome to My Awesome Wiki
Everything you need is right here.
Black Spoiler Box
SPOILERS
Secret knowledge is hidden here.
Code
you can put all sorts of stuff in here and make it look like code.
Progress Bar
A fake progress bar that never moves. It's like installing something on Windows 11.
73% Complete...
73% Complete...
73% Complete...
Side By Side Pictures
Left side caption
Right side caption
Download Button
Timeline
Step 1 – Do this first
Step 2 – Then this
Step 3 – Profit!
Keyboard
Press Ctrl + S to save.
Press Ctrl + S to save.
Press Ctrl + S to save.
Reverse Collapsable
This doesn't really work and is stupid.
Click to hide this section ▼
All the hidden stuff lives here.
5 Pictures
Hamburger Soup
Oreo Blueberry
Picture here to demonstrate
That you can make
Your own style of gallery.
Spinner
Bounce Card
Typer
Success
Gradient
Shimmer
Bubbles?
Rainbow WTF?