Shadow the Hedgehog (2005) Layout

Tags: videogames, sonic, sonic the hedgehog, shadow the hedgehog, shadow, games, dark, red

Description:

rules or stuff to take into account before using:

you DON'T have to:

- comment "using"
- add me

you CAN:

- edit this layout however you want
- use this as a base
- reupload edited versions of this layout (but DO credit me if you do!)

it would be pretty cool if:

- you kept the the credits in the code

it isn't strictly necessary either!!

please DON'T:

- claim this layout as yours

that is all i ask LOL go crazy with everything else

if the code is broken or if you have questions my DMs r open! i might take some time to reply tho so be patient. also this layout is probably very messy, sorry!

Preview:

click on the image for a larger preview

Code:

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

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

<style>


@import url('https://fonts.googleapis.com/css2?family=Coda:wght@800&family=Konkhmer+Sleokchher&display=swap');

.logo {
content:url("https://files.catbox.moe/lhoi67.png");
}

nav .top {
background:  linear-gradient(0deg, rgba(26,21,18,0.7) 0%, rgba(17,13,11,0.9) 100%);

}

body {
background-image:url(https://files.catbox.moe/1n47tt.png);
background-size:80%;
font-family: "MS UI Gothic", Tahoma;
}


nav .links {
background:transparent;
}

main {
background:rgba(0,0,0,0.87);
color:white;
font-size:12px;
}


main {
    margin-top: 20px;
    border: 1px solid black;
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 6px 0px;
font-size:12px;
}

.profile .contact .heading, .profile .table-section .heading, .setting-section .heading, .home-actions .heading {
    background: black;
    color: white;
    border: 1px dashed black;
    text-align: center;
    padding: 2px 7px;
}


.profile .contact, .profile .url-info, .profile .table-section, .setting-section, .home-actions {
    width: 100%;
    border: 1px dashed black;
    border-radius: 5px;
    outline: 1px solid #534640;
    margin: 10px 0;
    background: rgba(0,0,0,0.7);
}

footer {
background:  linear-gradient(0deg, rgba(26,21,18,0.7) 0%, rgba(17,13,11,0.9) 100%);
color:white;
}

footer a {
color:white;
}





.details-table td {
    background: black;
    border: 1px solid #534640;
    vertical-align: top;
    border-radius: 3px;
}

.details-table td:first-child {
    background: linear-gradient(0deg, rgba(26,21,18,0) 0%, rgba(83,70,64,0.3) 100%);;
    color: white;
    text-align: center;
    vertical-align: middle;
    border:1px dotted #534640;
    font-weight: bold;
    width: 33%;
}

/* == left side == */

.profile-info {
    outline: 1px solid #534640;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 5px;
    margin-bottom: 10px;
    height: 100px;
    background-size: 400px;
    background-position-y: 30%;
    background-position-x: center;
}

.blog-preview {
    background: black;
    outline: 1px solid #534640;
    padding-left: 10px;
    padding-right: 10px;
}

.profile .blurbs .heading, .profile .friends .heading {
    background: black;
    color: white;
    padding: 2px 7px;
    text-align: center;
    border-bottom: 1px double #534640;
}

.profile .blurbs {
    margin: 20px 0;
    background: black;
}

.profile .blurbs .section h4 {
    margin: 0;
    color: #504138;
    padding-bottom: 5px;
font-family: 'Konkhmer Sleokchher', cursive;
text-transform:uppercase;
font-size:12px;

}

.friends {
    background: black;
    border: 1px solid #534640;
    border-radius:3px;
    padding:5px;
}

.count {
    color: #b5210d;
}

.profile .friends .person p {
    color: white;
    font-weight: bold;
    width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    text-align: center;
}

.profile .friends .person p:hover {
    color: #504138;
}

div#comments {
    margin-top: 15px;
}

.comments-table td, .music-table td {
    background: black;
    vertical-align: top;
}

.comments-table td:first-child, .music-table td:first-child {
    background: black;
    text-align: center;
    font-weight: bold;
    width: 38%;
border:none;
}

table.comments-table {
    border: 1px black;
}


body a {
color:#534640


}

body a:hover {
color:#b5210d

}

a {
    letter-spacing:normal;
  transition:.3s;
}

a:hover {
    letter-spacing:0.5px;
  transition:.3s;
}

