FAITH Layout (FINISHED AS OF 07/24/2024)

Tags: faith, faith the unholy trinity, red, black, cross

Description:

A layout for FAITH: The Unholy Trinity by Airdorf Games. This is a work in progress, also, I'm trying to get a gif pfp that might work for the layout (that doesn't go under it), any suggestions to fix this will most definitely help. The logo for the game is the home button in case anyone wants to know without having to click the back button on their browsers. I haven't checked to see if this is mobile friendly. KNOWN SOURCES FOR ASSETS:
Red Frame for Profile Picture Scanline effect to make it more "authentic" to FAITH Main stuff I used for this layout can be found here All FAITH assets come from here

...Or here if you feel so inclined. ;) IF YOU ARE GOING TO USE THIS LAYOUT, PLEASE COMMENT "USING"! THIS IS ONLY BECAUSE I'D LIKE TO SEE WHAT YOU DO WITH IT!!! :D

And yes folks.. We finally did it. We FINALLY got the gif pfp working!!!! (At least on PC, I think.)

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by jules ˚. ୭ 📕 (https://layouts.spacehey.com/layout?id=101802) -->

<!-- ONCE AGAIN, THE ONLY REASON THIS LAYOUT NO LONGER WORKED WAS BECAUSE JULES WAS USING DISCORD FOR THE ASSETS LIKE A DUMBASS! BUT HERE IT IS REWORKED, ENJOY. <3-->
<!-- ALSO ONE LAST NOTE, BE SURE TO PUT THE GIF PFP IN ANOTHER SLOT BECAUSE FOR SOME REASON IT MAKES THE FONT STOP WORKING. SAME COULD POSSIBLY SAID FOR THE FRIENDS THING. -->
<style>
@import url(https://db.onlinewebfonts.com/c/2545d122b16126676225a5b52283ae23?family=VCR+OSD+Mono);
</style>
<style>
*, .logout-btn {
font-family: "VCR OSD Mono"; 
}
h1, h4, a {
  text-transform: uppercase;
}
:root {
  --light-gray: #000;
  --gray: #000;
  --dark-gray: #919191;
  --darker-gray: #545454;
  --logo-blue: #000000;
  --darker-blue: #FF0000;
  --lighter-blue: #ff0000;
  --even-lighter-blue: transarent;
  --lightest-blue: transparent;
  --red: #FF5151;
  --dark-orange: #e87000;
  --light-orange: #ff0000;
  --even-lighter-orange: #09ff52;
  --strange-yellow: #dbae2e;
  --green: #34D399;
  --light-green: #E6F8DD;
  --medium-green: #A0C99C;
  --dark-green: #059669;
  accent-color: #1D4ED8;
  accent-color: var(--logo-blue);
}
main {
background:transparent;
color:white;
}
body {
background:black;
}
.container {
width:1000px;
}
nav .top .left {
  text-align: center;
}
element {
}
nav .links, footer .links {
  margin: 0;

  list-style: none;

  text-align: center;

}
nav .links {
  background-color: var(--logo-blue);
  text-align:center;
}
nav .links a:hover {
  text-decoration: underline;
  color: white;
}
nav .top .left a::before {
 content:url("https://img.itch.zone/aW1nLzEwMzIzNTcwLnBuZw==/original/9Us4Dm.png")
}
nav .top .left .logo {
  display:none;
}
nav .top {
  flex-direction: column;
}
nav .top .right {
  text-align: center;
}
nav .top .center {
  display:none;
}
nav::before {
  content: "WHAT I'M ABOUT TO DO HAS NOT BEEN APPROVED BY THE VATICAN.";
  word-spacing: 730%;
  text-align: center;
}
.profile .contact, .profile .url-info, .profile .table-section, .setting-section, .home-actions {
  border: 5px solid var(--lighter-blue);
}
.profile .contact .heading, .profile .table-section .heading, .setting-section .heading, .home-actions .heading {
  background: none;
}
.comments-table td:last-child {
  border: 5px red solid;
  background: none;
}
.comments-table td:first-child {
  border: none;
}
.comments-table {
  border:none;
}
footer p {
  color: var(--dark-orange);
} 
a:hover {
  color: var(--lighter-blue);
}
.online {
  content: url('http://www.myspacegens.com/images/online_now/onlinenow.gif');
}
.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 */
content: url("https://files.catbox.moe/nqi55e.png")
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: URL("https://files.catbox.moe/i7pquu.png")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: url("https://files.catbox.moe/shi0ww.png")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: url("https://files.catbox.moe/nqi55e.png")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: url("https://files.catbox.moe/i7pquu.png")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: url("https://files.catbox.moe/shi0ww.png")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add to group  */
content: url("https://files.catbox.moe/nqi55e.png")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report user */
content: url("https://files.catbox.moe/i7pquu.png")
}
</style>
<style>* {cursor: url(https://files.catbox.moe/shi0ww.png), auto !important;}</style>

<style>
.noise {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
z-index: 400;
opacity: 0.8;
pointer-events: none;
opacity: 1;
z-index: 450;
}

.noise:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('https://ice-creme.de/images/background-noise.png');
pointer-events: none;
will-change: background-position;
animation: noise 1s infinite alternate;
}

.lines {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
z-index: 300;
opacity: 0.6;
will-change: opacity;
animation: opacity 3s linear infinite;
}

.lines:before {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
pointer-events: none;
background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .5) 51%);
background-size: 100% 4px;
will-change: background, background-size;
animation: scanlines 0.2s linear infinite;
}

