Relaxed world [Custom]

<div class="container text-white my-3" style="max-width:1100px; font-family: book antiqua, palatino;">
<!-- world name box image -->
 <div class="card p-5 rounded-0" style="background-image:url( imglink ); background-size:cover; background-position: center; height:280px; background-attachment: fixed;">
 <!-- translucent header box -->
  <div class="card bg-faded rounded-0 border-0 mx-auto" style="background-color:rgba(0,0,0,0.5); width:800px; height:280px">
 <!-- header -->
  <p class="m-auto" style="font-size: 65px;">WORLD NAME</p>
  </div>
 </div>
 <div class="row no-gutters mt-3">
<!--tab buttons on left (replace "circle" with an icon name from FontAwesome) -->
	<div class="col-1 pr-1">
	<ul class="nav nav-tabs card-header-tabs row no-gutters">
   <li class="col-12"><a class="btn bg-primary btn-block rounded-0 text-white active" data-toggle="tab" href="#tab1" style="height:85px">
     <i class="fas fa-circle mt-2 mx-auto" style="font-size:50px"></i></a></li>
   <li class="col-12 mt-3"><a class="btn bg-primary btn-block rounded-0 text-white" data-toggle="tab" href="#tab2" style="height:85px">
     <i class="fas fa-circle mt-2 mx-auto" style="font-size:50px"></i></a></li>
   <li class="col-12 mt-3"><a class="btn bg-primary btn-block rounded-0 text-white" data-toggle="tab" href="#tab3" style="height:85px">
     <i class="fas fa-circle mt-2 mx-auto" style="font-size:50px"></i></a></li>
   <li class="col-12 mt-3"><a class="btn bg-primary btn-block rounded-0 text-white" data-toggle="tab" href="#tab4" style="height:85px">
     <i class="fas fa-circle mt-2 mx-auto" style="font-size:50px"></i></a></li>
  </ul>
  <br>
<!-- tagline image box -->
  <div class="card bg-faded rounded-0 border-0 mt-1" style="height:601px; background-image:url( imglink ); background-size:cover; background-position: center;">
 <!-- translucent filter over image -->
   <div class="card bg-faded rounded-0 border-0" style="background-color:rgba(97, 72, 61,0.6); width:85px; height:601px">
 <!-- tagline (try to limit to 8 letters or less, making the font smaller will mess with the text effect) -->
   <p class="m-auto" style="font-size: 75px; line-height: 0.95; text-align:center;">T A G L I N E</p>
   </div>
  </div>
 </div>
 <div class="col-11 pl-2">
  <div class="row no-gutters">
   <div class="col-9">
<!-- tabbed content box -->
    <div class="card bg-faded rounded-0 border-0" style="background-color:#f7f3ed; width:715px; height:370px">
     <div class="tab-content">
<!-- tab 1 - basics -->
      <div class="tab-pane fade active show p-1" id="tab1">
 <!-- header box + text -->
      <p class="card border-0 rounded-0 p-1" style="height:40px; width:200px; font-size:24px; clip-path:polygon(100% 0%,0% 0%,0% 0%,0% 0%,0% 50%,0% 100%,90% 100%); background-color:#61483d"><span class="ml-2">BASICS</span></p>
 <!-- display icon on opposite side -->
      <i class="far fa-circle pull-right" style="font-size:50px; color:#61483d; margin-top:-53px"></i>
 <!-- small quote -->
      <p style="font-size: 20px; color:#61483d; opacity:0.5;"><i>" quick quote in here "</i></p>
       <div class="card bg-faded rounded-0 border-0 mt-2" style="background-color:rgba(0,0,0,0); width:690px; height:305px; color:#61483d; overflow:auto">
 <!-- text -->
       <p style="font-size: 16px;">here you basically put a small summary of the world. what's it about, what do you do here, and why in the heck should you join? all fair questions, so get answering before everyone runs away terrified at your lacking world
       <br> and yes the box scrolls. why wouldn't it? it always scrolls, doesn't it? how dare you question me. this box will always scroll, no matter what happens
       </p>
       </div>
      </div>
