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

Ingrid!!	1736898922 Using!! Report Comment
Ingrid!!	1736898912 Using!! Report Comment
Kira	1736832365 Using !! Report Comment
deadah	1736807354 USINGGG Report Comment
deadah	1736807353 USINGGG Report Comment
CONAN	1736805030 USING ^_^ Report Comment
𝖈𝖆𝖙𝖗𝖊𝖘𝖘™	1736742167 Using! Report Comment
puppi ✂️🕷️🎸	1736667200 Using! Report Comment
a.zzxe	1736620804 definitely Report Comment DEFINETLY USING by a.zzxe; 1736620993; Report
𝕶𝖐𝖞𝖞𝖊𝖑	1736599575 usiing Report Comment
CATZ / isa	1736563603 using !!!! :D Report Comment
Shadow.exe	1736483004 Using ! Report Comment
hheavenhhall ☾	1736472884 using ! Report Comment
CyberJacob	1736388925 Using! Report Comment
Solidhedgehog	1736282234 Using (i write that bc everyone writed) Report Comment
ANONYMOUS	1736252112 Using! Report Comment
mellow	1736175904 using!! Report Comment
☆ 天使たち. . . ☆	1735964813 using Report Comment
p1nk_bon3z	1735551289 USING Report Comment
ZACHARY	1735501682 Using Report Comment