Key
created by:clowniicat
Mixed ColorsHTMLCharacter
Copy
<!--==========================================
CODE BY CLOWNIICAT ON TOYHOUSE
DO NOT STEAL/REMOVE CREDIT
IMPORTANT: have WYSIWYG off!! it probably will break if you have it on, and its difficult to edit with it
====================================================
Please read my TOS here, it'd be nice if you leave a comment saying you read it:
[ https://toyhou.se/~bulletins/1459193.tos-rules ]
Support me here:
[ https://ko-fi.com/onionx2 ]
====================================================
If you need a code editor with live preview use this:
[ https://th.circlejourney.net/# ]
If you want to change the icons, find more here:
[ https://fontawesome.com/search ]
====================================================
Palette to change colours!!
select the colour and press Ctrl+F to replace it
(if you're on mobile, in the code editor select the color you want to change, press the 3 dots to the right and press "find")
Accent colour--------#ff88a7
Everything else is bootstrap so good luck
changing that to custom colour if you want to
==========================================-->
<div class="p-3 card bg-faded text-muted" style="border-radius:20px">
<div class="row no-gutters">
<!--================================
LEFT SIDE
================================-->
<div class="col-lg-4 pr-lg-1 pr-0 mb-lg-0 mb-2">
<div class="card p-3 text-center text-uppercase" style="min-height:600px;border-radius:20px;position:sticky;top:0">
<!--================================
IMAGE
================================-->
<img src="https://via.placeholder.com/500/ececec" class="img-thumbnail rounded-circle p-2 bg-transparent mx-lg-0 mx-auto mb-3" style="max-width:250px;max-height:250px">
<!--================================
STATS
edit the width percentage to modify them
================================-->
<div>
<div class="mb-2">
<b>INTELLIGENCE</b>
<div class="progress mt-2 card bg-faded"><div class="progress-bar"
style="background-color:#ff88a7;
;width:50%
"
></div></div>
</div>
<div class="mb-2">
<b>CHARISMA</b>
<div class="progress mt-2 card bg-faded"><div class="progress-bar"
style="background-color:#ff88a7;
;width:50%
"
></div></div>
</div>
<div class="mb-2">
<b>EMPATHY</b>
<div class="progress mt-2 card bg-faded"><div class="progress-bar"
style="background-color:#ff88a7;
;width:50%
"
></div></div>
</div>
<div class="mb-2">
<b>HUMOUR</b>
<div class="progress mt-2 card bg-faded"><div class="progress-bar"
style="background-color:#ff88a7;
;width:50%
"
></div></div>
</div>
<div class="mb-2">
<b>PATIENCE</b>
<div class="progress mt-2 card bg-faded"><div class="progress-bar"
style="background-color:#ff88a7;
;width:50%
"
></div></div>
</div>
<div class="mb-2">
<b>HONESTY</b>
<div class="progress mt-2 card bg-faded"><div class="progress-bar"
style="background-color:#ff88a7;
;width:50%
"
></div></div>
</div>
</div>
<!--================================
END OF STATS
================================-->
<!--================================
CREDIT, DO NOT REMOVE
================================-->
<a href="https://toyhou.se/clowniicat" class="text-reset mt-1">
<i class="fas fa-star faded"></i>
</a>
<!--================================
END OF CREDIT
================================-->
</div>
<!--================================
END OF LEFT SIDE
================================-->
</div>
<!--================================
RIGHT SIDE
================================-->
<div class="col-lg-8 px-lg-1 px-0">
<!--================================
ABOUT SECTION
================================-->
<div class="card p-3" style="border-radius:20px">
<div class="row no-gutters">
<div class="col-12 mb-3">
<p style="font-size:30px;font-family:georgia,serif;font-style:italic;color:#ff88a7">
<i class="fas fa-heart"></i> "QUOTE OR SOMETHING"
</p>
</div>
<div class="col-sm-6 row no-gutters">
<!--================================
GENERAL INFO STUFF RIGHT SIDE
================================-->
<div class="col-6">
<b>FULL NAME</b>
</div>
<div class="col-6">
content
</div>
<div class="col-6">
<b>AGE</b>
</div>
<div class="col-6">
content
</div>
<div class="col-6">
<b>HEIGHT</b>
</div>
<div class="col-6">
content
</div>
<div class="col-6">
<b>WEIGHT</b>
</div>
<div class="col-6">
content
</div>
<div class="col-6">
<b>SPECIES</b>
</div>
<div class="col-6">
content
</div>
</div>
<div class="col-sm-6 row no-gutters">
<!--================================
GENERAL INFO LEFT SIDE
================================-->
<div class="col-6">
<b>GENDER</b>
</div>
<div class="col-6">
content
</div>
<div class="col-6">
<b>ORIENTATION</b>
</div>
<div class="col-6">
content
</div>
<div class="col-6">
<b>PRONOUNS</b>
</div>
<div class="col-6">
content
</div>
<div class="col-6">
<b>CREATOR</b>
</div>
<div class="col-6">
<a href="CREATOR_LINK" style="color:#ff88a7">
creator
</a>
</div>
<div class="col-6">
<b>DESIGNER</b>
</div>
<div class="col-6">
<a href="DESIGNER_LINK" style="color:#ff88a7">
designer
</a>
</div>
</div>
<div class="col-12 mt-3">
<!--================================
WRITE A DESCRIPTION ABOUT YOUR CHARACTER IDK
================================-->
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>
<!--================================
END OF ABOUT SECTION
================================-->
</div>
<!--================================
STORY SECTION
================================-->
<div class="card p-3 mt-2" style="border-radius:20px">
<div class="row no-gutters">
<div class="col-12 mb-3">
<p style="font-size:30px;font-family:georgia,serif;color:#ff88a7">
<i class="fas fa-heart"></i> STORY
</p>
</div>
<!--================================
SUBHEADER TITLE
================================-->
<div class="col-12 row no-gutters">
<div class="col-auto faded" style="font-size:20px;color:#ff88a7">
<i class="far fa-bookmark"></i>
SUBHEADER
</div>
<div class="col mx-2">
<hr style="border-style:dashed;border-color:#ff88a7" class="faded">
</div>
</div>
<div class="col-12 mb-3">
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>
<!--================================
SUBHEADER TITLE 2
================================-->
<div class="col-12 row no-gutters">
<div class="col-auto faded" style="font-size:20px;color:#ff88a7">
<i class="far fa-bookmark"></i>
SUBHEADER
</div>
<div class="col mx-2">
<hr style="border-style:dashed;border-color:#ff88a7" class="faded">
</div>
</div>
<div class="col-12 mb-3">
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>
<!--================================
END OF STORY SECTION
================================-->
</div>
<!--================================
DESIGN SECTION
================================-->
<div class="card p-3 mt-2" style="border-radius:20px">
<div class="row no-gutters">
<div class="col-12 mb-3">
<p style="font-size:30px;font-family:georgia,serif;color:#ff88a7">
<i class="fas fa-heart"></i> DESIGN
</p>
</div>
<div class="col-12 mb-2">
<div class="img-thumbnail bg-transparent p-2 w-100" style="border-radius:20px">
<!--================================
REFERENCE SHEET
================================-->
<div style="height:300px;background-position:center;background-size:cover;border-radius:15px;
;background-image:url('https://via.placeholder.com/1500/ececec')"
></div>
</div>
</div>
<div class="col-12">
<b style="font-size:25px" class="text-uppercase">
DESIGN NOTES
</b>
<!--================================
DESIGN NOTES
================================-->
<ul class="fa-ul mt-2">
<li><span class="fa-li"><i class="fa-solid fa-chevron-right"></i></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>
<li><span class="fa-li"><i class="fa-solid fa-chevron-right"></i></span>
Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</li>
<li><span class="fa-li"><i class="fa-solid fa-chevron-right"></i></span>
Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.
</li>
<li><span class="fa-li"><i class="fa-solid fa-chevron-right"></i></span>
Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</li>
</ul>
</div>
<div class="col-12">
<div class="row no-gutters">
<!--================================
PALETTE
put in the title="#HEXCODE" the same
colour and a description of where the
colour is used, example:
title="#ff88a7 hair & clothes"
================================-->
<div class="col p-1">
<div class="p-2 tooltipster" style="background-color:#ff88a7;border-radius:20px" data-toggle="tooltip"
title="#HEXCODE"
></div>
</div>
<div class="col p-1">
<div class="p-2 tooltipster" style="background-color:#ff88a7;border-radius:20px" data-toggle="tooltip"
title="#HEXCODE"
></div>
</div>
<div class="col p-1">
<div class="p-2 tooltipster" style="background-color:#ff88a7;border-radius:20px" data-toggle="tooltip"
title="#HEXCODE"
></div>
</div>
<div class="col p-1">
<div class="p-2 tooltipster" style="background-color:#ff88a7;border-radius:20px" data-toggle="tooltip"
title="#HEXCODE"
></div>
</div>
<div class="col p-1">
<div class="p-2 tooltipster" style="background-color:#ff88a7;border-radius:20px" data-toggle="tooltip"
title="#HEXCODE"
></div>
</div>
</div>
</div>
</div>
<!--================================
END OF DESIGN SECTION
================================-->
</div>
<!--================================
MOODBOARD SECTION
================================-->
<div class="card p-3 mt-2" style="border-radius:20px">
<div class="row no-gutters">
<div class="col-12 mb-3">
<p style="font-size:30px;font-family:georgia,serif;color:#ff88a7">
<i class="fas fa-heart"></i> MOODBOARD
</p>
</div>
<div class="col-12">
<div style="overflow:hidden;border-radius:20px;height:450px">
<!--================================
ROW 1
================================-->
<div class="row no-gutters">
<div style="background-image:url('https://images.unsplash.com/photo-1490750967868-88aa4486c946?auto=format&fit=crop&q=80&w=2340&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');height:150px;background-size:cover;background-position:center" class="col-4"></div>
<div style="background-image:url('https://images.unsplash.com/photo-1519378058457-4c29a0a2efac?auto=format&fit=crop&q=80&w=2204&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');height:150px;background-size:cover;background-position:center" class="col-4"></div>
<div style="background-image:url('https://images.unsplash.com/photo-1460039230329-eb070fc6c77c?auto=format&fit=crop&q=80&w=2235&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');height:150px;background-size:cover;background-position:center" class="col-4"></div>
</div>
<!--================================
ROW 2
================================-->
<div class="row no-gutters">
<div style="background-image:url('https://images.unsplash.com/photo-1582794543139-8ac9cb0f7b11?auto=format&fit=crop&q=80&w=2250&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');height:150px;background-size:cover;background-position:center" class="col-4"></div>
<div style="background-image:url('https://images.unsplash.com/photo-1613539246066-78db6ec4ff0f?auto=format&fit=crop&q=80&w=2186&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');height:150px;background-size:cover;background-position:center" class="col-4"></div>
<div style="background-image:url('https://images.unsplash.com/photo-1424384309529-4f05c2349657?auto=format&fit=crop&q=80&w=2187&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');height:150px;background-size:cover;background-position:center" class="col-4"></div>
</div>
<!--================================
ROW 3
================================-->
<div class="row no-gutters">
<div style="background-image:url('https://images.unsplash.com/photo-1488928741225-2aaf732c96cc?auto=format&fit=crop&q=80&w=2340&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');height:150px;background-size:cover;background-position:center" class="col-4"></div>
<div style="background-image:url('https://images.unsplash.com/photo-1492950103599-127d2be251b7?auto=format&fit=crop&q=80&w=2220&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');height:150px;background-size:cover;background-position:center" class="col-4"></div>
<div style="background-image:url('https://images.unsplash.com/photo-1600647993560-11a92e039466?auto=format&fit=crop&q=80&w=2187&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');height:150px;background-size:cover;background-position:center" class="col-4"></div>
</div>
</div>
</div>
</div>
<!--================================
END OF MOODBOARD SECTION
================================-->
</div>
<!--================================
LINKS/RELATIONSHIPS SECTION
================================-->
<div class="card p-3 mt-2" style="border-radius:20px">
<div class="row no-gutters">
<div class="col-12 mb-3">
<p style="font-size:30px;font-family:georgia,serif;color:#ff88a7">
<i class="fas fa-heart"></i> LINKS
</p>
</div>
<div class="col-12">
<!--================================
RELATIONSHIP 1
================================-->
<div class="row no-gutters mb-2">
<div class="col-sm-4">
<!--================================
ICON
================================-->
<img src="https://via.placeholder.com/500/ececec" class="img-thumbnail rounded-circle p-2 bg-transparent mx-lg-0 mx-auto mb-3">
</div>
<div class="col-sm-8 pl-2">
<!--================================
CHARACTER LINK & RELATION
================================-->
<a href="CHARACTER_LINK" class="text-reset" style="font-size:17px">
<b>NAME</b> (relation)
</a>
<!--================================
RELATIONSHIP DESCRIPTION
================================-->
<div style="height:150px;overflow:auto">
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>
</div>
<!--================================
END OF RELATIONSHIP 1
================================-->
<!--================================
RELATIONSHIP 2
================================-->
<div class="row no-gutters mb-2">
<div class="col-sm-4">
<!--================================
ICON
================================-->
<img src="https://via.placeholder.com/500/ececec" class="img-thumbnail rounded-circle p-2 bg-transparent mx-lg-0 mx-auto mb-3">
</div>
<div class="col-sm-8 pl-2">
<!--================================
CHARACTER LINK & RELATION
================================-->
<a href="CHARACTER_LINK" class="text-reset" style="font-size:17px">
<b>NAME</b> (relation)
</a>
<!--================================
RELATIONSHIP DESCRIPTION
================================-->
<div style="height:150px;overflow:auto">
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>
</div>
<!--================================
END OF RELATIONSHIP 2
================================-->
<!--================================
RELATIONSHIP 3
================================-->
<div class="row no-gutters mb-2">
<div class="col-sm-4">
<!--================================
ICON
================================-->
<img src="https://via.placeholder.com/500/ececec" class="img-thumbnail rounded-circle p-2 bg-transparent mx-lg-0 mx-auto mb-3">
</div>
<div class="col-sm-8 pl-2">
<!--================================
CHARACTER LINK & RELATION
================================-->
<a href="CHARACTER_LINK" class="text-reset" style="font-size:17px">
<b>NAME</b> (relation)
</a>
<!--================================
RELATIONSHIP DESCRIPTION
================================-->
<div style="height:150px;overflow:auto">
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>
</div>
<!--================================
END OF RELATIONSHIP 3
================================-->
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
</div>
</div>
<!--================================
END OF LINKS/RELATIONSHIPS SECTION
================================-->
</div>
<!--================================
TRIVIA SECTION
================================-->
<div class="card p-3 mt-2" style="border-radius:20px">
<div class="row no-gutters">
<div class="col-12 mb-3">
<p style="font-size:30px;font-family:georgia,serif;color:#ff88a7">
<i class="fas fa-heart"></i> TRIVIA
</p>
</div>
<div class="col-12">
<ul class="fa-ul">
<li><span class="fa-li"><i class="fa-solid fa-chevron-right"></i></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>
<!--================================
ADD LIKE, A PAGEDOLL HERE
================================-->
<img src="https://via.placeholder.com/150x200/ececec" style="float:right;height:200px;width:150px" class="d-none d-sm-block">
<li><span class="fa-li"><i class="fa-solid fa-chevron-right"></i></span>
Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</li>
<li><span class="fa-li"><i class="fa-solid fa-chevron-right"></i></span>
Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.
</li>
<li><span class="fa-li"><i class="fa-solid fa-chevron-right"></i></span>
Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</li>
<li><span class="fa-li"><i class="fa-solid fa-chevron-right"></i></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>
<li><span class="fa-li"><i class="fa-solid fa-chevron-right"></i></span>
Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</li>
</ul>
</div>
</div>
<!--================================
END OF TRIVIA SECTION
================================-->
</div>
<!--================================
PERSONALITY SECTION
================================-->
<div class="card p-3 mt-2" style="border-radius:20px">
<div class="row no-gutters">
<div class="col-12 mb-3">
<p style="font-size:30px;font-family:georgia,serif;color:#ff88a7">
<i class="fas fa-heart"></i> PERSONALITY
</p>
</div>
<div class="col-12">
<!--================================
JUST WRITE ABOUT IT HERE
================================-->
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>
<!--================================
END OF PERSONALITY SECTION
================================-->
</div>
<!--================================
LIKES & DISLIKES SECTION
================================-->
<div class="row no-gutters">
<!--================================
LIKES SECTION
================================-->
<div class="col-sm-6 pr-sm-1 pr-0">
<div class="card p-3 mt-2" style="border-radius:20px">
<div class="row no-gutters">
<div class="col-12 mb-3">
<p style="font-size:30px;font-family:georgia,serif;color:#ff88a7">
<i class="fas fa-heart"></i> LIKES
</p>
</div>
<div class="col-12" style="height:250px;overflow:auto">
<ul class="fa-ul">
<li><span class="fa-li"><i class="fa-solid fa-chevron-right"></i></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>
<li><span class="fa-li"><i class="fa-solid fa-chevron-right"></i></span>
Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</li>
<li><span class="fa-li"><i class="fa-solid fa-chevron-right"></i></span>
Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.
</li>
<li><span class="fa-li"><i class="fa-solid fa-chevron-right"></i></span>
Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</li>
</ul>
</div>
</div>
</div>
<!--================================
END OF LIKES SECTION
================================-->
</div>
<!--================================
DISLIKES SECTION
================================-->
<div class="col-sm-6 pl-sm-1 pl-0">
<div class="card p-3 mt-2" style="border-radius:20px">
<div class="row no-gutters">
<div class="col-12 mb-3">
<p style="font-size:30px;font-family:georgia,serif;color:#ff88a7">
<i class="fas fa-heart"></i> DISLIKES
</p>
</div>
<div class="col-12" style="height:250px;overflow:auto">
<ul class="fa-ul">
<li><span class="fa-li"><i class="fa-solid fa-chevron-right"></i></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>
<li><span class="fa-li"><i class="fa-solid fa-chevron-right"></i></span>
Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</li>
<li><span class="fa-li"><i class="fa-solid fa-chevron-right"></i></span>
Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.
</li>
<li><span class="fa-li"><i class="fa-solid fa-chevron-right"></i></span>
Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</li>
</ul>
</div>
</div>
</div>
<!--================================
END OF DISLIKES SECTION
================================-->
</div>
<!--================================
END OF LIKES & DISLIKES SECTION
================================-->
</div>
<!--================================
END OF RIGHT SIDE
================================-->
</div>
</div>
</div>
<!--================================================================
CODE END!!!
you BINGUS
================================================================-->