the museum of alexandra

rows of shelves line the walls of this regally-wallpapered room, gold trimmings gracing the edges of white crown molding encircling the ceiling. lights bounce off walls to show delightful giftboxes, wrapped in metallic papers of all colors. on each of the boxes, a cartoonishly large pricetag labeled FREE dangles next to an artist's rendition of what is inside. under each row, a short description of each gift is neatly written on a blank white notecard. it appears this room is full of free gifts for you, the visitor of this museum.

layouts

adoptables

backgrounds

layouts

otter sanctuary

preview

i wanted to make a 2000s-style layout featuring a big image and a forever-scrolling body text. i love otters, and i thought this smiley guy would be a welcoming presence for anyone coming to your website. this layout is not responsive, unfortunately, but it can be viewed on screens easily from 1024px wide. the layout is still pretty customizable, and if you would like to edit the code to make it responsive, please feel free! there's no custom fonts, but there is javascript used for the bubble cursor effect. feel free to remove if you're aiming for no javascript. don't forget to credit!

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>YOUR W E B S I T E HERE</title> <style> * { box-sizing: border-box; cursor: crosshair; } body { overflow-x: hidden; } blockquote { background-color: #FFF; padding: 10px; line-height: 16pt; font-family: Georgia, serif; text-align: justify; } code { background-color: #F7F3ED; color: #000; font-family: Courier New, monospace; padding: 2px; } footer { text-align: center; height: 10%; padding: 10px; font-size: 8pt; letter-spacing: 2px; } footer p a { color: #000 !important; } h1 { text-align: right; font-family: Georgia, serif; font-size: 2rem; background: -webkit-linear-gradient(left,#EF959D, #437281); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-transform: lowercase; } h2 { font-family: Georgia; color: #6f3e28; letter-spacing: 1px; text-shadow: 1px 2px #FFF; } h3 { font-family: Georgia; color: #739ba2; letter-spacing: 1px; text-shadow: 1px 2px #FFF; } hr { border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(72,161,194, 0.75), rgba(0, 0, 0, 0)); } input { background-color: #e4e7de; color: #000; font-family: Georgia, serif; font-size: 10pt; padding: 5px; border: 1px solid #437281; margin: 5px; } button { background-color: #739ba2; border: 1px solid #437281; padding: 5px 10px 5px 10px; } button:active { position: relative; top: 1px; } .column { float: left; } .body-content { background: rgba(168,208,219,.8); border-top: 5px double #437281; border-left: 5px double #437281; border-right: 5px double #437281; border-bottom: 0px; width: 70%; padding: 2rem; font-family: Verdana, sans serif; font-size: 9pt; line-height: 12pt; height: 100%; } .body-content a:link,a:visited,a:active { color: #6f3e28; } .body-content a:hover { text-decoration: none; font-style: italic; } .body-content u { color: #437281; text-decoration: none; border-top: 0px; border-right: 0px; border-left: 0px; border-bottom: 2px; border-style: dotted; } .body-content em { color: #3a819b; font-weight: 500; } .body-content strong { letter-spacing: 1px; color: #437281; } .body-content ul { list-style: none; padding: 0; margin: 0; & li { padding-left: 1rem; text-indent: -0.7rem; } & li::before { content: "🦦 "; } } .sidebar { width: 30%; } .sidebar-blurb { border-radius: 20px; padding: 10px; margin: 5px; width: 95%; font-family: Verdana, san serif; font-size: 8pt; letter-spacing: 0.30pt; line-height: 11pt; } .sidebar-blurb a { color: #EF959D; } .sidebar-blurb a:hover { color: #EF959D; text-decoration: none; } .odd { background-color: #437281; color: #F7F4ED; } .odd strong { color: #A8D0DB; } .even { background-color: rgb(105, 88, 95); color: #F7F4ED; } .even strong { color: #A8D0DB; } .sidebar-blurb strong { font-family: Georgia, serif; text-transform: lowercase; text-align: center; } .column.sidebar ul { list-style-type: none; margin: 0; padding: 0; width: 100%; } .column.sidebar li a { display: block; width: inherit; padding: 2px; margin: 5px; background-color: rgb(105, 88, 95); color: #EF959D; text-decoration: none; text-align: center; border-radius: 20px; font-family: Verdana, sans serif; font-size: 7pt; text-transform: uppercase; } .column.sidebar li a:hover { color: #FFF; text-transform: uppercase; } .column.sidebar li span { display: block; width: inherit; padding: 2px; margin: 5px; background-color: #437281; color: #A8D0DB; text-decoration: none; text-align: center; border-radius: 20px; font-family: Verdana, sans serif; font-size: 7pt; text-transform: uppercase; } .column.sidebar li span a:link, a:visited, a:active { width: auto; display: inline; background-color: transparent; border-radius: 0px; padding: 0px; margin: 0px; } .row:after { content: ""; display: table; clear: both; } .main-container { margin: 0 auto; width: 40vw; position: relative; top: 7vh; z-index: 1; } .otter { position: absolute; z-index: -1; width: 40vw; } ::selection { color: #6f3e28; background: #EF959D; } </style> </head> <body> <img src="otter.png" class="otter"> <div class="main-container row"> <header> <h1>your website name here</h1> </header> <div class="column body-content"> <h2>Otter Sanctuary Layout</h2> <p>welcome to the preview of the <strong>otter sanctuary</strong> layout by <a href="https://xandra.cc" target="_new">xandra</a>. i'm sorry to say that this layout is <em>not responsive</em>, and will really only look right on screens at least 1024px wide, which is luckily most computers and laptops. this layout offers a lot of customization still with colors, if wanted. you can scroll down this page to see more styles of common HTML tags. if you want to edit the code to make it more responsive, be my guest! this is your playground. :)</p> <p><strong>additional note:</strong> this layout does use javascript for the cursor bubbles, which was a code snippet from <a href="http://www.mf2fm.com/rv/dhtmlbubblecursor.php" target="_new">mf2fm</a>.</p> <p>if you wouldn't mind, leaving my link in the bottom right on the sidebar is perfect, but if you'd rather put something else there, don't forget to link me on your credits page. :) i hope you have lots of fun making your site, and feel free to <a href="https://xandra.cc/" target="_new">let me know</a> that you used my layout! i'll come and check out your pages!</p> <p>when you're ready, just right click anywhere on the background and select "view source." then copy & paste into your favorite text editor! this layout features:</p> <ul> <li>late '00s style with some bubbly flair</li> <li>perfect for essays and personal sites with a lot of words</li> <li>expandable sidebar for lots and lots of navigation items</li> <li>coded completely in notepad</li> </ul> <p>thanks for being you! hope to see you around sometime.</p> <p>xo, alexandra</p> <hr> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nunc est, sollicitudin vel pulvinar ut, tempus sed nunc. <strong>Pellentesque</strong> sagittis, nisl id rutrum cursus, <em>turpis</em> ipsum mollis felis, ac lobortis dolor lorem in erat. Praesent accumsan est in <u>justo</u> laoreet maximus. In commodo egestas metus, sit amet dapibus enim viverra id. Nam aliquam tellus eget condimentum elementum. Donec consectetur leo sit amet ante malesuada mollis. Proin pretium egestas erat quis lobortis. Cras tincidunt mattis erat quis laoreet. Maecenas et quam enim. <a href="#">Link</a> here but also a <a href="#">link here</a>.</p> <h3>Form Element Styling</h3> <p align="center"><input><br> <button>submit</button></p> <p>Vestibulum semper malesuada dignissim. Sed in odio at mi mattis rhoncus eu ac nibh. Donec mi nibh, sollicitudin at urna a, convallis auctor felis. Nulla ut porta magna. Vestibulum id lorem ac erat ultricies mollis eu in tortor. Nulla vitae elit ut nisl euismod vehicula. Donec blandit tempor lobortis. Vivamus id arcu lacus. Aliquam fringilla leo sit amet purus varius mollis.</p> <ul> <li>List item</li> <li>List item <a href="#">with a link</a></li> <li>List item</li> </ul> <p>Nam congue id odio eget euismod. Nulla a odio in ipsum rutrum feugiat quis vitae turpis. Curabitur arcu nibh, euismod eu nibh sit amet, pulvinar mollis nunc. Aenean laoreet malesuada quam, at posuere justo sollicitudin eget. Pellentesque vehicula malesuada libero, ut maximus enim tempor in.</p> <blockquote>This is a blockquote. Duis vulputate lorem in finibus semper. Suspendisse fermentum congue ultricies. Suspendisse <em>incidunt</em>, nisl viverra commodo <strong>rhoncus</strong>, est lorem auctor tellus, vitae feugiat dolor odio auctor odio.</blockquote> <p>Nulla consequat fermentum varius. Praesent feugiat dui nec nisi facilisis rutrum. Cras sed quam id ipsum eleifend semper et vitae ante. Curabitur nisi ante, blandit eget leo vulputate, ultrices ullamcorper urna.</p> <ol> <li>List item</li> <li>List item <a href="#">with a link</a></li> <li>List item</li> </ol> <p>Maecenas ut purus vestibulum, malesuada risus quis, sagittis erat. In aliquet eleifend sapien, ac euismod felis. Sed ullamcorper aliquam lobortis. Nullam sollicitudin tempor dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut elementum neque. Aliquam mattis, erat nec aliquet aliquam, nunc turpis venenatis sem, vitae tincidunt turpis eros id velit. Praesent dapibus massa nec turpis condimentum pretium. Pellentesque in aliquet elit. Nulla rhoncus felis quis tellus faucibus, vitae lobortis nisl tempus. Donec mattis ligula felis, condimentum tempus dolor faucibus in. Curabitur nec arcu in ante scelerisque euismod in ut diam. Integer at mauris non eros molestie ultricies.</p> <footer> <p>© 2023 YOUR NAME | <a href="#">Site Map</a> | <em>best viewed 1024px wide</em></p> </footer> </div> <div class="column sidebar"> <ul> <li><span>Category Name</span></li> <li><a href="#">Navlink</a></li> <li><a href="#">Navlink</a></li> <li><a href="#">Navlink</a></li> <li><span>Category Name</span></li> <li><a href="#">Navlink</a></li> <li><a href="#">Navlink</a></li> <li><a href="#">Navlink</a></li> <li><span>Category Name</span></li> <li><a href="#">Navlink</a></li> <li><a href="#">Navlink</a></li> <li><a href="#">Navlink</a></li> <li><span>Category Name</span></li> <li><a href="#">Navlink</a></li> <li><a href="#">Navlink</a></li> <li><a href="#">Navlink</a></li> <div class="sidebar-blurb odd"> <strong>About</strong> <p>you can reuse this div to add more blurbs to your sidebar! just be sure to note whether it's <code>odd</code> or <code>even</code> in the class. this div, for instance, has <code>sidebar-blurb odd</code> as its classes.</p> <p><a href="#">test link please ignore</a></p> </div> <div class="sidebar-blurb even"> <strong>Button Wall</strong> <p>or you can add something like a tiny button wall here or a collection of web cliques. this div has <code>sidebar-blurb even</code> as its classes.</p> <p><a href="#">test link please ignore</a></p> </div> <div class="sidebar-blurb odd"> <strong>About</strong> <p>you can reuse this div to add more blurbs to your sidebar! just be sure to note whether it's <code>odd</code> or <code>even</code> in the class. this div, for instance, has <code>sidebar-blurb odd</code> as its classes.</p> <p><a href="#">test link please ignore</a></p> </div> <li><span>♥ layout from <a href="https://xandra.cc" target="_new">xandra.cc</a> ♥</span></li> </ul> </div> </div> <script type="text/javascript"> // <![CDATA[ var colours=new Array("#a1c4c9", "#48a1c2", "#a1c4c9", "#48a1c2", "#ccc"); // colours for top, right, bottom and left borders and background of bubbles var bubbles=100; // maximum number of bubbles on screen var over_or_under="over"; // set to "over" for bubbles to always be on top, or "under" to allow them to float behind other objects /**************************** * JavaScript Bubble Cursor * *(c)2010-13 mf2fm web-design* * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * ****************************/ var x=ox=400; var y=oy=300; var swide=800; var shigh=600; var sleft=sdown=0; var bubb=new Array(); var bubbx=new Array(); var bubby=new Array(); var bubbs=new Array(); var sploosh=false; function addLoadEvent(funky) { var oldonload=window.onload; if (typeof(oldonload)!='function') window.onload=funky; else window.onload=function() { if (oldonload) oldonload(); funky(); } } addLoadEvent(buble); function buble() { if (document.getElementById) { var i, rats, div; for (i=0; i<bubbles; i++) { rats=createDiv("3px", "3px"); rats.style.visibility="hidden"; rats.style.zIndex=(over_or_under=="over")?"1001":"0"; div=createDiv("auto", "auto"); rats.appendChild(div); div=div.style; div.top="1px"; div.left="0px"; div.bottom="1px"; div.right="0px"; div.borderLeft="1px solid "+colours[3]; div.borderRight="1px solid "+colours[1]; div=createDiv("auto", "auto"); rats.appendChild(div); div=div.style; div.top="0px"; div.left="1px"; div.right="1px"; div.bottom="0px" div.borderTop="1px solid "+colours[0]; div.borderBottom="1px solid "+colours[2]; div=createDiv("auto", "auto"); rats.appendChild(div); div=div.style; div.left="1px"; div.right="1px"; div.bottom="1px"; div.top="1px"; div.backgroundColor=colours[4]; if (navigator.appName=="Microsoft Internet Explorer") div.filter="alpha(opacity=50)"; else div.opacity=0.5; document.body.appendChild(rats); bubb[i]=rats.style; } set_scroll(); set_width(); bubble(); }} function bubble() { var c; if (Math.abs(x-ox)>1 || Math.abs(y-oy)>1) { ox=x; oy=y; for (c=0; c<bubbles; c++) if (!bubby[c]) { bubb[c].left=(bubbx[c]=x)+"px"; bubb[c].top=(bubby[c]=y-3)+"px"; bubb[c].width="3px"; bubb[c].height="3px" bubb[c].visibility="visible"; bubbs[c]=3; break; } } for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c); setTimeout("bubble()", 40); } document.onmousedown=splash; document.onmouseup=function(){clearTimeout(sploosh);}; function splash() { ox=-1; oy=-1; sploosh=setTimeout('splash()', 100); } function update_bubb(i) { if (bubby[i]) { bubby[i]-=bubbs[i]/2+i%2; bubbx[i]+=(i%5-2)/5; if (bubby[i]>sdown && bubbx[i]>sleft && bubbx[i]<sleft+swide+bubbs[i]) { if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) { bubb[i].width=bubbs[i]+"px"; bubb[i].height=bubbs[i]+"px"; } bubb[i].top=bubby[i]+"px"; bubb[i].left=bubbx[i]+"px"; } else { bubb[i].visibility="hidden"; bubby[i]=0; return; } } } document.onmousemove=mouse; function mouse(e) { if (e) { y=e.pageY; x=e.pageX; } else { set_scroll(); y=event.y+sdown; x=event.x+sleft; } } window.onresize=set_width; function set_width() { var sw_min=999999; var sh_min=999999; if (document.documentElement && document.documentElement.clientWidth) { if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth; if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight; } if (typeof(self.innerWidth)=='number' && self.innerWidth) { if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth; if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight; } if (document.body.clientWidth) { if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth; if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight; } if (sw_min==999999 || sh_min==999999) { sw_min=800; sh_min=600; } swide=sw_min; shigh=sh_min; } window.onscroll=set_scroll; function set_scroll() { if (typeof(self.pageYOffset)=='number') { sdown=self.pageYOffset; sleft=self.pageXOffset; } else if (document.body && (document.body.scrollTop || document.body.scrollLeft)) { sdown=document.body.scrollTop; sleft=document.body.scrollLeft; } else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) { sleft=document.documentElement.scrollLeft; sdown=document.documentElement.scrollTop; } else { sdown=0; sleft=0; } } function createDiv(height, width) { var div=document.createElement("div"); div.style.position="absolute"; div.style.height=height; div.style.width=width; div.style.overflow="hidden"; div.style.backgroundColor="transparent"; return (div); } // ]]> </script> </body> </html>

desktop dream

preview

i wanted to make a layout that was versatile, clean, and had elements of classic computing GUIs that would be easy to customize. feel free to change the palette to your heart's content. included in the html file is the CSS — easy, and you're good to go! there are no custom fonts or additional scripts, so all you have to do is copy the code below. don't forget to credit!

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>YOUR W E B S I T E HERE</title> <style> * { cursor: default; } body { /* background */ background-color: #F3BEDC; background-image: linear-gradient(30deg, #E2A3C7 12%, transparent 12.5%, transparent 87%, #E2A3C7 87.5%, #E2A3C7), linear-gradient(150deg, #E2A3C7 12%, transparent 12.5%, transparent 87%, #E2A3C7 87.5%, #E2A3C7), linear-gradient(30deg, #E2A3C7 12%, transparent 12.5%, transparent 87%, #E2A3C7 87.5%, #E2A3C7), linear-gradient(150deg, #E2A3C7 12%, transparent 12.5%, transparent 87%, #E2A3C7 87.5%, #E2A3C7), linear-gradient(60deg, #E2A3C7 25%, transparent 25.5%, transparent 75%, #E2A3C7 75%, #E2A3C777), linear-gradient(60deg, #E2A3C7 25%, transparent 25.5%, transparent 75%, #E2A3C7 75%, #E2A3C777); background-size: 20px 35px; background-position: 0 0, 0 0, 10px 18px, 10px 18px, 0 0, 10px 18px; } footer { width: initial; background-color: #D67AB1; height: 20px; text-align: right; padding-right: 2px; border-right: 1px solid #4E3A4D; border-bottom: 1px solid #4E3A4D; border-left: 1px solid #4E3A4D; } footer > p { font-family: Verdana; font-size: 8pt; color: #4E3A4D; font-size: 7pt; line-height: 16pt; letter-spacing: 0.5pt; } footer > p > a { color: #F3BEDC; text-decoration: none; transition: all 1s; } footer > p > a:hover { color: #FDF7FA; text-decoration: none; letter-spacing: 1pt; } input, textarea { background-color: #905C8E; font-family: Verdana, sans serif; font-size: 8.5pt; line-height: 9.5pt; letter-spacing: 1px; color: #FFF; padding: 5px; border: 1px dashed #60435F; } main { background-color: #60435F; width: 50%; max-height: 60%; position: absolute; top: 50%; left: 50%; -ms-transform: translateX(-50%) translateY(-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } nav { padding: 10px; font-family: Verdana, sans serif; font-size: 10pt; width: initial; text-align: center; line-height: 22pt; } nav > a { color: #D67AB1; font-weight: bold; background-color: #4E3A4D; padding: 5px; transition: all 0.8s; text-decoration: none; } nav > a:hover { color: #A8DCD9; background-color: #4E3A4D; padding: 5px; text-decoration: none; } section p { font-family: Verdana; font-size: 8pt; color: #FDF7FA; letter-spacing: 0.5px; line-height: 10pt; } section strong { color: #AFE6D2; letter-spacing: 1.5px; } section em { color: #D899BF; text-shadow: #F3BEDC 1px 0 5px; } section > p > a { color: #A8DCD9; transition: all 1s; } section > p > a:hover { color: #D67AB1; text-decoration: none; } section > h2 { font-family: Verdana, sans serif; color: #D899BF; background: -webkit-linear-gradient(60deg,#D899BF, #a7f1e5); background-image: linear-gradient(60deg, #D899BF, #a7f1e5); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: 2px; font-weight: bold; } section > h3 { font-family: Verdana, sans serif; color: #a7f1e5; background: -webkit-linear-gradient(60deg,#a7f1e5, #D899BF); background-image: linear-gradient(60deg,#a7f1e5, #D899BF); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: 2px; font-weight: bold; font-style: italic; } ul { list-style-position: inside; } li { font-family: Verdana; font-size: 8.5pt; color: #D67AB1; } section { padding: 10px; } section > img { float: left; margin-right: 10px; margin: bottom: 10px; border-radius: 25px; } section > img:hover { position: relative; top: 1px; left: 1px; } .content { width: 70%; max-height: 400px; overflow-x: hidden; overflow-y: scroll; } .flex { display: flex; flex-direction: row; flex-wrap: nowrap; } .sidebar { width: 25%; padding: 10px; } .title-bar { width: initial; color: #4E3A4D; font-family: Verdana, sans serif; font-size: 9pt; margin-top: -1px; padding: 2px; background-color: #D67AB1; border-top: 1px solid #4E3A4D; border-right: 1px solid #4E3A4D; border-left: 1px solid #4E3A4D; display: flex; flex-direction: row; flex-wrap: nowrap; letter-spacing: 4pt; } #websitename { flex-grow: 1; padding-left: 2px; font-style: italic; font-weight: bold; } #icons { flex-grow: 8; text-align: right; } /* width */ ::-webkit-scrollbar { width: 3px; } /* track */ ::-webkit-scrollbar-track { box-shadow: inset 0 0 5px #FFF; border-radius: 5px; } /* handle */ ::-webkit-scrollbar-thumb { background: #E2A3C7; border-radius: 5px; } /* handle on hover */ ::-webkit-scrollbar-thumb:hover { background: #CE92B6; } hr { border: 0.5px dashed #FFF; } @media screen and (max-width: 750px) { main { width: 90vw; max-height: 90vh; } .content { max-height: 60vh !important; } .sidebar { height: 60vh; overflow: auto; } } @media screen and (min-width: 750px) and (max-width: 1400px) { main { width: 90vw; max-height: 90vh; } .content { max-height: 60vh !important; } .sidebar { height: 60vh; overflow: auto; } } </style> </head> <body> <main> <div class="title-bar"> <div id="websitename"> website name here </div> <div id="icons"> ─ 🗗 ✖ </div> </div> <nav> <a href="#">Navlink</a> <a href="#">Navlink</a> <a href="#">Navlink</a> <a href="#">Navlink</a> <a href="#">Navlink</a> <a href="#">Navlink</a> </nav> <div class="flex"> <section class="content"> <img src="image.png"><p>this layout is simple and minimalist, my favorite flavors. feel free to play around with colors to really make this layout your own. (don't forget to back up your work!)</p> <p>if you wouldn't mind, <strong>leaving my link in the bottom right is perfect</strong>, but if you'd rather put <em>something else</em> there, don't forget to link me on a credits page. :) i hope you have lots of fun making your site, and feel free to <a href="https://xandra.cc" target="_new">let me know</a> that you used my layout! i'll come and check out your pages!</p> <p>when you're ready, just right click anywhere on the background and select "view source." then copy & paste into your favorite text editor! this layout is:</p> <p><ul> <li>customization-friendly</li> <li>responsive</li> <li>perfect for essays, journals, pixel adoptions, & hand-coded blogs</li> <li>coded completely in notepad</li> </ul></p> <p>thanks for being you! hope to see you around sometime.</p> <p>xo, alexandra</p> </p> <hr> <p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>. In ultricies dolor ut tincidunt ultricies. Nunc auctor, eros ac ultricies sodales, elit odio lacinia arcu, non tempus risus diam vel felis. Cras et lacus nec mauris vehicula tristique. <strong>Donec</strong> euismod nunc nec sollicitudin rutrum. Ut mattis vel lorem a lacinia. Donec eu erat eros. Ut finibus, ante scelerisque pellentesque ultrices, lorem ligula rhoncus ex, in fringilla nisi elit nec eros. Curabitur ac blandit nibh.</p> <h2>this is an h2</h2> <p>Nunc eget aliquam ligula, <em>facilisis facilisis eros</em>. Morbi eros tortor, facilisis eu molestie sit amet, tempor ac mauris. Aliquam feugiat molestie massa eget mollis. Sed sodales sodales dui. Phasellus sit amet nibh eget sem commodo consectetur. <strong>Nam vulputate</strong> placerat odio id scelerisque. Donec egestas nunc non justo fringilla volutpat. Duis aliquam lorem at quam auctor, <a href="#">pretium scelerisque magna pellentesque</a>. Duis sit amet orci mi. Proin sollicitudin purus ipsum, ut interdum elit vulputate non.</p> <h3>this is an h3</h3> <p>Proin <em>lacinia</em> in nunc et euismod. Donec a sem a felis molestie aliquet at eu ex. In molestie odio vitae nisi tempor elementum. Fusce eros tellus, volutpat vel pretium ac, congue a justo. Duis <em>ultrices</em> diam nibh. In maximus leo elementum nibh facilisis, a faucibus tellus feugiat. Nam in luctus velit, et tempor risus. Donec et <strong>sem quam</strong>. Phasellus eget orci eu diam tincidunt ornare a nec sapien. Proin eget rhoncus mauris. In id cursus mauris, ac varius mi. Proin consequat odio viverra placerat ornare. Aliquam ipsum eros, tristique a pharetra non, varius id ante.</p> </section> <section class="sidebar"> <p><strong>name:</strong> smokey the bear<br> <strong>fires prevented:</strong> a lot<br> <strong>scale of fuzziness:</strong> 5/10</p> <p>use this section for whatever you'd like! but here's some ideas:</p> <p>short information about you, anything you're doing right now, statuses from <a href="https://status.cafe" target="_new">status.cafe</a>, links to your other digital presences - stuff like that!</p> <p>or you could <a href="https://sadgrl.online/cyberspace/webrings.html" target="_new">join a webring</a>! (may i suggest <a href="https://xandra.cc/safonts" target="_new">mine</a>?)</p> <p>you can also use this section creatively depending on the page. add sources to an essay you've written, or provide some extra context to a narrative.</p> <p>you could use this section to introduce an image gallery full of images on the left! this box also scrolls eventually, just in case you need it. :)</p> </section> </div> <footer> <p>© content by <strong>your name</strong> | layout from <a href="https://xandra.cc" target="_new">xandra.cc</a></p> </footer> </main> </body> </html>

adoptables

if you adopt any of these, be sure to right-click and "save as" to upload onto your own server. please don't hotlink! and don't forget to link back to the museum so folks can get their adoptables, too! unsure what to do with these? check out this guide to interacting with other websites in the personal web.

food & drinks

iced chai latte

furry friends

diddles the raccoon, who you can download animated or static, comes with an adoption certificate that can be edited with a name (should you choose to rename "diddles") on the dotted line, as well as the month and day to signify a gotcha day!

a racoon sitting upright a racoon sitting upright with his head and hands bobbing an adoption certificate with space for the day and month of adoption, with the name on the dotted line saying DIDDLES

free backgrounds

if you use any of these, be sure to right-click and "save as" to upload onto your own server. please don't hotlink!