InkFlavored (Splatoon Theme)

Tags: games, video games, splatoon

Description:

Oh look, another Splatoon layout.
This one took a lot of trial and error, comes with music and a custom cursor.
Edit: Changed some colors that were conflicting.

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by ✨Orionnn✨ (https://layouts.spacehey.com/layout?id=32466) -->

<iframe width="450" height="30" src="https://www.youtube.com/embed/Y23gxD-LzOk//?&;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>
@import url('https://fonts.googleapis.com/css2?family=Passion+One&display=swap');
main:before {
    width: auto;
    margin-bottom: 0px;
    border: #691b7a;
    height: 335px;
    display: block;
    content: "";
    background-image: url("https://cdn.wikimg.net/en/splatoonwiki/images/thumb/c/cd/Splatoon_2_release_art.png/1200px-Splatoon_2_release_art.png?20230406212802"); 
    background-position: center center;
    background-size: cover;
}

.friends:not(#comments) {
  grid-area: friends;
  background: url(https://media.tenor.com/rxutdzGD7qAAAAAd/splatoon.gif);
  background-size: 550px;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center; 
  border-radius: 15px
}

.contact {
  grid-area: friends;
  background: url(https://media.tenor.com/rxutdzGD7qAAAAAd/splatoon.gif);
  background-size: 360px;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center; 
  border-radius: 15px
}
.profile .profile-info {
	background-image: url(https://media.tenor.com/rxutdzGD7qAAAAAd/splatoon.gif);
	padding: 20px;
	border: none;
	border-radius: 10px;
	box-shadow: 4px 4px 0 #b500a0;
	text-align: center;
	animation: nineties2 2s ease 0s infinite normal none;
	animation-delay: .15s;
	border: none;
}
.col.left h1:before{
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 100px;
  background-image: url(https://cdn.wikimg.net/en/splatoonwiki/images/thumb/4/4c/Splatoon_2_LINE_sticker_-_Super_Sea_Snail.gif/200px-Splatoon_2_LINE_sticker_-_Super_Sea_Snail.gif);
  background-repeat: no-repeat;
  background-size: 100px;
}
.col.right:before {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 210px;
  background-image: url(https://cdn.wikimg.net/en/splatoonwiki/images/thumb/1/1f/Splatoon_LINE_sticker_Judd.gif/300px-Splatoon_LINE_sticker_Judd.gif);
  background-repeat: no-repeat;
  background-position-x: center;
  background-size: 200px;
}
.mood:after {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 230px;
  background-image: url(https://cdn.wikimg.net/en/splatoonwiki/images/thumb/9/9c/Splatoon_2_LINE_sticker_-_Smallfry.gif/300px-Splatoon_2_LINE_sticker_-_Smallfry.gif);
  background-repeat: no-repeat;
  background-position-x: center;
  background-size: 300px;
} 
*{
  border-radius: 10px;
}
:root{
  --logo-blue: url(https://cdn.wallpapersafari.com/82/75/iC5sUy.jpg);
  --darker-blue: #d48acb;
  --lighter-blue: #3ee649;
  --even-lighter-blue: #b500a0;
  --lightest-blue: #3ee649;
  --dark-orange: #b500a0;
  --light-orange: #b500a0;
  --even-lighter-orange: #3ee649;
  --green: #3ee649;
  --dark-green: #b500a0;
}
 
*{
  box-sizing: border-box;
}
html, body{
  margin: 0;
  padding: 0;
}
body{
  background-color: #b500a0
;
  background-image: url(https://pm1.narvii.com/6420/976de99c8b0f393975aa6bd9a1a11fba3d3a9731_hq.jpg);
  font-family: 'Passion One', cursive;
  font-size: large;
  padding: 10px;
 
}
 
img {
}
 
.container{
  width: 810px;
  max-width: 100%;
  border-width: 2px;
  border-style: solid;
  border-color: #e63ee0;
  margin: 0 auto 10px;
}
a:hover{ cursor: url('https://hiimorion.carrd.co/assets/images/gallery16/04080e73.png?v=070671a2'), auto;} * { cursor: url('https://hiimorion.carrd.co/assets/images/gallery16/94400f71.png?v=070671a2'), auto;} 
}
a{
  color: #3ee6a0
;
  text-decoration: underline;
}
nav{
  color: #ffffff;
  font-size: 72%;
}
nav .links{
  background-color: #e63ee0;
  padding: 3.5px 16px 5.5px 16px;
}
nav .links,
footer .links{
  margin: 0;
  list-style: none;
}
footer .links{
  font-size: 0.875em;
  margin: 16px 0 5px 0;
  padding: 0;
  text-align: center;
}
nav .links li,
footer .links li{
  display: inline-block;
}
nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
  content: url("https://itissomething.neocities.org/graphics/tinies/tinybuddy.png");
  color: #3ee6a0;
}
nav .links a{
  text-decoration: none;
  color: #3ee6a0;
  font-size: 0.98em;
}
nav .links a:hover{
  text-decoration: underline;
  color: #3ee6a0;
}
main{
  background: url(https://pm1.narvii.com/6569/313c4ab93ebf4b48b4abe30ad8c5821ed3c80d27_hq.jpg);
  color: #ffffff;
  padding: 6px 0px;
  font-size: 80%;
}
.profile .contact .heading,
.profile .table-section .heading,
.home-actions .heading{
  background: var(--lighter-blue);
  color: #3ee6a0;
  padding: 2px 7px;
}
.profile .contact .heading h4,
.profile .table-section .heading h4,
.profile .blurbs .heading h4,
.profile .friends .heading h4,
.blog-entry .comments .heading h4,
.bulletin .comments .heading h4,
.home-actions .heading h1,
.statistics .heading h4{
  margin: 0;
  display: inline-block;
  color: #ffffff;
}
.profile .friends .person{
  width: 105px;
  display: inline-block;
  padding: 0 10px 15px 0;
}
.profile .friends .person p{
  color: #ffffff;
  font-weight: bold;
  width: 100%;
  word-break: break-word;
  font-size: 100%;
  text-align: center;
}
.profile .friends .person img:not(.icon){
  max-width: 95px;
  max-height: 95px;
  display: block;
  margin: 0 auto;
}
.count{
  color: #3ee6a0;
}
.online{
  color: #fffb00;
  font-weight: bold;
  font-size: 95%;
}
<style>.online { visibility: hidden; } .online img { content: url("https://i.redd.it/l35y273ya7181.gif"); animation-name: none; visibility: visible; height: 45px;}</style>
 
<style>
/* 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: url("https://itissomething.neocities.org/graphics/tinies/tinycallie.png")
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: url("https://itissomething.neocities.org/graphics/tinies/tinymarire.png")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: url("https://itissomething.neocities.org/graphics/tinies/tinypearl.png")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: url("https://itissomething.neocities.org/graphics/tinies/tinymarina.png")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: url("https://itissomething.neocities.org/graphics/tinies/tinyshiver.png")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: url("https://itissomething.neocities.org/graphics/tinies/tinyfrye.png")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: url("https://itissomething.neocities.org/graphics/tinies/tinybigman.png")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: url("https://itissomething.neocities.org/graphics/tinies/tinyparuko.png")
}
footer {
background-color: #3ee649;
}
</style>
<div style="float:  ; max-height: 800px; position: fixed; right: 100px; bottom: 1px; z-index: 200;"><img src="https://itissomething.neocities.org/graphics/tinies/ttcallie3.png" width="130"/></div>
<div style="float:  ; max-height: 800px; position: fixed; right: 100px; bottom: 159px; z-index: 200;"><img src="https://itissomething.neocities.org/graphics/tinies/ttmarie3.png" width="130"/></div> 
<div style="float:  ; max-height: 800px; position: fixed; right: 120px; bottom: 315px; z-index: 200;"><img src="https://itissomething.neocities.org/graphics/tinies/ttshiver3.png" width="100"/></div>
<div style="float:  ; max-height: 800px; position: fixed; right: 100px; bottom: 465px; z-index: 200;"><img src="https://itissomething.neocities.org/graphics/tinies/ttfrye3.png" width="130"/></div>
<div style="float:  ; max-height: 800px; position: fixed; left: 110px; bottom: 465px; z-index: 200;"><img src="https://itissomething.neocities.org/graphics/tinies/ttbigman3.png" width="130"/></div>
<div style="float:  ; max-height: 800px; position: fixed; left: 110px; bottom: 315px; z-index: 200;"><img src="https://itissomething.neocities.org/graphics/tinies/ttparuko3.png" width="130"/></div>
<div style="float:  ; max-height: 800px; position: fixed; left: 100px; bottom: 159px; z-index: 200;"><img src="https://itissomething.neocities.org/graphics/tinies/ttspyke3.png" width="130"/></div>
<div style="float:  ; max-height: 800px; position: fixed; left: 100px; bottom: 1px; z-index: 200;"><img src="https://itissomething.neocities.org/graphics/tinies/ttannie3.png" width="130"/></div>

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

isa (evil tree bfb)

1697151242

UZING THIZ ^_^

Report Comment

Killuaq

1689448250

USING TYYYY!!

Report Comment

Fizzy

1686586419

No but this is really nice and I’m using it rn, just asking how do I change the music

Report Comment

Look for the "https://www.youtube.com/embed" near the top of the code

Go to any youtube video and copy the part after the "watch?v="

embed/[Paste it here]//

by ✨Orionnn✨; 1686594669; Report

I already figured it out check my profile but tysm for making it its so good I swear

by Fizzy; 1686594734; Report