Jet Set Radio Edition

Tags: jet set radio
Description:

I think I started this profile like a week ago
Preview:

click on the image for a larger preview
Code:

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

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

<marquee behavior="alternate">(Hi I change my profile every 2 seconds..enjoy the special interest moment while it lasts lol :D)</marquee>

<div style="left: 0; width: 100%; height: 352px; position: relative;"><iframe src="https://open.spotify.com/embed/playlist/1h1tbg06YcMn1j2GI2c0QQ?utm_source=oembed" style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;" allowfullscreen="" allow="clipboard-write; encrypted-media; fullscreen; picture-in-picture;"></iframe></div>

<style>
          /* corner image. hidden on mobile */
.image {
    background: url('https://i.ibb.co/hM0L59w/242-E837-C-1883-44-D9-8-E1-D-50493-DB7-F23-F.gif') no-repeat;
    background-size: 100%!important;
    position: fixed;
    right: 0px;
    bottom: 0px;
    height: 320px;
    width: 300px;
    z-index: 1000;
    opacity: 1;
}
@media (max-width: 600px) {
.image{display:none;}
}
</style>

<style>
.general-about{
  position: relative;
  margin-top: 30px;
}
.general-about .profile-pic::before{
  content: '';
  background: url('https://media.giphy.com/media/rXyIg5TrQ3jYuZME1G/giphy.gif') no-repeat;
  background-size: cover;
  display: block;
  width: 100px;
  height: 100px;
  z-index: 999;
  position: absolute;
  top: -43px;
  left: -32px;
}
</style>

<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>

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

<!-- REPLACE THE URL WITH YOUR UPLOADED GIF --> 
<style>
.profile-pic > img { display:none; }
.profile-pic:after { background-image: url("https://i.pinimg.com/originals/c3/ed/0c/c3ed0c27cb59c6164860571f69df5dac.gif"); display: inline-block; content:"" }
.blog-entry .profile-pic:after, .bulletin .profile-pic:after { background-size: cover; width: 110px; height: 110px; } /* blogs, bulletins */
.general-about .profile-pic:after { background-size: cover; width: 160px; height: 160px; } /* profile */ 
</style>

<style>

.logo {

content:url("https://cdn2.steamgriddb.com/file/sgdb-cdn/logo/145f9d7281f0d3e05be5d7038e2b3467.png");

}

</style>

