Sonic Adventure 2 Layout

Tags: blue, sonic, games, videogames, retro, sega, sonic the hedgehog

Description:

i used to have this layout on my profile but since im not rlly putting any use to it anymore i decided to share it here :D so a few things i want to note:

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 button that links to my profile OR at least keep the credits in the code

neither of those r strictly necessary either!! it would just b nice to credit me but i dont mind if u dont :D

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

Preview:

click on the image for a larger preview

Code:

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

<style>

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Play&display=swap');

/* Background image */
 body {
        background-image:url(https://files.catbox.moe/90luor.png);
        background-size: cover;
        background-position: center;
        background-attachment:fixed;
    }

/* Cursor */
* {cursor: url(https://cur.cursors-4u.net/games/gam-1/gam80.cur), auto !important;} 


/* Header */
  
 main:before {
    box-shadow: 0 0 5px #14084e;
    border: solid 1px #14084e;
	width: 98%;
	height: 100px;
	display: block;
	content: "";
	background-image: url('https://files.catbox.moe/ps4c1z.gif');
	background-position: center center;
	background-size: cover;
	margin-bottom:5px;
}
@media only screen and (max-width: 600px) {
	main:before{
		height: 200px;
	}
}

  /* Image classes (to add shadows to specfic images instead of everything in the site) */
  .shadow {
    box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.1), 0 0 0 2px rgb(255, 255, 255),
    1px 1px 5px rgba(0, 0, 0, 0.9);
}

.shadow2{
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.9);
}

/* Main (The colors of the profile itself) */
main {
  color:rgb(125,119,154);
font-family: 'Play', sans-serif;
border-radius:5px;
text-shadow: 0px 1px 2px rgba(56, 42, 119, 0.3);
background-color:transparent
}

main .left {
    background:white;
    box-shadow: 0 0 5px #14084e;
    border: solid 1px #14084e;
    border-radius:4px;
}
main .right {
    background-color:transparent;
}

main a {
  color: rgba(41,53,161,1);
  font-size: 12px;
}

 a:hover {
    color: rgba(41,53,161,1);
letter-spacing:0.7px;
transition:.3s;
text-decoration: none;
}
a { letter-spacing:normal; transition:.3s;}

/* Style of H1 (where your username goes)*/
.profile h1 {
    font-family: 'Audiowide', cursive;
background: linear-gradient(180deg, rgba(81,22,205,1) 0%, rgba(25,9,101,1) 31%, rgba(51,0,158,1) 100%);
 box-shadow: #fff6 0px 0px 2px 3px inset;
box-shadow: 0 0 5px #14084e;
text-shadow: 0 0 2px #14084e;
border: solid 1px #14084e;
    color:white;
    padding-left:10px;
text-shadow: 2px 0 #000000, 0 2px #000000, 1px 0 #000000, 0 2px #000000;

}

/* Style of borders around left tables */
.profile .contact, .profile .table-section, .profile .url-info {
  border: none;
}

/* Style of headings in the left */
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
    background:white;
    color:#6A638C;
    font-size:14px;
  
}

/* colors for table cell background (by default spacehey has a separate color for :first-child) */
.profile .table-section .details-table td {
  background-color: white;
  color: rgb(125,119,154);
}

/* Headings on the right */
.profile .blurbs .heading, .profile .friends .heading {
  font-family: 'Audiowide', cursive;
background: linear-gradient(180deg, rgba(81,22,205,1) 0%, rgba(25,9,101,1) 31%, rgba(51,0,158,1) 100%);
box-shadow: 0 0 5px #14084e;
text-shadow: 2px 0 #000000, 0 2px #000000, 1px 0 #000000, 0 2px #000000;
border-radius: 5px 5px 0px 0px;
border: solid 1px #14084e;
color: white;
}

.profile .friends .comments-table td {
  background-color: white;
}

table.comments-table{
display: block;
height: 400px!important;
overflow-y: scroll;
}

.profile .friends .inner {
     background-color:rgba(255, 255, 255, 0.85);
    border-radius: 0px 0px 5px 5px;
box-shadow: 0 0 5px #14084e;
border: solid 1px #14084e;
margin-bottom:25px;
}



/* Erase the code below if you want the profile info to show ("X is your friend!") */
.profile-info{display: none !important;}

/* Erase the code below if you want the URL to show*/
.profile .url-info {
    display:none;
}

/* Profile picture */
    .general-about .profile-pic img {
        border-radius:5px;
        box-shadow:3px 3px 1px rgb(125,119,154);
    }

