f2u - long story short

	<!--BACKGROUND IMAGE-->
	<div class="container-fluid text-white" style="max-width:700px; background:url(BACKGROUND IMAGE URL); background-size:cover; min-height:450px; font-weight:lighter">


		<div class="row">
			<div class="col-sm-5">

	<!--CHARACTER IMAGE-->
				<div class="card rounded-0 border-0" style="background:url(CHARACTER IMAGE URL/transparent works best!!!!!!!); background-size:cover; background-repeat:no-repeat; min-height:450px;">
					<div class="card p-2 mx-2 mt-auto mb-3 border-0 rounded-0" style="background:rgba(0,0,0,0.75); text-align:center; font-size:25px">
						NAME
					</div>
				</div>
			</div>
			<div class="col-sm-7 p-0">
				<div class="container-fluid" style="background:rgba(0,0,0,0.75); min-height:450px">
					<!--- the tabs part =-->
					<div class="container mx-auto" id="PARENT">
						<div class="collapse show" data-parent="#PARENT" id="FIRST-TAB">
							<div class="container text-center">
								<a class="text-white" data-toggle="collapse" href="#SECOND-TAB" style="font-size:30px"><i class="fas fa-horizontal-rule mx-2"></i><i class="fas fa-star" style=""></i><i class="fas fa-horizontal-rule mx-2"></i></a>
							</div>

							<div class="container p-0 mt-2">
							    <div class="row">
							        <div class="col-sm-6">
							            <div class="row">
							                <div class="col-7"><b>AGE</b></div>
							                <div class="col-5">...</div>
							                <div class="col-7"><b>PRNS</b></div>
							                <div class="col-5">...</div>
							                <div class="col-7"><b>SEXUALITY</b></div>
							                <div class="col-5">...</div>
							            </div>
							        </div>
							        <div class="col-sm-6">
							            <div class="row">
							                <div class="col-7"><b>SPECIES</b></div>
							                <div class="col-5">...</div>
							                <div class="col-7"><b>HEIGHT</b></div>
							                <div class="col-5">...</div>
							                <div class="col-7"><b>MBTI</b></div>
							                <div class="col-5">...</div>
							            </div>
							        </div>
							    </div>

							    <div class="mt-3" style="font-size:25px; border-bottom:1px solid">ABOUT</div>

							    <div class="container pt-2 p-0" style="max-height:260px; overflow:auto">
							        <p>info here! this will scroll past a certain point</p>
							        <p>here's another line!</p>
							        <p>here's some filler. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
							    </div>

							</div>

							</div>
						<div class="collapse" data-parent="#PARENT" id="SECOND-TAB">
							<div class="container text-center">
								<a data-toggle="collapse" href="#FIRST-TAB" class="text-white" style="font-size:30px"><i class="fas fa-horizontal-rule mx-2"></i><i class="fas fa-cross"></i><i class="fas fa-horizontal-rule mx-2"></i></a>
							</div>

							 <div class="my-3" style="font-size:25px; border-bottom:1px solid">TRIVIA</div>
							 <ul style="height:100px; overflow:auto">
							     <li>one thing</li>
							     <li>two thing</li>
							     <li>three thing</li>
							     <li>this scrolls past a certain point!</li>
							 </ul>

							<div class="my-3" style="font-size:25px; border-bottom:1px solid">DESIGN NOTES</div>
							 <ul style="height:100px; overflow:auto">
							     <li>one thing</li>
							     <li>two thing</li>
							     <li>three thing</li>
							     <li>this scrolls past a certain point!</li>

							 </ul>
							<div class="container p-0 text-center" style="font-size:20px">
							    <div class="row">
							        <div class="col-sm-3" style="text-align:right"><a href="SONG LINK"><i class="fas fa-play text-white"></i></a></div>
							        <div class="col-sm-9">song - artist</div>
							    </div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<a class="pull-right" href="/hanyu" style="font-size:10px">code by hanyu</a>
	</div>