Generic Music Artist Profile

Tags: music, musician, simple, layout

Description:

noticed theres not a great deal of musician oriented layouts around, figured id be the first

inspired by myspace music

includes:

logo/ad/"new album out now" banner

upcoming shows table

blurbs repurposed as a bio/shows section

interests table repurposed as an artist/label info table

extra headings for merch and stuff

comment "VERONICA IS T3H C4P741N" before using

Preview:

click on the image for a larger preview

Code:

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

<div class="table">
<table class="table1" cellspacing="0" cellpadding="1px">
    /*Put This Table In Who I'd Like To Meet*/
              <tbody>
                <tr>
                  <td><p>Date</p></td>
                  <td><p>Time</p></td>
                  <td><p>Venue</p></td>
                  <td><p>City</p></td>
                </tr>
                <tr>
                  <td><p> MM/DD/20XX</p></td>
                  <td><p> 00:00</p></td>
                  <td><p> <a href="generic-website.***">Generic Concert Venue</a></p></td>
                  <td><p> City, ST</p></td>
                </tr> 
                <tr>
                  <td><p> MM/DD/20XX</p></td>
                  <td><p> 00:00</p></td>
                  <td><p> <a href="generic-website.***">Generic Concert Venue</a></p></td>
                  <td><p> City, ST</p></td>
                </tr> 
                <tr>
                  <td><p> MM/DD/20XX</p></td>
                  <td><p> 00:00</p></td>
                  <td><p> <a href="generic-website.***">Generic Concert Venue</a></p></td>
                  <td><p> City, ST</p></td>
                </tr> 
                <tr>
                  <td><p> MM/DD/20XX</p></td>
                  <td><p> 00:00</p></td>
                  <td><p> <a href="generic-website.***">Generic Concert Venue</a></p></td>
                  <td><p> City, ST</p></td>
                </tr> 
                <tr>
                  <td><p> MM/DD/20XX</p></td>
                  <td><p> 00:00</p></td>
                  <td><p> <a href="generic-website.***">Generic Concert Venue</a></p></td>
                  <td><p> City, ST</p></td>
                </tr>
                <tr>
                  <td><p> MM/DD/20XX</p></td>
                  <td><p> 00:00</p></td>
                  <td><p> <a href="generic-website.***">Generic Concert Venue</a></p></td>
                  <td><p> City, ST</p></td>
                </tr> 
                <tr>
                  <td><p> MM/DD/20XX</p></td>
                  <td><p> 00:00</p></td>
                  <td><p> <a href="generic-website.***">Generic Concert Venue</a></p></td>
                  <td><p> City, ST</p></td>
                </tr> 
                <tr>
                  <td><p> MM/DD/20XX</p></td>
                  <td><p> 00:00</p></td>
                  <td><p> <a href="generic-website.***">Generic Concert Venue</a></p></td>
                  <td><p> City, ST</p></td>
                </tr> 
              </tbody>
            </table>
          </div>
          
<style>

:root {
    --logo-blue: #1D4ED8;
    --darker-blue: #1E40AF;
    --lighter-blue: #60A5FA;
    --even-lighter-blue: #BFDBFE;
    --lightest-blue: #DBEAFE;
    --dark-orange: rgba(239, 68, 68, 0.9);
    --light-orange: rgba(245, 158, 11, 0.6);
    --even-lighter-orange: #fcdbb8;
    --green: #34D399;
    --dark-green: #059669;
}

.table {
    font-size: 14px;
}
.table .table1 td {
    vertical-align: baseline;
    padding-right: 32px;

}

.table .table1 tr:first-child {
    background: var(--even-lighter-blue); /*placeholder*/
}

</style>


<style>
main:before {
    width: 100%;
    height: 200px;
    display: block;
    content: "";
    background: chartreuse; /*placeholder*/
    background-position: center;
    background-size: cover;
}

.profile h1 {
    inline-size: 160px;
}

/*Genre List*/
.profile h1::after {
font-size: 8pt;
font-weight: bolder;
content: "\A Genre 1 / Genre 2 / Genre 3"; /*this will probably break 4:3 monitors*/
white-space: pre;
}

body {

}


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

.mood p {
    display: none !important;
}
    
.blurbs .heading {
    display:none !important;
}


.blurbs .inner .section h4 { 
    font-size: 0; 
    
}

.blurbs .inner .section h4::after { 
    content: "Listen / Bio";
    font-size: 12px; 
}

.blurbs .inner .section:not(:first-child) h4::after { 
    content: "Upcoming Shows";
    font-size: 12px; 
}

.blurbs .inner .section h5 {  
    /*additional info, banners, merch links; ideally should be the same as h4, put in "Who I'd Like to Meet*/
    width: fit-content;
    font-size: 12px;
    font-family: Verdana;
    font-weight: bold;
    color: var(--dark-orange);
}

/*STYLE STUFF*/

.profile .contact, .profile .table-section {
    border: transparent;
}


/*Artist Info*/

:root {
        
        

        

        
    --topic1: "Sounds Like";
    --topic2: "Influences";
    --topic3: "Record Label";
    --topic4: "Type of Label";
    --topic5: "Active Since";
    --topic6: "Members";
    --topic7: "Management";
    --topic8: "Sponsors";



}

.table-section:not(:last-child) .details-table td:first-child p {
    margin: 0;
    overflow-wrap: break-word;
    word-break: break-word;
    content-visibility: hidden;
}

.details-table td:first-child::after {
    content-visibility: visible !important;
  color:var(--logo-blue) !important;
  letter-spacing:normal !important;

}
.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child::after{
  content: var(--topic1);
}
.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child::after{
  content: var(--topic2);
}
.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child::after{
  content: var(--topic3);
}
.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child::after{
  content: var(--topic4);
}
.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child::after{
  content: var(--topic5);
}
.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child::after{
  content: var(--topic6);
}
.table-section:not(:last-child) .details-table tr:nth-child(7) td:first-child::after{
  content: var(--topic7);
}
.table-section:not(:last-child) .details-table tr:nth-child(8) td:first-child::after{
  content: var(--topic8);
}

</style>
<style>

.profile .table-section .heading h4 {
    overflow-wrap: break-word;
    word-break: break-word;
    content-visibility: hidden;
}

.profile .table-section:not(:last-child) .heading::after {
content-visibility: revert !important; 
content: "Artist Info";
font-weight: bolder;
}

.profile .table-section:last-child .heading::after {
content-visibility: revert !important; 
content: "Follow This Artist";
font-weight: bolder;
}

</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.