Alter animation

Tags: #vaporwave #trippy #mindfulness #psychedelic #layouts #elenaglitternose
Description:

If you like vaporwave or anything feel free to use this layout as it is very boy friendly and it promotes mindfulness. Feel free to add me or comment on my layout on the comment section. You can use it however you want you can use it to to customize it your own way as well feel free to call me don’t forget.
Code:

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

<style>
.container{
 width:100%;
 background-image: url('https://media.giphy.com/media/X8k5k7wtsWkSJDgBwv/giphy.gif');
 background-color: black;
 background-repeat: no-repeat;
 background-position: center top;
 background-size: cover;
}
main{
 width:100%;
 background-color: transparent;
 padding:5px;
 margin-top:50px;
}
/* one column */
.profile {
	display: flex;
	flex-direction: column;
}
.profile .left{
 width:100%!important;
}

/*-- making the profile a scroll box */

.profile{
 overflow-y: scroll;
 width:720px;
 height:400px;
 text-align: center;
	position: relative;
 top:0px; left: 420px;
 clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
}
.profile {
 padding:30px;
 background-color: transparent;
 background-image: url('https://media.giphy.com/media/q966pc8LlOUPx29X3W/giphy.gif');
 background-size: cover;
}
nav{
 margin-bottom:0px;
}
nav .top, nav .links{
 background: transparent;
 text-align: center;
}
footer{
 background-color: transparent;
 margin-top:100px;
}
footer .links{
 margin-top:0px;
}
footer a, footer p{
 font-size: 80%;
}
</style>
<style>

/* the cursors */

a:hover{
 cursor: url('https://cdn.custom-cursor.com/db/6547/32/material-ruby-pointer.png'), auto;
}
* {
 cursor: url('https://cdn.custom-cursor.com/db/6548/32/material-ruby-cursor.png'), auto;
}
</style>

<style>
/* font-family */
@font-face { font-family:"GarineldoNo02"; src: url("//dl.dropbox.com/s/f37r74phocsgj0u/GarineldoNo02.otf");}
@font-face { font-family:"ReginaScript-d9xAX"; src: url("//dl.dropbox.com/s/v3qylftbhsp22b9/ReginaScript-d9xAX.ttf");}
</style>

<style>
@import url('https://fonts.googleapis.com/css2?family=Itim&display=swap');

/* this is where the colors are rooted */

:root{
 --headers: darkred;
 --text: darkred;
 --links: darkred;
 --hover: red;
 --borders: 0px solid black;
 --font-family: serif;
 --curve: 0px;
}

/* this is where the colors for specific things are located */

h3, h4, h5{color: var(--text) !important;} /* headings*/
a{color: var(--text) !important;text-shadow:1px 1px 2px darkred;} /* color of links */
a:hover{color: var(--hover) !important;} /* color of links on hover */
.details-table td p, p, h2, .count {color: var(--text) !important;text-shadow:1px 1px 2px black;} /* color of text */
.friends a p{color: var(--headers) !important;font-weight:1!important;} /* color of names, and friends counter */
.friends a:hover p{color: var(--hover) !important;} /* color of names on hover */
nav label{color: var(--links) !important;} /* color of search */
.section h4 {color: var(--headers); !important;} /* aboutme & want2meet headings */
.blurbs .heading {display:none;} /* hides the blurbs title */
.details p:last-child{color: var(--text)!important;} /* where the last login and status appears */
DIV.mood > P:nth-child(1) > B, P:nth-child(2) > B{color:darkred; font-family:"ReginaScript-d9xAX";font-size:20px;}
.details{margin:auto;text-shadow:1px 1px 2px darkred;}

/* this is where your name appears */
h1{
 color: black;
 font-family: "GarineldoNo02";
 font-size:60px !important;
 font-weight: bold;
 text-shadow: 2px 2px 3px darkred;
 text-align:center;
}

/* this is the line that appears between links in the header and footer.
you can add an emoji or symbol instead of the default line it has */
nav{
 color:red;
 font-size:70%!important;
}

nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
 content: " ⊹";
 color: red;
}

/* this is the spacehey logo color.
you can change it at https://codepen.io/sosuke/pen/Pjoqqp */

nav img.logo{
 filter: brightness(0) saturate(100%) invert(11%) sepia(86%) saturate(3851%) hue-rotate(354deg) brightness(86%) contrast(115%); !important;
}

/* the search wrapper and button */

.search-wrapper input[type=text] {
 background-color: transparent !important;
 border: 2px solid var(--links) !important;
 color:var(--links) !important;
 border-radius: var(--curve) !important;
}

button{
 border-radius: var(--curve) !important;
 border: 0px solid var(--links) !important;
 font-family: var(--font-family) !important;
 background-color: transparent !important;
 color:var(--links) !important;
}

/* the online symbol and text */

.online{
 margin:auto;
 color: var(--text) !important;
}
.online img{
 filter: brightness(0) saturate(100%) invert(11%) sepia(86%) saturate(3851%) hue-rotate(354deg) brightness(86%) contrast(115%); !important;
}

/* font family for the headers, navigtion links, links, body text */

a, p, nav label, .section{
 font-family: var(--font-family) !important;	
 font-size: 16px;
 font-weight: 1;
}
h2, h3, h4, h5{
 font-family: "ReginaScript-d9xAX"!important;	
 font-size: 30px;
 font-weight:1;
 text-shadow:1px 1px 2px darkred;
}

