<div class="card card-block mb-4">

<div class="row justify-content-center no-gutters mb-md-3 mb-0">

<div class="col-lg-4 col-md-6 push-lg-8 mb-3">
<!------ TOP FOCAL IMAGE -- will crop and scale with screen -- focus will be in
top center of image --->
<div style="background-image:url(IMG_URL);"
class="h-100 focalImg">
</div>
</div>
<div class="col-lg-8 pull-lg-4 pr-lg-3">
<div class="d-flex w-100 h-100"><div class="w-100 my-auto">
<!-- TOP BLOCK TITLE -------------------------------->
<h1 class="text-center mb-4">Title Here</h1>

<!-------- BASIC STATS ------------------->

<div class="row no-gutters">
<div class="col-md-2 col-5 st">
Called
</div>
<div class="col-md-4 col-7 sc">
content
</div>

<div class="col-md-2 col-5 st">

Age
</div>
<div class="col-md-4 col-7 sc">
content
</div>

<div class="col-md-2 col-5 st">

Gender
</div>
<div class="col-md-4 col-7 sc">
content
</div>

<div class="col-md-2 col-5 st">

Pronouns
</div>
<div class="col-md-4 col-7 sc">
content
</div>

<div class="col-md-2 col-5 st">

Race
</div>
<div class="col-md-4 col-7 sc">
content
</div>

<div class="col-md-2 col-5 st">

Role
</div>
<div class="col-md-4 col-7 sc">
content
</div>
<!-- PERSONALITY STATS -- use fas for filled in -- fal for open -->
<div class="col-md-2 col-5 st">
 Kindness
</div>
<div class="col-md-4 col-7 sc">
<i class="fas fa-circle fa-fw" />
<i class="fas fa-circle fa-fw" />
<i class="fal fa-circle fa-fw" />
<i class="fal fa-circle fa-fw" />
<i class="fal fa-circle fa-fw" />
</div>

<div class="col-md-2 col-5 st">

Patience
</div>
<div class="col-md-4 col-7 sc">
<i class="fas fa-circle fa-fw" />
<i class="fas fa-circle fa-fw" />
<i class="fal fa-circle fa-fw" />
<i class="fal fa-circle fa-fw" />
<i class="fal fa-circle fa-fw" />
</div>

<div class="col-md-2 col-5 st">

Temper
</div>
<div class="col-md-4 col-7 sc">
<i class="fas fa-circle fa-fw" />
<i class="fas fa-circle fa-fw" />
<i class="fal fa-circle fa-fw" />
<i class="fal fa-circle fa-fw" />
<i class="fal fa-circle fa-fw" />
</div>

<div class="col-md-2 col-5 st">

Optimism
</div>
<div class="col-md-4 col-7 sc">
<i class="fas fa-circle fa-fw" />
<i class="fas fa-circle fa-fw" />
<i class="fal fa-circle fa-fw" />
<i class="fal fa-circle fa-fw" />
<i class="fal fa-circle fa-fw" />
</div>

<div class="col-md-2 col-5 st">

Courage
</div>
<div class="col-md-4 col-7 sc">
<i class="fas fa-circle fa-fw" />
<i class="fas fa-circle fa-fw" />
<i class="fal fa-circle fa-fw" />
<i class="fal fa-circle fa-fw" />
<i class="fal fa-circle fa-fw" />
</div>

<div class="col-md-2 col-5 st">

Integrity
</div>
<div class="col-md-4 col-7 sc">
<i class="fas fa-circle fa-fw" />
 <i class="fas fa-circle fa-fw" />
<i class="fal fa-circle fa-fw" />
<i class="fal fa-circle fa-fw" />
<i class="fal fa-circle fa-fw" />
</div>

<div class="col-md-2 col-5 st">

Intellect
</div>
<div class="col-md-4 col-7 sc">
<i class="fas fa-circle fa-fw" />
<i class="fas fa-circle fa-fw" />
<i class="fal fa-circle fa-fw" />
<i class="fal fa-circle fa-fw" />
<i class="fal fa-circle fa-fw" />
</div>

