Deepsea Metro Themed Layout - SPLATOON!

Tags: splatoon, game, deepseametro, dedf1sh

Description:

There is more to the layout but I couldn't fit it in one picture.. 😔 Comment if you're using!! Also the layout includes #8 Regret (By Dedf1sh) as a background song!! And also the profile picture is round and spinning!

Preview:

click on the image for a larger preview

Code:

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

<style>
.container {
width: 90%;
max-width: 2500px;
}
</style>

<style>
body{background:url("https://i.postimg.cc/sDmN2Lss/jj.jpg") no-repeat fixed; background-size:cover;}
</style>



<style>
main {
  background-color: transparent;
  color: #ffffff;
}
</style>

<style>
.profile .blurbs .heading, .profile .friends .heading {
  background-color: #1A1A1A;
  color: #ffffff;
border-radius: 15px;
}
</style>
<style>
.profile .contact, .profile .table-section, .profile .url-info {
  border: 3px solid #1A1A1A;
 border-radius: 15px;
}
</style>

<style>
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
  background-color: #1A1A1A;
  color: #ffffff;
border-radius: 5px;
}
</style> 

<style>
.profile .table-section .details-table td {
  background:url("https://images3.alphacoders.com/779/779019.png");
  color: #ffffff;
border-radius: 15px;
}
</style>

<style>
.profile .friends .comments-table td {
  background:url("https://images3.alphacoders.com/779/779019.png");
border-radius: 15px;
}
</style>

<style>
.inner .comments-table {border: 5px solid #1A1A1A;
border-radius: 20px;}
</style>

<style>
td .comment-replies {border: 4px solid #1A1A1A;
border-radius: 20px;}
</style>

<style>
footer {
border-radius: 15px; 
background-color: #1A1A1A;
 color: #ffffff;
}
</style>

<style>
 .blurbs .section h4{display: none !important;}
</style>

<style>
.contact .inner a img {
font-size: 0;
}
.contact .inner a img:before {
font-size: 1em;
display: block
}
</style>
   
<style>
.nav .top , nav .links{
 
background: transparent;
 
text-align: center;
 
}
</style>

