🍓MYSPACE LAYOUT🍓

heyy !! , here is my layout for myspace . you can copy it and use it for yourself . you just need to add your own urls . if you need help w anything feel free to message me . have a good day <3

.topLeft:after {
content: "";
white-space: pre-wrap;
display: block;
height: 500px;
background-image: url(lll), url(https://i.pinimg.com/originals/6c/46/b9/6c46b91282c3dd3f5b2d729276a0c1ab.jpg);
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
background-size: 390px;
}
#container:before {
content: "";
white-space: pre-wrap;
display: block;
height: 50px;
background-image: url(https://media.giphy.com/media/2sfDnHIEFe7aAbArdZ/giphy.gif);
background-position: center;
background-repeat: no-repeat;
margin-top: 15px;
background-size: contain;
}
#commentInput {
color: #fff;
}
.url a {
display: none;
}
.url {
font-size: 0px;
background: url(https://i.pinimg.com/originals/d4/2d/bc/d42dbc8cbafa248aaacf84ebc876e801.jpg);
background-size: 310px;
position: fixed;
right: 0;
bottom: 0;
color: transparent !important;
height: 256px;
width: 256px;
border: none;
box-shadow: none;
padding: 0 !important;
z-index: 1000;
}
e441c8
ee00c4
e674d2
@media only screen and (max-width: 768px)
.topLeft, .topRight {
width: auto;
float: none;
}
@keyframes slide{
from {
margin-right: -100%;
}
to {
margin-right: 0%;
}

}
.topRight{
animation-duration: 5s;
animation-name: slide;
}
@keyframes slidein{
from {
margin-left: -100%;
}

to {
margin-left: 0%;

}
}
.topLeft{
animation-duration: 5s;
animation-name: slidein;
}
a {
color: #fff;
}
::-webkit-scrollbar {
width: 15px;
}
::-webkit-scrollbar-thumb {
background: url(https://media.giphy.com/media/3oz8xAngRsoidiG8Ss/giphy.gif);
}

::-webkit-scrollbar-track {
background: #000;
}
.player::before {
content: "";
display: block;
position: relative;
width: calc(40% -20px);
height: 390px;
max-width: 390px;
background-position: 0 0;
background-size: 100% 100%;
background-image: url(https://i.pinimg.com/originals/ae/52/30/ae5230f6c1fa18aa6cce16021a660470.jpg);
}
.songName span {
display: inline-block;
padding-left: 100%;
animation: marquee 15s linear infinite;
}
.songName span:hover {
animation-play-state: paused;
}
@keyframes marquee{
0% {
transform: translate(0, 0);
}

100% {
transform: translate(-100%, 0);
}
}
div.songName {
color: #fff;
}
.songName img {
display: none;
}
.player a img, .player audio::-webkit-media-controls-play-button, .player audio::-webkit-media-controls-mute-button, .player audio::-webkit-media-controls-volume-slider, .player audio::-webkit-media-controls-timeline {
filter: invert();
-webkit-filter: invert();
}
.player audio, .player audio::-webkit-media-controls, .player audio::-webkit-media-controls-enclosure, .player audio::-webkit-media-controls-panel {
background: #fff;
background: var(--color--bg-box);
height: 36px;
filter: none;
}
.fwiendFace, .tableLeft {
transition: 0.5s;
}
.fwiendFace:hover, .tableLeft:hover {
border-radius: 5px;
transform: scale(1.2);
background: url(https://media.giphy.com/media/xTiN0HL2iq3oHF1852/giphy.gif);
animation: wob .5s linear infinite;
box-shadow: 0 0 1rem #fff;
border: 1px solid #fff;
transition: 0.5s;
}
.songName {
overflow: hidden;
background: linear-gradient(to right, black , #d93232, #ab0909, black, #d93232, #ab0909);
border-radius: 3px;
margin-top: 0px;
font-size: small;
box-shadow: 0px 4px 6px -5px #333;
text-shadow: 0px -2px #333;
color: #ee00c4;
padding: 5px;
}
.songName {
white-space: nowrap;
}
.songName b {
display: none;
}
.songTitle:after {
content: ".mp3";
}
.player {
background: linear-gradient(to right, black ,#a80707, #cf2929, black, #a80707, #cf2929);
border: 3px double #fff;
border-image: url(https://pa1.narvii.com/7439/308956765e9d5c1da45971db8cd81069e1e756f6r1-335-50400.gif) 30 stretch;
padding: 0;
}
@media only screen and (max-width: 768px)
.topLeft, .topRight {
width: auto;
float: none;
}
@keyframes fadein {
0% {
opacity: 0;
color: #fff;
}

10% {
opacity: 0;
color: #fff;
}
100% {
opacity: 1;
color: transparent;
}
}
#container {
-webkit-animation: fadein 5s;
}
.logo::before {
margin-right: 0px;
display: inline-block;
height: 24px;
width: 24px;
content: "";
background: url(https://i.pinimg.com/originals/67/7c/af/677cafac39ac3beb8d7b384d65cb1da7.jpg) no-repeat 0 0;
background-size: 24px 24px;
}
.logo::after {
margin-right: 0px;
display: inline-block;
height: 24px;
width: 24px;
content: "";
background: url(https://i.pinimg.com/originals/6c/46/b9/6c46b91282c3dd3f5b2d729276a0c1ab.jpg) no-repeat 0 0;
background-size: 24px 24px;
}
div#hSub {
color: #000;
}
div.boxInfo.box {
border: 4px double #fff;
background: url(https://media.giphy.com/media/Q18esPAwMiofe/giphy.gif);
}
.boxInfo {
border: 4px double #fff;
margin-bottom: 20px;
margin-top: 20px;
}
.blog {
background-image: url(https://media.giphy.com/media/kkoRgXbTCPY3K/giphy.gif);
border: 4px double #fff;
}
p {
color: #fff;
}
div#hSub a {
letter-spacing: 5px;
}
#header a:not(.logo) {
margin-left: 10px;
color: #fff;
font-size: small;
text-decoration: none;
font-family: Courier New;
}
#imgPreview img {
width: auto;
height: auto;
max-height: calc(100% - 10px );
max-width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border: 0px solid #fff;
cursor: zoom-out;
background: url(lll);
}
#sMsg::after {
content: "🍓talk 2 me";
font-size: 15px;
}
#sMsg {
font-size: 0px;
color: #fff;
}
#add::after {
content: "🍓lets b fwiends!!";
font-size: 15px;
}
#add {
font-size: 0px;
color: #fff;
}
.topRight > .blurbs.box > .blogs > div > b::after {
font-size: 15px !Important;
content: "<3";
animation: test 1s linear infinite;
}
.topRight > .blurbs.box > .blogs > div > b {
font-size: 0px !Important;
}
#viewFriends {
display: none;
}
.fwiendCounter>b::after {
content: " 🍓friends";
font-size: 15px;
color: #fff;
}
.fwiendCount {
color: #fff;
font-size: 15px;
}
.fwiendCounter>b {
font-size: 0px;
color: #fff;
}
.fwiendCounter>b>.uName {
font-size: 0px;
color: #fff;
}
.topRight > .box:not(.blurbs) > .rightHead > b::after {
content: "🍓🍓🍓";
font-size: 15px;
color: #fff;
}
.topRight > .box:not(.blurbs) > .rightHead > b > span.uName {
font-size: -9999px;
}
.topRight > .box:not(.blurbs) > .rightHead > b {
font-size: 0;
}
.blurbs.box > .rightHead > b > span.uName::after {
content: "<3";
color: #fff;
font-size: 15px;
}
.blurbs.box > .rightHead > b {
font-size: 0px;
}
.blurbs.box > .rightHead > b > span.uName {
font-size: 0px;
color: #fff;
}
#sMsg {
background-repeat: no-repeat;
background: url(https://media.giphy.com/media/l0JM7kT2lOOQ7wo92/giphy.gif) no-repeat;
}
#add {
background-repeat: no-repeat;
background: url(https://media.giphy.com/media/l0JM7kT2lOOQ7wo92/giphy.gif) no-repeat;
}
#block {
display: none;
}
#report {
display: none;
}
.topRight > .extended.box::after {
font-size: 15px !important;
content: "<3";
}
.topRight > .extended.box > h3 {
font-size: 0;
}
.boxHead {
display: none;
text-indent: -9999px;
}
div#hSub a {
font-family: courier;
}
.fwiendFace img, .tableLeft img {
border: 1px solid #fff;
}
input, button {
background: linear-gradient(to bottom, black 0% , #cf2929 25% #960909 50%, black 75%, #cf2929 85%, #960909 100%);
color: #fff;
border: 1px solid #fff;
font-family: "courier";
}
input, .fwiendFace b, .tableLeft b, .tableLeft img, #avatar.avatar, .fwiendFace img, .logo, div#hSub a, button, #add.boxButton, #sMsg.boxButton, #imgPreview img, #header a:not(.logo), #imgPreview {
cursor: url(i.cursors-4anu.net/symbols/sym-8/sym761.ani),auto!important;
}
html {
cursor: url(http://ani.cursors-4u.net/cursors/cur-12/cur1103.png),auto!important;
}
.fwiendFace img, .tableLeft img {
width: 100px;
height: 100px;
object-fit: cover;
object-position: top;
}
#container {
background: urlc);
border: 5px double #fff;
border-image: url(https://media.giphy.com/media/H7F0zSaC9ZHZC/giphy.gif) 30 stretch;
}
div#online {
content: url(https://i5.glitter-graphics.org/pub/745/745455rvacxjsot2.gif);
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
body {
font-family: "Courier New";
}
.logo b span {
display: none;
}
.logo b:before {
vertical-align: middle;
font-size: 20px;
content: "";
}
.logo b:after {
vertical-align: middle;
font-size: 20px;
color: #fff;
content: "🍓my fucking world🍓";
}
}
img {
image-rendering: initial;
}
body {
background-image: url(https://content.pimp-my-profile.com/ms/i40/7/3/30/fe6fd0e2cbb.gif);repeat!important;
}
body {
text-align: center;
}
.tableLeft, .tableRight {
background :url(https://media.giphy.com/media/3oz8xAngRsoidiG8Ss/giphy.gif);
border-bottom: 2px solid #fff;
padding: 10px;
vertical-align: top;
overflow: hidden;
}
.tableRight {
width: 75%;
padding: 10px;
overflow-wrap: anywhere;
}
div {
color: #fff;
}
.rightHead {
background: url(https://media.giphy.com/media/l0JM7kT2lOOQ7wo92/giphy.gif);
color: #fff;
border: 1px solid #fff;
border-image: url(https://media.giphy.com/media/l0JM7kT2lOOQ7wo92/giphy.gif) 30 stretch;
padding-left: 4px;
}
h4 {
color: #fff;
margin-bottom: 0px;
}
.boxButton {
display: inline-block;
width: calc( 49% - 60px );
padding-left: 30px;
height: 24px;
font-size: small;
color: #ee00c4;
padding-top: 7px;
}
.boxHead {
background: #ab0909;
color: #fff;
padding: 3px;
padding-bottom: 4px;
padding-left: 6px;
}
.extended {
background-image: url(https://i.gifer.com/7JGR.gif)
border: 1px double #ab0909;
margin-bottom: 20px;
margin-top: 20px;
}
.blurbs, #box, #header, #hSub {
background: url(https://media.giphy.com/media/Q18esPAwMiofe/giphy.gif);
border: 3px double #fff;
padding: 0px;
margin-bottom: 10px;
}
.fwiendCount {
color: #fff;
}
#commentInput {
border: 1px solid #fff;
background: linear-gradient(to bottom right, #ab0909 0%, black 25%, #ab0909 50%, black 75%, #ab0909 100%);

}
#hSub a {
color: #fff;
text-decoration: none;
}
#header, #hSub {
background: #ab0909 url(https://media.giphy.com/media/Q18esPAwMiofe/giphy.gif)repeat!important;
border-bottom: 1px solid #fff !important;
border-radius: 10px;
}

( Made with Carrd )