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

Ivim	1773634778 Usingg Report Comment
gumiguro	1766616176 using!! this is so cool Report Comment
Alec 🐛🐛🐛	1764413330 I WASNT EXPECTING THERE TO ACTUALLY BE A FITH LAYOUT WHATTT Report Comment
Asachiel	1763337586 That's actually so freaking insane WOW Report Comment
𝚌𝚘𝚕𝚒𝚗؛༊	1761293204 mmjhghuhioah uusing!!!!!!!!!!!!!!!! Report Comment
skrrt skrrrt	1757588075 THIS IS SO FREAKING COOL Report Comment
Switchblyyd	1756173791 this is awesome!! using!! Report Comment
charlie	1755534066 using!! Report Comment
valse	1747062418 using! Report Comment
s4l	1742022263 Using! And holy moly this is so sick!! Report Comment
John Horne	1728157445 Thanks dude, gonna use this to put more swag into one of my blogs! Report Comment
9lumzz	1727581855 Using!<3 Report Comment
ALL3N 4TR0C1TY !!	1727337982 Using! Report Comment
Denis/Asher	1726701924 using Report Comment
_freaxx_	1722087451 sick!! Report Comment
decay ♡	1720688444 using as a blog!! Report Comment
ren	1718862994 using tehehee Report Comment
dimamacchine	1717726614 using !! Report Comment
Anne🩷	1716634500 USING!! I LOVE JOHN WARD!!!! Report Comment
Poly	1715614729 using thx!! Report Comment