<!-- tab 2 - history -->
      <div class="tab-pane fade p-1" id="tab2">
 <!-- display icon on opposite side -->
      <i class="far fa-circle" style="font-size:50px; color:#61483d;"></i>
 <!-- header box + text -->
      <p class="card border-0 rounded-0 p-1 pull-right" style="height:40px; width:200px; font-size:24px; clip-path:polygon(100% 0%,0% 0%,0% 0%,0% 90%,0% 0%,10% 100%,100% 100%); background-color:#61483d; text-align:right"><span class="mr-2">HISTORY</span></p>
       <div class="card bg-faded rounded-0 border-0 mt-2" style="background-color:rgba(0,0,0,0); width:690px; height:305px; color:#61483d; overflow:auto">
 <!-- event 1 header + seperator + text -->
       <p style="font-size: 25px;">Event 1</p>
       <i class="ml-4 mb-2" style="border-top:5px solid #61483d; opacity:0.3; width:250px; margin-top:-33px; border-radius:10px;"></i>
       <a style="font-size: 16px;">now you basically explain the history of the world. you can replace this with something else, like maybe describing locations and such, but it'll be kinda lame since there aren't any images. maybe you could try to add an image if you think it's possible</a>
 <!-- event 2 header + seperator + text -->
       <p style="font-size: 25px;">Event 2</p>
       <i class="ml-4 mb-2" style="border-top:5px solid #61483d; opacity:0.3; width:250px; margin-top:-35px; border-radius:10px;"></i>
       <a style="font-size: 16px;">and then here you basically describe something else that happened, or another location, or whatever you decided to use this section for</a>
 <!-- event 3 header + seperator + text -->
       <p style="font-size: 25px;">Event 3</p>
       <i class="ml-4 mb-2" style="border-top:5px solid #61483d; opacity:0.3; width:250px; margin-top:-18px; border-radius:10px;"></i>
       <a style="font-size: 16px;">also I should probably tell you that the box scrolls. actually yknow what, I should probably just keep putting filler until the box scrolls to demonstrate that the box scrolls and stuff. so idk how's your day going, cus mine's going pretty lamely right now if I'm honest. I mean I'm coding this in rn, and you're reading this rn, so I think we're both doing lame things rn</a>
       </div>
      </div>
<!-- tab 2 - wildlife -->
      <div class="tab-pane fade p-1" id="tab3">
 <!-- header box + text -->
      <p class="card border-0 rounded-0 p-1" style="height:40px; width:200px; font-size:24px; clip-path:polygon(100% 0%,0% 0%,0% 0%,0% 0%,0% 50%,0% 100%,90% 100%); background-color:#61483d"><span class="ml-2">WILDLIFE</span></p>
 <!-- display icon on opposite side -->
      <i class="far fa-circle pull-right" style="font-size:50px; color:#61483d; margin-top:-40px"></i>
      <div class="card bg-faded rounded-0 border-0 mt-3" style="background-color:rgba(0,0,0,0); width:710px; height:305px; color:#61483d; overflow:auto">
       <div class="row no-gutters">
 <!-- creature 1 -->
        <div class="col-4 p-1">
  <!-- image + highlight link -->
        <p class="card mb-1" style="background-image:url( imglink ); background-size:cover; background-position: center; width:215px; height:215px; border:5px solid #61483d">
        <a class="btn btn-outline-primary rounded-0" style="height:215px; border-width:0px" href="linkhere"></a>
        </p>
  <!-- text -->
        <p style="font-size: 25px; text-align:center">NAME</p>
        <a style="font-size: 15px; text-align:center">small little itty bitty description</a>
        </div>
 <!-- creature 2 -->
        <div class="col-4 p-1">
  <!-- image + highlight link -->
        <p class="card mb-1" style="background-image:url( imglink ); background-size:cover; background-position: center; width:215px; height:215px; border:5px solid #61483d;">
        <a class="btn btn-outline-primary rounded-0" style="height:215px; border-width:0px" href="linkhere"></a>
        </p>
  <!-- text -->
        <p style="font-size: 25px; text-align:center">NAME</p>
        <a style="font-size: 15px; text-align:center">you can write more but maybe save that for its page</a>
        </div>
 <!-- creature 3 -->
        <div class="col-4 p-1">
  <!-- image + highlight link -->
        <p class="card mb-1" style="background-image:url( imglink ); background-size:cover; background-position: center; width:215px; height:215px; border:5px solid #61483d;">
        <a class="btn btn-outline-primary rounded-0" style="height:215px; border-width:0px" href="linkhere"></a>
        </p>
  <!-- text -->
        <p style="font-size: 25px; text-align:center">NAME</p>
        <a style="font-size: 15px; text-align:center">otherwise yes box scrolls</a>
        </div>
 <!-- add more creatures above this line -->
       </div>
      </div>
     </div>
