most random theme ever layout

Tags: messy, layout, black, stars, blue

Description:

I'm running out of ideas. Live preview here

Comment when using, credit when using as base AND don't republish an edited version of this

Preview:

click on the image for a larger preview

Code:

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

<style>


    body{
        background-image: url('https://cdn.discordapp.com/attachments/1064462871947378729/1085806443225174016/Untitled45_20230316140638.png');
        background-size: 900px;
    }
    
    nav .top{
        background-image: linear-gradient(to top, black -60%, transparent),url('https://i.pinimg.com/564x/74/a1/b9/74a1b95be2bc6ade00cd40e8621835a4.jpg');
        border: outset #5e5e5e 5px;
        background-size: 200px;
height: 55px;
    }
    nav .links{
        background:linear-gradient(to bottom, #5e5e5e, black);
        text-align: center;
        border: ridge 5px #242424;
    }
    nav .logo{
        display: none;
    }
    LABEL{
        display: none;
    }
    FORM{
margin-bottom: -40px;
    }
    main{
        background-color: black;
        border: double white;
        box-shadow: 0px 0px 15px 10px black;
    }
    main .right{
        background-image: url('https://cdn.discordapp.com/attachments/1064462871947378729/1085830476826161162/Untitled48_20230316154209.png');
        background-size: 550px;
        border: solid 5px;
        background-attachment: fixed;
    } 
    .profile h1{
        font-size: 30px;
        color: white;
    }
    .profile .blurbs .heading{
        background:linear-gradient(to bottom, #5e5e5e, black);
        color: black;
        text-shadow: 0px 0px 5px white;
        border: solid black;
        box-shadow: 0px 0px 5px white;
        text-align: center;
    }
    .profile .blurbs .inner{
        background:linear-gradient(black, transparent);
        border-bottom: solid black 5px;
        border-left: solid black;
        border-right: solid black;
        height:130px;
    }
    
.container{
    width: 950px;
}

.general-about{
    background-image: url('https://bgfons.com/d/sky_texture1984.jpg');
    height: 180px;
    border: double white 5px;
}

.general-about .profile-pic {
    height: 50%;
    width: 70%;
  }

.general-about .profile-pic img {
    max-width: 150%;
    max-height: 150%;
    display: block;
    box-shadow: 5px 10px 10px black;
    margin-top: 15px;
    margin-left: 15px;
    border: double black 3px;
  }
  
  
</style>

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

.profile h1{
    font-family: 'UnifrakturMaguntia', cursive;
    font-size: 50px;
    text-align: center;
    color:black ;
    -webkit-text-stroke-width: .1px;
    -webkit-text-stroke-color: white;
    transform: rotate(-2deg);
}

p{
  font-family: 'Rajdhani', sans-serif;
}
h1,h2,h3,h4,h5{
  font-family: 'Pirata One', cursive;
  font-size: 15px;  }
  
  a{
      font-family: 'Pirata One', cursive;
  }
  
  nav .links{
      font-family: 'Pirata One', cursive;
      letter-spacing: 0.2em;
  }
  
.profile .blurbs .section h4{
      color: white;
      text-align: center;
}
      
   .profile .contact{
       background-image: linear-gradient(black, transparent),url('https://cdn.discordapp.com/attachments/1064462871947378729/1085852210262450216/Untitled47_20230316170843.png');
       background-size: 500px;
       background-position: center;
       border: double white;
       text-align: center;
   }
   .profile .contact .heading{
       background:linear-gradient(to bottom, #5e5e5e, black);
       border: double black 2px;
   }
   
   .profile .friends .heading{
       background-color: black;
       border: double gray 3px;
       text-align: center;
       color: white;
   }
   
   .profile .friends .inner{
       background-image: url('https://cdn.discordapp.com/attachments/1064462871947378729/1085852210262450216/Untitled47_20230316170843.png');
       background-size: 300px;
       border: outset gray 5px;
       margin-bottom: 10px;
       background-blend-mode: overlay;
       background-color: #2f2f2f;
       text-align: center;
       color: white;
   }
   .count{
       color: white;
   }
  </style>
  
  <style>
      .profile .url-info{
      background-image: url('');
      color: white;
      border: none;
      text-align: center;
  }
  
  .profile .table-section{
      background-image: url('https://i.pinimg.com/564x/e4/03/9a/e4039a8081a9c371b51fa9f487211ef8.jpg');
      border: ridge #454545 5px;
      background-blend-mode: overlay;
    background-color: #2f2f2f;
  }
  .profile .mood{
      color: white;
      margin-top: 7px;
      text-align: center;
  }
  
  .profile .table-section .heading{
      background:linear-gradient(to bottom, #5e5e5e, black 50%);
  }
  .table-section .inner .details-table tbody tr td {
      background-color: transparent;
      color: white;}
      
      DIV.blog-preview{
          
          color: white;
          box-shadow: 0px 0px 10px black;
          text-align: center;
          border: solid white 1px;
          
      }
      .profile h1:after {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 20px;
  width: 360px;
  background-image: url(https://64.media.tumblr.com/8ed8ab5011ad68658a0964c1dfabf78a/330502209c107ea2-24/s640x960/9540865ba75a9ec43692eac00a025613d85083cd.gifv);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  transform: rotate(2deg);
  margin-bottom: -10px;
}

    .mood:after {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 20px;
  width: 360px;
  background-image: url(https://64.media.tumblr.com/8ed8ab5011ad68658a0964c1dfabf78a/330502209c107ea2-24/s640x960/9540865ba75a9ec43692eac00a025613d85083cd.gifv);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.profile .url-info:after {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 20px;
  width: 350px;
  background-image: url(https://64.media.tumblr.com/8ed8ab5011ad68658a0964c1dfabf78a/330502209c107ea2-24/s640x960/9540865ba75a9ec43692eac00a025613d85083cd.gifv);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin-bottom: -12px;
}

.comments-table td{
    background-color: transparent;
    border: none;
}

table.comments-table{
    background-color: transparent;
    border: none;}
  
  :root {
    --light-orange: ;
       --even-lighter-blue: white;}
       
         a{
        
    color: white;
        
    }
    a:hover{
        
    color: black;}
    
    nav .links a{
        text-shadow: none;
    }
    nav .links a:hover{
        color: black;
    }
    
    .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://64.media.tumblr.com/e766542b34586c4cfae4e5d4538fb903/0cb1053f7d3f6121-04/s75x75_c1/e50c9e3c2c5fa82c25f25c6c9ad73b4f678112ae.gifv)
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* Add to Favorites */
content: url(https://64.media.tumblr.com/e766542b34586c4cfae4e5d4538fb903/0cb1053f7d3f6121-04/s75x75_c1/e50c9e3c2c5fa82c25f25c6c9ad73b4f678112ae.gifv)
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* Send Message */
content: url(https://64.media.tumblr.com/da08077939a1d3b803d2d44b93e0ac63/7dd83616bdf9bbf5-37/s75x75_c1/139bc4d6af4aebc7a93777eaff9c62c522e9fab2.gifv)
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* Forward to Friend */
content: url(https://64.media.tumblr.com/da08077939a1d3b803d2d44b93e0ac63/7dd83616bdf9bbf5-37/s75x75_c1/139bc4d6af4aebc7a93777eaff9c62c522e9fab2.gifv)
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* Instant Message */
content: url(https://64.media.tumblr.com/4d2228396090fc0e1074d317cc5a9bd4/405abef7f6d766bf-33/s75x75_c1/8593f65408a03fd29972b0f6f631d64ae9e77848.gifv)
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* Block User */
content: url(https://64.media.tumblr.com/4d2228396090fc0e1074d317cc5a9bd4/405abef7f6d766bf-33/s75x75_c1/8593f65408a03fd29972b0f6f631d64ae9e77848.gifv)
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* Add to Group */
content: url(https://64.media.tumblr.com/a9c80c332ebbba56f1fbae4412e0f201/56b41404f2cdfbd4-31/s75x75_c1/7586ff6e19a4ef05cb3d8de53b824ca8bd214b74.gifv)
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* Report Profile */
content: url(https://64.media.tumblr.com/a9c80c332ebbba56f1fbae4412e0f201/56b41404f2cdfbd4-31/s75x75_c1/7586ff6e19a4ef05cb3d8de53b824ca8bd214b74.gifv)
}

main:before {
width: 98%;
height: 120px;
display: block;
content: "";
background-image: url('https://cdn.discordapp.com/attachments/1064462871947378729/1085881060652490792/Untitled49_20230316190318.png');
background-position: center;
margin-top: 5px;
margin-left: 9px;
margin-bottom: 10px;
background-size: 700px;
}
@media only screen and (max-width: 600px) {
main:before{
height: 200px;
}
  </style>
  
<style>
    .container{ 
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
 
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 10px); }
    100%   { transform: translate(0, -0px); }   
}
    
    footer{
        background-color: transparent;
    }
</style>

<style>
    .profile h1{
  animation: shake 0.4s;
  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); }
}
    
</style>
  
<div class="mug"></div>
<div class="mug2"></div>
<div class="mug3"></div>
<div class="mug4"></div>
<div class="mug5"></div>


<style>
div.mug {
    background: url(https://i.pinimg.com/564x/a1/ce/92/a1ce925be3a03351d3e7669616ef01c9.jpg);
       background-size: 100%!important;
       position: fixed;
    left: 930px;
    bottom: 600px;
    height: 350px;
    width: 210px;
    z-index: 100;
    opacity: 100%;
    background-repeat: no-repeat;
    }
    
    div.mug2 {
    background: url(https://i.pinimg.com/736x/58/d7/ba/58d7bacaae0f37cfaf19de0c3775c4d5.jpg);
       background-size: 90%!important;
       position: fixed;
    right: 960px;
    bottom: 850px;
    height: 220px;
    width: 210px;
    z-index: 100;
    opacity: 100%;
    background-repeat: no-repeat;
    }
    
    div.mug3 {
    background: url(https://i.pinimg.com/originals/2d/25/be/2d25be08cc62ef0a82c25ef2bda3709d.gif);
       background-size: 100%!important;
       position: fixed;
    right: 960px;
    bottom: 450px;
    height: 220px;
    width: 180px;
    z-index: 100;
    opacity: 100%;
    background-repeat: no-repeat;
    }
    
    div.mug4 {
    background: url(https://i.pinimg.com/originals/b4/40/6b/b4406be561339bdd7d28efb946af9ee0.gif);
       background-size: 140%!important;
       position: fixed;
    left: 960px;
    bottom: 250px;
    height: 220px;
    width: 189px;
    z-index: 100;
    opacity: 100%;
    background-repeat: no-repeat;
    }
    
    div.mug5 {
    background: url(https://cdn.discordapp.com/attachments/1064462871947378729/1085885408908419072/image-removebg-preview.png);
       background-size: 170%!important;
       position: fixed;
    left: 220px;
    bottom: 530px;
    height: 720px;
    width: 189px;
    z-index: 100;
    opacity: 100%;
    background-repeat: no-repeat;
    }
    
</style>

<style>
    body::before {
content: " ";
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%);
z-index: 2;
background-size: 100% 2px, 3px 100%;
pointer-events: none;
}
html:after {
  background-image: url(http://i.imgur.com/rcaf5Tj.png);
  content: "";
  height: 300%;
  left: -50%;
  opacity:.5;
  position: fixed;
  top: -110%;
  width: 300%;
  pointer-events:none;
}

</style>


<style>* {cursor: url(https://cur.cursors-4u.net/others/oth-9/oth827.ani), url(https://cur.cursors-4u.net/others/oth-9/oth827.png), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2012/02/05/zombie-hand-working-in-background.html" target="_blank" title="Zombie Hand - Working In Background"><img src="https://cur.cursors-4u.net/cursor.png" alt="Zombie Hand - Working In Background" 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 20 of 59 comments ( View all | Add Comment )

Mesha	1715098132 using Report Comment
Milo	1711898936 using!! xoxo Report Comment
tilapia	1708944439 HHHHAAAAAAIIIIIII SO. This is currently broken, the background images won't work for now coz discord decided to fuck everybody who used it as an image hosting platform. I'll fix this soon !! Report Comment
br4in3at3r	1708536477 using Report Comment
samЯatafak	1706301877 using Report Comment
soullessam	1705817200 thanks, imma use it :) Report Comment
J3m0ss▄︻┻═┳一	1705495112 hey, theres smth wrong with this, its like the aboutme and the friendslist kinda like.. merge, could you fix it pls? (idk if its just me actually...) Report Comment it happened to me too! kinda annoying :/ by Skull; 1707129832; Report
fiaso	1705337955 using Report Comment
⛧dra𐕣⛧	1705022749 using Report Comment
Lily ୨୧	1704913599 haii whats the code for just the header image?? Report Comment main:before { width: 98%; height: 120px; display: block; content: ""; background-image: url('https://cdn.discordapp.com/attachments/1064462871947378729/1085881060652490792/Untitled49_20230316190318.png'); background-position: center; margin-top: 5px; margin-left: 9px; margin-bottom: 10px; background-size: 700px; } by tilapia; 1705029348; Report TYSM by Lily ୨୧; 1705087748; Report
⋆♱✮♱⋆	1704444347 USINGNGN Report Comment
Lens.Pretty.Odd	1703035022 using!! Report Comment
rüzgar	1702767880 USING. Report Comment
33	1701959448 thanks Report Comment
Simon. ♡	1701179177 using,,. Report Comment
✩ rajku !࿐	1700948560 using ! Report Comment
mae	1700858497 using ^_^ Report Comment
rajah ♫	1696299535 using !! i <3 it Report Comment
Bri<3	1695763157 using Report Comment