Treexmas.pngLogxmas.pngSanta small.pngTreexmas.pngSanta small.pngTreexmas.pngSanta small.pngTreexmas.png [ [ [ bloggin space w i k i ] ] ]Santa small.pngTreexmas.pngSanta small.pngTreexmas.pngSanta small.pngTreexmas.pngLogxmas.pngTreexmas.png

Difference between revisions of "Test page"

From blogginpedia
Jump to navigation Jump to search
Tag: Reverted
 
(11 intermediate revisions by the same user not shown)
Line 60: Line 60:
<div style="background:#eee; border-radius:8px; padding:3px; margin:15px 0;">
<div style="background:#eee; border-radius:8px; padding:3px; margin:15px 0;">
<div style="background:#4caf50; width:73%; padding:8px; color:white; text-align:center; border-radius:6px;">
<div style="background:#4caf50; width:73%; padding:8px; color:white; text-align:center; border-radius:6px;">
73% Complete
73% Complete...
</div>
</div>
</div>
</div>
<div style="display:flex;justify-content:center;margin:15px 0;">
<div style="width:100%;max-width:600px;">
<div style="background:#eee; border-radius:8px; padding:3px; margin:15px 0;">
<div style="background:#4caf50; width:73%; padding:8px; color:white; text-align:center; border-radius:6px;">
73% Complete...
</div>
</div>
</div>
</div>
<div style="display:flex;justify-content:center;margin:15px 0;">
<div style="width:100%;max-width:300px;">
<div style="background:#eee; border-radius:8px; padding:3px; margin:15px 0;">
<div style="background:#4caf50; width:73%; padding:8px; color:white; text-align:center; border-radius:6px;">
73% Complete...
</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==
Line 132: Line 223:
</div>
</div>


==Grayscale==
==Spinner==
 
<html>
<div style="display:flex;justify-content:center;margin:50px;"><div style="width:50px;height:50px;border:5px solid #eee;border-top:5px solid #FF69B4;border-radius:50%;animation:spin 1s linear infinite;"></div></div><style>@keyframes spin{100%{transform:rotate(360deg)}}</style>
</html>
 
==Bounce Card==
 
<html>
<div style="display:flex;justify-content:center;"><div style="width:280px;padding:20px;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.1);border-radius:12px;animation:bounceIn 5s;">✨ Suck It!</div></div><style>@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}60%{transform:scale(1.05)}80%{transform:scale(.95)}100%{opacity:1;transform:scale(1)}}</style>
</html>
 
==Typer==
 
<html>
<div style="font-family:monospace;font-size:18px;overflow:hidden;white-space:nowrap;width:0;animation:type 5s steps(80) infinite alternate;border-right:3px solid;margin:80px auto;text-align:center;">This is a typer.  I hate that it goes backwards and erases itself.</div><style>@keyframes type{from{width:0}to{width:900px}}</style>
</html>
 
==Success==
 
<html><div style="text-align:center;margin:50px;font-size:60px;color:#4caf50;animation:check 1.5s forwards;opacity:0;">✓</div><style>@keyframes check{0%{transform:scale(0) rotate(-30deg);opacity:0}60%{transform:scale(1.2)}100%{transform:scale(1);opacity:1}}</style>
</html>
 
==Gradient==
<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>
</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>


<div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:25px; margin:30px 0;">
==Rainbow WTF?==
  <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;">
<html>
      [[File:Hamburgersoup.jpg|300px|class=grayscale-hover]]
<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>
    </span>
</html>
    <div style="padding:12px; background:#fff; font-weight:600;">Hamburger Soup</div>
 
  </div>
==More Progress==
 
<html>
<div style="display:flex;justify-content:center;margin:30px 0"><div style="width:100%;max-width:340px;height:30px;background:#000;border:4px solid #fff;box-shadow:0 0 0 4px #000"><div style="height:100%;width:73%;background:#0f0;display:flex;align-items:center;padding-left:8px;color:#000;font-weight:bold;image-rendering:pixelated;animation:pixelFill 2s steps(20) forwards">73% LOADING...</div></div></div><style>@keyframes pixelFill{from{width:0}}</style>
</html>


  <div style="text-align:center; border-radius:12px; overflow:hidden; box-shadow:0 4px 15px rgba(0,0,0,0.1);">
