diff options
| author | Pinapelz <yukais@pinapelz.com> | 2024-10-16 13:44:21 -0700 |
|---|---|---|
| committer | Pinapelz <yukais@pinapelz.com> | 2024-10-16 17:26:35 -0700 |
| commit | ef9a5008f78fa40e5d9a07330e53c1de3906d38e (patch) | |
| tree | 1a2cee49bd20adeee13c49f55a3e1c8c24f8f899 | |
| parent | a30ad5b2e7926584ff3c8fd903bea23346ce9b5a (diff) | |
add blog rss feed to about
| -rw-r--r-- | about.html | 9 | ||||
| -rw-r--r-- | index.html | 407 | ||||
| -rw-r--r-- | styles/styles.css | 502 |
3 files changed, 497 insertions, 421 deletions
@@ -130,6 +130,15 @@ </a> </div> </div> + <div class="general-section"> + <script + src="https://cdn.commoninja.com/sdk/latest/commonninja.js" + defer + ></script> + <div + class="commonninja_component pid-49988072-a735-4352-bc20-926a0d410f4b" + ></div> + </div> </div> <div class="footer"> <marquee behavior="scroll" direction="right"> @@ -1,172 +1,253 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> - <head> - <meta charset="UTF-8" /> - <meta name="viewport" content="width=device-width, initial-scale=1.0" /> - <title>pinapelz.moe - u found it</title> - <meta name="description" content="moe moe wow why did i make this" /> - <link rel="icon" href="assets/pfp.webp" /> - <link rel="stylesheet" type="text/css" href="styles/styles.css" /> - <link rel="stylesheet" type="text/css" href="styles/clock.css" /> - <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet"> - <script src="scripts/index.js"></script> - <style> - .marquee span { - font-family: 'Press Start 2P', cursive; - font-size: 25px; - } - </style> - </head> - <body> - <script src="/scripts/clock.js"></script> - <div class="container"> - <div class="header"> - <div class="header-content"> - <div class="marquee"> - <span>welcome to pinapelz.moe</span> - </div> - <div class="header-animation"> - <img src="/assets/603.webp" alt="rosemi" class="random-float" /> - <img src="/assets/eri.jpg" alt="erina" class=" random-float" /> - <img src="/assets/reine.jpg" alt="reine" class="random-float" /> - <img src="/assets/usami.webp" alt="usami" class="random-float" /> - <img src="/assets/vuln.jpg" alt="vuln" class="random-float" /> - <img src="/assets/gc.jpg" alt="gnomechild" class="random-float" /> - <img src="/assets/rappy.webp" alt="rappy" class="random-float" /> - <img src="/assets/aiba.webp" alt="aiba" class="random-float" /> - </div> - </div> - </div> - <div class="sidebar"> - <h3>Navigation</h3> - <ul> - <li><a href="/">home</a></li> - <li><a href="/about.html">webmaster</a></li> - <li><a href="/projects.html">projects</a></li> - <li><a href="https://moekyun.me">moeify my link</a></li> - </ul> - <img - src="assets/pfp.webp" - class="border-img crazy-image" - width="250px" - alt="Cute Anime GIF" + <head> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <title>pinapelz.moe - u found it</title> + <meta name="description" content="moe moe wow why did i make this" /> + <link rel="icon" href="assets/pfp.webp" /> + <link rel="stylesheet" type="text/css" href="styles/styles.css" /> + <link rel="stylesheet" type="text/css" href="styles/clock.css" /> + <link + href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" + rel="stylesheet" /> + <script src="scripts/index.js"></script> + <style> + .marquee span { + font-family: "Press Start 2P", cursive; + font-size: 25px; + } + </style> + </head> + <body> + <script src="/scripts/clock.js"></script> + <div class="container"> + <div class="header"> + <div class="header-content"> + <div class="marquee"> + <span>welcome to pinapelz.moe</span> + </div> + <div class="header-animation"> + <img + src="/assets/603.webp" + alt="rosemi" + class="random-float" + /> + <img + src="/assets/eri.jpg" + alt="erina" + class="random-float" + /> + <img + src="/assets/reine.jpg" + alt="reine" + class="random-float" + /> + <img + src="/assets/usami.webp" + alt="usami" + class="random-float" + /> + <img + src="/assets/vuln.jpg" + alt="vuln" + class="random-float" + /> + <img + src="/assets/gc.jpg" + alt="gnomechild" + class="random-float" + /> + <img + src="/assets/rappy.webp" + alt="rappy" + class="random-float" + /> + <img + src="/assets/aiba.webp" + alt="aiba" + class="random-float" + /> + </div> + </div> + </div> + <div class="sidebar"> + <h3>Navigation</h3> + <ul> + <li><a href="/">home</a></li> + <li><a href="/about.html">webmaster</a></li> + <li><a href="/projects.html">projects</a></li> + <li><a href="https://moekyun.me">moeify my link</a></li> + </ul> + <img + src="assets/pfp.webp" + class="border-img crazy-image" + width="250px" + alt="Cute Anime GIF" + /> - <div class="contacts-section"> - <h3>Contact Me</h3> - <p>idk maybe you need to reach me for some reason</p> - <ul> - <li> - Email: - <a href="mailto:pinapelz@moekyun.me">pinapelz@moekyun.me</a> - </li> - <li>X: <a href="https://x.com/pinapelz">@pinapelz</a></li> - <li> - Misskey: - <a href="https://mk.arks.cafe/@pinapelz" - >@pinapelz@mk.arks.cafe</a - > - </li> - <li>Discord: @pinapelz</li> - </ul> - </div> - <section id="discord-status" class="discord-status"> - <img - src="https://assets-global.website-files.com/6257adef93867e50d84d30e2/636e0a6ca814282eca7172c6_icon_clyde_white_RGB.svg" - alt="Discord Avatar" - /> - <div class="status-container"> - <h2><span class="status-text"></span></h2> - </div> - <script>fetchDiscordStatus("246787839570739211");</script> - </section> - <p id="quote"></p> - </div> + <div class="contacts-section"> + <h3>Contact Me</h3> + <p>idk maybe you need to reach me for some reason</p> + <ul> + <li> + Email: + <a href="mailto:pinapelz@moekyun.me" + >pinapelz@moekyun.me</a + > + </li> + <li> + X: <a href="https://x.com/pinapelz">@pinapelz</a> + </li> + <li> + Misskey: + <a href="https://mk.arks.cafe/@pinapelz" + >@pinapelz@mk.arks.cafe</a + > + </li> + <li>Discord: @pinapelz</li> + </ul> + </div> + <section id="discord-status" class="discord-status"> + <img + src="https://assets-global.website-files.com/6257adef93867e50d84d30e2/636e0a6ca814282eca7172c6_icon_clyde_white_RGB.svg" + alt="Discord Avatar" + /> + <div class="status-container"> + <h2><span class="status-text"></span></h2> + </div> + <script> + fetchDiscordStatus("246787839570739211"); + </script> + </section> + <p id="quote"></p> + </div> - <div class="content"> - <div class="welcome-box"> - <h2>Welcome!</h2> - <p> - <blink>Ahoy!</blink> Thanks for visiting! I thought the old Linktree - like site was pretty boring for a - <span class="glitter">.moe</span> domain, so I took matters into my - own hands and "<span class="glitter">moeifyed</span>" it! - </p> - <p style="display: flex; align-items: center"> - Hope you enjoy your stay! - <img - src="assets/xqcl.webp" - width="35px" - style="margin-left: 10px" - /> - </p> - </div> + <div class="content"> + <div class="welcome-box"> + <h2>Welcome!</h2> + <p> + <blink>Ahoy!</blink> Thanks for visiting! I thought the + old Linktree like site was pretty boring for a + <span class="glitter">.moe</span> domain, so I took + matters into my own hands and "<span class="glitter" + >moeifyed</span + >" it! + </p> + <p style="display: flex; align-items: center"> + Hope you enjoy your stay! + <img + src="assets/xqcl.webp" + width="35px" + style="margin-left: 10px" + /> + </p> + </div> - <div class="general-section"> - <div id="music-player" class="music-player"> - <h3>Patchwork Radio</h3> - <audio controls style="width: 100%;"> - <source src="https://a4.asurahosting.com/listen/patchworkarchive/radio.mp3" type="audio/mpeg" /> - Your browser does not support the audio element. - </audio> - <div id="now-playing" class="now-playing"> - <h4>Now Playing:</h4> - <p id="song-title">Loading... 123</p> - <p id="song-artist">plz be patient. radio might be down</p> - <a href="https://patchwork.moekyun.me/radio">Powered by Patchwork Archive</a> + <div class="general-section"> + <div id="music-player" class="music-player"> + <h3>Patchwork Radio</h3> + <audio controls style="width: 100%"> + <source + src="https://a4.asurahosting.com/listen/patchworkarchive/radio.mp3" + type="audio/mpeg" + /> + Your browser does not support the audio element. + </audio> + <div id="now-playing" class="now-playing"> + <h4>Now Playing:</h4> + <p id="song-title">Loading... 123</p> + <p id="song-artist"> + plz be patient. radio might be down + </p> + <a href="https://patchwork.moekyun.me/radio" + >Powered by Patchwork Archive</a + > + </div> + </div> + <img + src="/assets/growing.gif" + height="300px" + alt="Patchwork Archive" + class="border-img" + /> + <img + src="/assets/skill-issue.gif" + height="300px" + alt="Patchwork Archive" + class="border-img" + /> + </div> + <div id="clock" class="clock-widget"></div> + <div class="general-section" style="font-size: 1.1em"> + <div> + <h3>GitHub</h3> + <p> + nerdge programming <br /> + + open source stuff 🤓 + </p> + <a href="https://github.com/pinapelz"> + <img + src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" + alt="GitHub Logo" + width="20" + height="20" + style=" + vertical-align: middle; + margin-right: 5px; + " + /> + github.com/pinapelz + </a> + </div> + <div> + <h3>Blog</h3> + <p> + random rambling<br /> + (sometimes technical stuff) + </p> + <a href="https://blog.pinapelz.com"> + blog.pinapelz.com + </a> + </div> + <div> + <h3>Super Secret Link</h3> + <p> + mystery link for true vtuber degens<br /> + I'll change it from time to time + </p> + <a href="https://moekyun.me/V8wPmz"> + 🔒 https://moekyun.me/V8wPmz + </a> + </div> + </div> </div> - </div> - <img src="/assets/growing.gif" height=300px alt="Patchwork Archive" class="border-img" /> - <img src="/assets/skill-issue.gif" height=300px alt="Patchwork Archive" class="border-img" /> - </div> - <div id="clock" class="clock-widget"> - </div> - <div class="general-section" style="font-size: 1.1em;"> - <div> - <h3>GitHub</h3> - <p>nerdge programming <br/> + open source stuff 🤓</p> - <a href="https://github.com/pinapelz"> - <img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="GitHub Logo" width="20" height="20" style="vertical-align: middle; margin-right: 5px;"> - github.com/pinapelz - </a> - </div> - - <div> - <h3>Blog</h3> - <p>random rambling<br/> - (sometimes technical stuff)</p> - <a href="https://blog.pinapelz.com"> - blog.pinapelz.com - </a> - </div> - <div> - <h3>Super Secret Link</h3> - <p>mystery link for true vtuber degens<br/> - I'll change it from time to time</p> - <a href="https://moekyun.me/V8wPmz"> - 🔒 https://moekyun.me/V8wPmz - </a> - </div> - </div> - - </div> - <div class="footer"> + <div class="footer"> + <marquee behavior="scroll" direction="right"> + pinapelz.moe/ pinapelz.com / phase-tracker.com / + imisserinya.phase-tracker.com / patchwork.moekyun.me / + blog.pinapelz.com / signpost.pinapelz.com / + mojibaka.pinapelz.com / moekyun.me / + vtuber-captcha.moekyun.me / + </marquee> - <marquee behavior="scroll" direction="right"> - pinapelz.moe/ pinapelz.com / phase-tracker.com / - imisserinya.phase-tracker.com / patchwork.moekyun.me / - blog.pinapelz.com / signpost.pinapelz.com / mojibaka.pinapelz.com / - moekyun.me / vtuber-captcha.moekyun.me / - </marquee> - - <a href="https://nekoweb.org/"><img src="https://nekoweb.org/assets/buttons/button7.gif"></a> - <a href="https://linux.org/"><img src="https://adriansblinkiecollection.neocities.org/buttons/a46.jpg"></a> - <a href="https://www.cutercounter.com/" target="_blank"><img src="https://www.cutercounter.com/hits.php?id=huxqxocn&nd=6&style=119" border="0" alt="hit counter"></a> - - - </div> - </div> - </body> -</html>
\ No newline at end of file + <a href="https://nekoweb.org/" + ><img src="https://nekoweb.org/assets/buttons/button7.gif" + /></a> + <a href="https://linux.org/" + ><img + src="https://adriansblinkiecollection.neocities.org/buttons/a46.jpg" + /></a> + <a href="https://www.cutercounter.com/" target="_blank" + ><img + src="https://www.cutercounter.com/hits.php?id=huxqxocn&nd=6&style=119" + border="0" + alt="hit counter" + /></a> + </div> + </div> + </body> +</html> diff --git a/styles/styles.css b/styles/styles.css index 29b14f0..00368ec 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -1,378 +1,365 @@ body { - background: url("bg.webp"); - background-size: 100px 100px, 100% 100%; - font-family: "Courier New", monospace; - color: #333; - background-color: pink; - cursor: url("cursor.gif"), auto; + background: url("bg.webp"); + background-size: + 100px 100px, + 100% 100%; + font-family: "Courier New", monospace; + color: #333; + background-color: pink; + cursor: url("cursor.gif"), auto; } .container { - width: 80%; - margin: 0 auto; - padding: 20px; - border-width: 10px; - border-style: solid; - border-image: url("border.webp") 9 fill round; - z-index: -999; + width: 80%; + margin: 0 auto; + padding: 20px; + border-width: 10px; + border-style: solid; + border-image: url("border.webp") 9 fill round; + z-index: -999; } .sidebar { - float: left; - width: 25%; - padding: 10px; - margin-top: 30px; - border: solid #ffb6c1 2px; - background: #ffe4e1; - text-align: center; + float: left; + width: 25%; + padding: 10px; + margin-top: 30px; + border: solid #ffb6c1 2px; + background: #ffe4e1; + text-align: center; } .sidebar ul { - list-style-type: none; - padding: 0; - margin: 0; - text-align: center; + list-style-type: none; + padding: 0; + margin: 0; + text-align: center; } .sidebar ul li { - margin-bottom: 2px; + margin-bottom: 2px; } .sidebar ul li a { - color: #ff69b4; - text-decoration: none; + color: #ff69b4; + text-decoration: none; } .sidebar ul li a:hover { - text-decoration: underline; + text-decoration: underline; } .content { - float: right; - width: 70%; - padding: 10px; + float: right; + width: 70%; + padding: 10px; } .footer { - clear: both; - text-align: center; - padding-top: 30px; - margin-top: 20px; - font-size: 0.8em; + clear: both; + text-align: center; + padding-top: 30px; + margin-top: 20px; + font-size: 0.8em; } a { - color: #ff69b4; - text-decoration: none; + color: #ff69b4; + text-decoration: none; } a:hover { - text-decoration: underline; + text-decoration: underline; } .glitter { - color: #ff69b4; - font-weight: bold; - animation: glitter 3s infinite alternate; + color: #ff69b4; + font-weight: bold; + animation: glitter 3s infinite alternate; } @keyframes glitter { - 0% { - color: #ff69b4; - } - 25% { - color: #ff1493; - } - 50% { - color: #db7093; - } - 75% { - color: #ff69b4; - } - 100% { - color: #ffa07a; - } + 0% { + color: #ff69b4; + } + 25% { + color: #ff1493; + } + 50% { + color: #db7093; + } + 75% { + color: #ff69b4; + } + 100% { + color: #ffa07a; + } } .border-img { - max-width: 100%; - border: solid #ff69b4 2px; + max-width: 100%; + border: solid #ff69b4 2px; } marquee { - font-size: 1.2em; - color: #ff69b4; - margin-bottom: 10px; + font-size: 1.2em; + color: #ff69b4; + margin-bottom: 10px; } blink { - color: #ff1493; - animation: blinker 1.5s linear infinite; + color: #ff1493; + animation: blinker 1.5s linear infinite; } @keyframes blinker { - 50% { - opacity: 0; - } + 50% { + opacity: 0; + } } .welcome-box { - border-style: dashed; - border: 2px dashed #ff69b4; - padding: 20px; + border-style: dashed; + border: 2px dashed #ff69b4; + padding: 20px; } .general-section { - margin-top: 20px; - padding: 10px; - background: #ffebf0; - border: solid #ffb6c1 2px; - display: flex; - flex-direction: row; - justify-content: space-between; + margin-top: 20px; + padding: 10px; + background: #ffebf0; + border: solid #ffb6c1 2px; + display: flex; + flex-direction: row; + justify-content: space-between; } .general-section h3 { - color: #ff69b4; - text-shadow: 1px 1px 2px #fff; + color: #ff69b4; + text-shadow: 1px 1px 2px #fff; } .general-section ul { - list-style-type: disc; - padding-left: 20px; - flex: 1; + list-style-type: disc; + padding-left: 20px; + flex: 1; } .general-section ul li { - margin-bottom: 10px; + margin-bottom: 10px; } .contacts-section { - margin-top: 20px; - padding: 10px; - background: #ffe4e1; - border: solid #ffb6c1 2px; + margin-top: 20px; + padding: 10px; + background: #ffe4e1; + border: solid #ffb6c1 2px; } .contacts-section h3 { - color: #ff69b4; - text-shadow: 1px 1px 2px #fff; + color: #ff69b4; + text-shadow: 1px 1px 2px #fff; } .contacts-section ul { - list-style-type: none; - padding: 0; + list-style-type: none; + padding: 0; } .contacts-section ul li { - margin-bottom: 5px; + margin-bottom: 5px; } .discord-status { - display: flex; - align-items: center; - padding: 15px; - border-radius: 10px; - color: white; - transition: background-color 0.3s ease-in-out; - margin-top: 20px; - margin-bottom: 10px; - background: #7289da; + display: flex; + align-items: center; + padding: 15px; + border-radius: 10px; + color: white; + transition: background-color 0.3s ease-in-out; + margin-top: 20px; + margin-bottom: 10px; + background: #7289da; } .discord-status img { - width: 50px; - height: 50px; - border-radius: 50%; - margin-right: 20px; + width: 50px; + height: 50px; + border-radius: 50%; + margin-right: 20px; } .discord-status h2 { - font-size: 1.2rem; + font-size: 1.2rem; } .discord-status p { - font-size: 1rem; - opacity: 0.8; + font-size: 1rem; + opacity: 0.8; } @keyframes crazy-animation { - 0% { - transform: rotate(0deg) scale(1) translateX(0) skew(0deg) rotateY(0deg); - filter: hue-rotate(0deg) blur(0px); - opacity: 1; - } - 10% { - transform: rotate(30deg) scale(1.3) translateX(10px) skew(10deg) - rotateY(90deg); - filter: hue-rotate(50deg) blur(2px); - opacity: 0.8; - } - 25% { - transform: rotate(45deg) scale(1.5) translateX(20px) skew(-10deg) - rotateY(180deg); - filter: hue-rotate(120deg) blur(4px); - opacity: 0.6; - } - 50% { - transform: rotate(-45deg) scale(0.8) translateX(-30px) skew(15deg) - rotateY(270deg); - filter: hue-rotate(200deg) blur(6px); - opacity: 1; - } - 75% { - transform: rotate(90deg) scale(1.8) translateX(15px) skew(-15deg) - rotateY(360deg); - filter: hue-rotate(300deg) blur(3px); - opacity: 0.7; - } - 100% { - transform: rotate(0deg) scale(1) translateX(0) skew(0deg) rotateY(0deg); - filter: hue-rotate(360deg) blur(0px); - opacity: 1; - } + 0% { + transform: rotate(0deg) scale(1) translateX(0) skew(0deg) rotateY(0deg); + filter: hue-rotate(0deg) blur(0px); + opacity: 1; + } + 10% { + transform: rotate(30deg) scale(1.3) translateX(10px) skew(10deg) + rotateY(90deg); + filter: hue-rotate(50deg) blur(2px); + opacity: 0.8; + } + 25% { + transform: rotate(45deg) scale(1.5) translateX(20px) skew(-10deg) + rotateY(180deg); + filter: hue-rotate(120deg) blur(4px); + opacity: 0.6; + } + 50% { + transform: rotate(-45deg) scale(0.8) translateX(-30px) skew(15deg) + rotateY(270deg); + filter: hue-rotate(200deg) blur(6px); + opacity: 1; + } + 75% { + transform: rotate(90deg) scale(1.8) translateX(15px) skew(-15deg) + rotateY(360deg); + filter: hue-rotate(300deg) blur(3px); + opacity: 0.7; + } + 100% { + transform: rotate(0deg) scale(1) translateX(0) skew(0deg) rotateY(0deg); + filter: hue-rotate(360deg) blur(0px); + opacity: 1; + } } .crazy-image:hover { - animation: crazy-animation 3s ease-in-out infinite; + animation: crazy-animation 3s ease-in-out infinite; } .fullscreen-text { - top: 0; - left: 0; - color: black; - display: flex; - justify-content: center; - align-items: center; - font-size: 2em; - opacity: 0; - visibility: hidden; - transition: opacity 0.5s, visibility 0.5s; - z-index: 10; + top: 0; + left: 0; + color: black; + display: flex; + justify-content: center; + align-items: center; + font-size: 2em; + opacity: 0; + visibility: hidden; + transition: + opacity 0.5s, + visibility 0.5s; + z-index: 10; } .crazy-image:hover + .fullscreen-text { - opacity: 1; - visibility: visible; + opacity: 1; + visibility: visible; } @media (max-width: 1024px) { - .container { - width: 90%; - } - - .main-content { - flex-direction: column; - } - .general-section { - flex-direction: column; - align-items: center; - } + .container { + width: 90%; + } - .general-section ul { - padding-left: 0; - } + .main-content { + flex-direction: column; + } - .sidebar, - .content { - width: 100%; - } + .sidebar, + .content { + width: 100%; + } } /* Media Queries for Mobile Devices */ @media (max-width: 768px) { - .container { - width: 100%; - padding: 10px; - } - .sidebar, - .content { - float: none; - width: 100%; - margin-top: 10px; - } - .header { - font-size: 1.5em; - } - .footer { - font-size: 0.7em; - } - .discord-status { - flex-direction: column; - align-items: flex-start; - } - .discord-status img { - margin-right: 0; - margin-bottom: 10px; - } - .discord-status h2 { - font-size: 1rem; - } - .discord-status p { - font-size: 0.9rem; - } + .container { + width: 100%; + padding: 10px; + } + .sidebar, + .content { + float: none; + width: 100%; + margin-top: 10px; + } + .header { + font-size: 1.5em; + } + .footer { + font-size: 0.7em; + } + .discord-status { + flex-direction: column; + align-items: flex-start; + } + .discord-status img { + margin-right: 0; + margin-bottom: 10px; + } + .discord-status h2 { + font-size: 1rem; + } + .discord-status p { + font-size: 0.9rem; + } } .center { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - text-align: center; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; } .music-player { - - margin-top: 20px; - padding: 10px; - background: #ffebf0; - border: dotted #ffb6c1 2px; - display: inline-block; - vertical-align: top; -} -.general-section { - flex-direction: column; - align-items: center; + margin-top: 20px; + padding: 10px; + background: #ffebf0; + border: dotted #ffb6c1 2px; + display: inline-block; + vertical-align: top; } -.general-section ul { - padding-left: 0; -} .music-player h3 { - color: #ff69b4; - text-shadow: 1px 1px 2px #fff; - margin-bottom: 10px; - text-align: center; + color: #ff69b4; + text-shadow: 1px 1px 2px #fff; + margin-bottom: 10px; + text-align: center; } .music-player audio { - width: 100%; + width: 100%; } .now-playing { - margin-top: 10px; - padding: 10px; - text-align: center; + margin-top: 10px; + padding: 10px; + text-align: center; } .now-playing h4 { - margin: 0; - font-size: 1.2em; + margin: 0; + font-size: 1.2em; } .now-playing p { - margin: 5px 0; + margin: 5px 0; } - - - .header { position: relative; text-align: center; font-size: 2em; color: #ff69b4; - text-shadow: 1px 1px 2px #fff, 2px 2px 4px #ffa07a; + text-shadow: + 1px 1px 2px #fff, + 2px 2px 4px #ffa07a; animation: glitter 3s infinite alternate; overflow: hidden; - } - - .header-content { +} + +.header-content { position: relative; z-index: 1; - } - - .header-animation { +} + +.header-animation { position: absolute; top: 0; left: 0; @@ -380,31 +367,30 @@ blink { height: 100%; pointer-events: none; z-index: -997; - } - - .header-animation img { +} + +.header-animation img { position: absolute; width: 50px; height: 50px; opacity: 0.8; animation: float 5s infinite ease-in-out; - } - - - @keyframes float { +} + +@keyframes float { 0% { - transform: translateY(0); + transform: translateY(0); } 50% { - transform: translateY(-40px); + transform: translateY(-40px); } 100% { - transform: translateY(0); + transform: translateY(0); } - } - - marquee { +} + +marquee { font-size: 1.2em; color: #ff69b4; margin-bottom: 10px; - }
\ No newline at end of file +} |