Welcome to my Website!

This is a paragraph! Here's how you make a link: Neocities.

Here's how you can make bold and italic text.

Here's how you can add an image:

Here's how to make a list:

First thing
Second thing
Third thing

To learn more HTML/CSS, check out these tutorials!

now playing

Apple Vines

The Autocollants

1999

0:00

5:36

{ font-family: "myriad"; src: url("https://files.catbox.moe/s0igcb.OTF"); } - { margin: 0; padding: 0; box-sizing: border-box; transition: all 0.3s; list-style: none; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; transform-style: preserve-3d; font-family: "myriad"; } .ipod { background: #ececec; width: 240px; height: 360px; border-radius: 20px; position: relative; margin: auto; box-shadow: inset 5px 0px 15px 10px #00000090; } .ipod .screen { background: #fff; overflow: hidden; position: absolute; left: 50%; top: 15px; transform: translate(-50%, 0); width: 200px; height: 160px; border-radius: 8px; border: 2px solid #aaa; box-shadow: inset 0 0 0px 2px #222; } .ipod .controls { background: #fff; position: absolute; left: 50%; bottom: 25px; transform: translate(-50%, 0); width: 140px; height: 140px; border-radius: 50%; border: 0.5px solid #ccc; box-shadow: inset 0px 0px 5px 1px #00000050; } .ipod .controls:before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; border-radius: 50%; background: #ececec; box-shadow: inset 24px 24px 48px #c6c6c6, inset -24px -24px 48px #ffffff; border: 0.5px solid #ccc; } .ipod .controls .fa-fast-backward { position: absolute; top: 50%; left: 20px; transform: translate(0, -50%); color: #aaa; font-size: 1.2em; cursor: pointer; } .ipod .controls .fa-fast-backward:active { color: #888; } .ipod .controls .fa-fast-forward { position: absolute; top: 50%; right: 20px; transform: translate(0, -50%); color: #aaa; font-size: 1.2em; cursor: pointer; } .ipod .controls .fa-fast-forward:active { color: #888; } .ipod .controls .menu { position: absolute; left: 50%; top: 20px; transform: translate(-50%, 0); color: #aaa; font-size: 0.9em; font-weight: 700; border: 0; outline: 0; background: none; cursor: default; /* Keeps the menu button but disables interaction */ } .ipod .controls .menu:active { color: #888; } .ipod .controls .play-pause-btn { position: absolute; bottom: 20px; left: 50%; transform: translate(-50%, 0); border: 0; outline: 0; background: none; color: #aaa; font-size: 1em; cursor: pointer; } .ipod .controls .play-pause-btn:active { color: #888; } .ipod .screen .music { padding: 15px; display: flex; gap: 15px; } .ipod .screen .music img { width: 60px; height: 60px; object-fit: cover; -webkit-box-reflect: below 2px linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.09)); } .ipod .screen .music .content .name { font-size: 0.95em; } .ipod .screen .music .content .singer { font-size: 0.55em; font-family: "myriad"; } .ipod .screen .music .content .date { font-size: 0.85em; font-weight: 700; } .ipod .screen .bar-box { display: flex; justify-content: center; align-items: center; gap: 10px; font-size: 0.85em; width: 100%; position: absolute; bottom: 30px; } .ipod .screen .bar-box .bar { width: 80px; height: 10px; font-family: "myriad"; border: 1px solid #aaa; } .ipod .screen .bar-box .bar .progress { width: 0%; height: 100%; background: linear-gradient( to bottom, #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100% ); } *html + js*