04. Strawberry (With background)

<!------------------------------------------------
04. Strawberry

Code by dashyowo on Toyhouse.
Make sure to read my Terms of Service before using!
Thank you for using and have fun!
------------------------------------------------->

<!--- START --->

<div class="container-fluid p-5" style="background-image:url(https://i.imgur.com/Iop6Lon.png)">
<div class="my-lg-5 mx-auto" style="font-weight:500; font-size:80%; letter-spacing:.25px; line-height:15px; max-width:500px">

<!--- 01. FIRST BAR --->
<div class="card d-block rounded-0 p-2" style="box-shadow:2px 3px #EBD2D8; height:32px; border:2px solid #D7CDCE; background-image:url(https://i.imgur.com/4bFU3QC.png)">
<p style="text-shadow:2px 2px #F7D4DB; font-style:italic; font-family:Georgia; color:#E7B4BB; font-size:1.5em; font-weight:bold">
toyhou.se/username
<span class="pull-right">
<i class="fa-solid fa-comment"></i>
<i class="fa-solid fa-house"></i>
<i class="fa-regular fa-globe"></i>
</span>
</p>
</div>
<!------------->

<!--- 02. SECOND BAR (MAIN BLOCK 01) --->
<div class="card d-block rounded-0 p-2 mt-2" style="box-shadow:2px 3px #EBD2D8; border:2px solid #D7CDCE; background-color:#FFF">
<div class="row no-gutters">

<!--- FIRST COLUMN (IMAGE) --->
<div class="col-4 p-0" style="text-align:center">
<img src="https://i.imgur.com/bLQEHU9.jpg" style="border-radius:1em; width:150px; height:180px; object-fit:cover"/>
</div>
<!------------------------------------------------
Copy and paste the link of your desired image inside: src="LINK GOES HERE"
------------------------------------------------->
<!------------->

<!--- SECOND COLUMN (INFORMATION) --->
<div class="col-4 p-0 pt-2">

<!--- NAME --->
<p align="center" style="text-shadow:2px 2px #F7D4DB; font-style:italic; font-family:Georgia; color:#E7B4BB; font-size:2em; font-weight:bold">
Name
<i class="fa-duotone fa-strawberry"></i>
</p>
<!------------->

<!--- INTRODUCTION --->
<p style="color:#AEACAD">
<span style="color:#EED1D6">
Name
<i class="fa-solid fa-exclamation" style="font-style:italic"></i>
<i class="fa-solid fa-exclamation" style="font-style:italic"></i>
</span>
<span style="background:#FEF0EF">
They/them
</span>
🍥
<span style="text-decoration:underline">
Minor/Adult
</span>
&
nationality
♡
<span style="color:#EED1D6">
gender
</span>
 +
<span style="color:#EED1D6">
sexuality
</span>
q(≧▽≦q)
age
<span style="font-weight:bold">
language/language
<i class="fa-solid fa-exclamation"></i>
</span>
<span style="color:#EED1D6">
text here text here text here
</span>
</p>
<!------------------------------------------------
This is just an example! You can write your own introduction!
------------------------------------------------->
<!------------->

<!--- SOCIAL MEDIA LINKS  --->
<div class="row no-gutters">
<div class="col-4 p-1">

<a class="btn btn-outline d-block p-2 mt-2 mb-1" href="#LINK_HERE" style="text-align:center; font-weight:bold; font-style:italic; font-family:Georgia; color:#E7B4BB; border-radius:0.75em; border-color:#FEF0EF; background-color:#FEF0EF">
<i class="fa-brands fa-lg fa-instagram"></i>
</a>
</div>

<div class="col-4 p-1">
<a class="btn btn-outline d-block p-2 mt-2 mb-1" href="#LINK_HERE" style="text-align:center; font-weight:bold; font-style:italic; font-family:Georgia; color:#E7B4BB; border-radius:0.75em; border-color:#FEF0EF; background-color:#FEF0EF">
<i class="fa-brands fa-lg fa-deviantart"></i>
</a>
</div>

<div class="col-4 p-1">
<a class="btn btn-outline d-block p-2 mt-2 mb-1" href="#LINK_HERE" style="text-align:center; font-weight:bold; font-style:italic; font-family:Georgia; color:#E7B4BB; border-radius:0.75em; border-color:#FEF0EF; background-color:#FEF0EF">
<i class="fa-brands fa-lg fa-youtube"></i>
</a>
</div>
</div>
<!------------------------------------------------
Copy and paste the link of your social media accounts inside: href="LINK GOES HERE"
------------------------------------------------->
<!------------->

</div>

<!------------->

<!--- THIRD COLUMN (PREFERENCES)  --->

<div class="col-4 p-0">
<div class="row no-gutters">

<!--- IMAGES  --->
<div class="col-6 p-1">

<img src="https://i.imgur.com/6NoI2LO.png" style="border-radius:1em; width:75px; height:50px; object-fit:cover"/>
</div>

<div class="col-6 p-1">
<img src="https://i.imgur.com/ylb9Yk5.png" style="border-radius:1em; width:75px; height:50px; object-fit:cover"/>
</div>

</div>
<!------------->

<!--- (☆▽☆) SECTION  --->
<div class="card d-block rounded-0 p-1" style="border-width:2px; border-color:#DDBCC3; background-color:#FFF">
<p style="font-weight:500; color:#AEACAD">
<span class="mr-1" style="background:#FEF0EF">
(☆▽☆)
</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit . . .
</p>
</div>
<!------------------------------------------------
This section is basically the "Likes" section!
------------------------------------------------->
<!------------->

