Music Band Layout (version 2)

Tags: music band, music, band, 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=1629) -->

<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://static.billboard.com/files/media/iwm9ks1lc-mx83ej-nx-dje3-jdxm-bts-lal-72j-kdi3-2018-bb5-billboard-su7-1548-compressed.jpg');
	background-position: center;
	background-size: cover;
    filter:  drop-shadow(0px 0px 0px black) !important;
}
@media only screen and (max-width: 600px) {
	main:before{
	height: 200px;
	}
}

:root{
    --headers: #ececec;
    --text: #aaaaaa; 
    --names: #310a5d;
    --links: #aaaaaa;
    --hover: #525252;
    --borders: 7px ridge #525252;
    --background_image: url('https://andytips.org/wp-content/uploads/2016/12/black-background-7.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(84%) sepia(12%) saturate(11%) hue-rotate(330deg) brightness(79%) contrast(89%);!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(84%) sepia(12%) saturate(11%) hue-rotate(330deg) brightness(79%) contrast(89%); !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: #bbbbbb;
    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-size: 50%;
    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 #aaaaaa;}
.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://0.soompi.io/wp-content/uploads/2016/02/14225543/bts-group.gif');
    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: 7px;
}

.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: var(--borders);
}
</style>

<style>
/* Scrollbar styles */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
::-webkit-scrollbar-track {
    border-radius: var(--curve) 
    width: 2px;
    border: 1px solid gray;
}
::-webkit-scrollbar-thumb {
    background: gray; 
    border-radius: var(--curve) 
}
::-webkit-scrollbar-thumb:hover {
    background: gray;  
}
</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 3 of 3 comments ( View all | Add Comment )

JstUrHope

1677427920

Using

Report Comment

impala 6

1637129331

Hi, I am just getting started with spacehey.
Like your Layout and picked yours to try for my first pick.

Report Comment

Kiokiaro

1616003203

Hi Bela, thanks a lot for the layout. I like it very much;)

Report Comment

thanks glad you like it :)

by Bela 🔊⬆; 1616304391; Report

Layout published by Bela 🔊⬆

Music Band Layout (version 2)

Description:

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

Preview:

Code:

Comments

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