<!----HB.NEIMUUN
Tips....
I recommended adding " active" to all the carousel-items so you can see all slides as you edit
for quickest editing, select the background color & text color and change both at once
best results when the colors for every letter on each slide vary - think of it like sudoku
Resources....
th.circlejourney.net <-- live code editor
https://fontawesome.com/icons <-- font awesome
https://www.w3schools.com/colors/colors_names.asp <-- color ideas (use the hex codes)
Palette....
#DC143C <-- crimson
#800000 <-- maroon
#191970 <-- midnightblue
#FFFFFF <-- white
#000000 <--black
HOBIE!!----->
<!----snippet start---->
<div class="col-lg-3 mx-auto row no-gutters justify-content-center" style="margin-top:44px;">
<!----avatar start---->
<div class="col-12 justify-content-center">
<div class="card p-1 col-12" style="height:220px;">
<!----avatar image start---->
<div class="h-100 col-12 p-0" style="background-image:url('https://i.imgur.com/VleTLp3.jpg'); background-size:cover; background-position:center;">
<!----avatar link start---->
<a href="#" title="hobie!!!!!!" class="tooltipster btn-outline-secondary btn h-100 w-100 border-0" style="position:absolute; left:0; right:0; top:0; bottom:0; opacity:.44; mix-blend-mode:multiply; filter:grayscale(100%);"></a><!----avatar link end---->
</div><!----avatar image end---->
</div>
</div><!----avatar end---->
<!----name start---->
<div id="textcaro" class="col-12 carousel carousel-fade p-2" data-interval="444" data-ride="carousel">
<div class="carousel-inner">
<!----text slide 1 start---->
<div class="carousel-item active">
<div class="row no-gutters justify-content-center align-items-center text-center">
<!----letter start---->
<div class="col p-1" style="height:fit-content;">
<span class="p-2" style="background-color:#000000; color:#FFFFFF; font-family:'arial'; font-size:44px;">
h
</span>
</div><!----letter end---->
<!----letter start---->
<div class="col p-1" style="height:fit-content;">
<span class="p-1" style="background-color:#DC143C; color:#000000; font-family:'Courier New'; font-size:22px;">
o
</span>
</div><!----letter end---->
<!----letter start---->
<div class="col p-1" style="height:fit-content;">
<span class="p-2 text-uppercase" style="background-color:#800000; color:#DC143C; font-family:'Georgia'; font-size:33px;">
b
</span>
</div><!----letter end---->
<!----letter start---->
<div class="col p-1" style="height:fit-content;">
<span class="p-1 text-uppercase" style="background-color:#FFFFFF; color:#000000; font-family:'times new roman'; font-size:44px;">
i
</span>
</div><!----letter end---->
<!----letter start---->
<div class="col p-1" style="height:fit-content;">
<span class="p-2" style="background-color:#191970; color:#DC143C; font-family:'Brush Script MT, cursive'; font-size:22px;">
e
</span>
</div><!----letter end---->
</div>
</div><!----text slide start---->
<!----text slide 2 start---->
<div class="carousel-item">
<div class="row no-gutters justify-content-center align-items-center text-center">
<!----letter start---->
<div class="col p-1" style="height:fit-content;">
<span class="p-2 text-uppercase" style="background-color:#191970; color:#DC143C; font-family:'arial'; font-size:22px;">
h
</span>
</div><!----letter end---->
<!----letter start---->
<div class="col p-1" style="height:fit-content;">
<span class="p-1 text-uppercase" style="background-color:#800000; color:#DC143C; font-family:'Courier New'; font-size:44px;">
o
</span>
</div><!----letter end---->
<!----letter start---->
<div class="col p-1" style="height:fit-content;">
<span class="p-2" style="background-color:#FFFFFF; color:#000000; font-family:'Georgia'; font-size:22px;">
b
</span>
</div><!----letter end---->
<!----letter start---->
<div class="col p-1" style="height:fit-content;">
<span class="p-1" style="background-color:#000000; color:#FFFFFF; font-family:'times new roman'; font-size:22px;">
i
</span>
</div><!----letter end---->
<!----letter start---->
<div class="col p-1" style="height:fit-content;">
<span class="p-2" style="background-color:#DC143C; color:#000000; font-family:'Brush Script MT, cursive'; font-size:33px;">
e
</span>
</div><!----letter end---->
</div>
</div><!----text slide 2 start---->
<!----text slide 3 start---->
<div class="carousel-item">
<div class="row no-gutters justify-content-center align-items-center text-center">
<!----letter start---->
<div class="col p-1" style="height:fit-content;">
<span class="p-2 text-uppercase" style="background-color:#FFFFFF; color:#000000; font-family:'arial'; font-size:33px;">
h
</span>
</div><!----letter end---->
<!----letter start---->
<div class="col p-1" style="height:fit-content;">
<span class="p-1 text-uppercase" style="background-color:#000000; color:#FFFFFF; font-family:'Courier New'; font-size:33px;">
o
</span>
</div><!----letter end---->
<!----letter start---->
<div class="col p-1" style="height:fit-content;">
<span class="p-2" style="background-color:#191970; color:#DC143C; font-family:'Georgia'; font-size:44px;">
b
</span>
</div><!----letter end---->
<!----letter start---->
<div class="col p-1" style="height:fit-content;">
<span class="p-1" style="background-color:#800000; color:#DC143C; font-family:'times new roman'; font-size:33px;">
i
</span>
</div><!----letter end---->
<!----letter start---->
<div class="col p-1" style="height:fit-content;">
<span class="p-2 text-uppercase" style="background-color:#FFFFFF; color:#000000; font-family:'Brush Script MT, cursive'; font-size:22px;">
e
</span>
</div><!----letter end---->
</div>
</div><!----text slide 3 start---->
</div>
</div><!----name end---->
<!----credit section start---->
<div class="col-12 p-0 text-center">
<hr class="w-100 my-1">
<!----code credit---->
<a href="https://toyhou.se/neimuun" title="code by neimuun" target="_blank" class="tooltipster text-reset" style="text-decoration:none;">
<i class="fat fa-xs fa-skull fa-fw"></i>
</a><!----code credit---->
<!----avatar credit---->
<a href="https://www.reddit.com/r/spiderversedailymemes/comments/1424m5o/how_does_hobie_brown_fit_all_his_hair_in_his_mask/" title="image from Spider-Man: Across the Spiderverse" target="_blank" class="tooltipster text-reset" style="text-decoration:none;">
<i class="fat fa-xs fa-tooth fa-fw"></i>
</a><!----avatar credit---->
</div><!----credit section end---->
</div><!----snippet end---->
