Artist Page design for Supersonic

dabblet.css

/*
 * Artist Page design for Supersonic
 */


artist_listing .artist_social { float: right; padding: 0; }
.artist_listing_name { color: #1398bb; font-size: 16px;}
.artist_listing_details { padding: 20px 10px; }
.artist_listing_details a { text-decoration: none; }

#artist_listing_cover .page-title { position: absolute; width: 100%; top: 35%; color: #fff; text-align: center; }
#artist_listing_cover .sub_title { color: #FFF; font-size: 20px; }
#artist_listing  .profile_wrap { height: 365px;overflow: hidden; }


@media (max-width: 1200px)  { #artist_listing .col-lg-4 { width: 33.3333%; float: left; } }

@media (max-width: 1000px)  {
	#artist_listing .artist_social { float: none; }
	#artist_listing  .profile_wrap { height: 330px; }
}

@media (max-width: 800px)  {
	#artist_listing .col-lg-4 { width: 50%; float: left; }
	#artist_listing_cover .page-title { top: 25%;}
	#artist_listing_cover .sub_title { font-size: 18px; }
}

dabblet.html

<section class="section js-artists-container" id="artist_listing">
	<div class="col-lg-4">
		<a href="artist_single.php?id=168">
			<div class="profile_wrap">
            	<img class="img-responsive" src="http://cdn-images.spinr.in/supersonic/staging/images/artists/thumbnails/168/original/Dillon_Francis.jpg?1444737959" style="width: 100%;">
            </div>
        </a>
    	<div class="artist_listing_details">
    		<a href="artist_single.php?id=160"><span class="artist_listing_name">Dillon Francis</span></a>
    		<div class="artist_social">
    			<a class="artist_twitter" href="DILLONFRANCIS" target="_blank"><img src="images/twitter.png"></a>
    			<a class="artist_twitter" href="DILLONFRANCIS" target="_blank"><img src="images/twitter.png"></a>
    			<a class="artist_instagram" href="dillonfrancis" target="_blank"><img src="images/insta.png"></a>
    			<a class="artist_youtube" href="DillonFrancisVEVO" target="_blank"><img src="images/youtube.png"></a>
    		</div>
    	</div>
    </div>
</section>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}