[F2U] Genshin Impact Inspired HTML

<!--------------------------------

✦ For the MUSIC PLAYER you have to get the embed code, all you need to do is paste the code part after the '=' of the youtube link you need

for example

https://www.youtube.com/embed/SjLiiEC7ozg

the part you need to copy is

SjLiiEC7ozg

and put it in the place of CODEHERE

✦ Don't remove the credits, please!

✦ If you have problems feel free to DM me ovo)b


✦ And please consider support me on my Ko-Fi → https://ko-fi.com/chainofrain
---------------------------->


<!------------------------------------------
             CODE START
------------------------------------------->

<div class="card border-0 h-100 m-auto" style="box-shadow:0 0 10px rgba(0,0,0,0.5);background: url('https://genshin.hoyoverse.com/_nuxt/img/poster.47f71d4.jpg'); background-position: center; background-size: cover; width: 1180px">

<div class="card-header bg-faded">
<ul class="nav nav-tabs card-header-tabs nav-justified text-uppercase" style="letter-spacing:1px;">

<li class="nav-item" >
<a class="nav-link active" data-toggle="tab" href="#about" style="border-radius: 20px 20px 0px 0px;">
<span class="justify-content-middle rounded-0">
<span><i class="fa fa-home"></i></span></span>              </a>
</li>


<li class="nav-item" >
<a class="nav-link" data-toggle="tab" href="#game" style="border-radius: 20px 20px 0px 0px;">
<span class="justify-content-middle rounded-0">
<span><i class="fa fa-user"></i></span></span>              </a>
</li>

<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#story" style="border-radius: 20px 20px 0px 0px">
<span class="justify-content-middle rounded-0">
<i class="fas fa-books"></i></span></span>              </a>
</li>

<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#moodboard" style="border-radius: 20px 20px 0px 0px">
<span class="justify-content-middle rounded-0">
<span><i class="fas fa-camera-retro"></i></span></span></a>
</li>

<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#relationships" style="border-radius: 20px 20px 0px 0px">
<span class="justify-content-middle rounded-0">
<span><i class="fas fa-users"></i></span></span></a>
</li>
</ul></div>

<div class="tab-content" style="height: 600px; width: auto">

<!-------------------------------- [ ABOUT TAB ] --------------------------------->
<div class="tab-pane active show " id="about">