/* Contact table icons*/

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
	/* Add to Friends */
	content: url("https://files.catbox.moe/wrggn5.jpeg")
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* Add to Favorites */
	content: url("https://files.catbox.moe/42s2x2.gif")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: url("https://files.catbox.moe/y8a0qi.jpeg")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* Forward to Friend */
	content: url("https://files.catbox.moe/uz2p17.jpeg")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* Instant Message */
	content: url("https://files.catbox.moe/af0iue.jpeg")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* Block User */
	content: url("https://files.catbox.moe/znktuq.jpeg")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* Add to Group */
	content: url("https://files.catbox.moe/71enve.jpeg")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* Report Profile */
	content: url("https://files.catbox.moe/42s2x2.gif")
}

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

/* Interests table */
: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:var(--links) !important;
   letter-spacing:normal !important;
   text-shadow: 2px 2px #6A638C !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);
}


/* Colors of Blurbs, Mood and Blog Preview */
.profile .blurbs .inner {
    padding-left:12px;
    padding-right:15px;
    background-color:rgba(255, 255, 255, 0.9);
    border-radius: 0px 0px 5px 5px;
box-shadow: 0 0 5px #14084e;
border: solid 1px #14084e;
}

.profile .blurbs .section h4 {
    color:#6A638C;
}



.profile .mood {
    color:rgb(125,119,154);
    padding-top:5px;
    padding-left:8px;
    background:rgb(228,228,244);
    border-radius:3px;
    margin-bottom:10px;
}

.profile .mood a {
    color:rgb(125,119,154);
}

DIV.blog-preview {
    box-shadow: 0 0 5px #14084e;
    border: solid 1px #14084e;
    background: linear-gradient(180deg, rgba(81,22,205,1) 0%, rgba(25,9,101,1) 31%, rgba(51,0,158,1) 100%);
    color:white;
    padding-left:10px;
    padding-top:1px;
    padding-bottom:1px;
    border-radius:3px;
box-shadow: 0 0 2px #14084e;
}

/* This replaces the "About me" and "Who I´d like to meet text */

.blurbs .inner .section:first-of-type h4{
	font-size:0;
}
.blurbs .inner .section:first-of-type h4:after{
	content:"✎. . .	About me"
;font-size:.8rem;
}
.blurbs .inner .section:last-of-type h4{
font-size:0;
}
.blurbs .inner .section:last-of-type h4:after{
content:"★  Who i´d like to meet";
font-size:.8rem;
}

/* This is a custom Scrollbar */
  /* Firefox */
  * {
    scrollbar-width: auto;
    scrollbar-color: #4b49ab #ffffff;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 16px;
  }

  *::-webkit-scrollbar-track {
    background: #ffffff;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #4b49ab;
    border-radius: 10px;
    border: 3px solid #ffffff;
  }

/* Navigation bar style */
 nav .top {
         width:98.3%;
         font-family: 'Audiowide', cursive;
background: linear-gradient(180deg, rgba(41,53,161,0.8) 0%, rgba(11,15,54,0.8) 31%, rgba(27,35,107,0.8) 100%);
 box-shadow: #fff6 0px 0px 2px 3px inset;
box-shadow: 0 0 5px #14084e;
text-shadow: 0 0 2px #14084e;
border: solid 1px #14084e;
color:#46379E;
border-radius:5px;
}

nav .links {
    width:98.3%;
    font-family: 'Audiowide', cursive;
    margin-top:3px;
    margin-bottom:3px;
    background: 
  /* On "top" */
  repeating-linear-gradient(
    45deg,
    transparent,
    transparent 5px,
    #4552C7 5px,
    #4552C7 10px
  ),
  /* on "bottom" */
  linear-gradient(
    to bottom,
     #2D3AAD,
    #4552C7
  );
    color: #C9C9E7;
     font-size:12px;
     box-shadow: 0 0 5px #14084e;
text-shadow: 0 0 2px #14084e;
  border-radius: 10px 0px;
}

nav .links a {
    margin-right:5px;
    color: #C9C9E7;
    font-size:11px;
}
    
nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
    content: " | ";
    display:none;
}

/* Footer style */
footer {
    background: linear-gradient(180deg, rgba(41,53,161,0.8) 0%, rgba(11,15,54,0.8) 31%, rgba(27,35,107,0.8) 100%);
 box-shadow: #fff6 0px 0px 2px 3px inset;
box-shadow: 0 0 5px #14084e;
text-shadow: 0 0 2px #14084e;
border: solid 1px #14084e;
color:#46379E;
}

