my current layout

Tags: traumacore, weirdcore, scary
Description:

used ⋉sock⋊ ⋈thot#420⋈ layout as template and changed some things
Code:

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

<style>

html:before {
  animation: grain 8s steps(10) infinite;
  background-image: url(https://i.pinimg.com/originals/07/0f/b6/070fb6ed41ec51ff1e96a9d3941cb748.gif);
  content: "";
  height: 300%;
  left: -50%;
  opacity:.1;
  position: fixed;
  top: -110%;
  width: 300%;
  pointer-events:none;
}
@keyframes grain {
  0%, 100% { transform:translate(0, 0) }
  10% { transform:translate(-5%, -10%) }
  20% { transform:translate(-15%, 5%) }
  30% { transform:translate(7%, -25%) }
  40% { transform:translate(-5%, 25%) }
  50% { transform:translate(-15%, 10%) }
  60% { transform:translate(15%, 0%) }
  70% { transform:translate(0%, 15%) }
  80% { transform:translate(3%, 35%) }
  90% { transform:translate(-10%, 10%) }
} </style>


<style>




/*whole body changes*/ 
  body {    
    background-image: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/i/0b50ad51-b688-4baa-8eb0-528158c9bbf9/dopyod-38882861-e098-4ce4-8a99-48bb4cf78690.jpg);/*background for whole page*/
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: 'Courier New', monospace;
    height: 100%;
    color: #ffffff;
    h1: #ffffff;
    h2: #ffffff;
    h3: #ffffff;
    h4: #ffffff;
    li: #ffffff;
  }

/*top search bar customisation*/
  .search-wrapper input[type=text] {
    background-color: rgba(21, 23, 26, 0.50) !important;
    border: 1px dotted var(--headers) !important;
    color:var(--names) !important;
    border-radius: 10px !important;
  }
  button{
    border-radius: 10px !important;
    border: 1px dotted var(--headers) !important;
    font-family: var(--font-family) !important;
    background-color:rgba(21, 23, 26, 0.65) !important;
    color:var(--headers) !important;
  }

/*top header customisation*/
  nav{
    background-color:var(--box_color_and_seethru); !important;
    border-radius: 0px 0px var(--curve) var(--curve); !important;
  }
  nav ul{
    background:none !important;
    font-size: 13px;
  }
  nav ul a img, .mood a img{
    display:none !important;
  }
  .top{
    background-image:url("https://media0.giphy.com/media/xT9IgBthpxsHpK9RF6/giphy-downsized-large.gif") !important;
    background-position:center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color:rgba(21, 23, 26, 0.65); !important;
  }

/*gets rid of URL info box*/
  .url-info{
    display:none !important;
  }

/*changing color of links in mood box*/
  .mood a{
    color:#f9471a;
  }

/*gets rid of white background behind center of page*/
  main{
    background: rgba(0, 0, 0, 0) !important;
  }

/*changing background of profile & changing general text to white*/
  .profile {
    background:rgba(21, 23, 26, 0.95);
    color: #ffffff;
  }

