Toyhou.se HTML Code | Inception

<div class="card card-outline-success mb-4">
	<div class="card-header bg-success text-white display-3"><i class="fa fa-user"></i><strong>&nbsp;Basics<br></strong></div>
	<div class="card-block bg-faded">

		<p><img src="http://file.toyhou.se/images/4866102_dx64OYKaIgXgWDf.png" class="float-right rounded ml-1 fr-fir fr-dib" width="350" height="350"></p>

		<table class="border-0 w-85 mx-auto">
			<tbody>
				<tr>
					<td class="w-60 align-top" style="text-align: left;"><strong>【Name】</strong> Name
						<br><strong>【Age】</strong> Age
						<br><strong>【Gender】</strong> Gender
						<br><strong>【Origin】</strong> Content
						<br><strong>【Status】</strong> Content
						<br><strong>【Career】</strong> Content</td>
					<td class="w-60 align-top" style="text-align: left;"><strong>【Nickname(s)】</strong> Nicknames
						<br><strong>【D.o.B】</strong> Date of birth
						<br><strong>【Orientation】</strong> What they&#39;re into
						<br><strong>【Species】</strong> Or Race
						<br><strong>【Alignment】</strong> Evil I hope
						<br><strong>【Theme】</strong> 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;"><strong>【Coding Credit】</strong> @CrystalChimera</td>
				</tr>
			</tbody>
		</table>

		<p>What something about your character here! 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>

		<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>

		<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>

		<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>
		<br>
		<div class="card card-outline-success mb-4" style="height:400px;">
			<div class="card-header bg-success text-white display-3"><i class="fa fa-heart"></i><strong>&nbsp;Personality<br></strong></div>
			<div class="card-block bg-faded">
				<div>

					<p>Tell us about your character here! 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>
					<br>

					<table class="w-100 border-0">
						<tbody>
							<tr>
								<td class="align-top" style="width:33.3%;"><strong>【Likes】</strong>

									<ul class="mb-0">
										<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>
								<td class="align-top" style="width:33.3%;"><strong>【Dislikes】</strong>

									<ul class="mb-0">
										<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>
								<td class="align-top" style="width:33.3%;"><strong>【Habits/Hobbies】</strong>

									<ul class="mb-0">
										<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>
</div>
<div class="container mx-auto" style="width:900px;">
	<div class="row mb-2">
		<div class="col-5">
			<div class="card card-outline-success mb-4">
				<div class="card-header bg-success text-white display-3"><i class="fa fa-universal-access"></i><strong>&nbsp;Design<br></strong></div>
				<div class="card-block bg-faded">
					<div><img src="http://file.toyhou.se/images/4866102_dx64OYKaIgXgWDf.png" class="float-left mr-1 fr-fil fr-dib" width="300" height="350"></div>
				</div>
			</div>
		</div>
		<div class="col-7">
			<div class="card card-outline-success mb-4" style="height:420px;">
				<div class="card-header bg-success text-white display-3"><i class="fa fa-address-book"></i><strong>&nbsp;Design info<br></strong></div>
				<div class="card-block bg-faded table-responsive">

					<table class="border-0 w-100 mx-auto">
						<tbody>
							<tr>
								<td class="w-50 align-top"><strong>【Height】</strong> content
									<br><strong>【Skin tone】</strong> content
									<br><strong>【Hair Color】</strong> content
									<br><strong>【Demeanor】</strong> content
									<br>
								</td>
								<td class="w-50 align-top"><strong>【Build】</strong> content
									<br><strong>【Eye color】</strong> content
									<br><strong>【Hair style】</strong> content
									<br><strong>【Style】</strong> content
									<br>
								</td>
							</tr>
						</tbody>
					</table>

					<p>Write about extra design stuff here! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris porta condimentum luctus. Curabitur eu tortor et augue ullamcorper imperdiet et vel quam. In finibus ipsum eget consequat placerat. Suspendisse dignissim euismod sem at iaculis. Vivamus porta accumsan justo pulvinar ultricies. Praesent quis suscipit nisl. Integer enim ex, accumsan iaculis condimentum id, finibus a est.</p>
					<br>

					<ul class="mb-0">
						<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
						<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
						<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
						<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
						<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="card card-outline-success mb-4">
	<div class="card-header bg-success text-white display-3"><i class="fa fa-book"></i><strong>&nbsp;Story<br></strong></div>
	<div class="card-block bg-faded">

		<p><img src="http://file.toyhou.se/images/4866102_dx64OYKaIgXgWDf.png" class="float-right rounded ml-1 fr-fir fr-dib" width="200" height="250"></p>

		<p>Give us that juicy backstory! 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>

		<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>
		<br>
		<div class="card card-outline-success mb-4" style="height:200px;">
			<div class="card-header bg-success text-white display-3"><i class="fa fa-bookmark"></i><strong>&nbsp;Story Arc 1<br></strong></div>
			<div class="card-block bg-faded">
				<div>

					<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-success mb-4" style="height:200px;">
			<div class="card-header bg-success text-white display-3"><i class="fa fa-bookmark"></i><strong>&nbsp;Story Arc 2<br></strong></div>
			<div class="card-block bg-faded">
				<div>

					<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-success mb-4" style="height:200px;">
			<div class="card-header bg-success text-white display-3"><i class="fa fa-bookmark"></i><strong>&nbsp;Story Arc 3<br></strong></div>
			<div class="card-block bg-faded">
				<div>

					<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>
</div>
<div class="container mx-auto" style="width:1150px;">
	<div class="row mb-2">
		<div class="col-5">
			<div class="card card-outline-success mb-4">
				<div class="card-header bg-success text-white display-3"><i class="fa fa-bars"></i><strong>&nbsp;Skills<br></strong></div>
				<div class="card-block bg-faded table-responsive">

					<h1 class="text-uppercase"><i class="fa fa-star"></i> Skill 1</h1>

					<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.</p>

					<h1 class="text-uppercase"><i class="fa fa-star"></i> Skill 2</h1>

					<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.</p>

					<h1 class="text-uppercase"><i class="fa fa-star"></i> Skill 3</h1>

					<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.</p>
				</div>
			</div>
		</div>
		<div class="col-7">
			<div class="card card-outline-success mb-4" style="height:430px;">
				<div class="card-header bg-success text-white display-3"><i class="fa fa-users"></i><strong>&nbsp;Relationships<br></strong></div>
				<div class="card-block bg-faded table-responsive">

					<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">
									<strong>【Name】</strong>
									<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">
									<strong>【Name】</strong>
									<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">
									<strong>【Name】</strong>
									<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 class="card card-outline-success mb-4" style="height:350px;">
			<div class="card-header bg-success text-white display-3"><i class="fa fa-info-circle"></i><strong>&nbsp;Triva<br></strong></div>
			<div class="card-block bg-faded table-responsive">

				<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>
				<br>

				<ul class="mb-0">
					<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
					<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
					<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
					<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
					<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
				</ul>
			</div>
		</div>
	</div>
</div>