Splatoon

<!------------
 ⏻ - SPLATOON by watergems
 do not remove credit/claim
 search+replace: fas fa-headphones
 ------------>

<!----- HEADER ----->
<div class="row d-flex align-items-end"><div class="col-md-8">
  <h1 class="display-2 mb-0"><i class="fas fa-headphones pr-3" />Name (Alias)</h1>
  <h1 class="display-4 text-muted font-italic ml-3 mb-0">— Quote!</h1>
</div>
<!--- GEAR | images from Inkipedia, can be replaced with aesthetic/moodboard images --->
<div class="col-md-4 mt-2 text-center text-md-right">
  <img src="https://cdn.wikimg.net/en/splatoonwiki/images/7/70/S2_Gear_Headgear_Marinated_Headphones.png" class="img-thumbnail rounded-circle m-1" style="width:90px;height:90px" />
  <img src="https://cdn.wikimg.net/en/splatoonwiki/images/9/92/S2_Gear_Clothing_Marinated_Top.png" class="img-thumbnail rounded-circle m-1" style="width:90px;height:90px" />
  <img src="https://cdn.wikimg.net/en/splatoonwiki/images/8/84/S2_Gear_Shoes_Marinated_Slip-Ons.png" class="img-thumbnail rounded-circle m-1" style="width:90px;height:90px" />
</div></div>
<hr class="mt-2" />

<!----- BASIC INFO ----->
<div class="row mb-0 mx-auto ml-auto">
<div class="col-md-6"><div class="row">
  <div class="col-md-4 col-5 offset-md-2 font-weight-bold">SPECIES</div>
  <div class="col-md-6 col-7 text-right">Item</div>
<div class="ml-md-auto offset-md-2 col-md-10"><hr class="my-2" /></div>
<div class="col-md-4 col-5 offset-md-2 font-weight-bold">PRONOUNS</div>
  <div class="col-md-6 col-7 text-right">Item</div>
<div class="ml-md-auto offset-md-2 col-md-10"><hr class="my-2" /></div>
<div class="col-md-4 col-5 offset-md-2 font-weight-bold">AGE</div>
  <div class="col-md-6 col-7 text-right">Item</div>
<div class="ml-md-auto offset-md-2 col-md-10"><hr class="my-2" /></div>
<div class="col-md-4 col-5 offset-md-2 font-weight-bold">INK</div>
  <div class="col-md-6 col-7 text-right">Item</div>
<!-- section start -->
<div class="ml-md-auto offset-md-2 col-md-10"><hr class="my-2" /></div>
  <div class="col-md-4 col-5 offset-md-2 font-weight-bold">EYES</div>
  <div class="col-md-6 col-7 text-right">Item</div>
<!-- copy+paste sections above this line -->
<div class="ml-md-auto mx-xs-auto d-md-none col-12"><hr class="my-2" /></div>
</div></div>
<div class="col-md-6"><div class="row">
  <div class="col-md-4 col-5 font-weight-bold">OCCUPATION</div>
  <div class="col-md-6 col-7 text-right">Item</div>
<div class="col-md-10"><hr class="my-2" /></div>
<div class="col-md-4 col-5 font-weight-bold">TEAM</div>
  <div class="col-md-6 col-7 text-right">Item</div>
<div class="col-md-10"><hr class="my-2" /></div>
<div class="col-md-4 col-5 font-weight-bold">WEAPON</div>
  <div class="col-md-6 col-7 text-right">Item</div>
<div class="col-md-10"><hr class="my-2" /></div>
<div class="col-md-4 col-5 font-weight-bold">VOICE</div>
  <div class="col-md-6 col-7 text-right"><a href="/">Item</a></div>
<!-- section start -->
<div class="col-md-10"><hr class="my-2" /></div>
  <div class="col-md-4 col-5 font-weight-bold">THEME</div>
  <div class="col-md-6 col-7 text-right"><a href="/"><i class="fa fa-music pr-1" /> Item</a></div>
<!-- copy+paste above this line -->
</div></div>
</div>
<hr />

<!----- PROFILE ----->
<h1><i class="fas fa-headphones pr-1" /> About</h1>
<div class="text-justify mb-3 mx-1">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id diam vel quam elementum pulvinar etiam non. Accumsan sit amet nulla facilisi morbi. Sed libero enim sed faucibus turpis in eu mi. Arcu non odio euismod lacinia at quis risus. Eget lorem dolor sed viverra. Fames ac turpis egestas sed tempus urna et. Arcu non sodales neque sodales ut etiam sit. Hac habitasse platea dictumst quisque sagittis purus sit amet. Ipsum dolor sit amet consectetur adipiscing. Faucibus et molestie ac feugiat sed lectus vestibulum. Adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna neque. Diam quis enim lobortis scelerisque fermentum dui faucibus in. Praesent elementum facilisis leo vel fringilla est ullamcorper. Blandit cursus risus at ultrices mi tempus imperdiet nulla.</p>
  <p>A erat nam at lectus urna. Accumsan tortor posuere ac ut consequat semper. In pellentesque massa placerat duis ultricies lacus sed turpis. Tincidunt nunc pulvinar sapien et ligula ullamcorper. Magna ac placerat vestibulum lectus mauris ultrices eros. Pulvinar etiam non quam lacus suspendisse faucibus interdum posuere. Sit amet risus nullam eget felis eget. At risus viverra adipiscing at in tellus. Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Donec adipiscing tristique risus nec feugiat in fermentum. Scelerisque viverra mauris in aliquam sem. Morbi tristique senectus et netus et malesuada fames. Convallis aenean et tortor at risus. Eros in cursus turpis massa tincidunt. Laoreet suspendisse interdum consectetur libero id. Hendrerit gravida rutrum quisque non tellus orci ac auctor. Neque convallis a cras semper auctor neque. Blandit aliquam etiam erat velit scelerisque in dictum. Dictum at tempor commodo ullamcorper a.</p>
</div>
<hr />

<div class="row">
<div class="col-md-4 mb-0">
<!----- TRIVIA ----->
<h1><i class="fas fa-headphones pr-1" /> Trivia</h1>
<ul class="pl-4 mb-2">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul><div class="d-md-none w-100"><hr />
</div></div>
<div class="col-md-4 mb-0">
<!----- LIKES ----->
<h1><i class="fas fa-headphones pr-1" /> Likes</h1>
<ul class="pl-4 mb-2">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul><div class="d-lg-none w-100"><hr />
</div></div>
<div class="col-md-4 mb-0">
<!----- DISLIKES ----->
<h1><i class="fas fa-headphones pr-1" /> Dislikes</h1>
<ul class="pl-4 mb-0">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul></div></div>
<hr class="pb-1" />

<!----- AESTHETIC ----->
<!-- hi-res images recommended -->
<div style="background-image:url(https://images.unsplash.com/photo-1538524270287-6704e888cda2);background-size:cover;background-position:center;height:80px;" class="w-100"></div>