Layout published by boêmio (hater #1 do minimalismo)

published 1715958361
updated 1762634426

Add to Favorites

View Layouts

View Profile

Report Layout

AO3 based layout!!!!!!!!

Tags: gloss, old web, 2000s, ao3, archive of our own, simple, layout

Description:

29/11/24
update 1:

inspired by the AO3 (Archive of our own) user page, it's not 100% accurate but it's pretty close! made for all my little fan fiction degenerates. feel free to modify this as much as you want and enjoy!! let me know if there's any problem with this layout too please!
the layout is mobile friendly. idk if it's just in the site or if it works on the app too (probably not...)

26/08/25

update 2:

made the contact thing be in a vertical row instead of being packed next to each other. idk how to explain it, just look at the new pic. also, i changed the boring garamond to the very cool crispy arial font.

08/10/25

update 3:

i changed the font to verdana, AKA "the AO3 font".

EXTRA: AO3 EMBLEMS
the image links are inside the layout code.

03/11/25

update 4:

i added some comments inside the code incase tou want to change something i don't careeeeeeeee urghhhhhhhhhhhh

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by boêmio (hater #1 do minimalismo) (https://layouts.spacehey.com/layout?id=105684) -->

<!-- OPTIONAL: EXTRA: AO3 EMBLEMS --> 

<img src="https://archiveofourown.org/images/skins/iconsets/default/rating-general-audience.png"/>
<img src="https://archiveofourown.org/images/skins/iconsets/default/rating-teen.png"/>
<img src="https://archiveofourown.org/images/skins/iconsets/default/rating-mature.png"/>
<img src="https://archiveofourown.org/images/skins/iconsets/default/rating-explicit.png"/>
<img src="https://archiveofourown.org/images/skins/iconsets/default/category-gen.png"/>
<img src="https://archiveofourown.org/images/skins/iconsets/default/category-femslash.png"/>
<img src="https://archiveofourown.org/images/skins/iconsets/default/category-het.png"/>
<img src="https://archiveofourown.org/images/skins/iconsets/default/category-slash.png"/>
<img src="https://archiveofourown.org/images/skins/iconsets/default/category-multi.png"/>
<img src="https://archiveofourown.org/images/skins/iconsets/default/category-other.png"/>
<img src="https://archiveofourown.org/images/skins/iconsets/default/warning-choosenotto.png"/>
<img src="https://archiveofourown.org/images/skins/iconsets/default/warning-yes.png"/>
<img src="https://archiveofourown.org/images/skins/iconsets/default/complete-no.png"/>
<img src="https://archiveofourown.org/images/skins/iconsets/default/complete-yes.png"/>

<!-- start of actual layout -->

<style>

/* the logo */

.logo {
content:url("https://archiveofourown.org/images/ao3_logos/logo_42.png");
width: 60px !important;
}
.top .left a:after {
content: "Archive Of Our Own";
position: relative;
top: -15px;
color: black;
font-size: 20px;
font-family: garamond;
}

/* this makes your profile WIIIIDEEE */

.container {
width: 1500px;
}

/* this change the main (duh) white part of your profile idk how to explain */

main {
background-color: #f7f7f7!important;
}

/* this is the background color (i don't even know why i changed it you can't see it anyway) */

body {
background: #f7f7f7; 
}

/* THE AO3 FONT!!!!!!!!!!! */

@import url('https://fonts.cdnfonts.com/css/verdana');
@font-face {
    font-family: 'Verdana';
    font-style: italic;
    font-weight: 400;
    src: local('Verdana'), url('https://fonts.cdnfonts.com/s/26084/VERDANAI.woff') format('woff');
}

body {
font-family: 'verdana';                              
}

/* this adds a little border to your pfp */

.general-about .profile-pic {
 border: 1px solid #ccc;
}

/* this adds a little border to YOUR FRIENDS' pfp */

.friends-grid img {
 height: 100px;
 border: 1px solid #ccc;
}

/* the red thing of the navigation bar */

nav .links {
 background: linear-gradient(#5c0000 0,5%, #8a1a10, #460000); 
 padding: 5;
 height: 35px;
 text-align: left;
}

/* the color of the links in the navigation bar + grey background that appears when you click them */

nav .links a {
  color: #fff;
  text-shadow: grey 0px 2px 4px;
  padding: 5px
}
nav .links a:hover {
  color: #000;
  background: linear-gradient(lightgrey, lightgrey);
  text-decoration: none;
  padding-top: 10;
}
nav .links li.active a {
  color: #fff; 
  font-weight: normal;
}
nav .links li:not(:last-child)::after {
  color: darkred;
  text-shadow: darkgrey 1px 0px 1px;
}

/* this changes the styling of the SEARCH >BAR<  */

.top input { 
border-radius: 15px;
background: linear-gradient(#fff, #ccc);
}

/* styling of your profile buttons (with hover ""animation"") */

button:not(.logout-btn) {
 background: linear-gradient(#ccc 15%, #fff, #aeaeae); 
 box-shadow: white 0 1px 1px 1px inset;
 color: #191919;
 font-size: 13px;
 font-weight: normal;
 text-shadow: white 0px 2px 5px;
 border-radius: 3px;
 padding: 2px;
} 

button:not(.logout-btn):hover {
 background: linear-gradient(#ccc 15%, #fff, #aeaeae); 
 box-shadow: darkgrey 0 1px 1px 1px inset;
 color: #191919
 font-size: 13px;
 color: darkred;
 font-weight: normal;
 text-shadow: white 0px 2px 5px;
 border-radius: 3px;
 padding: 2px;
}

/* the white and grey gradient above the naviagtion bar */

nav .top {
 background: linear-gradient(#fff 15%, #f7f7f7, #ccc); 
 box-shadow: #fff 0px 0px 2px 3px inset;
}

/* this adds a border to the comments pfp */

.comments-table td:first-child img:not(.icon) {
 height: 100px;
 border: 1px solid #ccc;
}

/* just the headings of your stuff. the vars are pretty explanatory ig */

.blurbs .heading  {
border-radius: 2px 2px 2px 2px !important; 
}
.friends .heading {
border-radius: 2px 2px 2px 2px !important; 
}
.table-section .heading  {
border-radius: 2px 2px 2px 2px !important; 
}
.table-section  {
border-radius: 2px 2px 2px 2px !important; 
}
.url-info  {
border-radius: 2px 2px 2px 2px !important; 
}
.contact .heading  {
border-radius: 2px 2px 2px 2px!important; 
}
.contact  {
border-radius: 2px 2px 2px 2px !important; 
}

/* this is your interests table */

.details-table td {
  background-color: #f7f7f7;
  color: #000;
} 
.details-table td:first-child {
  text-align: center;
  width: 20%;
  box-shadow: #ffffffab 0px 1px 2px 2px inset;
  color: black;
  font-size: 15px;
  font-weight: normal;
}

/* this makes the normal spacehey font less bold ig */

.profile .contact .heading h4, .profile .table-section h4 {
  font-weight: normal;
}

/* this removes the blue border of your stuff */

.profile .contact, .profile .table-section, .profile .url-info {
    border: 0;
}

/* and this is a inner grey border for said stuff */

.profile .contact .inner, .profile .table-section .inner {
    border: grey 1px solid;   
}

/* i guess this is useless code sorry */

.profile-info {
  border: 0;
  margin: 0;
  padding: 0;
}
.profile-info h3 {
  font-weight: normal;
  font-size: 13px;
  color: #000;
  margin: 0;
}

/* THIS IS YOR NAME STYLING */

.profile h1 {
  letter-spacing: 0.3px;
  margin: 0;
 font-size: 28px !important;
 text-align: left;
}

/* makes your mood and url tiny (and removes the text boldness) */

.mood p, .profile .url-info  {
 font-size: 13px;
}
.mood b, .profile .url-info b{
  font-weight: normal;
}
.mood a, .inner a, .friends a {
 color: #000;
 font-weight: normal;
 font-size: 13px;
}

/* your friends name */

.friends-grid a {
 color: #000000;
 font-weight: normal;
 font-size: 13px;
}

/* this changes the color of your blog's link (also hover animation again yey) */

.blog-preview a {
 color: #000;
 font-weight: normal;
 font-size: 13px;
}
.blog-preview a:hover {
 color: #aeaeae;
 font-weight: normal;
 font-size: 13px;
}
.contact a:hover {
 color: #aeaeae;
 font-weight: normal;
 font-size: 13px;
}
.heading {
   background-color: #d9d9d9 !important;
}

h4 {
   color: #0f0f0f !important;
}
.contact, .url-info, .table-section, .profile-info {
   border-color: #868686 !important;
}
td {
   background-color: white !important;
}
.profile .blurbs .heading, .profile .friends .heading, .profile .contact .heading, .profile .table-section .heading {
  background: linear-gradient(#f5f5f5 15%, #d9d9d9, #c0c0c0); 
  box-shadow: white 0 1px 1px 1px inset;
  font-size: 11px;
  font-weight: normal;
}
h1 {
font-size: 30px!important;
line-height: 50px;
font-weight: normal;
text-transform: uppercase;
letter-spacing: -1.5px;
padding-bottom:0px;
padding-top:0px;
border: solid 1px darkgrey;
}
footer 
{
background: none !important;
}
footer .links 
{
background: none !important;
}
main 
{
background-color: #fff;
position: relative;
height: 100%;
float: right;
float: right !important;
padding-left: 18%;
}
h1, h2, h3, h4, h5, h6 
{
color: #000 !important;
}
.contact 
{
position: absolute;
top: 0 !important;
left: 0 !important;
height: 99% !important;
width: 25% !important;
display: table !important;
}
.contact .inner 
{
border: none !important;
}
.contact .heading 
{
width: 70%;
}
.table-section .inner 
{
border: none !important;
}
.inner .pfp-fallback 
{
border: none !important;
}
.online {
    content: var(--status);
    color: #ff0000;
    font-size: 95%;
    font-style: italic;
}
.online img {
    margin-right: -12px;
    animation-name: none;
    opacity: 0;
}
.online {
    color: #0C8C00;
    font-weight: bold;
    font-size: 0;
}
p.online::after {
    content: "[ Online: Website ]";
    color: #a70000;
    font-size: 12px;
    font-weight: 100;
    font-style: italic;
    line-height: 25px;
    padding: 7px;
}
.profile .contact .inner, .profile .contact .inner .f-row, .profile .contact .inner .f-row .f-col {
	display: block;
	margin: 0;
	align-items: left;
}
</style>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 20 of 157 comments ( View all | Add Comment )

Cef	1767678817 using !! Report Comment
tiramisu	1767549929 this is super cuteee Using it rn (´▽`ʃ♡ƪ) Report Comment
Anjelus	1767463408 this is so freaking cool im using tsss Report Comment
daiyuaf	1767413823 SO COOL, USING!!! Report Comment
zombi	1767122313 lollll I love this Report Comment
Aliensz✫┆_starla	1766713893 OMG ABSOLUTELY USING THIS. Report Comment
naiivhs	1766501491 not using but u ATE up this layout Report Comment
tata ᯓ✦∘˙	1766356699 USINGGG THANK YOU ive been trying find a good layout Report Comment
Decay	1766250653 this is dope as hell!!! im not using but i kinda wish i would Report Comment
Cool_Guy232(Sonar's #1 Rabbit Husband)	1766081354 using Report Comment
pomegranate	1766065511 Using!! Report Comment
silly sil !!	1766047354 omgg using!! Report Comment
lili	1765316141 8sing Report Comment
tomi	1765154222 usingfgf Report Comment
𖥻 ׁ ׅ QUWERTYU !!! ׁ ׅ 🎸 (rp)	1765128669 usinggggggggggg Report Comment
Brownie	1765102360 usiing Report Comment
jerma985	1764888376 using... Report Comment
Cherry	1764045879 Using:) Report Comment
V1nc3nt.!	1763783232 using,, Ty Report Comment
syntax()	1763559506 one of the coolest layouts ive seen on this website omg Report Comment