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...)

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Artistic_Hyperbole (https://layouts.spacehey.com/layout?id=105684) -->

<style>
img.logo{
content: url("https://files.catbox.moe/33uet9.png");
width: 195px !important;
height: 45px !important;
    filter: brightness(0.9); !important;
</style>

<style>
    .container{
        width: 1500px;
    }
</style>

<style>

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

body {
 background: #f7f7f7; 
}

@import url('https://external-media.spacehey.net/css/sB304O2vpFbPXgQccgTi9C-NXf0cRq9b4_td9lkPW_VI=/https://fonts.googleapis.com/css2?family=Merriweather:wght@300&display=swap');
* {
 font-family: 'Merriweather';
    -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: 0;
 text-align: center;
}

nav .links a {
  color: #fff;
  text-shadow: grey 0px 2px 4px;
  padding: 1px
}

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;
}

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: 1px solid #000;
 border-radius: 3px;
 padding: 2px;
} 

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

/* Nav Top */

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

</style>

<style>

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

</style>

<style>
.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; 
}
</style>





<style>

.details-table td {
  background-color: #f7f7f7;
  color: #000;
} 

.details-table td:first-child {
  text-align: center;
  width: 30%;
  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;
}
</style>

<style>
.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;
}

</style> 

<style>
.heading {
   background-color: #d9d9d9 !important;
}
h1 {
   font-size: 28px !important;
 text-align: right;
}
h4 {
   color: #0f0f0f !important;
}
.contact, .url-info, .table-section, .profile-info {
   border-color: #868686 !important;
}
td {
   background-color: white !important;
}
</style>

<style>
.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;
}
</style>

<style>
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;

}
</style>

<style>
footer 
{
background: none !important;
}
footer .links 
{
background: none !important;
}
main 
{
background-color: #fff;
position: relative;
height: 100%;
float: right;
float: right !important;
padding-left: 22%;
}
h1, h2, h3, h4, h5, h6 
{
color: #000 !important;
}
.contact 
{
position: absolute;
top: 0 !important;
left: 0 !important;
height: 99.6% !important;
width: 20% !important;
display: table !important;
}
.contact .inner 
{
border: none !important;
}
.contact .heading 
{
width: 100%;
}
.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;
}

</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 95 comments ( View all | Add Comment )

doodleOcean!	1755483101 using!! Report Comment
Yzᥲρog — ちょっとした秘密	1755294745 using Report Comment
Empire of Delilah	1755292244 DEFINITELY USING!!! C; Report Comment
Narcoticsaremypastime	1755152760 YOU ALREADY KNOW I'M USING THIS Report Comment
Spooky	1754718946 USINGGG !!!! Report Comment
Antonio	1754687610 USINGGGGG Report Comment
Evan	1754596382 USING Report Comment
Sheena⁠.⁠｡⁠*৻ꪆ	1754119549 USING Report Comment
abbi	1754069361 USING THIS PEAKNESS Report Comment
Ichimatsu	1753873772 USING!!!!!! THX FOR THE LAYOUT!!!!!!!!! Report Comment
Zander 🎧	1753820315 USINGGGG Report Comment
Camila	1753763172 Using!! Report Comment
Kn1ght.Ch4meleon	1753440391 ahh using this hehe! Report Comment
max	1753439125 usin Report Comment
danathefathippo	1753120887 super using this cutesy layout!!!! Report Comment
Masonzzz	1752906957 Using!! :D Report Comment
John 🎸🪗/=w=/<?>	1752798860 Using!! Report Comment
☆ Isa!	1752527550 Using! Report Comment
yul	1752399915 using Report Comment
BrambleBerry	1752387421 using :3 Report Comment