Toyhou.se HTML Code | Compact

<p><img src="http://file.toyhou.se/images/4866102_dx64OYKaIgXgWDf.png" class="float-right rounded ml-1 fr-fir fr-dib" width="400" height="450"></p>
<div class="card card-outline-info mb-4" style="height:450px;">
	<div class="card-header bg-info text-white display-3"><i class="fa fa-female"></i><strong>&nbsp;Basics<br></strong></div>
	<div class="card-block bg-faded table-responsive">

		<table class="border-0 w-85 mx-auto">
			<tbody>
				<tr>
					<td class="w-60 align-top" style="text-align: left;"><span class="badge badge-pill badge-info" style="font-size: 15px;">Name</span> Name
						<br><span class="badge badge-pill badge-info" style="font-size: 15px;">Age</span> Age
						<br><span class="badge badge-pill badge-info" style="font-size: 15px;">Gender</span> Gender
						<br><span class="badge badge-pill badge-info" style="font-size: 15px;">Origin</span> Where they come from
						<br><span class="badge badge-pill badge-info" style="font-size: 15px;">Status</span> Dead or alive? Married? Single?
						<br><span class="badge badge-pill badge-info" style="font-size: 15px;">Career</span> Profession works too</td>
					<td class="w-60 align-top" style="text-align: left;"><span class="badge badge-pill badge-info" style="font-size: 15px;">Nickname(s)</span> Nicknames
						<br><span class="badge badge-pill badge-info" style="font-size: 15px;">D.o.B</span> Date of birth
						<br><span class="badge badge-pill badge-info" style="font-size: 15px;">Orientation</span> What they&#39;re into
						<br><span class="badge badge-pill badge-info" style="font-size: 15px;">Species</span> Or Race
						<br><span class="badge badge-pill badge-info" style="font-size: 15px;">Alignment</span> Chaotic Good?
						<br><span class="badge badge-pill badge-info" style="font-size: 15px;">Theme</span> Song link</td>
				</tr>
			</tbody>
		</table>

		<table class="border-0 w-85 mx-auto">
			<tbody>
				<tr>
					<td class="w-60 align-top" style="text-align: left;"><span class="badge badge-pill" style="font-size: 15px; background: #8A2BE2;">Coding Credit</span> @CrystalChimera</td>
				</tr>
			</tbody>
		</table>

		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p><span class="badge badge-pill badge-info" style="font-size: 18px;"><i class="fa fa-star"></i> Sub Title</span>

		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
	</div>
</div>
<div class="container mx-auto" style="width:900px;">
	<div class="row mb-2">
		<div class="col-6">
			<div class="card card-outline-info mb-4" style=" height:320px;">
				<div class="card-header bg-info text-white display-3"><i class="fa fa-thumb-tack"></i><strong>&nbsp;Other Info<br></strong></div>
				<div class="card-block bg-faded table-responsive">

					<table class="border-0 w-85 mx-auto">
						<tbody>
							<tr>
								<td class="w-60 align-top" style="text-align: left;">

									<ul class="mb-0">
										<li>By the way, this box scrolls! c:</li>
										<li>Lorem ipsum dolor sit amet</li>
										<li>Lorem ipsum dolor sit amet</li>
										<li>Lorem ipsum dolor sit amet</li>
										<li>Lorem ipsum dolor sit amet</li>
										<li>Lorem ipsum dolor sit amet</li>
									</ul>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
		<div class="col-6">
			<div class="card card-outline-info mb-4" style=" height:320px;">
				<div class="card-header bg-info text-white display-3"><i class="fa fa-tasks"></i><strong>&nbsp;Skills<br></strong></div>
				<div class="card-block bg-faded table-responsive"><span class="badge badge-pill badge-info" style="font-size: 18px;"><i class="fa fa-circle"></i> Skill 1</span>

					<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p><span class="badge badge-pill badge-info" style="font-size: 18px;"><i class="fa fa-circle-o"></i> Skill 2</span>

					<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p><span class="badge badge-pill badge-info" style="font-size: 18px;"><i class="fa fa-circle-o"></i> Skill 2</span>

					<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
				</div>
			</div>
		</div>
		<div class="card card-outline-info mb-4" style=" height:220px;">
			<div class="card-header bg-info text-white display-3"><i class="fa fa-commenting"></i><strong>&nbsp;Relationships<br></strong></div>
			<div class="card-block bg-faded table-responsive">
				<div>

					<table class="w-100 border-0">
						<tbody>
							<tr>
								<td><img src="http://file.toyhou.se/images/4866102_dx64OYKaIgXgWDf.png" class="float-left mr-1 img-rounded fr-fil fr-dib" width="100" height="100">
									<span class="badge badge-pill badge-info" style="font-size: 15px;">Name</span>
									<em>Relationship</em>
									<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam orci nisl, rhoncus luctus urna et, luctus tincidunt velit. Sed nec mattis dolor, quis iaculis massa. Donec at felis ac nulla dictum mollis. Donec quis justo tincidunt arcu convallis egestas ut gravida sapien. Duis id nulla non ex scelerisque rhoncus a vitae neque.
									<br>
								</td>
							</tr>
							<tr>
								<td><img src="http://file.toyhou.se/images/4866102_dx64OYKaIgXgWDf.png" class="float-left mr-1 img-rounded fr-fil fr-dib" width="100" height="100">
									<span class="badge badge-pill badge-info" style="font-size: 15px;">Name</span>
									<em>Relationship</em>
									<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam orci nisl, rhoncus luctus urna et, luctus tincidunt velit. Sed nec mattis dolor, quis iaculis massa. Donec at felis ac nulla dictum mollis. Donec quis justo tincidunt arcu convallis egestas ut gravida sapien. Duis id nulla non ex scelerisque rhoncus a vitae neque.
									<br>
								</td>
							</tr>
							<tr>
								<td><img src="http://file.toyhou.se/images/4866102_dx64OYKaIgXgWDf.png" class="float-left mr-1 img-rounded fr-fil fr-dib" width="100" height="100">
									<span class="badge badge-pill badge-info" style="font-size: 15px;">Name</span>
									<em>Relationship</em>
									<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam orci nisl, rhoncus luctus urna et, luctus tincidunt velit. Sed nec mattis dolor, quis iaculis massa. Donec at felis ac nulla dictum mollis. Donec quis justo tincidunt arcu convallis egestas ut gravida sapien. Duis id nulla non ex scelerisque rhoncus a vitae neque.
									<br>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>