CUSTOM COLORS:
<!---
POUNCE (CC) / by cati/dogboy
NOTES
accent: #FFF
bg color 1 (mint): #16DBC2
bg color 2 (pink): #FF68BE
(use ctrl+f + replace for accent replacement)
mobile friendly + custom colors! ✔✔✔
RULES & DISCLAIMERS
- fav/comment if using pls!
- not wysiwyg friendly so please turn that off!
- feel free to edit/frakenstein/etc if you feel, just pls dont remove my credit!!
- have a nice day!!
--->
<div class="container" style="max-width:800px;background:none;">
<div class="row">
<div class="col-lg-3">
<!--- focus image --->
<div class="card my-2" style="background:url('https://pbs.twimg.com/media/Etw8FLDVIAIu_qu?format=jpg&name=small');height:380px;background-size:cover;background-position:center;border-radius:20px;"></div>
<!--- info --->
<div class="row no-gutters">
<div class="col-6">
<div class="card" style="background-color:#16DBC2;height:100px;border:0px;border-radius:20px 0px 0px 0px;">
<span data-toggle="tooltip" title="AGE/BIRTHDAY" class="mx-auto my-auto"><i class="far fa-calendar-alt" style="font-size:35px;color:#FFF;"></i></span>
</div>
</div>
<div class="col-6">
<div class="card" style="background-color:#FF68BE;height:100px;border:0px;border-radius:0px 20px 0px 0px;">
<span data-toggle="tooltip" title="HEIGHT" class="mx-auto my-auto"><i class="far fa-ruler" style="font-size:35px;color:#FFF;"></i></span>
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-6">
<div class="card" style="background-color:#FF68BE;height:100px;border:0px;border-radius:0px 0px 0px 20px;">
<span data-toggle="tooltip" title="GENDER/PROUNOUNS" class="mx-auto my-auto"><i class="far fa-venus-mars" style="font-size:35px;color:#FFF;"></i></span>
</div>
</div>
<div class="col-6">
<div class="card" style="background-color:#16DBC2;height:100px;border:0px;border-radius:0px 0px 20px 0px;">
<span data-toggle="tooltip" title="VALUE" class="mx-auto my-auto"><i class="far fa-dollar-sign" style="font-size:35px;color:#FFF;"></i></span>
</div>
</div>
</div>
</div>
<div class="col-lg-9">
<!--- intro --->
<div class="card m-2" style="background-color:#FF68BE;border-radius:20px;">
<div class="card m-2 p-4 text-center" style="height:220px;font-size:12px;border-radius:20px;letter-spacing:0.06em;opacity:90%;overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate est ex, et ullamcorper lectus facilisis ac. Nam posuere dapibus leo, ac dignissim arcu sodales eu. Nunc maximus aliquet ipsum, in blandit turpis consectetur eget. Nam non ante eu lacus luctus vestibulum ut vel lorem.
<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate est ex, et ullamcorper lectus facilisis ac. Nam posuere dapibus leo, ac dignissim arcu sodales eu. Nunc maximus aliquet ipsum, in blandit turpis consectetur eget. Nam non ante eu lacus luctus vestibulum ut vel lorem. Donec ac scelerisque arcu, et dictum felis.
</div>
</div>
<!--- quote --->
<div class="card mx-2" style="background-color:#16DBC2;border-radius:20px;height:60px;">
<p class="text-center font-italic my-auto" style="letter-spacing:1px;color:#FFF;font-size:21px;font-weight:300;">
<i class="fas fa-quote-left" style="color:#FFF" />
Quote here!
<i class="fas fa-quote-right" style="color:#FFF" /></p>
</div>
<div class="row no-gutters">
<div class="col-lg-9">
<div class="card m-2" style="background-color:#FF68BE;border-radius:20px;">
<!--- history/personality/etc --->
<div class="card m-2 py-3 px-2 p-3" style="height:255px;font-size:12px;border-radius:20px;letter-spacing:0.06em;opacity:90%;overflow:auto;">
<b class="text-center" style="font-size:14px;">BACKSTORY</b>
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate est ex, et ullamcorper lectus facilisis ac. Nam posuere dapibus leo, ac dignissim arcu sodales eu. Nunc maximus aliquet ipsum, in blandit turpis consectetur eget. Nam non ante eu lacus luctus vestibulum ut vel lorem. Donec ac scelerisque arcu, et dictum felis. Morbi imperdiet justo vitae purus lacinia, vitae gravida risus sodales. Nullam mollis sem justo, in commodo lectus mollis et. Nullam tincidunt rutrum varius. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec placerat dui a volutpat vestibulum.
<br><br>Sed porta quis lacus et sodales. Vestibulum vehicula tortor ex, vitae convallis diam luctus sed. Suspendisse risus diam, lobortis ut malesuada non, gravida quis orci. Nulla interdum ipsum eu fringilla feugiat. Nullam accumsan feugiat mi ac tincidunt. Etiam accumsan enim erat, nec gravida turpis venenatis sit amet.</p>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="card m-2" style="background-color:#16DBC2;height:125px;border-radius:20px;">
<!--- music player, replace the "URLHERE" with the ending code of any youtube video you'd like --->
<span class="mx-auto my-auto"><iframe class="flex-fill" style="height:3em;width:3em;opacity:0;position:absolute;z-index:1;" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
src="https://www.youtube.com/embed/URLHERE"></iframe><i class="far fa-play-circle fa-4x" style="color:#FFF;"></i></span>
</div>
<!--- stamps --->
<img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/2497c61b-f0f3-4c79-9511-4f94b4fb8ff1/dd0e67b-c41175d2-ce7e-4020-a119-115e91a7a526.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvMjQ5N2M2MWItZjBmMy00Yzc5LTk1MTEtNGY5NGI0ZmI4ZmYxXC9kZDBlNjdiLWM0MTE3NWQyLWNlN2UtNDAyMC1hMTE5LTExNWU5MWE3YTUyNi5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.frude1I5ufVdT4P_ZE2rBSNJdW4GoBIVHRNltL-OYp0" class="mx-auto d-flex hidden-sm-down">
<img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/2497c61b-f0f3-4c79-9511-4f94b4fb8ff1/dd0e67b-c41175d2-ce7e-4020-a119-115e91a7a526.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvMjQ5N2M2MWItZjBmMy00Yzc5LTk1MTEtNGY5NGI0ZmI4ZmYxXC9kZDBlNjdiLWM0MTE3NWQyLWNlN2UtNDAyMC1hMTE5LTExNWU5MWE3YTUyNi5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.frude1I5ufVdT4P_ZE2rBSNJdW4GoBIVHRNltL-OYp0" class="mx-auto d-flex mt-2 hidden-sm-down">
</div>
</div>
</div>
</div>
<!--- credits, dont remove pls! --->
<div class="text-right text-muted" style="font-size:0.6em;letter-spacing:4px;">
<a href="9939051" class="text-muted">code by cati <i class="fad fa-rainbow"></i></span></a>
</div>
</div>
IMAGES:
<!---
POUNCE (IMGS) / by cati/dogboy
NOTES
accent: #FFF
(use ctrl+f + replace for accent replacement)
mobile friendly! ✔✔✔
RULES & DISCLAIMERS
- fav/comment if using pls!
- not wysiwyg friendly so please turn that off!
- feel free to edit/frakenstein/etc if you feel, just pls dont remove my credit!!
- have a nice day!!
--->
<div class="container" style="max-width:800px;background:none;">
<div class="row">
<div class="col-lg-3">
<!--- focus image --->
<div class="card my-2" style="background:url('https://pbs.twimg.com/media/Etw8FLDVIAIu_qu?format=jpg&name=small');height:380px;background-size:cover;background-position:center;border-radius:20px;"></div>
<!--- info --->
<div class="row no-gutters">
<div class="col-6">
<div class="card" style="background:url('https://images.unsplash.com/photo-1524678714210-9917a6c619c2?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1049&q=80');background-position:center;background-size:cover;height:100px;border:0px;border-radius:20px 0px 0px 0px;">
<span data-toggle="tooltip" title="AGE/BIRTHDAY" class="mx-auto my-auto"><i class="far fa-calendar-alt" style="font-size:35px;color:#FFF;"></i></span>
</div>
</div>
<div class="col-6">
<div class="card" style="background:url('https://images.unsplash.com/photo-1542662565-7e4b66bae529?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=282&q=80');background-position:center;background-size:cover;height:100px;border:0px;border-radius:0px 20px 0px 0px;">
<span data-toggle="tooltip" title="HEIGHT" class="mx-auto my-auto"><i class="far fa-ruler" style="font-size:35px;color:#FFF;"></i></span>
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-6">
<div class="card" style="background:url('https://images.unsplash.com/photo-1556905055-8f358a7a47b2?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80');background-position:center;background-size:cover;height:100px;border:0px;border-radius:0px 0px 0px 20px;">
<span data-toggle="tooltip" title="GENDER/PROUNOUNS" class="mx-auto my-auto"><i class="far fa-venus-mars" style="font-size:35px;color:#FFF;"></i></span>
</div>
</div>
<div class="col-6">
<div class="card" style="background:url('https://images.unsplash.com/photo-1561414927-6d86591d0c4f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=966&q=80');background-position:center;background-size:cover;height:100px;border:0px;border-radius:0px 0px 20px 0px;">
<span data-toggle="tooltip" title="VALUE" class="mx-auto my-auto"><i class="far fa-dollar-sign" style="font-size:35px;color:#FFF;"></i></span>
</div>
</div>
</div>
</div>
<div class="col-lg-9">
<!--- intro --->
<div class="card m-2" style="background:url('https://images.unsplash.com/photo-1610135206707-0f03e4800631?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80');background-size:cover;background-position:center;border-radius:20px;">
<div class="card m-2 p-4 text-center" style="height:220px;font-size:12px;border-radius:20px;letter-spacing:0.06em;opacity:90%;overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate est ex, et ullamcorper lectus facilisis ac. Nam posuere dapibus leo, ac dignissim arcu sodales eu. Nunc maximus aliquet ipsum, in blandit turpis consectetur eget. Nam non ante eu lacus luctus vestibulum ut vel lorem.
<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate est ex, et ullamcorper lectus facilisis ac. Nam posuere dapibus leo, ac dignissim arcu sodales eu. Nunc maximus aliquet ipsum, in blandit turpis consectetur eget. Nam non ante eu lacus luctus vestibulum ut vel lorem. Donec ac scelerisque arcu, et dictum felis.
</div>
</div>
<!--- quote --->
<div class="card mx-2" style="background:url('https://images.unsplash.com/photo-1513151233558-d860c5398176?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80');background-size:cover;background-position:center;border-radius:20px;height:60px;">
<p class="text-center font-italic my-auto" style="letter-spacing:1px;color:#FFF;font-size:21px;font-weight:300;">
<i class="fas fa-quote-left" style="color:#FFF" />
Quote here!
<i class="fas fa-quote-right" style="color:#FFF" /></p>
</div>
<div class="row no-gutters">
<div class="col-lg-9">
<div class="card m-2" style="background:url('https://images.unsplash.com/photo-1610135206707-0f03e4800631?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80');background-size:cover;background-position:center;border-radius:20px;">
<!--- history/personality/etc --->
<div class="card m-2 py-3 px-2 p-3" style="height:255px;font-size:12px;border-radius:20px;letter-spacing:0.06em;opacity:90%;overflow:auto;">
<b class="text-center" style="font-size:14px;">BACKSTORY</b>
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate est ex, et ullamcorper lectus facilisis ac. Nam posuere dapibus leo, ac dignissim arcu sodales eu. Nunc maximus aliquet ipsum, in blandit turpis consectetur eget. Nam non ante eu lacus luctus vestibulum ut vel lorem. Donec ac scelerisque arcu, et dictum felis. Morbi imperdiet justo vitae purus lacinia, vitae gravida risus sodales. Nullam mollis sem justo, in commodo lectus mollis et. Nullam tincidunt rutrum varius. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec placerat dui a volutpat vestibulum.
<br><br>Sed porta quis lacus et sodales. Vestibulum vehicula tortor ex, vitae convallis diam luctus sed. Suspendisse risus diam, lobortis ut malesuada non, gravida quis orci. Nulla interdum ipsum eu fringilla feugiat. Nullam accumsan feugiat mi ac tincidunt. Etiam accumsan enim erat, nec gravida turpis venenatis sit amet.</p>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="card m-2" style="background:url('https://images.unsplash.com/photo-1513151233558-d860c5398176?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80');height:125px;background-size:cover;background-position:center;border-radius:20px;">
<!--- music player, replace the "URLHERE" with the ending code of any youtube video you'd like --->
<span class="mx-auto my-auto"><iframe class="flex-fill" style="height:3em;width:3em;opacity:0;position:absolute;z-index:1;" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
src="https://www.youtube.com/embed/URLHERE"></iframe><i class="far fa-play-circle fa-4x" style="color:#FFF;"></i></span>
</div>
<!--- stamps --->
<img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/2497c61b-f0f3-4c79-9511-4f94b4fb8ff1/dd0e67b-c41175d2-ce7e-4020-a119-115e91a7a526.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvMjQ5N2M2MWItZjBmMy00Yzc5LTk1MTEtNGY5NGI0ZmI4ZmYxXC9kZDBlNjdiLWM0MTE3NWQyLWNlN2UtNDAyMC1hMTE5LTExNWU5MWE3YTUyNi5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.frude1I5ufVdT4P_ZE2rBSNJdW4GoBIVHRNltL-OYp0" class="mx-auto d-flex hidden-sm-down">
<img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/2497c61b-f0f3-4c79-9511-4f94b4fb8ff1/dd0e67b-c41175d2-ce7e-4020-a119-115e91a7a526.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvMjQ5N2M2MWItZjBmMy00Yzc5LTk1MTEtNGY5NGI0ZmI4ZmYxXC9kZDBlNjdiLWM0MTE3NWQyLWNlN2UtNDAyMC1hMTE5LTExNWU5MWE3YTUyNi5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.frude1I5ufVdT4P_ZE2rBSNJdW4GoBIVHRNltL-OYp0" class="mx-auto d-flex mt-2 hidden-sm-down">
</div>
</div>
</div>
</div>
<!--- credits, dont remove pls! --->
<div class="text-center text-muted" style="font-size:0.7em;letter-spacing:10px;">
<a href="URLHERE" class="text-muted"><span data-toggle="tooltip" title="background images by [ARTIST]"><i class="fas fa-image"></i></span></a> /
<a href="9939051" class="text-muted"><span data-toggle="tooltip" title="code by cati"><i class="fad fa-rainbow"></i></span></a>
</div>
</div>
