Maru's Kh layout

Tags:
Description:

Changing my layout so I'm putting this here in case I wanna come back. Papou & popsicle background Floating profile Spinning pfp Kh gifs Kh color palette used for the words Sora, Riku, Mickey, Donald, Terra, Aqua, Roxas & Ventus friends list (names were not changed) Sora and Kairi intro screen
CD Player
Disc View Options Help
[00] 00:00
▶
❚❚
◼
❚◄◄
◄◄
►►
►►❚
❚ ►
Artist:
Title:
Total Play: 00:00 m:s
Track: 00:00 m:s
Code:

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

<a href="https://www.glitter-graphics.com"><img src="http://dl4.glitter-graphics.net/pub/37/37884gaa8vyxfhc.gif" width="100" height="100"/></a>

<a href="https://www.glitter-graphics.com"><img src="http://dl3.glitter-graphics.net/pub/845/845643m2aguisvwv.gif" width="100" height="100"/></a>

<a href="https://www.glitter-graphics.com"><img src="http://dl8.glitter-graphics.net/pub/1015/1015408zqccb8hxxb.gif" width="100" height="100"/></a>

<a href="https://www.glitter-graphics.com"><img src="http://dl7.glitter-graphics.net/pub/549/549397zv8wc9hqs9.jpg" width="100" height="100"/></a><br/><a href="https://www.glitter-graphics.com" target="_blank"></a>

<a href="https://www.glitter-graphics.com"><img src="http://dl9.glitter-graphics.net/pub/1372/1372639m9p2cbstnz.gif" width="100" height="100"/></a>


<a href="https://www.glitter-graphics.com"><img src="http://dl7.glitter-graphics.net/pub/397/397147q1z5loeaxk.gif" width="100" height="50"/></a>

<a href="https://www.glitter-graphics.com"><img src="http://dl.glitter-graphics.net/pub/2446/2446381gk3ywr6kyk.gif" width="100" height="100"/></a>


<a href="https://www.glitter-graphics.com"><img src="http://dl9.glitter-graphics.net/pub/400/400309tjxov1djoo.jpg" width="100" height="100"/></a>

<a href="https://www.glitter-graphics.com"><img src="http://dl6.glitter-graphics.net/pub/2615/2615366x6pa2o5rfd.gif" width="160" height="96"/></a><br/><a href="https://www.glitter-graphics.com" target="_blank"></a>

<a href="https://www.glitter-graphics.com"><img src="http://dl2.glitter-graphics.net/pub/1373/1373572xjymri04mw.gif" width="100" height="100"/></a>


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

<style>