<div class="col-md-2 col-5 st">

Humour
</div>
<div class="col-md-4 col-7 sc">
<i class="fas fa-circle fa-fw" />
<i class="fas fa-circle fa-fw" />
<i class="fal fa-circle fa-fw" />
<i class="fal fa-circle fa-fw" />
<i class="fal fa-circle fa-fw" />
</div>

<div class="col-md-2 col-5 st">

Theme
</div>
<div class="col-md-4 col-7 sc">
<!-- link to a song here ----------------------->
<a href="SONG_LINK" target="_BLANK">
Link a song
</a>
</div>

<div class="col-md-2 col-5 st">

HTML
</div>
<div class="col-md-4 col-7 sc">
<!-- CODING CREDIT -- leave this --------------->
@Pinky
</div>

<div class="col-md-2 col-5 st">

Owner
</div>
<div class="col-md-4 col-7 sc">
<!-- OWNER CREDIT -- ping yourself here -------->
@/your username
</div>

<div class="col-md-2 col-5 st">

Designer
</div>
<div class="col-md-4 col-7 sc">
<!-- DESIGNER CREDIT --link to design here ------->
 <a href="LINK_HERE" target="_BLANK">designer link</a>
</div>
</div>
</div></div></div>
</div>

<div class="row no-gutters"><div class="col-12">

<!-- OPTIONAL PAGE DOLL -- you'll want a small image for the intro -- just erase
if you dont wanna use -->
<img src="IMG_URL"
class="float-left pr-md-2 hidden-sm-down" style="max-height: 300px;">

<!-- INTRO CONTENT -------------------------------------------------->

<p>Write a small intro for your character here. Think like the summary on the
back of a book - 1 to 2 paragraphs to get your audience interested!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas nunc id
purus venenatis, ac mollis augue bibendum. Maecenas non tortor neque. Vestibulum at
metus egestas, feugiat lorem in, eleifend ligula. Nullam at pulvinar dolor.
Suspendisse mollis imperdiet ipsum. Ut tincidunt, mi vitae sagittis sollicitudin,
leo mauris aliquet odio, at congue lectus libero sit amet diam. Morbi vitae finibus
arcu. Nulla congue nisi quis mollis consectetur. Vivamus lobortis ornare
pellentesque. Etiam ultricies, nulla sed consectetur dapibus, leo sapien lobortis
quam, ac luctus neque lorem varius risus. Proin aliquet purus in erat consectetur
lacinia. Maecenas egestas vehicula neque, sed cursus libero fringilla et. Vivamus
ac neque at turpis scelerisque faucibus. Praesent in efficitur felis.</p>

</div></div>
</div>
<div class="card card-block mb-4">
<!--- PERSONALITY SECTION ------------------------------>
<h1 class="text-center mb-4">Personality</h1>
<div class="row mb-4">
<div class="col-lg-6 mb-3">
<h4 class="text-muted"><i class="fal fa-check-circle fa-fw" /> Trait
Name</h4>
<p>List one of their key personality traits & then given a small summary
about it. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas nunc
id purus venenatis, ac mollis augue bibendum. Maecenas non tortor neque. Vestibulum
at metus egestas, feugiat lorem in, eleifend ligula.</p>
</div>
<div class="col-lg-6 mb-3">
<h4 class="text-muted"><i class="fal fa-check-circle fa-fw" /> Trait
Name</h4>
<p>List one of their key personality traits & then given a small summary
about it. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas nunc
id purus venenatis, ac mollis augue bibendum. Maecenas non tortor neque. Vestibulum
at metus egestas, feugiat lorem in, eleifend ligula.</p>
</div>
<div class="col-lg-6 mb-3">
<h4 class="text-muted"><i class="fal fa-check-circle fa-fw" /> Trait
Name</h4>
<p>List one of their key personality traits & then given a small summary
about it. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas nunc
id purus venenatis, ac mollis augue bibendum. Maecenas non tortor neque. Vestibulum
at metus egestas, feugiat lorem in, eleifend ligula.</p>
</div>
<div class="col-lg-6 mb-3">
<h4 class="text-muted"><i class="fal fa-check-circle fa-fw" /> Trait
Name</h4>
 <p>List one of their key personality traits & then given a small summary
