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

SKULLZ	1713626867 using Report Comment
.rody.	1711126287 using!! Report Comment
Xxmenancem4rixX	1710559654 Using! Report Comment
FellowHimbo	1707160458 Using! Report Comment
pancakes.go	1706636606 usiin Report Comment
Sillylittleboyo	1704395653 Using this is so sick dude Report Comment
Cybersky1<3	1703979650 USING Report Comment
Cybersky1<3	1703979650 USING Report Comment
Zombietramp	1703868191 USING Report Comment
ko.fiii	1701272181 Thank u (using) Report Comment
marley	1700970779 gonna use this, thank you!!! Report Comment
WALLACE !! XD	1700878602 how do i remove music ?/genq Report Comment just take out the iframe its at the very bottom! by arlo atomickk; 1700956350; Report
junoo	1700402427 probs using ! Report Comment
Clumsyink	1700261934 I'm definitely using this lmaooo Report Comment
neztiam	1697689972 I LOVE IT OMGGGGGG Report Comment
Kore Jewels	1697600314 Using Report Comment
assentkent	1694693369 using Report Comment
Roffe	1691949778 particially using Report Comment
zai	1690617066 im in love 2ith u 4 making this Report Comment
Ace ^_~	1690424734 using this rn and im so obsessed, the music was a great add on ^_^ summertime is a supperior song Report Comment AGREED by arlo atomickk; 1690460525; Report