<!-----------
CHARACTER IMAGE + VISION
(sadly I couldn't find a good way to make it better than this, basically you have to create the image using 1180px wide canvas, I left the one I did as reference)
--------->
<div class="p-3" style="background: url('https://f2.toyhou.se/file/f2-toyhou-se/images/78224494_xPsLu5bqiDDAoB5.png'); height: 600px">


<div class="bg-faded mb-1 border-top-0" style="width:328px;height:6px; background-color: #CCA574; margin-bottom: 20px;margin-top: 90px"> </div>

<div class="display-1 text-uppercase font-weight-bold" style="letter-spacing:1px; color: #fff; margin-bottom: 15px; font-family: Radley; font-size: 75px; text-shadow:0 0 3px #111;"> Name</div>

<div class="bg-faded mb-1 border-top-0 font-weight-bold" style="width:590px;height:70px; background: url('https://f2.toyhou.se/file/f2-toyhou-se/images/78224460_8BiIvowovauhQPy.png');">

<div class="d-flex justify-content-between mx-1 p-2">
    <span style="font-size: 19px; font-family: Radley; margin-top: 12px; margin-left: 55px">Song Title - Singer</span>

    <span style="font-size: 40px; margin-top: -5px; margin-right: -3px; color: #fff"><iframe class="flex-fill" style="width: 100%; height:40px; width:60px;

    opacity: 0.01;" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen src="https://www.youtube.com/embed/CODEHERE"></iframe>

    <i class="fas fa-microphone" style="margin-left:-55px;"></i></span>
</div>
</div>

<div class="transbox " style=" background-color:rgba(0,0,0,0.7);border: none; padding:10px 10px;text-align:left; margin-top: 20px; color:#fff; width: 590px; height: 120px; overflow-x: hidden">
<div class="row no-gutters">
  <div class="col-md-1"><img src="https://i.imgur.com/2hbMso3.png" style="margin-left: 10px"></div>
  <div class="col"><p>

Brief description here. <br>This box scrolls so you can write how much you want, but it looks better if you keep it short 0v0

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


</div></div>

<!-------------------------------- [ IN-GAME TAB ] --------------------------------->

<div class="tab-pane" id="game">
<div class="p-3">
<div class="transbox" style="background-color:rgba(255,255,250,0.7);border: none; height: 570px; overflow: auto; padding: 10px 50px 50px 50px; max-width: 1180px" align="center">

  <table class="w-auto" style="border: none"><tr>
  <td class="font-weight-bold" style="letter-spacing:1px; color: #fff; ; font-family: Radley; font-size: 30px; text-shadow:0 0 3px #111;">“</td>
  <td class="font-weight-bold" style="letter-spacing:1px; color: #fff; ; font-family: Radley; font-size: 30px; text-shadow:0 0 3px #111;">

    Title

    </td>
  <td class="font-weight-bold" style="letter-spacing:1px; color: #fff; ; font-family: Radley; font-size: 30px; text-shadow:0 0 3px #111;">”</td>
</tr></table>

<hr class="mx-1 mt-1 mb-2" style="width: 500px">

<div class="row no-gutters" align="center">
    <div class="col" style="margin: 20px 20px 20px 20px" align="center">
<!----------------------
       AVATAR ICON
------------------------>
<img src="

IMAGE LINK

" style="width: 200px;">
</div>


<!----------------------
       RARITY
(add/remove "<i class="fas fa-star"></i>" to change rarity)
------------------------>
<div class="col" style="margin-top: 25px;">
<p class="text-uppercase font-weight-bold" style="letter-spacing:1px; color: #fff; ; font-family: Radley; font-size: 25px; text-shadow:0 0 3px #111;"> Rarity</p>
<p style="color:#ffd16e; font-size: 26px; text-shadow:0 0 3px #111; margin-top: 45px">

<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>

</p></div>

<!----------------------
       VISION
------------------------>
<div class="col" style="margin-top: 25px;">
<p class="text-uppercase font-weight-bold" style="letter-spacing:1px; color: #fff; ; font-family: Radley; font-size: 25px; text-shadow:0 0 3px #111;"> Vision</p>
<img src="

VISION IMAGE LINK

" style="width: 150px;">
    </div>

<!----------------------
       WEAPON
(you can find images on wiki)
------------------------>
<div class="col" style="margin-top: 25px;">
<p class="text-uppercase font-weight-bold" style="letter-spacing:1px; color: #fff; ; font-family: Radley; font-size: 25px; text-shadow:0 0 3px #111;"> Weapon</p>
<img src="

WEAPON IMAGE LINK

" style="width: 150px;">
</div>

<!----------------------
       NATION
------------------------>
<div class="col" style="margin-top: 25px;">
<p class="text-uppercase font-weight-bold" style="letter-spacing:1px; color: #fff; ; font-family: Radley; font-size: 25px; text-shadow:0 0 3px #111;"> Nation</p>
<img src="

NATION IMAGE LINK

" style="width: 150px;">
</div></div>
<hr class="mx-1 mt-1 mb-2">

<!----------------------
       VOICE ACTORS
------------------------>
<div class="row">
    <div class="col" style="background: none; margin-left: 10px">
<p style="background:none; color: #00BFA5; border: none; letter-spacing:1px; color: #fff; ; font-family: Radley; font-size: 25px; text-shadow:0 0 3px #111; text:uppercase; font-weight: bold">VOICE ACTORS</p>
<p>
  <table class="w-auto" style="border:none">
<tr>
<td style="width:150px;"><b> English </b></td>
<td style="width:150px;" align="right">
<a href="LINK" style="color:#00BFA5">
Name</a></td>
</tr>
</table>
<table class="w-auto" style="border:none"><tr>
<td style="width:150px;"><b> Chinese </b></td>
<td style="width:150px;" align="right">
<a href="LINK" style="color:#00BFA5">
Name</a></td>
</tr>
</table>
<table class="w-auto" style="border:none">
<tr>
<td style="width:150px;"><b> Japanese </b></td>
<td style="width:150px;" align="right">
<a href="LINK" style="color:#00BFA5">
Name</a></td>
</tr>
</table>
<table class="w-auto" style="border:none">
<tr>
<td style="width:150px;"><b> Korean </b></td>
<td style="width:150px;" align="right">
<a href="LINK" style="color:#00BFA5">
Name</a></td>
</tr>
</table>
</p>
</div>


<!----------------------
          BIO
------------------------>
<div class="col" style="background: none; margin-left: 10px">
<p style="background:none; color: #00BFA5; border: none; letter-spacing:1px; color: #fff; ; font-family: Radley; font-size: 25px; text-shadow:0 0 3px #111; text:uppercase; font-weight: bold">BIO</p>
<p>
<table class="w-auto" style="border:none">
<tr>
<td style="width:150px;"><b> Sex </b></td>
<td style="width:150px;" align="right"> text </td>
</tr>
</table>
<table class="w-auto" style="border:none">
<tr>
<td style="width:150px;"><b> Birthday </b></td>
<td style="width:150px;" align="right"> text </td>
</tr>
</table>
<table class="w-auto" style="border:none">
<tr>
<td style="width:150px;"><b> Constellation </b></td>
<td style="width:150px;" align="right"> text</td>
</tr>
</table>
<table class="w-auto" style="border:none">
<tr>
<td style="width:150px;"><b> Region </b></td>
<td style="width:150px;" align="right"> text </td>
</tr>
</table>
<table class="w-auto" style="border:none">
<tr>
<td style="width:150px;"><b> Affiliation </b></td>
<td style="width:150px;" align="right"> text </td>
</tr>
</table>
<table class="w-auto" style="border:none">
<tr>
<td style="width:150px;"><b> Special Dish </b></td>
<td style="width:150px;" align="right"> text </td>
</tr>
</table>
<table class="w-auto" style="border:none">
<tr>
<td style="width:150px;"><b> How to Obtain </b></td>
<td style="width:150px;" align="right"> text </td> </tr>
</table></p>
</div>


<!----------------------
          NAMES
------------------------>
<div class="col" style="background: none; margin-left: 10px">
<p style="background:none; color: #00BFA5; border: none; letter-spacing:1px; color: #fff; ; font-family: Radley; font-size: 25px; text-shadow:0 0 3px #111; text:uppercase; font-weight: bold">TRANSLATED NAMES</p>
<p>
<table class="w-auto" style="border:none">
<tr>
<td style="width:150px;"><b> Chinese Name </b></td>
<td style="width:150px;" align="right"> text </td>
</tr>
</table>
<table class="w-auto" style="border:none">
<tr>
<td style="width:150px;"><b> Japanese Name </b></td>
<td style="width:150px;" align="right"> text </td>
</tr>
</table>
<table class="w-auto" style="border:none">
<tr>
<td style="width:150px;"><b> Korean Name </b></td>
<td style="width:150px;" align="right"> text </td>
</tr>
</table>
</p>
</div>
</div>
<hr class="mx-1 mt-1 mb-2">

<!----------------------
      PERSONALITY
------------------------>
<p class="text-uppercase font-weight-bold" style="letter-spacing:1px; color: #fff; ; font-family: Radley; font-size: 30px; text-shadow:0 0 3px #111;"> Personality</p>

<table class="w-auto" style="border: none"><tr>
  <td class="font-weight-bold" style="letter-spacing:1px; color: #fff; ; font-family: Radley; font-size: 50px; text-shadow:0 0 3px #111;">“</td>
  <td><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></td>
<td class="font-weight-bold" style="letter-spacing:1px; color: #fff; ; font-family: Radley; font-size: 50px; text-shadow:0 0 3px #111;">”</td>
</tr></table>
</div></div></div>

<!-------------------------------- [ STORY TAB ] --------------------------------->
<div class="tab-pane" id="story">
<div class="p-3">
  <div class="transbox" style="background-color:rgba(255,255,250,0.7);border: none; height: 570px; overflow: auto; padding: 10px 50px 50px 50px; max-width: 1180px" align="left">

  <table class="w-auto" style="border: none"><tr>
  <td class="font-weight-bold" style="letter-spacing:1px; color: #fff; ; font-family: Radley; font-size: 20px; text-shadow:0 0 3px #111;"><i class="fas fa-bookmark"></i></td>
<!------- CHARACTER DETAILS -------->
  <td class="font-weight-bold" style="letter-spacing:1px; color: #fff; ; font-family: Radley; font-size: 30px; text-shadow:0 0 3px #111;">Character Details</td>
</tr></table>
<hr class="mx-1 mt-1 mb-2">
<p>[text]</p>

<!------- STORY 1 -------->
  <table class="w-auto" style="border: none"><tr>
  <td class="font-weight-bold" style="letter-spacing:1px; color: #fff; ; font-family: Radley; font-size: 20px; text-shadow:0 0 3px #111;"><i class="fas fa-bookmark"></i></td>
  <td class="font-weight-bold" style="letter-spacing:1px; color: #fff; ; font-family: Radley; font-size: 30px; text-shadow:0 0 3px #111;">Story 1</td>
</tr></table>
<hr class="mx-1 mt-1 mb-2">
<p>[text]</p>

<!------- STORY 2 -------->
  <table class="w-auto" style="border: none"><tr>
  <td class="font-weight-bold" style="letter-spacing:1px; color: #fff; ; font-family: Radley; font-size: 20px; text-shadow:0 0 3px #111;"><i class="fas fa-bookmark"></i></td>
  <td class="font-weight-bold" style="letter-spacing:1px; color: #fff; ; font-family: Radley; font-size: 30px; text-shadow:0 0 3px #111;">Story 2</td>
</tr></table>
<hr class="mx-1 mt-1 mb-2">
<p>[text]</p>

<!------- STORY 3 -------->
  <table class="w-auto" style="border: none"><tr>
  <td class="font-weight-bold" style="letter-spacing:1px; color: #fff; ; font-family: Radley; font-size: 20px; text-shadow:0 0 3px #111;"><i class="fas fa-bookmark"></i></td>
  <td class="font-weight-bold" style="letter-spacing:1px; color: #fff; ; font-family: Radley; font-size: 30px; text-shadow:0 0 3px #111;">Story 3</td>
</tr></table>
<hr class="mx-1 mt-1 mb-2">
<p>[text]</p>

<!------- STORY 4 -------->
  <table class="w-auto" style="border: none"><tr>
  <td class="font-weight-bold" style="letter-spacing:1px; color: #fff; ; font-family: Radley; font-size: 20px; text-shadow:0 0 3px #111;"><i class="fas fa-bookmark"></i></td>
  <td class="font-weight-bold" style="letter-spacing:1px; color: #fff; ; font-family: Radley; font-size: 30px; text-shadow:0 0 3px #111;">Story 4</td>
</tr></table>
<hr class="mx-1 mt-1 mb-2">
<p>[text]</p>

<!------- STORY 5 -------->
  <table class="w-auto" style="border: none"><tr>
  <td class="font-weight-bold" style="letter-spacing:1px; color: #fff; ; font-family: Radley; font-size: 20px; text-shadow:0 0 3px #111;"><i class="fas fa-bookmark"></i></td>
  <td class="font-weight-bold" style="letter-spacing:1px; color: #fff; ; font-family: Radley; font-size: 30px; text-shadow:0 0 3px #111;">Story 5</td>
</tr></table>
<hr class="mx-1 mt-1 mb-2">
<p>[text]</p>

<!------- BOOK? -------->
  <table class="w-auto" style="border: none"><tr>
  <td class="font-weight-bold" style="letter-spacing:1px; color: #fff; ; font-family: Radley; font-size: 20px; text-shadow:0 0 3px #111;"><i class="fas fa-bookmark"></i></td>
  <td class="font-weight-bold" style="letter-spacing:1px; color: #fff; ; font-family: Radley; font-size: 30px; text-shadow:0 0 3px #111;">Title</td>
</tr></table>
<hr class="mx-1 mt-1 mb-2">
<p>[text]</p>

<!------- VISION -------->
  <table class="w-auto" style="border: none"><tr>
  <td class="font-weight-bold" style="letter-spacing:1px; color: #fff; ; font-family: Radley; font-size: 20px; text-shadow:0 0 3px #111;"><i class="fas fa-bookmark"></i></td>
  <td class="font-weight-bold" style="letter-spacing:1px; color: #fff; ; font-family: Radley; font-size: 30px; text-shadow:0 0 3px #111;">Vision</td>
</tr></table>
<hr class="mx-1 mt-1 mb-2">
<p>[text]</p>
<br>
<table class="w-auto" style="border: none"><tr>
  <td class="font-weight-bold" style="letter-spacing:1px; color: #fff; ; font-family: Radley; font-size: 20px; text-shadow:0 0 3px #111;"><i class="fas fa-bookmark"></i></td>

<!------- TRIVIA -------->
<td class="font-weight-bold" style="letter-spacing:1px; color: #fff; ; font-family: Radley; font-size: 30px; text-shadow:0 0 3px #111;">Trivia</td>
</tr></table>
<hr class="mx-1 mt-1 mb-2">
<p><ul style="list-style-type:square;">
  <li style="color:#3A3A3A;">[trivia 1]</li>
  <li style="color:#3A3A3A;">[trivia 2]</li></p>
</div></div></div>

<!-------------------------------- [ MOODBOARD TAB ] --------------------------------->
<div class="tab-pane" id="moodboard">
<div class="p-3">
<div class="transbox" style="background-color:rgba(255,255,250,0.7);border: none; height: 570px; overflow: auto; padding: 10px 50px 50px 50px; max-width: 1180px" align="center">

<div class="row no-gutters">
<div class="col-md-4 pr-md-2 mb-md-0 mb-2">

<!---------------------- IMAGE VERTICAL -------------------------->
<div style="background-image:url(

'IMAGE LINK'

);background-size:cover;background-position:center;max-height:550px; border-radius: 20px" class="h-100"></div>
</div>
<div class="col-md-8 mb-md-0 mb-3">
<div class="row no-gutters">
<div class="col-6 pr-1 mb-2">
<!---------------------- IMAGE 1 -------------------------->
<div style="background-image:url(

