HTML Codes You can Use Part 8

Glitter Frame Box

✨ This is a glitter frame box ✨ <div style="background:#fff0f5; border:5px dashed #ff69b4; padding:15px; text-align:center;"> ✨ This is a glitter frame box ✨ </div>

Hover Glow Box

Hover over me!

<div class="hoverglow">Hover over me!</div> <style> .hoverglow { padding:10px; border:2px solid #32cd32; display:inline-block; transition: all 0.3s ease-in-out; } .hoverglow:hover { box-shadow:0 0 15px #32cd32; transform:scale(1.05); } </style>

Nested Boxes

Outer Box

Inner Box

<div style="background:#fffacd; border:3px solid #ffa500; padding:10px;"> Outer Box <div style="background:#fff8dc; border:2px dotted #ff69b4; padding:10px; text-align:center;"> Inner Box </div> </div>

Sparkle Divider

✨✨✨✨✨ <p style="text-align:center;">✨✨✨✨✨</p>

Animated Rainbow Box

🌈 Retro Magic 🌈 <div style="border:3px solid #ff4500; padding:15px; text-align:center;"> <span class="rainbowbox">🌈 Retro Magic 🌈</span> </div> <style> @keyframes rainbowflash {0%,100%{color:red;} 14%{color:orange;} 28%{color:yellow;} 42%{color:green;} 56%{color:blue;} 70%{color:indigo;} 84%{color:violet;}} .rainbowbox { animation: rainbowflash 2s infinite; font-weight:bold; font-size:20px;} </style>

Glitter Image Box

<div style="background:#fff0f5; border:3px dashed #ff69b4; padding:15px; text-align:center;"> <img src="https://i.imgur.com/glitter.gif" alt="Glitter Image"> </div>

Double Rainbow Divider

---

<hr style="border:4px double; width:70%; border-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet) 1;">

Glowing Box

✨ Glowing Box ✨

<div class="glowbox">✨ Glowing Box ✨</div> <style> .glowbox { padding:10px; border:2px solid #32cd32; display:inline-block; box-shadow: 0 0 10px #32cd32; animation: glowflash 1s infinite alternate; } @keyframes glowflash {0%{box-shadow:0 0 5px #32cd32;}100%{box-shadow:0 0 20px #32cd32;}} </style>

HTML Codes you can Use Part 6

Glitter Banner

<img src="https://i.imgur.com/glitter.gif" alt="Glitter Banner">

Scrolling Marquee

✨ Welcome to My Retro Site! ✨

<marquee behavior="scroll" direction="left" scrollamount="6">✨ Welcome to My Retro Site! ✨</marquee>

Retro Button

CLICK ME

<a href="http://yourwebsite.com" style="background-color:#ff69b4; color:#fff; padding:5px 15px; text-decoration:none; font-weight:bold; border:2px solid #000; display:inline-block; animation:blinkbtn 1s infinite;">CLICK ME</a> <style> @keyframes blinkbtn {0%,100%{opacity:0.5;}50%{opacity:1;}} </style>

Badge Bar

<a href="#"><img src="https://i.imgur.com/badge1.gif" alt="Badge1"></a> <a href="#"><img src="https://i.imgur.com/badge2.gif" alt="Badge2"></a> <a href="#"><img src="https://i.imgur.com/badge3.gif" alt="Badge3"></a>

Sparkling Text Banner

✨ RETRO SPARKLE ✨

<span class="sparkbanner">✨ RETRO SPARKLE ✨</span> <style> @keyframes sparkle {0%,100%{opacity:0.3;}50%{opacity:1;}} .sparkbanner { animation: sparkle 1s infinite; font-size:24px; color:#ff1493; font-weight:bold;} </style>

Retro Divider

✨✨✨✨✨

<p style="text-align:center;">✨✨✨✨✨</p>

Blinking Arrow Divider

➡️✨➡️✨➡️

<span class="blinkarrow">➡️✨➡️✨➡️</span> <style> @keyframes blinkarrow {0%,100%{opacity:0.3;}50%{opacity:1;}} .blinkarrow { animation: blinkarrow 1s infinite; font-size:24px; color:#ff4500;} </style>

Glitter Heart Marquee

💖✨💖✨💖

<marquee behavior="scroll" direction="left" scrollamount="6">💖✨💖✨💖</marquee>

Star Marquee

⭐✨⭐✨⭐

<marquee behavior="scroll" direction="right" scrollamount="5">⭐✨⭐✨⭐</marquee>

Shiny Rainbow Header

✨ RETRO MAGIC ✨

<span class="rainbowheader">✨ RETRO MAGIC ✨</span> <style> .rainbowheader { background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); -webkit-background-clip:text; color:transparent; font-weight:bold; font-size:24px; animation:blinkrainbow 1s infinite; } @keyframes blinkrainbow {0%,100%{opacity:0.3;}50%{opacity:1;}} </style>

HTML Codes you can Use Part 5

Blinking Exclamation

❗❗ ALERT ❗❗

<span class="blinker">❗❗ ALERT ❗❗</span> <style> @keyframes blink {0%,50%,100%{opacity:1;}25%,75%{opacity:0;}} .blinker { animation: blink 1s infinite; color:#ff0000; font-weight:bold; font-size:24px;} </style>

Sparkling Rainbow Text

✨Y2K VIBES✨

<span class="rainbowsparkle">✨Y2K VIBES✨</span> <style> @keyframes sparkle {0%,100%{opacity:0.3;}50%{opacity:1;}} .rainbowsparkle { animation: sparkle 1s infinite; background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); -webkit-background-clip:text; color:transparent; font-weight:bold; font-size:24px;} </style>

Animated Sparkle Stars

✨⭐✨⭐✨

<span class="sparkstars">✨⭐✨⭐✨</span> <style> @keyframes sparkle {0%,100%{opacity:0.3;}50%{opacity:1;}} .sparkstars { animation: sparkle 1s infinite; font-size:24px; color:#ff1493; font-weight:bold;} </style>

Glitter Heart Header

💖💖💖 RETRO 💖💖💖

<span class="glitterheart">💖💖💖 RETRO 💖💖💖</span> <style> @keyframes glitter {0%,100%{opacity:0.3;}50%{opacity:1;}} .glitterheart { animation: glitter 1s infinite; font-size:24px; color:#ff69b4; font-weight:bold;} </style>

Blinking Rainbow Divider

🌈🌈🌈🌈🌈🌈

<span class="rainbowdivider">🌈🌈🌈🌈🌈🌈</span> <style> @keyframes rainbowblink {0%,100%{opacity:0.3;}50%{opacity:1;}} .rainbowdivider { animation: rainbowblink 1s infinite; font-size:24px;} </style>

Sparkle Arrow Divider

✨➡️✨➡️✨➡️

<span class="sparkarrow">✨➡️✨➡️✨➡️</span> <style> @keyframes sparkle {0%,100%{opacity:0.3;}50%{opacity:1;}} .sparkarrow { animation: sparkle 1s infinite; font-size:24px; color:#ff00ff; font-weight:bold;} </style>

Blinking Star Header

⭐✨ RETRO HEADER ✨⭐

<span class="blinkstarsheader">⭐✨ RETRO HEADER ✨⭐</span> <style> @keyframes blinkstars {0%,100%{opacity:0.3;}50%{opacity:1;}} .blinkstarsheader { animation: blinkstars 1s infinite; font-size:24px; color:#ff4500; font-weight:bold;} </style>

Glitter Arrow Header

✨➡️ RETRO ➡️✨

<span class="glitterarrow">✨➡️ RETRO ➡️✨</span> <style> @keyframes glitter {0%,100%{opacity:0.3;}50%{opacity:1;}} .glitterarrow { animation: glitter 1s infinite; font-size:24px; color:#ff69b4; font-weight:bold;} </style>

Sparkle Heart Divider

💖✨💖✨💖✨💖

<p style="text-align:center;">💖✨💖✨💖✨💖</p>