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 22 comments ( View all | Add 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
KeeWee	1709350994 tried using but the pictures were broken and didnt work :( Report Comment i’ll host them in a different image host n edit the code in just a bit. thank you for letting me now!! i’ll fix it as soon as possible by LEOnel ★; 1709383258; Report done! everything should work now :] by LEOnel ★; 1709385619; Report
maxlo	1706309375 is good! using Report Comment
maxlo	1706309374 is good! using Report Comment
maxlo	1706309374 is good! using Report Comment
maxlo	1706309374 is good! using Report Comment
maxlo	1706309374 is good! using Report Comment
maxlo	1706309374 is good! using Report Comment
maxlo	1706309372 is good! using Report Comment
maxlo	1706309368 is good! using Report Comment
∘₊✧ℕ𝕖𝕣𝕠✧₊∘	1706132826 Using!! Report Comment
‿‿✦ Sonic	1703879640 using! Report Comment
River	1692042775 used this and ive since edited it to be guitar hero themed :D thank you so much! Report Comment np!! ur edit turned out SO cool :D by LEOnel ★; 1692043598; Report
vulio !	1686084899 hi if you mind me asking what is the code for when you hover your mouse over the words on the top? Report Comment not sure if this is what you mean but the links on the navigator bar? that code is under a:hover{} by LEOnel ★; 1686089173; Report
sora !!	1681601839 woaahhhhhh Report Comment
solarisxx 💿	1681165872 Your layouts are amazing! Report Comment