.blurbs .inner .section:first-of-type h4{
	font-size:0;
}
.blurbs .inner .section:first-of-type h4:after{
	content:"HeÂ´s a hero..."
;font-size:.8rem;
}
.blurbs .inner .section:last-of-type h4{
font-size:0;
}
.blurbs .inner .section:last-of-type h4:after{
content:"but whose hero?";
font-size:.8rem;
}


.profile-pic > img {
  content:url(https://files.catbox.moe/zrxaqb.gif);
}


.profile-pic img{
    padding:5px;
    transform: rotate(4deg);
    box-shadow: 0 4px 2px 0 rgba(0, 0, 0, 0.5), 0 6px 10px 0 rgba(0, 0, 0, 0.4);
    margin-left:5px;
}


</style>

<div id="info">

<img src="https://files.catbox.moe/h71fal.gif" width="250px" style="margin:5px;&#10;clip-path: polygon(0 0,100% 0,100% 100%,40.00px 100%,0 calc(100% - 40.00px));"/>
<div id="scroll">
<h3> Title</h3>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>


</div>
<center>
</center>
<br/><br/>

<iframe width="75" height="45" style="position:fixed;bottom:0;margin-bottom:40px;right:0;margin-right:10px; z-index:99;filter:hue-rotate(130deg);animation:rotation 15s infinite linear;" src="https://www.youtube.com/embed/d8lEDOnlTv4//?&;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>
<div id="glenplayer07">

       <div class="music-info">
           <div class="song-name">All Hail Shadow</div>
           <div class="artist-name">Sonic The Hedgehog 2006 OST</div>
       </div><!--music-info-->
   </div><!--flamingo-->
<!--glenplayer07-->

<style>
@import url('https://fonts.googleapis.com/css2?family=Tektur:wght@800&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Coda:wght@800&family=Konkhmer+Sleokchher&display=swap');

.logo {
content:url("https://files.catbox.moe/lcqeoi.png");
}
nav .top {
background:linear-gradient(180deg, rgba(21,18,16,0.9) 0%, rgba(47,38,33,0.9) 12%, rgba(0,0,0,0.9) 26%, rgba(33,28,25,0.8) 100%);
clip-path: 
   polygon(
0% 0%,
0% 0%,
100% 0%,
100% 0%,
100% 0%,
95% 100%,
0% 100%,
0% 100%
);
padding-right:30px;
border-bottom:2px double black;
height:80px;
box-shadow:0px 0px 7px black;
}

nav .top .left .logo {
    width: auto;
    height: auto;
margin-top:-15px;
}

body {
background-image:url(https://files.catbox.moe/1n47tt.png);
background-size:110%;
font-family: "MS UI Gothic", Tahoma;
background-attachment: fixed;

}

.profile h1 {
font-family: 'Tektur', cursive;
font-size:25px;
text-align:center;
filter: drop-shadow(2px 2px 0 black) drop-shadow(-2px 2px 0 black) drop-shadow(0 -2px 0 black) drop-shadow(2px 0 black);

}


.container {
width: 90%;
max-width: 1000px;
}


nav .links {
background:transparent;
text-align:right;
padding-top:0;
padding-right:60px;
filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black);
}

nav .links a {
text-shadow:0px 0px 0px rgba(0,0,0,0);
margin-right:5px;
}

nav .links a:hover {
color:#b5210d;
text-shadow:0px 0px 0px rgba(0,0,0,0);
margin-right:5px;
}

main {
background:rgba(0,0,0,0.87);
color:white;
font-size:12px;
}


nav .links li::after{
display: none;
}


main {
    border: 1px solid black;
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 6px 0px;
font-size:12px;
box-shadow:0px 0px 7px black;
}

.profile .contact .heading, .profile .table-section .heading, .setting-section .heading, .home-actions .heading {
        background: linear-gradient(0deg, rgba(26,21,18,0) 0%, rgba(83,70,64,0.3) 100%);;
    color: white;
    border: 1px dashed black;
    text-align: center;
    padding: 2px 7px;
}


.profile .contact, .profile .url-info, .profile .table-section, .setting-section, .home-actions {
    width: 100%;
    border: 1px dashed black;
    border-radius: 5px;
    outline: 1px solid #534640;
    margin: 10px 0;
    background: rgba(0,0,0,0.7);
}

footer {
background:linear-gradient(180deg, rgba(21,18,16,0.9) 0%, rgba(47,38,33,0.9) 12%, rgba(0,0,0,0.9) 26%, rgba(33,28,25,0.8) 100%);
padding-right:30px;
border:2px double black;
height:80px;
color:white;
overflow-y:scroll;
box-shadow:0px 0px 7px black;
}

footer a {
color:white;
}






.details-table td {
    background: black;
    border: 1px solid #534640;
    vertical-align: top;
    border-radius: 3px;
}

.details-table td:first-child {
    background: linear-gradient(0deg, rgba(26,21,18,0) 0%, rgba(83,70,64,0.3) 100%);;
    color: white;
    text-align: center;
    vertical-align: middle;
    border:1px dotted #534640;
    font-weight: bold;
    width: 33%;
}

/* == left side == */

.profile-info {
    outline: 1px solid #534640;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 5px;
    margin-bottom: 10px;
    height: 100px;
    background-size: 400px;
    background-position-y: 30%;
    background-position-x: center;
}

.blog-preview {
    background: linear-gradient(0deg, rgba(26,21,18,0) 0%, rgba(83,70,64,0.3) 100%);;
    outline: 1px solid #534640;
    padding-left: 10px;
    padding-right: 10px;
}

.profile .blurbs .heading, .profile .friends .heading {
        background: linear-gradient(0deg, rgba(26,21,18,0) 0%, rgba(83,70,64,0.3) 100%);;
    color: white;
    padding: 2px 7px;
    text-align: center;
    border-bottom: 1px double #534640;
}

.profile .blurbs {
    margin: 20px 0;
        background: linear-gradient(180deg, rgba(0,0,0,1) 50%, rgba(26,21,18,0.5) 100%);
}

.profile .blurbs .section h4 {
    margin: 0;
    color: #504138;
    padding-bottom: 5px;
font-family: 'Tektur', cursive;
text-transform:uppercase;
font-size:12px;
text-shadow: 0px 0px 2px black;
}

.profile .blurbs .section h3 {
    margin: 0;
    color:white;
    padding-bottom: 5px;
font-family: 'Tektur', cursive;
text-transform:uppercase;
font-size:12px;
filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black);

}

