art.html 50 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Lakes' Art</title>
  7. <!-- The style.css file allows you to change the look of your web pages.
  8. If you include the next line in all your web pages, they will all share the same look.
  9. This makes it easier to make new pages for your site. -->
  10. <link href="/style.css" rel="stylesheet" type="text/css" media="all">
  11. <link rel="icon" href="favicon.png">
  12. <link rel="stylesheet" href="XP.css">
  13. </head>
  14. <body>
  15. <div class="background">
  16. <div class="window" style="width: 500px">
  17. <div class="title-bar">
  18. <div class="title-bar-text">Navigation</div>
  19. <div class="title-bar-controls">
  20. <button aria-label="Minimize"></button>
  21. <button aria-label="Maximize"></button>
  22. <button aria-label="Close"></button>
  23. </div>
  24. </div>
  25. <div class="window-body">
  26. <a href="/index.html"><button>Home</button></a>
  27. <a href="/aboutme.html"><button>About Me</button></a>
  28. <a href="/blog.html"><button>Blogging</button></a>
  29. <a href="logcabin.html"><button>Chatroom</button></a>
  30. <a href="fanschoice.html"><button>Fanpages</button></a>
  31. <a href="donate.html"><button>Fundraisers</button></a>
  32. <a href="extragraphics.html"><button>GIF Graphics</button></a>
  33. <a href="/guestbook/gbook.php"><button>Guestbook</button></a>
  34. <a href="coolsitesandmutuals.html"><button>Other Sites</button></a>
  35. </div>
  36. </div>
  37. </div>
  38. <div class="background">
  39. <div class="window" style="width: 300px; margin: 0 1.5em;">
  40. <div class="title-bar">
  41. <div class="title-bar-text">How to Play Music On This Page</div>
  42. <div class="title-bar-controls">
  43. <button aria-label="Minimize"></button>
  44. <button aria-label="Maximize"></button>
  45. <button aria-label="Close"></button>
  46. </div>
  47. </div>
  48. <div class="window-body">
  49. Hover over the album cover, then click the previous/next button.
  50. </div>
  51. </div>
  52. </div>
  53. <div class="iframe-container">
  54. <img src="YIL!OMA2K.png" alt="Overlay Image">
  55. <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>
  56. </div>
  57. <div class="window" style="width: 300px; margin: 0 1.5em;">
  58. <div class="title-bar">
  59. <div class="title-bar-text">Site RSS Feed</div>
  60. <div class="title-bar-controls">
  61. <button aria-label="Minimize"></button>
  62. <button aria-label="Maximize"></button>
  63. <button aria-label="Close"></button>
  64. </div>
  65. </div>
  66. <div class="window-body">
  67. <a href="https://lakes.glamour.ovh/art-rss.xml">Art RSS Feed</a> for art updates
  68. <p><a href="https://lakes.glamour.ovh/miscupdates.xml">Misc Updates RSS Feed</a></p>
  69. <p><a href="https://codeberg.org/LakesTheGuy/My-Website.rss">The Codeberg Repo's RSS Feed</a> for site updates & source code changes</p>
  70. For my blog's RSS feed, go to my blog page.
  71. </div>
  72. </div>
  73. <div class="container">
  74. <main>
  75. <div class="item1">
  76. <div class="window" style="width: 300px; margin: 0 1.5em;">
  77. <div class="title-bar">
  78. <div class="title-bar-text">Drawing 1</div>
  79. <div class="title-bar-controls">
  80. <button aria-label="Minimize"></button>
  81. <button aria-label="Maximize"></button>
  82. <button aria-label="Close"></button>
  83. </div>
  84. </div>
  85. <div class="window-body">
  86. <a href="drawing1.jpg"><img src="drawing1.jpg" style="width:60%; height:40%"></a>
  87. </div>
  88. </div>
  89. </div>
  90. </main>
  91. <div class="item2">
  92. <div class="window" style="width: 300px">
  93. <div class="title-bar">
  94. <div class="title-bar-text">Drawing 2</div>
  95. <div class="title-bar-controls">
  96. <button aria-label="Minimize"></button>
  97. <button aria-label="Maximize"></button>
  98. <button aria-label="Close"></button>
  99. </div>
  100. </div>
  101. <div class="window-body">
  102. <a href="drawing2.jpg"><img src="drawing2.jpg" style= "width:60%; height:40%"></a>
  103. </div>
  104. </div>
  105. </div>
  106. <div class="item3">
  107. <div class="window" style="width: 300px;">
  108. <div class="title-bar">
  109. <div class="title-bar-text">Drawing 3</div>
  110. <div class="title-bar-controls">
  111. <button aria-label="Minimize"></button>
  112. <button aria-label="Maximize"></button>
  113. <button aria-label="Close"></button>
  114. </div>
  115. </div>
  116. <div class="window-body">
  117. <a href="drawing3.jpg"><img src="drawing3.jpg" style= "width:60%; height:40%"></a>
  118. </div>
  119. </div>
  120. </div>
  121. <div class="item4">
  122. <div class="window" style="width: 300px;">
  123. <div class="title-bar">
  124. <div class="title-bar-text">Drawing 4</div>
  125. <div class="title-bar-controls">
  126. <button aria-label="Minimize"></button>
  127. <button aria-label="Maximize"></button>
  128. <button aria-label="Close"></button>
  129. </div>
  130. </div>
  131. <div class="window-body">
  132. <a href="drawing4.jpg"><img src="drawing4.jpg" style= "width:60%; height:40%"></a>
  133. </div>
  134. </div>
  135. </div>
  136. <div class="item5">
  137. <div class="window" style="width: 300px;">
  138. <div class="title-bar">
  139. <div class="title-bar-text">Drawing 5</div>
  140. <div class="title-bar-controls">
  141. <button aria-label="Minimize"></button>
  142. <button aria-label="Maximize"></button>
  143. <button aria-label="Close"></button>
  144. </div>
  145. </div>
  146. <div class="window-body">
  147. <a href="drawing5.jpg"><img src="drawing5.jpg" style= "width: 60%; height: 40%"></a>
  148. </div>
  149. </div>
  150. </div>
  151. <div class="item6">
  152. <div class="window" style="width: 300px; height: 150px;">
  153. <div class="title-bar">
  154. <div class="title-bar-text">Guestbook Logo</div>
  155. <div class="title-bar-controls">
  156. <button aria-label="Minimize"></button>
  157. <button aria-label="Maximize"></button>
  158. <button aria-label="Close"></button>
  159. </div>
  160. </div>
  161. <div class="window-body">
  162. <a href="GuestbookLogo.png"><img src="GuestbookLogo.png" style= "width: 75%; height:50%; margin:auto"></a>
  163. </div>
  164. </div>
  165. </div>
  166. <div class="item7">
  167. <div class="window" style="width: 200px; height: 100px;">
  168. <div class="title-bar">
  169. <div class="title-bar-text">Skeuo Signal</div>
  170. <div class="title-bar-controls">
  171. <button aria-label="Minimize"></button>
  172. <button aria-label="Maximize"></button>
  173. <button aria-label="Close"></button>
  174. </div>
  175. </div>
  176. <div class="window-body">
  177. <a href="signal-modified.ico"><img src="signal-modified.ico" style= "width: 30%; height:30%; margin:auto;"></a>
  178. </div>
  179. </div>
  180. </div>
  181. <div class="item8">
  182. <div class="window" style="width: 300px; height: 290px;">
  183. <div class="title-bar">
  184. <div class="title-bar-text">Drawing 6</div>
  185. <div class="title-bar-controls">
  186. <button aria-label="Minimize"></button>
  187. <button aria-label="Maximize"></button>
  188. <button aria-label="Close"></button>
  189. </div>
  190. </div>
  191. <div class="window-body">
  192. <a href="drawing6.jpg"><img src="drawing6.jpg" style= "width: 60%; height: 40%;"></a>
  193. </div>
  194. </div>
  195. </div>
  196. <div class="item9">
  197. <div class="window" style="width: 300px;">
  198. <div class="title-bar">
  199. <div class="title-bar-text">Drawing 7</div>
  200. <div class="title-bar-controls">
  201. <button aria-label="Minimize"></button>
  202. <button aria-label="Maximize"></button>
  203. <button aria-label="Close"></button>
  204. </div>
  205. </div>
  206. <div class="window-body">
  207. <a href="drawing7.jpg"><img src="drawing7.jpg" style= "width: 60%; height: 40%;"></a>
  208. </div>
  209. </div>
  210. </div>
  211. <div class="item10">
  212. <div class="window" style="width: 300px;">
  213. <div class="title-bar">
  214. <div class="title-bar-text">Drawing 8</div>
  215. <div class="title-bar-controls">
  216. <button aria-label="Minimize"></button>
  217. <button aria-label="Maximize"></button>
  218. <button aria-label="Close"></button>
  219. </div>
  220. </div>
  221. <div class="window-body">
  222. <a href="drawing8.jpg"><img src="drawing8.jpg" style= "width:60%; height:40%"></a>
  223. </div>
  224. </div>
  225. </div>
  226. <div class="item11">
  227. <div class="window" style="width: 300px;">
  228. <div class="title-bar">
  229. <div class="title-bar-text">Drawing 9</div>
  230. <div class="title-bar-controls">
  231. <button aria-label="Minimize"></button>
  232. <button aria-label="Maximize"></button>
  233. <button aria-label="Close"></button>
  234. </div>
  235. </div>
  236. <div class="window-body">
  237. <a href="drawing9.jpg"><img src="drawing9.jpg" style= "width:60%; height:40%"></a>
  238. </div>
  239. </div>
  240. </div>
  241. <div class="item12">
  242. <div class="window" style="width: 300px;">
  243. <div class="title-bar">
  244. <div class="title-bar-text">Drawing 10</div>
  245. <div class="title-bar-controls">
  246. <button aria-label="Minimize"></button>
  247. <button aria-label="Maximize"></button>
  248. <button aria-label="Close"></button>
  249. </div>
  250. </div>
  251. <div class="window-body">
  252. <a href="drawing10.jpg"><img src="drawing10.jpg" style= "width:60%; height:40%;"></a>
  253. </div>
  254. </div>
  255. </div>
  256. <div class="item13">
  257. <div class="window" style="width: 300px;">
  258. <div class="title-bar">
  259. <div class="title-bar-text">Drawing 11</div>
  260. <div class="title-bar-controls">
  261. <button aria-label="Minimize"></button>
  262. <button aria-label="Maximize"></button>
  263. <button aria-label="Close"></button>
  264. </div>
  265. </div>
  266. <div class="window-body">
  267. <a href="drawing11.jpg"><img src="drawing11.jpg" style= "width:60%; height:40%;"></a>
  268. </div>
  269. </div>
  270. </div>
  271. <div class="item14">
  272. <div class="window" style="width: 200px; height: 80px;">
  273. <div class="title-bar">
  274. <div class="title-bar-text">VSCode button</div>
  275. <div class="title-bar-controls">
  276. <button aria-label="Minimize"></button>
  277. <button aria-label="Maximize"></button>
  278. <button aria-label="Close"></button>
  279. </div>
  280. </div>
  281. <div class="window-body">
  282. <img src="vsc-button.png">
  283. </div>
  284. </div>
  285. </div>
  286. <div class="item15">
  287. <div class="window" style="width: 210px; height: 100px;">
  288. <div class="title-bar">
  289. <div class="title-bar-text">Photopea Stamp</div>
  290. <div class="title-bar-controls">
  291. <button aria-label="Minimize"></button>
  292. <button aria-label="Maximize"></button>
  293. <button aria-label="Close"></button>
  294. </div>
  295. </div>
  296. <div class="window-body">
  297. <a href="photopea-stamp.png"><img src="photopea-stamp.png"></a>
  298. </div>
  299. </div>
  300. </div>
  301. <div class="item16">
  302. <div class="window" style="width: 270px; height: 90px;">
  303. <div class="title-bar">
  304. <div class="title-bar-text">3D Social Media/Review...</div>
  305. <div class="title-bar-controls">
  306. <button aria-label="Minimize"></button>
  307. <button aria-label="Maximize"></button>
  308. <button aria-label="Close"></button>
  309. </div>
  310. </div>
  311. <div class="window-body">
  312. <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>
  313. </div>
  314. </div>
  315. </div>
  316. <div class="item17">
  317. <div class="window" style="width: 230px; margin: 0 1.5em;">
  318. <div class="title-bar">
  319. <div class="title-bar-text">Metal Github Icon</div>
  320. <div class="title-bar-controls">
  321. <button aria-label="Minimize"></button>
  322. <button aria-label="Maximize"></button>
  323. <button aria-label="Close"></button>
  324. </div>
  325. </div>
  326. <div class="window-body">
  327. <a href="github-metal.png"><img src="github-metal.png" style="width:60%; height:40%"></a>
  328. </div>
  329. </div>
  330. </div>
  331. <div class="item18">
  332. <div class="window" style="width: 250px; height: 170px; margin: 0 1.5em;">
  333. <div class="title-bar">
  334. <div class="title-bar-text">Bookwyrm Sticker Icon</div>
  335. <div class="title-bar-controls">
  336. <button aria-label="Minimize"></button>
  337. <button aria-label="Maximize"></button>
  338. <button aria-label="Close"></button>
  339. </div>
  340. </div>
  341. <div class="window-body">
  342. <a href="bookwyrm-sticker.png"><img src="bookwyrm-sticker.png" style="width:60%; height:40%"></a>
  343. </div>
  344. </div>
  345. </div>
  346. <div class="item19">
  347. <div class="window" style="width: 300px;">
  348. <div class="title-bar">
  349. <div class="title-bar-text">Drawing 12</div>
  350. <div class="title-bar-controls">
  351. <button aria-label="Minimize"></button>
  352. <button aria-label="Maximize"></button>
  353. <button aria-label="Close"></button>
  354. </div>
  355. </div>
  356. <div class="window-body">
  357. <a href="drawing12.jpg"><img src="drawing12.jpg" style= "width:60%; height:40%;"></a>
  358. </div>
  359. </div>
  360. </div>
  361. <div class="item20">
  362. <div class="window" style="width: 230px; height: 190px; margin: 0 1.5em;">
  363. <div class="title-bar">
  364. <div class="title-bar-text">Metal Codeberg Icon</div>
  365. <div class="title-bar-controls">
  366. <button aria-label="Minimize"></button>
  367. <button aria-label="Maximize"></button>
  368. <button aria-label="Close"></button>
  369. </div>
  370. </div>
  371. <div class="window-body">
  372. <a href="codeberg-metal.png"><img src="codeberg-metal.png" style="width:60%; height:40%"></a>
  373. </div>
  374. </div>
  375. </div>
  376. <div class="item21">
  377. <div class="window" style="width: 250px; margin: 0 1.5em;">
  378. <div class="title-bar">
  379. <div class="title-bar-text">Wood Codeberg Icon</div>
  380. <div class="title-bar-controls">
  381. <button aria-label="Minimize"></button>
  382. <button aria-label="Maximize"></button>
  383. <button aria-label="Close"></button>
  384. </div>
  385. </div>
  386. <div class="window-body">
  387. <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>
  388. </div>
  389. </div>
  390. </div>
  391. <div class="item22">
  392. <div class="window" style="width: 480px;">
  393. <div class="title-bar">
  394. <div class="title-bar-text">Buttons For Alt Software</div>
  395. <div class="title-bar-controls">
  396. <button aria-label="Minimize"></button>
  397. <button aria-label="Maximize"></button>
  398. <button aria-label="Close"></button>
  399. </div>
  400. </div>
  401. <div class="window-body">
  402. <img src="freetube-88x31.png"> <img src="newpipe-88x31.png"> <img src="bandcampvsspotify.png"> <img src="funkwhalevsspotify.png"> <img src="aimpvsspotify.png">
  403. <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">
  404. <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">
  405. <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">
  406. <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">
  407. </div>
  408. </div>
  409. </div>
  410. <div class="item23">
  411. <div class="window" style="width: 250px; margin: 0 1.5em;">
  412. <div class="title-bar">
  413. <div class="title-bar-text">Framed Codeberg Icon</div>
  414. <div class="title-bar-controls">
  415. <button aria-label="Minimize"></button>
  416. <button aria-label="Maximize"></button>
  417. <button aria-label="Close"></button>
  418. </div>
  419. </div>
  420. <div class="window-body">
  421. <a href="framed-codeberg.png"><img src="framed-codeberg.png" style="width:60%; height:40%"></a>
  422. </div>
  423. </div>
  424. </div>
  425. <div class="item24">
  426. <div class="window" style="width: 200px; height: 80px; margin: 0 1.5em;">
  427. <div class="title-bar">
  428. <div class="title-bar-text">Plex TV Button</div>
  429. <div class="title-bar-controls">
  430. <button aria-label="Minimize"></button>
  431. <button aria-label="Maximize"></button>
  432. <button aria-label="Close"></button>
  433. </div>
  434. </div>
  435. <div class="window-body">
  436. <img src="plextv.png" style="width:60%; height:40%">
  437. </div>
  438. </div>
  439. </div>
  440. <div class="item25">
  441. <div class="window" style="width: 250px; height: 100px; margin: 0 1.5em;">
  442. <div class="title-bar">
  443. <div class="title-bar-text">Peertube Web Stamp</div>
  444. <div class="title-bar-controls">
  445. <button aria-label="Minimize"></button>
  446. <button aria-label="Maximize"></button>
  447. <button aria-label="Close"></button>
  448. </div>
  449. </div>
  450. <div class="window-body">
  451. <img src="peertubevsenshitified.png">
  452. </div>
  453. </div>
  454. </div>
  455. <div class="item26">
  456. <div class="window" style="width: 250px; height: 80px;">
  457. <div class="title-bar">
  458. <div class="title-bar-text">Community Garden...</div>
  459. <div class="title-bar-controls">
  460. <button aria-label="Minimize"></button>
  461. <button aria-label="Maximize"></button>
  462. <button aria-label="Close"></button>
  463. </div>
  464. </div>
  465. <div class="window-body">
  466. <img src="com-garden-button.png">
  467. </div>
  468. </div>
  469. </div>
  470. <div class="item27">
  471. <div class="window" style="width: 250px; height: 100px;">
  472. <div class="title-bar">
  473. <div class="title-bar-text">Nuclear.exe Stamp</div>
  474. <div class="title-bar-controls">
  475. <button aria-label="Minimize"></button>
  476. <button aria-label="Maximize"></button>
  477. <button aria-label="Close"></button>
  478. </div>
  479. </div>
  480. <div class="window-body">
  481. <img src="nuclear-vs-spotify.png">
  482. </div>
  483. </div>
  484. </div>
  485. <div class="item28">
  486. <div class="window" style="width: 350px; height: 100px;">
  487. <div class="title-bar">
  488. <div class="title-bar-text">Metalheart Stamps</div>
  489. <div class="title-bar-controls">
  490. <button aria-label="Minimize"></button>
  491. <button aria-label="Maximize"></button>
  492. <button aria-label="Close"></button>
  493. </div>
  494. </div>
  495. <div class="window-body">
  496. <img src="metalheart-webstamp.png" height="60px"> <img src="metalheart-webstamp2.png" height="60px"> <img src="metalheart-webstamp3.png" height="60px">
  497. </div>
  498. </div>
  499. </div>
  500. <div class="item29">
  501. <div class="window" style="width: 240px; height: 240px;">
  502. <div class="title-bar">
  503. <div class="title-bar-text">Letterboxd Film Icon</div>
  504. <div class="title-bar-controls">
  505. <button aria-label="Minimize"></button>
  506. <button aria-label="Maximize"></button>
  507. <button aria-label="Close"></button>
  508. </div>
  509. </div>
  510. <div class="window-body">
  511. <img src="letterboxd-film.png" width="90%">
  512. </div>
  513. </div>
  514. </div>
  515. <div class="item30">
  516. <div class="window" style="width: 350px; height: 110px;">
  517. <div class="title-bar">
  518. <div class="title-bar-text">Anilist/Serializd TV Icons</div>
  519. <div class="title-bar-controls">
  520. <button aria-label="Minimize"></button>
  521. <button aria-label="Maximize"></button>
  522. <button aria-label="Close"></button>
  523. </div>
  524. </div>
  525. <div class="window-body">
  526. <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>
  527. </div>
  528. </div>
  529. </div>
  530. <div class="item31">
  531. <div class="window" style="width: 230px; height: 200px;">
  532. <div class="title-bar">
  533. <div class="title-bar-text">Framed Pixelfed</div>
  534. <div class="title-bar-controls">
  535. <button aria-label="Minimize"></button>
  536. <button aria-label="Maximize"></button>
  537. <button aria-label="Close"></button>
  538. </div>
  539. </div>
  540. <div class="window-body">
  541. <a href="framed-pixelfed.png"><img src="framed-pixelfed.png" width="70%"></a>
  542. </div>
  543. </div>
  544. </div>
  545. <div class="item32">
  546. <div class="window" style="width: 230px; height: 150px;">
  547. <div class="title-bar">
  548. <div class="title-bar-text">4th Place Forum...</div>
  549. <div class="title-bar-controls">
  550. <button aria-label="Minimize"></button>
  551. <button aria-label="Maximize"></button>
  552. <button aria-label="Close"></button>
  553. </div>
  554. </div>
  555. <div class="window-body">
  556. <a href="4thplace-eggbug.png"><img src="4thplace-eggbug.png" width="100"></a>
  557. </div>
  558. </div>
  559. </div>
  560. <div class="item33">
  561. <div class="window" style="width: 300px; height: 220px;">
  562. <div class="title-bar">
  563. <div class="title-bar-text">Guestbook Logo 2</div>
  564. <div class="title-bar-controls">
  565. <button aria-label="Minimize"></button>
  566. <button aria-label="Maximize"></button>
  567. <button aria-label="Close"></button>
  568. </div>
  569. </div>
  570. <div class="window-body">
  571. <a href="GuestbookLogo2.png"><img src="GuestbookLogo2.png" width="250px"></a>
  572. </div>
  573. </div>
  574. </div>
  575. <div class="item34">
  576. <div class="window" style="width: 200px; height: 100px;">
  577. <div class="title-bar">
  578. <div class="title-bar-text">Anarcho Stamp</div>
  579. <div class="title-bar-controls">
  580. <button aria-label="Minimize"></button>
  581. <button aria-label="Maximize"></button>
  582. <button aria-label="Close"></button>
  583. </div>
  584. </div>
  585. <div class="window-body">
  586. <img src="anch.png">
  587. </div>
  588. </div>
  589. </div>
  590. <div class="item35">
  591. <div class="window" style="width: 210px; height: 180px;">
  592. <div class="title-bar">
  593. <div class="title-bar-text">Letterboxd...</div>
  594. <div class="title-bar-controls">
  595. <button aria-label="Minimize"></button>
  596. <button aria-label="Maximize"></button>
  597. <button aria-label="Close"></button>
  598. </div>
  599. </div>
  600. <div class="window-body">
  601. <img src="letterboxd-popcorn.png" width="70%">
  602. </div>
  603. </div>
  604. </div>
  605. <div class="item36">
  606. <div class="window" style="width: 175px; height: 150px;">
  607. <div class="title-bar">
  608. <div class="title-bar-text">Paramore...</div>
  609. <div class="title-bar-controls">
  610. <button aria-label="Minimize"></button>
  611. <button aria-label="Maximize"></button>
  612. <button aria-label="Close"></button>
  613. </div>
  614. </div>
  615. <div class="window-body">
  616. <p><img src="paramore-fan50x50.png"></p>
  617. I lazily put this together because the actual fanlisting images weren't loading.
  618. </div>
  619. </div>
  620. </div>
  621. <div class="item37">
  622. <div class="window" style="width: 220px; height: 80px;">
  623. <div class="title-bar">
  624. <div class="title-bar-text">Organize Button</div>
  625. <div class="title-bar-controls">
  626. <button aria-label="Minimize"></button>
  627. <button aria-label="Maximize"></button>
  628. <button aria-label="Close"></button>
  629. </div>
  630. </div>
  631. <div class="window-body">
  632. <img src="organize-button.png">
  633. </div>
  634. </div>
  635. </div>
  636. <div class="item38">
  637. <div class="window" style="width: 300px;">
  638. <div class="title-bar">
  639. <div class="title-bar-text">Drawing 13</div>
  640. <div class="title-bar-controls">
  641. <button aria-label="Minimize"></button>
  642. <button aria-label="Maximize"></button>
  643. <button aria-label="Close"></button>
  644. </div>
  645. </div>
  646. <div class="window-body">
  647. <a href="drawing13.jpg"><img src="drawing13.jpg" style= "width:60%; height:40%;"></a>
  648. </div>
  649. </div>
  650. </div>
  651. <div class="item39">
  652. <div class="window" style="width: 300px;">
  653. <div class="title-bar">
  654. <div class="title-bar-text">Drawing 14</div>
  655. <div class="title-bar-controls">
  656. <button aria-label="Minimize"></button>
  657. <button aria-label="Maximize"></button>
  658. <button aria-label="Close"></button>
  659. </div>
  660. </div>
  661. <div class="window-body">
  662. <a href="drawing14.webp"><img src="drawing14.webp" style= "width:60%; height:40%;"></a>
  663. </div>
  664. </div>
  665. </div>
  666. <div class="item40">
  667. <div class="window" style="width: 220px; height: 80px; margin: 0 1.5em;">
  668. <div class="title-bar">
  669. <div class="title-bar-text">JustWatch Button</div>
  670. <div class="title-bar-controls">
  671. <button aria-label="Minimize"></button>
  672. <button aria-label="Maximize"></button>
  673. <button aria-label="Close"></button>
  674. </div>
  675. </div>
  676. <div class="window-body">
  677. <img src="justwatch-88x31.png">
  678. </div>
  679. </div>
  680. </div>
  681. <div class="item41">
  682. <div class="window" style="width: 220px; height: 80px;">
  683. <div class="title-bar">
  684. <div class="title-bar-text">RadioSide Button</div>
  685. <div class="title-bar-controls">
  686. <button aria-label="Minimize"></button>
  687. <button aria-label="Maximize"></button>
  688. <button aria-label="Close"></button>
  689. </div>
  690. </div>
  691. <div class="window-body">
  692. <img src="radioside88x31.jpg">
  693. </div>
  694. </div>
  695. </div>
  696. <div class="item42">
  697. <div class="window" style="width: 220px; height: 80px;">
  698. <div class="title-bar">
  699. <div class="title-bar-text">Accuradio Button</div>
  700. <div class="title-bar-controls">
  701. <button aria-label="Minimize"></button>
  702. <button aria-label="Maximize"></button>
  703. <button aria-label="Close"></button>
  704. </div>
  705. </div>
  706. <div class="window-body">
  707. <img src="accuradio88x31.png">
  708. </div>
  709. </div>
  710. </div>
  711. <div class="item43">
  712. <div class="window" style="width: 220px; height: 80px;">
  713. <div class="title-bar">
  714. <div class="title-bar-text">Poolsuite Button</div>
  715. <div class="title-bar-controls">
  716. <button aria-label="Minimize"></button>
  717. <button aria-label="Maximize"></button>
  718. <button aria-label="Close"></button>
  719. </div>
  720. </div>
  721. <div class="window-body">
  722. <img src="poolsuite88x31.png">
  723. </div>
  724. </div>
  725. </div>
  726. <div class="item44">
  727. <div class="window" style="width: 220px; height: 80px;">
  728. <div class="title-bar">
  729. <div class="title-bar-text">Radiodroid Button</div>
  730. <div class="title-bar-controls">
  731. <button aria-label="Minimize"></button>
  732. <button aria-label="Maximize"></button>
  733. <button aria-label="Close"></button>
  734. </div>
  735. </div>
  736. <div class="window-body">
  737. <img src="radiodroid88x31.png">
  738. </div>
  739. </div>
  740. </div>
  741. <div class="item45">
  742. <div class="window" style="width: 300px;">
  743. <div class="title-bar">
  744. <div class="title-bar-text">Drawing 15</div>
  745. <div class="title-bar-controls">
  746. <button aria-label="Minimize"></button>
  747. <button aria-label="Maximize"></button>
  748. <button aria-label="Close"></button>
  749. </div>
  750. </div>
  751. <div class="window-body">
  752. <a href="drawing15.webp"><img src="drawing15.webp" style= "width:60%; height:40%;"></a>
  753. </div>
  754. </div>
  755. </div>
  756. <div class="item46">
  757. <div class="window" style="width: 300px;">
  758. <div class="title-bar">
  759. <div class="title-bar-text">Drawing 16</div>
  760. <div class="title-bar-controls">
  761. <button aria-label="Minimize"></button>
  762. <button aria-label="Maximize"></button>
  763. <button aria-label="Close"></button>
  764. </div>
  765. </div>
  766. <div class="window-body">
  767. <a href="drawing16.webp"><img src="/drawing16.webp" style= "width:60%; height:40%;"></a>
  768. </div>
  769. </div>
  770. </div>
  771. <div class="item47">
  772. <div class="window" style="width: 300px;">
  773. <div class="title-bar">
  774. <div class="title-bar-text">Drawing 17</div>
  775. <div class="title-bar-controls">
  776. <button aria-label="Minimize"></button>
  777. <button aria-label="Maximize"></button>
  778. <button aria-label="Close"></button>
  779. </div>
  780. </div>
  781. <div class="window-body">
  782. <a href="drawing17.jpg"><img src="drawing17.jpg" style= "width:60%; height:40%;"></a>
  783. </div>
  784. </div>
  785. </div>
  786. <div class="item48">
  787. <div class="window" style="width: 230px; height: 180px;">
  788. <div class="title-bar">
  789. <div class="title-bar-text">Glossy Tuta Icon</div>
  790. <div class="title-bar-controls">
  791. <button aria-label="Minimize"></button>
  792. <button aria-label="Maximize"></button>
  793. <button aria-label="Close"></button>
  794. </div>
  795. </div>
  796. <div class="window-body">
  797. <a href="tuta-gloss.png"><img src="tuta-gloss.png" width="60%"></a>
  798. </div>
  799. </div>
  800. </div>
  801. <div class="item49">
  802. <div class="window" style="width: 230px; height: 180px;">
  803. <div class="title-bar">
  804. <div class="title-bar-text">Glossy Slack Icon</div>
  805. <div class="title-bar-controls">
  806. <button aria-label="Minimize"></button>
  807. <button aria-label="Maximize"></button>
  808. <button aria-label="Close"></button>
  809. </div>
  810. </div>
  811. <div class="window-body">
  812. <a href="slack-gloss.png"><img src="slack-gloss.png" width="60%"></a>
  813. </div>
  814. </div>
  815. </div>
  816. <div class="item50">
  817. <div class="window" style="width: 230px; margin: 0 1.5em;">
  818. <div class="title-bar">
  819. <div class="title-bar-text">Privacy Guides...</div>
  820. <div class="title-bar-controls">
  821. <button aria-label="Minimize"></button>
  822. <button aria-label="Maximize"></button>
  823. <button aria-label="Close"></button>
  824. </div>
  825. </div>
  826. <div class="window-body">
  827. <a href="privacyguides-logo.png"><img src="privacyguides-logo.png" style="width:60%; height:40%"></a>
  828. </div>
  829. </div>
  830. </div>
  831. <div class="item51">
  832. <div class="window" style="width: 230px; margin: 0 1.5em;">
  833. <div class="title-bar">
  834. <div class="title-bar-text">Vivaldi Icon</div>
  835. <div class="title-bar-controls">
  836. <button aria-label="Minimize"></button>
  837. <button aria-label="Maximize"></button>
  838. <button aria-label="Close"></button>
  839. </div>
  840. </div>
  841. <div class="window-body">
  842. <a href="vivaldi-icon.svg"><img src="vivaldi-icon.svg" style="width:60%; height:40%"></a>
  843. </div>
  844. </div>
  845. </div>
  846. <div class="item52">
  847. <div class="window" style="width: 230px; margin: 0 1.5em;">
  848. <div class="title-bar">
  849. <div class="title-bar-text">Photopea Icon</div>
  850. <div class="title-bar-controls">
  851. <button aria-label="Minimize"></button>
  852. <button aria-label="Maximize"></button>
  853. <button aria-label="Close"></button>
  854. </div>
  855. </div>
  856. <div class="window-body">
  857. <a href="photopea.svg"><img src="photopea.svg" style="width:60%; height:40%"></a>
  858. </div>
  859. </div>
  860. </div>
  861. <div class="item53">
  862. <div class="window" style="width: 300px;">
  863. <div class="title-bar">
  864. <div class="title-bar-text">Drawing 18</div>
  865. <div class="title-bar-controls">
  866. <button aria-label="Minimize"></button>
  867. <button aria-label="Maximize"></button>
  868. <button aria-label="Close"></button>
  869. </div>
  870. </div>
  871. <div class="window-body">
  872. <a href="drawing18.jpg"><img src="drawing18.jpg" style= "width:60%; height:40%;"></a>
  873. </div>
  874. </div>
  875. </div>
  876. <div class="item54">
  877. <div class="window" style="width: 300px;">
  878. <div class="title-bar">
  879. <div class="title-bar-text">Drawing 19: WigglyPaint</div>
  880. <div class="title-bar-controls">
  881. <button aria-label="Minimize"></button>
  882. <button aria-label="Maximize"></button>
  883. <button aria-label="Close"></button>
  884. </div>
  885. </div>
  886. <div class="window-body">
  887. <a href="drawing19-WigglyPaint.png"><img src="drawing19-Wigglypaint.png" style= "width:60%; height:40%;"></a>
  888. </div>
  889. </div>
  890. </div>
  891. </div>
  892. </div>
  893. </body>
  894. </html>
  895. <style>
  896. body {
  897. background-image: url('electric-butterfly.jpg');
  898. background-repeat: no-repeat;
  899. background-attachment: fixed;
  900. background-size: cover;
  901. }
  902. * {
  903. scrollbar-color: #e91827 #1c20db !important;
  904. }
  905. .container {
  906. display: grid;
  907. grid-template-columns: auto auto auto;
  908. padding: 10px;
  909. }
  910. @media only screen and (max-width: 600px) {
  911. body {background-repeat: repeat;}
  912. .item1 {grid-area: 1 / span 6;}
  913. .item2 {grid-area: 2 / span 6;}
  914. .item3 {grid-area: 3 / span 6;}
  915. .item4 {grid-area: 4 / span 6;}
  916. .item5 {grid-area: 5 / span 6;}
  917. .item6 {grid-area: 6 / span 6;}
  918. .item7 {grid-area: 7 / span 6;}
  919. .item8 {grid-area: 8 / span 6;}
  920. .item9 {grid-area: 9 / span 6;}
  921. .item10 {grid-area: 10 / span 6;}
  922. .item11 {grid-area: 11 / span 6;}
  923. .item12 {grid-area: 12 / span 6;}
  924. .item13 {grid-area: 13 / span 6;}
  925. .item14 {grid-area: 14 / span 6;}
  926. .item15 {grid-area: 15 / span 6;}
  927. .item16 {grid-area: 16 / span 6;}
  928. .item17 {grid-area: 17 / span 6;}
  929. .item18 {grid-area: 18 / span 6;}
  930. .item19 {grid-area: 19 / span 6;}
  931. .item20 {grid-area: 20 / span 6;}
  932. .item21 {grid-area: 21 / span 6;}
  933. .item22 {grid-area: 22 / span 6;}
  934. .item23 {grid-area: 23 / span 6;}
  935. .item24 {grid-area: 24 / span 6;}
  936. .item25 {grid-area: 25 / span 6;}
  937. .item26 {grid-area: 26 / span 6;}
  938. .item27 {grid-area: 27 / span 6;}
  939. .item28 {grid-area: 28 / span 6;}
  940. .item29 {grid-area: 29 / span 6;}
  941. .item30 {grid-area: 30 / span 6;}
  942. .item31 {grid-area: 31 / span 6;}
  943. .item32 {grid-area: 32 / span 6;}
  944. .item33 {grid-area: 33 / span 6;}
  945. .item34 {grid-area: 34 / span 6;}
  946. .item35 {grid-area: 35 / span 6;}
  947. .item36 {grid-area: 36 / span 6;}
  948. .item37 {grid-area: 37 / span 6;}
  949. .item38 {grid-area: 38 / span 6;}
  950. .item39 {grid-area: 39 / span 6;}
  951. .item40 {grid-area: 40 / span 6;}
  952. .item41 {grid-area: 41 / span 6;}
  953. .item42 {grid-area: 42 / span 6;}
  954. .item43 {grid-area: 43 / span 6;}
  955. .item44 {grid-area: 44 / span 6;}
  956. .item45 {grid-area: 45 / span 6;}
  957. .item46 {grid-area: 46 / span 6;}
  958. .item47 {grid-area: 47 / span 6;}
  959. .item48 {grid-area: 48 / span 6;}
  960. .item49 {grid-area: 49 / span 6;}
  961. .item50 {grid-area: 50 / span 6;}
  962. .item51 {grid-area: 51 / span 6;}
  963. .item52 {grid-area: 52 / span 6;}
  964. .item53 {grid-area: 53 / span 6;}
  965. .item54 {grid-area: 54 / span 6;}
  966. }
  967. .iframe-container {
  968. position: relative;
  969. width: 320px; /* Adjust as needed */
  970. height: 255px; /* Adjust as needed */
  971. padding: 35px;
  972. overflow: hidden;
  973. }
  974. .iframe-container iframe {
  975. width: 100%;
  976. height: 100%;
  977. position: absolute;
  978. top: 0 30em;
  979. left: 0 25em;
  980. overflow: hidden;
  981. padding: 50px;
  982. }
  983. .iframe-container img {
  984. position: absolute;
  985. top: 0;
  986. left: 0;
  987. width: 100%; /* Adjust as needed */
  988. height: 100%; /* Adjust as needed */
  989. object-fit: cover; /* Ensures the image covers the iframe */
  990. }
  991. </style>