Orange iPod commercials layout

Tags: apple, 2000s, orange, gif, layouts, shuffle, music, autoplay, animation, y2k

Description:

Change the song url to whatever you please

Change #f59010 to whatever iPod color you need

Comment "using" if you do

Preview:

click on the image for a larger preview

Code:

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

<iframe width="0" height="0" src="https://www.youtube.com/embed/KBobN-r4tag?si=lWWZQTR4LlEKDML0//?&;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:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed; 
	top: 0; 
	left: 0; 
	z-index: 10000;
	background-image:/* change the url to any gif you want*/ url('https://64.media.tumblr.com/tumblr_ltolw0yxoV1qcn5r5o9_400.gif');
	background-size: cover;
	background-repeat: no-repeat;
background-position:center;
	animation: yourAnimation 1.5s ease 0s 1 normal forwards;
	pointer-events: none;
}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} 
} 
a{text-shadow: 0 0 0 !important;}
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap');
p{
font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: white;
}
h1,h2,h3,h4{
font-family: 'Open Sans', sans-serif;
  font-size: 17px;
  color: white;
}  
* {cursor: url(http://www.rw-designer.com/cursor-view/11574.png), auto !important;}
  body {
   background-color: #f59010; 
}
    main{     
    background-color: black;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
            ::-webkit-scrollbar {
    width: 10px;
    height: 5px;
    }

    ::-webkit-scrollbar-thumb {
    background-color: white;
    }

    ::-webkit-scrollbar-track {
    background-color: black;
    }
:root {
    --logo-blue: black;
    --darker-blue: #f59010;
    --lighter-blue: black;
    --even-lighter-blue: black;
    --lightest-blue: black;
    --dark-orange: black;
    --light-orange: black;
    --even-lighter-orange: black;
}
 .icon {
    content:url(https://wilardo.crd.co/assets/images/gallery14/42a06d6b.gif?v=c24e23e1);
    visibiliy: ;
filter: brightness(0) saturate(100%) invert(100%) sepia(11%) saturate(4221%) hue-rotate(260deg) brightness(122%) contrast(104%);
}
li.active .icon { 
    content:url("https://wilardo.crd.co/assets/images/gallery18/b722f0df.gif?v=c24e23e1"); 
    width: 20px;
    height: 10x;
    }
.table-section .icon { 
    content:url("https://wilardo.crd.co/assets/images/gallery18/b722f0df.gif?v=c24e23e1"); 
}
.pinned{content: url(https://wilardo.crd.co/assets/images/gallery18/b722f0df.gif?v=c24e23e1);
    width: 16px;
    height: 16x;
filter: brightness(0) saturate(100%) invert(100%) sepia(11%) saturate(4221%) hue-rotate(260deg) brightness(122%) contrast(104%);
}
.online{filter: brightness(0) saturate(100%) invert(54%) sepia(98%) saturate(1215%) hue-rotate(356deg) brightness(102%) contrast(92%);
}
.logo {
  content: url(https://i.ibb.co/K0XmCSZ/logo-optimized.png);width: 165px !important;height: 42px !important;}
button {
  color: black;
  background: white;
font-family: 'Open Sans', sans-serif;
border: 0px solid #807F6D !important;  
border-radius: 1px;
}
a:hover {
  color: #B56E11;
  background-color: transparent;
  text-decoration: none;
}
.general-about .profile-pic img{
  border-radius: 2px;
}
.profile .friends .person p{
 color: #F59010;
}
 .count, .friends a p {
     color: #F59010;
}
    footer{  
    background-color: black;
border-radius: 3px;
}
    .top{
font-family: 'Open Sans', sans-serif !important;
border-top-right-radius: 3px;
border-top-left-radius:  3px;
}
 .links a{
font-family: 'Open Sans', sans-serif; !important; 
color: white!important;
font-size: 13px!important;   
font-smooth: always;
}
    .links a:hover{
        
color: #949599 !important;
  text-decoration: none;
}
.logout-btn{
font-family: 'Signika', sans-serif; !important;
  color: white;
font-weight:600;
}
    .profile .blurbs .section h4{
        
    color: white !important;
}
.friends-grid img{
border-radius: 3px;
}
::selection {
  color: black;
  background: #f59010;
}
.profile .friends .comments-table td {

border: 0px solid green !important;  
}
.comments-table td*{
}
.profile .comments-table .comment-replies{
border: 0px solid green!important;

}
.profile .comments-table{

border: 0px solid green!important;
}
</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 10 of 10 comments ( View all | Add Comment )

Édouard	1738342019 How do I get rid of the dancing person at the start whenever I open my profile after using it? Report Comment
bella !!	1733771805 using ! Report Comment
Max	1711401692 Using Report Comment
TJ :3	1705064775 Using!! Report Comment
Demian	1701718348 using! Report Comment
windowstopuser	1701609388 using!! Report Comment
computerangel	1701023374 using!!! Report Comment
starmaiden	1700525587 using!!! Report Comment
https://www.twitter.com/catmachine109	1700465665 USING!!!!! Report Comment