.friends {
    background: linear-gradient(180deg, rgba(0,0,0,1) 50%, rgba(26,21,18,0.5) 100%);
    border: 1px solid #534640;
    border-radius:3px;
    padding:5px;
}

.count {
    color: #770101;
}

.profile .friends .person p {
    color: white;
    font-weight: bold;
    width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    text-align: center;
}

.profile .friends .person p:hover {
    color: #504138;
}

div#comments {
    margin-top: 15px;
}

.comments-table td, .music-table td {
    background: linear-gradient(180deg, rgba(0,0,0,1) 50%, rgba(26,21,18,0.5) 100%);
    vertical-align: top;
}

.comments-table td:first-child, .music-table td:first-child {
    background: black;
    text-align: center;
    font-weight: bold;
    width: 38%;
border:none;
}

table.comments-table {
    border: 1px black;
}


body a {
color:#534640


}

body a:hover {
color:#770101;
}





a {
    letter-spacing:normal;
  transition:.3s;
}

a:hover {
    letter-spacing:0.5px;
  transition:.3s;
}

.blurbs .inner .section:first-of-type h4{
	font-size:0;
}
.blurbs .inner .section:first-of-type h4:after{
	content:"HeÂ´s a hero..."
;font-size:.8rem;
}
.blurbs .inner .section:last-of-type h4{
font-size:0;
}
.blurbs .inner .section:last-of-type h4:after{
content:"...but whose hero? ";
font-size:.8rem;
}


.profile-pic > img {
  content:url(https://files.catbox.moe/zrxaqb.gif);
filter:sepia(100%) hue-rotate(345deg);
}


.profile-pic img{
    padding:5px;
    transform: rotate(4deg);
    box-shadow: 0 4px 2px 0 rgba(0, 0, 0, 0.5), 0 6px 10px 0 rgba(0, 0, 0, 0.4);
    margin-left:5px;
}

.sepia {
    filter:saturate(0) sepia(60%) brightness(65%);
}

#scroll {
height: 150px;
width: 250px;
padding: 5px;
overflow-y:scroll;
margin:5px;
}

