Simple Metal Sonic Layout

Tags: simple; sonic

Description:

feel free to edit, just comment using if used

Preview:

click on the image for a larger preview

Code:

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

<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 gray);
}
.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>


<div style="float:  ; max-height: 350px; position: fixed; left: 50px; bottom: 6px; z-index: 300;">
<img src="https://64.media.tumblr.com/77dbd5c18bdd0b535a07bf9586d2cfcf/2d2aa88cf3180488-c0/s540x810/d5167338266ace3eeb084720b1f20d7cac7a3f3d.gifv" width="200" height="200"/>
</div>

<style>
  font-size: 150%;
}
h1,h2,h3,h4,h5{
  font-size: 200%; 
}
  body {
   background-image: url(https://64.media.tumblr.com/11ea2f7adc39c6875807cafd12d73826/2d2aa88cf3180488-c7/s540x810/0fe013f0aabcdfe0718dfc340f4443bbc82b6b69.jpg);

}
.profile {
   background-color: rgb(); 
}
/* change all headings on page to different colors. */
  .profile .blurbs .heading,
  .profile .friends .heading{
   background-color: rgb(insert rgb);
   color: black;
}
/* change all headings on page to different colors. */
  .profile .contact .heading,
  .profile .table-section .heading{
   background-color: black;
   color: rgb(insert rgb);
}

main:before {
    width: auto;
    margin-bottom: 25px;
    border: 1px solid black;
    height: 120px;
    display: block;
    content: "";
    background-image: url(https://44.media.tumblr.com/49e816b0b708383776d22149850ab3c9/2d2aa88cf3180488-14/s540x810_f1/43ef6707baa8548e1990bd7606197bf19b059460.gifv);
    background-position: center center;
    background-size: cover;
}

footer {
    border-radius: 15px;
    background-image: url(https://64.media.tumblr.com/f9f91474d20ec237a35088c61846f1fd/2d2aa88cf3180488-e6/s400x600/d3415a39a3efe26a2b57db2819d2359d479e043d.jpg);
    color: white;
}

table.comments-table td {
    color: rgb(insert rgb);
}

:root {
    --logo-blue:#;
    --darker-blue: #0A1D8A;
    --lighter-blue: #CF1B24;
    --even-lighter-blue: #CF1B24;
    --lightest-blue: #ED8080 ;
    --dark-orange: #CF1B24;
    --light-orange: #ED8080;
    --even-lighter-orange: #CF1B24;
    --green: #CF1B24;
}





</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 3 of 3 comments ( View all | Add Comment )

polysoda.exe

1720814170

USINGGGG
metal sonic is my favorite character

Report Comment

Σ(°ロ°)⚡RW4R! ૮ ˙Ⱉ˙ ა🧟

1703091749

using !

Report Comment