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 Pão_Com_Manteiga (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 15%, #750000, #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 71 comments ( View all | Add Comment )

JohnLennonstan/sam	1749029393 using!! Report Comment THE BEATLES STAN IN THE WILD by jeare ★; 1750203210; Report
XxPiercedPrincessxX	1748847794 using tyyyy Report Comment
Ih4te3very1	1748713028 using. Report Comment
jo clovery	1748626230 using !! Report Comment
n e o	1747923176 usandoo Report Comment
Lily	1747617027 using!! 3 Report Comment
Lily	1747617027 using!! 3 Report Comment
☆ Molly! ☆	1747589367 using! Report Comment
lly, cowboy fora da lei	1746334803 usando! Report Comment
HELL \|\| CEO of Follyfriend	1746244906 using!! Report Comment
Tory on High!	1745703080 using! Report Comment
Kriss🍒	1745547708 Using part of the it!!! Report Comment
☆Lucifur☆	1745416193 Usingg <3 Report Comment
yoyaz	1745017811 usando ! Report Comment
Applz	1744385916 using Report Comment
♱ 𝖑𝖎𝖊𝖉𝖘𝖔𝖓𝖟 !	1744010582 using Report Comment
lilgutz	1743893755 omg this is amazing Report Comment
perchasius	1743331177 using!!! Report Comment
ヤミ☆なれ	1743078958 using :3 Report Comment
gramaryegrrl	1743044966 using!! Report Comment