.main {
}

.main .noise:before {
background-size: 170%;
}

.main .vhs {
position: absolute;
left: 2rem;
top: 2rem;
will-change: text-shadow;
animation: rgbText 2s steps(9) 0s infinite alternate;
}

.main .vhs .char {
will-change: opacity;
animation: type 1.2s infinite alternate;
animation-delay: calc(60ms * var(--char-index));
}

.main .time {
position: absolute;
right: 2rem;
top: 2rem;
will-change: text-shadow;
animation: rgbText 1s steps(9) 0s infinite alternate;
}

.main .glitchtext {
will-change: text-shadow;
animation: rgbText 1s steps(9) 0s infinite alternate;
}

@keyframes noise {
0%,
100% {
background-position: 0 0;
}
10% {
background-position: -5% -10%;
}
20% {
background-position: -15% 5%;
}
30% {
background-position: 7% -25%;
}
40% {
background-position: 20% 25%;
}
50% {
background-position: -25% 10%;
}
60% {
background-position: 15% 5%;
}
70% {
background-position: 0 15%;
}
80% {
background-position: 25% 35%;
}
90% {
background-position: -10% 10%;
}
}

@keyframes opacity {
0% {
opacity: 0.6;
}
20% {
opacity: 0.3;
}
35% {
opacity: 0.5;
}
50% {
opacity: 0.8;
}
60% {
opacity: 0.4;
}
80% {
opacity: 0.7;
}
100% {
opacity: 0.6;
}
}

@keyframes scanlines {
from {
background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .5) 51%);
background-size: 100% 4px;
}
to {
background: linear-gradient(to bottom, rgba(0, 0, 0, .5) 50%, transparent 51%);
background-size: 100% 4px;
}
}

@keyframes rgbText {
0% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
}
25% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
}
45% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);
}
50% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);
}
55% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 3px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
}
90% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);
}
100% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);
}
}

@keyframes type {
0%,
19% {
opacity: 0;
}
20%,
100% {
opacity: 1;
}
}
</style>
<div class="lines"></div>
<div class="main">
<div class="noise"></div>

<style>
.rgbtxt {
animation: rgbText 1s steps(9) 0s infinite alternate;
animation-name: rgbText;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

@keyframes rgbText {
0% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
}
25% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
}
45% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);
}
50% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);
}
55% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 3px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
}
90% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);
}
100% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);
}
}