/*customising contact box*/
  .profile .contact .heading{
    background:#f9471a;
    text-align: center;
  }
  .profile .contact {
    border-radius: 15px;
    border:2px solid rgba(0, 0, 0, 0);
    background-image: url(https://64.media.tumblr.com/0a96f67743148b99e0d2127c83c3b3d3/b6358bde281e58d2-a7/s500x750/1fec3d376d67095e5880226a42eb6f08ac0689e2.gifv);
    background-position: right top;
    background-repeat: repeat;
    background-attachment: scroll;
    Height:180px;
    color: white;    text-shadow: 1px 1px 2px black, 0 0 25px Blue, 0 0 3px Red;
  }
  .contact a{
    color: #ffffff;
  }
  .contact a:hover{
    color: #b5b5b5;
  }

/*customising interests box*/
  .profile .table-section{
    border:1px solid #f9471a;
    border-radius: 15px;
  }
  .profile .table-section .heading{
    background:#f9471a;
    border: 1px solid #f9471a;
    border-radius: 15px 15px 0px 0px;
    text-align: center;
  }
  .profile .table-section .heading h4{
    color: #ffffff;
    text-shadow: 1px 1px 2px black;
  }
  .profile .table-section .details-table td{
    background: rgba(0, 0, 0, 0);
    padding-right: 10%;
  }
  .profile .table-section .details-table td:first-child{
    background: rgba(0, 0, 0, 0);
    width: 10%; /*gets rid of interest category column*/
  }
  .profile .table-section .details-table td:first-child p{
    color: rgba(0, 0, 0, 0);
    font-size: 1px; /*gets rid of interest category text*/
  }

/*customising header text for interest titles*/
  .list-heading{
    color:#f9471a;
    font-family: 'Courier New', monospace;
    font-size: 15px;
    text-decoration: underline;
    font-weight: bold;
    text-align:center;
  }

/*getting rid of the blurbs headings cause I dont like them*/
  .profile .blurbs .heading{
    background: rgba(0, 0, 0, 0);
    color: rgba(0, 0, 0, 0);
    text-size: 1px;
    height: 2px;
  }
  .col.right .heading h4{
    color:  rgba(0, 0, 0, 0);
    text-size: 1px;
  }
  .profile .blurbs .section h4 {
    display: none;
  }

/*changing font size and centering it for stuff on right side of page*/
  .profile .blurbs .section p {
    font-size: 15px;
    text-align: center;
  }

/*changing color of links on the right side of the page*/
  .col.right a{
    color: #f9471a;
  }    

/*customising friend space heading*/
  .profile .friends .heading{
    background: #f9471a;
    color: #fff;
    text-shadow: 1px 1px 2px black;
    text-align: center;
  }
  .profile .friends .heading h4{
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 2px black
  }

/*making the comments section have a scroller*/
  .comments-table{
    display: block;
    height: 380px;
    overflow-y: scroll;
    Border-radius: 15px;
    background-color: rgba(21, 23, 26, 1);
  }

/*customising comments section*/
  .comments-table td:first-child{
    background-color: rgba(21, 23, 26, 1);
  }
  .comments-table td:first-child a{
    color: #f9471a;
  }
  .comments-table td:first-child a:hover{
    color: #ffffff;
  }
  .comments-table td{
    background-color: rgba(21, 23, 26, 1);
  }
  .comments-table td a{
    color: #f9471a;
  }
  .comments-table td a:hover{
    color: #ffffff;
  }
  
/*creating 'top 8' section*/
 .top-eight {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(4, [col] auto ) ;
  grid-template-rows: repeat(2, [row] auto  );
  background-color: transparent;
  color: #444;
  margin: 0px;
  width: 100%;
  }
  .top-row{
    grid-column: col 1 / span 4;
    grid-row: row 2;
  }
  .bot-row{
    grid-column: col / span 4;
    grid-row: row 3;
  }

/*customising header for top 8*/
  .top-eight-header {
    grid-column: col 1 / span 4;
    grid-row: row 1;
    background-image: url(https://64.media.tumblr.com/4b6e1a2c4d41a369a02bf475ee4ebf03/4de4240a3de9434c-62/s540x810/c38b9b8bf6b0647ae74269acaf987ba27dc0a002.gif);
    height:100%;
    background-color: rgb(249, 197, 108);
    color: rgb(240, 84, 73);
    font-weight: bold;
    padding: 4px !important;
  }
  .top-eight-header h2 {
    padding-bottom: 0px !important;
    margin-botton: 0px;
    font-family: 'Courier New', monospace;
    color: #d6d6d6;
    text-align: center;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  }

/*customising peoples images for top 8*/
  .profile .top-eight .person img {
    border-radius: 50%;
    width: 100px;
    height: 100px;
  }

/*creating a better layout for social links*/
  .social-logos{
    display: grid;
    grid-gap: 15px;
    grid-template-columns: repeat(4, [col] auto ) ;
    grid-template-rows: repeat(1, [row] auto  );
    background-color: transparent;
    color: #444;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    align-items: center;
    width: 100%;
    grid-column: col 1 / span 4
    grid-row: row 1;
    position: relative;
  }

/*customising images for social links*/
  .social-logos img{
    border-radius: 50%;
    width: 50px;
    height: 50px;
  }

/*making social images get slightly bigger when you hover over them*/
  img.logohover:hover,
  img.logohover:focus{
    width: 53px;
    height: 53px;
    position: abolute;
  }

/*customising the footer of the page*/
  footer{
    background:rgba(21, 23, 26, 0.6);
    a: #ffffff;
    color: #ffffff;
  }
    .online {
        content: url("https://cur.glitter-graphics.net/pub/2880/2880088iu73li7kgw.png");}

/*above is your online icon*/ 

<!--beginning of content for right hand side-->



<p><p> <--main about me text-->
<br/> <!--line break for space-->


</style>


<style>
    #music {
        position: fixed;
        bottom: 10px;
        left: 10px;
        width: 80px;
        transition: 0.5s width;
    }

    #music:hover {
        width: 360px;
    }
</style>

<!-- Replace these two URLs with .ogg and .mp3 versions of the song/radio station you want to play. If you don't have one or the other, you can just remove it. -->

<style>* {cursor: url(https://cur.cursors-4u.net/games/gam-13/gam1256.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2011/03/13/ghost-trio-gastly.html" target="_blank" title="Ghost Trio - Gastly"><img src="https://cur.cursors-4u.net/cursor.png" alt="Ghost Trio - Gastly" style="position:absolute; top: 0px; right: 0px;"/></a>
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 )