08. Breakfast

<!------------------------------------------------
08. Breakfast

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

<!------------------------------------------------
DIRECTORY

> To change images, copy and paste the link of your image inside either:
src="LINK GOES HERE"
OR
background-image:url(LINK GOES HERE)
> Copy and paste links inside: href="LINK GOES HERE"
------------------------------------------------->

<!--- START --->

<div class="container mx-auto p-0 pb-3 m-0" style="background-color:#FFF; color:#000; font-family:Century Gothic; font-size:90%; letter-spacing:.25px; line-height:15px; width:1200px">

<!--- BANNER --->
<div class="card d-block rounded-0 border-0" style="height:150px; background-image:url(https://i.imgur.com/EbKIfd0.jpg)">
</div>
<!------------->

<div class="container mx-auto p-0 mt-5" style="width:900px">

<!--- WELCOME TEXT --->
<p class="mt-5" style="font-weight:bold; font-size:2em; letter-spacing:8px">
Welcome ☆*: .｡.
</p>
<!------------->

<!--- BLUE DIVIDER --->
<div class="card d-block rounded-0 border-0 mt-3" style="background-color:#E7F3F7">
<br>
</div>
<!------------->

<div class="row mt-3">
<div class="col-3">
<div class="row no-gutters">

<!--- TIME BOXES --->
<div class="col pr-1">
<div class="card d-block border-0 pt-4" style="height:120px; font-weight:900; color:#FFF; background-color:#EEBEBC">
<p class="mt-4 text-center" style="font-size:4em">
03
</p>
<p class="pt-4 mt-3 p-1 text-uppercase" style="font-size:.75em">
PM
</p>
</div>
</div>
<div class="col pl-1">
<div class="card d-block border-0 pt-4" style="height:120px; font-weight:900; color:#FFF; background-color:#EEBEBC">
<p class="mt-4 text-center" style="font-size:4em">
32
</p>
<p class="pt-4 p-1 text-uppercase pull-right" style="font-size:.75em">
Wednesday
</p>
</div>
<!------------->
</div>
<!------------->

</div>

<!--- IMAGE --->
<img class="mt-2" src="https://i.imgur.com/aUeLxfW.jpg"/>
<!------------->

<!--- CALENDER --->

<!--- 01. CALENDER HEADER --->
<div class="card rounded-0 border-0 mt-1" style="background-color:#EEBEBC">
<div class="row justify-content-center">
<div class="card-flex p-2">
<a href="#CALENDER" style="color:#FFF" data-slide="prev"><i class="fa-solid fa-xs fa-angle-left"></i></a>
</div>
<div class="card-flex col-auto align-items-center p-2">
<p class="text-center text-white" style="font-weight:bold">
D.O.B Feb 200*
</p>
</div>
<div class="card-flex pull-right p-2">
<a href="#CALENDER" style="color:#FFF" data-slide="next"><i class="fa-solid fa-xs fa-angle-right"></i></a>
</div>
</div>
</div>
<!------------->
<!--- 01. CALENDER CONTENT--->

<div class="carousel slide carousel-fade" id="CALENDER" data-ride="false" data-pause="true">
<div class="carousel-inner" style="background-color:#F9FAFB">