/* The color of the search bar in the Nav bar */
[id='q'] {
    background:#070B33;
    border:none;
    color:white;
}

/* This changes the user icon images in the Friends and Comments sections and adds an animation when you hover*/

.comments-table td img {
   clip-path: polygon(50% 5%, 61% 40%, 98% 40%, 68% 62%, 79% 96%, 50% 75%, 21% 96%, 32% 62%, 2% 40%, 39% 40%);
}

.profile .friends .person img:not(.icon) {
    border-radius:3px;
  transition:.3s;
    
}

.profile .friends .person img:not(.icon):hover{
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
 font-style: italic;
 font-size:2em;
 font-weight:bold; 
 color: #fff;
  transition:.3s;
 -webkit-animation: pop 1s ease-in-out infinite alternate;
 animation: pop 1s ease-in-out infinite alternate;
 -moz-animation: pop 1s ease-in-out infinite alternate;
}

@keyframes pop {
from {
transform:scale(0.97)
}

50% {
transform:scale(1)
}

to {
transform:scale(0.97)
}
}

@-webkit-keyframes pop {
from {
-webkit-transform:scale(0.97)

}

50% {
-webkit-transform:scale(1)

}

to {
-webkit-transform:scale(0.99)
}
  
<iframe width="0" height="0" src="https://www.youtube.com/embed/7nkt4P5xW6s//?&;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">


</style>

<center>
<!-- This was originally inteded to go after the Who Id like to meet section, but do whatever u want with it LOL -->
<img src="https://files.catbox.moe/59195a.gif" width="130px" style="margin-right:5px;" class="shadow2"/>
    <img src="https://files.catbox.moe/wrx8ny.gif" width="130px" style="margin-right:5px;" class="shadow2"/>
    <img src="https://files.catbox.moe/ed3t2i.gif" width="130px" class="shadow2"/> <br/>
    </center>
<a href="https://spacehey.com/qttu"> <img src="https://files.catbox.moe/cdbhee.jpeg" width="80px" style="margin-left:11px;"/> </a>

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 46 comments ( View all | Add Comment )

Manpupp	1737480713 im gonna use thanks ! :3 Report Comment
joao5	1737325713 using!! Report Comment
ZK3LLY	1737254965 USING :3 Report Comment
ZK3LLY	1737254964 USING :3 Report Comment
Sonic the Hedgehog	1736489848 No way! I thought Tails made this. I'm gonna have to speak to him about it later. Thanks for the cool layout! I'm using some of it! Report Comment
Agatthg	1736471642 Using Report Comment
RCM	1736205666 using Report Comment
Hachmane	1735971663 using Report Comment
Quabape	1735842959 using :] Report Comment
S0y B34nZ!!(๑’ᗢ’๑)	1735765450 Us1ng!!!(⁎˃ᴗ˂⁎) Report Comment
Kellon	1731395399 Using >o<!!! Report Comment
anti★thesis (( elmo/ryker ))	1731307920 using :D Report Comment
GOATMINT BAYBEEEE	1726534804 hi ! i noticed a lot of people using this layout have a sonic themed spacehey logo that i'd really like to use on my page, but i can't seem to find it anywhere :( do you know where i can find the image? Report Comment https://files.catbox.moe/0514kd.png <- thats a link to the image if its of any use, but i cant seem to find the origin of it either - maybe it isnt available on the layouts page anymore? by LEOnel ★; 1726574227; Report thank you so much, you're a star !!!! by GOATMINT BAYBEEEE; 1726618667; Report
⸺ SONIC 𝜗⠀SIMON ₎₎	1725299519 Using! Report Comment
R0lk4kku_	1725250149 Hey, do you know which specific code is for the spacehey logo and online icon? ^_^ im trying to add different ones but I think 2 being there at the same time is fucking it up --n-- (also sorry if this sounds rude, it still really really like the layout its very rad 🙏) Report Comment i’ll search for them and get back to you in a bit! by LEOnel ★; 1725291191; Report https://pastebin.com/bg04Ftkh let me know if the link works - it should be pretty simple! if it doesn’t work, some of your previous code may be interfering with it, let me know if that’s the case so i can help you with it by LEOnel ★; 1725291517; Report
c0l0rful_bl00d.666	1725237004 Using!! Report Comment
icky!!	1725211032 using!! Report Comment
R0lk4kku_	1725162493 Using !!!!! ᕙ(`▿´)ᕗ (Listening to escape the city currently lmao > <) Report Comment
MC Cola	1719138933 Using O_o Report Comment
the_theatre_system	1718484018 using this :3 Report Comment