'IMAGE LINK'

);background-size:cover;background-position:center;min-height:250px; border-radius: 20px"></div>
</div>
<div class="col-6 pl-1 mb-2">
<!---------------------- IMAGE 2 -------------------------->
<div style="background-image:url(

'IMAGE LINK'

);background-size:cover;background-position:center;min-height:250px; border-radius: 20px"></div>
</div>
<div class="col-6 pr-1">
<!---------------------- IMAGE 3 -------------------------->
<div style="background-image:url(

'IMAGE LINK'

);background-size:cover;background-position:center;min-height:250px; border-radius: 20px"></div>
</div>
<div class="col-6 pl-1">
<!---------------------- IMAGE 4 -------------------------->
<div style="background-image:url(

'IMAGE LINK'

);background-size:cover;background-position:center;min-height:250px; border-radius: 20px"></div>
</div>
</div>
</div></div>

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

<!-------------------------------- [ RELATIONSHIPS TAB ] --------------------------------->
<div class="tab-pane" id="relationships">
<div class="p-3">
<div class="transbox" style="background-color:rgba(255,255,250,0.7);border: none; height: 570px; overflow: auto; padding: 10px 50px 50px 50px; max-width: 1180px" align="left">

<!-- -----------------------------
                NAME 1
  ------------------------------ -->