about it. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas nunc
id purus venenatis, ac mollis augue bibendum. Maecenas non tortor neque. Vestibulum
at metus egestas, feugiat lorem in, eleifend ligula.</p>
</div>
</div>
<div class="row">
<div class="col-lg-6 mb-3">
<!--- LIKES BLOCK ------------------------------>
<h1 class="text-center mb-3">Likes</h1>

<h4 class="text-muted"><i class="fal fa-heart fa-fw" /> Name Here</h4>

<p>List some things they like and then give further details about what it
is/why they like it.</p>

<h4 class="text-muted"><i class="fal fa-heart fa-fw" /> Name Here</h4>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas nunc
id purus venenatis, ac mollis augue bibendum.</p>

<h4 class="text-muted"><i class="fal fa-heart fa-fw" /> Name Here</h4>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas nunc
id purus venenatis, ac mollis augue bibendum.</p>

</div>
<div class="col-lg-6">
<!--- DISLIKES BLOCK ------------------------------>
<h1 class="text-center mb-3">Dislikes</h1>

<h4 class="text-muted"><i class="fal fa-times-circle fa-fw" /> Name

Here</h4>
<p>List some things they dislike and then give further details about what
it is/why they dislike it. </p>

<h4 class="text-muted"><i class="fal fa-times-circle fa-fw" /> Name

Here</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas nunc
id purus venenatis, ac mollis augue bibendum.</p>

<h4 class="text-muted"><i class="fal fa-times-circle fa-fw" /> Name

Here</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas nunc
id purus venenatis, ac mollis augue bibendum.</p>

</div>
</div>
</div>
<div class="card card-block mb-4">
<!--- MOODBOARD SECTION ------------------------------>
<h1 class="text-center mb-4">Moodboard</h1>
<!------------ images will resize/scale with screen -- focus will be in the
CENTER of the image ---->
<div class="row no-gutters mb-4">
<div class="col-md-5 mb-md-0 mb-2">
<!----- taller left image --------------------------->
<div style="background-image:url('IMG_URL');"
class="mood-lg h-100"></div>

</div>
<div class="col-md-7 pl-md-2">
 <div class="row no-gutters">

<!---- grid of images to the right --------------->

<div class="col-6 pr-1 mb-2">
<div style="background-image:url('IMG_URL');"
class="mood-sm"></div>
</div>
<div class="col-6 pl-1 mb-2">
<div style="background-image:url('IMG_URL');"
class="mood-sm"></div>
</div>
<div class="col-6 pr-1">
<div style="background-image:url('IMG_URL');"
class="mood-sm"></div>
</div>
<div class="col-6 pl-1">
<div style="background-image:url('IMG_URL');"
class="mood-sm"></div>
</div>

</div>
</div>
</div>
<!--- TRIVIA SECTION ------------------------------>
<div class="row no-gutters"><div class="col-12">
<h1 class="text-center mb-4">Trivia</h1>
<ul class="mb-0 modal-open">
<li class="mb-1">
Write some trivia facts here....
</li>
<li class="mb-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>
<li class="mb-1">
Ut egestas nunc id purus venenatis, ac mollis augue bibendum. Maecenas non
tortor neque.
</li>
<li class="mb-1">
Vestibulum at metus egestas, feugiat lorem in, eleifend ligula. Nullam at
pulvinar dolor.
</li>
<li class="mb-1">
Nullam at pulvinar dolor. Suspendisse mollis imperdiet ipsum.
</li>
<li class="mb-1">
Vivamus lobortis ornare pellentesque. Etiam ultricies, nulla sed consectetur
dapibus, leo sapien lobortis quam, ac luctus neque lorem varius risus.
</li>

