Potterhead Layout

Tags: harry potter, green, potterhead, black and green, bela

Description:

If you have any questions, please comment below or go to my blog here.

Image Credits —

⇘ Background: https://wallpapercave.com/wp/wp4765072.jpg

⇘ Online Code: https://dl.glitter-graphics.com/pub/469/469843cty49kr4dz.jpg

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Bela 🔊⬆ (https://layouts.spacehey.com/layout?id=199) -->

<style>
/* fonts */
@import url('https://fonts.googleapis.com/css2?family=Griffy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kalam&display=swap');

/* two cursors below:
the a:hover cursor appears when you hover over a link
the * cursor is the normal cursor */

a:hover{ cursor: url('https://img.icons8.com/dusk/30/000000/harry-potter.png'), auto;}
* { cursor: url('https://cur.cursors-4u.net/others/oth-3/oth247.cur'), auto;}
</style>

<style>
body {
  background-image: url('https://wallpapercave.com/wp/wp4765072.jpg');
  background-color: black;
  background-attachment: fixed;
  background-position: center;
  background-size: 100% 100%;
  margin-bottom: 50%;
}
a{
  color: seagreen!important;
  font-size: 12px!important;
  font-family: 'Griffy', cursive;
}
p, nav label, .count, .profile .friends .person p {
  font-family: 'Kalam', cursive;
  color: darkgreen;
  font-size: 12px!important;
}
h2, h3, h4, .blurbs h4 {
  color: #347153!important;
  font-family: 'Henny Penny', cursive;
  text-shadow: 1px 1px black !important;
  font-size: 14px!important;
  letter-spacing: 0.5px;
  font-size: 18px!important;
}
h1{
  color: #347153;
  font-family: 'Griffy', cursive;
  font-size: 30px!important;
}
footer{
  background-color: rgba(0, 0, 0, 0.8);
  margin:0px;
}
nav .top, nav .links {
  background-color: rgba(0, 0, 0, 0.8);
  text-align: center;
  color: green;
}
nav .links a {
  text-shadow: none;
}

/* this is the search bar and button */

[id='q'] {
  background-color: transparent;
  border: 1px solid #006400!important;
}
button {
  background-color: black;
  color: darkgreen;
  font-family: 'Kalam', cursive;
  font-size: 12px!important;
}

main {
  background-color: rgba(0, 0, 0, 0.9);
}
.online {
  content: url(https://dl.glitter-graphics.com/pub/469/469843cty49kr4dz.jpg);
}

/* go to https://codepen.io/sosuke/pen/Pjoqqp to edit from the invert(0%) to the contrast(105%). Where it says "Target color", put in the hex code of the color you want */

/* this is the spacehey logo */

nav img.logo {
  filter: brightness(0) saturate(100%) invert(22%) sepia(59%) saturate(376%) hue-rotate(98deg) brightness(93%) contrast(91%) !important;
}

.profile-pic img {
  border: 1px solid #006400!important;
  filter: drop-shadow(2px 2px 6px #224b37)!important;
}
.mood {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 1px solid #006400!important;
  padding: 10px;
  box-shadow: 2px 2px 6px #224b37;
}
.heading {
  background-color: transparent!important;
  text-align: center;
}
.contact {
  border: 1px solid #006400!important;
  padding: 10px;
  box-shadow: 2px 2px 6px #224b37;
}
.url-info {
  margin-top: 20px!important;
  margin-bottom: 20px!important;
  border: 1px solid #006400!important;
  padding: 10px;
  box-shadow: 2px 2px 6px #224b37;
}
.table-section {
  border: 1px solid #006400!important;
  box-shadow: 2px 2px 6px #224b37;
  margin-bottom: 20px!important;
}
.details-table {
  border-spacing: 5px;
}
.details-table td {
  background-color: transparent!important;
  border: 1px solid #006400;
}

/* profile-info is where the text "Name is your friend" appears. */

.profile-info {
  margin-bottom: 20px!important;
  border: 1px solid #006400!important;
  box-shadow: 2px 2px 6px #224b37;
}
.blog-preview h4 {
  margin-top: 0px;
  padding-left: 7px;
}
.blog-preview {
  margin-top: 20px!important;
  border: 1px solid #006400!important;
  box-shadow: 2px 2px 6px #224b37;
  padding: 10px;
}
.blurbs {
  margin-top: 20px!important;
  margin-bottom: 20px!important;
  border: 1px solid #006400!important;
  box-shadow: 2px 2px 6px #224b37;
  padding: 10px;
}
.friends:not(#comments) {
  margin-bottom: 20px!important;
  border: 1px solid #006400!important;
  box-shadow: 2px 2px 6px #224b37;
  text-align: center;
}
#comments {
  border: 1px solid #006400!important;
  box-shadow: 2px 2px 6px #224b37;
}
.comments-table {
  border: none;
  border-spacing: 5px;
}
.comments-table td {
  background-color: transparent!important;
  border: 3px solid rgba(0, 100, 0, 0.5)!important;
  text-align: center;
}

/* this is the line that appears in between comment replies */
.comment-reply:not(:first-child) {
  border-top: 1px dotted seagreen;
}

/* this is the border surrounding the comment replies */
.comment-replies {
  border: 1px solid darkgreen;
}

/* Scrollbar styles */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  border-radius: 10px;
  width: 2px;
  border: 1px dotted green;
}
::-webkit-scrollbar-thumb {
  background: #738965;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: darkgreen;
}
</style>


<iframe width="100%" height="300" src="https://www.youtube.com/embed/Htaj3o3JD8I//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy"></iframe>

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.