Purple and Black layout

Tags: scene, emo

Description:

This is my second time making a layout, I'm having fun with it! Pretty simple layout imo, but I really like it. You can make any changes to this layout if you want and no need to credit me. :)

Preview:

click on the image for a larger preview

Code:

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

<style>
@import url('https://fonts.googleapis.com/css2?family=Nosifer&display=swap');
font-family: 'Nosifer', sans-serif;
</style>


<style>
body {
    background: url(https://i.pinimg.com/564x/d5/0d/33/d50d335ded5cb562a9a57aad7d9c21cc.jpg);
    background-size: 1400px;
    background-attachment:fixed;                                                                                  
    background-position: center;
  }

 main{
background-image: none;
background-position:undefined;
background-attachment: fixed;
background-size: auto;
background-color: transparent;
   color: #ffffff;
text-shadow: 1px 1px 2px #ba12fc, 0 0 25px #000000, 0 0 8px #37074a; 
font-family: 'Nosifer', sans-serif;
font-size:15px

  }
.contact, .url-info, .table-section, .blurbs, .friends, .comments {
background-image: none;
background-position:undefined;
background-attachment: fixed;
background-size: auto;
background-color: #ba12fc;
border: 2px Solid #ffff!important;
box-shadow: 0 0 8px #ffffff, 0 0 12px;
text-shadow: 1px 1px 2px #ba12fc, 0 0 25px #000000, 0 0 8px #37074a; 

}

.heading{
background: #37074a!important;
}

a, .count {
color: #ffffff;
}

footer {
background-image: none;
background-position:undefined;
background-attachment: fixed;
background-size: auto;
background-color: transparent;
color:White;
}

:root {
--logo-blue: none;
--darker-blue:none;
--lighter-blue: none;
--even-lighter-blue: #37074a;
--lightest-blue: ;
--dark-orange:White;
--light-orange:#37074a;
--even-lighter-orange:black;
--green:black;
}
nav .links {
font-family: 'Nosifer', sans-serif;
}

.online{content:url("https://i9.glitter-graphics.org/pub/2396/2396449brq9i68sue.gif");}
</style>

<style>

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); }
}

</style>

<style>
font-family: 'Nosifer', sans-serif;
h1{
  animation: type 3s steps(27);
  color: white;
  font-size: 10px;
  font-family: courier;
  white-space: nowrap;
  overflow: hidden;
  }

@keyframes type{

  0%{
    width:0ch;
  }

  100%{
    width:27ch;
  }

}

@keyframes blink{
  0%{opacity:1;}
  50%{opacity:0;}
  100%{opacity:1;}
}

.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 4s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;

}

.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 4s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

@keyframes float {
0% { transform: translate(0, 0px);
}

50% {
transform: translate(0, 8px);
}

100% {
transform: translate(0, -0px);
}

</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 9 of 9 comments ( View all | Add Comment )

Xx_f0xxeh_xX	1708836635 using Report Comment
BAILS! XD	1707624889 USING!!!! Report Comment
FateTheCannibal	1706192395 USING!! Report Comment
skull_luver39	1704845971 using :D Report Comment
NoraXD ☣︎	1704647919 Using!! Report Comment
WtfSpoon	1704304852 using Report Comment
Tyra's unknown author	1702503077 i'm gonna use this for one of my blogs if u don't mind Report Comment
Ermes✩	1702069217 Hi, I was wondering, is there a way of making the layout not bounce? Hope you can help me :3 Report Comment hi there! I'm not smart with making layout, but you can simply remove one of the code that makes it move up and down if that's what u want. The code that makes it bob up and down is at the very bottom of the code list ( font-family: 'Nosifer', sans-serif; h1{) hope this helps a little :) by Wafflezaurus; 1702070137; Report I meant to put starting with the font-family: 'Nosifer', sans-serif; h1{ by Wafflezaurus; 1702070186; Report
EMOkewl[;	1701812371 using!! but i made a few changes,, hope u don't mind!! Report Comment Don't mind at all!! ^_^ by Wafflezaurus; 1701814382; Report