Profile
<!-------------------------------------------
| HEART OF THORNS |
| by Zylphide |
---------------------------------------------
placeholder images from the guild wars 2 wiki (wiki.guildwars2.com) or from the game itself
semi-opaque background: rgba(24,21,19,0.8)
muted text: #C3B69B
line breaks: #30302F
------>
<div class="row justify-content-center py-3" style="background: url(https://i.imgur.com/Q1sS8lh.jpeg); background-size: cover; background-repeat: no-repeat; background-position: center;">
<!----- basic info ------>
<div class="col-lg-2 p-2" style="display:flex; flex-direction: column; flex:1">
<div class="card border-0 rounded-0 p-2" style="background:rgba(24,21,19,0.8); color:#FFFFFF; margin-top: auto;">
<!----- name ----->
<span class="ml-2 mb-1" style="font-size:1.7rem">
Name
</span>
<!----- name END ----->
<!---- basic info list ---->
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-user"></i></span>Species</li>
<li><span class="fa-li"><i class="fas fa-swords"></i></span>Class</li>
<li><span class="fa-li"><i class="fas fa-users-class"></i></span>Affiliation</li>
<li><span class="fa-li"><i class="fas fa-map-marked-alt"></i></span>Location</li>
</ul>
<!---- basic info list ---->
</div>
</div>
<!----- basic info END ------>
<!---- character image ---->
<div class="col-lg-4" style="display:flex; flex-direction: column; flex:1">
<div class="card border-0" style="background: url(URL); background-repeat: no-repeat; background-size: contain; background-position: bottom; height: 600px; margin-top: auto;">
</div>
</div>
<!---- character image END ---->
<!---- info box ---->
<div class="col-lg-5 p-2">
<div class="card border-0 rounded-0 p-2" style="background: rgba(24,21,19,0.8); color:#FFFFFF;">
<!---- heading tabs ----->
<div class="card-header">
<ul class="nav nav-tabs nav-fill card-header-tabs">
<li class="nav-item"><a class="nav-link active" style="background: rgba(24,21,19,0.8); font-size: 1.2em; color: #C3B69B; flex-grow: 1" data-toggle="tab" href="#info"><i class="fas fa-star-christmas fa-lg"></i></a></li>
<li class="nav-item"><a class="nav-link" style="background: rgba(24,21,19,0.8); font-size: 1.2em; color: #C3B69B;" data-toggle="tab" href="#skills"><i class="fas fa-shield-alt fa-lg"></i> </a></li>
<li class="nav-item"><a class="nav-link" style="background: rgba(24,21,19,0.8); font-size: 1.2em; color: #C3B69B;" data-toggle="tab" href="#design"><i class="fas fa-tshirt fa-lg"></i></a></li>
<li class="nav-item"><a class="nav-link" style="background: rgba(24,21,19,0.8); font-size: 1.2em; color: #C3B69B;" data-toggle="tab" href="#inventory"><i class="fas fa-sack fa-lg"></i></a></li>
<li class="nav-item"><a class="nav-link" style="background: rgba(24,21,19,0.8); font-size: 1.2em; color: #C3B69B;" data-toggle="tab" href="#relationships"><i class="fas fa-users fa-lg"></i></a></li>
<li class="nav-item"><a class="nav-link" style="background: rgba(24,21,19,0.8); font-size: 1.2em; color: #C3B69B;" data-toggle="tab" href="#messages"><i class="fas fa-envelope fa-lg"></i></a></li>
</ul>
</div>
<!---- heading tabs END ---->
<!---- text display area (put as much text as you want, it will scroll) ------>
<div class="tab-content px-3 py-2">
<!--- tab 1 ----->
<div class="tab-pane active show fade" id="info">
<div class="container pt-3 px-2" style="height: 600px; overflow-y: auto">
<div class="display-4" style="font-size: 1.5em">Information</div>
<hr class="mt-2" style="background: #30302F;">
<!---- stats ----->
<div class="col-12 mb-4">
<!---- stat row 1 ---->
<div class="row">
<div class="col-lg-6">
<span style="color: #C3B69B"><b>stat</b></span>
<span class="pull-right">info</span>
</div>
<div class="col-lg-6">
<span style="color: #C3B69B"><b>stat</b></span>
<span class="pull-right">info</span>
</div>
</div>
<!---- stat row 1 END ---->
<hr class="my-1" style="background-color: #595555">
<!---- stat row 2---->
<div class="row">
<div class="col-lg-6">
<span style="color: #C3B69B"><b>stat</b></span>
<span class="pull-right">info</span>
</div>
<div class="col-lg-6">
<span style="color: #C3B69B"><b>stat</b></span>
<span class="pull-right">info</span>
</div>
</div>
<!---- stat row 2 END ---->
<hr class="my-1" style="background-color: #595555">
<!---- stat row 3 ----->
<div class="row">
<div class="col-lg-6">
<span style="color: #C3B69B"><b>stat</b></span>
<span class="pull-right">info</span>
</div>
<div class="col-lg-6">
<span style="color: #C3B69B"><b>stat</b></span>
<span class="pull-right">info</span>
</div>
</div>
<!---- stat row 3 END ---->
</div>
<!---- stats END ----->
<!---- background ---->
<div class="display-4" style="font-size: 1.5em; ">Personal Story</div>
<hr class="mt-2" style="background: #30302F;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim, erat non euismod lacinia, ante felis convallis lectus, quis convallis mi tellus vel nulla. Integer maximus ut augue nec consectetur. Vivamus auctor, nisi nec bibendum pulvinar, ex arcu dapibus felis, nec gravida ipsum justo eu ipsum. Curabitur id lorem sed ante hendrerit interdum. In eu porttitor est. In nulla ipsum, blandit varius massa et, cursus porttitor risus. Cras imperdiet tortor vel augue laoreet, sed vestibulum purus consequat. Nulla id dictum nulla. Nam tristique felis et felis semper convallis. Nulla quis ex sapien.</p>
<p>Suspendisse bibendum gravida dolor, non consequat eros laoreet et. Morbi ex nisl, tempus at mauris in, varius laoreet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla sodales, turpis at condimentum hendrerit, lacus nisl ullamcorper nibh, sed blandit enim elit ut nulla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Curabitur sodales dolor erat, ac molestie ante dictum eget. Fusce ut purus elementum, condimentum nisi id, convallis mi. Aenean vitae sagittis sapien. Quisque sit amet mi in leo posuere pulvinar.</p>
<p>Ex veniam. Consequat velitesse and consequuntur yet error but ullamco so accusantium, for nulla. Enim quisquam or nostrud or ea. Consequat eiusmod, sed and eaque quo velitesse. Perspiciatis vitae, proident, ea et. Inventore illum so eiusmod or inventore for dicta ad deserunt. Iure fugiat adipisicing. Id rem illo fugit and do yet corporis. </p>
<!---- background END ---->
</div>
</div>
<!--- tab 1 END ---->
<!--- tab 2 ---->
<div class="tab-pane show fade" id="skills">
<div class="container pt-3 px-2" style="height: 600px; overflow-y: auto">
<!---- skill 1 ---->
<!---- skill 1 image ---->
<div class="card pull-left rounded-0 mr-3" style="max-width: 75px; border: 1px solid #756B6A">
<img src="https://wiki.guildwars2.com/images/thumb/f/f1/Spear_of_Justice.png/72px-Spear_of_Justice.png">
</div>
<!---- skill 1 image END ---->
<!---- skill 1 name ----->
<div class="display-4" style="font-size: 1.2em">Skill 1</div>
<!---- skill 1 name EMD ----->
<!---- skill 1 description ---->
<p>Description lorem ipsum. Give a brief description of what this skill does, what it looks like, etc. Can be a short or long description. </p>
<!---- skill 1 description EMD ----->
<!---- skill 1 EMD ----->
<hr class="my-3" style="background: #30302F;">
<!---- skill 2 ---->
<!---- skill 2 image ---->
<div class="card pull-left rounded-0 mr-3" style="max-width: 75px; border: 1px solid #756B6A">
<img src="https://wiki.guildwars2.com/images/thumb/9/99/Zealot%27s_Flurry.png/72px-Zealot%27s_Flurry.png">
</div>
<!---- skill 2 image END ---->
<!---- skill 2 name ----->
<div class="display-4" style="font-size: 1.2em">Skill 2</div>
<!---- skill 2 name EMD ----->
<!---- skill 2 description ---->
<p>Description lorem ipsum. Give a brief description of what this skill does, what it looks like, etc. Can be a short or long description. </p>
<!---- skill 2 description EMD ----->
<!---- skill 2 EMD ----->
<hr class="my-3" style="background: #30302F;">
<!---- skill 3 ---->
<!---- skill 3 image ---->
<div class="card pull-left rounded-0 mr-3" style="max-width: 75px; border: 1px solid #756B6A">
<img src="https://wiki.guildwars2.com/images/thumb/f/fc/Hallowed_Ground.png/72px-Hallowed_Ground.png">
</div>
<!---- skill 3 image END ---->
<!---- skill 3 name ----->
<div class="display-4" style="font-size: 1.2em">Skill 3</div>
<!---- skill 3 name EMD ----->
<!---- skill 3 description ---->
<p>Description lorem ipsum. Give a brief description of what this skill does, what it looks like, etc. Can be a short or long description. </p>
<!---- skill 3 description EMD ----->
<!---- skill 3 EMD ----->
<hr class="my-3" style="background: #30302F;">
<!---- skill 4 ---->
<!---- skill 4 image ---->
<div class="card pull-left rounded-0 mr-3" style="max-width: 75px; border: 1px solid #756B6A">
<img src="https://wiki.guildwars2.com/images/thumb/c/cb/Wings_of_Resolve.png/72px-Wings_of_Resolve.png">
</div>
<!---- skill 4 image END ---->
<!---- skill 4 name ----->
<div class="display-4" style="font-size: 1.2em">Skill 4</div>
<!---- skill 4 name EMD ----->
<!---- skill 4 description ---->
<p>Description lorem ipsum. Give a brief description of what this skill does, what it looks like, etc. Can be a short or long description. </p>
<!---- skill 4 description EMD ----->
<!---- skill 4 EMD ----->
<hr class="my-3" style="background: #30302F;">
<!---- skill 5 ---->
<!---- skill 5 image ---->
<div class="card pull-left rounded-0 mr-3" style="max-width: 75px; border: 1px solid #756B6A">
<img src="https://wiki.guildwars2.com/images/thumb/4/4f/Mantra_of_Potence.png/72px-Mantra_of_Potence.png">
</div>
<!---- skill 5 image END ---->
<!---- skill 5 name ----->
<div class="display-4" style="font-size: 1.2em">Skill 5</div>
<!---- skill 5 name EMD ----->
<!---- skill 5 description ---->
<p>Description lorem ipsum. Give a brief description of what this skill does, what it looks like, etc. Can be a short or long description. </p>
<!---- skill 5 description EMD ----->
<!---- skill 5 EMD ----->
<!---- insert more skills above here ---->
</div>
</div>
<!--- tab 2 END --->
<!--- tab 3 ---->
<div class="tab-pane show fade" id="design">
<div class="container pt-3 px-2" style="height: 600px; overflow-y: auto">
<!--- wardrobe subheader ----->
<div class="display-4" style="font-size: 1.5em">Wardrobe</div>
<!--- wardrobe subheader END ----->
<hr class="mt-2" style="background: #30302F;">
<!--- wardrobe image ----->
<div class="card mx-3 rounded-0 pull-right">
<img src="https://media.discordapp.net/attachments/428328527285190656/856400205531185153/unknown.png?width=213&height=496">
</div>
<!--- wardrobe image ----->
<!--- wardrobe info ----->
<p>Description of outfit.</p>
<p>Totam unde and consequat eu so anim yet fugiat. Ipsam. Consequatur incididunt iure explicabo aperiam illo. Nequeporro ipsum so eaque si and tempor. Dolore. Aperiam laudantium amet elit. Consequuntur adipisicing aperiam magnam fugiat inventore quae.</p>
<ul class="fa-ul mt-2">
<li><span class="fa-li"><i class="fas fa-square" style="font-size: 0.4rem"></i></span>info 1</li>
<li><span class="fa-li"><i class="fas fa-square" style="font-size: 0.4rem"></i></span>info 2</li>
<li><span class="fa-li"><i class="fas fa-square" style="font-size: 0.4rem"></i></span>info 3</li>
<li><span class="fa-li"><i class="fas fa-square" style="font-size: 0.4rem"></i></span>info 4</li>
<li><span class="fa-li"><i class="fas fa-square" style="font-size: 0.4rem"></i></span>info 5</li>
<li><span class="fa-li"><i class="fas fa-square" style="font-size: 0.4rem"></i></span>info 6</li>
</ul>
<p>Veserunt suscipit. Vel officia aute and sint yet anim so ipsum. Lorem ullamco quisquam. Quis enim ex unde. Minim sequi ab. Totam nequeporro or dolores for incidunt so totam but veniam. Fugiat omnis so laborum aliquam. Si nequeporro. Amet. Laudantium corporis architecto, and qui. </p>
<!--- wardrobe info END ---->
</div>
</div>
<!--- tab 3 END ---->
<!--- tab 4 ---->
<div class="tab-pane show fade" id="inventory">
<div class="container pt-3 px-2" style="height: 600px; overflow-y: auto">
<!---- item 1 ---->
<!---- item 1 image ---->
<div class="card pull-left rounded-0 mr-3" style="max-width: 75px; border: 1px solid #756B6A">
<img src="https://wiki.guildwars2.com/images/1/18/Storm_Bow.png">
</div>
<!---- item 1 image END ---->
<!---- item 1 name ----->
<div class="display-4" style="font-size: 1.2em">Item 1</div>
<!---- item 1 name EMD ----->
<!---- item 1 description ---->
<p>Description lorem ipsum. Give a brief description of what this item does, what it looks like, etc. Can be a short or long description. </p>
<!---- item 1 description EMD ----->
<!---- item 1 EMD ----->
<hr class="my-3" style="background: #30302F;">
<!---- item 2 ---->
<!---- item 2 image ---->
<div class="card pull-left rounded-0 mr-3" style="max-width: 75px; border: 1px solid #756B6A">
<img src="https://wiki.guildwars2.com/images/d/d1/Mordrem_Splinter.png">
</div>
<!---- item 2 image END ---->
<!---- item 2 name ----->
<div class="display-4" style="font-size: 1.2em">Item 2</div>
<!---- item 2 name EMD ----->
<!---- item 2 description ---->
<p>Description lorem ipsum. Give a brief description of what this item does, what it looks like, etc. Can be a short or long description. </p>
<!---- item 2 description EMD ----->
<!---- item 2 EMD ----->
<hr class="my-3" style="background: #30302F;">
<!---- item 3 ---->
<!---- item 3 image ---->
<div class="card pull-left rounded-0 mr-3" style="max-width: 75px; border: 1px solid #756B6A">
<img src="https://wiki.guildwars2.com/images/5/5f/Bud_of_the_Pale_Tree.png">
</div>
<!---- item 3 image END ---->
<!---- item 3 name ----->
<div class="display-4" style="font-size: 1.2em">Item 3</div>
<!---- item 3 name EMD ----->
<!---- item 3 description ---->
<p>Description lorem ipsum. Give a brief description of what this item does, what it looks like, etc. Can be a short or long description. </p>
<!---- item 3 description EMD ----->
<!---- item 3 EMD ----->
<hr class="my-3" style="background: #30302F;">
<!---- item 4 ---->
<!---- item 4 image ---->
<div class="card pull-left rounded-0 mr-3" style="max-width: 75px; border: 1px solid #756B6A">
<img src="https://wiki.guildwars2.com/images/e/e2/Seaweed_Bomb.png">
</div>
<!---- item 4 image END ---->
<!---- item 4 name ----->
<div class="display-4" style="font-size: 1.2em">Item 4</div>
<!---- item 4 name EMD ----->
<!---- item 4 description ---->
<p>Description lorem ipsum. Give a brief description of what this item does, what it looks like, etc. Can be a short or long description. </p>
<!---- item 4 description EMD ----->
<!---- item 4 EMD ----->
<hr class="my-3" style="background: #30302F;">
<!---- item 5 ---->
<!---- item 5 image ---->
<div class="card pull-left rounded-0 mr-3" style="max-width: 75px; border: 1px solid #756B6A">
<img src="https://wiki.guildwars2.com/images/2/2c/Firefly_in_a_Jar.png">
</div>
<!---- item 5 image END ---->
<!---- item 5 name ----->
<div class="display-4" style="font-size: 1.2em">Item 5</div>
<!---- item 5 name EMD ----->
<!---- item 5 description ---->
<p>Description lorem ipsum. Give a brief description of what this item does, what it looks like, etc. Can be a short or long description. </p>
<!---- item 5 description EMD ----->
<!---- item 5 EMD ----->
<!---- insert more items above here ---->
</div>
</div>
<!--- tab 4 END --->
<!--- tab 5 ---->
<div class="tab-pane show fade" id="relationships">
<div class="container pt-3 px-2" style="height: 600px; overflow-y: auto">
<!---- relationship 1 ----->
<!---- relationship 1 image ---->
<div class="card pull-right rounded-0 mx-3" style="max-width: 150px; border: 1px solid #756B6A">
<img src="http://puu.sh/HQwjJ/a7ff1acfda.png">
</div>
<!---- relationship 1 image END ---->
<div class="display-4 mb-2" style="font-size: 1.5em">
<a href="#URL">Name</a> // <i>relationship</i></div>
<p>Describe the relationship here.</p>
<p>Quae perspiciatis yet voluptas nequeporro ut consequat and culpa. Beatae. Numquam fugit for beatae, aliquid for nequeporro ullam eu. Inventore labore and laudantium or ab and ad. Tempor qui or error, or laborum or labore, and totam, or sunt. </p>
<!---- relationship 1 END ----->
<hr class="my-3" style="background: #30302F;">
<!---- relationship 2 ----->
<!---- relationship 2 image ---->
<div class="card pull-right rounded-0 mx-3" style="max-width: 150px; border: 1px solid #756B6A">
<img src="http://puu.sh/HQwjJ/a7ff1acfda.png">
</div>
<!---- relationship 2 image END ---->
<div class="display-4 mb-2" style="font-size: 1.5em">
<a href="#URL">Name</a> // <i>relationship</i></div>
<p>Describe the relationship here.</p>
<p>Quae perspiciatis yet voluptas nequeporro ut consequat and culpa. Beatae. Numquam fugit for beatae, aliquid for nequeporro ullam eu. Inventore labore and laudantium or ab and ad. Tempor qui or error, or laborum or labore, and totam, or sunt. </p>
<!---- relationship 2 END ----->
<hr class="my-3" style="background: #30302F;">
<!---- relationship 3 ----->
<!---- relationship 3 image ---->
<div class="card pull-right rounded-0 mx-3" style="max-width: 150px; border: 1px solid #756B6A">
<img src="http://puu.sh/HQwjJ/a7ff1acfda.png">
</div>
<!---- relationship 3 image END ---->
<div class="display-4 mb-2" style="font-size: 1.5em">
<a href="#URL">Name</a> // <i>relationship</i></div>
<p>Describe the relationship here.</p>
<p>Quae perspiciatis yet voluptas nequeporro ut consequat and culpa. Beatae. Numquam fugit for beatae, aliquid for nequeporro ullam eu. Inventore labore and laudantium or ab and ad. Tempor qui or error, or laborum or labore, and totam, or sunt. </p>
<!---- relationship 3 END ----->
<!---- insert more relationships above here ---->
</div>
</div>
<!---- tab 5 END ---->
<!--- tab 6 ----->
<div class="tab-pane show fade" id="messages">
<div class="container pt-3 px-2" style="height: 600px; overflow-y: auto; overflow-x: hidden ">
<div class="display-4" style="font-size: 1.5em">Messages</div>
<hr class="mt-2" style="background: #30302F;">
<!---- message 1 ----->
<!---- sender/receiver info ----->
<div class="row mb-2">
<div class="col-1" style="color: #C3B69B">
<b>From:</b>
<br>
<b>To:</b>
</div>
<div class="col">
Name
<br>
Name
</div>
</div>
<!---- sender/receiver info END ----->
<!---- message 1 text ----->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim, erat non euismod lacinia, ante felis convallis lectus, quis convallis mi tellus vel nulla. Integer maximus ut augue nec consectetur. Vivamus auctor, nisi nec bibendum pulvinar, ex arcu dapibus felis, nec gravida ipsum justo eu ipsum. Curabitur id lorem sed ante hendrerit interdum. In eu porttitor est. In nulla ipsum, blandit varius massa et, cursus porttitor risus. Cras imperdiet tortor vel augue laoreet, sed vestibulum purus consequat. Nulla id dictum nulla. Nam tristique felis et felis semper convallis. Nulla quis ex sapien.</p>
<!---- message 1 text ----->
<!---- message 1 END ----->
<hr class="mx-4 my-3" style="background: #30302F;">
<!---- message 2 ----->
<!---- sender/receiver info ----->
<div class="row mb-2">
<div class="col-1" style="color: #C3B69B">
<b>From:</b>
<br>
<b>To:</b>
</div>
<div class="col">
Name
<br>
Name
</div>
</div>
<!---- sender/receiver info END ----->
<!---- message 2 text ----->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim, erat non euismod lacinia, ante felis convallis lectus, quis convallis mi tellus vel nulla. Integer maximus ut augue nec consectetur. Vivamus auctor, nisi nec bibendum pulvinar, ex arcu dapibus felis, nec gravida ipsum justo eu ipsum. Curabitur id lorem sed ante hendrerit interdum. In eu porttitor est. In nulla ipsum, blandit varius massa et, cursus porttitor risus. Cras imperdiet tortor vel augue laoreet, sed vestibulum purus consequat. Nulla id dictum nulla. Nam tristique felis et felis semper convallis. Nulla quis ex sapien.</p>
<!---- message 2 text ----->
<!---- message 2 END ----->
<hr class="mx-4 my-3" style="background: #30302F;">
<!---- message 3 ----->
<!---- sender/receiver info ----->
<div class="row mb-2">
<div class="col-1" style="color: #C3B69B">
<b>From:</b>
<br>
<b>To:</b>
</div>
<div class="col">
Name
<br>
Name
</div>
</div>
<!---- sender/receiver info END ----->
<!---- message 3 text ----->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim, erat non euismod lacinia, ante felis convallis lectus, quis convallis mi tellus vel nulla. Integer maximus ut augue nec consectetur. Vivamus auctor, nisi nec bibendum pulvinar, ex arcu dapibus felis, nec gravida ipsum justo eu ipsum. Curabitur id lorem sed ante hendrerit interdum. In eu porttitor est. In nulla ipsum, blandit varius massa et, cursus porttitor risus. Cras imperdiet tortor vel augue laoreet, sed vestibulum purus consequat. Nulla id dictum nulla. Nam tristique felis et felis semper convallis. Nulla quis ex sapien.</p>
<!---- message 3 text ----->
<!---- message 3 END ----->
<!---- insert more messages above here ---->
</div>
</div>
<!--- tab 6 END ---->
</div>
</div>
</div>
<!---- info box ---->
</div>
<!--- credits, do not remove! --->
<a class="d-block text-center pt-2" style="font-size:12px; color: #849E72" href="https://toyhou.se/Zylphide"><i class="fas fa-dragon fa-flip-horizontal" data-placement="left" title="code by Zylphide"></i></a>
Recent Images
No images.