<div class="row">
<div class="col-lg-3"><img src="
IMAGE LINK
" style="width: 200px; margin-top: 20px"></div>
<div class="col"><p class="font-weight-bold" style="letter-spacing:1px; color: #fff; ; font-family: Radley; font-size: 30px; text-shadow:0 0 3px #111;">Name
<span class="font-weight-bold" style="letter-spacing:1px; color: #fff; ; font-family: Radley; font-size: 15px; text-shadow:0 0 3px #111;">
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fal fa-heart"></i>
  </span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas orci eu nulla tristique vehicula. Sed faucibus dapibus viverra. In vitae molestie justo, vel volutpat libero. Sed turpis massa, commodo at tincidunt id, suscipit quis purus. Nulla fermentum nulla quis tortor lacinia, vitae vulputate elit egestas. Cras et velit dignissim, ornare turpis id, rutrum nibh. Maecenas eleifend ac arcu eget tempor. Nulla et urna cursus, gravida arcu vitae, pulvinar lorem. Sed libero dolor, bibendum non euismod a, commodo id eros.</p>
</div>
</div><br>
<!-- -----------------------------
                NAME 2
  ------------------------------ -->
<hr class="mx-1 mt-1 mb-2">
<div class="row">
<div class="col-lg-3"><img src="
IMAGE LINK
" style="width: 200px; margin-top: 20px"></div>
<div class="col"><p class="font-weight-bold" style="letter-spacing:1px; color: #fff; ; font-family: Radley; font-size: 30px; text-shadow:0 0 3px #111;">Name
<span class="font-weight-bold" style="letter-spacing:1px; color: #fff; ; font-family: Radley; font-size: 15px; text-shadow:0 0 3px #111;">
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fal fa-heart"></i>
  </span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas orci eu nulla tristique vehicula. Sed faucibus dapibus viverra. In vitae molestie justo, vel volutpat libero. Sed turpis massa, commodo at tincidunt id, suscipit quis purus. Nulla fermentum nulla quis tortor lacinia, vitae vulputate elit egestas. Cras et velit dignissim, ornare turpis id, rutrum nibh. Maecenas eleifend ac arcu eget tempor. Nulla et urna cursus, gravida arcu vitae, pulvinar lorem. Sed libero dolor, bibendum non euismod a, commodo id eros.</p>