<!--- 01.01. CALENDER FIRST SLIDE --->
<div class="carousel-item active">
<div class="row mt-3 justify-content-center">
<div class="col-1 p-0 text-center" style="font-weight:bold">
S
</div>
<div class="col-1 text-center" style="font-weight:bold">
M
</div>
<div class="col-1 text-center" style="font-weight:bold">
T
</div>
<div class="col-1 text-center" style="font-weight:bold">
W
</div>
<div class="col-1 text-center" style="font-weight:bold">
T
</div>
<div class="col-1 text-center" style="font-weight:bold">
F
</div>
<div class="col-1 text-center" style="font-weight:bold">
S
</div>
</div>
<div class="row mt-1 mb-3 justify-content-center">
<div class="col-1 p-0 text-center">
<p class="m-0">
<span style="color:#D8D9DA">
29
</span>
</p>
<p class="m-0">
5
</p>
<p class="m-0">
12
</p>
<p class="m-0">
19
</p>
<p class="m-0">
26
</p>
<span style="color:#D8D9DA">
3
</span>
</div>
<div class="col-1 text-center">
<p class="m-0">
<span style="color:#D8D9DA">
30
</span>
</p>
<p class="m-0">
6
</p>
<p class="m-0">
13
</p>
<p class="m-0">
20
</p>
<p class="m-0">
27
</p>
<span style="color:#D8D9DA">
4
</span>
</div>
<div class="col-1 text-center">
<p class="m-0">
<span style="color:#D8D9DA">
31
</span>
</p>
<p class="m-0">
7
</p>
<p class="m-0">
14
</p>
<p class="m-0">
21
</p>
<p class="m-0">
28
</p>
<span style="color:#D8D9DA">
5
</span>
</div>
<div class="col-1 text-center">
1
<p class="m-0">
8
</p>
<p class="m-0">
15
</p>
<p class="m-0">
22
</p>
<p class="m-0">
29
</p>
<span style="color:#D8D9DA">
6
</span>
</div>
<div class="col-1 text-center">
2
<p class="m-0">
9
</p>
<p class="m-0">
16
</p>
<p class="m-0">
23
</p>
<p class="m-0">
30
</p>
<span style="color:#D8D9DA">
9
</span>
</div>
<div class="col-1 text-center">
3
<p class="m-0">
10
</p>
<p class="m-0">
17
</p>
<p class="m-0">
24
</p>
<p class="m-0">
31
</p>
<span style="color:#D8D9DA">
8
</span>
</div>
<div class="col-1 text-center">
4
<p class="m-0">
11
</p>
<p class="m-0">
18
</p>
<p class="m-0">
<span style="background-color:#EEBEBC">
25</span>
</p>
<p class="m-0">
<span style="color:#D8D9DA">
1
</span>
</p>
<span style="color:#D8D9DA">
9
</span>
</div>
</div>
</div>
<!--- 01.02. CALENDER SECOND SLIDE --->
<div class="carousel-item">
<div class="justify-content-center mt-3 mb-3">
<img src="https://i.imgur.com/Jsys5FL.jpg"/>
</div>
</div>
<!------------->

</div>
</div>

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

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

<!--- EXTERNAL LINKS HEADER BOX --->
<div class="card d-block rounded-0 border-0 mt-3 p-1" style="background-color:#E7F3F7; font-weight:bold">
<p>
<i class="fa-solid fa-xs fa-external-link mr-1" style="color:#969C9C"></i>
External links
</p>
</div>
<!------------->

<!--- EXTERNAL LINKS CONTENT SECTION --->
<a href="" class="p-1" style="color:#969C9C">
<i class="fa-brands fa-instagram" style="color:#000"></i>
Instagram
</a>

<hr class="m-1 mx-auto" style="border-top:2px dotted #969C9C"/>

<a href="" class="p-1" style="color:#969C9C">
<i class="fa-brands fa-deviantart" style="color:#000"></i>
DeviantART
</a>

<hr class="m-1 mx-auto" style="border-top:2px dotted #969C9C"/>
<a href="" class="p-1" style="color:#969C9C">
<i class="fa-brands fa-twitter" style="color:#000"></i>
Twitter
</a>

<hr class="m-1 mx-auto" style="border-top:2px dotted #969C9C"/>

<a href="" class="p-1" style="color:#969C9C">
<i class="fa-brands fa-youtube" style="color:#000"></i>
YouTube
</a>

<hr class="m-1 mx-auto" style="border-top:2px dotted #969C9C"/>

<a href="" class="p-1" style="color:#969C9C">
<i class="fa-solid fa-dollar" style="color:#000"></i>
Commission information
</a>

<hr class="m-1 mx-auto" style="border-top:2px dotted #969C9C"/>

<a href="" class="p-1" style="color:#969C9C">
<i class="fa-solid fa-circle-info" style="color:#000"></i>
Terms of Service
</a>

<hr class="m-1 mx-auto" style="border-top:2px dotted #969C9C"/>

<a href="" class="p-1" style="color:#969C9C">
<i class="fa-solid fa-mug" style="color:#000"></i>
Ko-fi/Tip me
</a>
<!------------->

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

<!--- GALLERY VIEW HEADER --->
<p class="m-0">
<i class="fa-solid fa-objects-column mr-1"></i>
Gallery view
</p>
<!------------->

