mS p41nT's blue (vriska) layout

Tags:
Description:

posting this here cuz it's always good to save ur layout codes!! it's a fucking mess and i barely got it to work so don't bother trying to decypher whatever i wrote lol also i think the font doesn't work on mobile but i can't be bothered enough to figure it out
Code:

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

<style>
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue&display=swap');
body{font-family: "Comic Sans MS", "Comic Sans", cursive;}

p{

   font-family: 'Comic Sans Ms', cursive;

   font/size: 100%;

   color: rgb(0, 65, 130);

   background-color: rgb(0, 0, 0);

}

h1,h2,h3,h4,h5{

   font-family: 'Comic Sans MS', cursive;

   font/size: 100%;

   color: rgb(0, 65, 130);

   background-color: rgb(0, 0, 0);
}

.section h4{display:none}

main {

   background-color: rgb(0, 65, 130);

   border-color: black;

   border-radius: 30px;

}

body{

background-color: #004182;



}



main{

background-image: url('https://files.catbox.moe/zwoxxn.gif');

   border-color: black;

   border-radius: 30px;

}



.contact, .url-info, .table-section, .blurbs, .friends, .comments {

background-color: #000000;

border: 1px Solid #ffffff!important;

}

<--!SECTION STUFF-->



}

:root {

    --logo-blue: ;

    --darker-blue: rgb(0, 65, 130);

    --lighter-blue: ;

    --even-lighter-blue: ;

    --lightest-blue: rgb(0, 65, 130);

    --dark-orange: rgb(0, 65, 130);

    --light-orange: rgb(0, 65, 130);

    --even-lighter-orange: rgb(0, 65, 130);

    --green: ;

} 

main .table-section  {

   background-color: rgb(0, 0, 0);

} 

main .contact  {

   background-color: rgb(0, 0, 0);

} 

main .blog-preview {

   background-color: rgb(0, 0, 0);

} 

main .friends {

   background-color: rgb(0, 0, 0);

} 

main .profile-info  {

   background-color: rgb(0, 0, 0);

} 

main .span  {

   background-color: rgb(0, 0, 0);





}

:root {

    --logo-blue: ;

    --darker-blue: rgb(0, 65, 130);

    --lighter-blue: ;

    --even-lighter-blue: ;

    --lightest-blue: rgb(0, 65, 130);

    --dark-orange: rgb(0, 65, 130);

    --light-orange: rgb(0, 65, 130);

    --even-lighter-orange: rgb(0, 65, 130);

    --green: ;

} 



<!-- HEADER -->



} 

