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

leo	1757637860 using Report Comment
AeiYurii	1756993660 USING!!!!!! Report Comment
sara	1756075732 USING !! :DD Report Comment
Hosty2991	1755975375 holy crap dude.. of course ill comment and credit this so awesome!!! Report Comment
ParasiteTycoon	1754684083 totally using thanks for making this! You are the best at what you do! Report Comment also, i hope it's alright if i use bits and pieces of the code. just for practicing purposes ofcourse. by ParasiteTycoon; 1754707697; Report thank you! and thats totally okay i dont mind :-D by LEOnel ★; 1754744955; Report :) by ParasiteTycoon; 1754745994; Report
sam !!	1750966318 using on my alt acc!! Report Comment
Shadz	1750808361 usingggg Report Comment
★Janz★	1745453316 using Report Comment
Fritz	1744818602 Using Report Comment
MEGATRON	1743547068 using tysm brochacho Report Comment
toby/cass 🐾	1742093564 using ! Report Comment
Lee_eatsbugzz	1741398570 using!! Report Comment
luc	1741143741 so cool, using Report Comment
lee	1740913868 tysm!! using :P Report Comment
KostanZen13	1740727761 ty for the contact icons! Report Comment
cal☆	1740627405 using~ Report Comment
Batpan	1740114126 Using Report Comment
alice	1739769707 EPICCC! Using :3 Report Comment
Poltergeist	1739366895 Using :D Report Comment
🗯️ anxcao 🗯️	1739228895 USINBGG!!! Report Comment