- Created
- 1 year, 2 months ago
- Creator
- Phantasmagorical
- Favorites
- 0
Profile
<!-------------------
An Ocean View
accents: #89d2d4
#7bcdcf
-------------------->
<div class="container my-5 pt-4 p-0" style="max-width:1100px;font-family:helvetica; letter-spacing:1.2px; font-weight:300">
<div class="row no-gutters d-flex">
<div class="col-lg-3 flex-column">
<!-- replace IMG_URL with your image address -->
<div class="card p-2 rounded-0 flex-fill" style="background:
url(IMG_URL) no-repeat;
background-size:cover;
background-position:center;">
<!---->
<div class="card rounded-0 p-2 flex-fill bg-transparent" style="border:2px solid #fff">
<!-- sticky-top icon - replace IMG_URL with your image address -->
<div class="card border-0 rounded-0 p-2" style="border-radius:40px 0px; position:sticky;top:25px;height:220px; margin-top:-60px;">
<div class="card rounded-0 flex-fill" style="border:8px double #dbdbdb; border-radius:40px 0px; min-height:200px;
background:
url(IMG_URL) no-repeat;
background-size:cover;
background-position:center;"></div>
</div>
</div>
</div>
<!---->
</div>
<!-- banner - replace IMG_URL with your image address -->
<div class="col-lg flex-column pl-lg-3 mt-lg-0 mt-2">
<div class="card rounded-0 p-2" style="height:170px; border:3px solid #89d2d4">
<div class="card h-100 rounded-0 border-0 text-center justify-content-center" style="background:
url(IMG_URL) no-repeat;
background-size:cover;
background-position:center;">
<!---->
<div class="row no-gutters">
<div class="col my-auto">
<hr class="w-100" style="border-top:2px solid #fff">
</div>
<div class="col-auto">
<div class="p-1 rounded-circle" style="border:3px solid #fff">
<div class="card p-3 border-0 rounded-circle align-self-center" style="width:5rem; height:5rem;">
<!-- change the icon here if you want to! find more icons at fontawesome.com -->
<i class="fat fa-dove fa-3x my-auto"></i>
</div>
</div>
</div>
<div class="col my-auto">
<hr class="w-100" style="border-top:2px solid #fff">
</div>
</div>
</div>
</div>
<div class="row no-gutters mt-2 d-flex">
<!-- about section - write about your character, the box scrolls so add as much as you'd like! -->
<div class="col-lg flex-column">
<div class="card p-3 rounded-0" style="height:250px; border-width:0px 0px 2px 0px; border-style:dashed">
<div style="height:190px; overflow:auto;">
Talk about your character here! This box scrolls too.. 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 class="row no-gutters mt-2">
<!-- music player -->
<div class="col-lg card rounded-0 mt-lg-n4 ml-lg-2 p-3" style="height:140px; overflow:hidden">
<div class="card border-0 rounded-0">
<div class="row no-gutters">
<!-- video -->
<div class="col-auto my-auto">
<!-- yt link - change the ID_HERE, leave out ?controls=0 -->
<div
class="card border-0 rounded-0"
style="overflow: hidden; width: 100px; height: 100px; box-shadow:9px 9px 0px #89d2d4"
>
<div style="position: relative; left: -50px; top: -15px">
<!-- replace [ MMGt6q2r3-c ] with your youtube ID [ found after https://www.youtube.com/watch?v= ] -->
<iframe
width="200"
height="130"
src="
https://www.youtube-nocookie.com/embed/MMGt6q2r3-c?controls=0
"
frameborder="0"
></iframe>
</div>
</div>
</div>
<!----- song info ----->
<div class="col pl-3">
<div
class="card pl-3 rounded-0 h-100 border-0">
<div class="my-auto">
<!----- song name ----->
<b
class="display-4"
style="font-size: 16pt; font-weight: 900; letter-spacing: 2px; font-family:georgia"
>Town With An Ocean View
</b>
<br/>
<!----- artist ----->
<p class="text-muted font-italic mt-2">Joe Hisashi</p>
</div>
</div>
</div>
<!---->
</div>
</div>
<!-- font awesome icon - change it if you'd like! you can choose more icons on fontawesome.com -->
<i class="fat fa-compact-disc fa-6x fa-spin" style="color:#89d2d4;position:absolute;bottom:-.5rem;right:-.5rem;opacity:.3;"></i>
</div>
<!-- decor -->
<div class="col-lg-4 pl-lg-2 mb-5 mt-2 mt-lg-0 mb-lg-0 flex-column">
<div class="card border-0 pb-4" style="height:140px;">
<div class="card border-0 rounded-0 p-3 mb-2" style="background-color:#89d2d4"></div>
<div class="card rounded-0 p-1 h-100" style="border-width:3px 6px;border-color:#89d2d4;">
<div class="card rounded-0 py-3 p-2 text-center h-100">
<!-- font awesome icon - change it if you'd like! you can choose more icons on fontawesome.com -->
<i class="fal fa-moon-over-sun fa-2x my-auto"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- basic info - fill this out with your character's info! -->
<div class="col-lg-4 px-lg-2 pb-lg-4" style="margin-top:-50px">
<div class="card py-2 px-3 rounded-0 flex-fill h-100" style="border-width:1px 1px 1px 8px;border-style:double;">
<div class="my-3">
<div class="d-flex justify-content-between">
<span class="tooltipster" title="Name" style="color:#7bcdcf;"><i class="fas fa-signature"></i></span>
<span>name</span>
</div>
<hr class="my-2">
<div class="d-flex justify-content-between">
<span class="tooltipster" title="Age" style="color:#7bcdcf;"><i class="far fa-hourglass"></i></span>
<span>age</span>
</div>
<hr class="my-2">
<div class="d-flex justify-content-between">
<span class="tooltipster" title="Birthday" style="color:#7bcdcf;"><i class="far fa-cake"></i></span>
<span>bday</span>
</div>
<hr class="my-2">
<div class="d-flex justify-content-between">
<span class="tooltipster" title="Pronouns" style="color:#7bcdcf;"><i class="far fa-comments"></i></span>
<span>pro/nou/ns</span>
</div>
<hr class="my-2">
<div class="d-flex justify-content-between">
<span class="tooltipster" title="Gender" style="color:#7bcdcf;"><i class="far fa-venus-mars"></i></span>
<span>gender</span>
</div>
<hr class="my-2">
<div class="d-flex justify-content-between">
<span class="tooltipster" title="Orientation" style="color:#7bcdcf;"><i class="far fa-head-side-heart"></i></span>
<span>orientation</span>
</div>
<hr class="my-2">
<div class="d-flex justify-content-between">
<span class="tooltipster" title="Occupation" style="color:#7bcdcf;"><i class="far fa-briefcase"></i></span>
<span>occupation</span>
</div>
<hr class="my-2">
<div class="d-flex justify-content-between">
<span class="tooltipster" title="Worth" style="color:#7bcdcf;"><i class="far fa-sack-dollar"></i></span>
<span>worth</span>
</div>
<hr class="my-2">
<div class="d-flex justify-content-between">
<span class="tooltipster" title="Status" style="color:#7bcdcf;"><i class="far fa-icons"></i></span>
<span>status</span>
</div>
<hr class="my-2">
<!-- CREDIT - DO NOT REMOVE -->
<div class="d-flex justify-content-between">
<span class="tooltipster" title="code by phanta" style="color:#7bcdcf;"><i class="far fa-code"></i></span>
<span>Phantasmagorical</span>
</div>
</div>
</div>
</div>
</div>
<!---->
<div class="row no-gutters mt-lg-n3 d-flex">
<!-- trivia section - write some random facts about your character! -->
<div class="col-lg-6 mb-lg-0 mb-3" style="height:230px; overflow:hidden">
<div class="card rounded-0 p-3 h-100" style="border-width:0 8px 0px 0px;border-style:double;">
<div style="overflow:auto">
<ul class="fa-ul mt-2">
<li class="mb-2"><span class="fa-li"><i class="fal fa-circle-small fa-xs"></i></span> trivia </li>
<li class="mb-2"><span class="fa-li"><i class="fal fa-circle-small fa-xs"></i></span> goes here! </li>
<li class="mb-2"><span class="fa-li"><i class="fal fa-circle-small fa-xs"></i></span> content </li>
<li class="mb-2"><span class="fa-li"><i class="fal fa-circle-small fa-xs"></i></span> content </li>
<li class="mb-2"><span class="fa-li"><i class="fal fa-circle-small fa-xs"></i></span> content </li>
</ul>
</div>
</div>
</div>
<div class="col-lg pl-lg-2 flex-column" style="margin-bottom:-55px; z-index:2">
<div class="card rounded-0 py-3 px-2 border-0 bg-transparent" style="height:290px;">
<!-- color palette -->
<div class="row no-gutters mt-n3 mx-n1 pb-2 flex-wrap d-flex">
<div class="col m-1 tooltipster" style="height:20px; background:#ef724c;" title="#ef724c"></div>
<div class="col m-1 tooltipster" style="height:20px; background:#f6c671;" title="#f6c671"></div>
<div class="col m-1 tooltipster" style="height:20px; background:#cfeb6a;" title="#cfeb6a"></div>
<div class="col m-1 tooltipster" style="height:20px; background:#54f1d7;" title="#54f1d7"></div>
</div>
<!-- design notes! -->
<div class="card rounded-0 px-1 h-100" style="overflow:auto; box-shadow:-9px 9px 0px #89d2d4;">
<ul class="fa-ul mt-3">
<li class="mb-2"><span class="fa-li"><i class="fal fa-circle-small fa-xs"></i></span> design notes </li>
<li class="mb-2"><span class="fa-li"><i class="fal fa-circle-small fa-xs"></i></span> go here! </li>
<li class="mb-2"><span class="fa-li"><i class="fal fa-circle-small fa-xs"></i></span> content </li>
<li class="mb-2"><span class="fa-li"><i class="fal fa-circle-small fa-xs"></i></span> content </li>
<li class="mb-2"><span class="fa-li"><i class="fal fa-circle-small fa-xs"></i></span> content </li>
</ul>
<!---->
</div>
</div>
</div>
</div>
<!-- reference sheet - replace IMG_URL with your image address -->
<div class="card rounded-0 justify-content-end mb-4 mb-lg-3" style="height:250px;
background:url(IMG_URL) no-repeat;
background-size:cover;
background-position:center;">
<!-- link to your ref sheet - replace REF_LINK with the link to your full ref sheet -->
<div class="card text-center border-0 rounded-0 m-2" style="min-width:50px; min-height:50px; position:absolute; right:0rem; background:#000; border-radius:2px 25px">
<a href="REF_LINK" class="my-auto text-white tooltipster" title="REF SHEET">
<i class="fal fa-palette fa-xl"></i></a>
</div>
</div>
<div class="row no-gutters d-flex">
<!-- relations & links -->
<div class="col-lg-5 px-lg-2 flex-column" style="margin-top:-30px; height:510px; overflow:auto">
<div class="card h-100 rounded-0 p-3" style="border-width:1px 8px 1px 1px; border-style:double;">
<!-- relation #1 - replace IMG_URL with your image address, replace LINK_HERE with the link to your character -->
<div class="mb-2">
<img src="IMG_URL" style="max-height:100px; border:2px solid #89d2d4" class="rounded-0 float-md-left mr-md-2 p-1 card mx-auto">
<a href="LINK_HERE" style="letter-spacing:1px;">
Name Here
</a>
<p class="text-muted">[relationship]</p>
<div class="d-flex justify-content-between mt-2">
<i class="fas fa-heart mr-2" style="color:#89d2d4"></i>
<!-- just adjust the width percantage % -->
<div class="progress card rounded-0 w-100" style="height:10px; padding:2px; border:1px solid #89d2d4">
<div class="progress-bar" style="width:50%; background:#89d2d4;"></div>
</div>
</div>
</div>
<!-- relation #2 - replace IMG_URL with your image address, replace LINK_HERE with the link to your character -->
<div class="mb-2">
<img src="IMG_URL" style="max-height:100px; border:2px solid #89d2d4" class="rounded-0 float-md-left mr-md-2 p-1 card mx-auto">
<a href="LINK_HERE" style="letter-spacing:1px;">
Name Here
</a>
<p class="text-muted">[relationship]</p>
<div class="d-flex justify-content-between mt-2">
<i class="fas fa-heart mr-2" style="color:#89d2d4"></i>
<!-- just adjust the width percantage % -->
<div class="progress card rounded-0 w-100" style="height:10px; padding:2px; border:1px solid #89d2d4">
<div class="progress-bar" style="width:50%; background:#89d2d4;"></div>
</div>
</div>
</div>
<!-- relation #3 - replace IMG_URL with your image address, replace LINK_HERE with the link to your character -->
<div class="mb-2">
<img src="IMG_URL" style="max-height:100px; border:2px solid #89d2d4" class="rounded-0 float-md-left mr-md-2 p-1 card mx-auto">
<a href="LINK_HERE" style="letter-spacing:1px;">
Name Here
</a>
<p class="text-muted">[relationship]</p>
<div class="d-flex justify-content-between mt-2">
<i class="fas fa-heart mr-2" style="color:#89d2d4"></i>
<!-- just adjust the width percantage % -->
<div class="progress card rounded-0 w-100" style="height:10px; padding:2px; border:1px solid #89d2d4">
<div class="progress-bar" style="width:50%; background:#89d2d4;"></div>
</div>
</div>
</div>
<!-- relation #4 - replace IMG_URL with your image address, replace LINK_HERE with the link to your character -->
<div class="mb-2">
<img src="IMG_URL" style="max-height:100px; border:2px solid #89d2d4" class="rounded-0 float-md-left mr-md-2 p-1 card mx-auto">
<a href="LINK_HERE" style="letter-spacing:1px;">
Name Here
</a>
<p class="text-muted">[relationship]</p>
<div class="d-flex justify-content-between mt-2">
<i class="fas fa-heart mr-2" style="color:#89d2d4"></i>
<!-- just adjust the width percantage % -->
<div class="progress card rounded-0 w-100" style="height:10px; padding:2px; border:1px solid #89d2d4">
<div class="progress-bar" style="width:50%; background:#89d2d4;"></div>
</div>
</div>
</div>
<!---->
</div>
</div>
<!-- history of your character -->
<div class="col-lg flex-column" style="max-height:480px; overflow:auto; ">
<div class="card rounded-0 mb-2 pt-2 pl-2" style="border-width:0 0 0 10px; border-style:solid; border-color:#89d2d4">
<!-- title -->
<div class="row no-gutters mx-3">
<div class="col">
<hr class="w-100" style="border-top:3px solid"></div>
<div class="col-auto my-auto mx-n1">
<div style="font-family:georgia; font-weight:900; font-size:1.3rem">
( Subheader )
</div>
</div>
<div class="col-2">
<hr class="w-100" style="border-top:3px solid">
</div>
</div>
<!-- these boxes don't scroll but will grow the more you add to them -->
<div class="p-3">
<b>These boxes will grow the more you add to them.</b> 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 class="card rounded-0" style="border-width:0 0 0 10px; border-style:solid; border-color:#89d2d4">
<div class="card border-0">
<!-- title -->
<div class="row no-gutters mx-3">
<div class="col">
<hr class="w-100" style="border-top:3px solid"></div>
<div class="col-auto my-auto mx-n1">
<div style="font-family:georgia; font-weight:900; font-size:1.3rem">
( Subheader )
</div>
</div>
<div class="col-2">
<hr class="w-100" style="border-top:3px solid">
</div>
</div>
<!-- these boxes don't scroll but will grow the more you add to them -->
<div class="p-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. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
<div class="card border-0">
<!-- title -->
<div class="row no-gutters mx-3">
<div class="col">
<hr class="w-100" style="border-top:3px solid"></div>
<div class="col-auto my-auto mx-n1">
<div style="font-family:georgia; font-weight:900; font-size:1.3rem">
( Subheader )
</div>
</div>
<div class="col-2">
<hr class="w-100" style="border-top:3px solid">
</div>
</div>
<!-- these boxes don't scroll but will grow the more you add to them -->
<div class="p-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. 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>
</div>
</div>
</div>
</div>
</div>
Recent Images
No images.