Splatoon ABXY Theme

Tags: splatoon, video games, music, retro

Description:

IMPORTANT: PLEASE DO NOT USE THIS THEME RIGHT NOW AS IT NEEDS SOME FIXING UP. THERE IS AN ISSUE WITH THE INTEREST BOX BEING IN THE WRONG PLACE AND STRETCHING OFF OF THE PAGE. UNFORTUNATELY ANY ATTEMPTS TO FIX THIS RESULTS IN ERRORS BECAUSE OF THE NEED TO EDIT THE BASE HTML OF THE PROFILE, WHICH I CURRENTLY HAVE NO IDEA IF OR HOW I'M ABLE TO DO THAT. THANK YOU AND SORRY FOR THE INCONVENIENCE. I WILL LEAVE THIS UP AND UPDATE IT IF I MANAGE TO FIGURE OUT HOW.

Finally learned grids and other neat stuff and what better way to show that off than with a layout of my favorite fictional band?

Comes with:
---Music: sasakure.UK - *Hello, Planet. feat. Miku Hatsune
---Spinning Profile Picture
---Cool N64 Controller Cursor
---Gently Drifting Emojis (That still let you click stuff)

Okay that's it, BYE!

(Comments are appreciated but not required!)

Preview:

click on the image for a larger preview

Code:

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