<!--- DIVIDER --->
<div class="row no-gutters">
<div class="col-3">
<hr class="mt-1" style="border-top:2px solid #000"/>
</div>
<div class="col">
<hr class="mt-1" style="border-top:2px solid #F6F6F5"/>
</div>
</div>
<!------------->

<!--- WHAT ARE YOU LOOKING FOR? TEXT --->
<p style="font-weight:bold">
<i class="fas fa-sparkles mr-1"></i>
What are you looking for?
</p>
<!------------->

<div class="row no-gutters mt-3">
<div class="col pr-1">

<!--- FIRST BOX --->
<a href="" style="color:#000">
<img src="https://i.imgur.com/skbUeTK.jpg" style="height:100px; width:200px; border:2px solid #EDEDED; object-fit:cover; border-top-left-radius:0px; border-top-right-radius:0px"/>

<div class="card d-block p-2" style="background-color:#FFF; border:2px solid #EDEDED; border-top-width:0px; border-top-left-radius:0px; border-top-right-radius:0px">
<i class="fa-solid fa-heart mr-1" style="color:#969C9C"></i>
Text here 01
</div>
</a>
<!------------->

</div>
<div class="col pl-1 pr-1">

<!--- SECOND BOX --->
<a href="" style="color:#000">
<img src="https://i.imgur.com/cZQ9Vlf.jpg" style="height:100px; width:200px; border:2px solid #EDEDED; object-fit:cover; border-top-left-radius:0px; border-top-right-radius:0px"/>

<div class="card d-block p-2" style="background-color:#FFF; border:2px solid #EDEDED; border-top-width:0px; border-top-left-radius:0px; border-top-right-radius:0px">
<i class="fa-solid fa-sun mr-1" style="color:#969C9C"></i>
Text here 02
</div>
</a>
<!------------->

</div>
<div class="col pl-1">

<!--- THIRD BOX --->
<a href="" style="color:#000">
<img src="https://i.imgur.com/6U9RijU.jpg" style="height:100px; width:200px; border:2px solid #EDEDED; object-fit:cover; border-top-left-radius:0px; border-top-right-radius:0px"/>

<div class="card d-block p-2" style="background-color:#FFF; border:2px solid #EDEDED; border-top-width:0px; border-top-left-radius:0px; border-top-right-radius:0px">
<i class="fa-solid fa-moon mr-1" style="color:#969C9C"></i>
Text here 03
</div>
</a>
<!------------->

</div>
</div>
<div class="row no-gutters mt-2">
<div class="col pr-1">

<!--- FOURTH BOX --->
<a href="" style="color:#000">
<img src="https://i.imgur.com/LwfZ4Tm.jpg" style="height:100px; width:200px; border:2px solid #EDEDED; object-fit:cover; border-top-left-radius:0px; border-top-right-radius:0px"/>

<div class="card d-block p-2" style="background-color:#FFF; border:2px solid #EDEDED; border-top-width:0px; border-top-left-radius:0px; border-top-right-radius:0px">
<i class="fa-solid fa-cloud mr-1" style="color:#969C9C"></i>
Text here 04
</div>
</a>
<!------------->

</div>
<div class="col pl-1 pr-1">

<!--- FIFTH BOX --->
<a href="" style="color:#000">
<img src="https://i.imgur.com/QO2M0mD.jpg" style="height:100px; width:200px; border:2px solid #EDEDED; object-fit:cover; border-top-left-radius:0px; border-top-right-radius:0px"/>

<div class="card d-block p-2" style="background-color:#FFF; border:2px solid #EDEDED; border-top-width:0px; border-top-left-radius:0px; border-top-right-radius:0px">
<i class="fa-solid fa-wind mr-1" style="color:#969C9C"></i>
Text here 05
</div>
</a>
<!------------->

</div>
<div class="col pl-1">

<!--- SIXTH BOX --->
<a href="" style="color:#000">
<img src="https://i.imgur.com/nYk3f1N.jpg" style="height:100px; width:200px; border:2px solid #EDEDED; object-fit:cover; border-top-left-radius:0px; border-top-right-radius:0px"/>

<div class="card d-block p-2" style="background-color:#FFF; border:2px solid #EDEDED; border-top-width:0px; border-top-left-radius:0px; border-top-right-radius:0px">
<i class="fa-solid fa-tree mr-1" style="color:#969C9C"></i>
Text here 06
</div>
</a>
<!------------->

