<!----------------------------------------------------
Free to Use - Basics Character HTML
by LeafJelly
Hanukkah Version
Colors
Use ctrl+f and replace all to quickly and easily change the colors
The inner BG is a RGBA use this to convert hex codes to rgba https://rgbacolorpicker.com/hex-to-rgba
Background: #0D2F82
Inner Background: rgba(77, 116, 213, .8)
Border:#FFF
Inner Borders: #E1A40D
Font: #FFF
Font Accent: #F0C864
------------------------------------------------------>
<div class="container-fluid p-0 mx-auto" style="max-width:1100px;"><div class="row no-gutters">
<div class="card col-12 m-auto progress-bar-striped progress-bar-animated" style="border-radius:10px;background-color:#0D2F82;border:1px dashed #FFF; color:#FFF">
<!--------- Top Banner -------------
Replace the URL with a image url/address
You can Delete this section if you don't want it
-------------------------------->
<div class="col-0 mt-1" style="background:url(
https://cdn.discordapp.com/attachments/395263691085316096/1049846155619614812/Star_of_David_Hanging_Decoration_PNG_Clip_Art-2241.png
) top; background-size:contain; background-repeat: repeat-x; height:30px;"></div>
<!------ Top banner End--------->
<div class="col-12 p-2 px-lg-5 py-3 my-auto"><div class="row no-gutters">
<div class="col-12 col-md-6 col-lg-3 p-2"><div class="card text-center pt-4 h-100" style="background-color: rgba(77, 116, 213, .8); border-radius:10px; border:1px dashed #E1A40D; color:#FFF">
<!--------- Icon -------------
Replace the URL with a image url/address
----------------------------->
<div style="background-image:url(
https://cdn.discordapp.com/attachments/395263691085316096/1049849838382108773/image.png
);background-size:cover; background-position:center; height:180px; width:180px;" class="rounded-circle mx-auto"></div>
<!--------- Icon Decorations -------------
You can change the icons using https://fontawesome.com/
Icon Colors
Use ctrl+f and replace all to quickly and easily change the colors
Star & Menorah: #FFC128
Holy Berry:#458A11
------------------------------------------>
<div>
<i class="fal fa-star-of-david fa-2x" style="position:absolute; margin:-190px -14px; text-shadow: 0 -1px 3px #FFF;
color:#FFC128"></i>
<i class="fas fa-hanukiah fa-2x" style="position:absolute; margin:-15px -18px; text-shadow: 0 1px 4px #FFF;
color:#FFC128"></i>
<i class="fad fa-dreidel fa-2x fa-flip-horizontal" style="position:absolute; margin:-20px -50px; text-shadow: 0 2px 3px #FFF;
color:white"></i>
<i class="fad fa-dreidel fa-2x fa-swap-opacity fa-flip-horizontal" style="position:absolute; margin:-20px -50px;
color:#4D74D5"></i>
<i class="fad fa-dreidel fa-2x" style="position:absolute; margin:-20px 25px; text-shadow: 0 2px 3px #FFF;
color:white"></i>
<i class="fad fa-dreidel fa-2x fa-swap-opacity" style="position:absolute; margin:-20px 25px;
color:#4D74D5"></i>
</div>
<!--------- Basic Stats -------------
------------------------------------>
<div class="row no-gutters pt-3 px-1">
<div class="col-6 my-auto text-right pr-1" style="color:#F0C864"><i>
Name
<!------- Symbol ---------->
</i><i class="fal fa-star-of-david px-1"></i></div>
<div class="col-6 my-auto text-left pb-1">
Content Content
</div>
<div class="col-6 my-auto text-right pr-1" style="color:#F0C864"><i>
Age
<!------- Symbol ---------->
</i><i class="fal fa-star-of-david px-1"></i></div>
<div class="col-6 my-auto text-left pb-1">
Content
</div>
<div class="col-6 my-auto text-right pr-1" style="color:#F0C864"><i>
Pronouns
<!------- Symbol ---------->
</i><i class="fal fa-star-of-david px-1"></i></div>
<div class="col-6 my-auto text-left pb-1">
Content
</div>
<div class="col-6 my-auto text-right pr-1" style="color:#F0C864"><i>
Gender
<!------- Symbol ---------->
</i><i class="fal fa-star-of-david px-1"></i></div>
<div class="col-6 my-auto text-left pb-1">
Content
</div>
<div class="col-6 my-auto text-right pr-1" style="color:#F0C864"><i>
Orientation
<!------- Symbol ---------->
</i><i class="fal fa-star-of-david px-1"></i></div>
<div class="col-6 my-auto text-left pb-1">
Content
</div>
<div class="col-6 my-auto text-right pr-1" style="color:#F0C864"><i>
Race/Species
<!------- Symbol ---------->
</i><i class="fal fa-star-of-david px-1"></i></div>
<div class="col-6 my-auto text-left pb-1">
Content
</div>
<div class="col-6 my-auto text-right pr-1" style="color:#F0C864"><i>
Alignment
<!------- Symbol ---------->
</i><i class="fal fa-star-of-david px-1"></i></div>
<div class="col-6 my-auto text-left pb-1">
Content
</div>
<div class="col-6 my-auto text-right pr-1" style="color:#F0C864"><i>
Occupation
<!------- Symbol ---------->
</i><i class="fal fa-star-of-david px-1"></i></div>
<div class="col-6 my-auto text-left pb-1">
This can be long if u want
</div>
<!------- Copy and paste above here for more stats -------->
</div></div></div>
<!--------- About Section -------------
--------------------------------------->
<div class="col-12 col-md-6 col-lg-9 pl-lg-2"><div class="row no-gutters">
<div class="p-2"><div class="card text-center p-3 p-lg-4" style="background-color: rgba(77, 116, 213, .8); border-radius:10px; border:1px dashed #E1A40D; color:#FFF">
<!------ Top Right Decoration ------>
<div class="text-right">
<i class="fad fa-dreidel fa-2x fa-swap-opacity" style="position:absolute; margin:-30px 0px;
color:#F0C864"></i></div>
<!------ Adj Bubbles------->
<div class="row no-gutters mx-auto mb-1">
<div class="badge badge-pill m-1 py-1" style="background:#E1A40D; font-weight:400; font-size:1em;">
Adj </div>
<div class="badge badge-pill m-1 py-1" style="background:#E1A40D; font-weight:400; font-size:1em;">
Adj </div>
<div class="badge badge-pill m-1 py-1" style="background:#E1A40D; font-weight:400; font-size:1em;">
Adj </div>
<div class="badge badge-pill m-1 py-1" style="background:#E1A40D; font-weight:400; font-size:1em;">
Adj </div>
<!------- Copy and paste above here for more ---------->
</div>
<!------Text------->
<p>
Write a summary or their personality here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
<!------ Copy and paste above here for more paragraphs ------->
<!------ Bottom Left Decoration ------>
<div class="text-left">
<i class="fad fa-hanukiah fa-2x fa-flip-horizontal" style="position:absolute; margin:0px -30px;
color:#F0C864"></i></div>
</div>
</div>
<!--------- Likes Section -------------
--------------------------------------->
<div class="col-12 col-lg-6 p-2 pt-3"><div class="card p-2 h-100" style="background-color: rgba(77, 116, 213, .8); border-radius:10px; border:1px dashed #E1A40D; color:#FFF">
<!------ Top Left Decoration ------>
<div class="text-left">
<i class="fas fa-heart fa-xl fa-swap-opacity" style="position:absolute; margin:-5px -15px;
color:#F0C864"></i></div>
<!-----Header------>
<i class="text-center text-uppercase"style="color:#F0C864; font-size:1.2em">
Likes</i>
<!-----Text------>
<ul>
<li>One</li>
<li>two</li>
<li>three</li>
<li>four</li>
<!------- Copy and Paste above here for More bulletins ----------->
</ul>
</div></div>
<!--------- Likes Section -------------
--------------------------------------->
<div class="col-12 col-lg-6 p-2 pt-3"><div class="card p-2 h-100" style="background-color: rgba(77, 116, 213, .8); border-radius:10px; border:1px dashed #E1A40D; color:#FFF">
<!------ Top Left Decoration ------>
<div class="text-left">
<i class="fas fa-heart-broken fa-xl fa-swap-opacity" style="position:absolute; margin:-5px -15px;
color:#F0C864"></i></div>
<!-----Header------>
<i class="text-center text-uppercase"style="color:#F0C864; font-size:1.2em">
Dislikes</i>
<!-----Text------>
<ul>
<li>One</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
<!------- Copy and Paste above here for More bulletins ----------->
</ul>
</div></div>
</div></div>
<!--------- Quote Section -------------
--------------------------------------->
<div class="col-12 p-2 pt-3"><div class="card p-2" style="background-color: rgba(77, 116, 213, .8); border-radius:10px; border:1px dashed #E1A40D; color:#FFF">
<i class="text-center text-uppercase"style="color:#F0C864; font-size:1.2em">
<i class="far fa-quote-left fa-xs pr-2"></i>
Add a Quote Here
<i class="far fa-quote-right fa-xs pl-2"></i>
</i></div></div>
</div>
<!--------------->
</div>
</div>
</div>
<!------- Credit Do Not Remove -------->
<p class="text-muted text-right col-12" style="font-size:.8em;">
HTML by @LeafJelly
</p>
</div>
