<!--
[ foregone ]
"THE BEER-WARE LICENSE":
aalto/venfaaniik wrote this file. As long as you retain this notice and the credits
in the file you can do whatever you want with this stuff. If we meet some day,
and you think this stuff is worth it, you can buy me a beer in return.
Though I prefer ciders.
----------------------------------------------------------------------------
> do not remove the credits
> editing is allowed
> WYSIWYG will probably break the code, keep it off
> The following code was created for Coders' Quarters' February Challenge, using the template Flip.
> throw a favourite if you liked the theme ✨
> Accent colour used:
#A27B5C;
> CTRL+H to quickly find all and replace them with yours.
-->
<div class="p-1 mx-auto d-flex rounded" style="letter-spacing: 1px; font-family: zapf dingbats; font-weight: 100; max-width: 100%;
background-color: #A27B5C;">
<div class="row no-gutters bg-faded rounded" style="overflow:hidden;">
<!-- left side bar -->
<div class="col-lg-3 col-md-12" style="border-right: 1px solid #A27B5C;">
<div class="pl-lg-3 pl-0 mx-3 mx-lg-0 mt-3 pr-lg-2 pb-lg-4" style="min-height: 100%;">
<div class="card bg- p-3 mr-lg-2">
<!-- image -->
<div class="m-3">
<img src="https://media.discordapp.net/attachments/715305441818837013/1073572300059844639/240644fgsdl2.jpg"
style="max-height: 210px;" class="d-block mx-auto rounded-circle">
</div>
<h1 class="card-title text-center" style="font-variant: small-caps;">Name Name</h1>
<!-- General info -->
<div class="row mb-2">
<div class="col-12 d-flex">
<div>alias</div>
<hr class="w-100 my-auto mx-2">
<div class="pull-right">text</div>
</div>
</div>
<div class="row mb-2">
<div class="col-12 d-flex">
<div>species</div>
<hr class="w-100 my-auto mx-2">
<div class="pull-right">text</div>
</div>
</div>
<div class="row mb-2">
<div class="col-12 d-flex">
<div>age</div>
<hr class="w-100 my-auto mx-2">
<div class="pull-right">text</div>
</div>
</div>
<div class="row mb-2">
<div class="col-12 d-flex">
<div>height</div>
<hr class="w-100 my-auto mx-2">
<div class="pull-right">text</div>
</div>
</div>
<div class="row mb-2">
<div class="col-12 d-flex">
<div>gender</div>
<hr class="w-100 my-auto mx-2">
<div class="pull-right">text</div>
</div>
</div>
<div class="row mb-2">
<div class="col-12 d-flex">
<div>orientation</div>
<hr class="w-100 my-auto mx-2">
<div class="pull-right">text</div>
</div>
</div>
<div class="row mb-2">
<div class="col-12 d-flex">
<div>alignment</div>
<hr class="w-100 my-auto mx-2">
<div class="pull-right">text</div>
</div>
</div>
<!-- you can fit here more stats -->
</div>
<!-- or write some stuff, feel free to delete -->
<!-- Uncomment the box below and remove Style="" -from the <div> below if you wish to have text instead. -->
<div class="mx-3 mx-lg-0 mt-3 mr-lg-2 pl-0 pl-lg-2 pb-lg-4"
style="height: 400px; background-image: url(https://media.discordapp.net/attachments/715305441818837013/1073655923714830376/df2f800867c15eb5ea2463dcee3b5e39.jpg); background-size: cover; background-position: center center; border-radius: 5px;">
<!--
<h1 class="text-center" style="font-variant: small-caps;">header</h1>
<p>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.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>
<!-- middle row -->
<div class="col-lg-5 col-md-12 mt-3 mt-lg-0 pb-lg-3 pb-0">
<!--
border-right: 1px solid #A27B5C;"-->
<div class="mr-lg-2">
<!-- summary -->
<div class="mx-3 mr-lg-2 mx-lg-0 mt-3 p-3">
<div class="justify-content-between">
<h1 class="text-center" style="font-variant: small-caps;">summary</h1>
<i style="font-size: 1.5em;" class="fa-light fa-book"></i>
</div>
<p>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>
<p>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.</p>
</div>
<!-- likes, dislikes / palette -->
<div class="my-3">
<div class="row no-gutters">
<!-- likes, dislikes -->
<div class="col-10">
<div class="p-3 mx-3 mx-lg-0 p-3">
<div class="row mb-1">
<div class="col-12 d-flex">
<i style="font-size: 1.5em;" class="fa-light fa-thumbs-up mr-3"></i>
<h1 style="font-variant: small-caps;">likes</h1>
<hr class="w-100 my-auto mx-2">
</div>
</div>
<ul class="mt-2">
<li>Lorem ipsum dolor sit amet, conDuis sollicitudin elit sed tellus blandit viverra
sed eget odio.</li>
<li>Donec accumsan tempor lacus, et venenatis elit feugiat non. </li>
<li>Duis porta eros et velit blandit dapibus.</li>
<li>Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</li>
</ul>
<div class="row mb-1">
<div class="col-12 d-flex">
<hr class="w-100 my-auto mx-2">
<h1 style="font-variant: small-caps;">dislikes</h1>
<i style="font-size: 1.5em;" class="fa-light fa-thumbs-down ml-3"></i>
</div>
</div>
<ul class="mt-2">
<li>Lorem ipsum dolor sit amet, conDuis sollicitudin elit sed tellus blandit viverra
sed eget odio.</li>
<li>Donec accumsan tempor lacus, et venenatis elit feugiat non. </li>
<li>Duis porta eros et velit blandit dapibus.</li>
<li>Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</li>
</ul>
</div>
</div>
<!-- palette -->
<div class="col-2">
<div class="row no-gutters mr-lg-2 pr-lg-0 pr-3 ml-lg-3 ml-1" style="min-height:100%">
<div class="col-12 d-flex" style="background-color: #DCD7C9; min-height: 40px;">
</div>
<div class="col-12 d-flex" style="background-color: #A27B5C; min-height: 40px;">
</div>
<div class="col-12 d-flex" style="background-color: #3F4E4F; min-height: 40px;">
</div>
<div class="col-12 d-flex" style="background-color: #2C3639; min-height: 40px;">
</div>
</div>
</div>
</div>
</div>
<!-- trivia / free box -->
<div class="mx-3 mr-lg-2 mx-lg-0 mt-3 p-3">
<div class="justify-content-between">
<h1 class="text-center" style="font-variant: small-caps;">Trivia / Free text block</h1>
<i style="font-size: 1.5em;" class="fa-regular fa-circle-question"></i>
</div>
<p>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>
<!-- relationships / stats -->
<div class="col-lg-3 col-md-12 mt-3 mt-lg-0" style=" border-left: 1px solid #A27B5C;">
<!-- relationships -->
<div class="row no-gutters">
<div class="col-12 order-2 order-lg-1">
<div class="mx-3 mr-lg-2 mx-lg-0 mt-3 pl-3">
<!-- title -->
<div class="py-1" style="font-size: 1.5em;">
<div class="justify-content-between">
<h1 class="text-center" style="font-variant: small-caps;">Relationships</h1>
<i class="fa-light fa-poll-people"></i>
</div>
</div>
<!-- carousel -->
<!-- To add more items:
- Add a <list> -element to carouselIndicator right below, data-slide-to="n+1"
- Copy-paste another carousel-item
-->
<div id="carouselIndicator" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators" style="filter: invert(100%);">
<li data-target="#carouselIndicator" data-slide-to="0" class="active"></li>
<li data-target="#carouselIndicator" data-slide-to="1"></li>
<li data-target="#carouselIndicator" data-slide-to="2"></li>
<!-- add more here -->
</ol>
<div class="carousel-inner pb-5">
<!-- relationship 1 -->
<div class="carousel-item active">
<img src="https://media.discordapp.net/attachments/715305441818837013/1073586422021361754/9df2cd4cef716e6a9af8443c0d491d382.jpg"
style="max-height: 150px;" class="pt-2 d-block mx-auto rounded-circle border-0">
<div class="mt-3">
<h3 class="text-center">Name Name</h3>
<p class="text-justify"><span class="text-muted">[relationship type]</span><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.</p>
</div>
</div>
<!-- relationship 2 -->
<div class="carousel-item">
<img src="https://media.discordapp.net/attachments/715305441818837013/1073592922009772152/6ae23fc85b5fc271c57ce5083bce8e6d3.jpg"
style="max-height: 150px;" class="pt-2 d-block mx-auto rounded-circle border-0">
<div class="mt-3">
<h3 class="text-center">Name Name 2</h3>
<p class="text-justify"><span class="text-muted">[relationship type]</span><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.</p>
</div>
</div>
<!-- relationship 3 -->
<div class="carousel-item">
<img src="https://media.discordapp.net/attachments/715305441818837013/1073592941697847437/d574be6710eda80647cb31d17ed991292.jpg"
style="max-height: 150px;" class="pt-2 d-block mx-auto rounded-circle border-0">
<div class="mt-3">
<h3 class="text-center">Name Name 3</h3>
<p class="text-justify"><span class="text-muted">[relationship type]</span><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.</p>
</div>
</div>
</div>
<!-- carousel controls -->
<a class="carousel-control-prev" href="#carouselIndicator" role="button" data-slide="prev"
style="margin-top: -290px; filter: invert(100%);">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselIndicator" role="button" data-slide="next"
style="margin-top: -290px; filter: invert(100%);">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!-- stats -->
<div class="col-12 order-1 order-lg-1">
<div class="mx-3 mr-lg-2 mx-lg-0 mt-3 pl-3">
<div class="center-block">
<!-- title -->
<div class="pb-1" style="font-size: 1.5em;">
<div class="justify-content-between">
<h1 class="text-center" style="font-variant: small-caps;">Stats</h1>
<i class="fa-light fa-star-christmas"></i>
</div>
</div>
<div class="row no-gutters">
<!-- To edit stats, simply edit the progress-bar width. -->
<!-- strength -->
<div class="col-1 col-sm-2 d-flex">
<p class="m-auto text-center" style="font-variant: small-caps;">STR</p>
</div>
<div class="col-11 col-sm-10 p-2 pl-3">
<div class="progress" style="height:25px;">
<div class="progress-bar" style="width:30%;
background-color:#A27B5C;
height:25px;">
<br>
</div>
</div>
</div>
<!-- dexterity -->
<div class="col-1 col-sm-2 d-flex">
<p class="m-auto text-center" style="font-variant: small-caps;">DEX</p>
</div>
<div class=" col-11 col-sm-10 p-2 pl-3">
<div class="progress" style="height:25px;">
<div class="progress-bar" style="width:40%;
background-color:#A27B5C;
height:25px;">
<br>
</div>
</div>
</div>
<!-- constitution -->
<div class="col-1 col-sm-2 d-flex">
<p class="m-auto text-center" style="font-variant: small-caps;">CON</p>
</div>
<div class="col-11 col-sm-10 p-2 pl-3">
<div class="progress" style="height:25px;">
<div class="progress-bar" style="width:50%;
background-color:#A27B5C;
height:25px;">
<br>
</div>
</div>
</div>
<!-- intelligence -->
<div class="col-1 col-sm-2 d-flex">
<p class="m-auto text-center" style="font-variant: small-caps;">INT</p>
</div>
<div class="col-11 col-sm-10 p-2 pl-3">
<div class="progress" style="height:25px;">
<div class="progress-bar" style="width:60%;
background-color:#A27B5C;
height:25px;">
<br>
</div>
</div>
</div>
<!-- wisdom -->
<div class="col-1 col-sm-2 d-flex">
<p class="m-auto text-center" style="font-variant: small-caps;">WIS</p>
</div>
<div class="col-11 col-sm-10 p-2 pl-3">
<div class="progress" style="height:25px;">
<div class="progress-bar" style="width:70%;
background-color:#A27B5C;
height:25px;">
<br>
</div>
</div>
</div>
<!-- charisma-->
<div class="col-1 col-sm-2 d-flex">
<p class="m-auto text-center" style="font-variant: small-caps;">CHA</p>
</div>
<div class="col-11 col-sm-10 p-2 pl-3">
<div class="progress" style="height:25px;">
<div class="progress-bar" style="width:80%;
background-color:#A27B5C;
height:25px;">
<br>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- side image -->
<div class="col-1">
<div class="ml-lg-2" style="background-image: url(https://media.discordapp.net/attachments/715305441818837013/1073635323273285642/79d71a82481e28853b2536a46ebc9ff1.jpg);
background-size: cover;
min-height:100%;">
</div>
</div>
</div>
</div>
<!-- DO NOT REMOVE -->
<p class="small pull-right">Theme by aalto</p>