</style></div>
<style>
        .general-about .profile-pic .pfp-fallback {
            border: 2px solid #000000;
            box-shadow: 0px 0px 0px 4px #fa0000, 0px 0px 0px 6px #000000;
            font-weight: 400;
            font-family: 'pixelmplus10', sans-serif;
            image-rendering: optimizeQuality;
            color: #000000;
            background-color:#000000;
            text-align: center;
            display: block;
            justify-content: center;
            margin-left: 6px;
</style>

<!-- REMEMBER TO DIVIDE THIS IN ANOTHER PART, LIKE IN YOUR INTERESTS BOX OR SOMETHING. -->
<style>
/* gif of John as your pfp */
.profile-pic > img { display:none; }
.profile-pic:after { background-image: url("https://files.catbox.moe/edc8gh.gif"); display: inline-block; content:"" }
.general-about .profile-pic:after { background-size: cover; width: 160px; height: 154px; } 
.profile-pic:after{ top: -153px; position: relative; left: 5px;
 } 
</style>
<style>

.profile .friends .person:first-child img:not(.icon){
content:url(https://static.wikia.nocookie.net/airdorf/images/b/ba/AmyCH3Cleansed.gif/revision/latest?cb=20221207211508);
}
.profile .friends .person:nth-child(2) img:not(.icon){
content:url(https://static.wikia.nocookie.net/airdorf/images/2/2f/FatherAllred.png/revision/latest?cb=20221024092544);
}
.profile .friends .person:nth-child(3) img:not(.icon){
content:url(https://static.wikia.nocookie.net/airdorf/images/6/6d/GarciaIdle.gif/revision/latest?cb=20221210052938);
}
.profile .friends .person:nth-child(4) img:not(.icon){
content:url(https://static.wikia.nocookie.net/airdorf/images/c/c1/GaryUnhooded.gif/revision/latest?cb=20221207213108);
}
.profile .friends .person:nth-child(5) img:not(.icon){
content:url(https://static.wikia.nocookie.net/airdorf/images/b/b2/Lisa_gif.gif/revision/latest?cb=20221022040525);
}
.profile .friends .person:nth-child(5) img:not(.icon){
content:url(https://static.wikia.nocookie.net/airdorf/images/1/16/Mikeycropped.png/revision/latest?cb=20230223175612);
}
.profile .friends .person:nth-child(6) img:not(.icon){
content:url(https://files.catbox.moe/l6uhtz.gif);
}
.profile .friends .person:nth-child(7) img:not(.icon){
content:url(https://static.wikia.nocookie.net/airdorf/images/e/ea/Tiffanycrop.png/revision/latest?cb=20230223220843);
}
.profile .friends .person:nth-child(8) img:not(.icon){
content:url(https://static.wikia.nocookie.net/airdorf/images/e/ea/Tiffanycrop.png/revision/latest?cb=20230223220843);
</style>

<style>

div.friends-grid{
text-align:center; /* if you want them to be center */
}

.profile .friends .person p{
display:none; /* hides the original names */
}

.profile .friends .person:nth-child(1)::before{
content:"Amy Martin";
}
.profile .friends .person:nth-child(2)::before{
content:"Father Allred";
}
.profile .friends .person:nth-child(3)::before{
content:"Father Garcia";
}
.profile .friends .person:nth-child(4)::before{
content:"Gary Miller";
}
.profile .friends .person:nth-child(5)::before{
content:"Lisa Pearson";
}
.profile .friends .person:nth-child(6)::before{
content:"Michael Davies";
}
.profile .friends .person:nth-child(7)::before{
content:"Miriam Bell";
}
.profile .friends .person:nth-child(8)::before{
content:"Tiffany Robinson";
}

<style></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 )

John Horne	1728157445 Thanks dude, gonna use this to put more swag into one of my blogs! Report Comment
Lubuplums	1727581855 Using!<3 Report Comment
xZ3PHYR!!	1727337982 Using! Report Comment
Glubby/Asher	1726701924 using Report Comment
_freaxx_	1722087451 sick!! Report Comment
decay ♡	1720688444 using as a blog!! Report Comment
ezra	1718862994 using tehehee Report Comment
dimamacchine	1717726614 using !! Report Comment
Anne🩷	1716634500 USING!! I LOVE JOHN WARD!!!! Report Comment
gabil	1715614729 using thx!! Report Comment
Falso the faggot	1715197833 usin!! it's awesome :0000 Report Comment
kai	1715113102 GRRRRRRRRRRRAAAHHH USING!! Report Comment
Malou	1713740689 THIS IS AMAZING <333 Report Comment
lexapro	1712901114 using :) Report Comment
Chino	1712379418 I love it Report Comment
☆Sal!!(auto music)☆🍉	1711940865 using !! :3 Report Comment
Ber	1711431666 using scanline thing ty! Report Comment
Vin.	1711405592 USING, ILYSM FOR THIS Report Comment YOU'RE WELCOME OMG!!!! I also made this to find more fans of FAITH...... Hello............... /vpos by jules ˚. ୭ 📕; 1711433118; Report
ONION_PANIKC	1711033615 THIS LOOKS AMAZING!! <3 Report Comment
Lixie_X3	1710909501 Using Report Comment