#info {
height: 100%;
width: 100%;
margin-left: 30px;
display:flex;
}
  
.online { visibility: hidden; } .online img { content: url("https://images-ext-2.discordapp.net/external/F16P3hi-3_Q7azQEKK4rieAHBuqhAukE8kJmlfZaIGM/https/dl.glitter-graphics.com/pub/284/284146p0uvvqzm51.gif"); animation-name: none; visibility: visible; height: 40px; width: 40px; }


.con:nth-child(2) {
margin: 0 5px 0 5px;
}
  
::-webkit-scrollbar {
width: 14px
}

::-webkit-scrollbar:horizontal {
height: 14px
}

::-webkit-scrollbar-corner {
background: black;
}

::-webkit-scrollbar-track:vertical {
background: rgba(21,18,16,0.6);

}

::-webkit-scrollbar-track:horizontal {
background: rgba(21,18,16,0.6);

}

::-webkit-scrollbar-thumb {
border: 1px solid #000;
box-shadow: inset 0 -1px 1px #000, inset 0 1px 1px #000;
}

::-webkit-scrollbar-thumb:vertical {
background: linear-gradient(90deg, rgba(21,18,16,1) 0%, rgba(57,49,44,1) 83%, rgba(25,22,19,1) 95%);
}

::-webkit-scrollbar-thumb:horizontal {
background: linear-gradient(0deg, rgba(21,18,16,1) 0%, rgba(57,49,44,1) 83%, rgba(25,22,19,1) 95%);
}

::-webkit-scrollbar-button:horizontal:end:increment,
::-webkit-scrollbar-button:horizontal:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment,
::-webkit-scrollbar-button:vertical:start:decrement {
display: block
}

::-webkit-scrollbar-button:vertical {
height: 15px
}

::-webkit-scrollbar-button:vertical:start:decrement {
background: white;
background: url("https://dl.dropbox.com/s/n9ji42h9hdgdtpc/scroll3.png"), linear-gradient(0deg, rgba(21,18,16,1) 0%, rgba(57,49,44,1) 83%, rgba(25,22,19,1) 95%);
background-repeat: no-repeat;
background-position: center;
-moz-background-size: 100% auto, cover;
-webkit-background-size: 100% auto, cover;
-o-background-size: 100% auto, cover;
background-size: 100% auto, cover;
border: 1px solid #000;
}

::-webkit-scrollbar-button:vertical:start:increment {
display: none;
}

::-webkit-scrollbar-button:vertical:end:decrement {
display: none;
}

::-webkit-scrollbar-button:vertical:end:increment {
background: white;
background: url("https://dl.dropbox.com/s/cdcco6pih7n1lae/scroll4.png"),  linear-gradient(180deg, rgba(21,18,16,1) 0%, rgba(57,49,44,1) 83%, rgba(25,22,19,1) 95%);
background-repeat: no-repeat;
background-position: center;
-moz-background-size: 100% auto, cover;
-webkit-background-size: 100% auto, cover;
-o-background-size: 100% auto, cover;
background-size: 100% auto, cover;
border: 1px solid #000;
}
  
::-webkit-scrollbar-button:horizontal {
width: 14px
}
::-webkit-scrollbar-button:horizontal:start:increment {
display: none;
}
::-webkit-scrollbar-button:horizontal:end:decrement {
display: none;
}

::-webkit-scrollbar-button:horizontal:start:decrement {
background: white;
background: url("https://dl.dropbox.com/s/xcm618ghd823271/scroll5.png"),  linear-gradient(0deg, rgba(21,18,16,1) 0%, rgba(57,49,44,1) 83%, rgba(25,22,19,1) 95%);
background-repeat: no-repeat;
background-position: center;
-moz-background-size: 100% auto, cover;
-webkit-background-size: 100% auto, cover;
-o-background-size: 100% auto, cover;
background-size: 100% auto, cover;
background-position: center;
border: 1px solid #000;
}
  
::-webkit-scrollbar-button:horizontal:end:increment {
background: white;
background: url("https://dl.dropbox.com/s/byeyi7am889ii9m/scroll6.png"),  linear-gradient(0deg, rgba(21,18,16,1) 0%, rgba(57,49,44,1) 83%, rgba(25,22,19,1) 95%);
background-repeat: no-repeat;
background-position: center;
-moz-background-size: 100% auto, cover;
-webkit-background-size: 100% auto, cover;
-o-background-size: 100% auto, cover;
background-size: 100% auto, cover;
background-position: center;
border: 1px solid #000;
}