<style>
:root{
/* [background color]: #a8948d; */
 --logo-blue:url(https://cdn.wikimg.net/en/splatoonwiki/images/thumb/f/f7/S2_Graffiti_Gallery_Intro.png/800px-S2_Graffiti_Gallery_Intro.png?20230407210246);
}
</style>


<style>
@import url("https://fonts.googleapis.com/css2?family=Sedgwick+Ave+Display&display=swap");
.w-40 h1{
font-family: Sedgwick Ave Display;
font-size: 40px;
text-align: center;
background: -webkit-linear-gradient(#fff, #fff);

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 0px black;
}
</style>

<style>.online { visibility: hidden; } .online img { content: url("https://cdn.wikimg.net/en/splatoonwiki/images/thumb/1/12/S2_Mem_Cake_Jr._Mark.png/100px-S2_Mem_Cake_Jr._Mark.png"); animation-name: none; visibility: visible; height: 45px; width: 45px; }</style>

<img src="https://i.postimg.cc/Kjk14n7r/artwork-central-station-medium-up-ezgif-com-webp-to-jpg-converter-removebg-preview.png"/>

<style>main:before {
	width: 100%;
	height: 125px ;
	display: block;
        border-radius: 25px;
	content: "";
	background-image: url('https://splatoon.nintendo.com/base/_images/gallery/section-hero-splatoon-2-octo-medium-up.webp');
	background-position: center center;
	background-size: cover;
}
@media only screen and (max-width: 600px) {
	main:before{
		height: 200px;
	}
}</style>

<style>
.col.right .profile-info {border: 4px solid transparent;
border-radius: 20px;}
</style>

<style>
 .comments-table td:first-child img {
        border-radius: 500px;
    }
</style>

<style>
 .profile .friends .person img {
        border-radius: 500px;
    }
</style>

<style>
.profile .friends .person img:not(.icon):hover {
    transform: scale(1.2);
    transition: 0.5s ease;
}
.profile .friends .person img:not(.icon) {
    transition: 0.5s ease
}
</style>
 
<style>
h3 , h4, h5, .url-info b {
    color: #ffffff;  
}
</style>
 
<style>
a {
     color: #ffffff;
}
</style>
 
<style>
p, h2 {
     color: #ffffff;
}
</style>
 
<style>
h1, .count, .friends a p {
     color: #ffffff;
} 
</style>
 
<style>
p {
color: #ffffff;
}
</style>
 
<style>
main a {
  color: var(--#ffffff);
}
</style>

<style>
p {color : #ffffff;}
</style>

<style>

li.active .icon { content:url('https://cdn.wikimg.net/en/splatoonwiki/images/e/e8/S2_Mem_Cake_iShipIt_Logo.png?20180616233530'); width: 20PX;height: 20px;}

</style>

<style>
nav .top .left .logo {
    width: 165px;
    height: 42px;
    content: url(https://i.ibb.co/S5zgBpF/IMG-8106-removebg-preview.png);
</style>

<style>
.profile .friends .person p{

    color: #fff;
}
</style>

<style>
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Londrina+Solid:wght@100;300;400;900&family=Sedgwick+Ave+Display&display=swap');
p{
  font-family: 'Londrina Solid', sans-serif;
  font-size: 150%;
}
h1,h2,h3,h4,h5{
  font-family: 'Londrina Solid', sans-serif;
  font-size: 150%;  
</style>




<style>
/* width */
::-webkit-scrollbar {
  width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px black; 
  border-radius: 0px;
background: #353831;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: url("https://i.postimg.cc/ZKdkqLnR/images-ezgif-com-webp-to-jpg-converter-1.jpg"); 
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background:url("https://i.postimg.cc/0QGNwqct/pixlr.jpg"); 
}
</style>
   

<style>

@keyframes type{

  0%{

    width:0ch;

  }

  

  100%{

    width:27ch;

  }

}



@keyframes blink{

  0%{opacity:1;}

  50%{opacity:0;}

  100%{opacity:1;}

}



.col, main, footer, nav::before, .online, nav .links, nav .top {

animation: float 4s;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out;

}



.col, main, footer, nav::before, .online, nav .links, nav .top {

animation: float 4s;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out;

}

@keyframes float {

0% { transform: translate(0, 0px);

}

50% {

transform: translate(0, 8px);

}

100% {

transform: translate(0, -0px);

}
</style>

<style>
@keyframes spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(0deg); }
}
.general-about .profile-pic img{
  border-radius: 50%;
  animation: spin 7s infinite linear;
}
</style>

<style>
@keyframes spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(-360deg); }
}
.general-about .profile-pic img{
  border-radius: 50%;
  animation: spin 7s infinite linear;
}
</style>

<iframe width="0" height="0" src="https://www.youtube.com/embed/1tIk7hK8JJc?si=E-Br2qjP21EzBupj//?&;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>body { cursor: url('data:image/x-icon;base64,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'), auto; }</style>

<style>
html:before {
  animation: grain 8s steps(10) infinite;
  background-image: url(https://i.ibb.co/d2Np1d2/static.gif);
  background-size: 200px !important;
  content: '';
  height: 300%;
  left: -50%;
  opacity: .3; /*Change this value (0 - 1) to change the intensity of the effect)*/
  position: fixed;
  top: -110%;
  width: 300%;
  pointer-events:none;
}
@keyframes grain {
  0%, 100% { transform:translate(0, 0) }
  10% { transform:translate(-5%, -10%) }
  20% { transform:translate(-15%, 5%) }
  30% { transform:translate(7%, -25%) }
  40% { transform:translate(-5%, 25%) }
  50% { transform:translate(-15%, 10%) }
  60% { transform:translate(15%, 0%) }
  70% { transform:translate(0%, 15%) }
  80% { transform:translate(3%, 35%) }
  90% { transform:translate(-10%, 10%) }
}
</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.

Comments

Displaying 17 of 17 comments ( View all | Add Comment )

FRIZZK	1739828146 Using ^^ Report Comment
Emiliea_	1738754960 So cool! - gonna use :0) Report Comment
felicitystarz	1738232757 using!! Report Comment
n1cotine💥	1736786912 usinghg Report Comment
jAda :P	1734390248 using ^_^ Report Comment
ino	1734300960 using >,..,< Report Comment
Starrylikethesoda	1734047762 Using! Report Comment
Octo_Lingg	1733116232 Using ╰(´︶`)╯♡ Report Comment
Octo_Lingg	1733116230 Using ╰(´︶`)╯♡ Report Comment
I34tRats>_<	1732941787 Using! Report Comment
💊Sp4rkl1ng_p1lls💊	1730749447 using!! Report Comment
sugar!!!	1727044718 using!! Report Comment
Rain	1724710039 Using!!! Report Comment
Y1Y3N!!	1722790295 using <3 Report Comment
sploinkie	1721334036 This is super nice I'm using this! Report Comment
Neptune ★ ˚₊·	1716869087 hey! hi! I really love this layout but could you tell me how to remove the spinning pfp? I love everything else though :} Report Comment Yep, sure! Just remove this: @keyframes spin{ from{ transform:rotate(0deg); } to{ transform:rotate(-360deg); } } .general-about .profile-pic img{ border-radius: 50%; animation: spin 7s infinite linear; } (you can keep the part from „.general-about” if you still want the PFP to be round! Also thank you<33) by SUNNY!!; 1716901861; Report
CJ (AutoPlay Music)	1712901316 Cute!! Def using. Report Comment Tyyy!! by SUNNY!!; 1713006711; Report