Black and yellow

Tags: dark, hufflepuff, black and yellow

Description:

Black and yellow with a touch of gray. Note that I simplified the screenshot to remove my personalized content, such my name, picture, About me information, etc.

Paste this code into your 'Who I'd like to meet' section.

Preview:

click on the image for a larger preview

Code:

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

<style>
:root{
  /*background color*/
  --site-bg: #000000;
  --header-bg: #60605c;
  --navbar-bg: #60605c;
  --content-bg: #000000;
  --footer-bg: #000000;
  --left-heading-bg:#ecb939;
  --right-heading-bg:#ecb939;
  --left-table-first-column-bg:#000000;
  --left-table-column-bg:#000000;
  --right-table-first-column-bg:#60605c;
  --right-table-column-bg:#ecb939;
  --input-bg:#000000;

  /*border color*/
  --input-bd:#60605c;
  --left-table-bd:#60605c;
  --right-table-bd:#ecb939;

  /* text color */
  --base-text:#f0c75e;
  --link-text:#fff4b1;
  --input-text:#fff3c4;
  --left-heading-text:#60605c;
  --left-table-first-column-text:#fff4b1;
  --right-heading-text:#60605c;
  --blurbs-heading-text:#fff4b1;

  /* font */
  --base-font:inherit; /* 'Courier New', monospace */
  --base-font-size:inherit; /* 15px */  
  --profile-name-size:3rem;

  /* text content */
  --profile-name-text:"your name";
}
html{overflow-x:hidden;}
body{background:var(--site-bg) !important;color:var(--base-text);}
.container{font-family:var(--base-font);font-size:var(--base-font-size);}
a{color:var(--link-text) !important;}
nav .top{background:var(--header-bg) !important;}
nav .links{background:var(--navbar-bg) !important;}
input,button{border-color:var(--input-bd);color:var(--input-text);background-color:var(--input-bg);}
main{background:var(--content-bg) !important;color:var(--base-text);}
.profile h1{position:relative;font-size:var(--profile-name-size)}.profile h1:after{content:var(--profile-name-text);position:absolute;top:0;left:.5rem;color:#fff;background-color:#0c1016;overflow:hidden;text-shadow:-.5rem 0 #ff6e48;clip:rect(0,90rem,0,0);animation:noise 3s infinite linear alternate-reverse}.profile h1:before{content:var(--profile-name-text);position:absolute;top:0;left:-1rem;color:#fff;background-color:#0c1016;overflow:hidden;text-shadow:.3rem 0 #ff6e48;clip:rect(0,90rem,0,0);animation:noise 2s infinite linear alternate-reverse}@-webkit-keyframes noise{0%{clip:rect(11rem,99.99rem,5rem,0)}4%{clip:rect(7rem,99.99rem,5rem,0)}8%{clip:rect(6rem,99.99rem,8rem,0)}12%{clip:rect(6rem,99.99rem,1rem,0)}16%{clip:rect(8rem,99.99rem,1rem,0)}20%{clip:rect(10rem,99.99rem,5rem,0)}24%{clip:rect(1rem,99.99rem,3rem,0)}28%{clip:rect(1rem,99.99rem,1rem,0)}32%{clip:rect(6rem,99.99rem,6rem,0)}36%{clip:rect(6rem,99.99rem,11rem,0)}40%{clip:rect(3rem,99.99rem,6rem,0)}44%{clip:rect(7rem,99.99rem,3rem,0)}48%{clip:rect(2rem,99.99rem,1rem,0)}52%{clip:rect(11rem,99.99rem,11rem,0)}56%{clip:rect(9rem,99.99rem,8rem,0)}60%{clip:rect(6rem,99.99rem,8rem,0)}64%{clip:rect(4rem,99.99rem,4rem,0)}68%{clip:rect(7rem,99.99rem,2rem,0)}72%{clip:rect(11rem,99.99rem,7rem,0)}76%{clip:rect(12rem,99.99rem,1rem,0)}80%{clip:rect(4rem,99.99rem,4rem,0)}84%{clip:rect(8rem,99.99rem,8rem,0)}88%{clip:rect(2rem,99.99rem,3rem,0)}92%{clip:rect(3rem,99.99rem,5rem,0)}96%{clip:rect(11rem,99.99rem,11rem,0)}100%{clip:rect(2rem,99.99rem,10rem,0)}}@keyframes noise{0%{clip:rect(11rem,99.99rem,5rem,0)}4%{clip:rect(7rem,99.99rem,5rem,0)}8%{clip:rect(6rem,99.99rem,8rem,0)}12%{clip:rect(6rem,99.99rem,1rem,0)}16%{clip:rect(8rem,99.99rem,1rem,0)}20%{clip:rect(10rem,99.99rem,5rem,0)}24%{clip:rect(1rem,99.99rem,3rem,0)}28%{clip:rect(1rem,99.99rem,1rem,0)}32%{clip:rect(6rem,99.99rem,6rem,0)}36%{clip:rect(6rem,99.99rem,11rem,0)}40%{clip:rect(3rem,99.99rem,6rem,0)}44%{clip:rect(7rem,99.99rem,3rem,0)}48%{clip:rect(2rem,99.99rem,1rem,0)}52%{clip:rect(11rem,99.99rem,11rem,0)}56%{clip:rect(9rem,99.99rem,8rem,0)}60%{clip:rect(6rem,99.99rem,8rem,0)}64%{clip:rect(4rem,99.99rem,4rem,0)}68%{clip:rect(7rem,99.99rem,2rem,0)}72%{clip:rect(11rem,99.99rem,7rem,0)}76%{clip:rect(12rem,99.99rem,1rem,0)}80%{clip:rect(4rem,99.99rem,4rem,0)}84%{clip:rect(8rem,99.99rem,8rem,0)}88%{clip:rect(2rem,99.99rem,3rem,0)}92%{clip:rect(3rem,99.99rem,5rem,0)}96%{clip:rect(11rem,99.99rem,11rem,0)}100%{clip:rect(2rem,99.99rem,10rem,0)}}
.left .heading{background:var(--left-heading-bg) !important;color:var(--left-heading-text) !important;}
.right .heading{background:var(--right-heading-bg) !important;color:var(--right-heading-text) !important;}
.blurbs .section h4{color:var(--blurbs-heading-text) !important;}
.contact, .url-info, .table-section{border-color:var(--left-table-bd) !important;}
.right table{border-color:var(--right-table-bd) !important;}
.left table td{background:var(--left-table-column-bg) !important;}
.left table td:first-child{background:var(--left-table-first-column-bg) !important;color:var(--left-table-first-column-text) !important;}
.right table td{background:var(--right-table-column-bg) !important;}
.right table td:first-child{background:var(--right-table-first-column-bg) !important;}
img[alt^="profile"]{filter: contrast(180%);}
img[alt^="profile"]:hover {transform: scaleX(-1);}
.profile-pic img{border-radius:50%}
nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after{color:var(--link-text)}
footer{background:var(--footer-bg) !important;}
</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 5 of 5 comments ( View all | Add Comment )

judo	1695293775 using tysm <3 Report Comment
Kagamine Len	1690094231 using! Report Comment
❝ ⌦⭒evan⭒⌫ ❞	1675380389 super cool :0 gonna use it !!1 Report Comment
Aaden!	1673307639 Might use ! Report Comment
Werx(716)	1613600258 I like this. I'll give it a try. Thanks! Report Comment Love it, except the font yellow and the yellow in the comment box are almost exact. I can't read the text. Other than that, sweet! by Werx(716); 1613600505; Report Thanks for the feedback! You're right that there isn't a lot of contrast there. I might try gray text to see how that looks. by Amy; 1613956787; Report Look forward to it. It's a tight layout. :) by Werx(716); 1613957847; Report Check out the update! I adjusted the text color in the header bars to gray, based on your feedback. I hope you like it, I definitely think it looks better with the contrast! by Amy; 1614019610; Report Yellow comments change please by TopStaffing; 1637708249; Report