<!-- tab 4 - featured pages -->
     <div class="tab-pane fade p-1" id="tab4">
 <!-- display icon on opposite side -->
     <i class="far fa-circle" style="font-size:50px; color:#61483d;"></i>
 <!-- header box + text -->
     <p class="card border-0 rounded-0 p-1 pull-right" style="height:40px; width:200px; font-size:24px; clip-path:polygon(100% 0%,0% 0%,0% 0%,0% 90%,0% 0%,10% 100%,100% 100%); background-color:#61483d; text-align:right"><span class="mr-2">PAGES</span></p>
      <div class="card bg-faded rounded-0 border-0 mt-3" style="background-color:rgba(0,0,0,0); width:710px; height:305px; overflow:auto">
       <div class="row no-gutters">
 <!-- page 1 -->
        <div class="col-4 p-1">
  <!-- image + page name -->
         <div class="card mb-1" style="background-image:url( imglink ); background-size:cover; background-position: center; width:215px; height:135px; border:5px solid #61483d">
         <p class="my-auto" style="font-size: 25px; text-align:center">Page name</p>
         </div>
  <!-- highlight link -->
        <a class="btn btn-outline-primary" style="height:126px; width:206px; border-width:0px; position:absolute; top:8px; left:8px;" href="linkhere"></a>
        </div>
 <!-- page 2 -->
        <div class="col-4 p-1">
  <!-- image + page name -->
         <div class="card mb-1" style="background-image:url( imglink ); background-size:cover; background-position: center; width:215px; height:135px; border:5px solid #61483d">
         <p class="my-auto" style="font-size: 25px; text-align:center">Page name</p>
         </div>
  <!-- highlight link -->
        <a class="btn btn-outline-primary" style="height:126px; width:206px; border-width:0px; position:absolute; top:8px; left:8px;" href="linkhere"></a>
        </div>
 <!-- page 3 -->
        <div class="col-4 p-1">
  <!-- image + page name -->
         <div class="card mb-1" style="background-image:url( imglink ); background-size:cover; background-position: center; width:215px; height:135px; border:5px solid #61483d">
         <p class="my-auto" style="font-size: 25px; text-align:center">Page name</p>
         </div>
  <!-- highlight link -->
        <a class="btn btn-outline-primary" style="height:126px; width:206px; border-width:0px; position:absolute; top:8px; left:8px;" href="linkhere"></a>
        </div>
 <!-- page 4 -->
        <div class="col-4 p-1">
  <!-- image + page name -->
         <div class="card mb-1" style="background-image:url( imglink ); background-size:cover; background-position: center; width:215px; height:135px; border:5px solid #61483d">
         <p class="my-auto" style="font-size: 25px; text-align:center">Page name</p>
         </div>
  <!-- highlight link -->
        <a class="btn btn-outline-primary" style="height:126px; width:206px; border-width:0px; position:absolute; top:8px; left:8px;" href="linkhere"></a>
        </div>
 <!-- page 5 -->
        <div class="col-4 p-1">
  <!-- image + page name -->
         <div class="card mb-1" style="background-image:url( imglink ); background-size:cover; background-position: center; width:215px; height:135px; border:5px solid #61483d">
         <p class="my-auto" style="font-size: 25px; text-align:center">Page name</p>
         </div>
  <!-- highlight link -->
        <a class="btn btn-outline-primary" style="height:126px; width:206px; border-width:0px; position:absolute; top:8px; left:8px;" href="linkhere"></a>
        </div>
 <!-- page 6 -->
        <div class="col-4 p-1">
  <!-- image + page name -->
         <div class="card mb-1" style="background-image:url( imglink ); background-size:cover; background-position: center; width:215px; height:135px; border:5px solid #61483d">
         <p class="my-auto" style="font-size: 25px; text-align:center">Page name</p>
         </div>
  <!-- highlight link -->
        <a class="btn btn-outline-primary" style="height:126px; width:206px; border-width:0px; position:absolute; top:8px; left:8px;" href="linkhere"></a>
        </div>
 <!-- add more pages above this line -->
       </div>
      </div>
     </div>
    </div>
   </div>
  </div>
  <div class="col-3">
<!-- image to the right of tabbed box -->
   <div class="card bg-faded rounded-0 border-0" style="height:370px; background-image:url( imglink ); background-size:cover; background-position: center;">
   </div>
  </div>
 </div>