</div>
</div><br>
<!-- -----------------------------
                NAME 3
  ------------------------------ -->
<hr class="mx-1 mt-1 mb-2">
<div class="row">
<div class="col-lg-3"><img src="
IMAGE LINK
" style="width: 200px; margin-top: 20px"></div>
<div class="col"><p class="font-weight-bold" style="letter-spacing:1px; color: #fff; ; font-family: Radley; font-size: 30px; text-shadow:0 0 3px #111;">Name
<span class="font-weight-bold" style="letter-spacing:1px; color: #fff; ; font-family: Radley; font-size: 15px; text-shadow:0 0 3px #111;">
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fal fa-heart"></i>
  </span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas orci eu nulla tristique vehicula. Sed faucibus dapibus viverra. In vitae molestie justo, vel volutpat libero. Sed turpis massa, commodo at tincidunt id, suscipit quis purus. Nulla fermentum nulla quis tortor lacinia, vitae vulputate elit egestas. Cras et velit dignissim, ornare turpis id, rutrum nibh. Maecenas eleifend ac arcu eget tempor. Nulla et urna cursus, gravida arcu vitae, pulvinar lorem. Sed libero dolor, bibendum non euismod a, commodo id eros.</p>
</div>
</div><br>
<!-- -----------------------------
                NAME 4
  ------------------------------ -->
