Scott Pilgrim vs The World Layout

Tags: scott pilgrim vs the world, scott pilgrim, pixel, green, cursor, music, autoplay, michael cera

Description:

Includes: autoplay of Summertime by the Sex bob-ombs, scott pilgrim cursor, tilted flickering nameplate, gif profile pic, ETC! Free for everyone to use just let me know in the comments!

Preview:

click on the image for a larger preview

Code:

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

<style>


@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@import url('https://cory.anota.do/spacehey/pdg_neon.css');

/*BODY FONT*/
   body{font-family: 'Orbitron', sans-serif;
   color: white !important;
   font-size: 90%;
   text-shadow: 2px 2px 3px #FFFFFF, 0 0 25px white, 0 0 5px #FFFFFF}

/*HEADINGS FONT*/
   h1, h2, h3, h4, .profile .blurbs .section h4{font-family: 'Press Start 2P', cursive;
   font-size: 180%;
   color: white !important;
   text-shadow: 2px 2px 3px #FFFFFF, 0 0 25px white, 0 0 5px #FFFFFF}

/*TILTED NAMEPLATE*/
:root{ --neon-text-color: #00ff80; }
.profile .left h1{font-family: 'Press Start 2P', cursive;
   font-size: 150%;
   transform: rotate(-10deg)}

/*TEXT SETTINGS*/
main p{
   letter-spacing: 2px;
   font-weight: 700; 
   line-height: 1.5;
   color: white !important;
   text-shadow: 2px 2px 3px #FFFFFF, 0 0 25px white, 0 0 5px #FFFFFF}

/*GIF PFP*/
.profile-pic > img { display:none; }
.profile-pic:after { background-image: url("https://i.ibb.co/5j85QkC/1nvTHgn.gif"); display: inline-block; content:"" }
.general-about .profile-pic:after { background-size: cover; width: 160px; height: 160px} 

main{background: none}
/*CURSOR*/
*{cursor: url(http://www.rw-designer.com/cursor-view/134896.png), auto !important}

/*LINK COLOURS*/
.links, .links a, .logout-btn{
   color: white !important;
   text-shadow: 0px 0px 5px 3px white !important;
   border: none !important}

a{color: white !important}
   a:hover{color: yellow !important;
    text-decoration: underline}
   a:visited: color: yellow !important}

.top a{color: #FF0000 !important}
   .top a:hover{color: white !important
    text-decoration: underline}
   .top a:visited{color: white !important}

.links a{color: #5cad58 !important}
   .links a:hover{color: white !important
    text-decoration: underline}
   .links a:visited{color: white !important}

footer .links a{color: white !important}
   footer .links a{color: yellow !important
    text-decoration: underline}
   footer .links a{color: yellow !important}

/*BORDERS*/
.contact, .table-section{
   border-width: 2px; 
   border-radius: 4px;
   border-color: black !important;
   box-shadow: 0px 0px 5px 3px #00ff80 !important;
   margin-bottom: 20px !important;
   background-color: rgba(57, 104, 79, 0.8);
   padding: 1px}

.blurbs, .friends{ 
   border: solid black 2px;
   border-radius: 4px;
   margin-bottom: 20px;
   box-shadow: 0px 0px 5px 3px #00ff80 !important;
   margin-bottom: 20px !important
   background: url(https://i.ibb.co/FX82KCC/L2JqDw7.jpg) !important;
   padding: 1px}

.comments-table{ 
   border: solid black 2px;
   border-radius: 4px;
   box-shadow: 0px 0px 5px 3px #00ff80 !important;
   margin-bottom: 20px !important
   background: url(https://i.ibb.co/FX82KCC/L2JqDw7.jpg);
   padding: 1px}

footer .links{
   background: none !important;
   box-shadow: none !important}

/*VERY BACK BACKGROUND*/
body{
   background: url(https://i.ibb.co/Jt1pqLW/p04QIiy.gif);  
   background-size: 100%}

/*PROFILE BCKGROUND*/
.profile{
   background-image: url(https://i.ibb.co/d53gVx7/CWPpsdG.gif);
   background-size: 100%;
   margin-bottom: 5px;
   border-radius: 3px;
   border: 2px solid #00ff80;
   border-top: 1px none !important;
   border-radius}

/*HEADER*/
.top{
   background:  !important;
   background-image: url(https://i.ibb.co/JpJwxCK/FOa3SCC.png) !important;
   background-size: 100% !important;
   height: 200px;
   margin-top: 20px;
   border-radius: 3px;
   border: 2px solid #00ff80;
   border-bottom: 1px none !important}

/*FOOTER*/
footer {
   height: 150px;
   background-image: url(https://i.ibb.co/g6MnnnV/TckSgPZ.jpg);
   background-position: centre !important;
   background-size: cover;
   border-radius: 3px;
   box-shadow: 0px 0px 5px 3px #00ff80 !important}

/*NAV BAR*/
.links{ 
   text-align: center;
   margin-bottom: -7px !important;
   background-color: rgba(57, 104, 79, 0.8) !important;
   border: 2px solid #00ff80 !important;
   border-top: none !important;
   border-bottom: none !important}

/*STARS IN NAV BAR*/
nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after{
    content: " ⭒ ";
    color:  white}

/*LOGO*/
.logo {
filter: sepia(100%) hue-rotate(45deg) saturate(10);
box-shadow: 0px 0px 7px 5px white;
}

/*HEADINGS BACKGROUND*/
.profile .blurbs .heading, .profile .friends .heading, .profile .table-section .heading, .profile .contact .heading, links{
   background: linear-gradient(#39684fcc, black);
   border: 2px solid black;
   border-radius: 2px}

/*CIRCULAR FRIENDS PFP*/
.friends-grid img{
   border-radius: 500px;
   overflow: hidden;
   box-shadow: 0px 0px 9px 7px #00ff80}

/*INTERESTS GRID*/
:root{
   --even-lighter-blue: rgb(36, 64, 54);
   --lightest-blue: rgb(36, 64, 54);

/*FRIENDS-GRID*/
   --light-orange: url(https://i.ibb.co/QKm2mwv/SFq4lE3.gif);
   --even-lighter-orange: linear-gradient(#00ff80, black)}

/*FRIENDS BACKGROUND*/
.friends{
   background-image: url(https://i.ibb.co/HxGXR7C/8hKmh3b.gif);
   background-size: 100%;
   border-style:Double; 
   border-width:6px; 
   border-radius: 5px;
   border-color: white}

/*URL SECTION*/
.profile .url-info{
   background-image:url(https://i.ibb.co/QKm2mwv/SFq4lE3.gif);
   background-size: cover !important;
   border: solid #39684fcc 2px;
   border-radius: 4px;
   box-shadow: 0px 0px 5px 3px #00ff80;
   margin-bottom: 20px !important}

/*ELEMENT SHAKE*/
img:hover , .url-info:hover , .online:hover {
  animation: shake 1s;
  animation-iteration-count: infinite;
}

@keyframes shake {

  0% { transform: translate(1px, 1px) rotate(0deg); }

  10% { transform: translate(-1px, -2px) rotate(-1deg); }

  20% { transform: translate(-3px, 0px) rotate(1deg); }

  30% { transform: translate(3px, 2px) rotate(0deg); }

  40% { transform: translate(1px, -1px) rotate(1deg); }

  50% { transform: translate(-1px, 2px) rotate(-1deg); }

  60% { transform: translate(-3px, 1px) rotate(0deg); }

  70% { transform: translate(3px, 1px) rotate(-1deg); }

  80% { transform: translate(-1px, -1px) rotate(1deg); }

  90% { transform: translate(1px, 2px) rotate(0deg); }

  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

/*CONTACT SECTION*/
.contact {
   margin-bottom: 20px !important;
   font-size: 12px;
   border-radius: 5px;
   border-top: 1px;
   text-align: left}

/*CONTACT ICONS*/
.contact .inner a img {
font-size: 0;
}
.contact .inner a img:before {
font-size: 1em;
display: block
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
/* add to friends */
content: url(https://i.ibb.co/DwZ5vJn/hf6Mie5.gif)
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: url(https://i.ibb.co/DwZ5vJn/hf6Mie5.gif)
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: url(https://i.ibb.co/DwZ5vJn/hf6Mie5.gif)
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: url(https://i.ibb.co/DwZ5vJn/hf6Mie5.gif)
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: url(https://i.ibb.co/DwZ5vJn/hf6Mie5.gif)
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: url(https://i.ibb.co/DwZ5vJn/hf6Mie5.gif)
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: url(https://i.ibb.co/DwZ5vJn/hf6Mie5.gif)
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: url(https://i.ibb.co/DwZ5vJn/hf6Mie5.gif)}


/*PROFILE LINKS ICONS*/
  .icon, .award img {
        content: url(https://i.ibb.co/5j85QkC/1nvTHgn.gif);
        display: inline-block;
        height: 2.0em;
        width: 2.0em;
        margin: 0 .05em 0 .1em;
        vertical-align: -0.3em;
        color: rgba(0,0,0,0)}

/*BUTTONS*/
button{
   color: white;
   background: url(https://i.ibb.co/TktyDqr/X09mDtI.gif); 
   border: 2px solid white;
   padding: 2px}
   button:hover {
   color: white;
   background: url(https://i.ibb.co/TktyDqr/X09mDtI.gif);
   padding: 4px}

/*TOP SEARCH BAR*/
  .search-wrapper input[type=text] {
    background-color: #00ff80  !important;
    border: 1px solid white !important;
    border-radius: 10px !important}
 button{
    border-radius: 10px !important;
    border: 1px solid white !important;
    background-color:  #00ff80 !important}

/*IMAGE ABOVE BLURBS*/
.profile-info {
   font-size: 0px;
   border: 2px solid #00ff80;
   border-radius: 5px;
   background: url(https://i.ibb.co/VmSMd3X/vyB7qTp.gif);
   position: centre !important;
   height: 200px;
   box-shadow: 0px 0px 7px 5px #00ff80}

/*ANIMATION OVERLAY*/
html:before {
  animation: grain 8s steps(10) infinite;
  background-image: url(https://i.ibb.co/XWtQmpX/QpnTsrV.jpg);
  content: "";
  height: 300%;
  left: -50%;
  opacity:.2;
  position: fixed;
  top: -110%;
  width: 300%;
  pointer-events:none;
}
@keyframes grain {
  0%, 100% { transform:translate(0, 0) }
  10% { transform:translate(-5%, -10%) }
  20% { transform:translate(-15%, 5%) }
  30% { transform:translate(7%, -25%) }
  40% { transform:translate(-5%, 25%) }
  50% { transform:translate(-15%, 10%) }
  60% { transform:translate(15%, 0%) }
  70% { transform:translate(0%, 15%) }
  80% { transform:translate(3%, 35%) }
  90% { transform:translate(-10%, 10%) }
}

<style>
left image
</style>
<div style="float: ; max-height: 800px; position: fixed; left: 1px; bottom: 10px; z-index: 200; width: 300px;"><img src="https://i.ibb.co/vPQvCWw/6pWTNkw.gif"/></div>

<style>
right image
</style>
<div style="float: ; max-height: 800px; position: fixed; top: 1px; bottom: 10px; right: 1px; z-index: 200; width: 300px;"><img src="https://i.ibb.co/MMZmhtS/V7Z5yxG.gif"/></div>

<iframe width="0" height="0" src="https://www.youtube.com/embed/WJCGnYMGa-U//?&;amp;;autoplay=1&;loop=infinite&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">

</iframe>

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 )

doomus	12 days ago using xP Report Comment
KITTY ! !	1 month ago using :)) Report Comment
Ghost ¡☆!	1 month ago Using :b (Just a part of the code) Report Comment
EatYourGutsForFun	2 months ago USING!!!! Report Comment
glitter	2 months ago USINGG Report Comment
caasIinreverse	2 months ago USING :D Report Comment
gigi:3	2 months ago USING Report Comment
Roxie_Richter	2 months ago Using!!! Report Comment
M0rbid_opossum	3 months ago Using!! Report Comment
killian	3 months ago USINGG!! Report Comment
vxl~tine	4 months ago using Report Comment
aidenonline	5 months ago using!! Report Comment
Ezra	6 months ago using! thanks! Report Comment
kkadenn	7 months ago usingg Report Comment
kkadenn	7 months ago usingg Report Comment
_𝑺𝒕𝒓𝒘𝒃𝒖𝒊𝒊_	8 months ago using! :3 Report Comment
Zuby	8 months ago Using!! Report Comment
mori! ☆	9 months ago using :3 Report Comment
MythicAzrael	10 months ago using! Report Comment