</div>
</div>
<div class="col-4 pr-1 p-0">

<!--- FAKE + NEW BOX --->
<div class="card d-block justify-content-center mt-2" style="background-color:#FFF; height:20px; color:#CFCFCF; border:2px solid #F6F6F5">
<p align="center">
<i class="fa-solid fa-plus mr-1"></i>
New
</p>
</div>
<!------------->

</div>

<!--- YELLOW DIVIDER --->
<div class="card d-block rounded-0 border-0 mt-3" style="background-color:#FCF3DA">
<br>
</div>
<!------------->

<!--- TABLE HEADER --->
<p class="m-0 mt-2">
<i class="fa-solid fa-grid mr-1"></i>
Table
</p>
<!------------->

<!--- DIVIDER --->
<div class="row no-gutters">
<div class="col-2">
<hr class="mt-1" style="border-top:2px solid #000"/>
</div>
<div class="col">
<hr class="mt-1" style="border-top:2px solid #F6F6F5"/>
</div>
</div>
<!------------->

<!--- TO-DO LIST TEXT --->
<p style="font-weight:bold">
<i class="fas fa-list-check mr-1"></i>
To-do list
</p>
<!------------->

<!--- TABLE HEADERS --->
<div class="row no-gutters mt-3">
<div class="col-5">
<div class="card d-block rounded-0 p-1" style="border:2px solid #F6F6F5; background-color:#FFF; border-top:none; border-left:none; color:#969C9C">
<i class="fa-solid fa-thumbtack mr-2" style="rotate:45deg"></i>
Task
</div>
</div>
<div class="col-3">
<div class="card d-block rounded-0 p-1" style="border:2px solid #F6F6F5; background-color:#FFF; border-top:none; border-left:none; color:#969C9C">
<i class="fa-solid fa-circle-caret-down mr-1"></i>
Type
</div>
</div>
<div class="col-3">
<div class="card d-block rounded-0 p-1" style="border:2px solid #F6F6F5; background-color:#FFF; border-top:none; border-left:none; color:#969C9C">
<i class="fa-solid fa-clock mr-1"></i>
Due
</div>
</div>
<div class="col-1">
<div class="card d-block rounded-0 p-1" style="border:2px solid #F6F6F5; background-color:#FFF; border-top:none; border-left:none; color:#969C9C; ; border-right:none">
<i class="fa-regular fa-square-check"></i>
</div>
</div>
</div>
<!------------->

<!--- NAME ROW --->
<div class="row no-gutters">
<div class="col-5">
<div class="card d-block rounded-0 p-1" style="border:2px solid #F6F6F5; background-color:#FFF; border-top:none; border-left:none">
Text here
</div>
</div>
<div class="col-3">
<div class="card d-block rounded-0 p-1" style="border:2px solid #F6F6F5; background-color:#FFF; border-top:none; border-left:none">
<span class="px-1" style="background:#F4E0E9; border-radius:.3em">
Name
</span>
</div>
</div>
<div class="col-3">
<div class="card d-block rounded-0 p-1" style="border:2px solid #F6F6F5; background-color:#FFF; border-top:none; border-left:none">
June 2, 2022
</div>
</div>
<div class="col-1">
<div class="card d-block rounded-0 p-1" style="border:2px solid #F6F6F5; background-color:#FFF; border-top:none; border-left:none; border-right:none">
<i class="fa-regular fa-square"></i>
</div>
</div>
</div>
<!------------->

<!--- AGE ROW --->
<div class="row no-gutters">
<div class="col-5">
<div class="card d-block rounded-0 p-1" style="border:2px solid #F6F6F5; background-color:#FFF; border-top:none; border-left:none">
Text here
</div>
</div>
<div class="col-3">
<div class="card d-block rounded-0 p-1" style="border:2px solid #F6F6F5; background-color:#FFF; border-top:none; border-left:none">
<span class="px-1" style="background:#FDECC8; border-radius:.3em">
Age
</span>
</div>
</div>
<div class="col-3">
<div class="card d-block rounded-0 p-1" style="border:2px solid #F6F6F5; background-color:#FFF; border-top:none; border-left:none">
June 2, 2022
</div>
</div>
<div class="col-1">
<div class="card d-block rounded-0 p-1" style="border:2px solid #F6F6F5; background-color:#FFF; border-top:none; border-left:none; border-right:none">
<i class="fa-regular fa-square"></i>
</div>
</div>
</div>
<!------------->

