Layout published by Artistic_Hyperbole

published 1715958361
updated 1757459788

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.

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

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Artistic_Hyperbole (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>
.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;
}
.container {
width: 1500px;
}
main{
background-color: #f7f7f7!important;
}
body {
background: #f7f7f7; 
}
@import url('https://fonts.cdnfonts.com/css/microsoft-sans-serif');
body 
{
font-family: 'Microsoft Sans Serif', sans-serif;     
-webkit-font-smoothing: none !important;                               
}
.general-about .profile-pic {
 border: 1px solid #ccc;
}
.friends-grid img {
 height: 100px;
 border: 1px solid #ccc;
}
nav .links {
 background: linear-gradient(#5c0000 0,5%, #8a1a10, #460000); 
 padding: 5;
 height: 35px;
 text-align: center;
}
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;
}
.top input { 
border-radius: 15px;
background: linear-gradient(#fff, #ccc);
}
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;
} 
nav .top {
 background: linear-gradient(#fff 15%, #f7f7f7, #ccc); 
 box-shadow: #fff 0px 0px 2px 3px inset;
}
.comments-table td:first-child img:not(.icon) {
 height: 100px;
 border: 1px solid #ccc;
}
.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; 
}
.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;
}
.profile .contact .heading h4, .profile .table-section h4 {
  font-weight: normal;
}
.profile .contact, .profile .table-section, .profile .url-info {
    border: 0;
}
.profile .contact .inner, .profile .table-section .inner {
    border: grey 1px solid;   
}
.profile-info {
  border: 0;
  margin: 0;
  padding: 0;
}
.profile-info h3 {
  font-weight: normal;
  font-size: 13px;
  color: #000;
  margin: 0;
}
.profile h1 {
  letter-spacing: 0.3px;
  font-size: 14px;
  margin: 0;
}
.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;
}
.friends-grid a {
 color: #000000;
 font-weight: normal;
 font-size: 13px;
}
.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;
}
h1 {
   font-size: 28px !important;
 text-align: lef;
}
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 123 comments ( View all | Add Comment )

ray/lili	1759335701 usingggg Report Comment
Damien☆ ★ ✮ ★ ☆	1759293014 using Report Comment
лох пєдальний	1759175542 using Report Comment
AnwenRedlake	1759055121 Thx. <3 Report Comment
Jupiter !!	1759037561 tysm!! Using!! Report Comment
Werella	1758985978 Using! Report Comment
Werella	1758985977 Using! Report Comment
Werella	1758985935 Using! Report Comment
chillcubeguy	1758851858 using!! :D Report Comment
m0nst3rS0ph13	1758746589 using!! I like it! Report Comment
⌗ ⋮ caz ! (I <3 fall!)	1758720443 using! Report Comment
MeJeme'ye	1758616968 Using Report Comment
reigenrocks	1758480566 Using!! Report Comment
CR3AT0R	1758438808 using the ao3 emblems!! <3 Report Comment
Matty!!	1758332768 using!!!! ༼ つ ◕_◕ ༽つ Report Comment
maryay	1758037054 using! Report Comment
Martha💤	1757931841 Uzingg Report Comment
volt	1757904391 using Report Comment
kvitka 🌸📚	1757641777 usinggg Report Comment
𝓯𝓻𝓮𝓪𝓴𝔂 XØ𝔈𝔩𝔢🦇击 (𝔎𝔦𝔴𝔦𝔐𝔞𝔡𝔡𝔬𝔤'𝔰 𝔳𝔢𝔯𝔰𝔦𝔬𝔫)	1757625340 usin Report Comment