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

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>