<!--- PRONOUNS ROW --->
<div class="row no-gutters">
<div class="col-5">
<div class="card d-block rounded-0 p-1" style="border:2px solid #F6F6F5; background-color:#FFF; border-top:none; border-left:none">
Text here
</div>
</div>
<div class="col-3">
<div class="card d-block rounded-0 p-1" style="border:2px solid #F6F6F5; background-color:#FFF; border-top:none; border-left:none">
<span class="px-1" style="background:#D3E5EF; border-radius:.3em">
Pronouns
</span>
</div>
</div>
<div class="col-3">
<div class="card d-block rounded-0 p-1" style="border:2px solid #F6F6F5; background-color:#FFF; border-top:none; border-left:none">
June 3, 2022
</div>
</div>
<div class="col-1">
<div class="card d-block rounded-0 p-1" style="border:2px solid #F6F6F5; background-color:#FFF; border-top:none; border-left:none; border-right:none">
<i class="fa-regular fa-square"></i>
</div>
</div>
</div>
<!------------->

<!--- NATIONALITY ROW --->
<div class="row no-gutters">
<div class="col-5">
<div class="card d-block rounded-0 p-1" style="border:2px solid #F6F6F5; background-color:#FFF; border-top:none; border-left:none">
Text here
</div>
</div>
<div class="col-3">
<div class="card d-block rounded-0 p-1" style="border:2px solid #F6F6F5; background-color:#FFF; border-top:none; border-left:none">
<span class="px-1" style="background:#F4E0E9; border-radius:.3em">
Nationality
</span>
</div>
</div>
<div class="col-3">
<div class="card d-block rounded-0 p-1" style="border:2px solid #F6F6F5; background-color:#FFF; border-top:none; border-left:none">
June 4, 2022
</div>
</div>
<div class="col-1">
<div class="card d-block rounded-0 p-1" style="border:2px solid #F6F6F5; background-color:#FFF; border-top:none; border-left:none; border-right:none; border-right:none">
<i class="fa-regular fa-square"></i>
</div>
</div>
</div>
<!------------->

<!--- LANGUAGE ROW --->
<div class="row no-gutters">
<div class="col-5">
<div class="card d-block rounded-0 p-1" style="border:2px solid #F6F6F5; background-color:#FFF; border-top:none; border-left:none">
Text here
</div>
</div>
<div class="col-3">
<div class="card d-block rounded-0 p-1" style="border:2px solid #F6F6F5; background-color:#FFF; border-top:none; border-left:none">
<span class="px-1" style="background:#FDECC8; border-radius:.3em">
Language
</span>
</div>
</div>
<div class="col-3">
<div class="card d-block rounded-0 p-1" style="border:2px solid #F6F6F5; background-color:#FFF; border-top:none; border-left:none">
June 5, 2022
</div>
</div>
<div class="col-1">
<div class="card d-block rounded-0 p-1" style="border:2px solid #F6F6F5; background-color:#FFF; border-top:none; border-left:none; border-right:none">
<i class="fa-regular fa-square"></i>
</div>
</div>
</div>
<!------------->

<!--- SEXUALITY ROW --->
<div class="row no-gutters">
<div class="col-5">
<div class="card d-block rounded-0 p-1" style="border:2px solid #F6F6F5; background-color:#FFF; border-top:none; border-left:none">
Text here
</div>
</div>
<div class="col-3">
<div class="card d-block rounded-0 p-1" style="border:2px solid #F6F6F5; background-color:#FFF; border-top:none; border-left:none">
<span class="px-1" style="background:#D3E5EF; border-radius:.3em">
Sexuality
</span>
</div>
</div>
<div class="col-3">
<div class="card d-block rounded-0 p-1" style="border:2px solid #F6F6F5; background-color:#FFF; border-top:none; border-left:none">
June 12, 2022
</div>
</div>
<div class="col-1">
<div class="card d-block rounded-0 p-1" style="border:2px solid #F6F6F5; background-color:#FFF; border-top:none; border-left:none; border-right:none; border-right:none">
<i class="fa-regular fa-square"></i>
</div>
</div>
</div>
<!------------->

