PERSONAL TH CODE

<!---- main container ----- controls the max width & font color ------------->
<div class="container-fluid px-0" style="color: #14171a; max-width: 1000px;">
	<!------- content block --- controls the background color & box shadow -------->
	<div class="p-3" style="background: #473e4e; box-shadow: 0px 0px 8px rgba(0,0,0,.2);">
		<div class="row no-gutters">
			<!-------- left column of images ---------->
			<div class="col-md-3 mb-md-0 mb-2">
				<!----- images will scale & crop with screen size -- focus will be in the CENTER of the image -->
				<div class="row no-gutters">
					<div class="col-md-12 mb-md-2 pr-md-0 pr-1 col-4">
						<div style="background: url(https://media.discordapp.net/attachments/576076239459319808/597108553815293953/superthumb.png); background-position: center; background-size: cover; height: 200px;">
							<br>
						</div>
					</div>
					<div class="col-md-12 mb-md-2 col-4">
						<div style="background: url(https://media.discordapp.net/attachments/576076239459319808/597108630415867917/E2808EID-Laboratory-Race-7.png?width=513&height=343); background-position: center; background-size: cover; height: 200px;">
							<br>
						</div>
					</div>
					<div class="col-md-12 pl-md-0 pl-1 col-4">
						<div style="background: url(https://media.discordapp.net/attachments/576076239459319808/597108680806236160/large.png); background-position: center; background-size: cover; height: 200px;">
							<br>
						</div>
					</div>
				</div>
			</div>
			<!------ center column of text ----------->
			<div class="col-md-6 px-lg-4 px-md-1 mb-md-0 mb-2">
				<!----- top content block --------------->
				<!----- title --- change bg color for title here ------>

				<h1 class="text-center py-2 px-1" style="background: #807686; color: #fff; font-weight: 300; letter-spacing: 1.5px; margin-bottom:10px;">Title Here</h1>
				<!----- stats here ------------------->
				<div class="pt-3 px-4 pb-0" style="background: #fff; height: 205px; overflow:auto; margin-bottom: 11px;">
					<div class="row no-gutters">
						<div class="col-12"><span style="filter:opacity(75%); letter-spacing:1px;">Name</span>
							<span class="pull-right">Content</span>
							<hr class="my-1" style="border-color: rgba(0,0,0,.125);">
						</div>
						<div class="col-12"><span style="filter:opacity(75%); letter-spacing:1px;">Age</span>
							<span class="pull-right">Content</span>
							<hr class="my-1" style="border-color: rgba(0,0,0,.125);">
						</div>
						<div class="col-12"><span style="filter:opacity(75%); letter-spacing:1px;">Gender</span>
							<span class="pull-right">Content</span>
							<hr class="my-1" style="border-color: rgba(0,0,0,.125);">
						</div>
						<div class="col-12"><span style="filter:opacity(75%); letter-spacing:1px;">Race</span>
							<span class="pull-right">Content</span>
							<hr class="my-1" style="border-color: rgba(0,0,0,.125);">
						</div>
						<div class="col-12"><span style="filter:opacity(75%); letter-spacing:1px;">Role</span>
							<span class="pull-right">Content</span>
							<hr class="my-1" style="border-color: rgba(0,0,0,.125);">
						</div>
						<div class="col-12"><span style="filter:opacity(75%); letter-spacing:1px;">Theme</span>
							<span class="pull-right"><a href="SONG%20LINK" style="color: #7b868a;" target="_BLANK">link a song</a></span></div>
					</div>
				</div>
				<!---- bottom content block -------------->
				<div class="card-block pb-0" style="background: #fff; height: 350px; overflow:auto;">
					<!---- focal adjectives ---------->

					<p class="text-center" style="filter:opacity(75%); font-weight: 30; letter-spacing: 1.5px;">adjective . adjective . adjective
						<br>- - - - - - - - - - -
						<br><span style="font-size: 12px;">nmms we pon algo aqui &lt;u&gt;</span></p>
				</div>
			</div>
			<!-------- right column of images ---------->
			<div class="col-md-3">
				<!----- images will scale & crop with screen size -- focus will be in the CENTER of the image -->
				<div class="row no-gutters">
					<div class="col-md-12 mb-md-2 pr-md-0 pr-1 col-4">
						<div style="background: url(https://media.discordapp.net/attachments/576076239459319808/597108906661117955/tumblr_oarus41AgL1rb7uo8o1_1280.png?width=257&height=342); background-position: center; background-size: cover; height: 200px;">
							<br>
						</div>
					</div>
					<div class="col-md-12 mb-md-2 col-4">
						<div style="background: url(https://media.discordapp.net/attachments/576076239459319808/597110736761782273/49997670_660479837687449_6960223582999257798_n.png); background-position: center; background-size: cover; height: 200px;">
							<br>
						</div>
					</div>
					<div class="col-md-12 pl-md-0 pl-1 col-4">
						<div style="background: url(https://images-ext-1.discordapp.net/external/M4peS_Y8bAb_wIQcRppFfGoHbXj0hiYIRgNZ2gv0urM/https/pa1.narvii.com/6820/42d90a7293f568e8033933974c3394de92ed3bcc_hq.gif); background-position: center; background-size: cover; height: 200px;">
							<br>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!----- quote box ----- remove entire row if you wanna get rid of this ------>
		<div class="row no-gutters">
			<div class="col-12 mt-2">
				<div class="p-2 text-center" style="background: #807686; color: #fff;">

					<p style="font-weight: 300; letter-spacing: 1.5px; font-size: 1.2em;"><em>&nbsp;Write a quote here...</em></p>
				</div>
			</div>
		</div>
	</div>

	<p class="text-right small mt-2"><span style="font-size: 9px;">lowkeywicked</span></p>
</div>