<style>
main:before {
	width: 100%;
	height: 300px;
	display: block;
	content: "";
	background-image: url(https://cdn.vox-cdn.com/uploads/chorus_asset/file/2650984/JetSetRadio_001.1348134551.jpg);
	background-position: center center;
	background-size: cover;
}
@media only screen and (max-width: 600px) {
	main:before{
		height: 200px;
	}
}
</style>
<style>
.profile .profile-info {
	background-image: url(https://www.gran-turismo.com/gtsport/decal/6125484844965200392_1.png);
	padding: 20px;
	border: none;
	border-radius: 10px;
	box-shadow: 4px 4px 0 #2d1157;
	text-align: center;
	animation: nineties2 2s ease 0s infinite normal none;
	animation-delay: .15s;
	border: none;
}
</style>

<style>
.profile .blurbs .section :nth-child(2) {
	background-image: url(https://64.media.tumblr.com/485ee1377a78e0cb1f41856f24a0a4b1/tumblr_p9o5597asd1xq94wqo1_540.gif);
     /* margin-top: -5px; */
	padding: 18px;
	box-shadow: 4px 4px 0 #000;
}
</style>


<style>
.profile {
background-image:url(
https://m.media-amazon.com/images/M/MV5BYmUwYTgyN2UtNjYyOS00YjMwLTg4ZmUtODNhOGJmZjFhNDFmXkEyXkFqcGdeQXVyMTA0MTM5NjI2._V1_.jpg);
  background-repeat: repeat;
    border-radius: 12px;
}
</style>
<style>
.general-about {
	background-image: url(https://64.media.tumblr.com/ac10c0f8a1c2038a41350a526a3883da/tumblr_p8ekwdXauQ1xq94wqo1_540.gif);
	padding: 20px;
	border-radius: 10px;
	box-shadow: 4px 4px 0 #2d1157;
	text-align: center;
	animation: nineties2 2s ease 0s infinite normal none;
	animation-delay: .46s;
}
</style>



<style>
.friends{
   background-image: url(https://64.media.tumblr.com/10451bc65bdcf320ec13fbc1e4005c9d/tumblr_p9o5yr0mDl1xq94wqo1_400.gif);
   background-size: 100%;
   border-style:Double; 
   border-width:6px; 
   border-radius: 5px;
   border-color: white}
</style>




<style>
.w-40 h1{
  font-family: 'Shojumaru';
  font-size: 50px;
  text-align: center;
  background: #62b72f;
    background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: transparent ;
h1,h2,h3,h4,h5{
font-family: 'Shojumaru';
font-size= 150%;
background: transparent ;
}
p{
font-family: 'Shojumaru';
font-size= 200%
}
</style>
<style>
@import url("https://fonts.googleapis.com/css?family=Shojumaru");


.w-40 h1{
font-family: Shojumaru;
font-size: 20px;
text-align: center;
background:#f0e000;
-webkit-background-clip: text;
-webkit-text-fill-color: #f0e000;
-webkit-text-stroke: 0px
 ;
}
:root {
--logo-blue: #62b72f;
--darker-blue:t#00bcf0;
--lighter-blue: #62b72f;
--even-lighter-blue: #62b72f;
--lightest-blue: #016045 ;
--dark-orange: transparent ;
--light-orange: #1a1e21 ;
--even-lighter-orange: #1a1e21;
--green: #B8A2DO;
}
</style>
<style>
body{background-image:url("https://i.pinimg.com/736x/37/2a/19/372a191f782316acf67f7ed53f0abb15.jpg");
background-attachment:fixed;
background-repeat:no-repeat;
background-position:center,center;
background-size: 110% 110%}
main {
background-color: #62b72f;
color: #D98437
padding 6px 0px;
font-size: 80%
background-size: 110% 110%;
background-attachement: fixed;
border:  #1a1e21;
border-radius: 30px;
}
</style>



<style>
main {
background-color: #62b72f;
color: #D98437
padding 6px 0px;
font-size: 80%
background-size: 110% 110%;
background-attachement: fixed;
border:  #1a1e21;
border-radius: 30px;
}
</style>
<style>
.general-about {
  background-color: #f4661a;
}
</style>

<style> h1, h2, h3, h4,h5,a, p, nav label, .section {color: #f0e000;}


h1, h2, h3, h4, h5, a, p, nav label, .section{ text-transform:lowerercase !important;
}

.online{
  color: #f0e000!important;  
}
</style>
<style>
footer {
border-radius: 15px;
background-image: url(https://knowtechie.com/wp-content/uploads/2020/11/sega-logo-arcade.jpg);
color: sky blue;
top: 70%
}
</style>

<style>
body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	background-image: url('https://64.media.tumblr.com/2cdb4b8c691651d47c9bdf8d00cd327f/tumblr_p14950Qh0z1ramnmyo1_400.gif');
	z-index: 100;
	background-size: cover;
	background-repeat: no-repeat;
background-position:center;
	animation: slideDown 6s ease 0s 1 normal forwards;
	pointer-events: none;
}

@keyframes slideDown { 0.0%{ } 75%{ transform: translate(0,0); } 100%{ transform: translate(0,100vh); } }
*{
  border-radius: 9px;
}
</style>

<style>
.contact {
  border-radius: 8px;
  background-image: url(https://i.redd.it/uinohl3fn9z81.gif);
  background-position: right top;
  background-repeat: repeat;
background-attachment: scroll;
Width: 300px;
Height:180px;

color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px Blue, 0 0 3px Darkblue; }
}
</style>
<style>
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading{
  border-radius: 6px 6px 9px 9px;
}
</style>

<style>
.online { visibility: hidden; } .online img { content: url("https://i.kym-cdn.com/photos/images/original/002/710/640/a06.gif"); animation-name: none; visibility: visible; height: 43px; width: 90px; }
.profile-pic {
border-radius: 500px;
overflow: hidden;
}
</style>

<style>
.profile-pic img,.friends-grid img,.comments-table img{border-radius:5px;}
</style>


<style>
/*change only notification bell*/
nav .links li .icon{
content: url('https://win98icons.alexmeub.com/icons/png/newspaper_mail.png');
</style>

<style>
.w-40 h1{
  font-family: 'Shojumaru';
  font-size: 50px;
  text-align: center;
  background: #62b72f;
    background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: transparent ;
}
h1,h2,h3,h4,h5{
font-family: 'Shojumaru';
font-size= 150%;
background: transparent ;
}
p{
font-family: 'Shojumaru';
font-size= 200%
}

@import url("https://fonts.googleapis.com/css?family=Shojumaru");

.w-40 h1{
font-family: Shojumaru;
font-size: 20px;
text-align: center;
background:#f0e000;
-webkit-background-clip: text;
-webkit-text-fill-color: #f0e000;
-webkit-text-stroke: 0px
 ;
}
:root {
--logo-blue: #62b72f;
--darker-blue:t#00bcf0;
--lighter-blue: #62b72f;
--even-lighter-blue: #62b72f;
--lightest-blue: #016045 ;
--dark-orange: transparent ;
--light-orange: #1a1e21 ;
--even-lighter-orange: #1a1e21;
--green: #B8A2DO;
}
<style></style>

<style>

table, th, td {

border: 0px solid;

}

:root {

--topic1: "Interest Central";
--topic2: "Current Interest Hub";
--topic3: "Top Tracks Terminal";
--topic4: "Art Station";
--topic5: "Favorite Character Establishment";
--topic6: "Treasured Ao3 Stories Space";

}

.table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.details-table tr td:first-child p::after{


color:var(--links) !important;
letter-spacing:normal !important;
text-shadow: 2px 2px #f0e000 !important;
filter: brightness(95%) !important;


}
.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{
content: var(--topic1);
}
.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{
content: var(--topic2);
}
.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{
content: var(--topic3);
}
.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{
content: var(--topic4);
}
.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{
content: var(--topic5);
}
.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{
content: var(--topic6);
}

</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 1 of 1 comments ( View all | Add Comment )
YuiKek
1725385279
awesome sauce :3
Report Comment