<html>
    <span style="display:block; overflow:hidden;">
<div style="display:flex;justify-content:center;margin:30px 0"><div style="width:100%;max-width:340px"><div style="height:10px;background:#eee;border-radius:0px;overflow:hidden"><div id="bar" style="width:0;height:100%;background:#FF69B4;animation:bar 3s ease-out forwards"></div></div><div style="text-align:center;margin-top:10px;font-size:20px;font-weight:bold;color:#FF69B4"><span id="num">0</span>% Complete</div></div></div><script>let i=0;const int=setInterval(()=>{if(i>=83){clearInterval(int)}document.getElementById('num').innerText=i;i++},40);</script><style>@keyframes bar{to{width:83%}}</style>
      [[File:Oreoblueberry.jpg|300px|class=grayscale-hover]]
</html>
    </span>
    <div style="padding:12px; background:#fff; font-weight:600;">Oreo Blueberry</div>
  </div>


  <!-- add as many as you want -->
<html>
</div>
<div style="display:flex;justify-content:center;margin:30px 0"><div style="width:100%;max-width:340px;height:30px;background:#ddd;border-radius:0px;overflow:hidden;position:relative"><div style="position:absolute;width:200%;height:200%;background:repeating-linear-gradient(60deg,#4caf50,#66bb6a 15%);animation:wave 8s linear infinite,liquidFill 3s ease-out forwards;transform:translateX(-73%) translateY(-73%)"></div><div style="position:absolute;top:4px;left:0;width:100%;text-align:center;color:white;font-weight:bold;text-shadow:0 1px 3px #000">73% Complete</div></div></div><style>@keyframes liquidFill{from{transform:translateX(-100%) translateY(-73%)}to{transform:translateX(-73%) translateY(-50%)}}@keyframes wave{background-position:0 0,400px 0}</style>
</html>


<style>
<html>
.grayscale-hover img {
<div style="display:flex;justify-content:center;margin:30px 0"><div style="width:100%;max-width:340px"><div style="height:24px;background:#e0e0e0;border-radius:12px;overflow:hidden;position:relative"><div style="width:73%;height:100%;background:repeating-linear-gradient(45deg,#ff6b6b,#ff6b6b 10px,#feca57 10px,#feca57 20px);animation:fillStripe 2s ease-out,moveStripe 4s linear infinite"></div><div style="position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;line-height:24px;color:#333;font-weight:bold">73% Complete</div></div></div></div><style>@keyframes fillStripe{from{width:0}to{width:73%}}@keyframes moveStripe{background-position:0 0,100% 0}</style>
  filter: grayscale(100%);
</html>
  transition: filter 0.6s ease;
}
.grayscale-hover:hover img {
  filter: grayscale(0%);
}
</style>


[[Category:Help]]
[[Category:Help]]

Latest revision as of 08:46, 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.

Twitter

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...

73% Complete...

73% Complete...

73% Complete...

Side By Side Pictures

Hamburgersoup.jpg
Left side caption

Oreoblueberry.jpg
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

   Hamburgersoup.jpg
Hamburger Soup

   Oreoblueberry.jpg
Oreo Blueberry

   Hamburgersoup.jpg
Picture here to demonstrate

   Oreoblueberry.jpg
That you can make

   Hamburgersoup.jpg
Your own style of gallery.

Spinner

Bounce Card

✨ Suck It!

Typer

This is a typer. I hate that it goes backwards and erases itself.

Success

✓

Gradient

Shimmer

totally fabbbbbbulous!

Bubbles?

Rainbow WTF?

What is this thing doing?

More Progress

73% LOADING...

0% Complete

73% Complete

73% Complete

Retrieved from "https://bloggin.space/wiki/index.php?title=Test_page&oldid=11797"