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

Kellon	1731395399 Using >o<!!! Report Comment
anti★thesis (( elmo/kad ))	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
the_theatre_system	1718484018 using this :3 Report Comment
the_theatre_system	1718484018 using this :3 Report Comment
frog_fiction	1717484157 Using :333 Report Comment
[S] Newt (W.I.P)	1717026996 using this!!! it's one of the best layouts ive seen thus far!!! :D Report Comment thank you sm! :D by LEOnel ★; 1717035210; Report
.:absntGen★81:.	1715746491 using the link spacing when hovered thing!!!! thanx,, its rlly kool!!!! Report Comment
Freshade	1713561892 using Report Comment
♱MARI!	1712199355 Using! :) wow it looks so good Report Comment
DIAMO	1711312329 using Report Comment
SCOUT	1710983896 using Report Comment
Blazingjaguar	1710902513 Using Report Comment