VITTORINO (8:11) LAYOUT

Tags: 811, 8:11, vittorino

Description:

/* Floating Vittorino next 2 profile */ /* This code gives you the three (wise) Vittorinos and rabbits on the side. This was a pain in the ass to make / edit. */

/* Layout itself (very top of it is a music player that plays the song 'Kiss me, son of God' by They Might Be Giants. If you don't want that song, change the url after /embed/, or just remove it altogether.) */ A layout for 8:11 by Dubuk. This is a finished albeit rushed layout, taking me from about 9 PM to 6 AM PST for me to finish (if we don't count the major tweaks I had to make just a few minutes ago.) But hopefully people use it. :) 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.. Y'know, same shtick at the F:TUT layout I made a while back.
Fair warning that most of the assets are from my asset discord. If anything breaks after a while, let me know.
If you use it, please let me know by commenting "Using"! I just want to see people who use my layouts because its so cool lmao!! No credit is necessary, but pls don't claim that you made it yourself. :)
P.S, this layout DOES work on mobile, however, the side image of the "Three wise Vittorino's" (as I like to christen them) is not visible (even with the desktop mode enabled) on browser! KNOWN SOURCES FOR ASSETS:
RPG Maker-esque font Main layout that was basically remade All 8:11 assets come from here unless specified. Download the game here btw!! (at least the demo, it's SUPER good!)

Finished as of July 24th, 2024.

Preview:

click on the image for a larger preview

Code:

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

<!-- JULES HAD MADE THIS LAYOUT BUT IT BROKE BECAUSE THEIR DUMBASS USED DISCORD FOR 99% OF THE ASSETS, PLS ENJOY NOW LMFAO -->

/* Floating Vittorino next 2 profile */

<style>


.general-about{

  position: relative;

 margin-top: 30px;

}

.general-about .profile-pic::before{

  content: '';

  background: url('https://files.catbox.moe/mnewtm.png') no-repeat;

  background-size: cover;

  display: block;

  width: 90px;

  height: 100px;

  z-index: 999;

  position: absolute;

  top: 77px;

  left: -65px;




</style>  
/* This code gives you the three (wise) Vittorinos and rabbits on the side. This was a pain in the ass to make / edit. */
<div style="float: ; max-height: 400px; position: fixed; right: -560px; top: 5px; z-index: 200;">
<img src="https://files.catbox.moe/yfguwv.png"/></div>
<style></style>


/* Layout itself (very top of it is a music player that plays the song 'Kiss me, son of God' by They Might Be Giants. If you don't want that song, change the url after /embed/, or just remove it altogether.) */

<iframe width="0" height="0" src="https://www.youtube.com/embed/RqOSPm2UdRs?si=gmLcN3XbaF-9Gjy2&;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>

<style>
  
  .logo {
  
  content:url("https://files.catbox.moe/fr3dah.png")
  
  }
  
  </style>
<style>
@import url(https://db.onlinewebfonts.com/c/a31b719d44105eb8a658825476521761?family=M%2B+1m+light);



body {
  color: white;
  font-family: "M+ 1m light";
  text-align: center;
  text-transform: uppercase;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: black;
  background-attachment: fixed;

}
footer {
    text-align: center;
    font-size: 70%;
    margin: 10 px 0 10px;
    padding: 10px 5px;
    background: #000000;
}
a {
    color: #ffffff;
    color: #ffffff;
    text-decoration: dotted;
    text-decoration-line: underline;
}
main {
    background: black;
    color: white;
    padding: 6px 0px;
    font-size: 80%;
}
.profile .blurbs .heading, .profile .heading {
    background: #000000;
    background: #000000;
    color: #ffffff;
    color: #ffffff;
    padding: 2px 7px
;
}
.profile .blurbs .section h4 {
    margin: 0;
    color: #ffffff;
    color: #ffffff;
}
.online {
    color: #ffffff;
    font-weight: bold;
    font-size: 95%;
}
:root {
    --light-gray: #ffffff;
    --gray: #ffffff;
    --dark-gray: #000000;
    --darker-gray: #000000;
    --logo-blue: #000000;
    --darker-blue: #000000;
    --lighter-blue: #000000;
    --even-lighter-blue: #000000;
    --lightest-blue: #000000;
    --red: #ffffff;
    --dark-orange: #ffffff;
    --light-orange: #ffffff;
    --even-lighter-orange: #000000;
    --strange-yellow: #000000;
    --green: #000000;
    --light-green: #000000;
    --medium-green: #000000;
    --dark-green: #000000;
    accent-color: #ffffff;
    accent-color: var(--logo-blue);
}
p, ol li, ul:not(nav .links):not(footer .links) li {
    font-size: 0.875em;
    font-size: max(0.875em, 12px);
    color: white;

}
nav .links .special a {
    color: #ffffff;
}
.count {
    color: #ffffff;
}
.comments-table td:first-child, .music-table td:first-child {
    background: #000000;
    background: #000000;
    text-align: center;
    font-weight: bold;
    width: 38%;
}

/* Start */ * {cursor: url(https://files.catbox.moe/rfhmtf.png), auto !important;} /* End */


 main:before {
     width: 100%;
     height: 300px;
     display: block;
     content: "";
     background-image: url('https://files.catbox.moe/0d5adw.png');
     background-position: top center;
     background-size: cover;
}
 @media only screen and (max-width: 600px) {
     main:before{
         height: 200px;
    }
}

 main{
     background-color:black;
     color:white;
}
 body{
     background-color:black;
}
 a {
     color:white;
}
 .count{
     color:white;
}
 .person p .blurbs .section h4 .blurbs .profile .friends .heading h4 {
     color: white;
}
 .profile .blurbs .heading, .profile .heading, .profile .contact .heading, .profile .table-section .heading, .setting-section .heading, .home-actions .heading {
     background: #1c1c1c;
}
 .profile .contact, .profile .url-info, .profile .table-section, .setting-section, .home-actions {
     border: 2px solid #1c1c1c;
}
 .details-table td:first-child, .details-table td{
     background: transparent;
}
 .comments-table td, .comments-table td:first-child {
     background: transparent;

{
 .profile
     direction: rtl;
}
 .blurbs{
     direction: ltr;
}
 .blog-preview{
     direction: ltr;
}
 .friends{
     direction: ltr;
}
 .general-info{
     direction: ltr;
}
 .contact{
     direction: ltr;
}
 .url-info{
     direction: ltr;
}
 .details-table{
     direction: ltr;
}
 .profile .table-section .heading{
     direction: ltr;
}
 .details p{
     direction: ltr;
}
 .mood{
     direction: ltr;
}
 footer {
     background: black;
     color: white;

</style>
<style>

body:before {

content: " ";

height: 100vh;

overflow: hidden;

width: 100vw;

display: block;

position: fixed; 

top: 0; 

left: 0; 

z-index: 100;

background-image: url('https://static.wikia.nocookie.net/0a809b66-133f-404f-a11c-a0186fccdaea/scale-to-width/755');

background-size: cover;

background-repeat: no-repeat;

background-position:center;
}
.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: "🦷"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: "🦷"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: "🦷"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: "🦷"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: "🦷"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: "🦷"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: "🦷"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: "🦷"
}   
body::-webkit-scrollbar {
  width: 12px;               /* width of the entire scrollbar */
}

body::-webkit-scrollbar-track { ffd6ec
  background: #9cd7ff;        /* color of the tracking area */
}

body::-webkit-scrollbar-thumb {
  background-color: #ffd6ec;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: 3px solid #ffd6ec;  /* creates padding around scroll thumb */
}
main{
animation-name: floating;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
margin-left: 0px;
margin-top: 0px;
}
@keyframes floating {
0% { transform: translate(0, 0px); }
50% { transform: translate(0, 15px); }
100% { transform: translate(0, -0px); }
}
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
 {
0% {
    opacity: 0.27861;
  }
  5% {
    opacity: 0.34769;
  }
  10% {
    opacity: 0.23604;
  }
  15% {
    opacity: 0.90626;
  }
  20% {
    opacity: 0.18128;
  }
  25% {
    opacity: 0.83891;
  }
  30% {
    opacity: 0.65583;
  }
  35% {
    opacity: 0.67807;
  }
  40% {
    opacity: 0.26559;
  }
  45% {
    opacity: 0.84693;
  }
  50% {
    opacity: 0.96019;
  }
  55% {
    opacity: 0.08594;
  }
  60% {
    opacity: 0.20313;
  }
  65% {
    opacity: 0.71988;
  }
  70% {
    opacity: 0.53455;
  }
  75% {
    opacity: 0.37288;
  }
  80% {
    opacity: 0.71428;
  }
  85% {
    opacity: 0.70419;
  }
  90% {
    opacity: 0.7003;
  }
  95% {
    opacity: 0.36108;
  }
  100% {
    opacity: 0.24387;
  }
}
@keyframes textShadow {
  0% {
    text-shadow: 0.4389924193300864px 0 1px rgba(0,30,255,0.5), -0.4389924193300864px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  5% {
    text-shadow: 2.7928974010788217px 0 1px rgba(0,30,255,0.5), -2.7928974010788217px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  10% {
    text-shadow: 0.02956275843481219px 0 1px rgba(0,30,255,0.5), -0.02956275843481219px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  15% {
    text-shadow: 0.40218538552878136px 0 1px rgba(0,30,255,0.5), -0.40218538552878136px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  20% {
    text-shadow: 3.4794037899852017px 0 1px rgba(0,30,255,0.5), -3.4794037899852017px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  25% {
    text-shadow: 1.6125630401149584px 0 1px rgba(0,30,255,0.5), -1.6125630401149584px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  30% {
    text-shadow: 0.7015590085143956px 0 1px rgba(0,30,255,0.5), -0.7015590085143956px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  35% {
    text-shadow: 3.896914047650351px 0 1px rgba(0,30,255,0.5), -3.896914047650351px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  40% {
    text-shadow: 3.870905614848819px 0 1px rgba(0,30,255,0.5), -3.870905614848819px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  45% {
    text-shadow: 2.231056963361899px 0 1px rgba(0,30,255,0.5), -2.231056963361899px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  50% {
    text-shadow: 0.08084290417898504px 0 1px rgba(0,30,255,0.5), -0.08084290417898504px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  55% {
    text-shadow: 2.3758461067427543px 0 1px rgba(0,30,255,0.5), -2.3758461067427543px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  60% {
    text-shadow: 2.202193051050636px 0 1px rgba(0,30,255,0.5), -2.202193051050636px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  65% {
    text-shadow: 2.8638780614874975px 0 1px rgba(0,30,255,0.5), -2.8638780614874975px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  70% {
    text-shadow: 0.48874025155497314px 0 1px rgba(0,30,255,0.5), -0.48874025155497314px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  75% {
    text-shadow: 1.8948491305757957px 0 1px rgba(0,30,255,0.5), -1.8948491305757957px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  80% {
    text-shadow: 0.0833037308038857px 0 1px rgba(0,30,255,0.5), -0.0833037308038857px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  85% {
    text-shadow: 0.09769827255241735px 0 1px rgba(0,30,255,0.5), -0.09769827255241735px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  90% {
    text-shadow: 3.443339761481782px 0 1px rgba(0,30,255,0.5), -3.443339761481782px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  95% {
    text-shadow: 2.1841838852799786px 0 1px rgba(0,30,255,0.5), -2.1841838852799786px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  100% {
    text-shadow: 2.6208764473832513px 0 1px rgba(0,30,255,0.5), -2.6208764473832513px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
}
body::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: flicker 0.15s infinite;
}
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.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}
* 
</style>
<style>

.online { visibility: hidden; } .online img { content: url("https://files.catbox.moe/z1erdt.gif"); animation-name: none; visibility: visible; height: 23px; width: 90px; }
</style>

<style>

.profile .friends .person:first-child img:not(.icon){
content:url(https://files.catbox.moe/b1xjwq.png);
}
.profile .friends .person:nth-child(2) img:not(.icon){
content:url(https://files.catbox.moe/3ouxe6.png);
}
.profile .friends .person:nth-child(3) img:not(.icon){
content:url(https://files.catbox.moe/i7s32l.png);
}
.profile .friends .person:nth-child(4) img:not(.icon){
content:url(https://files.catbox.moe/v59qo0.png);
}
.profile .friends .person:nth-child(5) img:not(.icon){
content:url(https://files.catbox.moe/gqn8zz.png);
}
.profile .friends .person:nth-child(6) img:not(.icon){
content:url(https://files.catbox.moe/m2vo10.png);
}
.profile .friends .person:nth-child(7) img:not(.icon){
content:url(https://files.catbox.moe/mx7bfm.png);
}
.profile .friends .person:nth-child(8) img:not(.icon){
content:url(https://files.catbox.moe/g9aro6.png);
</style>

<style>

div.friends-grid{
text-align:center; /* these keep them centered */
}

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

.profile .friends .person:nth-child(1)::before{
content:"Accardi Florentino";
}
.profile .friends .person:nth-child(2)::before{
content:"Basilio Dante";
}
.profile .friends .person:nth-child(3)::before{
content:"Gabriel Giordano";
}
.profile .friends .person:nth-child(4)::before{
content:"Juliek Octavia";
}
.profile .friends .person:nth-child(5)::before{
content:"Susan Octavia";
}
.profile .friends .person:nth-child(6)::before{
content:"Leon Tremblay";
}
.profile .friends .person:nth-child(7)::before{
content:"THAT FRENCH PRIEST 🚫🚫🚫";
}
.profile .friends .person:nth-child(8)::before{
content:"E ⅂ 0 ? ¿";
}
</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 19 of 19 comments ( View all | Add Comment )

ETHAN	1741293066 I AM SO USING IT OMG TYSM I LOVE IT Report Comment
DumbratXD	1741037507 I LOVVE U SMMM Report Comment
Emo_Machine	1738706949 ouggg would kill for a ryker one :o] (please lemme know if u ever make a ryker onee) Report Comment
Bo's #1 Fan	1738062970 Using some of it! Report Comment
hoover	1736227824 USINGGG! Report Comment
anti★thesis (( elmo/ryker )) WIP	1735023970 usisiinggngn Report Comment
Travis ‘ .	1730862608 Using:) Report Comment
drama Queen	1729061300 USING!!282929292₽.!:! Report Comment
Lenny ! ˙∘ʚ∘˙*	1727613954 USING !! >_< Report Comment
☆꧁Mirokoshi꧂☆	1726918445 Using!! :D Report Comment
Nathan	1726512243 usee!!! Report Comment
Sunny	1725248765 using!!!!! :3 Report Comment
vxnomous	1722698201 usinggg:333333 Report Comment
JOEY ➶ ｡˚	1718505865 like the assets? i’m not sure tho Report Comment Fixed. :) by jules ˚. ୭ 📕; 1721834321; Report AHH TYSM!!! APPRECIATE IT by JOEY ➶ ｡˚; 1722191275; Report
JOEY ➶ ｡˚	1718505799 i think the images stopped working? Report Comment THEY PROBABLY DID LMFAO I'LL GET THOSE FIXED BY LIKE TOMORROW!! by jules ˚. ୭ 📕; 1718915728; Report
♯┆Daniil Dankovsky !! .ᐟ ★	1717080073 Using!! I love this Report Comment
FOX . . 🕸️	1715652421 IM SO USING THIS TYSM Report Comment YWYW!!! by jules ˚. ୭ 📕; 1715700050; Report
SCUDSTER⚠︎	1714212004 USINGG UUAH Report Comment TYSMS SRHJRHRRHHRGAHH!H!! by jules ˚. ୭ 📕; 1714216642; Report
jules ˚. ୭ 📕	1713756681 BTW: This layout has a Vitt cursor for PC users.. And its own online gif I made in like 20 minutes (with editing and hunting for the RPG Maker font) :) Report Comment Also most assets if they are not in their original form (example: the side image of the three wise vitts), its because I edited them using ibis paint x. All assets were drawn by Dubuk though so absolute shout out to them (8:11 is so good and I'm so glad they made it) by jules ˚. ୭ 📕; 1713757052; Report