Profile
<!--==========================================
[10] SLANTED by TOGO,
SPARKLYCODES & 8BYTE
-- -- -- -- -- -- -- -- -- -- -- -- -- --
anything you need to edit should be
tabbed and clearly marked - i've also
added comments for light code edits you
may want to do. feel free to change
any elements to your needs!
-- -- -- -- -- -- -- -- -- -- -- -- -- --
> do not use with WYSIWYG on, it will
break the code.
> keep my credit in.
> direct any questions to my comments,
PMs or discord. thank you!
===========================================-->
<div class="container p-0">
<div class="row no-gutters">
<div class="col-md-3 p-2">
<!-- ICON =================================-->
<div class="bg-faded w-100" style="position: relative; background-image:
url(IMAGE URL);
background-size: cover; background-position: center; padding-top: 100%;">
<div class="card h-100 w-100 rounded-0" style="position: absolute; top: 0; background-color: transparent; border-width: 3px; transform: rotate(-3deg);"></div>
</div>
</div>
<!-- TITLE ================================-->
<div class="col-md-9 p-2 align-items-end">
<div class="d-flex flex-column align-items-center align-items-md-start ml-md-n5 text-center text-md-left">
<div class="flex-row align-items-center ml-md-n3 mb-2 py-2 px-3 text-uppercase font-italic bg-faded" style="clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 10px 100%);">
<i class="far fa-quote-left mr-2 text-primary" style="font-size: 10px;"></i>
A quote, title or tagline. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<i class="far fa-quote-right ml-2 text-primary" style="font-size: 10px;"></i>
</div>
<div class="bg-faded mb-2 py-2 px-4" style="clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 100%, calc(0% + 15px) 100%);">
<p class="text-uppercase font-italic text-primary" style="font-family: 'Courier New'; font-size: 24px; letter-spacing: 2px;">
Name Surname
</p>
</div>
</div>
</div>
<!-- ABOUT BOX ============================-->
<div class="col-md-8 p-2">
<div class="card p-3 bg-faded rounded-0" style="height: 400px; border-width: 0; border-bottom-width: 7px; border-style: double;">
<div class="row align-items-center mb-2">
<div class="col-auto">
<p class="text-uppercase font-italic text-primary" style="font-family: 'Courier New'; font-size: 24px; letter-spacing: 2px;">
[ About <i class="fal fa-axe ml-2" style="font-size: 18px;"></i> ]
<!-- you can change the icons in the titles if you'd like! -->
</p>
</div>
<div class="col">
<hr class="my-0 card-outline-primary" style="opacity: .2;">
</div>
</div>
<div class="d-flex d-md-block flex-column pr-2" style="flex: 1 1 0; overflow-y: auto;">
<!-- FLOATING IMAGE =======================-->
<img src="IMAGE URL" class="align-self-center float-right" style="width: 250px;">
<!-- you can delete this if you don't want to use it! -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque faucibus orci dui, nec accumsan arcu efficitur quis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec est magna, maximus in orci nec, pretium lobortis risus. Pellentesque vitae vulputate eros. Proin in ante et nisl aliquam laoreet nec at nunc. Pellentesque porta malesuada lectus, nec egestas augue lacinia sed. Aliquam eleifend ex quam, id facilisis massa laoreet ut. Mauris accumsan velit ac fringilla pellentesque.
</p>
<p>
Quisque at iaculis nisi. Vestibulum sit amet velit quis ligula lobortis volutpat. Duis at sapien convallis, posuere nunc nec, eleifend dolor. Integer placerat pretium efficitur. Quisque eros nibh, aliquam ac metus et, eleifend ornare turpis. Integer vestibulum dictum iaculis. Sed faucibus felis at pellentesque placerat. Cras dignissim nibh id diam placerat euismod nec id leo. Cras tincidunt lectus quis erat tincidunt, in pellentesque velit fringilla. Ut et urna quis justo malesuada laoreet. Duis sit amet risus at justo condimentum porta. Donec luctus facilisis nisl ut sodales. Vestibulum mattis rhoncus mi, in imperdiet sem elementum placerat.
</p>
<p>
Mauris tincidunt tempus massa quis tempus. Morbi quis tempus felis. Nullam in purus in arcu aliquam maximus id convallis diam. Etiam sed turpis quis elit rutrum varius. Fusce commodo ante dolor, non aliquet diam lacinia vitae. Duis blandit, quam sed mollis scelerisque, ipsum velit fringilla sapien, eu lacinia mi odio id justo. Aliquam nec neque vel libero aliquam sagittis. Nam lobortis, dui quis scelerisque pharetra, eros est dignissim erat, vitae tincidunt metus odio eget enim. Aliquam erat volutpat. Maecenas tempus nulla augue, et pretium est rhoncus ullamcorper. Nullam posuere justo nisl, eu accumsan nulla cursus rutrum.
</p>
</div>
</div>
</div>
<!-- PERSONALITY BOX ======================-->
<div class="col-md-4 p-2">
<div class="card p-3 bg-faded rounded-0" style="height: 400px; border-width: 0; border-right-width: 7px; border-style: double;">
<p class="mb-2 text-center text-uppercase font-italic text-primary" style="font-family: 'Courier New'; font-size: 24px; letter-spacing: 2px;">
[ Personality <i class="fal fa-jug ml-2" style="font-size: 18px;"></i> ]
</p>
<div class="pr-2" style="flex: 1 1 0; overflow-y: auto;">
<div style="overflow-x: hidden;">
<!-- LIKES / DISLIKES =====================-->
<div class="row">
<div class="col-md-6">
<p class="text-center font-italic text-muted" style="font-family: 'Courier New'; letter-spacing: 1px;">
Likes
</p>
<hr class="mt-1 mb-2 card-outline-primary" style="opacity: .2;">
<ul class="list-unstyled mb-2">
<li>
<i class="fal fa-check mx-1 text-primary"></i>
content
</li>
<li>
<i class="fal fa-check mx-1 text-primary"></i>
content
</li>
<li>
<i class="fal fa-check mx-1 text-primary"></i>
content
</li>
</ul>
</div>
<div class="col-md-6">
<p class="text-center font-italic text-muted" style="font-family: 'Courier New'; letter-spacing: 1px;">
Dislikes
</p>
<hr class="mt-1 mb-2 card-outline-primary" style="opacity: .2;">
<ul class="list-unstyled mb-2">
<li>
<i class="fal fa-times mx-1 text-primary"></i>
content
</li>
<li>
<i class="fal fa-times mx-1 text-primary"></i>
content
</li>
<li>
<i class="fal fa-times mx-1 text-primary"></i>
content
</li>
</ul>
</div>
</div>
<hr class="mt-2 mb-3 card-outline-primary" style="opacity: .2;">
<!-- STATS ================================-->
<div class="pb-2">
<!--=======================================-->
<div class="row no-gutters mb-2">
<div class="col text-primary" style="font-family: 'Courier New';">
Introverted
</div>
<div class="col-auto">
<!-- just fill out one icon to show where they are on the scale! fas is filled, fal is empty -->
<i class="fas fa-diamond"></i>
<i class="fal fa-diamond"></i>
<i class="fal fa-diamond"></i>
<i class="fal fa-diamond"></i>
</div>
<div class="col text-right text-primary" style="font-family: 'Courier New';">
Extroverted
</div>
</div>
<!--=======================================-->
<div class="row no-gutters mb-2">
<div class="col text-primary" style="font-family: 'Courier New';">
Intuitive
</div>
<div class="col-auto">
<i class="fal fa-diamond"></i>
<i class="fas fa-diamond"></i>
<i class="fal fa-diamond"></i>
<i class="fal fa-diamond"></i>
</div>
<div class="col text-right text-primary" style="font-family: 'Courier New';">
Observant
</div>
</div>
<!--=======================================-->
<div class="row no-gutters mb-2">
<div class="col text-primary" style="font-family: 'Courier New';">
Thinking
</div>
<div class="col-auto">
<i class="fal fa-diamond"></i>
<i class="fal fa-diamond"></i>
<i class="fas fa-diamond"></i>
<i class="fal fa-diamond"></i>
</div>
<div class="col text-right text-primary" style="font-family: 'Courier New';">
Feeling
</div>
</div>
<!--=======================================-->
<div class="row no-gutters mb-2">
<div class="col text-primary" style="font-family: 'Courier New';">
Judging
</div>
<div class="col-auto">
<i class="fal fa-diamond"></i>
<i class="fal fa-diamond"></i>
<i class="fal fa-diamond"></i>
<i class="fas fa-diamond"></i>
</div>
<div class="col text-right text-primary" style="font-family: 'Courier New';">
Prospecting
</div>
</div>
<!--=======================================-->
</div>
<p>
You can write more about their personality here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec hendrerit libero. Pellentesque sagittis aliquam orci id vehicula. In ut risus suscipit, aliquam massa nec, porta libero. Curabitur erat mauris, pharetra vel convallis eu, consectetur id diam. Proin ac leo lobortis, tincidunt lectus eget, ultrices orci. Integer pellentesque libero eros, in gravida diam posuere vel. Suspendisse condimentum vehicula eleifend. Fusce id consectetur dolor, vitae dignissim felis. Ut euismod pretium bibendum. Duis id semper diam, eu auctor diam.
</p>
</div>
</div>
</div>
</div>
<!-- MOODBOARD ============================-->
<div class="col-md-3 flex-column p-2">
<div class="bg-faded mr-md-n2" style="flex: 1 1 0; min-height: 200px; background-image:
url(IMAGE URL);
background-size: cover; background-position: center; clip-path: polygon(0 0, 100% 0, calc(100% - 15px) 100%, 0% 100%);"></div>
</div>
<div class="col-md-3 flex-column p-2">
<div class="bg-faded ml-md-n2" style="flex: 1 1 0; min-height: 200px; background-image:
url(IMAGE URL);
background-size: cover; background-position: center; clip-path: polygon(15px 0, 100% 0, 100% 100%, 0% 100%);"></div>
</div>
<!-- BASICS BOX ===========================-->
<div class="col-md-6 mb-n2 p-2">
<div class="card mb-2 p-3 bg-faded rounded-0" style="border-width: 0; border-left-width: 7px; border-style: double;">
<div class="row align-items-center">
<div class="col-auto">
<p class="text-uppercase font-italic text-primary" style="font-family: 'Courier New'; font-size: 24px; letter-spacing: 2px;">
[ Basics <i class="fal fa-coins ml-2" style="font-size: 18px;"></i> ]
</p>
</div>
<div class="col">
<hr class="my-0 card-outline-primary" style="opacity: .2;">
</div>
</div>
</div>
<div class="row mx-n1">
<!--=======================================-->
<div class="col-md-6 px-1 mb-2">
<div class="card d-block py-2 px-3 bg-faded rounded-0" style="border-width: 0 7px; border-style: double;">
<span class="text-primary font-italic" style="font-family: 'Courier New'; letter-spacing: 1px;">
GENDER
</span>
<span class="float-right">
Content
</span>
</div>
</div>
<!--=======================================-->
<div class="col-md-6 px-1 mb-2">
<div class="card d-block py-2 px-3 bg-faded rounded-0" style="border-width: 0 7px; border-style: double;">
<span class="text-primary font-italic" style="font-family: 'Courier New'; letter-spacing: 1px;">
AGE
</span>
<span class="float-right">
Content
</span>
</div>
</div>
<!--=======================================-->
<div class="col-md-6 px-1 mb-2">
<div class="card d-block py-2 px-3 bg-faded rounded-0" style="border-width: 0 7px; border-style: double;">
<span class="text-primary font-italic" style="font-family: 'Courier New'; letter-spacing: 1px;">
ORIENTATION
</span>
<span class="float-right">
Content
</span>
</div>
</div>
<!--=======================================-->
<div class="col-md-6 px-1 mb-2">
<div class="card d-block py-2 px-3 bg-faded rounded-0" style="border-width: 0 7px; border-style: double;">
<span class="text-primary font-italic" style="font-family: 'Courier New'; letter-spacing: 1px;">
OCCUPATION
</span>
<span class="float-right">
Content
</span>
</div>
</div>
<!--=======================================-->
<div class="col-md-6 px-1 mb-2">
<div class="card d-block py-2 px-3 bg-faded rounded-0" style="border-width: 0 7px; border-style: double;">
<span class="text-primary font-italic" style="font-family: 'Courier New'; letter-spacing: 1px;">
RESIDENCE
</span>
<span class="float-right">
Content
</span>
</div>
</div>
<!--=======================================-->
<div class="col-md-6 px-1 mb-2">
<div class="card d-block py-2 px-3 bg-faded rounded-0" style="border-width: 0 7px; border-style: double;">
<span class="text-primary font-italic" style="font-family: 'Courier New'; letter-spacing: 1px;">
THEME
</span>
<span class="float-right">
<a href="SONG URL" class="text-body">
Song Name
</a>
</span>
</div>
</div>
<!--=======================================-->
</div>
</div>
<!-- STORY BOX ============================-->
<div class="col-md-7 p-2">
<div class="card p-3 bg-faded rounded-0" style="height: 400px; border-width: 0; border-left-width: 7px; border-style: double;">
<div class="row align-items-center mb-2">
<div class="col-auto">
<p class="text-uppercase font-italic text-primary" style="font-family: 'Courier New'; font-size: 24px; letter-spacing: 2px;">
[ Story & Trivia <i class="fal fa-dragon ml-2" style="font-size: 18px;"></i> ]
</p>
</div>
<div class="col">
<hr class="my-0 card-outline-primary" style="opacity: .2;">
</div>
</div>
<div class="d-flex d-md-block flex-column pr-2" style="flex: 1 1 0; overflow-y: auto;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus euismod elit in posuere euismod. Praesent quis tincidunt ante. Cras elit nisl, luctus vel ligula non, lobortis sodales neque. Cras commodo orci et diam accumsan, vel efficitur lacus placerat. Suspendisse potenti. Curabitur vel nisl a augue auctor tempor. Pellentesque eu nulla volutpat, euismod purus id, venenatis metus. Proin finibus tortor non mauris scelerisque convallis. In sed arcu et urna vulputate cursus ut ut urna. Ut ac velit nibh. Nullam ac condimentum magna. Quisque blandit blandit orci aliquam faucibus. Vivamus facilisis venenatis feugiat. Aenean semper id urna sed venenatis. Cras sapien ipsum, gravida eget ornare vel, iaculis at eros.
</p>
<p>
Fusce facilisis ante sit amet enim sodales, in placerat lectus sodales. Sed sit amet lectus non nulla scelerisque consectetur. Donec id ligula in leo efficitur efficitur. Aliquam nec dolor ornare, sollicitudin ligula malesuada, sagittis sem. Fusce suscipit, mauris et sollicitudin blandit, dolor felis ultricies ante, et interdum augue eros ac turpis. Nullam sagittis tincidunt luctus. Aliquam bibendum sapien a diam pulvinar imperdiet. Vestibulum cursus facilisis magna nec posuere. Nulla posuere volutpat sapien vel finibus. Nam in dui quis massa ultrices congue. Sed quis placerat urna, ut dapibus dolor. Morbi feugiat euismod aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla porttitor rutrum ipsum non mollis. Nunc efficitur orci ante, sit amet congue libero finibus eu.
</p>
<!-- TRIVIA ===============================-->
<ul class="my-3 pl-4">
<li>
Integer sed lorem vitae mauris feugiat maximus eu et sem.
</li>
<li>
Nullam nec tortor odio. Integer placerat pulvinar odio, non dignissim nisi laoreet et. Curabitur et bibendum massa.
</li>
<li>
Quisque ac lectus ante. Ut sed augue feugiat, blandit justo quis, venenatis nibh.
</li>
</ul>
</div>
</div>
</div>
<!-- RELATIONSHIPS BOX ====================-->
<div class="col-md-5 p-2">
<div class="card p-3 bg-faded rounded-0" style="height: 400px; border-width: 0; border-bottom-width: 7px; border-style: double;">
<p class="mb-2 text-center text-uppercase font-italic text-primary" style="font-family: 'Courier New'; font-size: 24px; letter-spacing: 2px;">
[ Relationships <i class="fal fa-rings-wedding ml-2" style="font-size: 18px;"></i> ]
</p>
<div class="d-flex d-md-block flex-column pr-2" style="flex: 1 1 0; overflow-y: auto;">
<hr class="card-outline-primary w-100 mt-1 mb-3" style="opacity: .2;">
<!--=======================================-->
<div>
<div class="card d-block mb-3 py-1 px-2 rounded-0" style="border-width: 0 6px; border-style: double;">
<span class="text-muted font-italic" style="font-family: 'Courier New'; letter-spacing: 1px;">
RELATIONSHIP
</span>
<span class="pull-right">
<i class="fas fa-diamond"></i>
<i class="fas fa-diamond"></i>
<i class="fas fa-diamond"></i>
<i class="fal fa-diamond"></i>
<i class="fal fa-diamond"></i>
</span>
</div>
<div class="mt-1">
<div class="card ml-1 mr-3 border-0 rounded-0 float-left" style="position: relative; background-image:
url(IMAGE URL);
background-size: cover; background-position: center; height: 100px; width: 100px;">
<div class="card h-100 w-100 rounded-0" style="position: absolute; top: 0; background-color: transparent; border-width: 2px; transform: rotate(5deg);"></div>
</div>
<p class="mb-0 text-primary font-italic" style="font-family: 'Courier New'; font-size: 20px; letter-spacing: 1px;">
<a href="CHARACTER URL" style="text-decoration: none;">
NAME SURNAME
</a>
</p>
<p class="text-justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed venenatis ante. Vivamus pharetra mi eu rutrum efficitur. Nullam vehicula nisi eu lorem vehicula tincidunt. Integer auctor ut nunc id volutpat. Mauris tellus neque, iaculis id pharetra ac, rutrum ut tellus. Proin dictum a tortor sit amet luctus. Morbi id suscipit orci. Quisque quis pretium enim. Aenean tincidunt libero at felis luctus faucibus. Ut malesuada dui eu mi dignissim, eget rutrum elit finibus.
</p>
</div>
</div>
<hr class="card-outline-primary w-100 my-3" style="opacity: .2;">
<!--=======================================-->
<div>
<div class="card d-block mb-3 py-1 px-2 rounded-0" style="border-width: 0 6px; border-style: double;">
<span class="text-muted font-italic" style="font-family: 'Courier New'; letter-spacing: 1px;">
RELATIONSHIP
</span>
<span class="pull-right">
<i class="fas fa-diamond"></i>
<i class="fas fa-diamond"></i>
<i class="fas fa-diamond"></i>
<i class="fal fa-diamond"></i>
<i class="fal fa-diamond"></i>
</span>
</div>
<div class="mt-1">
<div class="card ml-1 mr-3 border-0 rounded-0 float-left" style="position: relative; background-image:
url(IMAGE URL);
background-size: cover; background-position: center; height: 100px; width: 100px;">
<div class="card h-100 w-100 rounded-0" style="position: absolute; top: 0; background-color: transparent; border-width: 2px; transform: rotate(-4deg);"></div>
</div>
<p class="mb-0 text-primary font-italic" style="font-family: 'Courier New'; font-size: 20px; letter-spacing: 1px;">
<a href="CHARACTER URL" style="text-decoration: none;">
NAME SURNAME
</a>
</p>
<p class="text-justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed venenatis ante. Vivamus pharetra mi eu rutrum efficitur. Nullam vehicula nisi eu lorem vehicula tincidunt. Integer auctor ut nunc id volutpat. Mauris tellus neque, iaculis id pharetra ac, rutrum ut tellus. Proin dictum a tortor sit amet luctus. Morbi id suscipit orci. Quisque quis pretium enim. Aenean tincidunt libero at felis luctus faucibus. Ut malesuada dui eu mi dignissim, eget rutrum elit finibus.
</p>
</div>
</div>
<hr class="card-outline-primary w-100 my-3" style="opacity: .2;">
<!--=======================================-->
<div>
<div class="card d-block mb-3 py-1 px-2 rounded-0" style="border-width: 0 6px; border-style: double;">
<span class="text-muted font-italic" style="font-family: 'Courier New'; letter-spacing: 1px;">
RELATIONSHIP
</span>
<span class="pull-right">
<i class="fas fa-diamond"></i>
<i class="fas fa-diamond"></i>
<i class="fas fa-diamond"></i>
<i class="fal fa-diamond"></i>
<i class="fal fa-diamond"></i>
</span>
</div>
<div class="mt-1">
<div class="card ml-1 mr-3 border-0 rounded-0 float-left" style="position: relative; background-image:
url(IMAGE URL);
background-size: cover; background-position: center; height: 100px; width: 100px;">
<div class="card h-100 w-100 rounded-0" style="position: absolute; top: 0; background-color: transparent; border-width: 2px; transform: rotate(3deg);"></div>
</div>
<p class="mb-0 text-primary font-italic" style="font-family: 'Courier New'; font-size: 20px; letter-spacing: 1px;">
<a href="CHARACTER URL" style="text-decoration: none;">
NAME SURNAME
</a>
</p>
<p class="text-justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed venenatis ante. Vivamus pharetra mi eu rutrum efficitur. Nullam vehicula nisi eu lorem vehicula tincidunt. Integer auctor ut nunc id volutpat. Mauris tellus neque, iaculis id pharetra ac, rutrum ut tellus. Proin dictum a tortor sit amet luctus. Morbi id suscipit orci. Quisque quis pretium enim. Aenean tincidunt libero at felis luctus faucibus. Ut malesuada dui eu mi dignissim, eget rutrum elit finibus.
</p>
</div>
</div>
<hr class="card-outline-primary w-100 my-3" style="opacity: .2;">
<!--=======================================-->
</div>
</div>
</div>
</div>
<!-- CREDIT ===============================-->
<div class="pull-right px-2">
<a class="tooltipster mr-2" title="layout" href="https://toyhou.se/SparklyCodes"><i class="fal fa-sparkles"></i></a>
<a class="tooltipster mr-2" title="code base" href="https://toyhou.se/8byte"><i class="fal fa-crow"></i></a>
<a class="tooltipster" title="styling" href="https://toyhou.se/Togo"><i class="fal fa-coffee-togo"></i></a>
</div>
</div>
Recent Images
No images.