.comment-replies {
    padding: 0 5px;
    border:none;
    margin-top: 10px;
}

.profile .friends .person img:not(.icon) {
    max-width: 95px;
    max-height: 95px;
    display: block;
    margin: 0 auto;
    border-radius:3px;
    filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black) saturate(0) sepia(60%);
transition:0.3s;
}

.profile .friends .person img:not(.icon):hover {
    max-width: 95px;
    max-height: 95px;
    display: block;
    margin: 0 auto;
    border-radius:3px;
    filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black) saturate(0) sepia(60%) brightness(110%);
transition:0.3s;

}


:root {
    --topic1: "â˜…";  
    --topic2: "General";
    --topic3: "Music";
    --topic4: "Movies & TV";
    --topic5: "Videogames";
    --topic6: "â˜†";

 }

.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:white !important;
   letter-spacing:normal !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);
}
  

.contact .inner a img {
    font-size: 0;
}
.contact .inner a img:before {
    font-size: 1em;
    display: block
}


:root {
   --Song-Name-Font-Size:10px;
   --Song-Name-Color:white;
   --Artist-Name-Font-Size:10px;
   --Artist-Name-Color:white;
}

#glenplayer07 {
   position:fixed;
   bottom:0;margin-bottom:50px;
   right:0;margin-right:90px;
   z-index:99;
background:rgba(0,0,0,0.5);
padding:2px;

}





.song-name {
   font-size:var(--Song-Name-Font-Size);
   font-weight:bold;
   text-transform:uppercase;
   letter-spacing:1.5px;
   color:var(--Song-Name-Color);
filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black);

}

.artist-name {
   margin-top:3px;
   font-size:var(--Artist-Name-Font-Size);
   letter-spacing:0.3px;
   color:var(--Artist-Name-Color);
}

  
html:before {
    animation: grain 8s steps(10) infinite;
    background-image: url(https://media.discordapp.net/attachments/887083021533061120/1068678451055308941/IMG_1485.jpg);
    content: "";
    height: 100%;
    opacity:.1;
    position: fixed;
    width: 100%;
    pointer-events:none;
}


</style>

<div id="info">
<div id="scroll">
<h3>Title</h3>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div>

<img src="https://files.catbox.moe/15b11w.gif" width="250px" style="clip-path: polygon(0 0,calc(100% - 40.00px) 0,100% 40.00px,100% 100%,0 100%);"/><br/>
</div>
<center>
</center>

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 )

Ambera	1712246210 using !! its so cool man Report Comment
fya	1711800593 using! Report Comment
spiike	1709649306 The shadow things don’t appear for me :((( Report Comment thank you for letting me know!! it seems my image host doesn’t work then. i’ll update it as soon as possible D: by LEOnel ★; 1709657970; Report it should work now :] thanks again by LEOnel ★; 1709658925; Report TYSM!! by spiike; 1709768166; Report
VioletKillz	1704365140 using Report Comment
CHOSEN	1697864125 using !! this is superr cool ( editing a little but i suck at coding this stuff.... ) Report Comment
angel	1697595489 what's the point a dis shit if it's covering up my pfp cool ahh layout I js want the background noises and the pfp covering gone please Report Comment by background noises i’m a summing you mean the song? you can remove that by deleting the line of code that contains the youtube iframe. that line should be after the first css. if you delete the song you should also delete everything inside the glenplayer07 div, since that’s the title and artist of the song and the pfp, so sorry about that! totally forgot to mention it in the post, i had it as a placeholder when coding the layout. you can remove that by deleting the line in the code that goes “.profile-pic > img { content” if i didn’t make myself clear enough or u need anything else let me know! so sorry about the inconveniences by LEOnel ★; 1697628848; Report tysm 💗 by angel; 1697662081; Report
Halo	1696979696 Definitely might have to use this it’s sososo cool Report Comment
Nocturna	1696281098 awesomeee Report Comment
Hectorhere	1696267789 Will be using this layout and crediting you. :0 Report Comment
DryWater	1696033183 USINGG :P Report Comment