[ [ [ bloggin space w i k i ] ] ]Difference between revisions of "Test page"
Tag: Reverted |
Tag: Reverted |
||
| Line 136: | Line 136: | ||
<div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:25px; margin:30px 0;"> | <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:25px; margin:30px 0;"> | ||
<div style="text-align:center; border-radius:12px; overflow:hidden; box-shadow:0 4px 15px rgba(0,0,0,0.1);"> | <div style="text-align:center; border-radius:12px; overflow:hidden; box-shadow:0 4px 15px rgba(0,0,0,0.1);"> | ||
< | <span style="display:block; overflow:hidden;"> | ||
[[File:Hamburgersoup.jpg|300px| | [[File:Hamburgersoup.jpg|300px|class=grayscale-hover]] | ||
</ | </span> | ||
<div style="padding:12px; background:#fff; font-weight:600;">Hamburger Soup</div> | <div style="padding:12px; background:#fff; font-weight:600;">Hamburger Soup</div> | ||
</div> | </div> | ||
<div style="text-align:center; border-radius:12px; overflow:hidden; box-shadow:0 4px 15px rgba(0,0,0,0.1);"> | <div style="text-align:center; border-radius:12px; overflow:hidden; box-shadow:0 4px 15px rgba(0,0,0,0.1);"> | ||
< | <span style="display:block; overflow:hidden;"> | ||
[[File:Oreoblueberry.jpg|300px| | [[File:Oreoblueberry.jpg|300px|class=grayscale-hover]] | ||
</ | </span> | ||
<div style="padding:12px; background:#fff; font-weight:600;">Oreo Blueberry</div> | <div style="padding:12px; background:#fff; font-weight:600;">Oreo Blueberry</div> | ||
</div> | </div> | ||
<!-- | <!-- add as many as you want --> | ||
</div> | </div> | ||
<style> | |||
.grayscale-hover img { | |||
filter: grayscale(100%); | |||
transition: filter 0.6s ease; | |||
} | |||
.grayscale-hover:hover img { | |||
filter: grayscale(0%); | |||
} | |||
</style> | |||
[[Category:Help]] | [[Category:Help]] | ||
Revision as of 08:02, 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
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.
Grayscale
<style> .grayscale-hover img {
filter: grayscale(100%); transition: filter 0.6s ease;
} .grayscale-hover:hover img {
filter: grayscale(0%);
} </style>