Persona 3 layout [needs to be redone again]

Tags: persona 3
Description:

the codes are being dumb, i’ll need to fix them this is for my silly friend feel free to use tho comment if using :3 creds to Poble for the base layout [updated the codes, they were being dumb, comment if something goes wrong]
Preview:

click on the image for a larger preview
Code:

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

<style>
/*Font: Libre Franklin*/
@import url("https://external-media.spacehey.net/css/sbBtDTZ4drWl6yoAQ2BdoCxGug_-BXrotoHsq4B_mTY0=/https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
/*Base colors*/
:root {
  --logo-blue: #1a95ff;
  --darker-blue: #0060b3;
  --lighter-blue: #004580;
  --even-lighter-blue: #4dadff;
  --lightest-blue: #7dadf5;
  --dark-orange: #80c4ff;
  --light-orange: #00294d;
  --even-lighter-orange: #404040;
  --green: #38d;
}
/*Moon cursor. It only works on desktop*/
* {
  cursor: url(https://external-media.spacehey.net/media/srdR5wg1p_rbiv04-Z6LWkQuz0CkT-79P88LXeluPAUg=/https://cur.cursors-4u.net/nature/nat-6/nat598.cur), auto !important;
}

/*General body styles*/
body {
  font-family: "Libre Franklin", sans-serif;
  font-weight: 500;
  background-image: url(https://external-media.spacehey.net/media/s99BOwxImiKN3fI2O7z3z9ZDtvFvO4ndxv-jK5DnOqbg=/https://www.rpgfan.com/wp-content/uploads/2020/03/Persona-3-Portable-Featured.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
main {
  border-radius: 0 0 15px 15px;
  background: var(--dark-orange);
  color: var(--light-orange);
}

.container {
  border-radius: 15px 15px 0 0;
  overflow: hidden;
  margin-top: 30px;
  padding: 10px;
}

footer {
  border-radius: 15px;
  background: var(--dark-orange) !important;
  display: block !important;
}

.logout-btn{
  font-family: "Libre Franklin", sans-serif;
  font-weight: bold;
}

.profile .blurbs .section h4 {
    margin: 0;
    color: var(--light-orange);
}

button{
    background-color: var(--lighter-blue);
    color: white;
    border-color: transparent;
   font-weight: bold;
}


/*Navbar*/
nav {
    border-radius: 15px 15px 0 0;
    overflow: hidden;
  }
  

/*Username*/
.profile h1 {
  font-size: 2rem;
}

/*Blog links*/
.blog-preview p {
  font-size: 1.2rem;
  font-weight: 600;
  padding: 5px 10px;
  color: var(--light-orange);
  font-size: 1rem;
  font-weight: bold;
}

/*Rounded profile pics*/
.profile-pic {
  border-radius: 500px;
  overflow: hidden;
}

.profile .friends .person img {
  border-radius: 500px;
  overflow: hidden;
}

/*Counters*/
span.count,
.details-table td:first-child {
  color: var(--darker-blue);
}

/*Section headings*/
.heading {
  background-color: var(--lighter-blue) !important;
  color: white !important;
}

/*Links*/

a {
  transition: 0.2s ease;
}

a:hover {
  color: var(--light-orange) !important;
  text-decoration: none;
}


.heading a{
    color: white;
  }

/*Table styles*/
table,
td,
tr {
  border-color: var(--light-orange);
  border-collapse: collapse;
}

.profile .contact,
.profile .url-info,
.profile .table-section,
.home-actions {
  border: none;
}
/*Details table*/

table.details-table {
  border-collapse: collapse;
  border: 1px solid var(--light-orange);
}

table.details-table td {
  background-color: var(--even-lighter-blue) !important;
  border: 1px solid var(--light-orange);
}

/*Comments section*/
.comment-replies {
  border-color: var(--light-orange);
  border-width: 1px;
  margin: 5px;
  background-color: var(--dark-orange);
}

table.comments-table td {
  background-color: var(--even-lighter-blue) !important;
  border-color: var(--light-orange);
  border-width: 1px;
}

.comments-table td:first-child img {
  width: 80px;
  border-radius: 500px;
}

/*"Online" text and filter for color change*/
.online {
  color: var(--light-orange);
  font-weight: bold;
  font-size: 95%;
}

p.online img {
  filter: brightness(0) invert(9%) sepia(45%) saturate(6290%) hue-rotate(194deg)
    brightness(90%) contrast(101%);
}
</style>






<style>main:before {
	width: 100%;
	height: 125px ;
	display: block;
	content: "";
	background-image: url('https://media.discordapp.net/attachments/1178501934500548668/1178566231423471667/ezgif-3-62d7d235b0.gif?ex=660a4456&is=65f7cf56&hm=7c9ba651111e681f23949c756a3f53fc6773dcf2944e68082fa6467fed3c41cc&=&width=1056&height=482');
	background-position: center center;
	background-size: cover;
}
@media only screen and (max-width: 600px) {
	main:before{
		height: 200px;
	}
}</style>






<style>
/* contact icons */
.contact .inner a img {
font-size: 0;
}
.contact .inner a img:before {
font-size: 1em;
display: block
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
/* add to friends */
max-width: 16px;
max-height: 16px;
content: url(https://media.discordapp.net/attachments/1178501934500548668/1178580340030308432/Gekkoukan_high_school_emblem_by_angelicshadow88-d32f43d_3_5.png.webp?ex=660a517a&is=65f7dc7a&hm=bc8edc45f76eedcc783bcf1fad8755d020cfa378ae70afb42a4aee760adcbd62&=&width=74&height=74);
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: url(https://media.discordapp.net/attachments/1178501934500548668/1178580340277784616/flat_750x_075_f-pad_750x1000_f8f8f8__3_-removebg-preview_5.png.webp?ex=660a517a&is=65f7dc7a&hm=861ecacc0984a223ba80f002c6a2f775938544703dd0cf47f2469f9193cfe4fb&=&width=44&height=58);
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: url(https://media.discordapp.net/attachments/1178501934500548668/1178580340030308432/Gekkoukan_high_school_emblem_by_angelicshadow88-d32f43d_3_5.png.webp?ex=660a517a&is=65f7dc7a&hm=bc8edc45f76eedcc783bcf1fad8755d020cfa378ae70afb42a4aee760adcbd62&=&width=74&height=74);
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: url(https://media.discordapp.net/attachments/1178501934500548668/1178580340277784616/flat_750x_075_f-pad_750x1000_f8f8f8__3_-removebg-preview_5.png.webp?ex=660a517a&is=65f7dc7a&hm=861ecacc0984a223ba80f002c6a2f775938544703dd0cf47f2469f9193cfe4fb&=&width=44&height=58);
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: url(https://media.discordapp.net/attachments/1178501934500548668/1178580340030308432/Gekkoukan_high_school_emblem_by_angelicshadow88-d32f43d_3_5.png.webp?ex=660a517a&is=65f7dc7a&hm=bc8edc45f76eedcc783bcf1fad8755d020cfa378ae70afb42a4aee760adcbd62&=&width=74&height=74);
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: url(https://media.discordapp.net/attachments/1178501934500548668/1178580340277784616/flat_750x_075_f-pad_750x1000_f8f8f8__3_-removebg-preview_5.png.webp?ex=660a517a&is=65f7dc7a&hm=861ecacc0984a223ba80f002c6a2f775938544703dd0cf47f2469f9193cfe4fb&=&width=44&height=58);
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: url(https://media.discordapp.net/attachments/1178501934500548668/1178580340030308432/Gekkoukan_high_school_emblem_by_angelicshadow88-d32f43d_3_5.png.webp?ex=660a517a&is=65f7dc7a&hm=bc8edc45f76eedcc783bcf1fad8755d020cfa378ae70afb42a4aee760adcbd62&=&width=74&height=74);
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: url(https://media.discordapp.net/attachments/1178501934500548668/1178580340277784616/flat_750x_075_f-pad_750x1000_f8f8f8__3_-removebg-preview_5.png.webp?ex=660a517a&is=65f7dc7a&hm=861ecacc0984a223ba80f002c6a2f775938544703dd0cf47f2469f9193cfe4fb&=&width=44&height=58);
}   
</style>







<div style="float:  ; max-height: 400px; position: fixed; right: 1px; bottom: 9px; z-index: 200;">
<img src="https://media.discordapp.net/attachments/1178501934500548668/1178502248184156200/image.png?ex=660a08bf&is=65f793bf&hm=05f18d8241b881772ae5459c4d53c7c3fc63816a072fed8e826dbffd327b59da&=&width=664&height=876" width="200" height="200"/></div>





<style>
  .top > .left > a > .logo {
    display: none;
  }
  .top .left a {
    content: url(https://media.discordapp.net/attachments/1178501934500548668/1178572894561894432/i-redrew-the-p3r-logo-in-3200x1920-after-upscaling-i-v0-ohx2npvc1tnb1-removebg-preview_2-removebg-preview.png?ex=660a4a8a&is=65f7d58a&hm=dcd108ccba82758649309874285449748cda919e7990a9a89e690a6f4885b2d0&=&width=840&height=578);
    height: 50px;
    width: 165px;
    display: inline-block;
  }
}
</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 2 of 2 comments ( View all | Add Comment )
PurpleOctoCosplay
1710150004
Using!
Report Comment
w00mz
1701113555
using
Report Comment