Crazy Arcade inspired layout

Tags: layout, cute, pixel, 2000s, blue

Description:

feel free to use and change anything!

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Hitomi Fujiko	 (https://layouts.spacehey.com/layout?id=100581) -->

<style>
.logo {
 
 content:url("https://i.ibb.co/myyK4PK/Spacehey-Logo.gif");
    }
</style>

<style>


.online{
font-family: 'Kalam', cursive;
color: white;
font-size: 20px;
text-shadow: 1px 1px 2px #387cac;
animation-name: blink;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(1.0,0,0,1.0);
animation-duration: 2s;
}

.online img{
display: none;
}


@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@700&display=swap');

    body
        {background: url("https://i.ibb.co/5LDGDh7/2Cw0.gif")
        no-repeat fixed; background-size:cover;

     }

nav .top{
background-color: #94b2ff;
border-radius: 20px;
border: 2px solid #afd6fa;
box-shadow: inset 2px 3px 5px #afd6fa;
margin: 1em 0;
}

nav .links{
background-color: #6295e7;
border-radius: 20px;
border: 2px solid #91bdfe;
box-shadow: inset 2px 3px 5px #91bdfe;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
font-style: italic;
}

nav .links li::after{
display: none;
}

main{ 
background-color: #94b2ff;
border-radius: 20px;
border: 2px solid #c3d7ff;
box-shadow: inset 2px 3px 5px #afd6fa;
margin: 1em 0;
padding: .5em;
opacity: .9;
}

.profile h1{
font-family: 'Kalam', cursive;
color: white;
text-shadow: 1px 1px 2px #387cac;
font-size: 25px;
<style>

}
<style>

}
.profile .profile-info{
border-radius: 20px;
border: 2px solid #c3d7ff;
box-shadow: inset 2px 3px 5px #afd6fa;
text-shadow: 1px 1px 2px #387cac;
color: white;
background-image: url(https://i.gifer.com/DXp.gif);
background-repeat: no-repeat;
background-size: cover;
}

.profile .general-about{
color: white;
font-style: italic;
text-shadow: 1px 1px 2px #387cac;
}

.profile .blog-preview,
.profile .mood{
color: white;
font-style: italic;
}

.profile .profile-pic img{
border-radius: 20px;
box-shadow: 1px 1px 2px #387cac;
opacity: 1;
}

.profile .contact .heading,
.profile .table-section .heading{
font-family: 'Kalam', cursive;
color: white;
background-color: #6295e7;
border-radius: 20px 20px 0 0;
border: 2px solid #6295e7;
box-shadow: inset 2px 3px 5px #91bdfe;
text-align: center;
padding: .5em;
font-size: 15px;
}

.profile .table-section,
.profile .contact,
.profile .url-info{
border-radius: 20px;
border: 2px solid #afd6fa;
box-shadow: inset 2px 3px 5px #afd6fa;
text-shadow: 1px 1px 2px #387cac;
font-style: italic;
color: white;
}

table.details-table td {
background-color: transparent !important;
color: white !important;
font-style: italic !important;
}

.profile .blurbs .heading,
.profile .friends .heading{
color: white;
font-family: 'Kalam', cursive;
background-color: #6295e7;
border-radius: 20px 20px 0 0;
border: 2px solid #6295e7;
box-shadow: inset 2px 3px 5px #91bdfe;
text-align: center;
padding: .5em;
font-size: 15px;
}

.profile .blurbs,
.profile .friends{
border-radius: 20px;
border: 2px solid #afd6fa;
box-shadow: inset 2px 3px 5px #afd6fa;
text-shadow: 1px 1px 2px #387cac;
font-style: italic;
color: white;
}

.profile .friends{
text-align: center;
}

.profile .friends-grid .person p{
color: white;
}

.profile .blurbs .section h4{
color: white;
padding: .5em;
}

<style>

.profile .comments-table{
background-color: #6295e7;
border-radius: 20px;
border: 2px solid #91bdfe;
box-shadow: inset 2px 3px 5px #91bdfe;
font-style: italic;
color: white;
}

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

.profile .comments-table .comment-replies{
background-color: #6295e7;
border-radius: 20px;
border: 2px solid #91bdfe;
box-shadow: inset 2px 3px 5px #91bdfe;
font-style: italic;
color: white;
}

.comments-table img,
.person img{
border-radius: 20px;
box-shadow: 1px 1px 2px #387cac;
filter: sepia(100%) hue-rotate(299deg);
opacity: .5;
}


footer{
background-color: #6295e7;
border-radius: 20px;
border: 2px solid #91bdfe;
box-shadow: inset 2px 3px 5px #91bdfe;
font-style: italic;
color: white;
}

.count{
color: #6295e7;
}

a{
color: #fffdda;
text-shadow: 1px 1px 2px #387cac;
}

a:visited {
color: #dae4ff;
text-shadow: 1px 1px 2px #387cac
}

a:hover {
color: white;
}

a:active {
color: #dae4ff;
text-shadow: 1px 1px 2px #387cac;
}

nav .links a:hover{
text-decoration: underline;
color: #dae4ff;
}

}
.col.left h1:before{
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 115px;
  background-image: url("");
  background-repeat: no-repeat;
  background-size: 120px;
}
.col.right:before {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 70px;
  background-image: url("https://cutekawaiiresources.files.wordpress.com/2014/08/tumblr_lnn19rgexc1qhizsv.gif");
  background-repeat: no-repeat;
  background-position-x: center;
  background-size: 350px;
}

}
.profile-pic img:hover{
  animation: rotation 0.3s infinite linear;

}
footer::after{
  bottom: -30%;
  font-size:0;
  left: 77%;
  position:fixed;
  pointer-events: none;
  content:url("");
}
</style>

