[F2U] ♱ UNEVEN
created by:Beelzebunn
Custom ColorsHTMLCharacter
Copy
<!------
[F2U code by Beelzebunn]
TIP!: use CTRL+F [WIN] / CMD+F [MAC] to quickly find the colour and replace it ~
୨୧ BG + Shadow: #000
୨୧ Text, Borders + Dividers: #fff
୨୧ Main Text:#000
୨୧ Accents: #f40202
------>
<!------------------------------------------------------------
୨୧ Background ~
------------------------------------------------------------->
<div class="card p-4" style="
border-radius: 50px 50px 0px 0px;
border: 1px solid #fff;
background-image:url();
background-size:auto;
background-repeat:repeat;
background-attachment:fixed;
">
<!------------------------------------------------------------
୨୧ CHARA IMAGE
chosen image of your oc here ~
------------------------------------------------------------->
<div class="container mb-2" style="
height: 200px;
width: 200px;
border-radius: 80px 80px 0px 0px;
border: 1px solid #fff;
background:url();
background-size:cover;">
</div>
<p class="text-center" style="color:#fff; font-family:monospace; font-size: 8px; margin-top: -24px; z-index:9999; text-shadow: 0px 2px 0px #000, 0px 2px 0px #000, 0px 2px 0px #000">
f.name ✦ age ✦ prn/noun
</p>
<!------------------------------------------------------------
୨୧ Accordian ~
------------------------------------------------------------->
<div class="accordion md-accordion" id="goodbye" role="tablist">
<div>
<div class="p-2 mb-0 bg-transparent" role="tab" id="goodbye1">
<a data-toggle="collapse" data-parent="#goodbye" href="#welcome" aria-expanded="false" aria-controls="goodbye" style="text-decoration:none">
<div class="mb-0 justify-content-center">
<div class="row no-gutters"></div>
<!------------------------------------------------------------
୨୧ ACCORDIAN DECOR
------------------------------------------------------------->
<div class="my-1 mr-2" style="height: 1px; width: 70px; background:#fff; margin-left:10px"></div>
<div class="bg-transparent" style="width:14px"></div>
<p class="text-center"><i class="fas fa-cross fa-beat" style="color:#fff; text-shadow: 0 0 5px #fff; animation-duration:5s;"></i></p>
<div class="bg-transparent" style="width:14px"></div>
<div class="my-1 mx-2" style="height: 1px; width: 70px; background:#fff; margin-auto;"></div>
<!------------------------------------------------------------
୨୧ END OF ACCORDIAN DECOR
------------------------------------------------------------->
</div>
</div>
</a>
</div>
<div id="welcome" class="collapse" role="tabpanel" aria-labelledby="goodbye"
data-parent="#goodbye">
<!------------------------------------------------------------
୨୧ MAIN / INFORMATION
------------------------------------------------------------->
<div class="row justify-content-center">
<div class="col-md-5 p-2 py-3 pb-3" style="background: #000; border: 1px solid #fff">
<div class="col-12" style="height:2px; background: #fff; z-index:auto"></div>
<p class="text-left mx-2 mb-2" style="color:#fff; font-family:monospace; font-size: 12px; z-index: 9999; position:relative; text-shadow: -1px -1px 0px #000, 1px -1px 0px #000, -1px 1px 0px #000;margin-top: -9px;">>://INFORMATION.</p>
<div class="row justify-content-center">
<div class="col-5 text-uppercase mb-3 text-left" style="height:13px; background:#fff; font-size:10px; color:#000; font-family:monospace">name
<p class="text-left" style="color:#fff; font-family:monospace; font-size:9px">
content
</p>
</div>
<div class="bg-transparent" style="width:15px;"></div>
<div class="col-5 text-uppercase text-right mb-3" style="height:13px; background:#fff; font-size:10px; color:#000; font-family:monospace">age
<p class="text-right" style="color:#fff; font-family:monospace; font-size:9px">
age ✧ 00/00/00
</p>
</div>
<div class="col-5 text-uppercase mb-3 text-left" style="height:13px; background:#fff; font-size:10px; color:#000; font-family:monospace">occupation
<p class="text-left" style="color:#fff; font-family:monospace; font-size:9px">
content
</p>
</div>
<div class="bg-transparent" style="width:15px;"></div>
<div class="col-5 text-uppercase text-right mb-3" style="height:13px; background:#fff; font-size:10px; color:#000; font-family:monospace">gender
<p class="text-right" style="color:#fff; font-family:monospace; font-size:9px">
content
</p>
</div>
<div class="col-5 text-uppercase mb-3 text-left" style="height:13px; background:#fff; font-size:10px; color:#000; font-family:monospace">orientation
<p class="text-left" style="color:#fff; font-family:monospace; font-size:9px">
content
</p>
</div>
<div class="bg-transparent" style="width:15px;"></div>
<div class="col-5 text-uppercase text-right mb-3" style="height:13px; background:#fff; font-size:10px; color:#000; font-family:monospace">race
<p class="text-right" style="color:#fff; font-family:monospace; font-size:9px">
or species
</p>
</div>
<div class="col-5 text-uppercase mb-3 text-left" style="height:13px; background:#fff; font-size:10px; color:#000; font-family:monospace">tarot
<p class="text-left" style="color:#fff; font-family:monospace; font-size:9px">
content
</p>
</div>
<div class="bg-transparent" style="width:15px;"></div>
<div class="col-5 text-uppercase text-right mb-4" style="height:13px; background:#fff; font-size:10px; color:#000; font-family:monospace">alignment
<p class="text-right" style="color:#fff; font-family:monospace; font-size:9px">
content
</p>
</div>
</div>
<!------------------------------------------------------------
୨୧ FLAVOUR TEXT
change it to whatever ya want ~
------------------------------------------------------------->
<p class="text-justify text-uppercase" style="color:#fff; font-family:monospace; font-size:7px">
↘↘ my bones break and arch from my skin; like a cacophony of voices reaching for the heavens. pain is something i don't feel and perhaps will never know... even know they call to me from within.
</p>
</div>
<!--------------------INVISI COLUMN ~------------------------>
<div class="bg-transparent" style="width:6px"></div>
<!--------------------INVISI COLUMN END --------------------->
<!------------------------------------------------------------
୨୧ MAIN / ABOUT
------------------------------------------------------------->
<div class="col-md-5 p-2 py-3 pb-3" style="background: #000; border: 1px solid #fff">
<p class="text-right mb-1" style="color:#fff; font-family:monospace; font-size:10px; letter-spacing:3px; text-shadow:0 0 5px #fff">scroll to read</p>
<div class="mr-n2" style="overflow:hidden;">
<div class="mr-n3 mb-3" style="overflow:auto; height: 124px; padding: 0px 6px 0px 6px;overflow-x:hidden;">
<p class="text-justify" style="color:#fff; font-size:10px; font-family:monospace">
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.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>
</div>
</div>
<div class="col-12" style="height:2px; background: #fff; z-index:auto"></div>
<p class="text-right mx-2" style="color:#fff; font-family:monospace; font-size: 12px; z-index: 9999; position:relative; text-shadow: -1px -1px 0px #000, 1px -1px 0px #000, -1px 1px 0px #000;margin-top: -9px;">>://ABOUT.</p>
</div>
</div>
<!--------------------INVISI COLUMN ~------------------------>
<div class="bg-transparent mb-1" style="height:10px"></div>
<!--------------------INVISI COLUMN END --------------------->
<!------------------------------------------------------------
୨୧ QUOTE
: ! : Both Quote + Music are hidden on mobile!
------------------------------------------------------------->
<center>
<div class="col-md-9 hidden-sm-down" style="
height: 100px;
border: 1px solid #fff;
transform:rotate(-1deg);
position: relative;
z-index:auto;
background-image:url();
background-size: auto;
background
background-attachment:fixed;">
<p class="text-center py-5" style="font-family:monospace; font-size:12px; color:#fff; text-shadow:0 0 3px #fff" >
quietude of the highest order
</p>
</div>
</center>
<!------------------------------------------------------------
୨୧ TEEHEE MUSIC !
------------------------------------------------------------->
<center>
<div class="col-md-9 mb-2 hidden-sm-down" style="
height: 100px;
border: 1px solid #fff;
transform:rotate(3deg);
z-index:999;
background-image:url();
background-size: auto;
background-attachment:fixed;">
<p class="text-center py-5" style="font-family:monospace; font-size:12px; color:#fff">
<!------------------------------------------------------------
You can change the text to show the song and artist !
------------------------------------------------------------->
heaven <iframe class="flex-fill" style="height:1em;width:1em;opacity:0;position:absolute;margin-top:6px;z-index:1;" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
src="https://www.youtube.com/embed/VIDEOIDHERE"></iframe><i class="fas fa-compact-disc fa-1x fa-spin" style="color:#fff; text-shadow:0 0 5px #fff; animation-duration:3s"> </i></span></span> are you listening?
</p>
</div>
</center>
<!------------------------------------------------------------
୨୧ Story Mode Activated
------------------------------------------------------------->
<div class="row justify-content-center">
<div class="col-md-6 p-2 mb-2 text-left" style="background:#000; color:#fff; font-size:9px; font-family:monospace; border: 1px solid #fff">
<div class="mr-n2" style="overflow:hidden;">
<div class="mr-n3 mb-2" style="overflow:auto; height: 124px; padding: 0px 6px 0px 6px;overflow-x:hidden;">
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.
<br><br>
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.
<br><br>
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.
</div>
</div>
<!------------------------------------------------------------
୨୧ STORY / Decor
------------------------------------------------------------->
<div class="row" style="margin:auto;">
<div class="col-3">
<p class="text-left" style="color:#fff; font-family:monospace; font-size: 12px:"><i class="fas fa-chevron-down"></i> Scroll to read...</p>
</div>
<div class="col-9" style="background:#fff"></div>
</div>
</div>
<!--------------------INVISI COLUMN ~------------------------>
<div class="bg-transparent mb-1 hidden-sm-down" style="width:10px"></div>
<!--------------------INVISI COLUMN END --------------------->
<!------------------------------------------------------------
୨୧ STORY / Conent warnings + Author note
------------------------------------------------------------->
<div class="col-md-4 p-2 mr-2 mb-2 text-left" style="background:#000; color:#fff; font-family:monospace; font-size:9px; border: 1px solid #fff;">
<h2 class="text-center" style="color:#f40202; font-family:monospace">CWs</h2>
<ul class="text-left" style="list-style-type:none; font-family:monospace; color:#fff; font-size:10px;">
<li><i class="fas fa-chevron-right"></i> Lorem ipsum dolor sit amet.</li>
<li><i class="fas fa-chevron-right"></i> Lorem ipsum dolor sit amet.</li>
<li><i class="fas fa-chevron-right"></i> Lorem ipsum dolor sit amet.</li>
<li><i class="fas fa-chevron-right"></i> Lorem ipsum dolor sit amet.</li>
</ul>
<i class="fas fa-feather fa-fade" style="color:#f40202"></i> <span style="color:#f40202">Author Notes:</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</div>
</div>
<!------------------------------------------------------------
୨୧ TRIVIA / Status Report
------------------------------------------------------------->
<div class="row justify-content-center mb-2" style="margin:auto">
<div class="col-md-5 p-3 text-uppercase" style="background:#000; border:1px solid #fff; font-family:monospace; font-size:10px; color:#fff">
<h2 class="text-left" style="color:#fff; font-family:monospace; text-shadow:4px 0px 0px #f40202, 14px 0 0 #f40202">STATS</h2>
<div class="row">
<div class="col-6 mb-1">
<p class="text-left" style="color:#fff"> Charisma</p>
<div class="w-100 progress mb-2 rounded-0 bg-transparent pb-1" style="height:1px; border: 1px solid #f40202">
<!------ Change the 50% to change coloured size ------------->
<div class="progress-bar" style="width: 50%; background: #f40202;"></div></div>
</div>
<div class="col-6 mb-1">
<p class="text-right" style="color:#fff"> Integrity</p>
<div class="w-100 progress mb-2 rounded-0 bg-transparent pb-1" style="height:1px; border: 1px solid #f40202">
<!------ Change the 50% to change coloured size ------------->
<div class="progress-bar" style="width: 50%; background: #f40202;"></div></div>
</div>
<div class="col-6 mb-1">
<p class="text-left" style="color:#fff"> Temperment</p>
<div class="w-100 progress mb-2 rounded-0 bg-transparent pb-1" style="height:1px; border: 1px solid #f40202">
<!------ Change the 50% to change coloured size ------------->
<div class="progress-bar" style="width: 50%; background: #f40202;"></div></div>
</div>
<div class="col-6 mb-1">
<p class="text-right" style="color:#fff"> Confidence</p>
<div class="w-100 progress mb-2 rounded-0 bg-transparent pb-1" style="height:1px; border: 1px solid #f40202">
<!------ Change the 50% to change coloured size ------------->
<div class="progress-bar" style="width: 50%; background: #f40202;"></div></div>
</div>
<div class="col-6 mb-1">
<p class="text-left" style="color:#fff"> Empathy</p>
<div class="w-100 progress mb-2 rounded-0 bg-transparent pb-1" style="height:1px; border: 1px solid #f40202">
<!------ Change the 50% to change coloured size ------------->
<div class="progress-bar" style="width: 50%; background: #f40202;"></div></div>
</div>
<div class="col-6 mb-1">
<p class="text-right" style="color:#fff"> Patience</p>
<div class="w-100 progress mb-2 rounded-0 bg-transparent pb-1" style="height:1px; border: 1px solid #f40202">
<!------ Change the 50% to change coloured size ------------->
<div class="progress-bar" style="width: 50%; background: #f40202;"></div></div>
</div>
<!------ END OF STATS AREA ------------->
</div>
</div>
<!--------------------INVISI COLUMN ~------------------------>
<div class="bg-transparent mb-1" style="width:10px"></div>
<!--------------------INVISI COLUMN END --------------------->
<!------------------------------------------------------------
୨୧ TRIVIA / LITE TRIVIA
------------------------------------------------------------->
<div class="col-md-5 p-3" style="background:#000; border:1px solid #fff">
<h2 class="text-right" style="color:#fff; font-family:monospace; text-shadow:-4px 0px 0px #f40202, -14px 0 0 #f40202">TRIVA</h2>
<div class="mr-n2" style="overflow:hidden;">
<div class="mr-n3 mb-2" style="overflow:auto; height: 80px; padding: 0px 6px 0px 6px;overflow-x:hidden;">
<ul class="text-left" style="list-style-type:none; color:#fff; padding-left:0; font-family:monospace; font-size:10px">
<li><i class="fas fa-cross" style="text-shadow:0 0 4px #fff"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
<li><i class="fas fa-cross" style="text-shadow:0 0 4px #fff"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
<li><i class="fas fa-cross" style="text-shadow:0 0 4px #fff"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
<li><i class="fas fa-cross" style="text-shadow:0 0 4px #fff"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
<!------ Add more above this line. This will scroll -------->
</ul>
</div>
</div>
</div>
<!------------------------------------------------------------
୨୧ END OF TRIVIA
------------------------------------------------------------->
</div>
<!------------------------------------------------------------
୨୧ DESIGN ROW
------------------------------------------------------------->
<div class="row justify-content-center mb-2">
<div class="col-md-4 p-3" style="background:#000; border: 1px solid #fff; border-radius:20px 0 0 0">
<h2 class="text-center" style="color:#fff; font-family:monospace;text-shadow: 0 0 4px #fff; letter-spacing:3px">Design <i class="fal fa-bow-arrow"></i> Notes</h2>
<div class="mr-n2" style="overflow:hidden;">
<div class="mr-n3 mb-2" style="overflow:auto; height: 200px; padding: 0px 8px 0px 6px;overflow-x:hidden;">
<ul class="text-left" style="list-style-type:none; color:#fff; font-family:monospace; font-size: 11px; padding-left:0">
<li><span class="fa-fade" style="color:#f40202; animation-duration:4s">❥</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<br>
<li><span class="fa-fade" style="color:#f40202; animation-duration:4s">❥</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<br>
<li><span class="fa-fade" style="color:#f40202; animation-duration:4s">❥</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<br>
<li><span class="fa-fade" style="color:#f40202; animation-duration:4s">❥</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<br>
<li><span class="fa-fade" style="color:#f40202; animation-duration:4s">❥</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<br>
<li><span class="fa-fade" style="color:#f40202; animation-duration:4s">❥</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<!------ Add more above this line. This will scroll -------->
</ul>
</div>
</div>
<div class="row justify-content-center text-center">
<div class="col-3" style="color:#fff; font-family:monospace; font-size:10px">
<span style="color:#f40202">Design:</span>
<a href="#" target="_BLANK" style="color:#fff; text-decoration:none"><br>designer</a>
</div>
<div class="col-3" style="color:#fff; font-family:monospace; font-size:10px">
<span style="color:#f40202">Art:</span>
<a href="#" target="_BLANK" style="color:#fff; text-decoration:none"><br>artist</a>
</div>
<div class="col-3" style="color:#fff; font-family:monospace; font-size:10px">
<span style="color:#f40202">Worth:</span><br> $$$
</div>
</div>
</div>
<!--------------------INVISI COLUMN ~------------------------>
<div class="bg-transparent mb-1" style="width:6px"></div>
<!--------------------INVISI COLUMN END --------------------->
<!------------------------------------------------------------
୨୧ CHARACTER IMAGE pt2
------------------------------------------------------------->
<div class="col-md-3" style="
border: 1px solid #fff;
border-radius: 70px 70px 0px 0px;
background-image:url();
height:320px;
background-size:cover;">
<p class="text-center" style="color:#fff; font-family:monospace; font-size:9px; letter-spacing:5px; text-shadow:0 0 4px #fff; margin-top:300px">both containers scroll</p>
</div>
<!--------------------INVISI COLUMN ~------------------------>
<div class="bg-transparent mb-1" style="width:10px"></div>
<!--------------------INVISI COLUMN END --------------------->
<!------------------------------------------------------------
୨୧ DESIGN / MISCS
------------------------------------------------------------->
<div class="col-md-4 p-3" style="background:#000; border: 1px solid #fff; border-radius: 0 0 20px 0">
<h2 class="text-center" style="color:#fff; font-family:monospace;text-shadow: 0 0 4px #fff; letter-spacing:3px">Misc <i class="fal fa-bow-arrow fa-flip-horizontal"></i> Notes</h2>
<ul class="mb-1 text-left" style="list-style-type:none; color:#fff; font-family:monospace; font-size: 12px; padding-left:0">
<li><span style="color:#f40202"><i class="fa-solid fa-ruler-vertical"></i> Height</span> 0'0 <i class="fa-sharp fa-regular fa-sparkle fa-spin" style="text-shadow:0 0 4px #fff; animation-duration:4s"></i> 000cm</li>
<li><span style="color:#f40202"><i class="fa-solid fa-person"></i> Build</span> content</li>
<li><span style="color:#f40202"><i class="fa-solid fa-weight-scale"></i> Weight</span> 000lbs <i class="fa-sharp fa-regular fa-sparkle fa-spin" style="text-shadow:0 0 4px #fff; animation-duration:4s"></i> 000kg</li>
</ul>
<!------------------------------------------------------------
୨୧ DESIGN MISC / NOT OPTS
whats not optional in your design
------------------------------------------------------------->
<div class="row">
<div class="col-7 my-2" style="height:1px; background:#fff; padding-left: 2px"></div>
<div class="col-3 text-right" style="color:#fff; font-family:monospace; font-size:13px; pading-right:0"><span style="color:#f40202">Required</span></div>
<div class="mr-n2" style="overflow:hidden;">
<div class="mr-n3 mb-2" style="overflow:auto; height: 80px; padding: 0px 0px 0px 17px;overflow-x:hidden;">
<ul class="text-left" style="list-style-type:none; color:#fff; font-family:monospace; font-size:9px; padding-left:0">
<li><span style="color:#f40202"><i class="fas fa-xmark"></i></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
<li><span style="color:#f40202"><i class="fas fa-xmark"></i></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
<li><span style="color:#f40202"><i class="fas fa-xmark"></i></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
<!------ Add more above this line. This will scroll -------->
</ul>
</div>
</div>
<!------------------------------------------------------------
୨୧ DESIGN MISCS / OPT
------------------------------------------------------------->
<div class="col-6 text-center" style="color:#fff; font-family:monospace; font-size:13px; pading-right:0">Optionals</div>
<div class="col-6 my-2 pull-right" style="height:1px; background:#fff;"></div>
<div class="mr-n2" style="overflow:hidden;">
<div class="mr-n3 mb-0" style="overflow:auto; height: 70px; padding: 0px 10px 0px 17px;overflow-x:hidden; padding-bottom:0">
<ul class="text-left" style="list-style-type:none; color:#fff; font-family:monospace; font-size:9px; padding-left:0">
<li><span style="color:#f40202"><i class="fas fa-check"></i></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
<li><span style="color:#f40202"><i class="fas fa-check"></i></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
<li><span style="color:#f40202"><i class="fas fa-check"></i></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
<li><span style="color:#f40202"><i class="fas fa-check"></i></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
<!------ Add more above this line. This will scroll -------->
</ul>
</div>
</div>
<!------------------------------------------------------------
୨୧ END OF DESIGN ROW
------------------------------------------------------------->
</div>
</div>
</div>
<!------------------------------------------------------------
୨୧ Credits
please do not remove !
------------------------------------------------------------->
<p class="text-center" style="margin-top:-15px"><a href="/beelzebunn" target="_BLANK" title="code by beel" data-toggle="tooltip" style="color:#fff; font-family:monospace; font-size:9px; text-decoration:none;">✦✦✦</a></p>
<!------------------------------------------------------------
୨୧ END OF PROPER CODE
------------------------------------------------------------->
</div>
</div>
</div>