| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Lakes' Art</title>
- <!-- The style.css file allows you to change the look of your web pages.
- If you include the next line in all your web pages, they will all share the same look.
- This makes it easier to make new pages for your site. -->
- <link href="/style.css" rel="stylesheet" type="text/css" media="all">
- <link rel="icon" href="favicon.png">
- <link rel="stylesheet" href="XP.css">
- </head>
- <body>
-
-
- <div class="background">
- <div class="window" style="width: 500px">
- <div class="title-bar">
- <div class="title-bar-text">Navigation</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <a href="/index.html"><button>Home</button></a>
- <a href="/aboutme.html"><button>About Me</button></a>
- <a href="/blog.html"><button>Blogging</button></a>
- <a href="logcabin.html"><button>Chatroom</button></a>
- <a href="fanschoice.html"><button>Fanpages</button></a>
- <a href="donate.html"><button>Fundraisers</button></a>
- <a href="extragraphics.html"><button>GIF Graphics</button></a>
- <a href="/guestbook/gbook.php"><button>Guestbook</button></a>
-
- <a href="coolsitesandmutuals.html"><button>Other Sites</button></a>
- </div>
- </div>
- </div>
- <div class="background">
- <div class="window" style="width: 300px; margin: 0 1.5em;">
- <div class="title-bar">
- <div class="title-bar-text">How to Play Music On This Page</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- Hover over the album cover, then click the previous/next button.
- </div>
- </div>
- </div>
- <div class="iframe-container">
- <img src="YIL!OMA2K.png" alt="Overlay Image">
- <iframe style="border: 0; width: 160px; height: 110px;" src="https://bandcamp.com/EmbeddedPlayer/album=1250119429/size=large/bgcol=ffffff/linkcol=0687f5/minimal=true/transparent=true/" seamless><a href="https://yves-tumor.bandcamp.com/album/praise-a-lord-who-chews-but-which-does-not-consume-or-simply-hot-between-worlds">Praise A Lord Who Chews But Which Does Not Consume; (Or Simply, Hot Between Worlds) by Yves Tumor</a></iframe>
- </div>
-
- <div class="window" style="width: 300px; margin: 0 1.5em;">
- <div class="title-bar">
- <div class="title-bar-text">Site RSS Feed</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <a href="https://lakes.glamour.ovh/art-rss.xml">Art RSS Feed</a> for art updates
- <p><a href="https://lakes.glamour.ovh/miscupdates.xml">Misc Updates RSS Feed</a></p>
- <p><a href="https://codeberg.org/LakesTheGuy/My-Website.rss">The Codeberg Repo's RSS Feed</a> for site updates & source code changes</p>
- For my blog's RSS feed, go to my blog page.
- </div>
- </div>
-
- <div class="container">
- <main>
- <div class="item1">
- <div class="window" style="width: 300px; margin: 0 1.5em;">
- <div class="title-bar">
- <div class="title-bar-text">Drawing 1</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <a href="drawing1.jpg"><img src="drawing1.jpg" style="width:60%; height:40%"></a>
- </div>
- </div>
- </div>
- </main>
- <div class="item2">
- <div class="window" style="width: 300px">
- <div class="title-bar">
- <div class="title-bar-text">Drawing 2</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <a href="drawing2.jpg"><img src="drawing2.jpg" style= "width:60%; height:40%"></a>
- </div>
- </div>
- </div>
- <div class="item3">
- <div class="window" style="width: 300px;">
- <div class="title-bar">
- <div class="title-bar-text">Drawing 3</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <a href="drawing3.jpg"><img src="drawing3.jpg" style= "width:60%; height:40%"></a>
- </div>
- </div>
- </div>
- <div class="item4">
- <div class="window" style="width: 300px;">
- <div class="title-bar">
- <div class="title-bar-text">Drawing 4</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <a href="drawing4.jpg"><img src="drawing4.jpg" style= "width:60%; height:40%"></a>
- </div>
- </div>
- </div>
-
- <div class="item5">
- <div class="window" style="width: 300px;">
- <div class="title-bar">
- <div class="title-bar-text">Drawing 5</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <a href="drawing5.jpg"><img src="drawing5.jpg" style= "width: 60%; height: 40%"></a>
- </div>
- </div>
- </div>
- <div class="item6">
- <div class="window" style="width: 300px; height: 150px;">
- <div class="title-bar">
- <div class="title-bar-text">Guestbook Logo</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <a href="GuestbookLogo.png"><img src="GuestbookLogo.png" style= "width: 75%; height:50%; margin:auto"></a>
- </div>
- </div>
- </div>
- <div class="item7">
- <div class="window" style="width: 200px; height: 100px;">
- <div class="title-bar">
- <div class="title-bar-text">Skeuo Signal</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <a href="signal-modified.ico"><img src="signal-modified.ico" style= "width: 30%; height:30%; margin:auto;"></a>
- </div>
- </div>
- </div>
- <div class="item8">
- <div class="window" style="width: 300px; height: 290px;">
- <div class="title-bar">
- <div class="title-bar-text">Drawing 6</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <a href="drawing6.jpg"><img src="drawing6.jpg" style= "width: 60%; height: 40%;"></a>
- </div>
- </div>
- </div>
- <div class="item9">
- <div class="window" style="width: 300px;">
- <div class="title-bar">
- <div class="title-bar-text">Drawing 7</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <a href="drawing7.jpg"><img src="drawing7.jpg" style= "width: 60%; height: 40%;"></a>
- </div>
- </div>
- </div>
-
-
- <div class="item10">
- <div class="window" style="width: 300px;">
- <div class="title-bar">
- <div class="title-bar-text">Drawing 8</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <a href="drawing8.jpg"><img src="drawing8.jpg" style= "width:60%; height:40%"></a>
- </div>
- </div>
- </div>
-
-
- <div class="item11">
- <div class="window" style="width: 300px;">
- <div class="title-bar">
- <div class="title-bar-text">Drawing 9</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <a href="drawing9.jpg"><img src="drawing9.jpg" style= "width:60%; height:40%"></a>
- </div>
- </div>
- </div>
-
- <div class="item12">
- <div class="window" style="width: 300px;">
- <div class="title-bar">
- <div class="title-bar-text">Drawing 10</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <a href="drawing10.jpg"><img src="drawing10.jpg" style= "width:60%; height:40%;"></a>
- </div>
- </div>
- </div>
- <div class="item13">
- <div class="window" style="width: 300px;">
- <div class="title-bar">
- <div class="title-bar-text">Drawing 11</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <a href="drawing11.jpg"><img src="drawing11.jpg" style= "width:60%; height:40%;"></a>
- </div>
- </div>
- </div>
- <div class="item14">
- <div class="window" style="width: 200px; height: 80px;">
- <div class="title-bar">
- <div class="title-bar-text">VSCode button</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <img src="vsc-button.png">
- </div>
- </div>
- </div>
- <div class="item15">
- <div class="window" style="width: 210px; height: 100px;">
- <div class="title-bar">
- <div class="title-bar-text">Photopea Stamp</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <a href="photopea-stamp.png"><img src="photopea-stamp.png"></a>
- </div>
- </div>
- </div>
- <div class="item16">
- <div class="window" style="width: 270px; height: 90px;">
- <div class="title-bar">
- <div class="title-bar-text">3D Social Media/Review...</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <a href="AniList-modified.jpg"><img src="AniList-modified.jpg" width="15%"></a><a href="bluesky-modified.png"><img src="bluesky-modified.png" width="15%"></a><a href="letterboxd-modified.jpg"><img src="letterboxd-modified.jpg" width="15%"></a><a href="mastodon-modified.png"><img src="mastodon-modified.png" width="15%"></a><a href="pixelfed-modified.png"><img src="pixelfed-modified.png" width="15%"></a><a href="serializd-modified.png"><img src="serializd-modified.png" width="15%"></a>
- </div>
- </div>
- </div>
-
- <div class="item17">
- <div class="window" style="width: 230px; margin: 0 1.5em;">
- <div class="title-bar">
- <div class="title-bar-text">Metal Github Icon</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <a href="github-metal.png"><img src="github-metal.png" style="width:60%; height:40%"></a>
- </div>
- </div>
- </div>
- <div class="item18">
- <div class="window" style="width: 250px; height: 170px; margin: 0 1.5em;">
- <div class="title-bar">
- <div class="title-bar-text">Bookwyrm Sticker Icon</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <a href="bookwyrm-sticker.png"><img src="bookwyrm-sticker.png" style="width:60%; height:40%"></a>
- </div>
- </div>
- </div>
- <div class="item19">
- <div class="window" style="width: 300px;">
- <div class="title-bar">
- <div class="title-bar-text">Drawing 12</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <a href="drawing12.jpg"><img src="drawing12.jpg" style= "width:60%; height:40%;"></a>
- </div>
- </div>
- </div>
-
- <div class="item20">
- <div class="window" style="width: 230px; height: 190px; margin: 0 1.5em;">
- <div class="title-bar">
- <div class="title-bar-text">Metal Codeberg Icon</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <a href="codeberg-metal.png"><img src="codeberg-metal.png" style="width:60%; height:40%"></a>
- </div>
- </div>
- </div>
- <div class="item21">
- <div class="window" style="width: 250px; margin: 0 1.5em;">
- <div class="title-bar">
- <div class="title-bar-text">Wood Codeberg Icon</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <a href="codeberg-wood.png"><img src="codeberg-wood.png" style="width:50%; height:20%"></a><a href="codeberg-modified.png"><img src="codeberg-modified.png" style="width:50%; height:20%"></a>
- </div>
- </div>
- </div>
- <div class="item22">
- <div class="window" style="width: 480px;">
- <div class="title-bar">
- <div class="title-bar-text">Buttons For Alt Software</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <img src="freetube-88x31.png"> <img src="newpipe-88x31.png"> <img src="bandcampvsspotify.png"> <img src="funkwhalevsspotify.png"> <img src="aimpvsspotify.png">
- <img src="freemusicarchive.png"> <img src="pro-i2p.png"> <img src="signal.png"> <img src="librewolf-button.png"> <img src="i2p-button.png"> <img src="mullvad-browser.png"> <img src="tutanota-button.png">
- <img src="keepassxc.png"> <img src="peertubevsenshit.png"> <img src="nuclear-music.png"> <img src="somafm-button.png"> <img src="librivox-button.png"> <img src="qbittorrent88x31.png"> <img src="hattexe-button.png">
- <img src="become-invizible.png"> <img src="audacious-88x31.png"> <img src="funkwhale-88x31.png"> <img src="spicetify-88x31.png"> <img src="isekoi-radio88x31.png"> <img src="vscbutton.png">
- <img src="mullvad-button.png"> <img src="wiby-88x31.png"> <img src="openvpn-88x31.png"> <img src="icecast-88x31.png"> <img src="kate-code-88x31.png"> <img src="emacs-88x31.png">
- </div>
- </div>
- </div>
- <div class="item23">
- <div class="window" style="width: 250px; margin: 0 1.5em;">
- <div class="title-bar">
- <div class="title-bar-text">Framed Codeberg Icon</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <a href="framed-codeberg.png"><img src="framed-codeberg.png" style="width:60%; height:40%"></a>
- </div>
- </div>
- </div>
- <div class="item24">
- <div class="window" style="width: 200px; height: 80px; margin: 0 1.5em;">
- <div class="title-bar">
- <div class="title-bar-text">Plex TV Button</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <img src="plextv.png" style="width:60%; height:40%">
- </div>
- </div>
- </div>
- <div class="item25">
- <div class="window" style="width: 250px; height: 100px; margin: 0 1.5em;">
- <div class="title-bar">
- <div class="title-bar-text">Peertube Web Stamp</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <img src="peertubevsenshitified.png">
- </div>
- </div>
- </div>
- <div class="item26">
- <div class="window" style="width: 250px; height: 80px;">
- <div class="title-bar">
- <div class="title-bar-text">Community Garden...</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <img src="com-garden-button.png">
- </div>
- </div>
- </div>
- <div class="item27">
- <div class="window" style="width: 250px; height: 100px;">
- <div class="title-bar">
- <div class="title-bar-text">Nuclear.exe Stamp</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <img src="nuclear-vs-spotify.png">
- </div>
- </div>
- </div>
- <div class="item28">
- <div class="window" style="width: 350px; height: 100px;">
- <div class="title-bar">
- <div class="title-bar-text">Metalheart Stamps</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <img src="metalheart-webstamp.png" height="60px"> <img src="metalheart-webstamp2.png" height="60px"> <img src="metalheart-webstamp3.png" height="60px">
- </div>
- </div>
- </div>
-
- <div class="item29">
- <div class="window" style="width: 240px; height: 240px;">
- <div class="title-bar">
- <div class="title-bar-text">Letterboxd Film Icon</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <img src="letterboxd-film.png" width="90%">
- </div>
- </div>
- </div>
- <div class="item30">
- <div class="window" style="width: 350px; height: 110px;">
- <div class="title-bar">
- <div class="title-bar-text">Anilist/Serializd TV Icons</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <a href="AniList_tv.png"><img src="AniList_tv.png" width="30%"></a> <a href="serializd-tv.png"><img src="serializd-tv.png" width="30%"></a> <a href="anilist-tv.png"><img src="anilist-tv.png" width="30%"></a>
- </div>
- </div>
- </div>
- <div class="item31">
- <div class="window" style="width: 230px; height: 200px;">
- <div class="title-bar">
- <div class="title-bar-text">Framed Pixelfed</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <a href="framed-pixelfed.png"><img src="framed-pixelfed.png" width="70%"></a>
- </div>
- </div>
- </div>
- <div class="item32">
- <div class="window" style="width: 230px; height: 150px;">
- <div class="title-bar">
- <div class="title-bar-text">4th Place Forum...</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <a href="4thplace-eggbug.png"><img src="4thplace-eggbug.png" width="100"></a>
- </div>
- </div>
- </div>
- <div class="item33">
- <div class="window" style="width: 300px; height: 220px;">
- <div class="title-bar">
- <div class="title-bar-text">Guestbook Logo 2</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <a href="GuestbookLogo2.png"><img src="GuestbookLogo2.png" width="250px"></a>
- </div>
- </div>
- </div>
- <div class="item34">
- <div class="window" style="width: 200px; height: 100px;">
- <div class="title-bar">
- <div class="title-bar-text">Anarcho Stamp</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <img src="anch.png">
- </div>
- </div>
- </div>
- <div class="item35">
- <div class="window" style="width: 210px; height: 180px;">
- <div class="title-bar">
- <div class="title-bar-text">Letterboxd...</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <img src="letterboxd-popcorn.png" width="70%">
- </div>
- </div>
- </div>
- <div class="item36">
- <div class="window" style="width: 175px; height: 150px;">
- <div class="title-bar">
- <div class="title-bar-text">Paramore...</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <p><img src="paramore-fan50x50.png"></p>
- I lazily put this together because the actual fanlisting images weren't loading.
- </div>
- </div>
- </div>
- <div class="item37">
- <div class="window" style="width: 220px; height: 80px;">
- <div class="title-bar">
- <div class="title-bar-text">Organize Button</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <img src="organize-button.png">
- </div>
- </div>
- </div>
- <div class="item38">
- <div class="window" style="width: 300px;">
- <div class="title-bar">
- <div class="title-bar-text">Drawing 13</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <a href="drawing13.jpg"><img src="drawing13.jpg" style= "width:60%; height:40%;"></a>
- </div>
- </div>
- </div>
- <div class="item39">
- <div class="window" style="width: 300px;">
- <div class="title-bar">
- <div class="title-bar-text">Drawing 14</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <a href="drawing14.webp"><img src="drawing14.webp" style= "width:60%; height:40%;"></a>
- </div>
- </div>
- </div>
-
- <div class="item40">
- <div class="window" style="width: 220px; height: 80px; margin: 0 1.5em;">
- <div class="title-bar">
- <div class="title-bar-text">JustWatch Button</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <img src="justwatch-88x31.png">
- </div>
- </div>
- </div>
- <div class="item41">
- <div class="window" style="width: 220px; height: 80px;">
- <div class="title-bar">
- <div class="title-bar-text">RadioSide Button</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <img src="radioside88x31.jpg">
- </div>
- </div>
- </div>
- <div class="item42">
- <div class="window" style="width: 220px; height: 80px;">
- <div class="title-bar">
- <div class="title-bar-text">Accuradio Button</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <img src="accuradio88x31.png">
- </div>
- </div>
- </div>
- <div class="item43">
- <div class="window" style="width: 220px; height: 80px;">
- <div class="title-bar">
- <div class="title-bar-text">Poolsuite Button</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <img src="poolsuite88x31.png">
- </div>
- </div>
- </div>
- <div class="item44">
- <div class="window" style="width: 220px; height: 80px;">
- <div class="title-bar">
- <div class="title-bar-text">Radiodroid Button</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <img src="radiodroid88x31.png">
- </div>
- </div>
- </div>
- <div class="item45">
- <div class="window" style="width: 300px;">
- <div class="title-bar">
- <div class="title-bar-text">Drawing 15</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <a href="drawing15.webp"><img src="drawing15.webp" style= "width:60%; height:40%;"></a>
- </div>
- </div>
- </div>
- <div class="item46">
- <div class="window" style="width: 300px;">
- <div class="title-bar">
- <div class="title-bar-text">Drawing 16</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <a href="drawing16.webp"><img src="/drawing16.webp" style= "width:60%; height:40%;"></a>
- </div>
- </div>
- </div>
- <div class="item47">
- <div class="window" style="width: 300px;">
- <div class="title-bar">
- <div class="title-bar-text">Drawing 17</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <a href="drawing17.jpg"><img src="drawing17.jpg" style= "width:60%; height:40%;"></a>
- </div>
- </div>
- </div>
- <div class="item48">
- <div class="window" style="width: 230px; height: 180px;">
- <div class="title-bar">
- <div class="title-bar-text">Glossy Tuta Icon</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <a href="tuta-gloss.png"><img src="tuta-gloss.png" width="60%"></a>
- </div>
- </div>
- </div>
- <div class="item49">
- <div class="window" style="width: 230px; height: 180px;">
- <div class="title-bar">
- <div class="title-bar-text">Glossy Slack Icon</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <a href="slack-gloss.png"><img src="slack-gloss.png" width="60%"></a>
- </div>
- </div>
- </div>
- <div class="item50">
- <div class="window" style="width: 230px; margin: 0 1.5em;">
- <div class="title-bar">
- <div class="title-bar-text">Privacy Guides...</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <a href="privacyguides-logo.png"><img src="privacyguides-logo.png" style="width:60%; height:40%"></a>
- </div>
- </div>
- </div>
- <div class="item51">
- <div class="window" style="width: 230px; margin: 0 1.5em;">
- <div class="title-bar">
- <div class="title-bar-text">Vivaldi Icon</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <a href="vivaldi-icon.svg"><img src="vivaldi-icon.svg" style="width:60%; height:40%"></a>
- </div>
- </div>
- </div>
- <div class="item52">
- <div class="window" style="width: 230px; margin: 0 1.5em;">
- <div class="title-bar">
- <div class="title-bar-text">Photopea Icon</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <a href="photopea.svg"><img src="photopea.svg" style="width:60%; height:40%"></a>
- </div>
- </div>
- </div>
- <div class="item53">
- <div class="window" style="width: 300px;">
- <div class="title-bar">
- <div class="title-bar-text">Drawing 18</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <a href="drawing18.jpg"><img src="drawing18.jpg" style= "width:60%; height:40%;"></a>
- </div>
- </div>
- </div>
- <div class="item54">
- <div class="window" style="width: 300px;">
- <div class="title-bar">
- <div class="title-bar-text">Drawing 19: WigglyPaint</div>
- <div class="title-bar-controls">
- <button aria-label="Minimize"></button>
- <button aria-label="Maximize"></button>
- <button aria-label="Close"></button>
- </div>
- </div>
- <div class="window-body">
- <a href="drawing19-WigglyPaint.png"><img src="drawing19-Wigglypaint.png" style= "width:60%; height:40%;"></a>
- </div>
- </div>
- </div>
- </div>
- </div>
- </body>
- </html>
- <style>
- body {
- background-image: url('electric-butterfly.jpg');
- background-repeat: no-repeat;
- background-attachment: fixed;
- background-size: cover;
- }
-
- * {
- scrollbar-color: #e91827 #1c20db !important;
-
- }
- .container {
- display: grid;
- grid-template-columns: auto auto auto;
- padding: 10px;
- }
- @media only screen and (max-width: 600px) {
- body {background-repeat: repeat;}
- .item1 {grid-area: 1 / span 6;}
- .item2 {grid-area: 2 / span 6;}
- .item3 {grid-area: 3 / span 6;}
- .item4 {grid-area: 4 / span 6;}
- .item5 {grid-area: 5 / span 6;}
- .item6 {grid-area: 6 / span 6;}
- .item7 {grid-area: 7 / span 6;}
- .item8 {grid-area: 8 / span 6;}
- .item9 {grid-area: 9 / span 6;}
- .item10 {grid-area: 10 / span 6;}
- .item11 {grid-area: 11 / span 6;}
- .item12 {grid-area: 12 / span 6;}
- .item13 {grid-area: 13 / span 6;}
- .item14 {grid-area: 14 / span 6;}
- .item15 {grid-area: 15 / span 6;}
- .item16 {grid-area: 16 / span 6;}
- .item17 {grid-area: 17 / span 6;}
- .item18 {grid-area: 18 / span 6;}
- .item19 {grid-area: 19 / span 6;}
- .item20 {grid-area: 20 / span 6;}
- .item21 {grid-area: 21 / span 6;}
- .item22 {grid-area: 22 / span 6;}
- .item23 {grid-area: 23 / span 6;}
- .item24 {grid-area: 24 / span 6;}
- .item25 {grid-area: 25 / span 6;}
- .item26 {grid-area: 26 / span 6;}
- .item27 {grid-area: 27 / span 6;}
- .item28 {grid-area: 28 / span 6;}
- .item29 {grid-area: 29 / span 6;}
- .item30 {grid-area: 30 / span 6;}
- .item31 {grid-area: 31 / span 6;}
- .item32 {grid-area: 32 / span 6;}
- .item33 {grid-area: 33 / span 6;}
- .item34 {grid-area: 34 / span 6;}
- .item35 {grid-area: 35 / span 6;}
- .item36 {grid-area: 36 / span 6;}
- .item37 {grid-area: 37 / span 6;}
- .item38 {grid-area: 38 / span 6;}
- .item39 {grid-area: 39 / span 6;}
- .item40 {grid-area: 40 / span 6;}
- .item41 {grid-area: 41 / span 6;}
- .item42 {grid-area: 42 / span 6;}
- .item43 {grid-area: 43 / span 6;}
- .item44 {grid-area: 44 / span 6;}
- .item45 {grid-area: 45 / span 6;}
- .item46 {grid-area: 46 / span 6;}
- .item47 {grid-area: 47 / span 6;}
- .item48 {grid-area: 48 / span 6;}
- .item49 {grid-area: 49 / span 6;}
- .item50 {grid-area: 50 / span 6;}
- .item51 {grid-area: 51 / span 6;}
- .item52 {grid-area: 52 / span 6;}
- .item53 {grid-area: 53 / span 6;}
- .item54 {grid-area: 54 / span 6;}
- }
- .iframe-container {
- position: relative;
- width: 320px; /* Adjust as needed */
- height: 255px; /* Adjust as needed */
-
- padding: 35px;
- overflow: hidden;
- }
- .iframe-container iframe {
- width: 100%;
- height: 100%;
- position: absolute;
- top: 0 30em;
- left: 0 25em;
- overflow: hidden;
- padding: 50px;
- }
- .iframe-container img {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%; /* Adjust as needed */
- height: 100%; /* Adjust as needed */
- object-fit: cover; /* Ensures the image covers the iframe */
- }
- </style>
|