<hr class="mx-1 mt-1 mb-2">
<div class="row">
<div class="col-lg-3"><img src="
IMAGE LINK
" style="width: 200px; margin-top: 20px"></div>
<div class="col"><p class="font-weight-bold" style="letter-spacing:1px; color: #fff; ; font-family: Radley; font-size: 30px; text-shadow:0 0 3px #111;">Name
<span class="font-weight-bold" style="letter-spacing:1px; color: #fff; ; font-family: Radley; font-size: 15px; text-shadow:0 0 3px #111;">
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fal fa-heart"></i>
  </span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas orci eu nulla tristique vehicula. Sed faucibus dapibus viverra. In vitae molestie justo, vel volutpat libero. Sed turpis massa, commodo at tincidunt id, suscipit quis purus. Nulla fermentum nulla quis tortor lacinia, vitae vulputate elit egestas. Cras et velit dignissim, ornare turpis id, rutrum nibh. Maecenas eleifend ac arcu eget tempor. Nulla et urna cursus, gravida arcu vitae, pulvinar lorem. Sed libero dolor, bibendum non euismod a, commodo id eros.</p>
</div>
</div>

</div>

</div></div>

</div></div>
<!------------------------------------------
CREDITS
-------------------------------------------->
<div class="text-right small py-2" style="letter-spacing:4px; width: 1180px">
<a href="https://toyhou.se/ChainOfRain" data-toggle="tooltip" data-placement="top" title="code by chainofrain" style="text-decoration:none;color:#CCA574;"><i class="far fa-code"></i>
</a> .
<a href="https://toyhou.se/4701769.-f2u-in-profile-playlist" data-toggle="tooltip" data-placement="top" title="music code by strabi" style="text-decoration:none;color:#CCA574;">
<i class="far fa-music"></i>
</a> .
<a href="https://genshin.mihoyo.com/en/home" data-toggle="tooltip" data-placement="top" title="genshin impact by mihoyo" style="color:#CCA574;">
<i class="far fa-leaf"></i>
</a>
</div>