</ul>
</div></div>
</div>
<div class="card card-block mb-4">
<!--- ABOUT SECTION ------------------------------>
<h1 class="text-center mb-4">About</h1>
<div class="row no-gutters"><div class="col-12">

<!-- OPTIONAL FOCAL IMAGE -- just erase if you dont wanna use -->
<img src="IMG_URL"
 class="rounded float-right ml-3 mb-1 hidden-sm-down" style="max-height: 400px;">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas nunc id
purus venenatis, ac mollis augue bibendum. Maecenas non tortor neque. Vestibulum at
metus egestas, feugiat lorem in, eleifend ligula. Nullam at pulvinar dolor.
Suspendisse mollis imperdiet ipsum. Ut tincidunt, mi vitae sagittis sollicitudin,
leo mauris aliquet odio, at congue lectus libero sit amet diam. Morbi vitae finibus
arcu. Nulla congue nisi quis mollis consectetur. Vivamus lobortis ornare
pellentesque. Etiam ultricies, nulla sed consectetur dapibus, leo sapien lobortis
quam, ac luctus neque lorem varius risus. Proin aliquet purus in erat consectetur
lacinia. Maecenas egestas vehicula neque, sed cursus libero fringilla et. Vivamus
ac neque at turpis scelerisque faucibus. Praesent in efficitur felis.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas nunc id
purus venenatis, ac mollis augue bibendum. Maecenas non tortor neque. Vestibulum at
metus egestas, feugiat lorem in, eleifend ligula. Nullam at pulvinar dolor.
Suspendisse mollis imperdiet ipsum. Ut tincidunt, mi vitae sagittis sollicitudin,
leo mauris aliquet odio, at congue lectus libero sit amet diam. Morbi vitae finibus
arcu. Nulla congue nisi quis mollis consectetur. Vivamus lobortis ornare
pellentesque. Etiam ultricies, nulla sed consectetur dapibus, leo sapien lobortis
quam, ac luctus neque lorem varius risus. Proin aliquet purus in erat consectetur
lacinia. Maecenas egestas vehicula neque, sed cursus libero fringilla et. Vivamus
ac neque at turpis scelerisque faucibus. Praesent in efficitur felis.</p>

<h4 class="text-muted"><i class="fal fa-bookmark fa-fw" /> Subheader</h4>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas nunc id
purus venenatis, ac mollis augue bibendum. Maecenas non tortor neque. Vestibulum at
metus egestas, feugiat lorem in, eleifend ligula. Nullam at pulvinar dolor.
Suspendisse mollis imperdiet ipsum. Ut tincidunt, mi vitae sagittis sollicitudin,
leo mauris aliquet odio, at congue lectus libero sit amet diam. Morbi vitae finibus
arcu. Nulla congue nisi quis mollis consectetur. Vivamus lobortis ornare
pellentesque. Etiam ultricies, nulla sed consectetur dapibus, leo sapien lobortis
quam, ac luctus neque lorem varius risus. Proin aliquet purus in erat consectetur
lacinia. Maecenas egestas vehicula neque, sed cursus libero fringilla et. Vivamus
ac neque at turpis scelerisque faucibus. Praesent in efficitur felis.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas nunc id
purus venenatis, ac mollis augue bibendum. Maecenas non tortor neque. Vestibulum at
metus egestas, feugiat lorem in, eleifend ligula. Nullam at pulvinar dolor.
Suspendisse mollis imperdiet ipsum. Ut tincidunt, mi vitae sagittis sollicitudin,
leo mauris aliquet odio, at congue lectus libero sit amet diam. Morbi vitae finibus
arcu. Nulla congue nisi quis mollis consectetur. Vivamus lobortis ornare
pellentesque. Etiam ultricies, nulla sed consectetur dapibus, leo sapien lobortis
quam, ac luctus neque lorem varius risus. Proin aliquet purus in erat consectetur
lacinia. Maecenas egestas vehicula neque, sed cursus libero fringilla et. Vivamus
ac neque at turpis scelerisque faucibus. Praesent in efficitur felis.</p>

