spamton 1997 version themed layout

Tags:
Description:

none of the art is mine btw!! playlist not included
Preview:

click on the image for a larger preview
Code:

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

<style>
body {
	background-color: rgb(255, 255, 255);
	background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSWiGY3qM3umTCbsvmVruoRMnXR5SW2qO1X0ztLsaC_97eBZHt3j9tru4CVhGgSe-K_DGM&usqp=CAU);
	background-position: center center;
	background-repeat: repeat;
	background-attachment: scroll;
	}
<style>
main {
background: rgb(245,173,231);
background: linear-gradient(300deg, rgba(245,173,231,1) 10%, rgba(255,255,255,1) 49%, rgba(247,163,232,1) 100%);
}
</style>

<style>
        .general-about .profile-pic .pfp-fallback {
            border: 2px solid #FFFF00;
            box-shadow: 0px 0px 0px 4px #fa0000, 0px 0px 0px 6px #FFFF00;
            font-weight: 400;
            font-family: 'pixelmplus10', sans-serif;
            image-rendering: optimizeQuality;
            color: #000000;
            background-color:#FFFF00;
            text-align: center;
            display: block;
            justify-content: center;
            margin-left: 6px;
</style>
<style>
.online{content:url("http://www.myspacegens.com/images/online_now/112.gif");
background-position: -8% 70%; background-repeat:no-repeat; background-attachment:scroll;}
</style>
<style>

h1, h2, h3, h4,h5,a, p, nav label, .section {color: #5e0208;}


h1, h2, h3, h4, h5, a, p, nav label, .section{ text-transform:lowerercase !important;
</style>
<style>
main {
background: rgb(255,0,0);
background: linear-gradient(0deg, rgba(255,0,0,1) 0%, rgba(255,179,11,1) 100%);
}
</style>
<style>
nav .links {
background-color: #ffae00;
padding: 3.5px 16px 5.5px 16px;
text-transform: lowercase;
letter-spacing: 1x;
}
</style>
<style>
.profile .friends .heading, .profile .contact .heading, .profile .table-section .heading, .home-actions .heading{
background: rgba(255, 208, 0);
border-radius: 10px;
box-shadow: 2px 2px 7px #000;
color: #fff;
font-family: 'Brush Script MT', cursive;
font-size:17px;
text-transform; uppercase!important;
padding: 2px 7px;
}
</style>
<style>
.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: "💰"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* Add to Favorites */
	content: "✴"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: "💬"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* Forward to Friend */
	content: "💥"}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* Instant Message */
	content: "📩"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* Block User */
	content: "🛑"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* Add to Group */
	content: "🪙"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* Report Profile */
	content: "🚩"
}
</style>


<style>
.logo {
  content: url(https://media.discordapp.net/attachments/699892630427009054/1140675684969226251/image.png)
}
</style>
<style>
   main, footer { 
  background-color:#FFC133; 
 
 } 

  a:active, a:visited, a:link, a.searchlinksmall:active, a.searchlinksmall:visited, a.searchlinksmall:link, a.navbar:active, a.navbar:visited, a.navbar:link, a.redlink:active, a.redlink:visited, a.redlink:link  { 
  color:#FFC133; 
 font-family:comic sans ms; 
 font-style:italic; 
 } 

  a:hover, a.searchlinksmall:hover, a.navbar:hover, a.redlink:hover  { 
  color:#FFC133; 
 font-family:comic sans ms; 
 font-style:italic; 
 text-decoration:underline; 
 } 

 </style> 
<style>

body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed; 
	top: 0; 
	left: 0; 
	z-index: 100;
	background-image: url('https://i.kym-cdn.com/photos/images/newsfeed/002/443/451/e8d.gif');
	background-size: cover;
	background-repeat: no-repeat;
background-position:center;
	animation: yourAnimation 3s ease 0s 1 normal forwards;
	pointer-events: none;
}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 

</style>


<style>
nav .top {


background-color: #eb3a34;
</style>

<style>

h1{
  animation: type 3s steps(27);
  color: white;
  font-size: 10px;
  font-family: courier;
  white-space: nowrap;
  overflow: hidden;
  }

@keyframes type{
  0%{
    width:0ch;
  }
  
  100%{
    width:27ch;
  }
}

}

body::before {
content: " ";
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(rgb(82 15 15 / 48%) 50%, rgb(0 0 0 / 0%) 50%);
z-index: 2;
background-size: 100% 2px, 3px 100%;
pointer-events: none;
}

.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>
* a {
color:red !important;
}

a * {
color:red !important;
}
</style>
<style>
td {
color: #FFC133 !important;
background: none;
background-color: #FFC133 !important;
} 
table.details-table {
max-width: 98%;
}
</style>


<style>
.online {content:url('https://dl.glitter-graphics.com/pub/157/157641b27q8mcaol.gif'); background-repeat: no-repeat; background-position: -15% 75%; z-index: 2; 
}
</style>
<style>
main:before {
	width: 100%;
	height: 300px;
	display: block;
	content: "";
	background-image: url('https://media.discordapp.net/attachments/1032804253850406933/1161803088777195572/RDT_20231011_180753114679444917820220.gif?ex=6539a071&is=65272b71&hm=9488cbc3bf91d8d07aa2f57d7c5dc3311c9c2dacf6de29d35d7d1464e34ece1e&');
	background-position: center center;
	background-size: cover;
}
@media only screen and (max-width: 600px) {
	main:before{
		height: 200px;
	}
}
</style>
<style>
.profile .contact, .profile .url-info, .profile .table-section, .home-actions, .blog-preview, .blurbs, .friends, .profile-info, .details {

border: 2px transparent !important}
</style>

<style>
/* replace with cd image that has transparent background. must be 150px by 150px. */
:root {
--cd-image: url('https://fluorescent-lights.neocities.org/Digital-CD-Disk-Vector-Transparent-PNG.png');
}
.profile-pic {
position: relative;
width: 183px;
filter: drop-shadow(0 0 0.25rem red);
}
.profile-pic:after {
content: "";
background: url('https://fluorescent-lights.neocities.org/f0rzNHe.png'), linear-gradient(150deg, rgba(255,255,255,0.4), rgba(255,255,255,0.2), 40%, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.6));
background-size: contain, cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.profile-pic:before {
content: "";
background: var(--cd-image);
position: absolute;
top: 5px;
left: -20px;
width: 150px;
height: 150px;
background-repeat: no-repeat;
z-index: -1;
animation-name: spin;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear; 
transition: left ease 0.5s;
}
.profile-pic:hover:before {
left: -75px;
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
.profile-pic .pfp-fallback {
float: right;
width: 163px;
height: 160px;
border: none;
}
.general-about .profile-pic img {
max-width: inherit;
}
</style>

<style>
html {
filter: grayscale(70%);
}
</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 4 of 4 comments ( View all | Add Comment )
Crowley (Good Omens)	1705134626 using! Report Comment
Crowley (Good Omens)	1705134625 using! Report Comment
Nightmare	1704422826 using sometime :3 Report Comment
sp4ceslvt	1699500052 love this, will be using<3 Report Comment