<style>
/*Top (Background Color/Background Image)*/
   .top{
    background-color: COLOR !important;
    background-image: url(https://cdn.donmai.us/original/6e/fd/__hime_and_flandre_kaibutsu_oujo_drawn_by_ekkusu_kyuuzu__6efd233a11589cd707b36d86c6097b32.jpg') !important;
    background-attachment: SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position:CENTER !important;
    background-size: COVER;}

}
.mood:after {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 70px;
  background-image: url(https://i.ibb.co/59fHKVF/image.png);
  background-position-x: center;
  background-repeat: no-repeat;
  background-size: 300px;
}

:root {
  --topic1: "Me!";
  --topic2: "Favorite Music Artists/Songs";
  --topic3: "Favorite Movies";
  --topic4: "Favorite Shows";
  --topic5: "Favorite Books";
  --topic6: "My Heroes";}
<style>


<style>* {cursor: url(https://cur.cursors-4u.net/cursors/cur-2/cur116.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2008/12/17/cool-blue-outer-glow-pointer.html" target="_blank" title="Cool Blue Outer Glow Pointer"><img src="https://cur.cursors-4u.net/cursor.png" alt="Cool Blue Outer Glow Pointer" style="position:absolute; top: 0px; right: 0px;"/></a>

<iframe width="100%" height="380" src="https://www.youtube.com/embed/tjlvmb8SGEs?autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""> 
 !important </iframe>
<a href="https://plumbum.neocities.org/"><img src="https://watermelon.crd.co/assets/images/gallery15/8d537b91.gif?v=172e6d61"/></a>

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

<style>
body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed; 
	top: 0; 
	left: 0; 
	z-index: 100;
	background-image: url('https://media.tenor.com/4DW4CKmMbPoAAAAC/ps2startup-ps2.gif');
	background-size: cover;
	background-repeat: no-repeat;
background-position:center;
	animation: yourAnimation 7s ease 0s 1 normal forwards;
	pointer-events: none;
}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 

<style></style>

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

methazine	1750363686 might usee Report Comment
riri ☆	1748397757 using !! Report Comment
lesbian princess	1748308866 using Report Comment
Kiara	1747468496 Using! Report Comment
~WeIrDo~	1745895898 USING !! <3 Report Comment
Isaac	1744613143 Using :3 Report Comment
Pysch	1743972401 Using just gonna change the music :D Report Comment
Sarah :)	1743210324 Using :3 Report Comment
vRafffa*	1742668303 usingg Report Comment
༉‧₊˚ₐᵣᵢ❀༉‧₊˚.	1742465018 using tysm!! <3 Report Comment
radbrein	1741888510 Using!! <3 Report Comment
MillyCN	1741223734 Usando! Report Comment
Cameron :0	1739278787 using! Report Comment
mona	1738894946 this is so cool I'm using but I kinda wanna know how to change the song pls but like it's also fire so I'm not complaining :3 Report Comment to change the youtube video you need to press ctrl + f and then copy and paste this in "https://www.youtube.com/embed/tjlvmb8SGEs" the search bar that is the embed to the music i use and to change it you need to right click on the youtube video that you want and press copy embed code and then final you need to look for the embed link within the code sorry if this is hard to understand im bad at english... by Hitomi Fujiko; 1739019702; Report
ponyoked	1738648518 using! ty Report Comment
laura	1738611975 using ! Report Comment
Azrayana	1738258155 Using Report Comment
June	1738016341 using!! i just added my own autoplay tho! Report Comment
۪۪ ིྀ 𝅄 Ⲩυⲙⲉⲭ🫐 𓈒 ִ۫ 𝇌࣪ .	1736705582 using! I changed it a bit :3 Report Comment
nads :3	1735225231 using !! Report Comment