Qbes Company Default v1.1

Tags: monochromatic, dull, corporate, grey, animated, crt

Description:

Goes for a black-white monochromatic color scheme, with custom icons for the contact section, report icon, and cursor. Should work for blogs too, if you copy it in there too. -- Example of what the Qbes Company would use for it's spacehey's layout, this will get updated on rare occasions.

Preview:

click on the image for a larger preview

Code:

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

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

/* specifically for the html::before section, code borrowed from https://layouts.spacehey.com/layout?id=133 by Cory */
@media screen and (min-aspect-ratio: 1/1){
html::before{
  content: " ";
  position: fixed;
  width: 100%;
  height: 100%;
  background: linear-gradient( #00000000 0%, #ffffff20 95%, #00000000 100%) fixed;
  background-size: 100% 101%;
  animation: crt 5s linear infinite;
  box-shadow: 0 0 100px #000 inset;
  z-index: 1;
  pointer-events: none;
}

@keyframes crt{
  0% {background-position: 0% 0%}
  100% {background-position: 100% -10100%}
}

html::after{
  content: " ";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(#00000000, #00000070);
  z-index: -1;
}}
html{
  overscroll-behavior-y: none;
  scrollbar-width: none !important;
  cursor: url("https://64.media.tumblr.com/5eb946754a77f1a5026823c2c1e86cef/b93e2700cb71e695-5b/s75x75_c1/79f2e8d2f5fe5b6f63c957fd4a0933f3d5ce0b9f.pnj"), crosshair;
}

body {
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(#444, #ccc, #444) fixed;
  background-size: 100% .4%;
  animation: crtbg 5s linear infinite;
}

@keyframes crtbg{
  0% {background-position: 0% 0%}
  100% {background-position: 100% 20%}
}

h1, h2, h3, h4, h5, h6{
  font-family: 'Aldrich', sans-serif;
  font-weight: 400;
  margin: 0;
  color: #000 !important;
}

h1{
  font-size: 25px !important;
}

h4{
  font-size: 15px;
}

::selection{
  background: #ccc;
  color: black;
}

.online{
   color: white;
}

@keyframes flashing{
    0%{
       color: white;
       background: black}
    50%{
       color: black;
       background: grey;}
    100%{
       color: white;
       background: black;}
}

.online img{
   filter: saturate(0) brightness(100);
}

a, .friends-grid p{
  color: #fff !important;
}

a:hover, a:focus{
  color: #fff !important;
  cursor: url("https://64.media.tumblr.com/7e38d80682ecde536a224b62bd03bcc3/b93e2700cb71e695-f1/s75x75_c1/a4c94cf36ebc0d3184b17c3143b7154e61936da1.pnj"), auto;
}

.report{
  margin-top: 6px !important;
}

.report a{
  transition: margin-right 0.2s;
}
.report a:hover{
  margin-right: 3px;
}
.report img{
  content: url("https://64.media.tumblr.com/fc8345c05d1936114846722bb7abd083/b93e2700cb71e695-58/s75x75_c1/6812f8e44808413330dec24104babc01db8d8a20.pnj");
}

.top{
  background: #333 !important;
  border: solid 3px white;
  border-top: 0
}

nav .links{
  background: #555555 !important;
  border: solid 3px white;
  border-top: 0;
  border-radius: 0 0 20px 20px;
  padding: 10px 16px 7px !important;
  margin-bottom: 16px !important;
}

nav .links a{
  text-shadow: 0 0 5px #000000 !important;
}

main{
  background: #555555c0;
  border: solid 3px white;
  border-radius: 20px;
  padding-top: 10px;
  padding-bottom: 0;
}

main .right{
  padding-top: 0;
}

@media (min-width: 30em) {
  .profile .mood p{
    margin: 8px 0 0 0 !important;
  }

  .profile .mood{
    margin-bottom: 8px !important;
  }
}

.profile .mood{
  margin-bottom: -10px;
}

.profile .blurbs{
  margin: 0;
}

.pfp-fallback, .person a img{
  border: solid 2px white;
  border-radius: 4px;
  box-shadow: 0px 0px 5px white;
}
.person a p span img{
  border: none;
  box-shadow: none;
}

p{
  font-size: 13px;
}

footer{
  background: #333;
  border: solid 3px white;
  border-radius: 20px 20px 0 0;
  border-bottom: 0;
  margin: 16px 0 0 0;
  padding: 10px 0;
}

footer .links{
  border: none;
  border-radius: 0;
  padding: 8px;
}

footer p{
 color:white
}

.heading, .table-section{
  background: #888 !important;
  border: 0 !important;
  margin-bottom: 0 !important;
}

.contact, .url-info, .blurbs, .friends, .profile-info{
  border: solid 3px #888 !important;
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a img{
  content: url("https://64.media.tumblr.com/4cc5b41d7c0fb0be7cfe56b9af88dbb3/b93e2700cb71e695-e7/s75x75_c1/d59ad49dc625a0bd40481f8b31a81b749ccbf04c.pnj");
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a img{
  content: url("https://64.media.tumblr.com/c4dee50fd74f08cbc273a8ca6dddccc4/b93e2700cb71e695-7c/s75x75_c1/7ca5c70a6c338334bf1a2ad820d546e23e9ffc3d.pnj");
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a img{
  content: url("https://64.media.tumblr.com/f9b35b733f9cb99d413a9aceeba1ef91/b93e2700cb71e695-dc/s75x75_c1/3eca622d873c061ba7ea482ebc8b575c6eeeef83.pnj");
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a img{
  content: url("https://64.media.tumblr.com/73c1d4dd14c78a09a4833774a856175f/b93e2700cb71e695-e6/s75x75_c1/704c4ae0e6bf5522c62fcf892c19f24e5e6f510e.pnj");
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a img{
  content: url("https://64.media.tumblr.com/c348e305e297142845084839a3a10157/b93e2700cb71e695-36/s75x75_c1/f802fc54bbae028a6d8324503840c4cd73909008.pnj");
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a img{
  content: url("https://64.media.tumblr.com/7fd1a9887e0c7ec3ccd0d35829b76ea2/b93e2700cb71e695-25/s75x75_c1/fc9ff951205ec812c6c0c4a8ea18252146ff793f.pnj");
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a img{
  content: url("https://64.media.tumblr.com/cbee8e224eab28ec3a85252cab7c036a/b93e2700cb71e695-16/s75x75_c1/7c99a58dc72ea259ecb5cab113a32848aed4c255.pnj");
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a img{
  content: url("https://64.media.tumblr.com/fc8345c05d1936114846722bb7abd083/b93e2700cb71e695-58/s75x75_c1/6812f8e44808413330dec24104babc01db8d8a20.pnj");
}

td, td a, td a:hover{
  background: #aaa !important;
  color: black !important;
}

td:first-child p{
  font-size: 110% !important;
}

.count{
  color: #000;
  text-shadow: 0 0 5px #888;
}

button, #q{
  background: #222;
  color: white;
  border: solid #777 2px;
  font-family: 'Poppins', sans-serif;
  font-size: 1em;
  line-height: revert;
  box-shadow: 0 0 0 #fff;
  transition: all 200ms;
}
a button{
  background: #888;
  border: none;
}

button:hover, button:focus, button:focus-visible, #q:hover, #q:focus, #q:focus-visible{
  background: #aaaaaa50;
  box-shadow: 0 0 5px #fff;
  cursor: url("https://64.media.tumblr.com/7e38d80682ecde536a224b62bd03bcc3/b93e2700cb71e695-f1/s75x75_c1/a4c94cf36ebc0d3184b17c3143b7154e61936da1.pnj"), auto;
}
a button:hover, a button:focus, a button:focus-visible{
  background: #00000050;
  box-shadow: 0 0 5px #000;
}

button:active, #q:active{
  background: #222;
  box-shadow: 0 0 0;
}
a button:active{
  background: #888;
  box-shadow: 0 0 0;
}

.container{
  margin-bottom: 0;
}

.comments-table{
  border: solid 1.5px white;
}
.comments-table td{
  border: solid 1.5px white;
}

.comment-replies{
  margin: 3px 0 3px;
  border-width: 3px;
}

.friends{
   margin: 10px 0;
}

.edit-info {
  background: #00000000 !important;
  border: solid 3px white;
}

.author-details .publish-date{
  font-size: 100% !important;
}

.author-details br{
  display: block;
  margin: 5px 0;
}
</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 2 of 2 comments ( View all | Add Comment )

秋✩-! 𐙚

1710714907

using!!!

Report Comment

Beinbawry

1701273787

Using.

Report Comment