persona 5 layout

Tags: persona 5, layout, red, simple

Description:

i just made this to preserve my old layout...use it if you want no credits needed

some things to know:

•i changed the names of all the interest boxes, the "about me" blurb and the "who i want to meet" blurb. the codes for both are located under the "paste in about me" section after the overall layout code.

•there is a image marquee + a image scrollbox in the "about me" section

•there's a scrollbox in the "heroes" section, its titled "image scrollbox"

•there is an autoplay music code under the "who i want to meet" section in the code

thats it, hope you like this layout ^_^

(edit 10/10) okay...i edited some things in the description and the code to make it easier to read, hope that helped...but wow, i honestly forgot about this layout. i only remembered it when someone commented on this...ok idk what else to say here

(edit 10/11) added the screenshot! sorry its only showing the layout partially...at least you have a preview of what it looks like overall though

Preview:

click on the image for a larger preview

Code:

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

paste in "about me"



<style>
body::before {
content: " ";
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.55) 50%);
z-index: 2;
background-size: 100% 2px, 3px 100%;
pointer-events: none;
}
.logo {
filter: sepia(100%) hue-rotate(221deg) saturate(0);

<style></style>
<style>
body {
 margin:0;
background-image: url(https://www.1999.co.jp/itbig50/10504295a_m.jpg);
background-attachment: fixed;
}
.top, .links, .heading, footer, button {
   background-color: #d92323!important;
}
<style></style>
<style>
.profile {
  background-color: #ffffff;
  color: #d92323;
  border: 1.5px solid #d92323;
  box-shadow: 0px 30px 30px #d92323;
<style></style>
<style>
main:before {
    width: 400;
    margin-bottom: 0px;
    border: 1px solid #d92323;
    height: 99px;
    display: block;
    content: "";
    box-shadow: 0px 40px 40px #d92323;
    background-image: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/1ea6f614-138b-41d0-bfbd-1a9b3ae38c5a/dbxhuia-c0154b0d-e1d8-48a3-bb93-5b9e6ca912e5.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzFlYTZmNjE0LTEzOGItNDFkMC1iZmJkLTFhOWIzYWUzOGM1YVwvZGJ4aHVpYS1jMDE1NGIwZC1lMWQ4LTQ4YTMtYmI5My01YjllNmNhOTEyZTUuanBnIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0._4g288sczU-2rrylVWckdzxrP8SEpXGRjSq0VUaVWo8);
    background-position: 90% 10%;
    background-size: cover;
<style></style>
<style>
.online {
    color: #d92323;
}

.online img {
   content: url("https://gifcity.carrd.co/assets/images/gallery01/00fed20f.gif?v=5bf8fcf7");
    animation-name: nyaah;
<style></style>
<style>
nav .top {
    display: block;
    background-color: transparent;
}
nav .links {
    display: block;
    background-color: #d92323;
    font-family: monospace;
    font-weight: 400;
    font-size: 12px;
    text-align: center;
<style></style>
<style></style>
<style>
nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
    content: "";
<style></style>
<style>
.profile .blurbs .heading, .profile .friends .heading {
    display: block;
    background-color: #d92323;
    color: #d92323
}

.profile .blurbs .inner h4 {
    color: #d92323;
    font-weight: 700;
}

.profile .blurbs .inner {
    font-family: monospace;
<style></style>
<style>
a {
    color: #d92323;
}

a:hover, .count {
    color: #d92323;
    font-style: italic;
    text-decoration: none;
<style></style>
<style>
table.details-table {
    background-color: #d92323;
    border-color: #d92323;
}

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

.details-table td:first-child {
    background: #d92323;
    border-color: #d92323;
    color: #d92323;
    font-family: monospace;
    font-size: 11.5px;
    font-weight: 400;
}
.details-table td:first-child a {
   border-color: #d92323;

<style></style>
<style>
.profile .table-section {
    background-color: #d92323;
    border-color: #d92323;
}

.profile .table-section .heading {
    display: block;
    background-color: #d92323;
<style></style>
<style>
.profile .contact .heading {
    background-color: #d92323;
    border-color: #d92323;
}
<style>
.profile .table-section .heading {
    background-color: #d92323;
    border-color: #d92323; !important
<style></style>
<style>
profile .url-info, .profile .contact {
    border-color: #d92323;
<style></style>
<style>
.profile .url-info, .profile .contact {
    border-color: #d92323;
</style>
<style>
.comments-table td:first-child {
   background-color: #ffffff;
   border-color: #d92323;
}

.comments-table td:first-child a {
    color: floralwhite;
    font-family: 'Lekton';
    font-weight: 400;
    font-size: 12px;
}

.comments-table td {
    background-color: #ffffff; 
    font-size: 11px;
}

.comments-table td a {
    color: #d92323;
}

.comment-replies {
    border-color: #d92323;
}

<style></style>



  <style>/* color/style of borders around tables on the left */
.profile .contact, .profile .table-section, .profile .url-info {
  border: 0px solid #ffffff;
}

/* colors for the table headings on the left */
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
  background-color: #ffffff;
  color: #d92323;
}

/* colors for table cell background (by default spacehey has a separate color for :first-child) */
.profile .table-section .details-table td {
  background-color: #ffffff;
  color: #d92323;
}</style>


<style>

table, th, td {

  border: 0px solid;

     }

:root {

  --topic1: "interest box 1";
  --topic2: "interest box 2";
  --topic3: "interest box 3";
  --topic4: "interest box 4";
  --topic5: "interest box 5";
  --topic6: "image scrollbox";

 }

.table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.details-table tr td:first-child p::after{
    
    
color:var(--links) !important;
letter-spacing:normal !important;
text-shadow: 2px 2px #d92323!important;
filter: brightness(95%) !important;
   
   
}
.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{
  content: var(--topic1);
}
.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{
  content: var(--topic2);
}
.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{
  content: var(--topic3);
}
.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{
  content: var(--topic4);
}
.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{
  content: var(--topic5);
}
.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{
  content: var(--topic6);
}</style>

<style>
.blurbs .inner .section:first-of-type h4{
	font-size:0;
}
.blurbs .inner .section:first-of-type h4:after{
	content:"about me blurb";
font-size:.8rem;
}
.blurbs .inner .section:last-of-type h4{
font-size:0;
}
.blurbs .inner .section:last-of-type h4:after{
content:"who i want to meet blurb";
font-size:.8rem;
}
</style>







*insert your disc here


<img src="https://gifcity.carrd.co/assets/images/gallery38/c864cd01.gif?v=5bf8fcf7"/>

<marquee behavior="scroll" direction="left">  <img src="https://s1.zerochan.net/Ensemble.Stars%21.600.2065830.jpg" width="160" height="200"/>

<img src="https://static.wikia.nocookie.net/hypnosis-mic/images/a/ae/Fpm_volume_1_limited_cover.jpg/revision/latest?cb=20230314124106" width="150" height="200"/>

<img src="https://i.pinimg.com/736x/db/28/bf/db28bf3f17434ffaa4983a08a6ae023b.jpg" width="150" height="200"/>

<img src="https://i.pinimg.com/736x/9b/8e/27/9b8e27a8583c67a1c4134fb23eb557c5.jpg" width="150" height="200"/>

<img src="https://i.pinimg.com/736x/bc/cb/ac/bccbac3ed0afd345d7fb55ce9e4050dd--comic-book-image.jpg" width="160" height="200"/>

</marquee>





<img src="https://gifcity.carrd.co/assets/images/gallery38/c864cd01.gif?v=5bf8fcf7"/>

<marquee behavior="scroll" direction="left">marquee + image scrollbox</marquee>

<div style="width: 460px; height: 300px; background-color: white; border-color: #white; border-width: 1px; border-style: none; color: #000000; font-size: 11px; overflow: auto;"><p> 

<img src="https://static.zerochan.net/Aimono.Jyushi.full.3087661.png"/>

<img src="https://static.zerochan.net/Arisugawa.Dice.full.3080824.png"/>

<img src="https://static.zerochan.net/Amemura.Ramuda.full.3080818.png"/>

<img src="https://64.media.tumblr.com/120b193704d1c8f8750ceb4f4a680467/b93fdd11bd05d054-0d/s1280x1920/4f16853ff5525d3afa1b591007d5a54778e64667.png" alt="giphy-2" width="400" height="400" class="giphy-embed"/>

<img src="https://64.media.tumblr.com/ec5af054175b13e9bbfcace3b1e4b4a0/83d958c831a40bde-c6/s540x810/241070020c0b08f578440fda281f8e1c9cb97d3a.png" alt="giphy-2" width="400" height="400" class="giphy-embed"/>

<img src="https://preview.redd.it/twisted-wonderland-line-stickers-but-with-me-instead-xd-i-v0-t4buqh629jg81.png?width=512&format=png&auto=webp&s=878f35f9851ef2cdc26e355a431d7a904776a7aa" alt="giphy-2" width="400" height="400" class="giphy-embed"/>

<img src="https://static.wikia.nocookie.net/megamitensei/images/d/da/Q2_P5HeroSchool_NoGradient.png/revision/latest?cb=20180901210539" alt="giphy-2" width="190" height="400" class="giphy-embed"/>

<img src="https://static.wikia.nocookie.net/megamitensei/images/d/df/PQ2_Futaba_Sakura.png/revision/latest?cb=20180901214125" alt="giphy-2" width="230" height="400" class="giphy-embed"/>

</p></div>

<img src="https://gifcity.carrd.co/assets/images/gallery38/c864cd01.gif?v=5bf8fcf7"/>













autoplay music (paste in "who i want to meet")




<iframe width="0" height="0" src="https://www.youtube.com/embed/YOURLINK?si=am7lpHoi-WbptOXZ?si=_kZnERSIAxDL6eBD//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">
</iframe>









paste in heroes box



<div style="width: 190px; height: 200px; background-color: white; border-color: #white; border-width: 1px; border-style: none; color: #000000; font-size: 11px; overflow: auto;"><p>

<img src="https://i.pinimg.com/736x/01/5b/de/015bde295a7b79d787ec70d4b128c7ea.jpg" alt="giphy-2" width="200" height="200" class="giphy-embed"/>

<img src="https://i.pinimg.com/736x/e0/fd/f6/e0fdf6c7863c87eee1e78d5c3640972e.jpg"/>

<img src="https://i.pinimg.com/736x/ea/4c/c6/ea4cc62e734bd91176f4f3d60b684cc2.jpg"/>

<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQuu-UBF1zyzJALTGwUHYAXQy_eQEXXxmRhzQ&usqp=CAU"/>

<img src="https://i.pinimg.com/736x/68/2d/cb/682dcba0d52329ceecac1d060861e562.jpg"/>

<img src=""/>

<img src="https://kingeshop.jp/hypnosismic/assets/images/flingposse-black.png" width="200" height="185" class="giphy-embed"/>

</p></div>

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 1 of 1 comments ( View all | Add Comment )

kao ୨ৎ

1728237791

usingg!! (w light modifications)

Report Comment

ty for using! nice goro pfp by the way

if u need help with modifying anything just lmk!

by subai; 1728325771; Report