Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div class="container-fluid my-1" style="color:#ffffff;width:1150px;">
- <!-- main card -->
- <div class="card bg-faded rounded-0 border-0 p-1" style="background-color:#361425; border-top-left-radius:25px; border-bottom-left-radius:25px; border-top-right-radius:25px; border-bottom-right-radius:25px;">
- <div class="row no-gutters">
- <div class="col-4">
- <!-- left card -->
- <div class="card bg-faded rounded-0 border-0 p-1" style="background-color:#a23646; border-top-left-radius:20px; border-bottom-left-radius:20px; height:550px">
- <!-- trivia card (translucent) -->
- <div class="card bg-faded rounded-0 border-0 p-1" style="background-color:rgba(247,219,210,0.15); border-top-left-radius:15px; height:220px; overflow:auto">
- <!-- header -->
- <p class="text-white" style="font-size: 18px; text-align: center; letter-spacing: 1px;">Trivia</p>
- <!-- list -->
- <ul class="mt-3 text-white" style="font-size: 16px;">
- <li>trivia about</li>
- <li>the character</li>
- <li>that you think</li>
- <li>might be important</li>
- <li>to note</li>
- </ul>
- </div>
- <!-- personality card (translucent) -->
- <div class="card bg-faded rounded-0 border-0 p-1 mt-1" style="background-color:rgba(247,219,210,0.15); border-bottom-left-radius:15px; height:320px; overflow:auto">
- <!-- header -->
- <p class="text-white" style="font-size: 18px; text-align: center; letter-spacing: 1px;">Personality</p>
- <!-- text -->
- <p class="text-white" style="text-align: left; font-size: 15px;">Basic character description. Yknow, personality. What are they like, what would they do in certain situations. Blah blah yes</p>
- <a class="text-white" style="text-align: left; font-size: 15px;">I'm gonna let you in on a little secret. I need you to promise you won't tell anyone... alright. I'll tell you. The box scrolls. I know I know it's surprising, but it's true. Please don't tell anyone about this</p>
- </div>
- </div>
- </div>
- <div class="col-4">
- <!-- middle card -->
- <div class="card bg-faded rounded-0 border-0 p-1" style="background-color:rgba(0,0,0,0); height:550px">
- <!-- circle pfp picture -->
- <div class="card mx-auto rounded-circle mb-2 mt-2" style="background-image:url( IMGLINK ); background-size:cover; background-position: center; height:190px; width:190px;
- border:2px solid #a23646;">
- </div>
- <!-- icons besides the pfp -->
- <!-- (left icon) -->
- <a style="position:absolute; top:75px; left:20px; font-size:50px; color:#a23646"><i class="fas fa-square"></i> </a>
- <!-- (right icon) -->
- <a style="position:absolute; top:75px; right:20px; font-size:50px; color:#a23646"><i class="fas fa-square"></i> </a>
- <!-- character name -->
- <p class="text-white my-1" style="font-size: 25px; text-align: center; letter-spacing: 1px;">NAME</p>
- <div class="card bg-faded rounded-0 border-0 p-1 mt-2" style="background-color:rgba(0,0,0,0); height:283px; overflow:auto">
- <!-- text -->
- <p class="text-white" style="text-align: justify; font-size: 15px;">Summary of character. Basically explain their role to a story and stuff in here. If they don't have a story, then I guess describe whatever doesn't fit in the other boxes</p>
- <a class="text-white" style="text-align: justify; font-size: 15px;">You remember our secret, right? Yknow the one about... the box scrolling. You remember that, right? Yeah uh, keep remembering that. It'll prove useful</p>
- </div>
- </div>
- </div>
- <div class="col-4">
- <!-- right card -->
- <div class="card bg-faded rounded-0 border-0 p-1" style="background-color:#a23646; border-top-right-radius:20px; border-bottom-right-radius:20px; height:550px">
- <!-- history card (translucent) -->
- <div class="card bg-faded rounded-0 border-0 p-1 mb-1" style="background-color:rgba(247,219,210,0.15); border-top-right-radius:15px; height:320px; overflow:auto">
- <!-- header -->
- <p class="text-white" style="font-size: 18px; text-align: center; letter-spacing: 1px;">History</p>
- <!-- text -->
- <p class="text-white" style="text-align: left; font-size: 15px;">Or story. Or some other thing you want to replace this header with. You can change it or keep it. If you keep it, then write about the character's backstory and/or what they do in the story they're in. If you do change it, then you should already know what to write</p>
- <a class="text-white" style="text-align: left; font-size: 15px;">Alright. I need you to repeat the secret to me again. Go ahead. Yes, brilliant. The box scrolls. I'm glad you remembered that</p>
- </div>
- <!-- hobbies card (translucent) -->
- <div class="card bg-faded rounded-0 border-0 p-1" style="background-color:rgba(247,219,210,0.15); border-bottom-right-radius:15px; height:220px; overflow:auto">
- <!-- header -->
- <p class="text-white" style="font-size: 18px; text-align: center; letter-spacing: 1px;">Hobbies</p>
- <!-- list -->
- <ul class="mt-3 text-white" style="font-size: 16px;">
- <li>things that</li>
- <li>the character</li>
- <li>likes to do</li>
- <li>but you can change</li>
- <li>this if you want</li>
- </ul>
- </div>
- </div>
- </div>
- </div>
- <!-- icon at the top left corner -->
- <a style="position:absolute; top:-30px; left:-20px; font-size:65px"><i class="fas fa-square text-white"></i> </a>
- <!-- credit (DO NOT REMOVE/ALTER) -->
- <p style="text-align: right; position:absolute; bottom:-25px; right:-5px; font-size:65px"><span style="font-size: 9px;">Code by <a style="color:#edc5b2" href="https://toyhou.se/MCDogResource" id="">MCDogWarrior</a></span></p>
- </div>
- </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement