okie-doki new

<!--
RULES!! PLEASE READ!

my codes are still crap (dw homie,, same) but,

1. dont delete our credits!
2. if you use a tiny portion and dont credit me thats fine
3. frankensteining my codes is a-okay but credit me somewhere on the page if you use a lot

-->


<div class="p-3" style="background-image:url(https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjczMTc0fQ&fit=crop&h=230&w=320&crop=edges);height:50px"></div>


<div class="card p-3 card-outline-primary" style="border:4px solid #f0f0f0;">      <div/>


<p class="display-4 text-uppercase text-center mb-1" style="font-size: 50px;">NAME || AGE || GENDER</p>

<ul class="nav nav-tabs card-header-tabs row ">
  <li class="col-md-4 mb-1"><a class="btn bg-faded btn-block btn-outline-secondary active" data-toggle="tab" href="#reg1" style="margin: 0px">

basics

</a></li>

  <li class="col-md-4 mb-1"><a class="btn bg-faded btn-block btn-outline-secondary" data-toggle="tab" href="#reg2" style="margin: 0px">
backstory
  </a></li>

  <li class="col-md-4 mb-1"><a class="btn bg-faded btn-block btn-outline-secondary" data-toggle="tab" href="#reg3" style="margin: 0px">
misc
  </a></li>

<div class="tab-content">
  <div class="tab-pane fade active show" id="reg1">
    <div class="card p-3" style="overflow; auto">
      <div class="p-3">
        <div class="container">
      <div class="col-sm">
      <p class="display-4 text-uppercase text-center mb-1" style="font-size: 30px;">BASICS</p>
      </div>
         </div>

      <div class="container">
        <div class="row">
        <!--this is the list-->

        <div class="col-md">
  <ul class="list-group list-group-flush">
  <li class="list-group-item d-flex justify-content-between px-3 py-2" style="border-top:0;">
    <span class="text-uppercase text-muted font-weight-bold">NAME</span>
    content
  </li>
  <li class="list-group-item d-flex justify-content-between px-3 py-2">
    <span class="text-uppercase text-muted font-weight-bold">GENDER</span>
   content
  </li>
  <li class="list-group-item d-flex justify-content-between px-3 py-2">
    <span class="text-uppercase text-muted font-weight-bold">AGE</span>
   content
  </li>
  <li class="list-group-item d-flex justify-content-between px-3 py-2">
    <span class="text-uppercase text-muted font-weight-bold">SPECIES/RACE</span>
   content
  </li>
  <li class="list-group-item d-flex justify-content-between px-3 py-2">
    <span class="text-uppercase text-muted font-weight-bold">MBTI</span>
   content
  </li>
  <li class="list-group-item d-flex justify-content-between px-3 py-2">
    <span class="text-uppercase text-muted font-weight-bold">DEMEANOR</span>
   content
  </li>
  <li class="list-group-item d-flex justify-content-between px-3 py-2">
    <span class="text-uppercase text-muted font-weight-bold">BUILD</span>
   content
  </li>
  <li class="list-group-item d-flex justify-content-between px-3 py-2">
    <span class="text-uppercase text-muted font-weight-bold">ZODIAC</span>
   content
  </li>
  </ul>
  </div>

  <div class="col-sm">
  <div class="card-block" style="background-image: url('https://64.media.tumblr.com/fc3d655579a49a40cd9109a41b3381af/tumblr_oboc9dQqHl1udszxdo2_250.png'); width: auto; height: 300px; display: block"></div>
  </div>

</div>
</div>
  </div>
  </div>
  </div>

  <div class="tab-pane fade" id="reg2">
    <div class="card p-3">
      <div class="p-3">
      <p>This box will get larger as you put more stuff in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla non quam eu gravida. Curabitur condimentum vulputate purus et efficitur. Sed lobortis dui tellus, ac eleifend ligula egestas eu. Integer felis tortor, ornare at metus ut, feugiat pulvinar est. Quisque porta facilisis placerat. Aliquam posuere et purus quis semper. Suspendisse potenti. Donec aliquam at diam eu scelerisque. Aliquam sit amet dui ut augue suscipit bibendum eget et enim. Morbi et mattis risus, a porttitor magna. Morbi pharetra ipsum metus, eu euismod nunc sollicitudin quis.</p>

<br>

<p>Praesent rutrum tortor vitae risus ornare, id facilisis tellus accumsan. Sed non risus diam. Nullam pretium pellentesque elit. Donec blandit aliquam blandit. Aenean ligula ligula, imperdiet vel lobortis vitae, pulvinar a tortor. Nulla ac metus eu odio sollicitudin porttitor et et nulla. Vestibulum elementum tellus et nisi ornare porta. Aenean ullamcorper, eros et consectetur pretium, turpis risus sodales lorem, ac laoreet purus ex id ex. Duis eleifend mi ligula, quis vulputate magna placerat vitae. Vestibulum quis facilisis dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies feugiat erat, eget pharetra arcu.</p>
</div>
</div>
</div>

  <div class="tab-pane fade" id="reg3">
    <div class="card p-3">
      <div class="p-3">
      <div class="container">
        <div class="row">

      <div class="col-sm">
     <iframe src="https://www.youtube.com/embed/vOnwjBpR1Sc" style="height: 300px; width: 500px"></iframe>
     </div>
     <div class="col-sm">
     <span class="pull-right">
     <p style="font-size: 40px; margin: 10px">BEAUTIFUL DEAD</p>
     <br>
     <br>
     <p class="text-muted" style="font-size: 20px; margin: 10px">by Masafumi Takada</p>
     </div>
     </span>
     </div>
     </div>
      <hr class="dashed">
      <p class="text-center display-4" style="margin-bottom: 15px">design notes</p>
      <div class="row">
      <div class="card-block mx-4 mb-4" style="border: 2px solid; margin: 10px; width: 400px; height: auto; overflow: auto; border-radius: 5px">
      <ul class="pull-center" style="font-size: 30px">
      <li style="font-size: 30px">put</li>
      <li style="font-size: 30px">some</li>
      <li style="font-size: 30px">notes</li>
      <li style="font-size: 30px">on</li>
      <li style="font-size: 30px">this</li>
      <li style="font-size: 30px">list</li>
      <li style="font-size: 30px">B)</li>
      <li style="font-size: 30px">god</li>
      <li style="font-size: 30px">smiley</li>
      </ul>
    </div>
    <img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/27566178_2vP_8579481.png?1603146264" style="border: 2px solid; border-radius: 5px; margin: 10px; width: 500px; height: auto"></img>
    </div>

</div>
</div>
</div>
</div>
  </div>

<div class="p-3" style="background-image:url(https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjczMTc0fQ&fit=crop&h=230&w=320&crop=edges);height:50px"></div>


<!-- dont delete the credit! you may be black-listed -->

<span class="text-right"><a href="https://toyhou.se/ibuki-mioda" target="_BLANK"><i class="fas fa-heart"></i></a></span>
  <span class="text-left"><a href="https://toyhou.se/windyharbor" style="font-family:garamond" target="_BLANK"> ➶ </a></span>