Music Band Layout (version 1)

Tags: music band, band, music, simple, 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.

✧ the layout code includes the individual members drop down,

the spotify embed, and soundcloud embed.

you can delete these if you don't want them.

Preview:

click on the image for a larger preview

Code:

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

<style>
* { 
    cursor: url('https://cur.cursors-4u.net/others/oth-6/oth580.cur'), auto; 
}
</style>

<style>
/*== font-family ==*/
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@600&display=swap');

</style>

<style>

main:before {
	width: 99%;
	height: 300px;
	display: block;
	content: "";
    border-radius: var(--curve);
	background-image: url('https://i.imgur.com/QIYjHJj.jpg');
	background-position: center;
	background-size: cover;
    filter:hue-rotate(var(--hue)) drop-shadow(0px 0px 0px black) !important;
}
@media only screen and (max-width: 600px) {
	main:before{
	height: 200px;
	}
}

:root{
    --headers: #2DA8D8;
    --text: #5c5470; 
    --names: #310a5d;
    --links: #90b8f8;
    --hover: #858383;
    --borders: 7px ridge #5c5470;
    --background_image: url('https://www.wallpapers4u.org/wp-content/uploads/texture_black_pattern_light_lines_44980_1920x1080.jpg');
    --font-family: 'Source Sans Pro', sans-serif;
    --curve: 0px;
}
nav{
    border: var(--borders);
    margin-bottom: 5px;
}

nav .top {
    background-color: rgba(0, 0, 0, 0.2);
}
nav .links {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: var(--curve);
    margin-bottom: 0px;
}
nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
    content: " ︱";
    color: var(--links);
}

nav img.logo{
    filter: brightness(0) saturate(100%) invert(35%) sepia(7%) saturate(1716%) hue-rotate(216deg) brightness(89%) contrast(85%); !important;
}

.search-wrapper input[type=text] {
    background-color: transparent !important;
    border: 2px solid var(--links) !important;
    color:var(--links) !important;
    border-radius: var(--curve) !important;
}

button{
    border-radius: var(--curve) !important;
    border: 0px solid var(--links) !important;
    font-family: var(--font-family) !important;
    background-color: transparent !important;
    color:var(--links) !important;
}
.online{color: var(--links) !important;} 
.online img{
    filter: brightness(0) saturate(100%) invert(35%) sepia(7%) saturate(1716%) hue-rotate(216deg) brightness(89%) contrast(85%); !important;
}

h3, h4, h5{color: var(--headers) !important;text-shadow:2px 1px 3px black} /* headings*/
a{color: var(--links) !important;font-weight:1;text-shadow:1px 1px 3px black} /* color of links */
a:hover{color: var(--hover) !important;} /* color of links on hover */
p, h2, .count {color: var(--text) !important;} /* color of text */
.friends a p{color: var(--headers) !important;font-weight: 1!important;} /* color of names, and friends counter */
.friends a:hover p{color: var(--hover) !important;} /* color of names on hover */
nav label{color: var(--links) !important;} /* color of search */
.section h4 {color: var(--headers); !important;} /* aboutme & want2meet headings */
.blurbs .inner .section:nth-child(1) h4{display:none;} /* hides the about me title*/
.blurbs .heading {display:none;}

h3, h4, h5, a, p, nav label, .section{ 
    font-family: var(--font-family) !important;	
    font-size: 14px!important;
    font-weight: 1;
}
h2{
    font-family: var(--font-family) !important;	
    font-size: 20px!important;
    font-weight: 1;
    text-decoration: underline;
}

