- (c) Layout created by CammysNotOkay (https://layouts.spacehey.com/layout?id=99) --> <style> /*Intro GIF Animation (fade out)*/ body:before { content: " "; height: 100vh; width: 100vw; display: block; position: fixed; top: 0; left: 0; z-index: 100; background-image: url('https://thumbs.gfycat.com/ClearcutInsistentCuckoo-size_restricted.gif'); /*gif link here*/ background-size: cover; background-repeat: no-repeat; animation: yourAnimation 4s ease 0s 1 normal forwards; pointer-events: none; } @keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } /*whole body changes*/ body { background-image: url(https://cutewallpaper.org/21/emo-aesthetic-wallpapers/Emo-Aesthetic-Computer-Wallpapers-on-WallpaperDog.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.65) !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: 10px; } nav ul a img, .mood a img{ display:none !important; } .top{ background-image:url("https://cdn.discordapp.com/attachments/753067128583618600/801960785927864360/ezgif.com-crop1.gif") !important; background-position:center; background-size: cover; background-repeat: no-repeat; background-color:rgba(0, 0, 0, 0.8); !important; } /*gets rid of URL info box*/ .url-info{ display:none !important; } /*changing color of links in mood box*/ .mood a{ color:#8d36ff; } /*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:#8d36ff; text-align: center; } .profile .contact { border-radius: 15px; border:2px solid rgba(0, 0, 0, 0); background-image: url(https://cdn.discordapp.com/attachments/753067128583618600/801271425494286356/unknown.png); 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 Darkblue; } .contact a{ color: #ffffff; } .contact a:hover{ color: #b5b5b5; } /*customising interests box*/ .profile .table-section{ border:2px solid #8d36ff; border-radius: 15px; } .profile .table-section .heading{ background:#8d36ff; border: 1px solid #8d36ff; 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:#8d36ff;; 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: #8d36ff; } /*customising friend space heading*/ .profile .friends .heading{ background: #8d36ff; 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: #8d36ff; } .comments-table td:first-child a:hover{ color: #ffffff; } .comments-table td{ background-color: rgba(21, 23, 26, 1); } .comments-table td a{ color: #8d36ff; } .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;

Tags:

Description:

- (c) Layout created by CammysNotOkay (https://layouts.spacehey.com/layout?id=99) -->

<style>

/*Intro GIF Animation (fade out)*/
  body:before {
    content: " ";
    height: 100vh;
    width: 100vw;
    display: block;
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: 100;
    background-image: url('https://thumbs.gfycat.com/ClearcutInsistentCuckoo-size_restricted.gif'); /*gif link here*/
    background-size: cover;
    background-repeat: no-repeat;
    animation: yourAnimation 4s ease 0s 1 normal forwards;
    pointer-events: none;
  }
  @keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }

/*whole body changes*/ 
  body {    
    background-image: url(https://cutewallpaper.org/21/emo-aesthetic-wallpapers/Emo-Aesthetic-Computer-Wallpapers-on-WallpaperDog.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.65) !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: 10px;
  }
  nav ul a img, .mood a img{
    display:none !important;
  }
  .top{
    background-image:url("https://cdn.discordapp.com/attachments/753067128583618600/801960785927864360/ezgif.com-crop1.gif") !important;
    background-position:center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color:rgba(0, 0, 0, 0.8); !important;
  }

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

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

/*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:#8d36ff;
    text-align: center;
  }
  .profile .contact {
    border-radius: 15px;
    border:2px solid rgba(0, 0, 0, 0);
    background-image: url(https://cdn.discordapp.com/attachments/753067128583618600/801271425494286356/unknown.png);
    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 Darkblue;
  }
  .contact a{
    color: #ffffff;
  }
  .contact a:hover{
    color: #b5b5b5;
  }

/*customising interests box*/
  .profile .table-section{
    border:2px solid #8d36ff;
    border-radius: 15px;
  }
  .profile .table-section .heading{
    background:#8d36ff;
    border: 1px solid #8d36ff;
    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:#8d36ff;;
    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: #8d36ff;
  }    

/*customising friend space heading*/
  .profile .friends .heading{
    background: #8d36ff;
    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: #8d36ff;
  }
  .comments-table td:first-child a:hover{
    color: #ffffff;
  }
  .comments-table td{
    background-color: rgba(21, 23, 26, 1);
  }
  .comments-table td a{
    color: #8d36ff;
  }
  .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;

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 )

rai_Blogz08

rai_Blogz08's profile picture

Full code for top 8?


Report Comment