Profile
<!--- non-wysiwyg only please x.x --->
<div class="justify-content-center bg-muted">
<div class="container p-2">
<!---divider--->
<div class="container m-2 text-info">
<p style="text-align: center;"><span style="font-family: ariel; font-size:20px;">Content Warnings (Scroll)</span>
<!-------------->
</p>
</div>
<!---end divider--->
<!--- to add more, just copy and paste as many of these lines as needed below the line underneath this section --->
<div class="container m-2">
<div class="justify-content-center">
<div class="row no-gutters mx-auto" style="height:30px;overflow-y:scroll">
<span class="badge badge-pill bg-secondary m-2" style="max-width:100px;">this</span>
<!--- ( ^ this is one line btw) --->
<span class="badge badge-pill bg-secondary m-2" style="max-width:100px;">will</span>
<span class="badge badge-pill bg-secondary m-2" style="max-width:100px;">scroll</span>
<span class="badge badge-pill bg-secondary m-2" style="max-width:100px;">content</span>
<span class="badge badge-pill bg-secondary m-2" style="max-width:100px;">content</span>
<span class="badge badge-pill bg-secondary m-2" style="max-width:100px;">content</span>
</div>
</div>
<!--- add more above this line --->
<!--- end cw section --->
<!--- story section 1 --->
<!--- header --->
<div class="mt-2" style="font-family:arial black; text-align:center;">
<h1><span class="m-3" style="font-size:20px;">Backstory</span></h1>
</div>
<!--- header end --->
<div class="card bg-dark progress-bar-striped progress-bar-animated">
</div>
<div class="container" style="height:200px;overflow-y:scroll;">
<!--- section 1 --->
<div class="text-secondary mt-2">
<p style="text-align: left;"><span style="font-family: ariel; font-size: 20px;"><b>Origins</b></span></p>
</div>
<hr>
<p style="text-align: justify;"><span style="font-family: trebuchet; font-size: 15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<!--- section 2 --->
<div class="text-secondary mt-2">
<p style="text-align: right;"><span style="font-family: ariel; font-size: 20px;"><b>Section Two</b></span></p>
</div>
<p style="text-align: justify;"><span style="font-family: trebuchet; font-size: 15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<!--- section 3 --->
<div class="text-secondary mt-2">
<p style="text-align: left;"><span style="font-family: ariel; font-size: 20px;"><b>Section Three</b></span></p>
<hr></div>
<p style="text-align: justify;"><span style="font-family: trebuchet; font-size: 15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<!--- add more sections above here --->
</div>
<!--- end story section 1 --->
</div>
</div>
</div>
</div>