<!---
MOBIUS / by cati/dogboy
NOTES
backgrounds: #146917
borders: #000 (black)
accent: #FFF (white)
fontawesome icon: fas fa-skull
(use ctrl+f + replace for accent/icon 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!!
--->
<!--- background pattern --->
<div class="container-fluid" style="background:url(https://64.media.tumblr.com/tumblr_m0g3ybPmqj1r6uwfxo5_100.png) repeat fixed;border-radius:5px;max-width:850px;padding-top:20px;padding-bottom:20px;padding-left:30px;padding-right:30px;margin:30px auto 5px;box-shadow:3px 3px 0px #000;">
<div class="row">
<div class="col-lg-5">
<!--- avatar --->
<div class="card" style="background-image:url('https://m.media-amazon.com/images/I/51uCpk4N+DL._SL500_.jpg?r=2020121505');height:130px;border:0px;background-size:cover;background-position:center;box-shadow:1px 2px 0px #000;">
<a class="h-100 btn btn-outline-primary btn-block border-0" href="#monkie" data-slide="next"></a>
</div>
</div>
<div class="col-lg-7">
<div class="card align-items-center p-2 mt-2" style="background-color:#146917;border:10px double #000;box-shadow:1px 2px 0px #000;">
<div class="carousel slide carousel-fade" data-ride="carousel" id="monkie"><div class="carousel-inner">
<div class="carousel-item active">
<!--- first quote --->
<h3 class="text-uppercase font-italic text-center" style="color:#FFFFFF;text-shadow:3px 3px 0px #000;font-family:arial;font-weight:800;font-size:30px;">“If it annoys you, just get it over with."</h3>
</div>
<div class="carousel-item">
<!--- second quote --->
<h3 class="text-uppercase font-italic text-center" style="color:#FFFFFF;text-shadow:3px 3px 0px #000;font-family:arial;font-weight:800;font-size:30px;">Not true, not true, not true!</h3>
</div>
</div></div>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-lg-5">
<div class="card justify-content-between" style="background-color:#146917;border:10px double #000;box-shadow:1px 2px 0px #000;">
<!--- name/title --->
<h3 class="text-uppercase mt-3 ml-2" style="color:#FFFFFF;text-shadow:3px 1px 0px #000;font-family:arial;font-size:22px;">⇝ NAME OR TITLE</h3>
<!--- info column --->
<div class="row p-2">
<div class="col-12">
<span class="text-uppercase" style="color:#FFFFFF;font-weight:700;">gender</span>
<span class="pull-right" style="color:#000;">content</span></p>
<hr class="my-2">
</div>
<div class="col-12">
<span class="text-uppercase" style="color:#FFFFFF;font-weight:700;">age</span>
<span class="pull-right" style="color:#000;">content</span></p>
<hr class="my-2">
</div>
<div class="col-12">
<span class="text-uppercase" style="color:#FFFFFF;font-weight:700;">height</span>
<span class="pull-right" style="color:#000;">content</span></p>
<hr class="my-2">
</div>
<div class="col-12">
<span class="text-uppercase" style="color:#FFFFFF;font-weight:700;">species</span>
<span class="pull-right" style="color:#000;">content</span></p>
<hr class="my-2">
</div>
<div class="col-12">
<span class="text-uppercase" style="color:#FFFFFF;font-weight:700;">occupation</span>
<span class="pull-right" style="color:#000;">content</span></p>
<hr class="my-2">
</div>
<div class="col-12">
<span class="text-uppercase" style="color:#FFFFFF;font-weight:700;">dob</span>
<span class="pull-right" style="color:#000;">content</span></p>
<hr class="my-2">
</div>
<div class="col-12">
<span class="text-uppercase" style="color:#FFFFFF;font-weight:700;">status</span>
<span class="pull-right" style="color:#000;">content</span></p>
<hr class="my-2">
</div>
<div class="col-12">
<span class="text-uppercase" style="color:#FFFFFF;font-weight:700;">value</span>
<span class="pull-right" style="color:#000;">content</span></p>
</div>
</div>
</div>
<div class="row no-gutters m-2">
<!--- color palette --->
<div class="col-md-12" style="border:4px double #000;">
<div class="row no-gutters" style="height:30px;">
<div class="col" style="background-color:#629663;" data-toggle="tooltip" title="hex color or part of palette (ie. hair, eye color, etc)"></div>
<div class="col" style="background-color:#437E3F;" data-toggle="tooltip" title="hex color or part of palette (ie. hair, eye color, etc)"></div>
<div class="col" style="background-color:#629663;" data-toggle="tooltip" title="hex color or part of palette (ie. hair, eye color, etc)"></div>
<div class="col" style="background-color:#437E3F;" data-toggle="tooltip" title="hex color or part of palette (ie. hair, eye color, etc)"></div>
<div class="col" style="background-color:#629663;" data-toggle="tooltip" title="hex color or part of palette (ie. hair, eye color, etc)"></div>
</div>
</div></div>
</div>
<div class="col-lg-7">
<div class="carousel slide" data-ride="carousel" id="rejecthumanity"><div class="carousel-inner">
<div class="carousel-item active">
<!--- img 1 --->
<div class="card" style="background:url('https://pbs.twimg.com/media/Envf5beVQAACH67.jpg');background-position:center;background-size:cover;height:420px;box-shadow:1px 2px 0px #000;border:4px solid #000;border-radius:0px;"></div>
</div>
<div class="carousel-item">
<!--- img 2 --->
<div class="card" style="background:url('https://i.ytimg.com/vi/W7ZkT5WpL-g/maxresdefault.jpg');background-position:center;background-size:cover;height:420px;box-shadow:1px 2px 0px #000;border:4px solid #000;border-radius:0px;"></div>
</div>
</div></div>
</div>
</div>
<div class="card mt-4 align-items-center" style="border:none;background:none;flex-direction:row;margin: 0 15px 0 15px;background:none;">
<a href="#rejecthumanity" data-slide="prev"><i class="fas fa-skull" style="font-size:25px;margin:5px;color:#146917;"></i></a>
<hr style="flex-grow:1;margin:10px;background-color:#146917;">
<!--- music player, paste the end of a yt link after the "youtube.com/embed/" / credit to Strabi + phasmology for music code ! --->
<span><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/hunqo6DgjD8"></iframe><i class="far fa-play-circle fa-spin fa-3x" style="animation-duration:10s;color:#146917;"></i></span>
<hr style="flex-grow:1;margin:10px;background-color:#146917;">
<a href="#rejecthumanity" data-slide="next"><i class="fas fa-skull" style="font-size:25px;margin:5px;color:#146917;"></i></a>
</div>
<div class="card mt-4 mx-3 p-3" style="background-color:#146917;border:10px double #000;box-shadow:1px 2px 0px #000;">
<!--- info box --->
<p class="text-center" style="color:#FFFFFF;line-height:21px;font-size:13px;">Card adjusts to how much you write, so go crazy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi.</p>
</div>
<!--- stamps --->
<div class="row justify-content-center mt-3">
<img class="m-1" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/a3545082-98ad-46f1-9d25-41ffd2370773/dax4c1p-5b29c4ab-be73-4000-9e22-46699489a53c.png/v1/fill/w_99,h_56,strp/f2u___disgust_by_romanojpg_dax4c1p-fullview.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3siaGVpZ2h0IjoiPD01NiIsInBhdGgiOiJcL2ZcL2EzNTQ1MDgyLTk4YWQtNDZmMS05ZDI1LTQxZmZkMjM3MDc3M1wvZGF4NGMxcC01YjI5YzRhYi1iZTczLTQwMDAtOWUyMi00NjY5OTQ4OWE1M2MucG5nIiwid2lkdGgiOiI8PTk5In1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.v9mMuI066RAHzftwIwVYbzh9cwvWR4HYoRg_3fM9v0w">
<img class="m-1" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/i/c7c3d09a-d143-4965-98c2-9b0388369d3a/dbrc5u0-1ed4d46e-cfcf-4da8-946e-0b523b9dbd28.gif">
<img class="m-1" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/ed792924-91b4-4612-9358-aff739b16a11/dbj5mxr-d6b3f72c-edb3-484d-be82-952883199734.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvZWQ3OTI5MjQtOTFiNC00NjEyLTkzNTgtYWZmNzM5YjE2YTExXC9kYmo1bXhyLWQ2YjNmNzJjLWVkYjMtNDg0ZC1iZTgyLTk1Mjg4MzE5OTczNC5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.dYMN1n8Qo2braA6dHGcHR1mkJxunCGU5A0IF7qyEpv8">
<img class="m-1" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/8402c075-0742-4ec8-a58e-70d5d05fbda6/dbm69e8-1411658d-653d-4ffd-b93c-9bd6edbc5230.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvODQwMmMwNzUtMDc0Mi00ZWM4LWE1OGUtNzBkNWQwNWZiZGE2XC9kYm02OWU4LTE0MTE2NThkLTY1M2QtNGZmZC1iOTNjLTliZDZlZGJjNTIzMC5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.mdK_t4_Ov8DcoMfw2i7aHdj0z8ByRv99mAYo6qI7-mM">
<img class="m-1" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/f9ba532c-94e9-489d-983b-42198de48ebb/dat3fqo-61c07ff2-857f-4ce8-ac4e-05dbf083e873.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvZjliYTUzMmMtOTRlOS00ODlkLTk4M2ItNDIxOThkZTQ4ZWJiXC9kYXQzZnFvLTYxYzA3ZmYyLTg1N2YtNGNlOC1hYzRlLTA1ZGJmMDgzZTg3My5naWYifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.shLtOu5IUaoCJYjcMn3DkQtT2HJUIcT8LOU9IcQbaN4">
<img class="m-1" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/b80090bd-225b-4e77-bd4e-032a5317ecac/dcv0m95-3a492d15-b551-4a53-8387-50a77a3eb896.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvYjgwMDkwYmQtMjI1Yi00ZTc3LWJkNGUtMDMyYTUzMTdlY2FjXC9kY3YwbTk1LTNhNDkyZDE1LWI1NTEtNGE1My04Mzg3LTUwYTc3YTNlYjg5Ni5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.KUCjVgZdiL4d-YLZovlrK3NPlNL6N6IUFLrcwde2QA0">
</div>
</div>
<!--- credit, dont remove pls! --->
<a class="d-block text-muted text-center" href="9388272" style="font-size:0.6em;">code by cati <i class="fad fa-rainbow"></i></a>