<!--- FAKE NEW ROW --->
<div class="card d-block rounded-0 p-1" style="background-color:#FFF; border:2px solid #F6F6F5; border-top:none; border-left:none; border-right:none; color:#969C9C">
<i class="fas fa-xs fa-plus mr-1"></i>
New
</div>
<!------------->

<!--- IMAGES --->
<div class="row no-gutters">

<div class="col">
<img src="https://i.imgur.com/aWhyBkK.png" style="width:150px; height:150px; object-fit:contain"/>
</div>

<div class="col">
<img src="https://i.imgur.com/5g2GtEc.png" style="width:130px; height:130px; object-fit:contain"/>
</div>

<div class="col">
<img src="https://i.imgur.com/nyWMLun.png" style="width:150px; height:150px; object-fit:contain"/>
</div>

<div class="col">
<img src="https://i.imgur.com/5X4xpu6.png" style="width:130px; height:130px; object-fit:contain"/>
</div>

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

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

<!--- QUOTE BOX --->
<div class="card d-block rounded-0 border-0 p-1" style="background-color:#FAF1F5; font-size:.75em">
<i class="fas fa-quotes mr-1"></i>
Text here Text here text here
</div>
<!------------->

<!--- SPOTIFY SECTION --->
<div class="card d-block rounded-0 border-0 mt-2" style="background:linear-gradient(#765858, #604948)">
<div class="row no-gutters mt-1">
<div class="col-4">

<!--- IMAGE IN SPOTIFY BOX --->
<img src="https://i.imgur.com/LwozFsB.jpg" style="height:60px; width:60px; object-fit:cover"/>
<!------------->

</div>
<div class="col-8 pt-1 pr-2" style="color:#FFF">

<!--- SPOTIFY BOX --->
<p class="m-0" style="font-weight:bold">
sad machine
<span class="pull-right">
<i class="fa-brands fa-spotify"></i>
</span>
</p>
<p class="m-0" style="font-size:.75em; color:#BABABA">
Porter Robinson
</p>
<p class="mt-1">
<i class="fa-solid fa-backward-step mr-1"></i>
<i class="fa-solid fa-horizontal-rule" style="color:#BABABA"></i>
<i class="fa-solid fa-forward-step ml-1"></i>
<span class="pull-right pr-1">
<i class="fa-solid fa-share-nodes" style="color:#BABABA"></i>
</span>
</p>
<!------------->

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

<!--- SPOTIFY PLAYLIST BOX --->
<div class="card d-block rounded-0 border-0 p-1" style="background:linear-gradient(#3A2B2C, #000)">

<div class="row no-gutters">
<div class="col-2 p-1" style="color:#FFF">
<p style="color:#BABABA">
1
</p>
</div>
<div class="col-8 p-1" style="color:#FFF">
<p class="m-0">
Cotton Ca...
</p>
<p class="m-0" style="font-size:.75em; color:#BABABA">
Esthie
</p>
</div>
<div class="col-2 pt-1 pb-1 pr-1" style="color:#FFF">
<p style="color:#BABABA">
2:01
</p>
</div>
</div>

<div class="row no-gutters">
<div class="col-2 p-1" style="color:#FFF">
<p style="color:#BABABA">
2
</p>
</div>
<div class="col-8 p-1" style="color:#FFF">
<p class="m-0">
Outta My H...
</p>
<p class="m-0" style="font-size:.75em; color:#BABABA">
Khalid, John M...
</p>
</div>
<div class="col-2 pt-1 pb-1 pr-1" style="color:#FFF">
<p style="color:#BABABA">
2:53
</p>
</div>
</div>

<div class="row no-gutters">
<div class="col-2 p-1" style="color:#FFF">
<p style="color:#BABABA">
3
</p>
</div>
<div class="col-8 p-1" style="color:#FFF">
<p class="m-0">
Miss Indep...
</p>
<p class="m-0" style="font-size:.75em; color:#BABABA">
Ne-Yo
</p>
</div>
<div class="col-2 pt-1 pb-1 pr-1" style="color:#FFF">
<p style="color:#BABABA">
3:52
</p>
</div>
</div>

