[F2U] ♱ VGEN
created by:Praying
HTMLCustom ColorsMiscellaneous
Copy
<!-- ✦✦ 【F2U】VGEN by diadem inspired by VGEN.co
❥ Code Terms of Use: https://toyhou.se/32638528.
❥ Troubleshoot Server: https://discord.gg/QdyvxFjuhe
꒰ა ˚₊ ✧・┈・╴﹕꒰ ᐢ｡- ༝ -｡ᐢ ꒱﹕╴・┈・𐑺 ‧₊˚໒꒱
♥︎ NOTES:
- This code uses Variables AND Normal accents. Meaning
that if you edit the hex/rgba codes and font family type,
it'll change every instance of the colours/fonts for the rest
of the code. For accents, you are suggested to use CMD+F
[MAC] / CTRL+F [WIN].
- As a reminder, do not remove the parenthesis for image
URLs. This is to make sure they work.
- Be sure to adjust anything that looks wrong on your end
We may work on separate ratio of computer. Feel free to
change anything you see fit.
- This code has a lot of modals and parts, I tried to
keep it as easy to follow as possible. Copy and paste things
if needded. Due to the size and complexity, it is marked
advanced.
꒰ა ˚₊ ✧・┈・╴﹕꒰ ᐢ｡- ༝ -｡ᐢ ꒱﹕╴・┈・𐑺 ‧₊˚໒꒱
♥︎ DESCRIPTION OF VARIABLES:
this is only to tell what each variable is responsible for and to make your editing a little easier.
outer-bg: encompasing bg. most used
shadow: box shadow for comm boxes
border: most seen border colour
comm-bg: bg for the frontcard
comm-bg-alt: alt bg colour for comm cards
follow: the follow button background
follow-text: follow button text
open: Green bg for Open Commissions
slots-open: number of comm slots you have open
waitlist: Bg for Waitlist comms (ref Vgen.co)
closed: bg for closed comms
btn: normal button background
text: primary text color (closed uses this as a border)
alt-text: alternative text color
alt-link: alt link colour; often seen in paragraphs
mute: muted text colour
link: primary link colour
soft-grey: considered secondary text colour
active: [FOR THE COMM ROW] Highlights Commissions
inactive: inactive items text colour
꒰ა ˚₊ ✧・┈・╴﹕꒰ ᐢ｡- ༝ -｡ᐢ ꒱﹕╴・┈・𐑺 ‧₊˚໒꒱
♥︎ VERY ACCENTED COLOURS:
Colours so accent, no variable is needed
- Dividers: #33343D
- Chevron bgs: rgba(0,0,0,0.18)
- Scrollbar-color: #75757C #2C2D37
- Modal background:rgba(0,0,0,0.18)
- Badge background: rgba(255,255,255,0.04)
꒰ა ˚₊ ✧・┈・╴﹕꒰ ᐢ｡- ༝ -｡ᐢ ꒱﹕╴・┈・𐑺 ‧₊˚໒꒱
♥︎ VGEN ICON GUIDE-ISH + QUICK FINDS:
Here are some more used icons I could find that may be compatible with toyhouse without losing Vgen charm. Along with some quick finds!
- open - <i class="fa-sharp far fa-check fa-fw"></i>
Available for new projects
- waitlist - <i class="fa-sharp far fa-list-check fa-fw"></i>
Waitlist open
> <i class="fa-sharp far fa-bell fa-fw"></i> = get notified
- closed - <i class="fa-sharp far fa-xmark fa-fw"></i>
Not accepting new requests
> USERNAME/subscribe = put your username in 'USERNAME'
> WORKQUEUE = put your trello, vgen queue, etc or remove the btn
> VGENLNK = put your vgen link so people can peep your ratings
> TOS = link your tos
> VGEN_OR_MSG_LNK = put your vgen lnk or your toyhouse messages link (https://toyhou.se/~messages/create/USERNAME)
>IMGLNK = put an img here
------>
<!-- ======== ✦✦ Variables! Edit here ============ ✦✦ -->
<div id="content-variables" style="
--outer-bg:#21222D;
--shadow:rgba(24,25,38,0.63);
--border: #33343D;
--comm-bg:#272833;
--comm-bg-alt:#3D3E47;
--follow:#F3EDF8;
--follow-text:#272833;
--open:#b7ff5a;
--slots-open:#89AD33;
--waitlist: #549188;
--closed: #BABEBE;
--btn:#373842;
--text: #fff;
--alt-text:#0B090D;
--alt-link:#CAB3EC;
--mute: #6E6F76;
--link: #D2D2D5;
--soft-grey:#A6A6AB;
--active:#fff;
--inactive:#6E6F76;
--font: arial;
">
<!-- ==================================================== ✦✦
BANNER
✧✧ ===================================================== -->
<div class="mb-0" style="
margin-left:-15px;
margin-right:-15px;
width:calc(100% + 30px);
background-color:var(--outer-bg);
background-image:url('IMGLNK');
background-size:cover;
background-position:center;
height:270px;">
</div>
<!-- ==================================================== ✦✦
holding container
✧✧ ===================================================== -->
<div style="
margin-left:-15px;
margin-right:-15px;
width:calc(100% + 30px);
background:var(--outer-bg);
border-left:none;
border-right:none;
padding:20px">
<!-- ==================================================== ✦✦
Row / The Beginning
✧✧ ===================================================== -->
<div class="row no-gutters" style="column-gap:4.6em">
<!-- ================== [01] icon + yap ================= -->
<div class="col-md-3" style="
margin-top:-130px;
max-height:100%;">
<div class="d-md-block" style="
position:sticky;
top:-1px;">
<!-- icon -->
<div class="col-auto rounded-circle mx-auto" style="
height:200px; width:200px;
background-image:url('IMGLNK');
background-size:cover; background-position:center;
border:3px solid var(--outer-bg)"></div>
<!-- name and username -->
<div class="col text-left ml-2 mb-0" style="
color:var(--text);
font-family:var(--font);
font-size:40px; font-weight:bold">
Name
<!-- optional vgen checkmark -->
<img src="https://vgen.co/img/badges/RoleAffiliate.webp"
class="tooltipster" title="Trusted artist with a proven track record of quality work." data-toggle="tooltip"
style="height:30px">
</div>
<div class="text-left col ml-2 mb-3" style="
color:var(--mute);
font-family:var(--font);
font-size:12px; font-weight:200;
margin-top:-5px">
@username
</div>
<!-- follow , decor dots + queue -->
<div class="row ml-2">
<a href="https://toyhou.se/USERNAME/subscribe" class="col-md-8 p-2 btn btn-block mb-2" style="
background:var(--follow);
border-radius:50px;
color:var(--follow-text);
font-size:14px; font-weight:bold;
font-family:var(--font)">
Follow
</a>
<div class="col my-auto hidden-sm-down" style="
color:var(--text);
font-size:20px;">
<i class="fa-solid fa-ellipsis"></i>
</div>
<a href="WORKQUEUE" class="col-md-10 btn btn-block p-2 mb-2" style="
background:var(--btn);
color:var(--text);
border-radius:50px;
font-size:13px; font-weight:bold">
Work Queue
</a>
</div>
<div class="justify-content-between mb-0">
<!-- timezone -->
<p class="col-auto text-uppercase" style="
color:var(--mute);
font-family:var(--font);
font-size:12px;
font-weight:bold">
<i class="fa-regular fa-location-dot fa-fw"></i> GMT-00
</p>
<!-- Languages spoken / ABREVIVATiON -->
<p class="col-auto text-uppercase" style="
color:var(--mute);
font-family:var(--font);
font-size:12px;
font-weight:bold">
<i class="fa-regular fa-globe fa-fw"></i> EN / FR / JP
</p>
</div>
<!-- ==================================================== ✦✦
ABOUT ME BLURB / truncates.
put the full bio in the full bio part
[near the bottom of the code]
✧✧ ===================================================== -->
<div class="col mb-2" style="
min-width:0;
max-width:100%;
margin-top:-10px;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:4;
overflow:hidden;
color:var(--soft-grey);
font-family:var(--font);
font-size:14px">
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.
</div>
<!-- ============ Full About Me Trigger ================ -->
<a class="collapsed col d-inline-block hidden-sm-down"
data-toggle="collapse"
href="#aboutmodal01" style="
color:var(--text);
font-family:var(--font);
font-size:13px;
font-weight:bold;
text-decoration:none">
About me + Links<i class="fa-sharp fal fa-angle-right ml-1"></i>
</a>
<!-- ============== end of Column one ================= -->
</div>
</div>
<!-- only seen on mobile -->
<div class="bg-transparent hidden-md-up" style="height:60px"></div>
<!-- ==================================================== ✦✦
Comm Status bubble
✧✧ ===================================================== -->
<div style="
width:794px; max-width:100%">
<div class="col mb-3" style="
padding:7px; padding-left:14px;
background:var(--closed);
color:var(--alt-text);
border-radius:50px;
font-size:24px;
font-family:var(--font);
margin-top:-50px">
<i class="fa-sharp far fa-xmark fa-fw"></i> Not accepting new requests
</div>
<!-- ==================================================== ✦✦
AES ROW / Comms, shop, etc
✧✧ ===================================================== -->
<div class="row no-gutters hidden-sm-down mb-2">
<!-- commissions -->
<div class="col-auto p-2 pr-3" style="
color:var(--text);
font-size:25px;
font-family:var(--font);
font-weight:bold;
border-bottom:2px solid var(--active)">
Commissions
<!-- small indicator / feel free to change to match vgen -->
<span class="fa-stack" style="font-size: .7em; margin-left:-10px">
<i class="fa-solid fa-square fa-stack-1x" style="color: var(--outer-bg);"></i>
<i class="fa-solid fa-xmark fa-stack-1x" style="color: var(--text); font-size: 0.7em;"></i>
</span>
</div>
<!-- shop -->
<div class="col-auto p-2 pr-3" style="
color:var(--inactive);
font-size:25px;
font-family:var(--font);
font-weight:bold;
border-bottom:1px solid var(--inactive)">
Shop
</div>
<!-- portfolio -->
<div class="col-auto p-2 pr-3" style="
color:var(--inactive);
font-size:25px;
font-family:var(--font);
font-weight:bold;
border-bottom:1px solid var(--inactive)">
Portfolio
</div>
<!-- characters -->
<div class="col-auto p-2 pr-3" style="
color:var(--inactive);
font-size:25px;
font-family:var(--font);
font-weight:bold;
border-bottom:1px solid var(--inactive)">
Characters
</div>
<!-- characters -->
<div class="col p-2 pr-3" style="
color:var(--inactive);
font-size:25px;
font-family:var(--font);
font-weight:bold;
border-bottom:1px solid var(--inactive)">
Saved
</div>
<!-- =============== end of AES ROW 1 ================== -->
</div>
<!-- ==================================================== ✦✦
AES ROW 2 / soft-grey
what you do, known for, etc
✧✧ ===================================================== -->
<div class="mb-3" style="
width:770px;
max-width:100%;
overflow-x:auto;
overflow-y:hidden;
white-space:nowrap;
padding-bottom:4px;
scrollbar-color:#75757C #2C2D37">
<div style="
display:inline-flex;
flex-wrap:nowrap;
column-gap:6px;
min-width:max-content">
<!-- opt | ratings showcase -->
<a href="VGENLNK" class="p-2 pl-3 pr-3 text-lowercase text-center"
target="_blank"
style="
background:var(--btn);
border:1px solid var(--border);
border-radius:50px;
font-family:var(--font);
color:var(--soft-grey);
font-size:12px;
flex:0 0 auto;
text-decoration:none">
<span style="color:var(--text); font-weight:bold"><i class="fa-sharp fas fa-star fa-fw"></i> 5.0</span>
(10 reviews) <span style="color:var(--text);"><i class="fa-sharp far fa-chevron-right fa-fw fa-xs"></i></span>
</a>
<!-- tag one -->
<div class="p-2 pl-3 pr-3 text-uppercase text-center" style="
background:var(--outer-bg);
border:1px solid var(--border);
border-radius:50px;
font-family:var(--font);
color:var(--soft-grey);
font-weight:bold;
font-size:12px;
flex:0 0 auto;">
tag one
</div>
<!-- tag two -->
<div class="p-2 pl-3 pr-3 text-uppercase text-center" style="
background:var(--outer-bg);
border:1px solid var(--border);
border-radius:50px;
font-family:var(--font);
color:var(--soft-grey);
font-weight:bold;
font-size:12px;
flex:0 0 auto;">
tag two
</div>
<!-- tag three -->
<div class="p-2 pl-3 pr-3 text-uppercase text-center" style="
background:var(--outer-bg);
border:1px solid var(--border);
border-radius:50px;
font-family:var(--font);
color:var(--soft-grey);
font-weight:bold;
font-size:12px;
flex:0 0 auto;">
tag three
</div>
<!-- tag four -->
<div class="p-2 pl-3 pr-3 text-uppercase text-center" style="
background:var(--outer-bg);
border:1px solid var(--border);
border-radius:50px;
font-family:var(--font);
color:var(--soft-grey);
font-weight:bold;
font-size:12px;
flex:0 0 auto;">
tag four
</div>
<!-- tag five -->
<div class="p-2 pl-3 pr-3 text-uppercase text-center" style="
background:var(--outer-bg);
border:1px solid var(--border);
border-radius:50px;
font-family:var(--font);
color:var(--soft-grey);
font-weight:bold;
font-size:12px;
flex:0 0 auto;">
tag five
</div>
<!-- tag six -->
<div class="p-2 pl-3 pr-3 text-uppercase text-center" style="
background:var(--outer-bg);
border:1px solid var(--border);
border-radius:50px;
font-family:var(--font);
color:var(--soft-grey);
font-weight:bold;
font-size:12px;
flex:0 0 auto;">
idk im just a tag
</div>
<!-- ====== Add more above / end of AES ROW 2 ========== -->
</div>
</div>
<!-- ==================================================== ✦✦
Container 1
✧✧ ===================================================== -->
<div class="col mb-4" style="
padding:40px 40px 20px 40px;
background:var(--outer-bg);
border:1px solid var(--border);
border-radius:47px;">
<!-- container title -->
<div class="d-flex mb-4" style="
align-items:center; column-gap:8px;">
<h3 class="text-uppercase mb-0" style="
color:var(--soft-grey);
font-family:var(--font);">
title one
</h3>
<span class="text-uppercase d-inline-block" style="
background:var(--outer-bg);
color:var(--text);
font-family:var(--font);
border:1px solid var(--text);
font-weight:bold;
font-size:10px;
padding:4px 10px;
border-radius:6px;
letter-spacing:0.5px">
closed
</span>
</div>
<!-- ======================================================
COMMISSION BLOCK
copy the whole block and just replace the text
be sure to change any Carousel ids so it
doesnt conflict. if a div yells at you, remove the div you copied from the newly copied comm block
====================================================== -->
<div style="
background:var(--comm-bg);
border-radius:28px;
margin-bottom:16px;
overflow:hidden;
box-shadow:3px 4px 6px var(--shadow)">
<div class="row no-gutters align-items-stretch">
<!-- ================= LEFT PREVIEW ================= -->
<div class="col-12 col-lg-5 mb-3 mb-lg-0">
<div style="
background:var(--outer-bg);
border-radius:18px 0px 0px 18px;
overflow:hidden;
min-height:220px;
height:100%;
position:relative;">
<div id="cardcarousel01" class="carousel slide h-100"
data-ride="carousel">
<!-- ========== slides / duplicate as needed ============ -->
<div class="carousel-inner" style="height:220px;">
<!-- slide one -->
<div class="carousel-item active">
<div style="
width:100%;
height:220px;
background:url('IMGLNK');
background-size:cover; background-position:center
"></div>
</div>
<!-- slide two -->
<div class="carousel-item">
<div style="
width:100%;
height:220px;
background:url('IMGLNK');
background-size:cover; background-position:center
"></div>
</div>
<!-- slide three -->
<div class="carousel-item">
<div style="
width:100%;
height:220px;
background:url('IMGLNK');
background-size:cover; background-position:center
"></div>
</div>
<!-- add more above this line -->
</div>
<!-- ================== LEFT ARROW ===================== -->
<a class="carousel-control-prev d-flex align-items-center justify-content-center" href="#cardcarousel01"
role="button" data-slide="prev" style="
width:44px;
height:100%;
top:0;
left:0;
opacity:1;
text-decoration:none;">
<span aria-hidden="true" class="d-flex justify-content-center"
style="
align-items:center;
width:28px;
height:28px;
border-radius:50%;
background:rgba(0,0,0,0.18);
color:var(--text);
font-size:10px;">
<i class="fas fa-sharp fa-chevron-left"></i>
</span>
<span class="sr-only">Previous</span>
</a>
<!-- ================== RIGHT ARROW ===================== -->
<a class="carousel-control-next d-flex align-items-center justify-content-center" href="#cardcarousel01"
role="button" data-slide="next" style="
width:44px;
height:100%;
top:0;
right:0;
opacity:1;
text-decoration:none;">
<span aria-hidden="true" class="d-flex justify-content-center"
style="
align-items:center;
width:28px;
height:28px;
border-radius:50%;
background:rgba(0,0,0,0.18);
color:var(--text);
font-size:10px;">
<i class="fas fa-sharp fa-chevron-right"></i>
</span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!-- ================== RIGHT INFO ==================== -->
<div class="col-12 col-lg-7 d-flex flex-column justify-content-center">
<div class="pl-lg-4 pt-4">
<div class="d-flex justify-content-between align-items-start mb-3" style="column-gap:12px;">
<div>
<!-- name of comm -->
<div class="p-1 mb-0" style="
color:var(--text);
font-family:var(--font);
font-size:22px;
font-weight:bold;
font-family:var(--font)
line-height:1.2;">
Comm title
</div>
<!-- code price -->
<div class="p-1" style="
color:var(--soft-grey);
font-family:var(--font);
font-size:20px;
margin-top:-10px">
From 00.00
</div>
</div>
<!-- decor bookmark -->
<div class="justify-content-center hidden-sm-down" style="
width:36px;
height:100px;
border-radius:0 0 14px 14px;
background:var(--comm-bg-alt);
color:var(--text);
display:flex;
align-items:center;
font-size:14px; margin-right:15px;
margin-top:-34px">
<i class="fa-regular fa-bookmark" style="
margin-top:50px"></i>
</div>
</div>
<!-- description here / should be short but truncates -->
<div class="p-0 mb-1" style="
color:var(--mute);
font-family:var(--font);
width:340px;
font-size:13px;
line-height:1.5;
margin-top:-10px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</div>
<!-- ==================== BUTTONS ====================== -->
<div class="d-flex align-items-center pr-2 mb-5 pl-2" style="
column-gap:10px; margin-top:10px">
<!-- request button/view -->
<a class="btn collapsed" data-toggle="collapse"
href="#pop1" style="
display:block;
flex:1;
text-align:center;
background:var(--comm-bg);
color:var(--soft-grey);
border:1px solid var(--border);
border-radius:999px;
font-weight:bold;
font-size:14px;
padding:12px 18px;
text-decoration:none;">
<i class="fa-sharp far fa-bell fa-fw"></i> Get Notified
</a>
<!-- msg you button / does nothing dont touch -->
<a class="d-flex align-items-center justify-content-center flex-shrink-0" data-toggle="collapse"
href="#pop1" style="
width:42px;
height:42px;
border-radius:50%;
background:var(--comm-bg-alt);
color:var(--text);
text-decoration:none;
font-size:14px;">
<i class="fa-regular fa-comment-dots"></i>
</a>
<!-- dont touch -->
</div>
</div>
<!-- opt | slots open. if opening, remove hidden + class -->
<div class="hidden-md-up" style="
position:absolute;
bottom:0;
right:0;
background:var(--slots-open);
color:var(--text);
font-family:var(--font);
font-size:14px;
font-weight:bold;
line-height:1;
padding:9px 20px 11px 20px;
border-radius:30px 0 0 0px;">
0 slots left
</div>
</div>
</div>
</div>
<!-- ============= POPUP / change id if CNP ============= -->
<div class="modal collapse fade" id="pop1" aria-hidden="true" style="background-color:rgba(0,0,0,0.7);">
<div class="mx-3 mx-md-4 justify-content-center d-flex"
style="
min-height:calc(100vh - 1rem);
align-items:center;
margin:0 auto;">
<div class="w-100" style="background-color:transparent;
max-width:1340px;">
<div class="p-3 p-md-3" style="
background:var(--outer-bg);
border-radius:22px;
letter-spacing:0.005em;
max-height:calc(100vh - 100px);
overflow-y:auto;
scrollbar-color:#75757C #2c2d37;">
<div class="d-block d-sm-none" style="height:20px;"></div>
<!-- ===================== TOP BAR ==================== -->
<div class="d-flex justify-content-between" style="
position:sticky;
top:-1.1em;
z-index:1;
height:55px;
width:100%;
align-items:center;
background:var(--outer-bg);">
<!-- Close Button -->
<a href="#pop1" data-toggle="collapse" style="
color:var(--text);
text-decoration:none;
padding:0 12px;
font-size:28px;">
<i class="fa-sharp far fa-xmark"></i>
</a>
<!-- Decor bookmark -->
<div class="justify-content-center hidden-sm-down" style="
width:36px;
height:100px;
border-radius:0 0 14px 14px;
background:var(--comm-bg-alt);
color:var(--text);
display:flex;
align-items:center;
font-size:14px; margin-right:15px;
margin-top:-34px">
<i class="fa-regular fa-bookmark" style="
margin-top:50px"></i>
</div>
</div>
<div class="d-flex flex-column flex-md-row">
<!-- == LEFT: Image Gallery / add more imgs if needed = -->
<div class="col-md-6 order-md-1" style="
max-height:700px;
overflow-y:auto;
scrollbar-color:#75757C #2C2D37;
border-radius:18px;">
<div style="display:flex; flex-direction:column;">
<!-- img 1 -->
<img src="IMGLNK"
style="
width:100%;
border-radius:16px;
margin-bottom:1rem;">
<!-- img 2 -->
<img src="IMGLNK"
style="
width:100%;
border-radius:16px;
margin-bottom:1rem;">
<!-- img 3 -->
<img src="IMGLNK"
style="
width:100%;
border-radius:16px;
margin-bottom:1rem;">
<!-- add more above -->
</div>
</div>
<!-- ================= RIGHT: INFO ================= -->
<div class="col-md-6 order-md-2 d-flex flex-column" style="
padding-top:20px;
padding-left:30px;
padding-right:20px
min-height:200px;">
<!-- title of container -->
<p class="text-uppercase mb-2" style="
color:var(--mute);
font-family:var(--font);
font-size:20px">
title one
</p>
<!-- comm title -->
<div style="margin-bottom:24px;">
<h4 style="
margin:0;
font-size:1.9rem;
line-height:1.2;
color:var(--text);
font-weight:bold">
Comm Title
</h4>
<!-- price -->
<div style="
color:var(--soft-grey);
font-size:20px;
margin-top:6px;">
From <span style="color:var(--text)">
00.00
</span>
</div>
</div>
<!-- ==================================================== ✦✦
Licenses explained
<s>, xmark and --mute - for not allowed
✧✧ ===================================================== -->
<ul class="pl-0 p-0 pb-3" style="
list-style-type:none;
color:var(--text);
font-family:var(--font);
font-size:17px;
margin-top:-10px;
border-bottom:1px solid #33343D">
<li><i class="fa-sharp far fa-check fa-fw"></i> Personal</li>
<li style="color:var(--mute)"><s><i class="fa-sharp far fa-xmark fa-fw"></i> Monetized content</s></li>
<li style="color:var(--mute)"><s><i class="fa-sharp far fa-xmark fa-fw"></i> Commercial merchandising</s></li>
</ul>
<!-- ==================================================== ✦✦
Accepts xyz / remove, change add or keep as is
✧✧ ====================================================== -->
<div class="d-block" style="
border:1px solid var(--border);
border-radius:16px;
background:var(--outer-bg);
padding:10px 14px;
font-weight:bold;
color:var(--soft-grey);">
Accepts
<div class="pull-right" style="
display:flex;
column-gap:6px;
align-items:center;
flex-wrap:wrap;">
<!-- PayPal -->
<div class="d-flex justify-content-center tooltipster"
title="paypal" data-toggle="tooltip" style="
background:#fff;
border-radius:6px;
height:22px;
min-width:42px;
align-items:center;
padding:0 6px;">
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a4/Paypal_2014_logo.png" style="height:14px;">
</div>
<!-- cashapp -->
<div class="d-flex justify-content-center tooltipster"
title="cashapp" data-toggle="tooltip" style="
background:#fff;
border-radius:6px;
height:22px;
min-width:42px;
align-items:center;
padding:0 6px;">
<img src="https://www.logo.wine/a/logo/Cash_App/Cash_App-Logo.wine.svg" style="height:14px;">
</div>
<!-- ko-fi -->
<div class="d-flex justify-content-center tooltipster"
title="kofi" data-toggle="tooltip" style="
background:#fff;
border-radius:6px;
height:22px;
min-width:42px;
align-items:center;
padding:0 6px;">
<img src="https://cdn.prod.website-files.com/5c14e387dab576fe667689cf/670f5a01229bf8a18f97a3c1_favion.png" style="height:14px;">
</div>
<!-- swish -->
<div class="d-flex justify-content-center tooltipster"
title="swish" data-toggle="tooltip" style="
background:#fff;
border-radius:6px;
height:22px;
min-width:42px;
align-items:center;
padding:0 6px;">
<img src="https://images.ctfassets.net/zrqoyh8r449h/7taM7P2vHzWdGUE5VIm4ou/ba9ff9d11fe33dac9a170cf7d8e2468c/Swish_Logo_Primary_Dark-BG_P3.png?w=600" style="height:14px;">
</div>
<!-- stripe -->
<div class="d-flex justify-content-center tooltipster"
title="stripe" data-toggle="tooltip" style="
background:#fff;
border-radius:6px;
height:22px;
min-width:42px;
align-items:center;
padding:0 6px;">
<img src="https://logos-world.net/wp-content/uploads/2021/03/Stripe-Emblem.png" style="height:14px;">
</div>
<!-- ============ end of Currency accepts =============== -->
</div>
</div>
<!-- ==================================================== ✦✦
DESCRIPTION
✧✧ ===================================================== -->
<div style="
margin-top:18px;
margin-bottom:8px;
color:var(--text);
font-family:var(--font);
font-weight:bold;
font-size:14px;">
Description
</div>
<div style="
border-top:1px solid #33343D;
margin-bottom:10px;">
</div>
<!-- ==== [1] Custom Service or Personalised =========== -->
<div class="mb-2" style="
border:1px solid var(--border);
border-radius:16px;
padding:14px 16px;
background: var(--outer-bg)">
<div style="
color:var(--text);
font-family:var(--font);
font-weight:bold;
font-size:14px;
line-height:1.2;">
<i class="fa-sharp far fa-sparkles fa-fw"></i>
Custom service
</div>
<div style="
color:var(--mute);
font-family:var(--font);
font-size:13px;
margin-top:4px">
Made from scratch
</div>
</div>
<!-- ==== [2] Open commun or SKEB/Surprise me =========== -->
<div class="mb-2" style="
border:1px solid var(--border);
border-radius:16px;
padding:14px 16px;
background: var(--outer-bg)">
<div style="
color:var(--text);
font-family:var(--font);
font-weight:bold;
font-size:14px;
line-height:1.2">
<i class="fa-sharp far fa-comment-check fa-fw"></i>
Open Communication
</div>
<div style="
color:var(--mute);
font-family:var(--font-family);
font-size:13px;
margin-top:4px;">
WIP updates + revisions available
</div>
</div>
<!-- ============= The actual description ============== -->
<div class="p-2" style="
border:1px solid var(--border);
border-radius:16px;
background:var(--outer-bg);
display:block">
<div class="p-3" style="
height:150px;
overflow-y:auto;
scrollbar-color:#75757C #2c2d37;
color:var(--text);
font-family:var(--font);
font-size:14px">
Yap about your comm! Add <h3> and its subsects as headers if you want. <ul> with <li> to create lists, etc. For links, use <a href>. This box scrolls so feel free to yap yap yap lol. Change the height if you want; made it this long as a just in case. This is a long ass code oh my god. Anyways, if you want to break stuff up or smth, use <br> once or twice.
</div>
</div>
<!-- ==================================================== ✦✦
BUTTONS / TOS + REQ
✧✧ ===================================================== -->
<div class="row no-gutters" style="
position:sticky;
bottom:0;
column-gap:5px">
<!-- TERMS OF SERVICE -->
<a href="TOS" class="col btn btn-block" style="
margin-top:18px;
background:var(--open);
color:var(--alt-text);
border-radius:50px;
font-family:var(--font);
font-weight:bold;
font-size:16px;
padding:10px 22px;
text-decoration:none;">
TOS
</a>
<!-- REQUEST NOW | change accordingly if wanted -->
<a href="VGEN_OR_MSG_LNK" class="col btn btn-block"
style="
margin-top:18px;
background:var(--comm-bg);
border:1px solid var(--border);
color:var(--soft-grey);
font-family:var(--font);
border-radius:50px;
font-weight:bold;
font-size:16px;
padding:10px 22px;
letter-spacing:0.4px;
text-decoration:none;">
<i class="fa-sharp far fa-bell fa-fw"></i> Get Notified
</a>
<!-- ============== end of COMM BLOCK!! ================= -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ======================================================
COMMISSION BLOCK 02
copy the whole block and just replace the text
be sure to change any Carousel ids so it
doesnt conflict.
====================================================== -->
<div style="
background:var(--comm-bg);
border-radius:28px;
margin-bottom:16px;
overflow:hidden;
box-shadow:3px 4px 6px var(--shadow)">
<div class="row no-gutters align-items-stretch">
<!-- ================= LEFT PREVIEW ================= -->
<div class="col-12 col-lg-5 mb-3 mb-lg-0">
<div style="
background:var(--outer-bg);
border-radius:18px 0px 0px 18px;
overflow:hidden;
min-height:220px;
height:100%;
position:relative;">
<div id="cardcarousel02" class="carousel slide h-100"
data-ride="carousel">
<!-- ========== slides / duplicate as needed ============ -->
<div class="carousel-inner" style="height:220px;">
<!-- slide one -->
<div class="carousel-item active">
<div style="
width:100%;
height:220px;
background:url('IMGLNK');
background-size:cover; background-position:center
"></div>
</div>
<!-- slide two -->
<div class="carousel-item">
<div style="
width:100%;
height:220px;
background:url('IMGLNK');
background-size:cover; background-position:center
"></div>
</div>
<!-- add more above this line -->
</div>
<!-- ================== LEFT ARROW ===================== -->
<a class="carousel-control-prev d-flex align-items-center justify-content-center" href="#cardcarousel02"
role="button" data-slide="prev" style="
width:44px;
height:100%;
top:0;
left:0;
opacity:1;
text-decoration:none;">
<span aria-hidden="true" class="d-flex justify-content-center"
style="
align-items:center;
width:28px;
height:28px;
border-radius:50%;
background:rgba(0,0,0,0.18);
color:var(--text);
font-size:10px;">
<i class="fas fa-sharp fa-chevron-left"></i>
</span>
<span class="sr-only">Previous</span>
</a>
<!-- ================== RIGHT ARROW ===================== -->
<a class="carousel-control-next d-flex align-items-center justify-content-center" href="#cardcarousel02"
role="button" data-slide="next" style="
width:44px;
height:100%;
top:0;
right:0;
opacity:1;
text-decoration:none;">
<span aria-hidden="true" class="d-flex justify-content-center"
style="
align-items:center;
width:28px;
height:28px;
border-radius:50%;
background:rgba(0,0,0,0.18);
color:var(--text);
font-size:10px;">
<i class="fas fa-sharp fa-chevron-right"></i>
</span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!-- ================== RIGHT INFO ==================== -->
<div class="col-12 col-lg-7 d-flex flex-column justify-content-center">
<div class="pl-lg-4 pt-4">
<div class="d-flex justify-content-between align-items-start mb-3" style="column-gap:12px;">
<div>
<!-- name of comm -->
<div class="p-1 mb-0" style="
color:var(--text);
font-family:var(--font);
font-size:20px;
font-weight:bold;
font-family:var(--font)
line-height:1.2;">
Comm Title
</div>
<!-- code price -->
<div class="p-1" style="
color:var(--soft-grey);
font-family:var(--font);
font-size:20px;
margin-top:-10px">
From 00.00
</div>
</div>
<!-- decor bookmark -->
<div class="justify-content-center hidden-sm-down" style="
width:36px;
height:100px;
border-radius:0 0 14px 14px;
background:var(--comm-bg-alt);
color:var(--text);
display:flex;
align-items:center;
font-size:14px; margin-right:15px;
margin-top:-34px">
<i class="fa-regular fa-bookmark" style="
margin-top:50px"></i>
</div>
</div>
<!-- description here / should be short but truncates -->
<div class="p-0 mb-1" style="
color:var(--mute);
font-family:var(--font);
width:340px;
font-size:13px;
line-height:1.5;
margin-top:-10px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</div>
<!-- ==================== BUTTONS ====================== -->
<div class="d-flex align-items-center pr-2 mb-5 pl-2" style="
column-gap:10px; margin-top:10px">
<!-- request button/view -->
<a class="btn collapsed" data-toggle="collapse"
href="#pop2" style="
display:block;
flex:1;
text-align:center;
background:var(--comm-bg);
border:1px solid var(--border);
color:var(--soft-grey);
border-radius:999px;
font-weight:bold;
font-size:14px;
padding:12px 18px;
text-decoration:none;">
<i class="fa-sharp far fa-bell fa-fw"></i> Get Notified
</a>
<!-- msg you button / does nothing dont touch -->
<a class="d-flex align-items-center justify-content-center flex-shrink-0" data-toggle="collapse"
href="#pop2" style="
width:42px;
height:42px;
border-radius:50%;
background:var(--comm-bg-alt);
color:var(--text);
text-decoration:none;
font-size:14px;">
<i class="fa-regular fa-comment-dots"></i>
</a>
<!-- dont touch -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ============= POPUP / change id if CNP ============= -->
<div class="modal collapse fade" id="pop2" aria-hidden="true" style="background-color:rgba(0,0,0,0.7);">
<div class="mx-3 mx-md-4 justify-content-center d-flex"
style="
min-height:calc(100vh - 1rem);
align-items:center;
margin:0 auto;">
<div class="w-100" style="background-color:transparent;
max-width:1340px;">
<div class="p-3 p-md-3" style="
background:var(--outer-bg);
border-radius:22px;
letter-spacing:0.005em;
max-height:calc(100vh - 100px);
overflow-y:auto;
scrollbar-color:#75757C #2c2d37;">
<div class="d-block d-sm-none" style="height:20px;"></div>
<!-- ===================== TOP BAR ==================== -->
<div class="d-flex justify-content-between" style="
position:sticky;
top:-1.1em;
z-index:1;
height:55px;
width:100%;
align-items:center;
background:var(--outer-bg);">
<!-- Close Button -->
<a href="#pop2" data-toggle="collapse" style="
color:var(--text);
text-decoration:none;
padding:0 12px;
font-size:28px;">
<i class="fa-sharp far fa-xmark"></i>
</a>
<!-- Decor bookmark -->
<div class="justify-content-center hidden-sm-down" style="
width:36px;
height:100px;
border-radius:0 0 14px 14px;
background:var(--comm-bg-alt);
color:var(--text);
display:flex;
align-items:center;
font-size:14px; margin-right:15px;
margin-top:-34px">
<i class="fa-regular fa-bookmark" style="
margin-top:50px"></i>
</div>
</div>
<div class="d-flex flex-column flex-md-row">
<!-- == LEFT: Image Gallery / add more imgs if needed = -->
<div class="col-md-6 order-md-1" style="
max-height:700px;
overflow-y:auto;
scrollbar-color:#75757C #2C2D37;
border-radius:18px;">
<div style="display:flex; flex-direction:column;">
<!-- img 1 -->
<img src="IMGLNK"
style="
width:100%;
border-radius:16px;
margin-bottom:1rem;">
<!-- img 2 -->
<img src="IMGLNK"
style="
width:100%;
border-radius:16px;
margin-bottom:1rem;">
<!-- add more above -->
</div>
</div>
<!-- ================= RIGHT: INFO ================= -->
<div class="col-md-6 order-md-2 d-flex flex-column" style="
padding-top:20px;
padding-left:30px;
padding-right:20px
min-height:200px;">
<!-- title of container -->
<p class="text-uppercase mb-2" style="
color:var(--mute);
font-family:var(--font);
font-size:20px">
title one
</p>
<!-- comm title -->
<div style="margin-bottom:24px;">
<h4 style="
margin:0;
font-size:1.9rem;
line-height:1.2;
color:var(--text);
font-weight:bold">
Comm title
</h4>
<!-- price -->
<div style="
color:var(--soft-grey);
font-size:20px;
margin-top:6px;">
From <span style="color:var(--text)">
00.00
</span>
</div>
</div>
<!-- ==================================================== ✦✦
Licenses explained
<s>, xmark and --mute - for not allowed
✧✧ ===================================================== -->
<ul class="pl-0 p-0 pb-3" style="
list-style-type:none;
color:var(--text);
font-family:var(--font);
font-size:17px;
margin-top:-10px;
border-bottom:1px solid #33343D">
<li><i class="fa-sharp far fa-check fa-fw"></i> Personal</li>
<li style="color:var(--mute)"><s><i class="fa-sharp far fa-xmark fa-fw"></i> Monetized content</s></li>
<li style="color:var(--mute)"><s><i class="fa-sharp far fa-xmark fa-fw"></i> Commercial merchandising</s></li>
</ul>
<!-- ==================================================== ✦✦
Accepts xyz / remove, change add or keep as is
✧✧ ====================================================== -->
<div class="d-block" style="
border:1px solid var(--border);
border-radius:16px;
background:var(--outer-bg);
padding:10px 14px;
font-weight:bold;
color:var(--soft-grey);">
Accepts
<div class="pull-right" style="
display:flex;
column-gap:6px;
align-items:center;
flex-wrap:wrap;">
<!-- PayPal -->
<div class="d-flex justify-content-center tooltipster"
title="paypal" data-toggle="tooltip" style="
background:#fff;
border-radius:6px;
height:22px;
min-width:42px;
align-items:center;
padding:0 6px;">
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a4/Paypal_2014_logo.png" style="height:14px;">
</div>
<!-- cashapp -->
<div class="d-flex justify-content-center tooltipster"
title="cashapp" data-toggle="tooltip" style="
background:#fff;
border-radius:6px;
height:22px;
min-width:42px;
align-items:center;
padding:0 6px;">
<img src="https://www.logo.wine/a/logo/Cash_App/Cash_App-Logo.wine.svg" style="height:14px;">
</div>
<!-- ko-fi -->
<div class="d-flex justify-content-center tooltipster"
title="kofi" data-toggle="tooltip" style="
background:#fff;
border-radius:6px;
height:22px;
min-width:42px;
align-items:center;
padding:0 6px;">
<img src="https://cdn.prod.website-files.com/5c14e387dab576fe667689cf/670f5a01229bf8a18f97a3c1_favion.png" style="height:14px;">
</div>
<!-- swish -->
<div class="d-flex justify-content-center tooltipster"
title="swish" data-toggle="tooltip" style="
background:#fff;
border-radius:6px;
height:22px;
min-width:42px;
align-items:center;
padding:0 6px;">
<img src="https://images.ctfassets.net/zrqoyh8r449h/7taM7P2vHzWdGUE5VIm4ou/ba9ff9d11fe33dac9a170cf7d8e2468c/Swish_Logo_Primary_Dark-BG_P3.png?w=600" style="height:14px;">
</div>
<!-- stripe -->
<div class="d-flex justify-content-center tooltipster"
title="stripe" data-toggle="tooltip" style="
background:#fff;
border-radius:6px;
height:22px;
min-width:42px;
align-items:center;
padding:0 6px;">
<img src="https://logos-world.net/wp-content/uploads/2021/03/Stripe-Emblem.png" style="height:14px;">
</div>
<!-- ============ end of Currency accepts =============== -->
</div>
</div>
<!-- ==================================================== ✦✦
DESCRIPTION
✧✧ ===================================================== -->
<div style="
margin-top:18px;
margin-bottom:8px;
color:var(--text);
font-family:var(--font);
font-weight:bold;
font-size:14px;">
Description
</div>
<div style="
border-top:1px solid #33343D;
margin-bottom:10px;">
</div>
<!-- ==== [1] Custom Service or Personalised =========== -->
<div class="mb-2" style="
border:1px solid var(--border);
border-radius:16px;
padding:14px 16px;
background: var(--outer-bg)">
<div style="
color:var(--text);
font-family:var(--font);
font-weight:bold;
font-size:14px;
line-height:1.2;">
<i class="fa-sharp far fa-sparkles fa-fw"></i>
Custom service
</div>
<div style="
color:var(--mute);
font-family:var(--font);
font-size:13px;
margin-top:4px">
Made from scratch
</div>
</div>
<!-- ==== [2] Open commun or SKEB/Surprise me =========== -->
<div class="mb-2" style="
border:1px solid var(--border);
border-radius:16px;
padding:14px 16px;
background: var(--outer-bg)">
<div style="
color:var(--text);
font-family:var(--font);
font-weight:bold;
font-size:14px;
line-height:1.2">
<i class="fa-sharp far fa-party-horn fa-fw"></i>
Surprise Me
</div>
<div style="
color:var(--mute);
font-family:var(--font-family);
font-size:13px;
margin-top:4px;">
No WIP updates + mistake fixes only
</div>
</div>
<!-- ============= The actual description ============== -->
<div class="p-2" style="
border:1px solid var(--border);
border-radius:16px;
background:var(--outer-bg);
display:block">
<div class="p-3" style="
height:170px;
overflow-y:auto;
scrollbar-color:#75757C #2c2d37;
color:var(--soft-grey);
font-family:var(--font);
font-size:14px">
<h4 class="mb-1" style="color:var(--text)"><b>Header 4 w/var --text</b></h4>
<p class="mb-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.
</p>
<h4 class="mb-1" style="color:var(--text)"><b>Link example purpl</b></h4>
<p class="mb-3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. <a href="#" style="font-weight:bold; text-decoration:none; color:var(--alt-link)">Donec accumsan tempor lacus,</a> 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>
<!-- ==================================================== ✦✦
BUTTONS / TOS + REQ
✧✧ ===================================================== -->
<div class="row no-gutters" style="
position:sticky;
bottom:0;
column-gap:5px">
<!-- TERMS OF SERVICE -->
<a href="TOS" class="col btn btn-block" style="
margin-top:18px;
background:var(--open);
color:var(--alt-text);
border-radius:50px;
font-family:var(--font);
font-weight:bold;
font-size:16px;
padding:10px 22px;
text-decoration:none;">
TOS
</a>
<!-- REQUEST NOW -->
<a href="VGEN_OR_MSG_LNK" class="col btn btn-block"
style="
margin-top:18px;
background:var(--comm-bg);
color:var(--soft-grey);
border:1px solid var(--border);
font-family:var(--font);
border-radius:50px;
font-weight:bold;
font-size:16px;
padding:10px 22px;
letter-spacing:0.4px;
text-decoration:none;">
<i class="fa-sharp far fa-bell fa-fw"></i> Get Notified
</a>
<!-- ============== end of COMM BLOCK!! ================= -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- == add more comms above / end of Container 1 ===== -->
</div>
<!-- ==================================================== ✦✦
Container 2
✧✧ ===================================================== -->
<div class="col" style="
padding:40px 40px 20px 40px;
background:var(--outer-bg);
border:1px solid var(--border);
border-radius:47px;">
<!-- container title -->
<div class="d-flex mb-4" style="
align-items:center; column-gap:8px;">
<h3 class="text-uppercase mb-0" style="
color:var(--soft-grey);
font-family:var(--font);">
title two
</h3>
<span class="text-uppercase d-inline-block" style="
background:var(--outer-bg);
color:var(--text);
border:1px solid var(--text);
font-family:var(--font);
font-weight:bold;
font-size:10px;
padding:4px 10px;
border-radius:6px;
letter-spacing:0.5px">
closed
</span>
</div>
<!-- ======================================================
COMMISSION BLOCK 03 / CONTAiNER 2
copy the whole block and just replace the text
be sure to change any Carousel ids so it
doesnt conflict.
====================================================== -->
<div style="
background:var(--comm-bg);
border-radius:28px;
margin-bottom:16px;
overflow:hidden;
box-shadow:3px 4px 6px var(--shadow)">
<div class="row no-gutters align-items-stretch">
<!-- ================= LEFT PREVIEW ================= -->
<div class="col-12 col-lg-5 mb-3 mb-lg-0">
<div style="
background:var(--outer-bg);
border-radius:18px 0px 0px 18px;
overflow:hidden;
min-height:220px;
height:100%;
position:relative;">
<div id="cardcarousel03" class="carousel slide h-100"
data-ride="carousel">
<!-- ========== slides / duplicate as needed ============ -->
<div class="carousel-inner" style="height:247px;">
<!-- slide one -->
<div class="carousel-item active">
<div style="
width:100%;
height:247px;
background:url('IMGLNK');
background-size:cover; background-position:center
"></div>
</div>
<!-- slide two -->
<div class="carousel-item">
<div style="
width:100%;
height:247px;
background:url('IMGLNK');
background-size:cover; background-position:center
"></div>
</div>
<!-- slide three -->
<div class="carousel-item">
<div style="
width:100%;
height:247px;
background:url('IMGLNK');
background-size:cover; background-position:center
"></div>
</div>
<!-- slide four -->
<div class="carousel-item">
<div style="
width:100%;
height:247px;
background:url('IMGLNK');
background-size:cover; background-position:center
"></div>
</div>
<!-- add more above this line -->
</div>
<!-- ================== LEFT ARROW ===================== -->
<a class="carousel-control-prev d-flex align-items-center justify-content-center" href="#cardcarousel03"
role="button" data-slide="prev" style="
width:44px;
height:100%;
top:0;
left:0;
opacity:1;
text-decoration:none;">
<span aria-hidden="true" class="d-flex justify-content-center"
style="
align-items:center;
width:28px;
height:28px;
border-radius:50%;
background:rgba(0,0,0,0.18);
color:var(--text);
font-size:10px;">
<i class="fas fa-sharp fa-chevron-left"></i>
</span>
<span class="sr-only">Previous</span>
</a>
<!-- ================== RIGHT ARROW ===================== -->
<a class="carousel-control-next d-flex align-items-center justify-content-center" href="#cardcarousel03"
role="button" data-slide="next" style="
width:44px;
height:100%;
top:0;
right:0;
opacity:1;
text-decoration:none;">
<span aria-hidden="true" class="d-flex justify-content-center"
style="
align-items:center;
width:28px;
height:28px;
border-radius:50%;
background:rgba(0,0,0,0.18);
color:var(--text);
font-size:10px;">
<i class="fas fa-sharp fa-chevron-right"></i>
</span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!-- ================== RIGHT INFO ==================== -->
<div class="col-12 col-lg-7 d-flex flex-column justify-content-center">
<div class="pl-lg-4">
<div class="d-flex justify-content-between align-items-start mb-3" style="column-gap:12px;">
<div>
<!-- name of comm -->
<div class="p-1 mb-0" style="
color:var(--text);
font-family:var(--font);
font-size:20px;
font-weight:bold;
font-family:var(--font)
line-height:1.2;">
Can be multi-lined, adjust left preview though
</div>
<!-- code price -->
<div class="p-1" style="
color:var(--soft-grey);
font-family:var(--font);
font-size:20px;
margin-top:-10px">
From 00.00
</div>
</div>
<!-- decor bookmark -->
<div class="justify-content-center hidden-sm-down" style="
width:36px;
height:100px;
border-radius:0 0 14px 14px;
background:var(--comm-bg-alt);
color:var(--text);
display:flex;
align-items:center;
font-size:14px; margin-right:15px;
margin-top:-50px">
<i class="fa-regular fa-bookmark" style="
margin-top:50px"></i>
</div>
</div>
<!-- description here / should be short but truncates -->
<div class="p-0 mb-1" style="
color:var(--mute);
font-family:var(--font);
width:340px;
font-size:13px;
line-height:1.5;
margin-top:-10px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;">
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.
</div>
<!-- ==================== BUTTONS ====================== -->
<div class="d-flex align-items-center pr-2 pl-2" style="
column-gap:10px; margin-top:10px">
<!-- request button/view -->
<a class="btn collapsed" data-toggle="collapse"
href="#pop3" style="
display:block;
flex:1;
text-align:center;
background:var(--comm-bg);
border:1px solid var(--border);
color:var(--soft-grey);
border-radius:999px;
font-weight:bold;
font-size:14px;
padding:12px 18px;
text-decoration:none;">
<i class="fa-sharp far fa-bell fa-fw"></i> Get Notified
</a>
<!-- msg you button / does nothing dont touch -->
<a class="d-flex align-items-center justify-content-center flex-shrink-0" data-toggle="collapse"
href="#pop3" style="
width:42px;
height:42px;
border-radius:50%;
background:var(--comm-bg-alt);
color:var(--text);
text-decoration:none;
font-size:14px;">
<i class="fa-regular fa-comment-dots"></i>
</a>
<!-- dont touch -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ============= POPUP / change id if CNP ============= -->
<div class="modal collapse fade" id="pop3" aria-hidden="true" style="background-color:rgba(0,0,0,0.7);">
<div class="mx-3 mx-md-4 justify-content-center d-flex"
style="
min-height:calc(100vh - 1rem);
align-items:center;
margin:0 auto;">
<div class="w-100" style="background-color:transparent;
max-width:1340px;">
<div class="p-3 p-md-3" style="
background:var(--outer-bg);
border-radius:22px;
letter-spacing:0.005em;
max-height:calc(100vh - 100px);
overflow-y:auto;
scrollbar-color:#75757C #2c2d37;">
<div class="d-block d-sm-none" style="height:20px;"></div>
<!-- ===================== TOP BAR ==================== -->
<div class="d-flex justify-content-between" style="
position:sticky;
top:-1.1em;
z-index:1;
height:55px;
width:100%;
align-items:center;
background:var(--outer-bg);">
<!-- Close Button -->
<a href="#pop3" data-toggle="collapse" style="
color:var(--text);
text-decoration:none;
padding:0 12px;
font-size:28px;">
<i class="fa-sharp far fa-xmark"></i>
</a>
<!-- Decor bookmark -->
<div class="justify-content-center hidden-sm-down" style="
width:36px;
height:100px;
border-radius:0 0 14px 14px;
background:var(--comm-bg-alt);
color:var(--text);
display:flex;
align-items:center;
font-size:14px; margin-right:15px;
margin-top:-34px">
<i class="fa-regular fa-bookmark" style="
margin-top:50px"></i>
</div>
</div>
<div class="d-flex flex-column flex-md-row">
<!-- == LEFT: Image Gallery / add more imgs if needed = -->
<div class="col-md-6 order-md-1" style="
max-height:700px;
overflow-y:auto;
scrollbar-color:#75757C #2C2D37;
border-radius:18px;">
<div style="display:flex; flex-direction:column;">
<!-- img 1 -->
<img src="IMGLNK"
style="
width:100%;
border-radius:16px;
margin-bottom:1rem;">
<!-- img 2 -->
<img src="IMGLNK"
style="
width:100%;
border-radius:16px;
margin-bottom:1rem;">
<!-- img 3 -->
<img src="IMGLNK"
style="
width:100%;
border-radius:16px;
margin-bottom:1rem;">
<!-- img 4 -->
<img src="IMGLNK"
style="
width:100%;
border-radius:16px;
margin-bottom:1rem;">
<!-- add more above -->
</div>
</div>
<!-- ================= RIGHT: INFO ================= -->
<div class="col-md-6 order-md-2 d-flex flex-column" style="
padding-top:20px;
padding-left:30px;
padding-right:20px
min-height:200px;">
<!-- title of container -->
<p class="text-uppercase mb-2" style="
color:var(--mute);
font-family:var(--font);
font-size:20px">
title two
</p>
<!-- comm title -->
<div style="margin-bottom:24px;">
<h4 style="
margin:0;
font-size:1.9rem;
line-height:1.2;
color:var(--text);
font-weight:bold">
Comm title
</h4>
<!-- price -->
<div style="
color:var(--soft-grey);
font-size:20px;
margin-top:6px;">
From <span style="color:var(--text)">
00.00
</span>
</div>
</div>
<!-- ==================================================== ✦✦
Licenses explained
<s>, xmark and --mute - for not allowed
✧✧ ===================================================== -->
<ul class="pl-0 p-0 pb-3" style="
list-style-type:none;
color:var(--text);
font-family:var(--font);
font-size:17px;
margin-top:-10px;
border-bottom:1px solid #33343D">
<li><i class="fa-sharp far fa-check fa-fw"></i> Personal</li>
<li style="color:var(--mute)"><s><i class="fa-sharp far fa-xmark fa-fw"></i> Monetized content</s></li>
<li style="color:var(--mute)"><s><i class="fa-sharp far fa-xmark fa-fw"></i> Commercial merchandising</s></li>
</ul>
<!-- ==================================================== ✦✦
Accepts xyz / remove, change add or keep as is
✧✧ ====================================================== -->
<div class="d-block" style="
border:1px solid var(--border);
border-radius:16px;
background:var(--outer-bg);
padding:10px 14px;
font-weight:bold;
color:var(--soft-grey);">
Accepts
<div class="pull-right" style="
display:flex;
column-gap:6px;
align-items:center;
flex-wrap:wrap;">
<!-- PayPal -->
<div class="d-flex justify-content-center tooltipster"
title="paypal" data-toggle="tooltip" style="
background:#fff;
border-radius:6px;
height:22px;
min-width:42px;
align-items:center;
padding:0 6px;">
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a4/Paypal_2014_logo.png" style="height:14px;">
</div>
<!-- cashapp -->
<div class="d-flex justify-content-center tooltipster"
title="cashapp" data-toggle="tooltip" style="
background:#fff;
border-radius:6px;
height:22px;
min-width:42px;
align-items:center;
padding:0 6px;">
<img src="https://www.logo.wine/a/logo/Cash_App/Cash_App-Logo.wine.svg" style="height:14px;">
</div>
<!-- ko-fi -->
<div class="d-flex justify-content-center tooltipster"
title="kofi" data-toggle="tooltip" style="
background:#fff;
border-radius:6px;
height:22px;
min-width:42px;
align-items:center;
padding:0 6px;">
<img src="https://cdn.prod.website-files.com/5c14e387dab576fe667689cf/670f5a01229bf8a18f97a3c1_favion.png" style="height:14px;">
</div>
<!-- swish -->
<div class="d-flex justify-content-center tooltipster"
title="swish" data-toggle="tooltip" style="
background:#fff;
border-radius:6px;
height:22px;
min-width:42px;
align-items:center;
padding:0 6px;">
<img src="https://images.ctfassets.net/zrqoyh8r449h/7taM7P2vHzWdGUE5VIm4ou/ba9ff9d11fe33dac9a170cf7d8e2468c/Swish_Logo_Primary_Dark-BG_P3.png?w=600" style="height:14px;">
</div>
<!-- stripe -->
<div class="d-flex justify-content-center tooltipster"
title="stripe" data-toggle="tooltip" style="
background:#fff;
border-radius:6px;
height:22px;
min-width:42px;
align-items:center;
padding:0 6px;">
<img src="https://logos-world.net/wp-content/uploads/2021/03/Stripe-Emblem.png" style="height:14px;">
</div>
<!-- ============ end of Currency accepts =============== -->
</div>
</div>
<!-- ==================================================== ✦✦
DESCRIPTION
✧✧ ===================================================== -->
<div style="
margin-top:18px;
margin-bottom:8px;
color:var(--text);
font-family:var(--font);
font-weight:bold;
font-size:14px;">
Description
</div>
<div style="
border-top:1px solid #33343D;
margin-bottom:10px;">
</div>
<!-- ==== [1] Custom Service or Personalised =========== -->
<div class="mb-2" style="
border:1px solid var(--border);
border-radius:16px;
padding:14px 16px;
background: var(--outer-bg)">
<div style="
color:var(--text);
font-family:var(--font);
font-weight:bold;
font-size:14px;
line-height:1.2;">
<i class="fa-sharp far fa-sparkles fa-fw"></i>
Custom service
</div>
<div style="
color:var(--mute);
font-family:var(--font);
font-size:13px;
margin-top:4px">
Made from scratch
</div>
</div>
<!-- ==== [2] Open commun or SKEB/Surprise me =========== -->
<div class="mb-2" style="
border:1px solid var(--border);
border-radius:16px;
padding:14px 16px;
background: var(--outer-bg)">
<div style="
color:var(--text);
font-family:var(--font);
font-weight:bold;
font-size:14px;
line-height:1.2">
<i class="fa-sharp far fa-party-horn fa-fw"></i>
Surprise me
</div>
<div style="
color:var(--mute);
font-family:var(--font-family);
font-size:13px;
margin-top:4px;">
No WIP updates + mistake fixes only
</div>
</div>
<!-- ============= The actual description ============== -->
<div class="p-2" style="
border:1px solid var(--border);
border-radius:16px;
background:var(--outer-bg);
display:block">
<div class="p-3" style="
height:130px;
overflow-y:auto;
scrollbar-color:#75757C #2c2d37;
color:var(--soft-grey);
font-family:var(--font);
font-size:14px">
<ul class="pl-2 mb-0">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
<li><b>You will receive:</b> one (1) xyz</li>
</ul>
</div>
</div>
<!-- ==================================================== ✦✦
BUTTONS / TOS + REQ
✧✧ ===================================================== -->
<div class="row no-gutters" style="
position:sticky;
bottom:0;
column-gap:5px">
<!-- TERMS OF SERVICE -->
<a href="TOS" class="col btn btn-block" style="
margin-top:18px;
background:var(--open);
color:var(--alt-text);
border-radius:50px;
font-family:var(--font);
font-weight:bold;
font-size:16px;
padding:10px 22px;
text-decoration:none;">
TOS
</a>
<!-- REQUEST NOW -->
<a href="VGEN_OR_MSG_LNK" class="col btn btn-block"
style="
margin-top:18px;
background:var(--comm-bg);
color:var(--soft-grey);
border:1px solid var(--border);
font-family:var(--font);
border-radius:50px;
font-weight:bold;
font-size:16px;
padding:10px 22px;
letter-spacing:0.4px;
text-decoration:none;">
<i class="fa-sharp far fa-bell fa-fw"></i> Get Notified
</a>
<!-- ============== end of COMM BLOCK!! ================= -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- == add more comms above / end of Container 1 ===== -->
</div>
<!-- ============ end of SECOND Column + row =========== -->
</div>
</div>
<!-- ==================================================== ✦✦
Full About Me container
✧✧ ===================================================== -->
<div class="collapse" id="aboutmodal01">
<div style="
position:fixed;
top:0;
left:50%;
transform:translateX(-50%);
width:100vw;
height:100vh;
z-index:999999;
background:rgba(0,0,0,0.72);
overflow:hidden;">
<div style="
position:fixed;
top:50%;
left:50%;
transform:translate(-50%, -50%);
width:min(600px, calc(100vw - 32px));
max-width:100%;
max-height:calc(100vh - 48px);
overflow-y:auto;
scrollbar-color:#75757C #2C2D37;
background:var(--outer-bg);
border-radius:24px;
padding:28px 30px;
box-shadow:0 10px 30px rgba(0,0,0,0.28);">
<!-- Close Button -->
<a href="#aboutmodal01" class="d-inline-block" data-toggle="collapse" style="
color:var(--text);
font-family:var(--font);
font-size:24px;
line-height:1;
text-decoration:none;
margin-bottom:18px">
<i class="fa-solid fa-xmark"></i>
</a>
<!-- Name + Username flavour -->
<div style="
color:var(--text);
font-family:var(--font);
font-size:32px;
font-weight:bold;
line-height:1.1">
Name
</div>
<div style="
color:var(--mute);
font-family:var(--font);
font-size:14px;
margin-top:4px;
margin-bottom:20px">
@username ・ Joined Month Year ・ GMT-00
</div>
<!-- =================================================== ✦✦
Badge row in case you're a collector
dont have any, just remove it
✧✧ ===================================================== -->
<div style="
margin-top:24px;
margin-bottom:24px;
overflow-x:auto;
overflow-y:hidden;
white-space:nowrap;
padding-bottom:6px;">
<div style="
display:inline-flex;
flex-wrap:nowrap;
gap:10px;
min-width:max-content;">
<!-- ================== [01] Badge ===================== -->
<div style="
width:80px;
min-width:80px;
border-radius:18px;
background:rgba(255,255,255,0.04);
padding:12px 10px;
text-align:center;
flex:0 0 auto;">
<img src="https://vgen.co/img/badges/RoleAffiliate.webp" style="height:50px;">
<!-- badge name -->
<p style="
color:var(--mute);
font-family:var(--font);
font-size:12px;
margin-top:8px">
Verified
</p>
</div>
<!-- ===== add more above / end of Badge Row ========== -->
</div>
</div>
<!-- ================== [02] Full bio ================= -->
<div class="col" style="
color:var(--text);
font-family:var(--font);
font-size:16px;
line-height:1.75;
margin-bottom:18px;">
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 style="
border-top:1px solid #33343D;
margin:18px 0 14px 0"></div>
<!-- ================== [03] languages ================= -->
<div style="
color:var(--soft-grey);
font-family:var(--font);
font-size:14px;
font-weight:bold;
margin-bottom:12px">
Languages
</div>
<div class="d-flex flex-wrap" style="
gap:8px;
margin-bottom:20px;">
<!-- language 1 -->
<div style="
border:1px solid var(--border);
border-radius:14px;
padding:8px 14px;
color:var(--soft-grey);
font-size:13px">
lang <span style="color:var(--mute);">• Native / bilingual</span>
</div>
<!-- language 2 -->
<div style="
border:1px solid var(--border);
border-radius:14px;
padding:8px 14px;
color:var(--soft-grey);
font-size:13px">
lang <span style="color:var(--mute);">• Fluent</span>
</div>
<!-- language 3 -->
<div style="
border:1px solid var(--border);
border-radius:14px;
padding:8px 14px;
color:var(--soft-grey);
font-size:13px">
lang <span style="color:var(--mute);">• Conversational</span>
</div>
<!-- ======== add more above / end of Languages ======== -->
</div>
<div style="
border-top:1px solid #33343D;
margin:14px 0 18px 0"></div>
<!-- ==================================================== ✦✦
Links / add as much or less as you want
✧✧ ===================================================== -->
<div style="
display:flex;
flex-direction:column;">
<!-- ================== [01] Link ===================== -->
<a href="LINK_HERE" style="
color:var(--soft-grey);
text-decoration:none;
font-family:var(--font);
font-size:14px;
font-weight:bold">
<i class="fas fa-link fa-fw"></i> link
</a>
<!-- ================== [02] Link ===================== -->
<a href="LINK_HERE" style="
color:var(--soft-grey);
text-decoration:none;
font-family:var(--font);
font-size:14px;
font-weight:bold">
<i class="fas fa-link fa-fw"></i> link
</a>
<!-- ================== [03] Link ===================== -->
<a href="LINK_HERE" style="
color:var(--soft-grey);
text-decoration:none;
font-family:var(--font);
font-size:14px;
font-weight:bold">
<i class="fas fa-link fa-fw"></i> link
</a>
<!-- ======= add more above / end of Links =========== -->
</div>
</div>
</div>
</div>
<!-- ============= ✦✦ End of code! ================== ✦✦ -->
</div>
</div>
<!-- ==================================================== ✦✦
credits / do not remove
moving OK! Must be clickable
✧✧ ===================================================== -->
<p class="text-center" style="margin-top:-7px"><a href="/diadem" target="_BLANK" title="code by beel" data-toggle="tooltip" class="text-muted" style="text-decoration:none; font-size:9px; font-family:monospace">✦✦✦</a></p>