<!-- fixed image divider -->
 <div class="card my-3 rounded-0" style="background-image:url( imglink ); background-size:cover; background-position: center; height:85px; background-attachment: fixed;">
 </div>
 <div class="row no-gutters">
  <div class="col-4">
 <!-- manager box + header -->
   <div class="card bg-faded rounded-0 border-0" style="background-color:#f7f3ed; height:250px; width:310px">
   <p style="font-size: 30px; color:#61483d; text-align:center"><b>MANAGER</b></p>
  <!-- "shadow" over header text -->
   <i class="ml-5 mb-2" style="border-top:10px solid #61483d; opacity:0.3; width:200px; margin-top:-35px; border-radius:10px;"></i>
  <!-- icon + highlight link -->
   <p class="card rounded-circle mx-auto mb-0" style="background-image:url( imglink ); background-size:cover; background-position: center; width:160px; height:160px; border:5px solid #61483d">
   <a class="btn btn-outline-primary rounded-circle" style="height:160px; border-width:0px" href="linkhere"></a>
   </p>
  <!-- username -->
   <p style="font-size: 25px; text-align:center; color:#61483d;">USERNAME</p>
   </div>
 <!-- staff box + header -->
   <div class="card bg-faded rounded-0 border-0 mt-3" style="background-color:#f7f3ed; height:250px; width:310px">
    <p style="font-size: 30px; color:#61483d; text-align:center"><b>STAFF</b></p>
  <!-- "shadow" over header text -->
    <i class="ml-5 mb-2" style="border-top:10px solid #61483d; opacity:0.3; width:200px; margin-top:-20px; border-radius:10px;"></i>
    <div class="card bg-faded rounded-0 border-0 mt-2 p-1" style="background-color:rgba(0,0,0,0); width:300px; height:305px; color:#61483d; overflow:auto">
     <div class="row no-gutters">
 <!-- staff 1 -->
      <div class="col-6">
  <!-- icon + highlight link -->
      <p class="card rounded-circle mx-auto mb-0" style="background-image:url( imglink ); background-size:cover; background-position: center; width:100px; height:100px; border:3px solid #61483d">
      <a class="btn btn-outline-primary rounded-circle" style="height:100px; border-width:0px" href="linkhere"></a>
      </p>
 <!-- username -->
      <p style="font-size: 20px; text-align:center; color:#61483d;">USERNAME</p>
      </div>
 <!-- staff 2 -->
      <div class="col-6">
  <!-- icon + highlight link -->
      <p class="card rounded-circle mx-auto mb-0" style="background-image:url( imglink ); background-size:cover; background-position: center; width:100px; height:100px; border:3px solid #61483d">
      <a class="btn btn-outline-primary rounded-circle" style="height:100px; border-width:0px" href="linkhere"></a>
      </p>
 <!-- username -->
      <p style="font-size: 20px; text-align:center; color:#61483d;">USERNAME</p>
      </div>
 <!-- staff 3 -->
      <div class="col-6">
  <!-- icon + highlight link -->
      <p class="card rounded-circle mx-auto mb-0" style="background-image:url( imglink ); background-size:cover; background-position: center; width:100px; height:100px; border:3px solid #61483d">
      <a class="btn btn-outline-primary rounded-circle" style="height:100px; border-width:0px" href="linkhere"></a>
      </p>
 <!-- username -->
      <p style="font-size: 20px; text-align:center; color:#61483d;">USERNAME</p>
      </div>
 <!-- staff 4 -->
      <div class="col-6">
  <!-- icon + highlight link -->
      <p class="card rounded-circle mx-auto mb-0" style="background-image:url( imglink ); background-size:cover; background-position: center; width:100px; height:100px; border:3px solid #61483d">
      <a class="btn btn-outline-primary rounded-circle" style="height:100px; border-width:0px" href="linkhere"></a>
      </p>
 <!-- username -->
      <p style="font-size: 20px; text-align:center; color:#61483d;">USERNAME</p>
      </div>
<!-- add more staff above this line -->
     </div>
    </div>
   </div>
  </div>
  <div class="col-8">
<!-- event box + header -->
   <div class="card bg-faded rounded-0 border-0" style="background-color:#f7f3ed; height:516px;">
   <p style="font-size: 50px; color:#61483d; text-align:center"><b>EVENT</b></p>
 <!-- "shadow" over header text -->
   <i class="mx-auto mb-2" style="border-top:13px solid #61483d; opacity:0.3; width:250px; margin-top:-30px; border-radius:10px;"></i>
   <div class="card bg-faded rounded-0 border-0 mt-2 p-1" style="background-color:rgba(0,0,0,0); width:650px; height:360px; color:#61483d; overflow:auto">
 <!-- text -->
    <p style="font-size: 16px;">Small description of an event going on. again you could change this to whatever you want, or even replace this with another image if you know how. basically just describe something happening in the group, or just leave this blank if nothing is happening. up to you
    <br>another paragraph to remind you that this box scrolls. it goes down pretty far, probably way too far for its own good, but maybe you'll need some extra space
    </p>
    </div>
 <!-- more information button + text + highlight link -->
    <div class="card bg-faded rounded-0 border-0 m-auto" style="background-color:#61483d; height:55px; width:300px">
    <p class="my-auto" style="font-size: 30px; text-align:center">Check it out here!</p>
    <a class="btn btn-outline-primary rounded-0" style="height:55px; width:300px; border-width:0px; position:absolute; top:0px; left:0px;" href="linkhere"></a>
    </div>
   </div>
  </div>
 </div>
</div>
</div>
<span class="ml-1"><a style="color:#61483d; font-size:13px" href="https://toyhou.se/MCDogResource">Code by MCDogWarrior</a><a class="pull-right mr-1" style="color:#61483d; font-size:13px" href="https://unsplash.com/">Backgrounds from Unsplash</span></p>
</div>