Profile
<!--==========================================
[17] MILKSHAKE by TOGO
-- -- -- -- -- -- -- -- -- -- -- -- -- --
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!
-- -- -- -- -- -- -- -- -- -- -- -- -- --
this code has two custom accent colours;
the easiest way to change them is to
mark the colour code below, and
then use ctrl+f to find and replace
all instances of it in the code.
accent :
#b895de
accent gradient :
#dda2e8
(literally just a little hue change in
the bottom right lmao)
-- -- -- -- -- -- -- -- -- -- -- -- -- --
> 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!
===========================================-->
<!-- MAIN CONTAINER =======================-->
<div class="my-lg-5 mx-auto" style="max-width: 800px;">
<div class="card pt-5 pt-lg-2 px-2 pr-lg-0 pb-2 border-0" style="background-image: linear-gradient(to bottom right, #b895de 75%, #dda2e8); border-radius: 20px; box-shadow: 0 0 20px rgba(0,0,0,.2);">
<div class="row no-gutters flex-lg-row-reverse">
<!-- SIDEBAR ==============================-->
<div class="col-lg-auto align-self-center flex-column align-items-center px-4">
<!-- ICON =================================-->
<div class="mb-3" style="border: 3px solid rgba(255,255,255,.2); border-radius: 18px;">
<img style="width: 200px; height: 100px; border-radius: 15px; object-fit: cover; object-position: 50% 60%;"
src="IMAGE URL">
<!-- any size works, will auto-crop -->
</div>
<!-- TAB BUTTONS ==========================-->
<ul class="nav row no-gutters mx-auto mb-3 mb-lg-0" style="width: 180px;">
<li class="nav-item col-4" style="padding: 5px;">
<a href="#one" class="nav-link active btn btn-outline-primary d-flex justify-content-center align-items-center text-white border-0" style="height: 50px; font-size: 20px; border-radius: 15px; box-shadow: none; mix-blend-mode: luminosity;" data-toggle="tab">
<i class="fal fa-id-card"></i>
</a>
</li>
<li class="nav-item col-4" style="padding: 5px;">
<a href="#two" class="nav-link btn btn-outline-primary d-flex justify-content-center align-items-center text-white border-0" style="height: 50px; font-size: 20px; border-radius: 15px; box-shadow: none; mix-blend-mode: luminosity;" data-toggle="tab">
<i class="fal fa-sliders-h"></i>
</a>
</li>
<li class="nav-item col-4" style="padding: 5px;">
<a href="#three" class="nav-link btn btn-outline-primary d-flex justify-content-center align-items-center text-white border-0" style="height: 50px; font-size: 20px; border-radius: 15px; box-shadow: none; mix-blend-mode: luminosity;" data-toggle="tab">
<i class="fal fa-swatchbook"></i>
</a>
</li>
<li class="nav-item col-4" style="padding: 5px;">
<a href="#four" class="nav-link btn btn-outline-primary d-flex justify-content-center align-items-center text-white border-0" style="height: 50px; font-size: 20px; border-radius: 15px; box-shadow: none; mix-blend-mode: luminosity;" data-toggle="tab">
<i class="fal fa-books"></i>
</a>
</li>
<li class="nav-item col-4" style="padding: 5px;">
<a href="#five" class="nav-link btn btn-outline-primary d-flex justify-content-center align-items-center text-white border-0" style="height: 50px; font-size: 20px; border-radius: 15px; box-shadow: none; mix-blend-mode: luminosity;" data-toggle="tab">
<i class="fal fa-backpack"></i>
</a>
</li>
<li class="nav-item col-4" style="padding: 5px;">
<a href="https://toyhou.se/Togo" class="nav-link btn btn-outline-primary d-flex justify-content-center align-items-center text-white border-0" style="height: 50px; font-size: 20px; border-radius: 15px; box-shadow: none; mix-blend-mode: luminosity;">
<i class="fal fa-code"></i>
</a>
</li>
</ul>
</div>
<!-- TABS =================================-->
<div class="col-lg">
<div class="card p-4 text-muted border-0" style="font-size: 12px; letter-spacing: 1px; border-radius: 15px;">
<div id="tabs" class="tab-content">
<!-- INTRO TAB ============================-->
<div id="one" class="tab-pane fade show active">
<div class="row">
<div class="col">
<p class="font-italic" style="font-family: 'Courier New', monospace; font-size: 18px; letter-spacing: 2px;">
<span style="color: #b895de;">N</span>AME <span style="color: #b895de;">S</span>URNAME !
<!-- tab title. make sure to separate the first letters like above! -->
</p>
</div>
<div class="col-auto" style="font-size: 70px; color: #b895de;">
<i class="fal fa-heart" style="position: absolute; top: -10px; right: 20px; opacity: .1;"></i>
<!-- top right icon -->
</div>
</div>
<hr class="mt-2 mb-3" style="border-top-width: 2px; border-top-style: dashed;">
<div class="pr-2" style="height: 400px; overflow-y: auto;">
<div style="overflow-x: hidden;">
<div class="d-flex d-lg-block flex-column">
<!-- FLOATING IMAGE =======================-->
<img class="float-right align-self-center mb-3 mb-lg-0" style="width: 200px; border-radius: 10px;"
src="IMAGE URL">
<!-- TEXT BLOCK ===========================-->
<p>
You can write a little about your character here! This paragraph will go above the quote block.
</p>
<div class="mt-lg-n2 mb-3 mb-lg-2 p-3 font-italic text-body bg-faded rounded-0" style="font-family: 'Courier New', monospace; font-size: 14px; border-radius: 10px;">
A quote. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<p>
Proin malesuada felis vitae purus dignissim interdum a eu massa. Sed tortor quam, gravida non ligula porta, ultricies tincidunt mi. Pellentesque pulvinar quam id eleifend molestie. Mauris a sollicitudin tellus, sed ultrices metus. Nunc gravida varius sapien, vel eleifend metus suscipit ac. Pellentesque dictum dolor non sapien bibendum, ultrices pharetra odio sollicitudin. Fusce venenatis cursus sagittis. Vivamus tortor nisl, ultricies in vehicula et, pellentesque non ligula.
</p>
</div>
<!-- AESTHETIC ============================-->
<div class="row justify-content-center pt-3 mx-n2" style="clear: both;">
<div class="col-6 col-lg mb-3 mb-lg-0 px-2">
<div class="bg-faded" style="padding-bottom: 65%;
background-image: url(IMAGE URL);
background-size: cover; background-position: center; border-radius: 10px;"></div>
</div>
<div class="col-6 col-lg mb-3 mb-lg-0 px-2">
<div class="bg-faded" style="padding-bottom: 65%;
background-image: url(IMAGE URL);
background-size: cover; background-position: center; border-radius: 10px;"></div>
</div>
<div class="col-6 col-lg mb-3 mb-lg-0 px-2">
<div class="bg-faded" style="padding-bottom: 65%;
background-image: url(IMAGE URL);
background-size: cover; background-position: center; border-radius: 10px;"></div>
</div>
</div>
</div>
</div>
</div>
<!-- ABOUT TAB ============================-->
<div id="two" class="tab-pane fade">
<div class="row">
<div class="col">
<p class="font-italic" style="font-family: 'Courier New', monospace; font-size: 18px; letter-spacing: 2px;">
<span style="color: #b895de;">A</span>BOUT
</p>
</div>
<div class="col-auto" style="font-size: 70px; color: #b895de;">
<i class="fal fa-heart-rate" style="position: absolute; top: -10px; right: 20px; opacity: .1;"></i>
</div>
</div>
<hr class="mt-2 mb-3" style="border-top-width: 2px; border-top-style: dashed;">
<div class="pr-2" style="height: 400px; overflow-y: auto;">
<div style="overflow-x: hidden;">
<div class="mb-3 py-3 px-2 text-uppercase font-italic text-body bg-faded" style="font-family: 'Courier New', monospace; font-size: 14px; border-radius: 10px;">
<!-- PERSONALITY SLIDERS =====================
> edit the width (0-100%) to slide the
dot to the left or right !
===========================================-->
<div class="row no-gutters align-items-center mb-2">
<div class="col text-right text-truncate">
Reserved
</div>
<div class="col-6 col-lg-7 px-4">
<div class="progress" style="height: 3px; margin-top: 2px; overflow: visible;">
<div class="progress-bar" style="height: 100%;
width: 50%;
background-color: transparent;"></div>
<div style="background-color: #b895de; height: 7px; width: 7px; margin: -2px; border-radius: 50%;"></div>
</div>
</div>
<div class="col text-truncate">
Outgoing
</div>
</div>
<!------------------------------------------->
<div class="row no-gutters align-items-center mb-2">
<div class="col text-right text-truncate">
Immature
</div>
<div class="col-6 col-lg-7 px-4">
<div class="progress" style="height: 3px; margin-top: 2px; overflow: visible;">
<div class="progress-bar" style="height: 100%;
width: 50%;
background-color: transparent;"></div>
<div style="background-color: #b895de; height: 7px; width: 7px; margin: -2px; border-radius: 50%;"></div>
</div>
</div>
<div class="col text-truncate">
Serious
</div>
</div>
<!------------------------------------------->
<div class="row no-gutters align-items-center mb-2">
<div class="col text-right text-truncate">
Timid
</div>
<div class="col-6 col-lg-7 px-4">
<div class="progress" style="height: 3px; margin-top: 2px; overflow: visible;">
<div class="progress-bar" style="height: 100%;
width: 50%;
background-color: transparent;"></div>
<div style="background-color: #b895de; height: 7px; width: 7px; margin: -2px; border-radius: 50%;"></div>
</div>
</div>
<div class="col text-truncate">
Brave
</div>
</div>
<!------------------------------------------->
<div class="row no-gutters align-items-center mb-2">
<div class="col text-right text-truncate">
Sincere
</div>
<div class="col-6 col-lg-7 px-4">
<div class="progress" style="height: 3px; margin-top: 2px; overflow: visible;">
<div class="progress-bar" style="height: 100%;
width: 50%;
background-color: transparent;"></div>
<div style="background-color: #b895de; height: 7px; width: 7px; margin: -2px; border-radius: 50%;"></div>
</div>
</div>
<div class="col text-truncate">
Deceptive
</div>
</div>
<!------------------------------------------->
<div class="row no-gutters align-items-center mb-2">
<div class="col text-right text-truncate">
Sensitive
</div>
<div class="col-6 col-lg-7 px-4">
<div class="progress" style="height: 3px; margin-top: 2px; overflow: visible;">
<div class="progress-bar" style="height: 100%;
width: 50%;
background-color: transparent;"></div>
<div style="background-color: #b895de; height: 7px; width: 7px; margin: -2px; border-radius: 50%;"></div>
</div>
</div>
<div class="col text-truncate">
Tough
</div>
</div>
<!------------------------------------------->
<div class="row no-gutters align-items-center mb-2">
<div class="col text-right text-truncate">
Lazy
</div>
<div class="col-6 col-lg-7 px-4">
<div class="progress" style="height: 3px; margin-top: 2px; overflow: visible;">
<div class="progress-bar" style="height: 100%;
width: 50%;
background-color: transparent;"></div>
<div style="background-color: #b895de; height: 7px; width: 7px; margin: -2px; border-radius: 50%;"></div>
</div>
</div>
<div class="col text-truncate">
Diligent
</div>
</div>
<!------------------------------------------->
</div>
<!-- TRAITS ==================================
> divided into positive, neutral
and negative
> you can copy + paste more lines
into each list!
===========================================-->
<div class="row no-gutters mx-n2">
<div class="col-lg-4 mb-3 px-2">
<div class="pt-3 px-3 pb-2 text-body bg-faded" style="border-radius: 10px;">
<p class="mb-2">
<i class="fas fa-plus-circle mr-1" style="color: #b895de;"></i>
Positive Trait
</p>
<p class="mb-2">
<i class="fas fa-plus-circle mr-1" style="color: #b895de;"></i>
Positive Trait
</p>
<p class="mb-2">
<i class="fas fa-plus-circle mr-1" style="color: #b895de;"></i>
Positive Trait
</p>
</div>
</div>
<div class="col-lg-4 mb-3 px-2">
<div class="pt-3 px-3 pb-2 text-body bg-faded" style="border-radius: 10px;">
<p class="mb-2">
<i class="fas fa-dot-circle mr-1" style="color: #b895de;"></i>
Neutral Trait
</p>
<p class="mb-2">
<i class="fas fa-dot-circle mr-1" style="color: #b895de;"></i>
Neutral Trait
</p>
<p class="mb-2">
<i class="fas fa-dot-circle mr-1" style="color: #b895de;"></i>
Neutral Trait
</p>
</div>
</div>
<div class="col-lg-4 mb-3 px-2">
<div class="pt-3 px-3 pb-2 text-body bg-faded" style="border-radius: 10px;">
<p class="mb-2">
<i class="fas fa-minus-circle mr-1" style="color: #b895de;"></i>
Negative Trait
</p>
<p class="mb-2">
<i class="fas fa-minus-circle mr-1" style="color: #b895de;"></i>
Negative Trait
</p>
<p class="mb-2">
<i class="fas fa-minus-circle mr-1" style="color: #b895de;"></i>
Negative Trait
</p>
</div>
</div>
</div>
<!-- TEXT BLOCK ===========================-->
<p>
In aliquam ac mauris eu ultrices. Pellentesque vitae molestie leo. Nulla ipsum ex, lobortis nec volutpat eget, facilisis a magna. Nulla eros diam, vulputate lacinia consequat vel, pharetra vel mi. Curabitur in laoreet metus, sed semper ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus euismod accumsan elit, nec sollicitudin tortor congue et.
</p>
<!-- LIKES / DISLIKES =====================-->
<div class="row no-gutters mx-n2">
<div class="col-lg-6 mt-3 px-2">
<div class="pt-3 px-3 pb-2 text-body bg-faded" style="border-radius: 10px;">
<p class="mb-2">
<i class="fas fa-check-circle mr-1" style="color: #b895de;"></i>
Like
</p>
<p class="mb-2">
<i class="fas fa-check-circle mr-1" style="color: #b895de;"></i>
Like
</p>
<p class="mb-2">
<i class="fas fa-check-circle mr-1" style="color: #b895de;"></i>
Like
</p>
</div>
</div>
<div class="col-lg-6 mt-3 px-2">
<div class="pt-3 px-3 pb-2 text-body bg-faded" style="border-radius: 10px;">
<p class="mb-2">
<i class="fas fa-times-circle mr-1" style="color: #b895de;"></i>
Dislike
</p>
<p class="mb-2">
<i class="fas fa-times-circle mr-1" style="color: #b895de;"></i>
Dislike
</p>
<p class="mb-2">
<i class="fas fa-times-circle mr-1" style="color: #b895de;"></i>
Dislike
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- DESIGN TAB ===========================-->
<div id="three" class="tab-pane fade">
<div class="row">
<div class="col">
<p class="font-italic" style="font-family: 'Courier New', monospace; font-size: 18px; letter-spacing: 2px;">
<span style="color: #b895de;">D</span>ESIGN
</p>
</div>
<div class="col-auto" style="font-size: 70px; color: #b895de;">
<i class="fal fa-palette" style="position: absolute; top: -10px; right: 20px; opacity: .1;"></i>
</div>
</div>
<hr class="mt-2 mb-3" style="border-top-width: 2px; border-top-style: dashed;">
<div class="pr-2" style="height: 400px; overflow-y: auto;">
<div style="overflow-x: hidden;">
<div class="row no-gutters mx-n2">
<div class="col-lg-6 px-2">
<!-- IMAGE ================================-->
<div class="bg-faded" style="height: 400px;
background-image: url(IMAGE URL);
background-size: cover; background-position: center; border-radius: 10px;"></div>
</div>
<!-- PALETTE ==============================-->
<div class="col-lg-6 px-2">
<div class="row no-gutters mt-3 ml-lg-n5 mb-3" style="height: 20px; border-radius: 10px; overflow: hidden;">
<!-- copy + paste as many blocks as you need ! -->
<div class="col" style="background-color: #cccccc;"></div>
<div class="col" style="background-color: #aaaaaa;"></div>
<div class="col" style="background-color: #999999;"></div>
<div class="col" style="background-color: #777777;"></div>
<div class="col" style="background-color: #555555;"></div>
</div>
<!-- DESIGN NOTES =========================-->
<ul class="mb-0 pl-3 pb-2" style="color: #b895de;">
<li class="mb-2">
<span class="text-muted">
Design note
</span>
</li>
<li class="mb-2">
<span class="text-muted">
Another note
</span>
</li>
<li class="mb-2">
<span class="text-muted">
And another note
</span>
</li>
</ul>
<!-- DESIGN INFO ==========================-->
<div class="p-3 text-body bg-faded" style="border-radius: 10px;">
<!------------------------------------------->
<div class="row mb-1">
<div class="col-5 font-italic" style="font-family: 'Courier New', monospace; font-size: 14px;">
DESIGNER
</div>
<div class="col text-right">
<a href="DESIGNER URL" style="color: #b895de;">
Designer Name
</a>
</div>
</div>
<!------------------------------------------->
<div class="row mb-1">
<div class="col-5 font-italic" style="font-family: 'Courier New', monospace; font-size: 14px;">
WORTH
</div>
<div class="col text-right">
$0
</div>
</div>
<!------------------------------------------->
<div class="row mb-1">
<div class="col-5 font-italic" style="font-family: 'Courier New', monospace; font-size: 14px;">
STATUS
</div>
<div class="col text-right">
NFT/S
</div>
</div>
<!------------------------------------------->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- HISTORY TAB ==========================-->
<div id="four" class="tab-pane fade">
<div class="row">
<div class="col">
<p class="font-italic" style="font-family: 'Courier New', monospace; font-size: 18px; letter-spacing: 2px;">
<span style="color: #b895de;">H</span>ISTORY
</p>
</div>
<div class="col-auto" style="font-size: 70px; color: #b895de;">
<i class="fal fa-pen-nib" style="position: absolute; top: -10px; right: 20px; opacity: .1;"></i>
</div>
</div>
<hr class="mt-2 mb-3" style="border-top-width: 2px; border-top-style: dashed;">
<div class="pr-2" style="height: 400px; overflow-y: auto;">
<div style="overflow-x: hidden;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget nisi turpis. Ut ac odio dignissim, egestas nisl et, cursus tortor. In ligula lacus, hendrerit id urna in, feugiat elementum leo. Donec porta hendrerit faucibus. Donec quis convallis metus. Sed vehicula nulla ac tincidunt rutrum. Suspendisse potenti. Donec ipsum nisi, accumsan eget convallis vel, auctor nec nunc.
</p>
<p>
Phasellus ac elementum felis. Maecenas volutpat in nisl quis tempor. Integer euismod eros vitae dolor ultricies luctus. Phasellus condimentum sollicitudin lectus, a porttitor enim vulputate ac. Praesent gravida, neque at luctus convallis, nisi massa porta quam, nec porttitor quam turpis ut magna. Nam ac hendrerit felis. Vestibulum faucibus magna orci, id congue metus euismod at.
</p>
<p class="p-2 font-italic text-body bg-faded" style="font-family: 'Courier New', monospace; font-size: 15px; letter-spacing: 2px; border-radius: 10px;">
SUBHEADING
</p>
<p>
Proin a libero et justo molestie rhoncus eget suscipit erat. Sed volutpat lectus id est placerat dapibus. Pellentesque accumsan blandit dolor, in lacinia neque. Cras sollicitudin ornare congue. Sed arcu enim, sagittis vitae posuere sed, tristique vitae ligula. Curabitur et mauris eleifend, luctus urna finibus, dictum justo. Nullam eu sapien vel lorem semper imperdiet. Sed in urna aliquet, suscipit odio vitae, faucibus velit. Duis vitae varius nisi. Vestibulum fringilla dolor eu vulputate porta. Morbi viverra ultricies posuere. Donec quis felis mi. Donec rhoncus quam vel tempus egestas. Donec rutrum condimentum risus at ornare.
</p>
<p class="p-2 font-italic text-body bg-faded" style="font-family: 'Courier New', monospace; font-size: 15px; letter-spacing: 2px; border-radius: 10px;">
SUBHEADING
</p>
<p>
Sed tristique aliquet enim eu pharetra. In dictum vitae turpis et cursus. Praesent luctus nec urna a pharetra. Cras ullamcorper, felis vel hendrerit auctor, dolor lacus vehicula eros, et pulvinar augue leo et tellus. Suspendisse ultricies, odio sed congue ultricies, ligula quam mattis elit, ac tincidunt erat lacus sed tellus. Ut viverra nulla ante, ut ullamcorper sem lobortis eu. Aenean tincidunt massa sit amet nisl semper faucibus. Suspendisse nec ornare eros. Cras volutpat, lacus non porta tempor, eros nunc efficitur libero, sit amet tincidunt nibh ipsum vulputate massa. In viverra leo quis arcu porttitor viverra. Maecenas imperdiet odio ac egestas eleifend. Sed fermentum aliquam auctor. Etiam sit amet dolor et ipsum euismod semper eu ac diam. Vivamus finibus ultrices lectus ac congue. Nam et imperdiet metus.
</p>
</div>
</div>
</div>
<!-- TRIVIA TAB ===========================-->
<div id="five" class="tab-pane fade">
<div class="row">
<div class="col">
<p class="font-italic" style="font-family: 'Courier New', monospace; font-size: 18px; letter-spacing: 2px;">
<span style="color: #b895de;">T</span>RIVIA
</p>
</div>
<div class="col-auto" style="font-size: 70px; color: #b895de;">
<i class="fal fa-puzzle-piece" style="position: absolute; top: -10px; right: 20px; opacity: .1;"></i>
</div>
</div>
<hr class="mt-2 mb-3" style="border-top-width: 2px; border-top-style: dashed;">
<div class="pr-2" style="height: 400px; overflow-y: auto;">
<div style="overflow-x: hidden;">
<div class="row no-gutters flex-lg-row-reverse mx-n2">
<div class="col-lg-6 mb-3 mb-lg-0 px-2">
<!-- IMAGE ================================-->
<div class="bg-faded" style="height: 400px;
background-image: url(IMAGE URL);
background-size: cover; background-position: center; border-radius: 10px;"></div>
</div>
<div class="col-lg-6 px-2">
<!-- TRIVIA ===============================-->
<ul class="pl-3" style="color: #b895de;">
<li class="mb-2">
<span class="text-muted">
A piece of trivia.
</span>
</li>
<li class="mb-2">
<span class="text-muted">
Morbi dignissim sem et augue lobortis, ut finibus lorem vestibulum. Mauris eros erat, aliquam sit amet convallis ac, semper sed elit.
</span>
</li>
<li class="mb-2">
<span class="text-muted">
Donec sit amet pharetra turpis. Pellentesque in pharetra lorem.
</span>
</li>
<li class="mb-2">
<span class="text-muted">
Suspendisse ultrices mattis elementum. Nullam imperdiet at dolor et tempus.
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Recent Images
No images.