magenta and cyan layout

Tags: scene, emo, pink, blue, cyan, myspace

Description:

this iz my old layout b4 I changed it :) feel free 2 use or dissect !!! comment if u're using it :)

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by alexis ^_^ (https://layouts.spacehey.com/layout?id=102827) -->

<style>
          .container{
        width: 1100px;
    }
body {
        background-image:url(https://m.media-amazon.com/images/I/61ITAcRZP6L._AC_UF894,1000_QL80_.jpg);
}
.profile {
background:url(https://www.rvinyl.com/Shared/Images/Product/Rwraps/Checkered-Vinyl-Film-Wraps/White-Checkered-Vinyl-Film-Wrap-Close-Up-Pattern.jpg);
color: cyan;
text-shadow: 0 0 9px magenta;
}
:root {
        --logo-blue: url(https://img1.picmix.com/output/stamp/normal/8/5/6/1/1821658_9b3b4.gif);
        --darker-blue: cyan;
        --lighter-blue: magenta;
        --even-lighter-blue: url(https://img1.picmix.com/output/stamp/normal/8/5/6/1/1821658_9b3b4.gif);
        --lightest-blue: black;
        --dark-orange: cyan;
        --light-orange: url(https://img1.picmix.com/output/stamp/normal/8/5/6/1/1821658_9b3b4.gif);
        --even-lighter-orange: black;
        --green: cyan;
    }
<style>
.profile .contact, .profile .table-section, .profile .url-info, .profile .friends, .profile .blurbs, table.comments-table, DIV.blog-preview { 
  border-style:Double; 
 border-width:6px; 
 border-color:magenta; 
background:#000000;
}

/* contact icons */
.contact .inner a img {
font-size: 0;
}
.contact .inner a img:before {
font-size: 1em;
display: block
}
<style>
.friends .heading{ font-size:0; }
.friends .heading:before{ content: "frenz <3 "; font-size:.8rem; font-weight:bold; 
color:cyan; }
}
.friends#comments .heading{ font-size:0; }
.friends#comments .heading:before{ content: "frenz comments"; font-size:.8rem; font-weight:bold;
color:cyan; }
.profile .table-section .heading h4 { font-size:0; }
.profile .table-section .heading h4:before{ content: "stuffz x3"; font-size:.8rem; font-weight:bold; 
color:cyan; }
.contact .heading{ font-size:0; }
.contact .heading:before{ content: "add me, i don't bite !!!"; font-size:.8rem; font-weight:bold; 
color:cyan; }
}
.blurbs .heading{ font-size:0; }
.blurbs .heading:before{ content: "meeeeee"; font-size:.8rem; font-weight:bold; color:cyan; }
/* replace with cd image that has transparent background. must be 150px by 150px. */
:root {
--cd-image: url('https://fluorescent-lights.neocities.org/Digital-CD-Disk-Vector-Transparent-PNG.png');
}
.profile-pic {
position: relative;
width: 183px;
filter: drop-shadow(0 0 0.25rem gray);
}
.profile-pic:after {
content: "";
background: url('https://fluorescent-lights.neocities.org/f0rzNHe.png'), linear-gradient(150deg, rgba(255,255,255,0.4), rgba(255,255,255,0.2), 40%, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.6));
background-size: contain, cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.profile-pic:before {
content: "";
background: var(--cd-image);
position: absolute;
top: 5px;
left: -20px;
width: 150px;
height: 150px;
background-repeat: no-repeat;
z-index: -1;
animation-name: spin;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear; 
transition: left ease 0.5s;
}
.profile-pic:hover:before {
left: -75px;
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
.profile-pic .pfp-fallback {
float: right;
width: 163px;
height: 160px;
border: none;
}
.general-about .profile-pic img {
max-width: inherit;
}
<style>
h1{
animation: type 3s steps(27);
  color: transparent;
  font-size: 7px;
  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 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes float {
0% { transform: translate(0, 0px);
}
50% {
transform: translate(0, 6px);
}
100% {
transform: translate(0, -0px);
}
}
footer {
border-radius: 15px;
background-image: 
url(https://img1.picmix.com/output/stamp/normal/8/5/6/1/1821658_9b3b4.gif);
color:cyan; 
}
        .online{content:url(LOGO URL) }
* {cursor: url(CURSOR URL), auto !important;}
.friends .inner {
    overflow-y: scroll;
    max-height: 400px;
}
.profile h1{
        font-size: 40px;
        text-align: center;
    }
             ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    }

    ::-webkit-scrollbar-thumb {
    background: magenta;
    border: outset 4px magenta;
    }

    ::-webkit-scrollbar-track {
    background: linear-gradient(cyan, cyan);
    border: inset 4px cyan;
    }
.logo {
content:url("https://static.wikia.nocookie.net/logopedia/images/2/20/MySpace_logo.svg");
filter: invert(100%);
}
   a:hover {
     color: lime; 
   } 
   a{
     color: cyan; 
   }
<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 12 of 12 comments ( View all | Add Comment )

Mya	1714387354 cuteeeee omg Report Comment
warmsensitiveheart	1714246140 usando! Report Comment
M4nUXDDD	1713705102 im gonna use thissssssssssssssssss Report Comment
BuwaBisquit	1713543088 using ^_^ Report Comment
Randley's frozen cellar	1713182426 Using Report Comment
RONN13xD3C4Y	1712886953 Usingg Report Comment
Azie Bug ❁ཻུ۪۪♡	1712816560 i used part of this! Report Comment
AxidKandi	1712605896 Using!!! :D Report Comment
MissingInAction	1712565210 Uzing :3 Report Comment
bbeeaann	1712292252 using w/ mods! tyy Report Comment
Raddix Iznt REAL!!!	1712182838 Using Report Comment
womp	1712108104 using!! :P Report Comment