greenhouse
created by:8byte
HTMLCustom ColorsCharacter
Copy
<!--- colors (ctrl f and replace all)
#789177 - main accent
#322f31 - box color
#d2d8d9 - text color
#b4cbcf - link
rgba(210, 216, 217, 0.7) - text color at .7 opacity
--->
<div class="container pt-5" style="max-width: 700px;">
<div class="container p-0" style="background: #322f31; color: #d2d8d9; border: 3px solid #789177;">
<div class="d-flex flex-row mt-n5 ml-md-n5 ml-n1" style="position: absolute;">
<!--- profile picture --->
<div class="container p-0 d-flex justify-content-end" style="background: url(IMGURL); background-size: cover; background-position: center; border: 3px solid #789177; min-width: 200px; max-width: 200px; height: 200px;">
<div class="container p-2 d-flex mt-auto mb-0" style="background: rgba(210, 216, 217, 0.7); color: #322f31; justify-content: space-between; align-items: baseline; position: relative;">
<div style="position: absolute; top: 5px; left: 0; z-index: 101;">
<!--- paste in ONLY the code following watch?v= in the YOUTUBECODE spot --->
<iframe class="flex-fill" style="height: 25px; width: 25px; border-radius: 50%; opacity: 0.01;" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen src="https://www.youtube.com/embed/YOUTUBECODE?modestbranding=1"></iframe>
</div>
<i class="fas fa-play"></i>
<span>Song Title</span>
</div>
</div>
<div>
<div class="px-1" style="height: 3rem; padding-bottom: calc(.25rem + 3px);">
<h1 class="mb-0 h-100 p-2" style="background: #789177; color: #322f31;">Name Surname</h1>
</div>
<ul class="nav d-flex flex-column" style="background: #789177; height: calc(100% - 3rem); max-width: 50px;">
<li class="nav-item"><a class="nav-link active" href="#ONE" data-toggle="tab" style="color: #322f31;"><i class="far fa-user fa-fw"></i></a></li>
<li class="nav-item"><a class="nav-link" href="#TWO" data-toggle="tab" style="color: #322f31;"><i class="far fa-book-open fa-fw"></i></a></li>
<li class="nav-item"><a class="nav-link" href="#THREE" data-toggle="tab" style="color: #322f31;"><i class="far fa-link fa-fw"></i></a></li>
<li class="nav-item"><a class="nav-link" href="#FOUR" data-toggle="tab" style="color: #322f31;"><i class="far fa-pencil fa-fw"></i></a></li>
</ul>
</div>
</div>
<div class="tab-content px-1">
<div class="tab-pane active" id="ONE">
<div class="row no-gutters">
<!--- desktop block --->
<div class="card hidden-md-down" style="height: 150px; width: 200px; z-index: -1;"></div>
<!--- mobile block --->
<div class="card w-100 d-block d-md-none" style="height: 150px; z-index: -1;"></div>
<!--- likes --->
<div class="col-md col-4 p-1">
<h3 class="text-center" style="color: #789177;">Likes</h3>
<div class="overflow-auto" style="height: 110px;">
<ul class="pl-3">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<!--- interest --->
<div class="col-md col-4 p-1">
<h3 class="text-center" style="color: #789177;">Interests</h3>
<div class="overflow-auto" style="height: 110px;">
<ul class="pl-3">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<!--- dislikes --->
<div class="col-md col-4 p-1">
<h3 class="text-center" style="color: #789177;">Dislikes</h3>
<div class="overflow-auto" style="height: 110px;">
<ul class="pl-3">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<!-- <hr class="w-100 my-0" style="border-top: 1px solid #d2d8d9; margin-left: 200px;"> -->
<div class="col-md-12"></div>
<!--- basics --->
<div class="col-md-4 p-1">
<p class="mb-1" style="font-size: 1rem;">
<strong class="mr-2" style="color: #789177;">Name:</strong>
Name
</p>
<p class="mb-1" style="font-size: 1rem;">
<strong class="mr-2" style="color: #789177;">Nickname:</strong>
Nickname
</p>
<p class="mb-1" style="font-size: 1rem;">
<strong class="mr-2" style="color: #789177;">Gender:</strong>
Gender
</p>
<p class="mb-1" style="font-size: 1rem;">
<strong class="mr-2" style="color: #789177;">Age:</strong>
00
</p>
<p class="mb-1" style="font-size: 1rem;">
<strong class="mr-2" style="color: #789177;">Orientation:</strong>
Orientation
</p>
<p class="mb-1" style="font-size: 1rem;">
<strong class="mr-2" style="color: #789177;">Height:</strong>
Height
</p>
<p class="mb-1" style="font-size: 1rem;">
<strong class="mr-2" style="color: #789177;">Weight:</strong>
Weight
</p>
<p class="mb-1" style="font-size: 1rem;">
<strong class="mr-2" style="color: #789177;">Race:</strong>
Race
</p>
<p class="mb-1" style="font-size: 1rem;">
<strong class="mr-2" style="color: #789177;">Role:</strong>
Role
</p>
<p class="mb-1" style="font-size: 1rem;">
<strong class="mr-2" style="color: #789177;">Residence:</strong>
Residence
</p>
<p class="mb-1" style="font-size: 1rem;">
<strong class="mr-2" style="color: #789177;">Power:</strong>
Power
</p>
<p class="mb-1" style="font-size: 1rem;">
<strong class="mr-2" style="color: #789177;">Voice:</strong>
<a href="#" style="color: #b4cbcf;">Voice</a>
</p>
</div>
<div class="col-md-8 p-1">
<div class="row no-gutters">
<!--- traits --->
<div class="col-md-6 pr-md-1">
<h3 style="color: #789177;">Traits</h3>
<div class="overflow-auto" style="height: 250px;">
<!--- trait --->
<div class="d-flex flex-row" style="justify-content: space-between; align-items: center;">
<span>Intelligence</span>
<div class="progress my-1 rounded-0 mx-1" style="width: 130px; background: transparent; border: 2px solid #d2d8d9;">
<div class="progress-bar" role="progress my-1bar" style="width: 50%; height: 16px; background: #789177;"></div>
</div>
</div>
<!--- trait --->
<div class="d-flex flex-row" style="justify-content: space-between; align-items: center;">
<span>Creativity</span>
<div class="progress my-1 rounded-0 mx-1" style="width: 130px; background: transparent; border: 2px solid #d2d8d9;">
<div class="progress-bar" role="progress my-1bar" style="width: 50%; height: 16px; background: #789177;"></div>
</div>
</div>
<!--- trait --->
<div class="d-flex flex-row" style="justify-content: space-between; align-items: center;">
<span>Confidence</span>
<div class="progress my-1 rounded-0 mx-1" style="width: 130px; background: transparent; border: 2px solid #d2d8d9;">
<div class="progress-bar" role="progress my-1bar" style="width: 50%; height: 16px; background: #789177;"></div>
</div>
</div>
<!--- trait --->
<div class="d-flex flex-row" style="justify-content: space-between; align-items: center;">
<span>Humor</span>
<div class="progress my-1 rounded-0 mx-1" style="width: 130px; background: transparent; border: 2px solid #d2d8d9;">
<div class="progress-bar" role="progress my-1bar" style="width: 50%; height: 16px; background: #789177;"></div>
</div>
</div>
<!--- trait --->
<div class="d-flex flex-row" style="justify-content: space-between; align-items: center;">
<span>Empathy</span>
<div class="progress my-1 rounded-0 mx-1" style="width: 130px; background: transparent; border: 2px solid #d2d8d9;">
<div class="progress-bar" role="progress my-1bar" style="width: 50%; height: 16px; background: #789177;"></div>
</div>
</div>
<!--- trait --->
<div class="d-flex flex-row" style="justify-content: space-between; align-items: center;">
<span>Charisma</span>
<div class="progress my-1 rounded-0 mx-1" style="width: 130px; background: transparent; border: 2px solid #d2d8d9;">
<div class="progress-bar" role="progress my-1bar" style="width: 50%; height: 16px; background: #789177;"></div>
</div>
</div>
<!--- trait --->
<div class="d-flex flex-row" style="justify-content: space-between; align-items: center;">
<span>Temper</span>
<div class="progress my-1 rounded-0 mx-1" style="width: 130px; background: transparent; border: 2px solid #d2d8d9;">
<div class="progress-bar" role="progress my-1bar" style="width: 50%; height: 16px; background: #789177;"></div>
</div>
</div>
<!--- trait --->
<div class="d-flex flex-row" style="justify-content: space-between; align-items: center;">
<span>Maturity</span>
<div class="progress my-1 rounded-0 mx-1" style="width: 130px; background: transparent; border: 2px solid #d2d8d9;">
<div class="progress-bar" role="progress my-1bar" style="width: 50%; height: 16px; background: #789177;"></div>
</div>
</div>
<!--- end traits --->
</div>
</div>
<!--- stats --->
<div class="col-md-6 pl-md-1">
<h3 style="color: #789177;">Stats</h3>
<div class="overflow-auto" style="height: 250px;">
<!--- stat --->
<div class="d-flex flex-row" style="justify-content: space-between; align-items: center;">
<span>Strength</span>
<div class="progress my-1 rounded-0 mx-1" style="width: 130px; background: transparent; border: 2px solid #d2d8d9;">
<div class="progress-bar" role="progress my-1bar" style="width: 50%; height: 16px; background: #789177;"></div>
</div>
</div>
<!--- stat --->
<div class="d-flex flex-row" style="justify-content: space-between; align-items: center;">
<span>Perception</span>
<div class="progress my-1 rounded-0 mx-1" style="width: 130px; background: transparent; border: 2px solid #d2d8d9;">
<div class="progress-bar" role="progress my-1bar" style="width: 50%; height: 16px; background: #789177;"></div>
</div>
</div>
<!--- stat --->
<div class="d-flex flex-row" style="justify-content: space-between; align-items: center;">
<span>Endurance</span>
<div class="progress my-1 rounded-0 mx-1" style="width: 130px; background: transparent; border: 2px solid #d2d8d9;">
<div class="progress-bar" role="progress my-1bar" style="width: 50%; height: 16px; background: #789177;"></div>
</div>
</div>
<!--- stat --->
<div class="d-flex flex-row" style="justify-content: space-between; align-items: center;">
<span>Magic</span>
<div class="progress my-1 rounded-0 mx-1" style="width: 130px; background: transparent; border: 2px solid #d2d8d9;">
<div class="progress-bar" role="progress my-1bar" style="width: 50%; height: 16px; background: #789177;"></div>
</div>
</div>
<!--- stat --->
<div class="d-flex flex-row" style="justify-content: space-between; align-items: center;">
<span>Speed</span>
<div class="progress my-1 rounded-0 mx-1" style="width: 130px; background: transparent; border: 2px solid #d2d8d9;">
<div class="progress-bar" role="progress my-1bar" style="width: 50%; height: 16px; background: #789177;"></div>
</div>
</div>
<!--- stat --->
<div class="d-flex flex-row" style="justify-content: space-between; align-items: center;">
<span>Defense</span>
<div class="progress my-1 rounded-0 mx-1" style="width: 130px; background: transparent; border: 2px solid #d2d8d9;">
<div class="progress-bar" role="progress my-1bar" style="width: 50%; height: 16px; background: #789177;"></div>
</div>
</div>
<!--- stat --->
<div class="d-flex flex-row" style="justify-content: space-between; align-items: center;">
<span>Agility</span>
<div class="progress my-1 rounded-0 mx-1" style="width: 130px; background: transparent; border: 2px solid #d2d8d9;">
<div class="progress-bar" role="progress my-1bar" style="width: 50%; height: 16px; background: #789177;"></div>
</div>
</div>
<!--- stat --->
<div class="d-flex flex-row" style="justify-content: space-between; align-items: center;">
<span>Luck</span>
<div class="progress my-1 rounded-0 mx-1" style="width: 130px; background: transparent; border: 2px solid #d2d8d9;">
<div class="progress-bar" role="progress my-1bar" style="width: 50%; height: 16px; background: #789177;"></div>
</div>
</div>
<!--- end stats --->
</div>
</div>
<!--- skills --->
<div class="col-12 py-1">
<h3 style="color: #789177;">Skills</h3>
<div class="overflow-auto" style="height: 110px;">
<div class="row no-gutters">
<!--- skill --->
<div class="col-md-4 col-6 p-1">
<h5>Skill Name</h5>
<p>A short description on the skill.</p>
</div>
<!--- skill --->
<div class="col-md-4 col-6 p-1">
<h5>Skill Name</h5>
<p>A short description on the skill.</p>
</div>
<!--- skill --->
<div class="col-md-4 col-6 p-1">
<h5>Skill Name</h5>
<p>A short description on the skill.</p>
</div>
<!--- skill --->
<div class="col-md-4 col-6 p-1">
<h5>Skill Name</h5>
<p>A short description on the skill.</p>
</div>
<!--- skill --->
<div class="col-md-4 col-6 p-1">
<h5>Skill Name</h5>
<p>A short description on the skill.</p>
</div>
<!--- skill --->
<div class="col-md-4 col-6 p-1">
<h5>Skill Name</h5>
<p>A short description on the skill.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="TWO">
<div class="row no-gutters">
<!--- desktop block --->
<div class="card hidden-md-down" style="height: 150px; width: 200px; z-index: -1;"></div>
<!--- mobile block --->
<div class="card w-100 d-block d-md-none" style="height: 150px; z-index: -1;"></div>
<div class="col p-1">
<h3 style="color: #789177;">About</h3>
<!--- about --->
<div class="overflow-auto" style="height: 110px;">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
<div class="col-12 p-1">
<h3 style="color: #789177;">Backstory</h3>
<!--- backstory --->
<div class="overflow-auto" style="height: 180px;">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
<div class="col-12 p-1">
<h3 style="color: #789177;">Personality</h3>
<!--- personality --->
<div class="overflow-auto" style="height: 180px;">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="THREE">
<div class="row no-gutters">
<!--- desktop block --->
<div class="card hidden-md-down" style="height: 150px; width: 200px; z-index: -1;"></div>
<!--- mobile block --->
<div class="card w-100 d-block d-md-none" style="height: 150px; z-index: -1;"></div>
<div class="col-md hidden-md-down p-1">
<div class="overflow-auto d-flex justify-content-center align-items-center" style="height: 135px;">
<h3 class="font-italic" style="font-weight: lighter;">
<i class="far fa-quote-left mr-2" style="color: #789177;"></i>
<span>A quote can go here...</span>
<i class="far fa-quote-right ml-2" style="color: #789177;"></i>
</h3>
</div>
</div>
<div class="col-12 p-1">
<div class="overflow-auto" style="height: 426px;">
<div class="row no-gutters">
<!--- link --->
<div class="col-md-4 col-6 px-md-4 p-2">
<div class="container" style="background: url(IMGURL); background-size: cover; padding-top: 100%;"></div>
<h5 class="mt-2 d-flex" style="justify-content: space-between;">
<a href="#" style="color: #b4cbcf;">Name</a>
<span>|</span>
<span class="font-italic" style="font-weight: normal;">[relationship]</span>
</h5>
<p>Description of the relationship.</p>
</div>
<!--- link --->
<div class="col-md-4 col-6 px-md-4 p-2">
<div class="container" style="background: url(IMGURL); background-size: cover; padding-top: 100%;"></div>
<h5 class="mt-2 d-flex" style="justify-content: space-between;">
<a href="#" style="color: #b4cbcf;">Name</a>
<span>|</span>
<span class="font-italic" style="font-weight: normal;">[relationship]</span>
</h5>
<p>Description of the relationship.</p>
</div>
<!--- link --->
<div class="col-md-4 col-6 px-md-4 p-2">
<div class="container" style="background: url(IMGURL); background-size: cover; padding-top: 100%;"></div>
<h5 class="mt-2 d-flex" style="justify-content: space-between;">
<a href="#" style="color: #b4cbcf;">Name</a>
<span>|</span>
<span class="font-italic" style="font-weight: normal;">[relationship]</span>
</h5>
<p>Description of the relationship.</p>
</div>
<!--- link --->
<div class="col-md-4 col-6 px-md-4 p-2">
<div class="container" style="background: url(IMGURL); background-size: cover; padding-top: 100%;"></div>
<h5 class="mt-2 d-flex" style="justify-content: space-between;">
<a href="#" style="color: #b4cbcf;">Name</a>
<span>|</span>
<span class="font-italic" style="font-weight: normal;">[relationship]</span>
</h5>
<p>Description of the relationship.</p>
</div>
<!--- link --->
<div class="col-md-4 col-6 px-md-4 p-2">
<div class="container" style="background: url(IMGURL); background-size: cover; padding-top: 100%;"></div>
<h5 class="mt-2 d-flex" style="justify-content: space-between;">
<a href="#" style="color: #b4cbcf;">Name</a>
<span>|</span>
<span class="font-italic" style="font-weight: normal;">[relationship]</span>
</h5>
<p>Description of the relationship.</p>
</div>
<!--- link --->
<div class="col-md-4 col-6 px-md-4 p-2">
<div class="container" style="background: url(IMGURL); background-size: cover; padding-top: 100%;"></div>
<h5 class="mt-2 d-flex" style="justify-content: space-between;">
<a href="#" style="color: #b4cbcf;">Name</a>
<span>|</span>
<span class="font-italic" style="font-weight: normal;">[relationship]</span>
</h5>
<p>Description of the relationship.</p>
</div>
<!--- end links --->
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="FOUR">
<div class="row no-gutters">
<!--- desktop block --->
<div class="card hidden-md-down" style="height: 150px; width: 200px; z-index: -1;"></div>
<!--- mobile block --->
<div class="card w-100 d-block d-md-none" style="height: 150px; z-index: -1;"></div>
<div class="col p-1">
<h3 style="color: #789177;">Trivia</h3>
<!--- trivia --->
<div class="overflow-auto" style="height: 110px;">
<ul class="pl-3">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<div class="col-12 p-1">
<h3 style="color: #789177;">Notes</h3>
<!--- notes --->
<div class="overflow-auto" style="height: 71.5px;">
<ul class="pl-3">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<div class="col-12 p-1">
<h3 style="color: #789177;">Misc</h3>
<!--- misc --->
<div class="overflow-auto" style="height: 71.5px;">
<ul class="pl-3">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<div class="col-md-8 p-1">
<h3 style="color: #789177;">Playlist</h3>
<div class="overflow-auto" style="height: 180px;">
<!--- song --->
<div class="container p-1 d-flex" style="align-items: baseline; position: relative;">
<div style="position: absolute; top: 5px; left: 0; z-index: 101;">
<!--- paste in ONLY the code following watch?v= in the YOUTUBECODE spot --->
<iframe class="flex-fill" style="height: 25px; width: 25px; border-radius: 50%; opacity: 0.01;" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen src="https://www.youtube.com/embed/YOUTUBECODE?modestbranding=1"></iframe>
</div>
<i class="fas fa-play mr-2"></i>
<span>Song Title - Artist Name</span>
</div>
<!--- song --->
<div class="container p-1 d-flex" style="align-items: baseline; position: relative;">
<div style="position: absolute; top: 5px; left: 0; z-index: 101;">
<!--- paste in ONLY the code following watch?v= in the YOUTUBECODE spot --->
<iframe class="flex-fill" style="height: 25px; width: 25px; border-radius: 50%; opacity: 0.01;" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen src="https://www.youtube.com/embed/YOUTUBECODE?modestbranding=1"></iframe>
</div>
<i class="fas fa-play mr-2"></i>
<span>Song Title - Artist Name</span>
</div>
<!--- song --->
<div class="container p-1 d-flex" style="align-items: baseline; position: relative;">
<div style="position: absolute; top: 5px; left: 0; z-index: 101;">
<!--- paste in ONLY the code following watch?v= in the YOUTUBECODE spot --->
<iframe class="flex-fill" style="height: 25px; width: 25px; border-radius: 50%; opacity: 0.01;" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen src="https://www.youtube.com/embed/YOUTUBECODE?modestbranding=1"></iframe>
</div>
<i class="fas fa-play mr-2"></i>
<span>Song Title - Artist Name</span>
</div>
<!--- song --->
<div class="container p-1 d-flex" style="align-items: baseline; position: relative;">
<div style="position: absolute; top: 5px; left: 0; z-index: 101;">
<!--- paste in ONLY the code following watch?v= in the YOUTUBECODE spot --->
<iframe class="flex-fill" style="height: 25px; width: 25px; border-radius: 50%; opacity: 0.01;" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen src="https://www.youtube.com/embed/YOUTUBECODE?modestbranding=1"></iframe>
</div>
<i class="fas fa-play mr-2"></i>
<span>Song Title - Artist Name</span>
</div>
<!--- end songs --->
</div>
</div>
<div class="col-md-4 p-1">
<div class="container" style="background: url(IMGURL); background-size: contain; background-repeat: no-repeat; background-position: center; height: 180px;"></div>
</div>
</div>
</div>
</div>
</div>
<div class="text-right"><a href="/8byte" class="tooltipster" title="code credits" data-placement="bottom"><i class="fas fa-crow"></i></a></div>
</div>