nav .top {

   background-image: url(https://files.catbox.moe/zwoxxn.gif);

   border-color: black;

   border-radius: 30px;

} 

nav .left {

   background-color: rgb(0, 0, 0);

   border-radius: 30px;

}

.logo {

content:url("https://files.catbox.moe/vrgcv0.png");



nav .links li .icon{

content: url('https://files.catbox.moe/0tabjn.png');



}
}

nav .top {

   background-image: url(https://files.catbox.moe/zwoxxn.gif);

   border-color: black;

   border-radius: 30px;

} 


<!-- FOOTER -->

}

footer {

   font/size: 100%;

   color: rgb(255, 0, 189);

   background-image: url(https://files.catbox.moe/zwoxxn.gif);

   border-color: black;

   border-radius: 30px;
}

}

footer {

   font/size: 100%;

   color: rgb(255, 0, 189);

   background-image: url(https://files.catbox.moe/zwoxxn.gif);

   border-color: black;

   border-radius: 30px;
}



/* contact icons */

.contact .inner a img {

font-size: 0;

}



.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {

/* add to friends */

content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/b46861d4-f830-4896-8af6-71206fe2fe78/dcnj0z9-70b1c00c-ee31-4556-b6bf-3870b2422ca6.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2I0Njg2MWQ0LWY4MzAtNDg5Ni04YWY2LTcxMjA2ZmUyZmU3OFwvZGNuajB6OS03MGIxYzAwYy1lZTMxLTQ1NTYtYjZiZi0zODcwYjI0MjJjYTYuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.vdMbBMaAZX2nCz0fc5bAMpFVd8i0Ls21GtcbXmcz1Zs")

}



.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {

/* add to favorite */

content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/b46861d4-f830-4896-8af6-71206fe2fe78/dcnj0z9-70b1c00c-ee31-4556-b6bf-3870b2422ca6.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2I0Njg2MWQ0LWY4MzAtNDg5Ni04YWY2LTcxMjA2ZmUyZmU3OFwvZGNuajB6OS03MGIxYzAwYy1lZTMxLTQ1NTYtYjZiZi0zODcwYjI0MjJjYTYuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.vdMbBMaAZX2nCz0fc5bAMpFVd8i0Ls21GtcbXmcz1Zs")

}



.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {

/* send a message */

content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/b46861d4-f830-4896-8af6-71206fe2fe78/dcnj0z9-70b1c00c-ee31-4556-b6bf-3870b2422ca6.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2I0Njg2MWQ0LWY4MzAtNDg5Ni04YWY2LTcxMjA2ZmUyZmU3OFwvZGNuajB6OS03MGIxYzAwYy1lZTMxLTQ1NTYtYjZiZi0zODcwYjI0MjJjYTYuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.vdMbBMaAZX2nCz0fc5bAMpFVd8i0Ls21GtcbXmcz1Zs")

}



.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {

/* foward to friend*/

content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/b46861d4-f830-4896-8af6-71206fe2fe78/dcnj0z9-70b1c00c-ee31-4556-b6bf-3870b2422ca6.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2I0Njg2MWQ0LWY4MzAtNDg5Ni04YWY2LTcxMjA2ZmUyZmU3OFwvZGNuajB6OS03MGIxYzAwYy1lZTMxLTQ1NTYtYjZiZi0zODcwYjI0MjJjYTYuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.vdMbBMaAZX2nCz0fc5bAMpFVd8i0Ls21GtcbXmcz1Zs")

}



.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {

/* instant message */

content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/b46861d4-f830-4896-8af6-71206fe2fe78/dcnj0z9-70b1c00c-ee31-4556-b6bf-3870b2422ca6.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2I0Njg2MWQ0LWY4MzAtNDg5Ni04YWY2LTcxMjA2ZmUyZmU3OFwvZGNuajB6OS03MGIxYzAwYy1lZTMxLTQ1NTYtYjZiZi0zODcwYjI0MjJjYTYuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.vdMbBMaAZX2nCz0fc5bAMpFVd8i0Ls21GtcbXmcz1Zs")

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {

/* block user */

content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/b46861d4-f830-4896-8af6-71206fe2fe78/dcnj0z9-70b1c00c-ee31-4556-b6bf-3870b2422ca6.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2I0Njg2MWQ0LWY4MzAtNDg5Ni04YWY2LTcxMjA2ZmUyZmU3OFwvZGNuajB6OS03MGIxYzAwYy1lZTMxLTQ1NTYtYjZiZi0zODcwYjI0MjJjYTYuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.vdMbBMaAZX2nCz0fc5bAMpFVd8i0Ls21GtcbXmcz1Zs")

}



.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {

/* add 2 group  */

content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/b46861d4-f830-4896-8af6-71206fe2fe78/dcnj0z9-70b1c00c-ee31-4556-b6bf-3870b2422ca6.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2I0Njg2MWQ0LWY4MzAtNDg5Ni04YWY2LTcxMjA2ZmUyZmU3OFwvZGNuajB6OS03MGIxYzAwYy1lZTMxLTQ1NTYtYjZiZi0zODcwYjI0MjJjYTYuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.vdMbBMaAZX2nCz0fc5bAMpFVd8i0Ls21GtcbXmcz1Zs")



}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {

/* report */

content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/b46861d4-f830-4896-8af6-71206fe2fe78/dcnj0z9-70b1c00c-ee31-4556-b6bf-3870b2422ca6.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2I0Njg2MWQ0LWY4MzAtNDg5Ni04YWY2LTcxMjA2ZmUyZmU3OFwvZGNuajB6OS03MGIxYzAwYy1lZTMxLTQ1NTYtYjZiZi0zODcwYjI0MjJjYTYuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.vdMbBMaAZX2nCz0fc5bAMpFVd8i0Ls21GtcbXmcz1Zs")

}



/* ===== Scrollbar CSS ===== */

  /* Firefox */

  * {

    scrollbar-width: auto;

    scrollbar-color: #004182 #000000;

  }



  /* Chrome, Edge, and Safari */

  *::-webkit-scrollbar {

    width: 16px;

  }



  *::-webkit-scrollbar-track {

    background: #000000;

  }



  *::-webkit-scrollbar-thumb {

    background-color: #004182;

    border-radius: 10px;

    border: 3px solid #005682;

  }



</style>

<style>

        .online{content:url(https://i.ibb.co/8KwnB2k/8itch-online.gif) }

    </style>



<style>

/*blurbs scroll*/

.blurbs {

overflow-y: auto; 

overflow-x: none;

height: 200px;



}

.friends {

    overflow: scroll;

    overflow-x: scroll;

    overflow-x: hidden;

    height: 300px; 

}



body:before {

content: " ";

height: 100vh;

width: 100vw;

display: block;

position: fixed; 

top: 0; 

left: 0; 

z-index: 100;

background-image: url('https://files.catbox.moe/002rcx.png');

background-size: cover;

background-repeat: no-repeat;

background-position:center;

animation: yourAnimation 0s ease 6s 1 normal forwards;

pointer-events: none;}

@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }





</style>





<div class="snowflakes">

<div class="snowflake"><img src="https://files.catbox.moe/aq6b27.png" width="40px"/></div>

<div class="snowflake"><img src="https://files.catbox.moe/aq6b27.png" width="40px"/></div>

<div class="snowflake"><img src="https://files.catbox.moe/aq6b27.png" width="40px"/></div>

<div class="snowflake"><img src="https://files.catbox.moe/aq6b27.png" width="40px"/></div>

<div class="snowflake"><img src="https://files.catbox.moe/aq6b27.png" width="40px"/></div>

<div class="snowflake"><img src="https://files.catbox.moe/aq6b27.png" width="40px"/></div>

<div class="snowflake"><img src="https://files.catbox.moe/aq6b27.png" width="40px"/></div>

<div class="snowflake"><img src="https://files.catbox.moe/aq6b27.png" width="40px"/></div>

</div>



<style>

    @-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}

</style>

<style>
main {

   background-color: rgb(0, 65, 130);

   border-color: black;

   border-radius: 30px;

}

body{

background-color: #004182;



}



main{

background-image: url('https://files.catbox.moe/zwoxxn.gif');

   border-color: black;

   border-radius: 30px;

}



.contact, .url-info, .table-section, .blurbs, .friends, .comments {

background-color: #000000;

border: 1px Solid #ffffff!important;

}

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