.profile .friends .person:first-child img:not(.icon){
content:url(https://kh.wiki.gallery/images/thumb/f/f1/Sora_Sprite_KH.png/120px-Sora_Sprite_KH.png);
}
.profile .friends .person:nth-child(2) img:not(.icon){
content:url(https://kh.wiki.gallery/images/2/25/Riku_Sprite_KHRECOM.png);
}
.profile .friends .person:nth-child(3) img:not(.icon){
content:url(https://kh.wiki.gallery/images/thumb/2/27/Roxas_Sprite_KHII.png/79px-Roxas_Sprite_KHII.png);
}
.profile .friends .person:nth-child(4) img:not(.icon){
content:url(https://kh.wiki.gallery/images/thumb/b/b3/Mickey_Mouse_Sprite_KHII.png/120px-Mickey_Mouse_Sprite_KHII.png);
}
.profile .friends .person:nth-child(5) img:not(.icon){
content:url(https://kh.wiki.gallery/images/a/ae/Goofy_Sprite_KH.png);
}
.profile .friends .person:nth-child(5) img:not(.icon){
content:url(https://kh.wiki.gallery/images/5/52/Donald_Duck_Sprite_KH.png);
}
.profile .friends .person:nth-child(6) img:not(.icon){
content:url(https://kh.wiki.gallery/images/thumb/8/87/Aqua_Sprite_KHBBS.png/113px-Aqua_Sprite_KHBBS.png);
}
.profile .friends .person:nth-child(7) img:not(.icon){
content:url(https://kh.wiki.gallery/images/thumb/2/27/Ventus_Sprite_KHBBS.png/97px-Ventus_Sprite_KHBBS.png);
}
.profile .friends .person:nth-child(8) img:not(.icon){
content:url(https://kh.wiki.gallery/images/thumb/b/b7/Terra_Sprite_KHBBS.png/102px-Terra_Sprite_KHBBS.png);
</style>



<!-- (c) Layout created by ☆shawn the fool☆ (https://layouts.spacehey.com/layout?id=86134) -->

<style>.logo{content: url(https://cdn.discordapp.com/attachments/717424066666954795/1234242230915698729/image.png?ex=66300526&is=662eb3a6&hm=5a9d1c1aeb1103e66ab74a24bb7b659282940528bdf4a86a006b07398898c778&);width: 165px !important;height: 42px !important;}</style>




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

<style>
body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed; 
	top: 0; 
	left: 0; 
	z-index: 100;
	background-image: url('https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExdnZybGgzczViM3JoeGZiejFlazJzeGk5dWcxYnFiZmdncDE1MGx2eCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/j9ZogDc7btSMw/giphy.gif');
	background-size: cover;
	background-repeat: no-repeat;
background-position:center;
	animation: yourAnimation 5s ease 0s 1 normal forwards;
	pointer-events: none;
}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 

<style></style>





<!-- (c) Layout created by ⭐️; 311/Tavish (https://layouts.spacehey.com/layout?id=25037) -->

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



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

<style>
/*this gets the fonts for mobile users*/
@import url('https://fonts.googleapis.com/css2?family=Dhurjati&family=Silkscreen:wght@400;700&display=swap');

/*This next section will allow you to edit different aspects of your profile easily.*/
:root{
     --background: url("https://i.pinimg.com/736x/07/e8/09/07e809d5f6dd34a5f2813aad645f114d.jpg"); /*this is the photo behind the text profile.*/

/*these are the colors. be sure to ONLY change the hex code. the colors wont line up with what they actually are, but if you change the names you'll have to manually find everywhere the name is used and change it. The colors of the profile are effected by hex code only, the names are just to make it easier to remember.*/
       --space-cadet: #00FFFFFF;
     --dark-purple: #8ebc4f;
     --wenge: #8ebc4f;
     --eggplant: #b2cbf2;
     --pale-dogwood: #e15239;
     --cambridge-blue: #436C65ff;
     --ash-gray: #ffe37a;

     --profile-color: rgba(71, 54, 69, .0); /*This is for the text profile background. Change the .8 to anything between 0-1 to increase or decrease the opacity.*/
     --header-color: rgba(71, 54, 69, .75); /*This is for the header background. Same rules for the profile transparency apply.*/
     --nav-color: rgba(71, 54, 69, .75); /*Navigation bar*/
     --footer-color: rgba(35, 34, 55, .75);/*Footer*/

/*this edits the backgrounds of your table of interests and comments.*/
     --table-background: rgba(203, 176, 165, .16);
     --border-color: rgba(71, 54, 69, .8);
     --border-color2: rgba(71, 54, 69, .2);
     --header-color2: rgba(71, 54, 69, .4);
     --curve:3px;

/*edit these to customize your table of interest section*/
     --topic-1:"General";
     --topic-2:"Songs";
     --topic-3:"Flowers";
     --topic-4:"Anime";
     --topic-5:"Pets";
     --topic-6:"DnD";

     --online-icon: url("https://64.media.tumblr.com/9264152d8dfc495de1cf95b7be5ad3df/tumblr_pkb83wljkK1y3ts9oo1_400.gif"); /*Edit this to edit the online status*/

     --supporter: url("https://i.ibb.co/Lt7SLtQ/OIG-removebg-preview.png"); /*Edit this to edit the supporter award*/

/*These are the different fonts*/
     --headers:'Silkscreen', sans-serif;
     --body:'Dhurjati', sans-serif;

}




/* this is the cursor css. delete this or edit it to be your own if you dont like it. the link for custom cursors is listed before the actual code!*/
/* Start http://www.rw-designer.com/cursor-extern.php?id=130194 */ * {http://www.rw-designer.com/cursor-extern.php?id=130194), auto !important;} /* End https://www.cursors-4u.com */
/*this next bit is the background behind the main profile.*/
body, .bodycontent{
    background:var(--background);
    background-attachment: fixed!important;/*this is what allows the background to scroll with you. change "fixed" to "scroll" if you want this feature turned off*/
    background-size: 100%; /*fits the background to the device being used. Mobile phones will just have a repeating background. if you don't mind it looking stretched out when using phones, add a 100% right before the semicolon.*/
    border-color:#00000000;
    border-width:55px; 
    border-style:dotted;
}
main{
    background:none;
    padding-top:0px!important;
}
.profile{
    background-color:var(--profile-color)!important;
    padding-top: none!important;
    border: ridge 10px;
    border-left: groove 10px;
    border-color:var(--eggplant);
    border-top:none;
    
}

nav ul{
    background-color: var(--nav-color)!important;
    border: ridge;
    padding-top:none!important;
    border-left: groove 10px;
    border-right: ridge 10px;
    border-color:var(--eggplant);
    border-top:none;
    border-bottom:none;
}
.top{
    background-color: var(--nav-color)!important;
     padding-top:none!important;
    border: groove 10px;
    border-right: ridge 10px;
    border-color:var(--eggplant);
    border-bottom:none;
}
footer{
    background:var(--footer-color)!important;
}
footer a{
    color:var(--pale-dogwood)
}
p, .count{
    color:var(--pale-dogwood);
    font-family: var(--body);
    font-size: 15px;
}
a{
    color:var(--ash-gray)!important;
    text-shadow:none!important;
    font-family: var(--body);
}
a:hover, a:active, .blog-entry .kudos-btn:hover, .blog-entry .kudos-btn:active{
	color:var(--cambridge-blue)!important;
}
.container{
color:var(--pale-dogwood)!important;
}
.friends-grid p{
    color:var(--wenge)!important;
text-align:center!important}
.friends-grid img{
    border-radius:500px;
    box-shadow: 3px 3px var(--space-cadet);
    object-fit: cover;
    height:100px;
    width:100px;
}
h1, h2, h3, h4, h5{
    font-family: var(--headers);
    color: var(--wenge);
    text-align: center!important;
}
h1 a, h2 a, h3 a, h4 a, h5 a{
    font-family: var(--headers);
}
td{
    background: var(--table-background)!important;
}
.section h4{
    color:var(--wenge)!important;
}
.blurbs .inner .section:nth-child(1) h4{ 
    font-size:0; 
}
.blurbs .inner .section:nth-child(1) h4:before{ 
    content: "KH FAN💛❤️"; /* put your own "about me" header here*/
    font-size: 18px;
    
}
.blurbs .inner .section:nth-child(2) h4{ 
    font-size:0; 
    
}
.blurbs .inner .section:nth-child(2) h4:before{ 
    content: "ABOUT ME"; /*put your own "who id like to meet" header here*/
    font-size: 18px;
    
}
.blurbs .heading{
    display:none;
}
.contact a{
    font-size: 12px;
}
/* this next bit hides the URL info*/
.profile .url-info{
    display:none;
}
/*this gives everything the border and background*/
.contact, .mood, .table-section, .blog-preview, .friends, .profile .blurbs .inner, .profile h1{
    background:var(--header-color)!important;
    border:solid var(--border-color) 2px!important;
    border-radius: var(--curve)!important;
}
/*this is just some fixing things*/
.contact .heading, .friends .heading, .profile .table-section .heading, .profile .friends p{
    background: none!important;
    text-align: center!important;
}
.blog-preview h4{
    background-color:var(--header-color2);
}
.blog-preview, .mood{
    text-align: center;
}
/*this next bit fixes the friends and comments sections from being off center*/
DIV.friends:nth-child(3){
    text-align:center;
}
.profile .friends .heading{
    padding-left:50px;
}
#comments .heading{
    padding-left:0px!important;
}
table.comments-table p{
    text-align:left!important;
}
#comments, .contact{
    border-top:none!important;
    border-bottom:solid 2px var(--border-color)!important;
    border-radius: var(--curve);
    border-top-right-radius: 0px!important;
    border-top-left-radius: 0px!important;
}
.mood, .friends{
    border-bottom:0px!important;
    border-bottom-left-radius: 0px!important;
    border-bottom-right-radius: 0px!important;
}
.contact .heading, .profile .friends .heading h4{
    background-color:var(--header-color2)!important;
}
.profile .friends .heading h4{
    border-radius:3px!important;
}
.profile .friends .heading{
    padding-top:5px;
}
#comments{
   Height:900px;
   Overflow:scroll;
}
.comments-table .report{
    font-size:11px!important;
}
.comments-table .report .icon{
    content: url(https://i.ibb.co/rp8jtXY/output-onlinegiftools-1.gif);
   
}
.comments-table td:last-child img{
    height:12px;
    width:12px;
    Border:0px solid!important;
    Border-radius:0px!important;
}
.comments-table td{
    background-color:var(--header-color2)!important;
}
.comments-table td:first-child img{
    height:90px;
    width:90px!important;
    border-radius: 500px!important;
    Object-fit:cover;
}
.comments-table{
    border-radius:var(--curve)!important;
    border:none;
}
.comments-table td{
    border-color:white;
}
.comments-table p{
Font-size:15px!important;
}
.comments-table td:first-child p{
Font-size:15px!important;
text-align: center!important;
}
.comments-table tr:first-child td:first-child{
    border-top-left-radius: var(--curve);
}
.comments-table td:first-child{
    font-size:15px;
    text-align:center;
Padding:15px;
}
.comment-table tr:last-child img{
Border-radius:0px!important;
Border:none!important;
}
.comments-table tr:first-child td:last-child{   
    border-top-right-radius:var(--curve)!important;
}
.comments-table tr:last-child td:first-child{
    border-bottom-left-radius: var(--curve);
}
.comments-table tr:last-child td:last-child{
    border-bottom-right-radius: var(--curve);
}

/*this next string makes the profile photo into a circle and fits photos into it*/

.profile-pic img{
    height:160px!important;
    width:160px!important;
    border-radius:500px;
    border:var(--border-color) 2px solid;
    object-fit:cover;
    overflow:hidden;
}
.details{
    background-color:var(--header-color);
    border:solid var(--border-color) 2px;
    height:160px;
    border-top-left-radius: 80px;
    border-bottom-left-radius: 80px;
}


/*this next bit is hides the original interest labels*/
.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{
  letter-spacing:normal !important;
  Text-shadow: 2px 2px var(--pale-dogwood);
}
/*and this is what customizes them. it can easily be done in the root*/
.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{
  content:var(--topic-1);
}
.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{
  content:var(--topic-2)!important;
}
.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{
  content:var(--topic-3)!important;
}
.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{
  content:var(--topic-4);
}
.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{
  content:var(--topic-5);
}
.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{
  content:var(--topic-6);
}
/*this is where the online image is changed. it looks funky from your perspective with the edit profile link, but it looks fine from other people's point of view*/
.online img{
font-size: 0;}
.online:before{
display:inline-block;
width:15px;
height:15px;
content:"";
background:var(--online-icon); no-repeat 0 0;
background-size:100%; 
animation: blink 3s;
animation-iteration-count: infinite;}

@keyframes blink{

  0%{opacity:1;}

  50%{opacity:0;}

  100%{opacity:1;}

}
/*This changes the online text color. It can be easily changed in the root.*/
.online {
    Color:var(--space-cadet);
}
.supporter img{
font-size: 0;}



.supporter:before{
display:inline-block;
width:15px;
height:15px;
content:"";
background:var(--supporter); no-repeat 0 0;
background-size:100%;

}
.awards a{
    Color:var(--space-cadet);
}
.mood{
    text-align:center;
padding-left:3px;
}

nav, .col{
color: var(--pale-dogwood)!important;
}
.col, main, footer, 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>


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

<!--------- CD Player Code Start --------->
<!--------- MUSIC PLAYER ITSELF, CHANGE EMBED URL TO VIDEO URL OF YOUR SONG --------->
<iframe width="0" height="0" src="https://www.youtube.com/embed/WyBxVpE4Pfg//?&;amp;;autoplay=1&;loop=1&" title="music" frameborder="0" allow="autoplay;" loading="lazy"></iframe>
<style>
/* customization. change your artist, title and album cover respectively */
:root {
--artist:"Kairi I";
--title:"2.5 remix (extended 30m)";
--albumcover: url(https://media2.giphy.com/media/AqV8uSb8ptxyo7Wyog/200w.gif?cid=6c09b952rst2hnvxzyvo3ww62a1gczwz8g83av4ovnlb7jq6&ep=v1_gifs_search&rid=200w.gif&ct=g);
}

/* the code itself */
.status-bar,.title-bar,.title-bar-controls{display:flex}.window,p#butt{background:silver;margin:auto}p#text,p#text2{box-shadow:inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;box-sizing:border-box;margin-block:3px}p#butt,p#text,p#text2{box-sizing:border-box}p#label,p#text,p#text2{margin-block:3px}.status-bar,.title-bar-text,.toptoptop,p#butt,p#label,p#text2{user-select:none}@font-face{font-family:"Pixelated MS Sans Serif";font-style:normal;font-weight:400;src:url(https://unpkg.com/98.css@0.1.20/dist/ms_sans_serif.woff) format("woff");src:url(https://unpkg.com/98.css@0.1.20/dist/ms_sans_serif.woff2) format("woff2")}@font-face{font-family:"Pixelated MS Sans Serif";font-style:normal;font-weight:700;src:url(https://unpkg.com/98.css@0.1.20/dist/ms_sans_serif_bold.woff) format("woff");src:url(https://unpkg.com/98.css@0.1.20/dist/ms_sans_serif_bold.woff2) format("woff2")}.window{text-shadow:none;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #dfdfdf,inset -2px -2px grey,inset 2px 2px #fff;padding:3px}.window img{filter:none!important}.window *{-webkit-font-smoothing:none;font-family:"Pixelated MS Sans Serif",Arial;font-size:11px;text-shadow:inherit}.title-bar{align-items:center;background:linear-gradient(90deg,navy,#1084d0);justify-content:space-between}.title-bar-text{color:#fff;font-weight:700;letter-spacing:0;margin-right:24px;line-height:15px}.title-bar-controls p#butt{display:block;min-height:14px;min-width:16px;padding:0}.title-bar-controls p#butt:active{padding:0}.title-bar-controls p#butt:focus{outline:0}.title-bar-controls p#butt.minimize{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M0 0h6v2H0z'/%3E%3C/svg%3E");background-position:bottom 3px left 4px;background-repeat:no-repeat}.title-bar-controls p#butt.maximize{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='9' height='9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 0H0v9h9V0zM8 2H1v6h7V2z' fill='%23000'/%3E%3C/svg%3E");background-position:top 2px left 3px;background-repeat:no-repeat}.title-bar-controls p#butt.close{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h2v1h1v1h2V1h1V0h2v1H7v1H6v1H5v1h1v1h1v1h1v1H6V6H5V5H3v1H2v1H0V6h1V5h1V4h1V3H2V2H1V1H0V0z' fill='%23000'/%3E%3C/svg%3E");background-position:top 3px left 4px;background-repeat:no-repeat;margin-left:2px}.status-bar{gap:1px;margin:0 1px}p#butt{white-space:nowrap;}.buttontos,p#butt,p#label,p#text,p#text2{display:inline-block}.status-bar-field{box-shadow:inset -1px -1px #dfdfdf,inset 1px 1px grey;flex-grow:1;margin:0;padding:2px 3px}.window-body{margin:8px}p#butt{border:none;border-radius:0;min-height:23px;min-width:75px;padding:6px 12px 0;text-shadow:0 0 #222;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf;color:#000}p#butt:active{box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey;text-shadow:1px 1px #222}p#butt:focus{outline:#000 dotted 1px;outline-offset:-4px}p#butt::-moz-focus-inner{border:0}.toptoptop{text-align:left;margin-top:-3px!important;margin-bottom:5px!important;margin-inline:0px!important;}.toptoptop span{border:1px solid silver;padding:2px 4px}.toptoptop span:hover{border-top:1px solid #fff;border-left:1px solid #fff;border-bottom:1px solid gray;border-right:1px solid gray}.toptoptop span:focus{border:1px inset #fff}.window{color:#000!important;font-family:"Pixelated MS Sans Serif"!important}p#text:active{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h16v17H0V0zm1 16h14V1H1v15z' fill='gray'/%3E%3Cpath fill='silver' d='M1 1h14v15H1z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 7H5v1h1v1h1v1h1v1h1v-1h1V9h1V8h1V7z' fill='%23000'/%3E%3C/svg%3E")}p#text{background-color:#fff;padding:4px;width:85%;text-align:left;font-size:12px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 6H4v1h1v1h1v1h1v1h1V9h1V8h1V7h1V6z' fill='%23000'/%3E%3C/svg%3E");background-position:top 2px right 2px;background-repeat:no-repeat}p#text.artist:after{content:var(--artist)}p#text.title:after{content:var(--title)}p#text2:before{content:"";display:block;position:absolute;top:1px;left:1px;background:var(--albumcover);width:98%;height:96%;opacity:.5;background-size:cover;background-position:center;z-index:-1}p#text2{position:relative;padding:13px 4px;width:54%;font-size:20px;text-align:center;color:olive;background:#000;z-index:999}#butt,p#label{font-size:12px}p#label{width:fit-content;margin-right:5px}.ahhh{text-align:right}.title-bar{padding:2px}.title-bar-text img{vertical-align:bottom;margin-inline:2px}.buttontos{width:45%;height:54px;vertical-align:top;text-align:center}#butt{color:#000;text-shadow:1px 1px #fff;line-height:10px}#butt:not(:first-child){text-indent:-5px;font-weight:700}#butt:nth-child(3) span{display:block;transform:translate(2px,-2px) scale(1.2)}#butt:not(:first-child,:nth-child(2),:nth-child(3)){text-indent:-8px;font-weight:700;letter-spacing:-4px;font-size:10px}#butt:nth-child(8){text-indent:-8px;font-weight:700;letter-spacing:-1.5px;white-space:nowrap;text-shadow:none;transform:translateY(1px)}#butt:nth-child(8) span{display:block;transform:rotate(-90deg) translate(2px,0) scaleY(1.4);color:#000}.title,.artist{height:23px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-right:20px!important;vertical-align: bottom;}</style><div class="window" style="width:320px"><div class="title-bar"><div class="title-bar-text"><img src="https://images2.imgbox.com/42/89/JIRoQjUo_o.png"/>CD Player</div><div class="title-bar-controls"><p id="butt" class="minimize"></p><p id="butt" class="maximize"></p><p id="butt" class="close"></p></div></div><div class="window-body"><p class="toptoptop"><span><u>D</u>isc</span> <span><u>V</u>iew</span> <span><u>O</u>ptions</span> <span><u>H</u>elp</span></p><p id="text2">[00] 00:00</p><div class="buttontos"><p id="butt">▶ </p><p id="butt" style="min-width:20px;max-width:20px;margin-inline:0px">❚❚ </p><p id="butt" style="min-width:20px;max-width:20px"><span>◼</span> </p><p id="butt" style="min-width:20px;max-width:20px;margin-top:5px">❚◄◄ </p><p id="butt" style="min-width:20px;max-width:20px;margin-top:5px;margin-left:0px">◄◄ </p><p id="butt" style="min-width:20px;max-width:20px;margin-top:5px;margin-left:0px">►► </p><p id="butt" style="min-width:20px;max-width:20px;margin-top:5px;margin-left:0px">►►❚ </p><p id="butt" style="min-width:20px;max-width:20px;margin-top:5px;margin-left:0px"><span>❚ ►</span></p></div><div class="ahhh"><p id="label"><u>A</u>rtist:</p><p id="text" class="artist"></p><p id="label">Title:</p><p id="text" class="title"></p></div></div><div class="status-bar"><p class="status-bar-field">Total Play: 00:00 m:s</p><p class="status-bar-field">Track: 00:00 m:s</p></div></div>
<!--------- CD Player Code End --------->
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 )