/* the hr code.
the hr is the horizontal line when you want to
separate important info or add a break in your paragraphs*/

hr{
 height:1px;
 background-color: var(--headers);
 border: none;
}

/* this is where you adjust the borders and background */
.mood{
 background-color:rgba(0,0,0,0.7);
}
.blurbs, .friends, .contact, .profile .table, .blog-preview, .profile .table-section{
 border-radius: var(--curve) !important;
 border: var(--borders) !important;
 background-color:rgba(0,0,0,0.7) !important;
}
.contact{
 padding:5px;
}
/* custom contact */

.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://media.giphy.com/media/s5p40DEAXxb89lYtxQ/giphy.gif);
	
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* add to favorites */
	content: url('https://media.giphy.com/media/nHyZigjdO4hEodq9fv/giphy.gif');
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: url('https://media.giphy.com/media/o9c3QvHJXjiI74BTmc/giphy.gif');
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* forward to friend */
	content: url('https://media.giphy.com/media/h7pbN75uL0Sg7n19LE/giphy.gif');
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* instant message */
	content: url('https://media.giphy.com/media/W5K55kVIHsdtSqZLRQ/giphy.gif');
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* block user */
	content: url('https://media.giphy.com/media/W5K55kVIHsdtSqZLRQ/giphy.gif');
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* add to group */
	content: url('https://media.giphy.com/media/hq64aPc8ExJpiXgRtR/giphy.gif');
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* report user */
	content: url('https://media.giphy.com/media/OjqZEjh8vUq1VKbgdy/giphy.gif');
}
.icon{border:none !important;}
.comment-replies{border:3px solid var(--text);} /* this is the border around the replies */
.comment-reply:not(:first-child){border-top: 2px solid var(--links);} /* line in bewtween comment replies*/

/* your interest and comments table row background color */
td{
 background-color: transparent!important;
}

/* the interest table */
.table-section{
 border:none !important;
 background-color:var(--box_color_and_seethru)!important;
 border-radius: var(--curve) !important;
}

/* the header section of the boxes */
.heading{
 background: none !important;
}

/* this is the box that says "Edit Info" when you're logged in,
and to your friends it says "Profile Name is your friend". */

.profile-info {
 background-image: url('https://media.giphy.com/media/jpYCsumYRxY3Lw7l9Q/giphy.gif');
 background-size: cover;
 border: var(--borders) !important;
 border-radius: var(--curve) !important;
}

/* adjusting images borders and adding styling if you want to */
.profile-pic img{
 outline:none !important;
 border-radius: var(--curve) !important;
 padding:5px;
}
.profile-pic{
 padding-left: 0px;
}

.friends-grid img{
 border-radius: var(--curve) !important;
 filter: brightness(60%);
}

/* margin and padding */

h2, h3, h4, h5, p{padding-left:5px !important;} /* this is important when you have rounded corners */
.contact .heading, .profile .table-section .heading, .blog-preview .heading, .profile .friends .heading{padding: 5px!important;}
.mood, .friends{margin-bottom: 10px;}


/* for this box, you can add an image of your choice. it's right under the contact box. */
.url-info{
 background: url('https://media.giphy.com/media/KCSJ0Nm8bc5owOdngX/giphy.gif');
 background-position: center;
 background-size: 80%;
 border: none!important;
 border-radius: var(--curve);
 height: 200px;
 clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
}
.url-info p{
 opacity: 0.0;
}

/* this is the comments table scroll code.
you can delete this if you don't want a scroll box */

.comments-table {
 height: 200px!important;
 overflow-y: scroll;
 border:transparent;
 outline: none !important;
 border-radius: 3px;
}

/* this styles the first column */
.comments-table td:first-child{

 background-image: url('');
 background-size: cover;
 background-position: center;
}

.comments-table td{
 background-image: url('https://media.giphy.com/media/L13ZCph5zFLZOoMx1h/giphy.gif');
 background-size: cover;
 background-position: center;
 border-bottom:2px solid darkred;
}
</style>

<style>
/* Force scrollbars onto browser windows.
Doesn't work in Firefox */
body {
 margin-bottom: fixed;
}

/* Box styles */
.myBox {
 width: 200px;
 height: 200px;
 overflow: scroll;
}
/* Scrollbar styles */
::-webkit-scrollbar {
 width: 5px;
 height: 12px;
}
::-webkit-scrollbar-track {
 border-radius: var(--curve);
 border: 2px solid #1A0001;
}
::-webkit-scrollbar-thumb {
 background: #1A0001;
 border-radius: var(--curve);
}
::-webkit-scrollbar-thumb:hover {
 background: gray;
}
</style>
<style>
 @media(max-width: 30em){ /* MOBILE */
body{
 background-color: black;
 max-width: 30em;
}
.profile{
 display:block;
 flex-direction: column;
}
.profile{
 overflow-y: scroll;
 width:350px;
 height:500px;
 margin:auto;
 text-align: center;
 position: relative;
 top: 0px; left: 0px;
 border-radius: 50px;
}
nav, footer{
 margin: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 1 of 1 comments ( View all | Add Comment )
Nin_	1705283965 Using, modified. Report Comment