[ [ [ bloggin space w i k i ] ] ]Difference between revisions of "Test page"
| Line 83: | Line 83: | ||
</div> | </div> | ||
</div> | </div> | ||
<html> | |||
<div style="display:flex; justify-content:center; margin:20px 0;"> | |||
<div style="width:100%; max-width:300px;"> | |||
<div style="background:#e0e0e0; border-radius:8px; padding:4px;"> | |||
<div style="height:26px; border-radius:6px; background:#4caf50; width:73%; | |||
color:white; text-align:center; line-height:26px; font-weight:bold; | |||
animation: fill 2s ease-out, pulse 1.5s infinite alternate;"> | |||
73% Complete... | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<style> | |||
@keyframes fill { from { width:0 } to { width:73% } } | |||
@keyframes pulse { from { box-shadow: 0 0 8px #4caf50; } to { box-shadow: 0 0 20px #4caf50; } } | |||
</style> | |||
</html> | |||
<html> | |||
<div style="display:flex; justify-content:center; margin:20px 0;"> | |||
<div style="width:100%; max-width:300px;"> | |||
<div style="background:#e0e0e0; border-radius:5px; padding:2px; overflow:hidden;"> | |||
<div style="height:16px; border-radius:3px; overflow:hidden; position:relative; | |||
width:73%; background:#4caf50; color:white; font-size:12px; | |||
text-align:center; line-height:16px; animation: fill 2s ease-out;"> | |||
73% Complete... | |||
<div style="position:absolute; top:0; left:0; width:200%; height:100%; | |||
background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,.2) 10px, rgba(255,255,255,.2) 20px); | |||
animation: stripes 8s linear infinite;"></div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<style> | |||
@keyframes fill { from { width:0 } to { width:73% } } | |||
@keyframes stripes { 0% { transform:translateX(0) } 100% { transform:translateX(-50%) } } | |||
</style> | |||
</html> | |||
<html> | |||
<div style="display:flex; justify-content:center; margin:20px 0;"> | |||
<div style="width:100%; max-width:300px;"> | |||
<div style="background:#e0e0e0; border-radius:6px; padding:3px; overflow:hidden;"> | |||
<div style="background:#4caf50; width:73%; height:22px; border-radius:4px; | |||
color:white; text-align:center; line-height:22px; font-size:14px; | |||
background: linear-gradient(90deg, #4caf50 0%, #66bb6a 100%); | |||
animation: slideIn 2.5s ease-out forwards; | |||
position:relative; overflow:hidden;"> | |||
73% Complete... | |||
<div style="position:absolute; top:0; left:0; width:100%; height:100%; | |||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); | |||
animation: shine 2s infinite;"></div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<style> | |||
@keyframes slideIn { | |||
from { width: 0%; } | |||
to { width: 73%; } | |||
} | |||
@keyframes shine { | |||
0% { transform: translateX(-100%); } | |||
100% { transform: translateX(100%); } | |||
} | |||
</style> | |||
</html> | |||
==Side By Side Pictures== | ==Side By Side Pictures== | ||
Revision as of 08:16, 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.