<iframe width="450" height="30" src="https://www.youtube.com/embed/1gHHgx8bTxc//?&;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=VT323&display=swap');
/* Start https://www.cursors-4u.com */ * {cursor: url(https://cur.cursors-4u.net/games/gam-2/gam187.cur), auto !important;} /* End https://www.cursors-4u.com */
.profile {
  display: grid;
  grid-template:
    "left"
    "right";
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}
.profile div.col.w-40 {
  width: 100%;
}

/* left column */
.col.w-40 {
  grid-area: left;
  display: grid;
  grid-template:
    "header header"
    "general-about general-about"
    "contact  contact "
    "mood url-info"
    "table2 table2 "
    "table1 table1 ";
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

/* Your title/Name */
h1 {
  grid-area: header;
  background: url(https://t4.ftcdn.net/jpg/03/59/55/79/360_F_359557922_GPydLSSfjdlK4oEGn1ScOsMLFoEDecTl.jpg);
  background-size: 350px;
  background-repeat: horizontal;
  background-position-x: center;
  background-position-y: center;
  border-radius: 10px;
 
}

/* Your picture/online status */
.general-about {
  grid-area: general-about;
background-color: #d8b5f5;
 border: none;
	border-radius: 10px;
	box-shadow: 4px 4px 0 #f7a3d8;
	text-align: center;
	animation: nineties2 2s ease 0s infinite normal none;
	animation-delay: .15s;
	border: none;
}
/* Mood/blog/pics */
.mood {
  grid-area: mood;
background-color: #d8b5f5;
 border: none;
	border-radius: 10px;
	box-shadow: 4px 4px 0 #f7a3d8;
	text-align: center;
	animation: nineties2 2s ease 0s infinite normal none;
	animation-delay: .15s;
	border: none;
}
/* contact */
.contact {
  grid-area: contact;
  background: url(https://t4.ftcdn.net/jpg/03/59/55/79/360_F_359557922_GPydLSSfjdlK4oEGn1ScOsMLFoEDecTl.jpg);
  background-size: 550px;
  background-repeat: horizontal;
  background-position-x: center;
  background-position-y: center;
 border: none;
	border-radius: 10px;
	box-shadow: 4px 4px 0 #f7a3d8;
	text-align: center;
	animation: nineties2 2s ease 0s infinite normal none;
	animation-delay: .15s;
	border: none;
}
/* spacehey URL */
.url-info {
  grid-area: url-info;
 background: url(https://t4.ftcdn.net/jpg/03/59/55/79/360_F_359557922_GPydLSSfjdlK4oEGn1ScOsMLFoEDecTl.jpg);
  background-size: 550px;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
border: none;
	border-radius: 10px;
	box-shadow: 4px 4px 0 #f7a3d8;
	text-align: center;
	animation: nineties2 2s ease 0s infinite normal none;
	animation-delay: .15s;
	border: none; 
}
/* General/Music/etc */
.table-section:first-of-type {
  grid-area: table1;
}
/* The other table */
.table-section:last-of-type {
  grid-area: table2;
  background: url(https://t4.ftcdn.net/jpg/03/59/55/79/360_F_359557922_GPydLSSfjdlK4oEGn1ScOsMLFoEDecTl.jpg);
  background-size: 750px;
  background-repeat: vertical;
  background-position-x: center;
  background-position-y: center;
 border: none;
	border-radius: 10px;
	box-shadow: 4px 4px 0 #f7a3d8;
	text-align: center;
	animation: nineties2 2s ease 0s infinite normal none;
	animation-delay: .15s;
	border: none;
}

/* right column stuff */
/* right */
.col.right {
  grid-area: right;
  display: grid;
  grid-template:
    "blurbs blurbs"
    "profile-info profile-info"
    "friends blog-preview"
    "comments comments"
    "comments comments";
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}
/* contains "View Blog" Button */
.blog-preview {
  grid-area: blog-preview;
background-color: #d8b5f5;
 border: none;
	border-radius: 10px;
	box-shadow: 4px 4px 0 #f7a3d8;
	text-align: center;
	animation: nineties2 2s ease 0s infinite normal none;
	animation-delay: .15s;
	border: none;
}
.profile-info{
 grid-area: profile-info;
 background-image: url(https://t4.ftcdn.net/jpg/03/59/55/79/360_F_359557922_GPydLSSfjdlK4oEGn1ScOsMLFoEDecTl.jpg);
	padding: 20px;
	border: none;
	border-radius: 10px;
	box-shadow: 4px 4px 0 #f7a3d8;
	text-align: center;
	animation: nineties2 2s ease 0s infinite normal none;
	animation-delay: .15s;
	border: none;
}
/* contains about me */
.blurbs {
  grid-area: blurbs;
background-color: #d8b5f5;
 border: none;
	border-radius: 10px;
	box-shadow: 4px 4px 0 #f7a3d8;
	text-align: center;
	animation: nineties2 2s ease 0s infinite normal none;
	animation-delay: .15s;
	border: none;
}
/* Friends pictures grid */
.friends:not(#comments){
 grid-area: friends;
  background: url(https://t4.ftcdn.net/jpg/03/59/55/79/360_F_359557922_GPydLSSfjdlK4oEGn1ScOsMLFoEDecTl.jpg);
  background-size: 850px;
  background-repeat: vertical;
  background-position-x: center;
  background-position-y: center;
  border: none;
	border-radius: 10px;
	box-shadow: 4px 4px 0 #f7a3d8;
	text-align: center;
	animation: nineties2 2s ease 0s infinite normal none;
	animation-delay: .15s;
	border: none;
}

/* comments */
#comments {
  grid-area: comments;
background-color: #d8b5f5;
border-radius: 10px;
}

/* clears margins making grid-gaps more uniform
" > *" selects all child elements */
.profile > *,
.col.w-40 > * .col.right > *,
.profile .blurbs,
.profile .contact,
div.col.w-40.left div.table-section,
div.col.w-40.left div.url-info {
  margin: 0px;
}
.table-section:not(:last-child){
   width: 178%
}
.blurbs:after{
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 175px;
  background-image: url(https://64.media.tumblr.com/e33ace8b7325345550dfae8f31386e1b/tumblr_pb9e2gUI4G1u4echuo1_1280.pnj);
  background-repeat: no-repeat;
  background-position-x: center;
  background-size: 870px;
}
.blog-preview:after {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 275px;
  background-image: url(https://graphic.neocities.org/63443f88-e9cf-400c-a23a-830bc9bff2f0.gif);
  background-repeat: no-repeat;
  background-position-x: center;
  background-size: 270px;
} 
.general-about:after {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 80px;
  background-image: url(http://fc09.deviantart.net/fs51/f/2009/264/3/d/GameBoy___DS_by_Neslug.gif);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  background-size: 920px;
} 
.general-about:before{
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 175px;
  background-image: url(https://cdn.wikimg.net/en/splatoonwiki/images/f/f7/Abxy_logo.png?20230130002158);
  background-repeat: no-repeat;
  background-position-x: center;
  background-size: 520px;
} 
.mood:after {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 80px;
  background-image: url(https://wilardo.crd.co/assets/images/gallery05/21464b0c.gif?v=a363c8e1);
  background-repeat: no-repeat;
  background-position-x: center;
  background-size: 370px;
}
.url-info:after {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 80px;
  background-image: url(https://wilardo.crd.co/assets/images/gallery05/21464b0c.gif?v=a363c8e1);
  background-repeat: no-repeat;
  background-position-x: center;
  background-size: 370px;
}
:root{
  --logo-blue: #f7a3d8;
  --darker-blue: #f7a3d8;
  --lighter-blue: #f7a3d8;
  --even-lighter-blue: #7ef2a9;
  --lightest-blue: #edcb6d;
  --dark-orange: #7ef2a9;
  --light-orange: #f7a3d8;
  --even-lighter-orange: #7ef2a9;
  --green: #ecf086;
  --dark-green: #ecf086;
}

*{
  box-sizing: border-box;
  border-radius: 10px;
}
html, body{
  margin: 0;
  padding: 0;
}
/* Firefox */
  * {
    scrollbar-width: auto;
    scrollbar-color: #ffd9ff #ff5eae;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 16px;
  }

  *::-webkit-scrollbar-track {
    background: #ff5eae;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #ffd9ff;
    border-radius: 10px;
    border: 3px solid #8000ff;
  }
.heading
{

/* change this url to your windows buttons .png */
background-image: url("https://graphic.neocities.org/tv_8.gif"), linear-gradient(to right, rgba(208,131,255,1), rgba(255,153,206,1), rgba(136,255,129,1)) !important;
border-radius: 10px;
background-repeat: no-repeat !important;
background-position: right center !important;
}
body{
  background-color: #f7a3d8
;
  background-image: url(https://background-tiles.com/overview/mixed-colors/patterns/large/1093.png);
  font-family: 'VT323', monospace;
  font-size: 30px;
  padding: 10px;
 
}
 
img {
}
 
.container{
  width: 90%;
max-width: 1600px;
  border-width: 7px;
  border-style: groove;
  border-color: #f7a3d8;
  margin: 0 auto 10px;
}
details summary{
  cursor: pointer;
  user-select: none;
}
a{
  color: #ecf086;
;
  text-decoration: underline;
}
nav{
  color: #ecf086;
  font-size: 72%;
}
nav .top a:hover{
  text-decoration: underline;
}
nav .links{
  background-color: #7ef2a9;
  padding: 3.5px 16px 5.5px 16px;
}
nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
  content: url("https://wilardo.crd.co/assets/images/gallery02/e16487f0.gif?v=a363c8e1");
  color: #7ef2a9;
}
nav .links a{
  text-decoration: none;
  color: #ecf086;
  font-size: 0.98em;
}
nav .links a:hover{
  text-decoration: underline;
  color: #a8ebed;
}
main{
  background: url(https://cdn.wallpapersafari.com/47/35/Qgpzue.png);
  color: #ffffff;
  padding: 6px 0px;
  font-size: 85%;
}
.logo {
   filter: sepia(100%) hue-rotate(250deg) saturate(900);
}
}
.profile .contact .heading,
.profile .table-section .heading,
.home-actions .heading{
  background: var(--lighter-blue);
  color: #ffffff;
  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: #7ef2a9;
}
.online{
  color: #619eff;
  font-weight: bold;
  font-size: 150%;
}
<style>.online { visibility: hidden;} .online img { content: url("https://media0.giphy.com/media/Y6xlxmQUK358Ez4v9f/200w.gif?cid=82a1493bk5cbdnqi2zbv4ko3hqv2jqts6bsaa48b5323qv0x&ep=v1_gifs_related&rid=200w.gif&ct=s"); animation-name: none; visibility: visible; height: 90px;}</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://i.postimg.cc/prkrM6pY/NxdW535.gif")
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: url("https://autism.crd.co/assets/images/gallery02/0b879b57.png?v=a2781ae8")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: url("https://i.postimg.cc/15CXWbxy/7Xy17Wf.gif")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: url("https://64.media.tumblr.com/5f735b8e979741734187af6818e8aa9b/3b1104d32caa0230-10/s75x75_c1/bc11978cbe0bdf88dfc983007518dea6030a2e69.gifv")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: url("https://wilardo.crd.co/assets/images/gallery18/b722f0df.gif?v=a363c8e1")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: url("https://graphic.neocities.org/tumblr_inline_p752eiirDS1rsi4si_500.gif")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: url("https://graphic.neocities.org/cam_9.gif")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: url("https://graphic.neocities.org/game_10.gif")
}
footer {
background-color: #7ef2a9;
}
@keyframes spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(-360deg); }
}
.general-about .profile-pic img{
position: absolute; left: 180px;
border: 2px solid pink;
        box-shadow: 4px 4px 0 #f7a3d8;
        border-radius: 30px;
        overflow: hidden;
  animation: spin 7s infinite linear;
}
.profile .friends .person img {
        border: 2px solid pink;
        box-shadow: 4px 4px 0 #f7a3d8;
        border-radius: 30px;
        overflow: hidden;
    }
<style>
/* customizable snowflake styling */
.snowflake {
  color: white;
  font-size: 1em;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 5px black;
}
@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;user-select:none;cursor:default;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%;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;animation-delay:4s,2.5s}
</style>
<div class="snowflakes"><div class="snowflake">✨</div><div class="snowflake">👾</div><div class="snowflake">🎶</div><div class="snowflake">💕</div><div class="snowflake">🎵</div><div class="snowflake">💿</div><div class="snowflake">📼</div><div class="snowflake"></div><div class="snowflake">🎮</div><div class="snowflake">🎧</div><div class="snowflake">🎤</div><div class="snowflake">🎹</div></div>


<div style="float:  ; max-height: 800px; position: fixed; right: 1px; bottom: 10px; z-index: 200;"><img src="https://cdn.wikimg.net/en/splatoonwiki/images/thumb/9/93/S_Chirpy_Chips_Artwork.png/334px-S_Chirpy_Chips_Artwork.png" width="309"/></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 1 of 1 comments ( View all | Add Comment )

Rokko

1702417847

using!!! i love this so much ty!!!

Report Comment

Did the interests box automatically reposition itself? If so I might have to make some adjustments because its stretching off the page...

by ✨Orionnn✨; 1702496541; Report

oh yeah.. it looks fine on my end, but others have told me it's stretched and in a different spot??
if you do make some changes, let me know!! :D

by Rokko; 1702505625; Report

Ugh, you might have to find another layout because I might just delete this one. The interests table is extremely finicky, and no matter what I do it just does its own thing, and I can't change the size or position of it.

by ✨Orionnn✨; 1702686740; Report

really?? man... it's okay!! thanks for trying anyway!!!
i think it'll keep using it for a bit more since it's just really cool though!!

by Rokko; 1702764595; Report