Mirror land

Tags: mirrored, emo, alternate, trippy, hard-to-read

Description:

Basically normal layout but mirrored with a cute font and generally alternate/goth/emo themed. Plus it has a neat comment scrolling function :)

Code:

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

<style>
/* imports */
@import url('https://fonts.googleapis.com/css2?family=Finger+Paint&family=Yomogi&display=swap');

body {
  background-image: url(https://external-media.spacehey.net/media/sc6Sy33eu9WeuESe23Cbpggcj0095y3ZoravDt25m4i0=/https://64.media.tumblr.com/b3d549724d9d6ae7441a0ab7959c0b2e/tumblr_oujsvmlzxa1wqu6yoo1_400.gifv);
  background-position: Center Center;
  background-attachment: fixed;
  border-width: 0px;
  border-style: Solid;
  backdrop-filter: blur(2px);
    animation-name: fadeIn;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    animation-duration: 1s;
    animation-fill-mode:forwards;
}
p{
font-family: "Yomogi", cursive;
  color: #00eeff;
}
main {
  /* This changes your profile background in order to have the video visable, change the 0.6 to any number between 0 and 1 to change the visibility */
  background-color: rgba(0, 0, 0, 0.6);
  border-color: rgb(255, 0, 255);
  border-radius: 2%;
  border-style: solid;
  color: #ffffff;
  backdrop-filter: blur(5px);
}
/*
Class overrides
*/
.general-about .profile-pic img {
  border-radius: 50%;
}
.profile .left .heading {
 border-radius: 4px 4px 0px 0px;
 background-color: rgb(255, 0, 255);
}
.profile .contact {
  background-image: url(https://media.giphy.com/media/Il9f7ZhytEiI0/giphy.gif);
  background-position: center;
  background-size: cover; 
}
.profile .left div {
    border-radius: 6.9px 6.9px 15px 15px;
    border-color: rgb(255, 0, 255);

}
.profile .table-section .details-table td{
  background-color: rgba(0,0,0,0.0)
}
.profile .profile-info{
  text-align: center;
  background-image: url("https://media.giphy.com/media/3ohs4CacylzFaHjMM8/giphy.gif");
  background-position: center;
  background-size: cover;
}

.profile .right .comments-table td {
    background-color: rgba(0,0,0,0.0);
}
#comments .comments-table{
      border-color: rgb(255, 0, 255);
}
#comments .inner{
font-family: "Yomogi", cursive;
  color: #00eeff;
      max-height: 450px;
   overflow-y:auto;
}
.profile .right .comments-table .comment-replies {
  border-color: rgb(255, 0, 255);
  max-height: 150px;
 overflow-y:auto;
}

.online{
color: white;
font-family: "Yomogi", cursive;
font-size: 30px;
text-shadow: 0px 0px 5px red;
animation-name: blink;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(1.0,0,0,1.0);
animation-duration: 2s;
display: none;
}
.profile .right .blurbs .heading{
   background-color: rgb(255, 0, 255);
}
  
.profile .right .friends .heading{
     background-color: rgb(255, 0, 255);
}



.row {
  display: flex;
  flex-flow:  row-reverse;
  width: 100%;
}
/* Reordering class overrides right(now left) side */

.right {
  display: flex;
  flex-flow: column !important;
}
#comments {
  order: 1;
}
.friends {
  order: 2;
}
.profile-info {
  order: 0;
}
.blog-preview {
  order: 3;
}
.blurbs{
  order: 1;
}
/* Reordering class overrides left(now right) side */
.left {
  display: flex;
  flex-flow: column !important;
  width: 90rem !important;
}
.general-about {
  display: flex;
  flex-flow: row-reverse !important;
  order: 0;
}
.contact {
  display: flex;
  flex-flow:column;
  order: 5;
}
.url-info {
  order: 6;
}

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