<!--- 〒▽〒 SECTION  --->
<div class="card d-block rounded-0 p-1 mt-1" style="border-width:2px; border-color:#DDBCC3; background-color:#FFF">
<p style="font-weight:500; color:#AEACAD">
<span class="mr-1" style="background:#FEF0EF">
〒▽〒
</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit . . .
</p>
</div>
<!------------------------------------------------
This section is basically the "Dislikes" section!
------------------------------------------------->
<!------------->

</div>
</div>
</div>

<!------------->

<!--- 03. THIRD BAR  --->
<div class="card d-block rounded-0 p-2 mt-2" style="box-shadow:2px 3px #EBD2D8; height:32px; border:2px solid #D7CDCE; background-image:url(https://i.imgur.com/4bFU3QC.png)">
<div class="row no-gutters">
<div class="col-6">
<p style="text-shadow:2px 2px #F7D4DB; font-style:italic; font-family:Georgia; color:#E7B4BB; font-size:1.5em; font-weight:bold">
Before You Follow
</p>
</div>
<div class="col-6">
<p style="text-shadow:2px 2px #F7D4DB; font-style:italic; font-family:Georgia; color:#E7B4BB; font-size:1.5em; font-weight:bold">
Don't Follow If
</p>
</div>
</div>
</div>
<!------------->

<!--- 04. FOURTH BAR (MAIN BLOCK 02)  --->

<div class="card d-block rounded-0 p-2 mt-2" style="box-shadow:2px 3px #EBD2D8; color:#AEACAD; border:2px solid #D7CDCE; background-color:#FFF">
<div class="row no-gutters">
<div class="col-6">

<!--- BEFORE YOU FOLLOW SECTION  --->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo. Et magnis dis parturient montes nascetur ridiculus mus.
</p>
<!------------->

</div>
<div class="col-6">

<!--- DON'T FOLLOW IF SECTION  --->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo. Et magnis dis parturient montes nascetur ridiculus mus.
</p>
<!------------->

</div>
</div>
</div>

<!------------->

<!--- 05. FIFTH BAR (MAIN BLOCK 03)  --->

<div class="card d-block rounded-0 p-2 mt-2" style="box-shadow:2px 3px #EBD2D8; color:#AEACAD; border:2px solid #D7CDCE; background-color:#FFF">

<!--- FIRST COLUMN  --->

<div class="row no-gutters">
<div class="col-7">
<div class="row no-gutters">
<div class="column">

<!--- IMAGES  --->
<a href="#LINK_HERE">
<img src="https://i.imgur.com/c3EVYY7.jpg" style="border-radius:1em; height:50px; width:69px; object-fit:cover"/>
</a>
</div>
<div class="column pl-2 pr-2">
<a href="#LINK_HERE">
<img src="https://i.imgur.com/zN3XdxY.jpg" style="border-radius:1em; height:50px; width:69px; object-fit:cover"/>
</a>
</div>
<div class="column">
<a href="#LINK_HERE">
<img src="https://i.imgur.com/PrinN37.jpg" style="border-radius:1em; height:50px; width:69px; object-fit:cover"/>
</a>
<!------------->

</div>
</div>

<!--- DESCRIPTION  --->
<a href="#LINK_HERE" style="color:#AEACAD">
<p class="mb-0">
#1
<span style="background:#FEF0EF">Sona</span>
<span style="color:#E7B4BB">
Character name
</span>
</p>
</a>

<a href="#LINK_HERE" style="color:#AEACAD">
<p class="mb-0">
#2
<span style="background:#FEF0EF">Latest artwork</span>
<span style="color:#E7B4BB">
Name of the artwork
</span>
</p>
</a>

<a href="#LINK_HERE" style="color:#AEACAD">
<p>
#3
<span style="background:#FEF0EF">Anything you want</span>
<span style="color:#E7B4BB">
to feature goes here!
</span>
</p>
</a>

<!------------->

</div>
<!------------------------------------------------
Make sure the images, links and descriptions match!
------------------------------------------------->
<!------------->

<!--- SECOND COLUMN  --->
<div class="col-5">

<!--- FANDOMS SECTION  --->
<div class="card d-block rounded-0 p-1" style="border-width:2px; border-color:#DDBCC3; background-color:#FFF">
<p style="font-weight:500; color:#AEACAD">
<span class="mr-1" style="background:#FEF0EF; font-weight:bold">
Fandoms
</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit . . .
</p>
</div>
<!------------->

<!--- ++ SECTION  --->

<p class="mt-2">
<span class="mr-1" style="background:#FEF0EF; font-weight:bold">
++
</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit . . .
</p>
<!------------------------------------------------
This section can be anything! It can be some extra notes, warnings, etc...!
------------------------------------------------->
<!------------->

</div>
</div>

<!------------->

</div>

<!------------->

<!--- CREDITS (DO NOT DELETE) --->
<div class="faded small text-right">
<a href="https://toyhou.se/19051128.04-strawberry"><i class="fas fa-code text-muted fa-xs fa-fw tooltipster" title="Code by dashyowo"></i></a>
</div>
<!------------->

</div>
</div>

<!------------->

<!--- END --->