<div class="row no-gutters">
<div class="col-2 p-1" style="color:#FFF">
<p style="color:#BABABA">
4
</p>
</div>
<div class="col-8 p-1" style="color:#FFF">
<p class="m-0">
Counting S...
</p>
<p class="m-0" style="font-size:.75em; color:#BABABA">
OneRepublic
</p>
</div>
<div class="col-2 pt-1 pb-1 pr-1" style="color:#FFF">
<p style="color:#BABABA">
4:43
</p>
</div>
</div>

<div class="row no-gutters">
<div class="col-2 p-1" style="color:#FFF">
<p style="color:#BABABA">
5
</p>
</div>
<div class="col-8 p-1" style="color:#FFF">
<p class="m-0">
Love Me L...
</p>
<p class="m-0" style="font-size:.75em; color:#BABABA">
Fly By Midnight
</p>
</div>
<div class="col-2 pt-1 pb-1 pr-1" style="color:#FFF">
<p style="color:#BABABA">
3:23
</p>
</div>
</div>

<div class="row no-gutters">
<div class="col-2 p-1" style="color:#FFF">
<p style="color:#BABABA">
6
</p>
</div>
<div class="col-8 p-1" style="color:#FFF">
<p class="m-0">
Habits
</p>
<p class="m-0" style="font-size:.75em; color:#BABABA">
Mr.Kitty
</p>
</div>
<div class="col-2 pt-1 pb-1 pr-1" style="color:#FFF">
<p style="color:#BABABA">
4:15
</p>
</div>
</div>

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

<!--- IMAGE --->
<img class="mt-1" src="https://i.imgur.com/MZqaTQZ.jpg"/>
<!------------->

<!--- CURRENTLY HEADER BOX --->
<div class="card d-block rounded-0 border-0 p-1 mt-3" style="background-color:#FAF1F5; font-weight:bold">
<i class="fa-solid fa-xs fa-pencil mr-1" style="color:#969C9C"></i>
Currently . . .
</div>
<!------------->

<!--- LIKES SECTION --->
<p class="mt-1 mb-1 m-0">
<i class="fa-solid fa-thumbs-up mr-1"></i>
<span class="text-uppercase mr-1" style="font-weight:bold; color:#969C9C">
Likes
</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<!------------->

<!--- DISLIKES SECTION --->
<p class="m-0">
<i class="fa-solid fa-thumbs-down mr-1"></i>
<span class="text-uppercase mr-1" style="font-weight:bold; color:#969C9C">
Disikes
</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<!------------->

<!--- FANDOMS SECTION --->
<p class="m-0 mt-1">
<i class="fa-solid fa-check mr-1"></i>
<span class="text-uppercase mr-1" style="font-weight:bold; color:#969C9C">
Fandoms
</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<!------------->

<!--- WARNINGS & NOTES HEADER BOX --->
<div class="card d-block rounded-0 border-0 p-1 mt-3" style="background-color:#FCF3DA; font-weight:bold">
<i class="fa-solid fa-exclamation mr-1" style="color:#969C9C"></i>
Warnings & notes
</div>
<!------------->

<div class="p-1">
<!--- BYF SECTION --->
<p class="m-0">
<span class="text-uppercase mr-1" style="color:#F1BCBC; font-weight:bold">
Byf
</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<!------------->

<!--- DNI SECTION --->
<p class="m-0 mt-1">
<span class="text-uppercase mr-1" style="color:#F1BCBC; font-weight:bold">
Dni
</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<!------------->

<!--- NOTES SECTION --->
<p class="m-0">
<span class="text-uppercase mr-1" style="color:#F1BCBC; font-weight:bold">
Notes
</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<!------------->

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

<!--- BLUE DIVIDER --->
<div class="card d-block rounded-0 border-0 mt-3" style="background-color:#E7F3F7">
<br>
</div>
<!------------->

</div>
</div>

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

<!--- CREDIT (DO NOT DELETE) --->
<div class="bg-white p-1 px-2 rounded fixed-bottom m-2" style="right:0; left:inherit">
<a href="https://toyhou.se/19191592.08-breakfast" style="color:#F1BCBC"><i class="fas fa-code fa-xs fa-fw tooltipster" title="CODE BY dashyowo"></i></a>
</div>
<!------------->

<!--- END --->