h2, h3, h4, h5, p{
    padding-left:5px !important;
}
h1{
    color: #5c5470;
    padding-left: 20px !important;
    padding-bottom: 2px !important;
    font-family: 'Libre Baskerville', serif;
    font-size:30px !important;
    filter: drop-shadow(2px 2px 1px black) !important;
    font-weight: 1;
}
h4{
    background:!important;
    padding-bottom: 2px !important;
}
hr{
    display:block;
    border:0px;
    height:1px;
    background: white;
    border-radius: ;
}
body{
    background-image: var(--background_image)!important;
    background-color: #352f44;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}   

.blurbs, .friends, .profile .table, .profile .table-section, footer{
    border-radius: var(--curve) !important;
    padding: 2px !important;
    border: var(--borders) !important;
    background-color: rgba(0, 0, 0, 0.2)!important;
}
.contact, .blog-preview{
    border-radius: var(--curve) !important;
    padding: 2px !important;
    border: var(--borders) !important;
    background-color: rgba(0, 0, 0, 0.2);
}

td{
    background-color: transparent!important;
}

main{
    background-color:rgba(0, 0, 0, 0.0); !important;
    border-radius: var(--curve) !important;
    border: transparent !important;
    outline: none !important;
}

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

.profile-info {
    background-image: url('');
    background-size: cover;
    border: var(--borders) !important;
}

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

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

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

.icon{border:none !important;}
.blurbs{margin-top:10px !important;}
.friends{margin-top:-10px !important;}
.profile-info{border-radius: var(--curve) !important;}
.comment-replies{border:5px ridge #5c5470;}
.comment-reply:not(:first-child){border-top: 2px solid var(--links);} /* line in bewtween comment replies*/
.comments-table{border-radius: var(--curve) !important;}
.table-section{padding-bottom:7px !important;}
#comments{margin-top:5px !important;padding-bottom:5px !important}
.details p:last-child{color:var(--links) !important;  filter: brightness(95%);}

.url-info{
    background: url('https://qph.fs.quoracdn.net/main-qimg-cef8aec209b8aba130d760db7712541f');
    background-size: cover;
    background-position: center;
    border: var(--borders)!important;
    height: 200px;
}
.url-info p{
    opacity: 0.0;
}

.comments-table {
    display: block;
    height: 500px!important;
    overflow-y: scroll;
    border: none !important;
    outline: none !important;
    padding: 10px;
    margin: 1px;
    border-spacing: 5px;
}

.comments-table td:first-child{

    background-image: url('');
    background-size: cover;
    background-position: center;
}

.comments-table td{
    background-image: url('');
    background-size: cover;
    background-position: center;
    border:2px solid #5c5470;
}
</style>

<style>

/* Scrollbar styles */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
::-webkit-scrollbar-track {
    border-radius: var(--curve) 
    width: 2px;
    border: 1px solid #5c5470;
}
::-webkit-scrollbar-thumb {
    background: #5c5470; 
    border-radius: var(--curve) 
}
::-webkit-scrollbar-thumb:hover {
    background: lightblue;  
}
</style>
<style>
.members{
    text-align:center;
    background: black;
}
.members summary{
    color: var(--headers);
    background: black;
    font-family: var(--font-family);
    padding: 5px;
    width: 100%;
    text-align: left;
}
.members img{
    width: 75%;
}
.members p{
    color: var(--text);
    background: black;
    padding: 5px;
    text-align: center;
}
#albums{
    overflow-y: scroll;
    overflow-x: hidden;
    height: 200px;
    width: auto;
}
</style>

<h2 style="text-align:center">About the Band</h2>
<p>Lorem ipsum dolor sit amet, usu odio mandamus adolescens ad, probo essent alienum mel ne. 
Pri ne novum insolens deseruisse. Ius recteque maiestatis et, te nobis graeco incorrupte vix. 
Nullam prompta definiebas ei quo.</p>

<h2 style="text-align:center"> The Members </h2>

<details class="members">
  <summary>RM</summary>
   <img src="https://i.pinimg.com/736x/d5/8c/51/d58c513dd114c3d004b6d5d065306ac5.jpg" alt="rm"/>
  <p>Mea nominati deseruisse an. Ea legere philosophia vis, vix ut detraxit vituperata, atqui veniam an pri. Pri in option delicatissimi, novum option posidonium id cum, velit cotidieque est eu. Sed luptatum torquatos definiebas ne?</p>
</details>
<br/>
<details class="members">
  <summary>Jin</summary>
   <img src="https://i.pinimg.com/originals/2d/c6/34/2dc634f86e111990d5b5dcd744e47bd2.png" alt="jin"/>
  <p>Mea nominati deseruisse an. Ea legere philosophia vis, vix ut detraxit vituperata, atqui veniam an pri. Pri in option delicatissimi, novum option posidonium id cum, velit cotidieque est eu. Sed luptatum torquatos definiebas ne?</p>
</details>
<br/>
<details class="members">
  <summary>Suga</summary>
   <img src="https://i.pinimg.com/originals/18/9a/1d/189a1d9596f225cb8c9b2fdb01b2b246.jpg" alt="suga"/>
  <p>Mea nominati deseruisse an. Ea legere philosophia vis, vix ut detraxit vituperata, atqui veniam an pri. Pri in option delicatissimi, novum option posidonium id cum, velit cotidieque est eu. Sed luptatum torquatos definiebas ne?</p>
</details>
<br/>
<details class="members">
  <summary>J-Hope</summary>
   <img src="https://i.pinimg.com/originals/55/d4/03/55d403477a1f3e731e35afe30f98242c.jpg" alt="J Hope"/>
  <p>Mea nominati deseruisse an. Ea legere philosophia vis, vix ut detraxit vituperata, atqui veniam an pri. Pri in option delicatissimi, novum option posidonium id cum, velit cotidieque est eu. Sed luptatum torquatos definiebas ne?</p>
</details>
<br/>
<details class="members">
  <summary>Jimin</summary>
   <img src="https://i.pinimg.com/736x/c6/10/6c/c6106c14c2b19d3f5ffd7bab6f5c937a.jpg" alt="Jimin"/>
  <p>Mea nominati deseruisse an. Ea legere philosophia vis, vix ut detraxit vituperata, atqui veniam an pri. Pri in option delicatissimi, novum option posidonium id cum, velit cotidieque est eu. Sed luptatum torquatos definiebas ne?</p>
</details>
<br/>
<details class="members">
  <summary>V</summary>
   <img src="https://64.media.tumblr.com/03bf4e6a89201011e61b608ced2a7c31/tumblr_plsipvQCLz1w279mt_540.jpg" alt="V"/>
  <p>Mea nominati deseruisse an. Ea legere philosophia vis, vix ut detraxit vituperata, atqui veniam an pri. Pri in option delicatissimi, novum option posidonium id cum, velit cotidieque est eu. Sed luptatum torquatos definiebas ne?</p>
</details>
<br/>
<details class="members">
  <summary>Jungkook</summary>
   <img src="https://i.pinimg.com/originals/6a/8b/94/6a8b9489fe12a1482fb7a28581ba46e6.jpg" alt="Jungkook"/>
  <p>Mea nominati deseruisse an. Ea legere philosophia vis, vix ut detraxit vituperata, atqui veniam an pri. Pri in option delicatissimi, novum option posidonium id cum, velit cotidieque est eu. Sed luptatum torquatos definiebas ne?</p>
</details>
<br/><br/>

<h2 style="text-align:center"> Newest Single </h2>
<br/>
<iframe width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/833810287&amp;color=%23ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;show_teaser=true&amp;visual=true"></iframe>
<div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;">
<br/><br/>
<h2 style="text-align:center"> Our Spotify </h2>
<br/>
<div style="width:100%;text-align:center">
<iframe src="https://open.spotify.com/embed/album/2qehskW9lYGWfYb0xPZkrS" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
</div>
<br/><br/>

<div style="text-align:center">
    Our fans in our online concert
<br/><br/>
    <img src="https://cdn.filestackcontent.com/NWPqxV2JSGCSDL5GeiF2/convert?cache=true&amp;crop=0%2C129%2C1999%2C999&amp;crop_first=true&amp;quality=90&amp;w=1920" width="400" alt="BTS Online Concert"/>
</div>

<br/><br/></div>

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 )

MaxWho? +(Fromis_9)+	1717405531 how do i change the bts photo? Report Comment
missssticks96	1695676928 lol is it possible to get the top photo of them, ive been trying to find it on google but i cant, i love the whole layout but really just want that photo Report Comment here's the link https://i.imgur.com/QIYjHJj.jpg by Bela; 1695700271; Report I found other ones from that same photoshoot here https://aminoapps.com/c/btsarmy/page/blog/bts-naver-x-dispatch-group-photos-pt-1/X0gp_Z0LfgugB5mvGmLlalVQGjdYZg1W0JN by Bela; 1695700411; Report omg ty sm by missssticks96; 1696365577; Report
JstUrHope	1675014452 Been looking for bts layouts Report Comment
JstUrHope	1675014412 Love it! 💜 Report Comment
url0calem0	1636934833 I love this! im going to use this layout. I've been wanting to have a layout of bts or any kpop groups i listen to. The layout is so cute! Report Comment Glad you're enjoying it :) by Bela; 1636943421; Report

Layout published by Bela