Hobicore Layout (for his birthday)

Tags: bts, jhope, hobicore, bela

Description:

✧ feel free to change it up to your style.

✧ if you have any questions, comment below or in this blog post.

✧ copy and paste the code to your "about me" section.

✧ you can copy and paste the code here or here to preview it before you add it to your profile.

✧ I appreciate your comments ٩(๑❛ᴗ❛๑)۶

remember that it's against spacehey rules to hide the spacehey logo, search bar, or logout buttons in the navigation.

Preview:

click on the image for a larger preview

Code:

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

<style>
@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');
</style>
<style>
/* cursor */ 
  
* {cursor: url(https://cur.cursors-4u.net/games/gam-1/gam14.png), auto !important;}

nav .top {
  background: rgba(219, 218, 185, 0.4);
  border-radius: 15px;
}
nav .links {
  background: rgba(219, 218, 185, 0.4);
}
@keyframes rainbow-bg-anim {
  to {
  transform: translateX(-88em);
  }
}


:root{
  --headers: #FF4500;
  --text: #1E90FF;
  --names: #FFFF00;
  --links: #FF4500;
  --hover: #1E90FF;  
  --background_image: url('https://i.pinimg.com/originals/39/77/63/3977634c6d32fed3457db6ff23449668.png'), url("https://www.solidbackgrounds.com/images/1280x720/1280x720-light-yellow-solid-color-background.jpg");
  --font-family: 'Indie Flower', cursive;
  --curve: 15px;
  --simple_bg: #ffd2cb;
}

/* online icon*/

.online {content: url(https://dl.glitter-graphics.com/pub/1879/1879742wzl27dahb6.gif);}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */


  /* text colors */

h3, h4, h5, .url-info b{ color: var(--headers) !important;} /* headings*/
a{color: var(--links) !important;} /* color of links */
a:hover{color: var(--hover) !important;} /* color of links on hover */
p, h2{color: var(--text) !important;} /* color of text */
h1, .count, .friends a p{color: var(--names) !important;} /* color of names, and friends counter */
h1, .friends a:hover p{color: var(--hover) !important;} /* color of names on hover */
nav label{color: var(--headers) !important;} /* color of search */
.section h4{color: var(--names) !important;} /* aboutme & want2meet headings */
.section{color: var(--text) !important;} /* sometimes <p> is broken by embeds maybe. */

  /* font family */

h2, h3, h4, h5, a, p, nav label, .section{ 
 font-family: var(--font-family) !important;	
 text-shadow: 	0px 0px black !important;
 font-size: 14px;
}


  /* padding for round corners */

h1, h2, h3, h4, h5, p {padding-left:8px !important;}



  /* profile name */

h1{ 
padding-left: 20px !important;
padding-bottom: 10px !important;
padding-top:5px !important;
font-family: 'Montserrat', sans-serif;
 background: transparent !important;
  font-size:50px !important;
	letter-spacing:0.1em !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke-width: 3px !important;
  -webkit-text-stroke-color: black !important;
  text-shadow: 
						6px 6px MediumSlateBlue,
						10px 10px Gold !important;
}


hr {
    display:block;
    border:0px;
    height:1px;
    background-image:url('https://64.media.tumblr.com/297e0260a3073d352eee13cb328abef0/7fc09d410af4ad3a-17/s500x750/4a6ee1e5cb921f5239240918f56ceba341ed586d.gifv');
    border-radius: ;
}

  /* background image */

body {
background-image: var(--background_image) !important;
background-color:black !important;
background-attachment: fixed; !important;
background-position: center top;
background-repeat: repeat;
background-size: 40%, cover;
}   

nav img.logo{
    filter: brightness(0) saturate(100%) invert(39%) sepia(72%) saturate(4541%) hue-rotate(1deg) brightness(100%) contrast(111%) !important; 
    height:30px;
}


  /* boxes */

.heading, .url-info, .blurbs, .mood, .blog-preview, .friends, .contact, .table, .table-section, footer{
border-radius: var(--curve) !important;
padding: 2px !important;
border: var(--borders) !important;
}

.table-section{border:none !important;background-color:var(--box_color_and_seethru)!important;border-radius: var(--curve) !important;}
.heading{background: none !important;padding-bottom: 2px !important;}



  /* profile photo */

.profile-pic img{
outline:none !important;
border-radius: var(--curve) !important;
}


footer{
    background-color: rgba(219, 218, 185, 0.4);
}
  /* friends photos */

.profile .friends .person img
{
    transform: skew(0deg, 0deg);
}

.friends-grid img{
outline:none !important;filter: opacity(90%) !important;
border-radius: var(--curve) !important;
filter:hue-rotate(var(--hue)) !important;

}



  /* comment photos */

.inner img{
outline:none !important;
border-radius: var(--curve) !important;
}

.url-info{display:none !important;}

  /* interest table */

td {background-color:rgba(0, 0, 0, 0.0) !important;border-radius: var(--curve) !important;}

main{
    border-radius: var(--curve) !important;
    background-color:rgba(219, 218, 185, 0.4)!important;
}

main
{
border: transparent !important;
outline: none !important;
}

.icon{border:none !important;}
.mood{margin-bottom 10px !important;}
.blurbs{margin-top:10px !important;}
.friends{margin-top:-10px !important;}
.profile-info{border-radius: var(--curve) !important;}
.comments-table{border-radius: var(--curve) !important;border:none !important;border-spacing:5px;}
.table-section{padding-bottom:7px !important;}
#comments{margin-top:15px !important;padding-bottom:15px !important}
.details p:last-child{color:var(--links) !important;  filter: brightness(95%);
}



  /* color the search bar */

.search-wrapper input[type=text] {background-color: transparent !important;border: 2px solid var(--headers) !important;color:var(--names) !important;border-radius: 5px !important;}
button{border-radius: 10px !important;border: 2px solid var(--headers) !important;font-family: var(--font-family) !important;background-color:transparent !important;color:var(--headers) !important;}


.blurbs .heading{display:none !important;}
</style>

<style>
/* Scrollbar styles */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}

::-webkit-scrollbar-track {
border-radius: 10px;
width: 2px;
border: 1px dotted white;
}

::-webkit-scrollbar-thumb {
background: red; 
border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
background: yellow;  
}
</style>
<style>
  .myDiv {
  text-align: center;
}
#t01 {
  width: 100%;    
  background-color: transparent;
  border-collapse: collapse;
  text-align: center;
}
</style>
<div class="myDiv">
    <img src="https://64.media.tumblr.com/f10c02b60f2b8c8fc01af48cfca23ef7/fc5de2916c2c422c-ae/s1280x1920/0a1eb7125564c263d7d8db3606c672257046c76d.jpg" width="200"/>
    <img src="https://64.media.tumblr.com/5e766e73e9409ca2f7ba88fef008caed/fc5de2916c2c422c-21/s1280x1920/c0d569b256740b474d5f6c4321a43727e17c77e9.jpg" width="200"/>
</div>
<hr/>
<marquee>
Jung Hoseok, better known by his stage name J-Hope, is a South Korean rapper, songwriter, dancer, and record producer. A member of BTS.
</marquee>
<hr/>
<div class="myDiv">
    <img src="https://cdn131.picsart.com/308770464240211.png" height="100"/>
</div>
<table id="t01">
  <tr>
    <th><img src="https://64.media.tumblr.com/b9ea391efa6eceaa39a35ffd8d7cec01/22185616c067d0b1-54/s640x960/e47ccb27894105c81f7a48cc0118b29d2e8dae9b.jpg" width="133"/></th>
    <th><img src="https://64.media.tumblr.com/8458d96a822c9df47bbe63bb3f427edc/22185616c067d0b1-27/s1280x1920/6996c7b4a4c0a2371c00d662e32e2fc56aff0f78.jpg" width="133"/></th> 
    <th><img src="https://64.media.tumblr.com/1d684c95529cdc22e26f1e0dc4333efb/22185616c067d0b1-4a/s1280x1920/3c9e0e8e0a09b33935436de31e57c4151b358691.jpg" width="133"/></th>
  </tr>
  <tr>
    <td><img src="https://64.media.tumblr.com/69582471fdb0f8abc7521805ef6b5dd6/22185616c067d0b1-35/s640x960/1ec63f95bfe5748799a751f217521eb17a4a6ee9.jpg" width="133"/></td>
    <td><img src="https://64.media.tumblr.com/e3adfddb19774a352bcaf661914b49ef/7fc09d410af4ad3a-9c/s1280x1920/82fd8f69b2ba0ae942ecd8ce95b0e566823435b9.jpg" width="133"/></td>
    <td><img src="https://64.media.tumblr.com/04451a6fba307d8ece15fbc7657b94e3/7fc09d410af4ad3a-83/s1280x1920/c389ecda60246216077836a8def3c53e4a6b13f3.jpg" width="133"/></td>
  </tr>
  <tr>
    <th><img src="https://64.media.tumblr.com/6193a11bef4afd425ca51f07961faf03/7fc09d410af4ad3a-f4/s1280x1920/7f0daf5479f68102c83414c649ef004fff2df509.jpg" width="133"/></th>
    <th><img src="https://64.media.tumblr.com/f599bcf059ea7b146fedf9f6cfec886a/7fc09d410af4ad3a-07/s1280x1920/58327238edd95e4db36550766f2b68f3079b0cf5.jpg" width="133"/></th> 
    <th><img src="https://64.media.tumblr.com/1cfe26d27278347af8e69e2995d864e1/7fc09d410af4ad3a-cb/s2048x3072/d94caf77a52353320eb07750b174d42557f95e9a.jpg" width="133"/></th>
  </tr>
  <tr>
    <td><img src="https://64.media.tumblr.com/4d235a5bea6c111165c4520eaf087dfa/7fc09d410af4ad3a-6d/s1280x1920/3a1263740eed50d149f31d633da9419623db6fc5.jpg" width="133"/></td>
    <td><img src="https://64.media.tumblr.com/335ee3ab3959295e6343a586caf2c884/7fc09d410af4ad3a-99/s1280x1920/9159ceae55af3d8d890038d258e5aca365d51bed.jpg" width="133"/></td>
    <td><img src="https://64.media.tumblr.com/cc937a3d232d3c8466c673ea6427fb45/7fc09d410af4ad3a-96/s1280x1920/655f86a402e3527898a1608576554fc8433505b1.jpg" width="133"/></td>
  </tr>
</table>

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.