Nikku inspired layout

Tags: nikku, hotline 024, fnf, friday night funkin, simple

Description:

Inspired by Nikku's Funkipedia page Comes with: Autoplaying music (Sugarcrush), Custom contact icons, Pagedoll, VHS overlay Loading screen, Popstar font, Custom Logo, Custom icons on the header

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Katie (autoplay!) 🍉 (https://layouts.spacehey.com/layout?id=85268) -->

<style>
  
@font-face {

    font-family: 'Popstar';

    src: url('https://dl.dropbox.com/s/m8tztke58hzt22r/Popstar.TTF');

}

h1, h2, h3, h4, h5, p, body, .mood p,.top, .top a, a, .friends, .table-section td, .links, .logout-btn{

font-family: 'Popstar';	

padding-left: 7px !important;

}

body:before {
content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed; 
top: 0; 
left: 0; 
z-index: 100;
background-image: url('https://media.tenor.com/Qx1JtjxMBjMAAAAC/nikki-hotline024.gif');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 1s ease 0s 1 normal forwards;
pointer-events: none;}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 
</style>

<style>

main:before {
width: 100%;
height: 300px;
display: block;
content: "";
background-image: url('https://static.wikia.nocookie.net/fridaynightfunking/images/2/2f/HOTLINE_Banner.png');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
@media only screen and (max-width: 600px) {
main:before{
height: 600px;
}
}
  
.logo {

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

}

body{
  background: url('https://static.wikia.nocookie.net/fridaynightfunking/images/5/56/Sugarchrush_BG.png');
  background-repeat: no-repeat;
  background-size: cover;
}

main{
  background: #002f59;
  color: white;
}

.friends{
  color: white;
  background: transparent
}

table.comments-table{
  color: white;
  background: transparent
  display: block;
  border: transparent;
}
  
.comments-table td:first-child {
background: transparent;
}

.profile .blurbs{
  background: transparent;
  display: block;
}

.profile .mood{
}

a:hover{
  color: #cf0054;
}
a{
  color: white;
}

nav .top{
  background: #cf0054;
}

nav .links{
  background: #cf0054;
}
  
.nav .top , nav .links{

text-align: center;

}
  
nav .links li:not(:last-child)::after {

content: " ★ ";
color: white;

}
  
nav .links a, nav .links li .special a{
text-shadow: none;
}
  
nav .links a:hover {
color: white;
}
  
.person p, .count {
color: #cf0054 !important;
}
  
.profile-info {
    border: transparent;
}

footer{
  background: transparent;
  color: black;
}

:root {
--logo-blue: white;
--darker-blue: white;
--lighter-blue: #cf0054;
--even-lighter-blue: #cf0054;
--lightest-blue: #cf0054;
--dark-orange: white;
--light-orange: #cf0054;
--even-lighter-orange: transparent;
--green: black;
}
  
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #cf0054; 
}

::-webkit-scrollbar-thumb:hover {
  background: #7b0030; 
}
  
/* 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 */
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: "🌌"
}
  
html:before {

 

  animation: grain 1s steps(10) infinite;

 

  background-image: url('https://i.ibb.co/Zz3xjNq/output-onlinegiftools-1.gif');

 

  content: "";

 

  height: 250%;

 

  left: -50%;

 

  opacity:.175;

 

  position: fixed;

 

  top: -110%;

 

  width: 200%;

 

  pointer-events:none;

 

}
</style>

<div style="float:  ; max-height: 800px; position: fixed; right: 1px; bottom: 10px; z-index: 200;"><img src="https://static.wikia.nocookie.net/fridaynightfunking/images/3/3b/NikkuAnim.gif"/></div>

<iframe width="0" height="0" src="https://www.youtube.com/embed/mnMDgBcc2eo?loop=1&autoplay=1&controls=0&start=0&playlist=mnMDgBcc2eo&" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="">
</iframe>

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

Comments disabled.