<h4 class="text-muted"><i class="fal fa-bookmark fa-fw" /> Subheader</h4>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas nunc id
purus venenatis, ac mollis augue bibendum. Maecenas non tortor neque. Vestibulum at
metus egestas, feugiat lorem in, eleifend ligula. Nullam at pulvinar dolor.
Suspendisse mollis imperdiet ipsum. Ut tincidunt, mi vitae sagittis sollicitudin,
leo mauris aliquet odio, at congue lectus libero sit amet diam. Morbi vitae finibus
arcu. Nulla congue nisi quis mollis consectetur. Vivamus lobortis ornare
pellentesque. Etiam ultricies, nulla sed consectetur dapibus, leo sapien lobortis
quam, ac luctus neque lorem varius risus. Proin aliquet purus in erat consectetur
lacinia. Maecenas egestas vehicula neque, sed cursus libero fringilla et. Vivamus
ac neque at turpis scelerisque faucibus. Praesent in efficitur felis.</p>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas nunc id
purus venenatis, ac mollis augue bibendum. Maecenas non tortor neque. Vestibulum at
metus egestas, feugiat lorem in, eleifend ligula. Nullam at pulvinar dolor.
Suspendisse mollis imperdiet ipsum. Ut tincidunt, mi vitae sagittis sollicitudin,
leo mauris aliquet odio, at congue lectus libero sit amet diam. Morbi vitae finibus
arcu. Nulla congue nisi quis mollis consectetur. Vivamus lobortis ornare
pellentesque. Etiam ultricies, nulla sed consectetur dapibus, leo sapien lobortis
quam, ac luctus neque lorem varius risus. Proin aliquet purus in erat consectetur
lacinia. Maecenas egestas vehicula neque, sed cursus libero fringilla et. Vivamus
ac neque at turpis scelerisque faucibus. Praesent in efficitur felis.</p>

</div> </div>
</div>
<div class="card card-block mb-4">
<!--- LINKS SECTION ------------------------------>
<h1 class="text-center mb-4">Links</h1>
<div class="row text-center">
<!--------- character -------------->
<div class="col-md-4 mb-2">
<img src="IMG_URL"
class="d-block mx-auto rounded mb-1" style="max-height: 200px;">
<h2><a href="CHARACTER_LINK"> Name</a></h2>

<p class="mb-1"><i>relationship</i></p>
<!----- number of hearts represents relationship strength ---->
<p>
<i class="fas fa-heart fa-fw"></i>
<i class="fas fa-heart fa-fw"></i>
<i class="fas fa-heart fa-fw"></i>
<i class="fas fa-heart fa-fw"></i>
<i class="fas fa-heart fa-fw"></i>
</p>
</div>
<!--------- character -------------->
<div class="col-md-4 mb-2">
<img src="IMG_URL"
class="d-block mx-auto rounded mb-1" style="max-height: 200px;">
<h2><a href="CHARACTER_LINK">Name</a></h2>

<p class="mb-1"><i>relationship</i></p>
<p>
<i class="fas fa-heart fa-fw"></i>
<i class="fas fa-heart fa-fw"></i>
<i class="fas fa-heart fa-fw"></i>
</p>
</div>
<!--------- character -------------->
<div class="col-md-4 mb-2">
<img src="IMG_URL"
class="d-block mx-auto rounded mb-1" style="max-height: 200px;">
<h2><a href="CHARACTER_LINK">Name</a></h2>

<p class="mb-1"><i>relationship</i></p>
<p>
<i class="fas fa-heart fa-fw"></i>
<i class="fas fa-heart fa-fw"></i>
</p>
</div>
 </div>
</div>