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 insomniac (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 24 comments ( View all | Add Comment )

MrReinraus	1738319739 using Report Comment
Mia	1738207858 using Report Comment
Rory	1738011181 using!!!! Report Comment
✧Nova✧	1737922246 Using Report Comment
raymond	1737606917 using:3 Report Comment
Olive	1737506867 this is so funny and literally genius im in loveee Report Comment
dove	1737340808 using i love you Report Comment
carbyn / 羨望の星	1737337389 this is so cool what the flip using Report Comment the pfp is so reall by Olive; 1737506837; Report
A✶✶✶	1736663719 usingnng!!! Report Comment
kyros	1735975180 using! Report Comment
yhan !!	1735966384 using Report Comment
karizma	1735593578 using! Report Comment
Mikael 🐀🌕/📼🪱	1735495016 USANDO Report Comment
gunkingfella	1735410595 using >w< Report Comment
JAIM3 MICH3LL3	1735378949 Using tysm it’s so cute!: Report Comment
jeare ★	1734881791 this is so cool omfg.. USINGG Report Comment
soso	1734787737 using!!! Report Comment
-[OIiver/Arata]-	1734744237 i'm not going to use it but this is so cool Report Comment
crazyblue	1734705690 this is so cool omg Report Comment
⊹ ׁ݂ ꒰꒰ ˸ aceeee >< ⋅꒷	1734674111 usingg Report Comment