Y2k Aesthetic Layout

Tags: y2k, 2000s, anime, purple

Description:

A layout inspired by y2k aesthetic

Preview:

click on the image for a larger preview

Code:

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

<style>
.section {
    text-align: center;
}
.container {
    width: 950px;
    max-width: 100%;
    margin: 0 auto 10px;
}
h2 {
    font-size: 2.5em;
    margin: 0;
}
.online{
content:url(https://media.discordapp.net/attachments/783779926062268478/863162272897040404/on2.gif?width=125&height=48);
}
a {
    color: #f7f334;
    text-decoration: none;
}
.general-about .profile-pic img {
    max-width: 160px;
    max-height: 160px;
    border-radius: 25px;
    border: solid white 3px;
    border-right: solid 7px;
    border-bottom: solid 15px;
}
.profile .blurbs .section h4 {
    margin: 0;
    color: #33da97;
}
body {
   /* background: url(https://pbs.twimg.com/media/E5ZxOBsXwAAizJD?format=jpg&name=large); */
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    text-transform: lowercase;
    background-blend-mode: overlay;
    background-color: #25025d;
    font-family: 'Fredoka One', cursive;
}
nav {
    margin-bottom: 48px;
}
nav .top {
    background: #53263900;
    padding: 15px 10px 14px 10px;
    display: flex;
    color: black !important;
}
nav .top .center form {
    margin-top: -2px;
    width: 100%;
    color: white;
}
nav .links {
    background-color: #a2a2a2;
    padding: 3.5px 16px 5.5px 16px;
    text-align: center;
    position: fixed;
    top: 0px;
    left: 0;
    width: 100%;
    margin: 0px;
    z-index: 9;
}
nav .links a {
    text-decoration: none;
    color: white;
    font-size: 0.98em;
}
nav .top a {
    text-decoration: none;
    color: white;
}
nav .top .left .logo {
    width: 165px;
    height: 42px;
    position: fixed;
    top: 0px;
    left: 0;
    z-index: 10;
    border-radius: 6px;
    background-color: #a2a2a2;
    border: solid 6px #00000000;
    block-size: 66px;
}
nav .top {
    display: flex!important;
    opacity: 1!important;
    position: fixed;
    top: 0px;
    right: 0;
    padding: 6px;
    z-index: 10;
}
.profile .friends .person img:not(.icon) {
    max-width: 95px;
    max-height: 95px;
    display: block;
    border-radius: 22px;
    margin: 0 auto;
    border: solid white 3px;
    border-right: solid 7px white;
    border-bottom: solid 15px white;
}
.mood:after {
    content: url(https://media.discordapp.net/attachments/783779926062268478/864632650958635048/dismissysthing.png?width=350&height=120)
}
.profile .blurbs .heading, .profile .friends .heading {
    background: #f7f335;
    color: rgb(0 0 0 / 90%);
    padding: 2px 7px;
    border-radius: 40px;
}
.profile .friends .person p {
    color: #baddff;
    font-weight: bold;
    width: 100%;
    word-break: break-word;
    font-size: 100%;
    text-align: center;
}
.profile .friends .person {
    width: 105px;
    display: inline-block;
    padding: 5px;
    margin: 0 3px 10px 3px;
}
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
    background: #6d0fb9;
    color: white;
    padding: 2px 7px;
    border-radius: 0px 14px;
}
.details-table td:first-child {
    background: #ffdbdb00;
    color: #290973;
    font-weight: bold;
    width: 33%;
}
.details-table td {
    background: #000438;
    vertical-align: top;
}
.details-table td * {
    border-radius: 25px;
}
.profile .contact, .profile .url-info, .profile .table-section, .home-actions {
    width: 100%;
    border: 2px solid #ffffff;
    border-left: 11px solid;
    margin: 10px 0;
    border-right: 7px solid;
    border-radius: 0px 20px;
}
main, footer {
    background: #51007991;
    color: white;
    padding: 6px 6px;
    font-size: 75%;
    border-radius: 48px;
    border: solid white 6px;
    border-right: solid 13px;
    border-bottom: solid 30px;
}
.table-section:not(:last-child) .details-table tr td:first-child p {
    color: transparent !important;
    text-shadow: none !important;
    letter-spacing: -100px;
}
.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after {
    content: "general";
}
.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after {
    content: "musics";
}
.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after {
    content: "movies";
}
.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after {
    content: "tv";
}
.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after {
    content: "books";
}
.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after {
    content: "games";
}
.table-section:not(:last-child) .details-table tr:nth-child(7) td:first-child p::after {
    content: "music box";
}
.table-section:not(:last-child) .details-table tr:nth-child(8) td:first-child p::after {
    content: "random";
}
.details-table tr td:first-child p:after {
    color: white;
    letter-spacing: normal !important;
    filter: brightness(100%) !important;
}
main .left, main .right {
    padding: 10px;
}
@keyframes float { 
0% { transform: translate(0, 0px);
}
50% {
transform: translate(0, 10px);
}
</style>

<style>
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');
</style>

<style>

.comments-table td, .music-table td {
    background: #4b0d99c7;
    vertical-align: top;
}
.comments-table td:first-child, .music-table td:first-child {
    background: #5e0d9980;
    text-align: center;
    font-weight: bold;
    width: 38%;
}
.comments-table td:first-child img:not(.icon), .bulletin-table td:first-child img:not(.icon) {
    width: 130px;
    max-width: 100%;
    max-height: 200px;
    border-radius: 22px;
    margin: 0 auto;
    border: solid white 3px;
    border-left: solid 7px white;
    border-right: solid 15px white;
}
.profile-info {
    display: flex;
    background: #4912a0;
    align-items: center;
    justify-content: center;
    padding: 15px 5px;
    margin-bottom: 10px;
    background-size: 100% 100%;
    border-radius: 25px;
    border: solid white 4px;
    border-right: solid 8px;
    border-left: solid 18px;
}
.mood:before {
    background-image: url(https://media.discordapp.net/attachments/783779926062268478/863140205099220992/Animal-Crossing.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    height: 100px;
    width: 100px;
    content: " ";
    transform: rotate(-57deg) scale(2.2) translateX(-3.6em) translateY(-0.7em);
    position: absolute;
    z-index: -1;
}
.general-about:before {
    background-image: url(https://media.discordapp.net/attachments/783779926062268478/866673035481317386/Y2K_Aesthetic_Institute_BLM_on_Twitter.png?width=760&height=1333);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    height: 100px;
    width: 100px;
    content: " ";
    transform: rotate(0deg) scale(1) translateX(7em) translateY(-4.5em);
    position: absolute;
    z-index: 0;
    pointer-events: none;
}
.profile h1 {
    font-size: 7.2em;
    margin: 0 0 10px 0;
    font-family: 'Fredoka One', sans-serif;
    font-weight:normal;
    font-style:normal;
    text-shadow: 4px 4px #aa4dfe;
}
.profile .left h1:before {
    background-image: url(https://media.discordapp.net/attachments/783779926062268478/862928667385266206/y2ktest2.gif);
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    height: 108%;
    width: 100%;
    left: 0px;
    top: 0;
    content: " ";
    transform: scale(1);
    position: fixed;
    z-index: -1;
}
.profile .left h1:after {
    background-image: url(https://media.discordapp.net/attachments/783779926062268478/865057349009276928/jojo.gif);
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    height: 26%;
    width: 100%;
    left: 0px;
    bottom: 0px;
    content: " ";
    transform: scale(1);
    position: fixed;
    z-index: -3;
}
iframe {
    border-radius: 0px 35px !important;
    opacity: 95%;
}
</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 13 of 13 comments ( View all | Add Comment )

bonnie	1699863130 using!!! Report Comment
* ˚ ✦ Marle * ˚ ✦	1687023330 using!! so cuteee Report Comment
-tjz-	1686306199 i'll be using this, thank yoU! Report Comment
chiitopia	1686181914 using !! Report Comment
eurofox	1678669771 fire!!!!! Report Comment
curly	1678394483 using!!! ALL LOVE <3 Report Comment
Veezy Vanzai	1658027136 OMG, this is amazing Report Comment
riri	1647541497 literally too good Report Comment
ceejaytwoyoshi	1644213040 this layout goes so hard Report Comment also how do I add text to the music box and the other table sections? I'm not sure how to edit it in. I also want to know if it's okay to modify the layout a bit. like change the text, change the pics, change the color scheme, stuff like that. by ceejaytwoyoshi; 1644216668; Report
cass <3	1637456393 love this layout Report Comment
Pobbus	1637189522 nice dy plug - pobbus Report Comment
cooldude94	1628789289 Really cool! Report Comment
nenkaii	1628458574 lovely layout!!!!! Report Comment