Splatoon ABXY Theme

Tags: splatoon, video games, music, retro
Description:

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