Mayday Parade - A Lesson In Romantics Layout!

Tags: mayday parade, music, album, orange, red, animation, gif, layout, emo
Description:

Has animations and autoplaying music!
Preview:

click on the image for a larger preview
Code:

<!-- (c) Layout created by ✭ Fren-z ✭ (https://layouts.spacehey.com/layout?id=25986) -->

<style>
@import url('https://fonts.googleapis.com/css2?family=Rubik+Iso&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Syne+Mono&display=swap');
p{
    color: white;
    text-align: center;
    font-family: 'Syne Mono';
    font-size: 14px;
}
h1,h2,h3,h4,h5 {
    color: white;
    color-hover: #0095ff;
    text-align: center;
    font-family: 'Rubik Iso';
    font-size: 20px;
    text-shadow: 2px 2px #000000;
}
body{background:url("https://i.ibb.co/0Fj7R6K/mdprd.jpg") no-repeat fixed; background-size:cover;
}

main {
    border-radius: 10px;
    background: url(https://www.onlygfx.com/wp-content/uploads/2021/03/red-orange-grunge-background-2.jpg);
background-size: 50%;
    border: solid #000000 4px;
}
.general-about .details {
    border-radius: 10px;
    border: solid #000000 4px;
    padding: 10px;
    background: url(https://i.ibb.co/hCdzfd2/bldng2.png);
}
.general-about .profile-pic img {
     border-radius: 10px;
     border: solid #000000 3px;
     border-shadow: 2px 2px #000000;
}
.contact .inner {
    border-radius: 10px;
    border: solid #000000 4px;
    background: url(https://i.ibb.co/hCdzfd2/bldng2.png);
}
:root {
    --logo-blue: ;
    --darker-blue: white;
    --lighter-blue: ;
    --even-lighter-blue: ;
    --lightest-blue: ;
    --dark-orange: white;
    --light-orange: ;
    --even-lighter-orange: ;
    --green: ;
}
.mood {
    border-radius: 10px;
    margin-top: 10px;
    margin-bottom: 3px;
    border: solid #000000 4px;
    padding-left: 10px;
    padding-top: 5px;
    background: url(https://i.ibb.co/hCdzfd2/bldng2.png);
}
.profile .left .table-section .inner {
    border-radius: 10px;
    border: solid #000000 4px;
    padding-left: 7px;
    padding-bottom: 5px;
    padding-top: 5px;
    background: url(https://i.ibb.co/hCdzfd2/bldng2.png);
}
.blog-preview {
    border-radius: 10px;
    margin-top: 32px;
    border: solid #000000 4px;
    background: url(https://i.ibb.co/B3vBTTn/bldng.png);
}
.blurbs .inner {
    border-radius: 10px;
    border: solid #000000 4px;
    padding-left: 10px;
    padding-top: 10px;
    background: url(https://i.ibb.co/B3vBTTn/bldng.png);
}
.friends .inner {
    border-radius: 10px;
    border: solid #000000 4px;
    padding-left: 10px;
    padding-top: 10px;
    margin-bottom: 20px;
    background: url(https://i.ibb.co/B3vBTTn/bldng.png);
}
table.comments-table{
    display: block;
    height: 250px!important;
    overflow-y: scroll;
    background: url(https://i.ibb.co/B3vBTTn/bldng.png);
}
.url-info {
background-position: center;
    border-radius: 10px;
    border: var(--borders)!important;
    background: url(https://i.ibb.co/yfrN9ZY/10950182-1b4b9.gif);
    height:300px;
}

.url-info p{
    opacity: 0.0;
}

:root {
    border-radius: 10px;
    --borders: solid #000000 4px;
    background: #000000;
}
nav .links {
    border-radius: 10px;
    border: solid #000000 4px;
    text-align: center;
    font-family: 'Syne Mono';
    background-color: black;
filter: grayscale(1);
}
.top {
    border: var(--borders);
    margin-bottom: 10px;
    font-family: 'Syne Mono';
}

 .top input{
    border: solid black 3px;
}

.profile h1 {
    text-align: center;
    background: none;
    font-size: 45px;
}
/* contact icons */
.contact .inner a img {
font-size: 0;
}
.contact .inner a img:before {
font-family: 'Syne Mono';
font-size: 1em;
display: block
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
/* add to friends */
content: "⨠"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: "⨠"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: "⨠"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: "⨠"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: "⨠"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: "⨠"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: "⨠"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: "⨠"
}
footer{
    border-radius: 10px;
    border: solid #000000 4px;
    font-size: 15px;
    background: url(https://i.ibb.co/0FdFjbn/bttm.jpg);
}
.friends .person img {
    border-radius: 10px;
    border: solid #000000;
}
.profile .friends .person p {
    color: white;
    font-weight: normal;
}
.comments-table td img {
    border-radius: 10px;
    border: solid #000000;
}
.comments-table td p {
    border-radius: 10px;
    font-weight: normal;
}
nav .top {
    border-radius: 10px;
    border: solid #000000 4px;
    background: url(https://i.ibb.co/F0rhS39/bannr.jpg);
    no-repeat fixed; 
    background-size:cover;
}
.friends-grid{
    text-align: center;
    color: white;
}
.count {
    color: #ffffff;
}
button, optgroup, select, textarea {
    font-family: 'Syne Mono';
    font-size: 10px;
    line-height: 1.15;
    margin: 0;
    background: #000000;
    border: #000000 solid 3px;
    color: white;
}

nav img.logo{
    filter: brightness(0) saturate(100%) ;!important;
}

nav label{
color: black;
}

nav .right {
color: black;
}

.logout-btn{
color: black;
}

.profile-info{
background:url("https://i.ibb.co/KN20XBk/editprfl.jpg");
    border-radius: 10px;
    border: solid #000000 4px;
}

.comments-table td{
background:url("https://i.ibb.co/KN20XBk/editprfl.jpg");
no-repeat fixed; background-size:cover;
}

.profile .table-section{
border: none;
}

.contact .heading:before{ content: url(https://i.ibb.co/f9r6B0Y/ezgif-3-88b360e7da.jpg); 
}

.profile .contact{
border: none;
}

body { cursor: url('https://cur.cursors-4u.net/mechanics/mec-3/mec228.cur'), auto; }

.online {
    content: url(https://im5.ezgif.com/tmp/ezgif-5-2578cba97f.png);
    margin:auto;
    padding-bottom: 5px;
}


img:hover , .url-info: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); }
}

@keyframes type{
  0%{
    width:0ch;
  }
  
  100%{
    width:27ch;
  }
}

.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, 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, 8px);
}
100% {
transform: translate(0, -0px);
}

</style>

<style>
.online {
  animation: rotation 8s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

.icon {
        content: url(https://i.ibb.co/CWw5vZk/ezgif-5-7a4eda612d.png);
        display: inline-block;}
</style>
<style>
/*Customize Scrollbar*/
    ::-webkit-scrollbar {
    width: 8px;
    height: 10px;}

    ::-webkit-scrollbar-thumb {
    background: orange;}

    ::-webkit-scrollbar-track {
    background:black;}
</style>

<iframe width="0" height="0" src="https://www.youtube.com/embed/9OaeZiWKZIY//?&;amp;;autoplay=1&;loop=1&;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.