[F2U] Code Request 2

subject404

Info


Created
4 years, 7 months ago
Creator
subject404
Favorites
196
Trade Listing
Free

Profile



<!-- BACKGROUND URL CAN BE CHANGED HERE -->

<div class="w-100" style="position: absolute; left: 0; background: url(https://images.unsplash.com/photo-1526396130214-c9120f440977?ixlib=rb-1.2.1) center no-repeat; background-size: cover; height: 45em; min-width: 1500px;">

<div class="w-100 h-100" style="position: absolute; left: 0; background: rgba(255, 255, 255, .4);">

<br>

</div>

</div>

<div class="flex-container row ml-5 pl-3" style="width: 1400px;">

<div class="carousel col-7 px-0 slide carousel-fade" data-pause="true" id="gallery" style="overflow-x: hidden;">

<div class="carousel-item active">

<div class="row">

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

<div class="col-12 text-center"><a class="tooltipster" href="https://toyhou.se/subject404" rel="noopener noreferrer" target="_blank" title="code by subject404"><i class="py-4 text-warning fas fa-code" style="text-shadow: -1px -1px 1px black, 1px -1px 1px black, -1px 1px 1px black, 1px 1px 1px black; font-size: 50px;"></i></a>

<div class="card-header rounded py-1 mt-4 text-light" style="background-image: linear-gradient(to right, #93360D, #C04A0C, #C04A0C, #C04A0C, #C04A0C, #93360D); box-shadow: 0 0 5px 1px black; font-weight: bold; font-size: 16px;">

<p>Skins

<br>1 / 3</p>

</div>

<div class="card-content rounded mt-2" style="height: 26em; overflow: auto; border: 1px solid rgba(58, 21, 5, .6);">

<div class="h-100 pt-3 pb-0 px-4" style="background: rgba(147, 54, 13, .15); font-weight: bold;">

<a class="text-light active" data-slide-to="0" href="#gallery">

<div class="rounded-circle" style="background: url( SKIN ICON 1 HERE ) center no-repeat; background-size: cover; height: 6.5em; border: thick solid #F0AD4E; box-shadow: 0 0 10px 5px white;">

<br>

</div>

<p class="py-0 mx-auto" style="background-image: linear-gradient(to right, rgba(58, 21, 5, 0), rgba(58, 21, 5, .8), rgba(58, 21, 5, .8), rgba(58, 21, 5, 0)); margin-top: -1em;">Default</p>

</a>

<a class="text-light" data-slide-to="1" href="#gallery">

<div class="rounded-circle mt-3" style="background: url( SKIN ICON 2 HERE ) center no-repeat; background-size: cover; height: 6.5em; border: thick solid #F0AD4E;">

<br>

</div>

<p class="py-0 mx-auto" style="background-image: linear-gradient(to right, rgba(58, 21, 5, 0), rgba(58, 21, 5, .8), rgba(58, 21, 5, .8), rgba(58, 21, 5, 0)); margin-top: -1em;">Ascended</p>

</a>

<a class="text-light" data-slide-to="2" href="#gallery">

<div class="rounded-circle mt-3" style="background: url( SKIN ICON 3 HERE ) center no-repeat; background-size: cover; height: 6.5em; border: thick solid #F0AD4E;">

<br>

</div>

<p class="py-0 mx-auto" style="background-image: linear-gradient(to right, rgba(58, 21, 5, 0), rgba(58, 21, 5, .8), rgba(58, 21, 5, .8), rgba(58, 21, 5, 0)); margin-top: -1em;">Dessert Dream</p>

</a>

</div>

</div>

</div>

</div>

<div class="col-9 px-0">

<div style="background: url( IMAGE 1 HERE ) top no-repeat; background-size: cover; width: 95%;">

<div class="text-center pr-5" style="padding-top: 28em; font-size: 20px; font-weight: bold;">

<p class="py-1 mx-auto mb-0" style="width: 50%; border-bottom-left-radius: 1em; border-bottom-right-radius: 1em; border: medium solid #93360D; background-image: linear-gradient(to right, #F5C1A6, #FFEED2, #FFEED2, #FFEED2, #F5C1A6); color: #93360D;">Name</p>

<a class="text-light" href="link to voice claim here" rel="noopener noreferrer" target="_blank">

<p class="py-1 mx-auto mt-1" style="width: 50%; background-image: linear-gradient(to right, rgba(58, 21, 5, 0), rgba(58, 21, 5, .8), rgba(58, 21, 5, .8), rgba(58, 21, 5, 0));">VC: ¯\_(ツ)_/¯</p>

</a>

</div>

</div>

</div>

</div>

</div>

<div class="carousel-item">

<div class="row">

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

<div class="col-12 text-center"><a class="tooltipster" href="https://toyhou.se/subject404" rel="noopener noreferrer" target="_blank" title="code by subject404"><i class="py-4 text-warning fas fa-code" style="text-shadow: -1px -1px 1px black, 1px -1px 1px black, -1px 1px 1px black, 1px 1px 1px black; font-size: 50px;"></i></a>

<div class="card-header rounded py-1 mt-4 text-light" style="background-image: linear-gradient(to right, #93360D, #C04A0C, #C04A0C, #C04A0C, #C04A0C, #93360D); box-shadow: 0 0 5px 1px black; font-weight: bold; font-size: 16px;">

<p>Skins

<br>2 / 3</p>

</div>

<div class="card-content rounded mt-2" style="height: 26em; overflow: auto; border: 1px solid rgba(58, 21, 5, .6);">

<div class="h-100 pt-3 pb-0 px-4" style="background: rgba(147, 54, 13, .15); font-weight: bold;">

<a class="text-light active" data-slide-to="0" href="#gallery">

<div class="rounded-circle" style="background: url( SKIN ICON 1 HERE ) center no-repeat; background-size: cover; height: 6.5em; border: thick solid #F0AD4E;">

<br>

</div>

<p class="py-0 mx-auto" style="background-image: linear-gradient(to right, rgba(58, 21, 5, 0), rgba(58, 21, 5, .8), rgba(58, 21, 5, .8), rgba(58, 21, 5, 0)); margin-top: -1em;">Default</p>

</a>

<a class="text-light" data-slide-to="1" href="#gallery">

<div class="rounded-circle mt-3" style="background: url( SKIN ICON 2 HERE ) center no-repeat; background-size: cover; height: 6.5em; border: thick solid #F0AD4E; box-shadow: 0 0 10px 5px white;">

<br>

</div>

<p class="py-0 mx-auto" style="background-image: linear-gradient(to right, rgba(58, 21, 5, 0), rgba(58, 21, 5, .8), rgba(58, 21, 5, .8), rgba(58, 21, 5, 0)); margin-top: -1em;">Ascended</p>

</a>

<a class="text-light" data-slide-to="2" href="#gallery">

<div class="rounded-circle mt-3" style="background: url( SKIN ICON 3 HERE ) center no-repeat; background-size: cover; height: 6.5em; border: thick solid #F0AD4E;">

<br>

</div>

<p class="py-0 mx-auto" style="background-image: linear-gradient(to right, rgba(58, 21, 5, 0), rgba(58, 21, 5, .8), rgba(58, 21, 5, .8), rgba(58, 21, 5, 0)); margin-top: -1em;">Dessert Dream</p>

</a>

</div>

</div>

</div>

</div>

<div class="col-9 px-0">

<div style="background: url( IMAGE 2 HERE ) top no-repeat; background-size: cover; width: 95%;">

<div class="text-center pr-5" style="padding-top: 28em; font-size: 20px; font-weight: bold;">

<p class="py-1 mx-auto mb-0" style="width: 50%; border-bottom-left-radius: 1em; border-bottom-right-radius: 1em; border: medium solid #93360D; background-image: linear-gradient(to right, #F5C1A6, #FFEED2, #FFEED2, #FFEED2, #F5C1A6); color: #93360D;">Name</p>

<a class="text-light" href="link to voice claim here" rel="noopener noreferrer" target="_blank">

<p class="py-1 mx-auto mt-1" style="width: 50%; background-image: linear-gradient(to right, rgba(58, 21, 5, 0), rgba(58, 21, 5, .8), rgba(58, 21, 5, .8), rgba(58, 21, 5, 0));">VC: ¯\_(ツ)_/¯</p>

</a>

</div>

</div>

</div>

</div>

</div>

<div class="carousel-item">

<div class="row">

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

<div class="col-12 text-center"><a class="tooltipster" href="https://toyhou.se/subject404" rel="noopener noreferrer" target="_blank" title="code by subject404"><i class="py-4 text-warning fas fa-code" data-placement="top" style="text-shadow: -1px -1px 1px black, 1px -1px 1px black, -1px 1px 1px black, 1px 1px 1px black; font-size: 50px;"></i></a>

<div class="card-header rounded py-1 mt-4 text-light" style="background-image: linear-gradient(to right, #93360D, #C04A0C, #C04A0C, #C04A0C, #C04A0C, #93360D); box-shadow: 0 0 5px 1px black; font-weight: bold; font-size: 16px;">

<p>Skins

<br>3 / 3</p>

</div>

<div class="card-content rounded mt-2" style="height: 26em; overflow: auto; border: 1px solid rgba(58, 21, 5, .6);">

<div class="h-100 pt-3 pb-0 px-4" style="background: rgba(147, 54, 13, .15); font-weight: bold;">

<a class="text-light active" data-slide-to="0" href="#gallery">

<div class="rounded-circle" style="background: url( SKIN ICON 1 HERE ) center no-repeat; background-size: cover; height: 6.5em; border: thick solid #F0AD4E;">

<br>

</div>

<p class="py-0 mx-auto" style="background-image: linear-gradient(to right, rgba(58, 21, 5, 0), rgba(58, 21, 5, .8), rgba(58, 21, 5, .8), rgba(58, 21, 5, 0)); margin-top: -1em;">Default</p>

</a>

<a class="text-light" data-slide-to="1" href="#gallery">

<div class="rounded-circle mt-3" style="background: url( SKIN ICON 2 HERE ) center no-repeat; background-size: cover; height: 6.5em; border: thick solid #F0AD4E;">

<br>

</div>

<p class="py-0 mx-auto" style="background-image: linear-gradient(to right, rgba(58, 21, 5, 0), rgba(58, 21, 5, .8), rgba(58, 21, 5, .8), rgba(58, 21, 5, 0)); margin-top: -1em;">Ascended</p>

</a>

<a class="text-light" data-slide-to="2" href="#gallery">

<div class="rounded-circle mt-3" style="background: url( SKIN ICON 3 HERE ) center no-repeat; background-size: cover; height: 6.5em; border: thick solid #F0AD4E; box-shadow: 0 0 10px 5px white;">

<br>

</div>

<p class="py-0 mx-auto" style="background-image: linear-gradient(to right, rgba(58, 21, 5, 0), rgba(58, 21, 5, .8), rgba(58, 21, 5, .8), rgba(58, 21, 5, 0)); margin-top: -1em;">Dessert Dream</p>

</a>

</div>

</div>

</div>

</div>

<div class="col-9 px-0">

<div style="background: url( IMAGE 3 HERE ) top no-repeat; background-size: cover; width: 95%;">

<div class="text-center pr-5" style="padding-top: 28em; font-size: 20px; font-weight: bold;">

<p class="py-1 mx-auto mb-0" style="width: 50%; border-bottom-left-radius: 1em; border-bottom-right-radius: 1em; border: medium solid #93360D; background-image: linear-gradient(to right, #F5C1A6, #FFEED2, #FFEED2, #FFEED2, #F5C1A6); color: #93360D;">Name</p>

<a class="text-light" href="link to voice claim here" rel="noopener noreferrer" target="_blank">

<p class="py-1 mx-auto mt-1" style="width: 50%; background-image: linear-gradient(to right, rgba(58, 21, 5, 0), rgba(58, 21, 5, .8), rgba(58, 21, 5, .8), rgba(58, 21, 5, 0));">VC: ¯\_(ツ)_/¯</p>

</a>

</div>

</div>

</div>

</div>

</div>

</div>

<div class="col-5 pt-4 pl-0 pr-0 pb-5">

<div class="carousel slide carousel-fade mx-0 rounded" data-pause="true" id="info" style="color: #F5C1A6; border: medium solid rgba(255, 255, 255, .65); background: rgba(150, 103, 82, .65); box-shadow: 0 0 5px 1px black; font-size: 20px; height: 28em; overflow-y: auto;">

<div class="carousel-item pt-3 show active">

<div class="px-5 d-flex justify-content-between">

<p class="my-0">Recipes</p>

<p class="my-0" style="color: #FFEED2;">Pastel de nata</p>

</div>

<hr class="m-0" style="border: 0; height: 1px; background-image: linear-gradient(to right, rgba(253, 230, 193, 0), rgba(253, 230, 193, 1), rgba(253, 230, 193, 1), rgba(253, 230, 193, 0));">

<div class="px-5 d-flex justify-content-between">

<p class="my-0">Type</p>

<p class="my-0" style="color: #FFEED2;">Dessert</p>

</div>

<hr class="m-0" style="border: 0; height: 1px; background-image: linear-gradient(to right, rgba(253, 230, 193, 0), rgba(253, 230, 193, 1), rgba(253, 230, 193, 1), rgba(253, 230, 193, 0));">

<div class="px-5 d-flex justify-content-between">

<p class="my-0">Birthplace</p>

<p class="my-0" style="color: #FFEED2;">Portugal</p>

</div>

<hr class="m-0" style="border: 0; height: 1px; background-image: linear-gradient(to right, rgba(253, 230, 193, 0), rgba(253, 230, 193, 1), rgba(253, 230, 193, 1), rgba(253, 230, 193, 0));">

<div class="px-5 d-flex justify-content-between">

<p class="my-0">Birth year</p>

<p class="my-0" style="color: #FFEED2;">19th century</p>

</div>

<hr class="m-0" style="border: 0; height: 1px; background-image: linear-gradient(to right, rgba(253, 230, 193, 0), rgba(253, 230, 193, 1), rgba(253, 230, 193, 1), rgba(253, 230, 193, 0));">

<div class="px-5 d-flex justify-content-between">

<p class="my-0">Personality</p>

<p class="my-0" style="color: #FFEED2;">Withdrawn</p>

</div>

<hr class="m-0" style="border: 0; height: 1px; background-image: linear-gradient(to right, rgba(253, 230, 193, 0), rgba(253, 230, 193, 1), rgba(253, 230, 193, 1), rgba(253, 230, 193, 0));">

<div class="px-5 d-flex justify-content-between">

<p class="my-0">Height</p>

<p class="my-0" style="color: #FFEED2;">176cm</p>

</div>

<hr class="m-0" style="border: 0; height: 1px; background-image: linear-gradient(to right, rgba(253, 230, 193, 0), rgba(253, 230, 193, 1), rgba(253, 230, 193, 1), rgba(253, 230, 193, 0));">

<div class="py-2 px-5 d-flex">

<p class="my-4">Pair</p>

<div class="ml-5 tooltipster" style="background: url( PAIR ICON HERE ) left top no-repeat; background-size: cover; width: 4em; height: 4em; border: medium solid #C5CF7E; border-radius: .5em; box-shadow: 0 0 5px black;" title=" NAME HERE ">

<br>

</div>

</div>

<hr class="m-0" style="border: 0; height: 1px; background-image: linear-gradient(to right, rgba(253, 230, 193, 0), rgba(253, 230, 193, 1), rgba(253, 230, 193, 1), rgba(253, 230, 193, 0));">

<div class="px-5 py-2">

<div class="mx-auto" style="text-align: center; width: 24%; background: #644330; box-shadow: 0 0 1px 1px #FFEED2; border-bottom-left-radius: 1em; border-bottom-right-radius: 1em; font-weight: bold;">

<p>. Motto .</p>

</div>

<p class="text-justify" style="color: #FFEED2;">Is it even possible for special things to not come my way? Honestly it's a hassle, a huge hassle.</p>

</div>

<hr class="m-0" style="border: 0; height: 1px; background-image: linear-gradient(to right, rgba(253, 230, 193, 0), rgba(253, 230, 193, 1), rgba(253, 230, 193, 1), rgba(253, 230, 193, 0));">

<div class="px-5 py-2">

<div class="mx-auto" style="text-align: center; width: 35%; background: #644330; box-shadow: 0 0 1px 1px #FFEED2; border-bottom-left-radius: 1em; border-bottom-right-radius: 1em; font-weight: bold;">

<p>. Introduction .</p>

</div>

<p class="text-justify" style="color: #FFEED2;">Pastel De Nata, more commonly known as egg tarts, have spread across the world and have become a dessert found almost anywhere.</p>

</div>

</div>

<div class="carousel-item h-100 p-3">

<div class="row h-100">

<div class="col-6 pr-2">

<div class="col-12 h-100" style="box-shadow: inset 0 0 5px black, 0 0 0 16px #FFEED2; padding: 7.5em 1em;">

<div class="rounded-circle h-100 p-5" style="border: .5em solid #FFEED2; background-image: linear-gradient(to right, rgba(58, 21, 5, .75), rgba(58, 21, 5, .5), rgba(58, 21, 5, .5), rgba(58, 21, 5, .75));">

<div class="rounded-circle h-100 fa-spin" style="background: url( PLAYLIST ICON HERE ) center no-repeat; background-size: cover; border: medium solid black; animation-duration: 10s; animation-direction: reverse;">

<br>

</div>

</div>

</div>

</div>

<div class="col-6 pl-2">

<div class="col-12 h-100 px-0 text-center" style="box-shadow: 0 0 0 16px #FFEED2; color: #644330; font-weight: bold;">

<div class="py-1" style="background: rgba(255, 255, 255, .75);">

<p>Playlist</p>

</div>

<div class="py-2" style="height: 24.2em; overflow-y: auto; box-shadow: inset 0 0 5px black;">

<div class="pt-1 px-3 mx-2 d-flex justify-content-between rounded tooltipster" style="background: rgba(255, 238, 210, .6); box-shadow: 0 0 5px black;" title=" SONG by ARTIST">

<p class="mt-1">01</p><span class="mr-0 fr-video fr-fvc fr-dvi fr-draggable" contenteditable="true"><iframe style="border: thick solid white; border-radius: 5em; height: 25px; width: 25px; box-shadow: 0 0 0 1px black;" src=" SONG 1 LINK "></iframe></span>

</div>

<div class="mt-2 pt-1 px-3 mx-2 d-flex justify-content-between rounded tooltipster" style="background: rgba(255, 238, 210, .6); box-shadow: 0 0 5px black;" title=" SONG by ARTIST ">

<p class="mt-1">02</p><span class="mr-0 fr-video fr-fvc fr-dvi fr-draggable" contenteditable="true"><iframe style="border: thick solid white; border-radius: 5em; height: 25px; width: 25px; box-shadow: 0 0 0 1px black;" src=" SONG 2 LINK "></iframe></span>

</div>

<div class="mt-2 pt-1 px-3 mx-2 d-flex justify-content-between rounded tooltipster" style="background: rgba(255, 238, 210, .6); box-shadow: 0 0 5px black;" title=" SONG by ARTIST ">

<p class="mt-1">03</p><span class="mr-0 fr-video fr-fvc fr-dvi fr-draggable" contenteditable="true"><iframe style="border: thick solid white; border-radius: 5em; height: 25px; width: 25px; box-shadow: 0 0 0 1px black;" src=" SONG 3 LINK "></iframe></span>

</div>

<div class="mt-2 pt-1 px-3 mx-2 d-flex justify-content-between rounded tooltipster" style="background: rgba(255, 238, 210, .6); box-shadow: 0 0 5px black;" title=" SONG by ARTIST ">

<p class="mt-1">04</p><span class="mr-0 fr-video fr-fvc fr-dvi fr-draggable" contenteditable="true"><iframe style="border: thick solid white; border-radius: 5em; height: 25px; width: 25px; box-shadow: 0 0 0 1px black;" src=" SONG 4 LINK "></iframe></span>

</div>

<div class="mt-2 pt-1 px-3 mx-2 d-flex justify-content-between rounded tooltipster" style="background: rgba(255, 238, 210, .6); box-shadow: 0 0 5px black;" title=" SONG by ARTIST ">

<p class="mt-1">05</p><span class="mr-0 fr-video fr-fvc fr-dvi fr-draggable" contenteditable="true"><iframe style="border: thick solid white; border-radius: 5em; height: 25px; width: 25px; box-shadow: 0 0 0 1px black;" src=" SONG 5 LINK "></iframe></span>

</div>

<div class="mt-2 pt-1 px-3 mx-2 d-flex justify-content-between rounded tooltipster" style="background: rgba(255, 238, 210, .6); box-shadow: 0 0 5px black;" title=" SONG by ARTIST ">

<p class="mt-1">06</p><span class="mr-0 fr-video fr-fvc fr-dvi fr-draggable" contenteditable="true"><iframe style="border: thick solid white; border-radius: 5em; height: 25px; width: 25px; box-shadow: 0 0 0 1px black;" src=" SONG 6 LINK "></iframe></span>

</div>

<div class="mt-2 pt-1 px-3 mx-2 d-flex justify-content-between rounded tooltipster" style="background: rgba(255, 238, 210, .6); box-shadow: 0 0 5px black;" title=" SONG by ARTIST ">

<p class="mt-1">07</p><span class="mr-0 fr-video fr-fvc fr-dvi fr-draggable" contenteditable="true"><iframe style="border: thick solid white; border-radius: 5em; height: 25px; width: 25px; box-shadow: 0 0 0 1px black;" src=" SONG 7 LINK "></iframe></span>

</div>

<div class="mt-2 pt-1 px-3 mx-2 d-flex justify-content-between rounded tooltipster" style="background: rgba(255, 238, 210, .6); box-shadow: 0 0 5px black;" title=" SONG by ARTIST ">

<p class="mt-1">08</p><span class="mr-0 fr-video fr-fvc fr-dvi fr-draggable" contenteditable="true"><iframe style="border: thick solid white; border-radius: 5em; height: 25px; width: 25px; box-shadow: 0 0 0 1px black;" src=" SONG 8 LINK "></iframe></span>

</div>

<div class="mt-2 pt-1 px-3 mx-2 d-flex justify-content-between rounded tooltipster" style="background: rgba(255, 238, 210, .6); box-shadow: 0 0 5px black;" title=" SONG by ARTIST ">

<p class="mt-1">09</p><span class="mr-0 fr-video fr-fvc fr-dvi fr-draggable" contenteditable="true"><iframe style="border: thick solid white; border-radius: 5em; height: 25px; width: 25px; box-shadow: 0 0 0 1px black;" src=" SONG 9 LINK "></iframe></span>

</div>

<div class="mt-2 pt-1 px-3 mx-2 d-flex justify-content-between rounded tooltipster" style="background: rgba(255, 238, 210, .6); box-shadow: 0 0 5px black;" title=" SONG by ARTIST ">

<p class="mt-1">10</p><span class="mr-0 fr-video fr-fvc fr-dvi fr-draggable" contenteditable="true"><iframe style="border: thick solid white; border-radius: 5em; height: 25px; width: 25px; box-shadow: 0 0 0 1px black;" src=" SONG 10 LINK "></iframe></span>

</div>

</div>

</div>

</div>

</div>

</div>

<div class="carousel-item px-5 pt-3 pb-1 mb-2">

<div class="mx-auto mb-2" style="text-align: center; width: 50%; background: #FFEED2; color: #644330; box-shadow: 0 0 2px 1px #FFEED2; border-bottom-left-radius: 1em; border-bottom-right-radius: 1em; font-weight: bold;">

<p>.               Bio               .</p>

</div>

<p class="text-justify" style="color: #FFEED2;">He doesn't like interacting with others and can be rather harsh when he does. He has absolute confidence in his desserts. He likes to spend his time alone so don't get angry when you get ignored.</p>

</div>

</div>

<div class="row text-center" style="height: 4em; font-weight: bold; font-size: 16px; text-shadow: -1px -1px 1px black, 1px -1px 1px black, -1px 1px 1px black, 1px 1px 1px black; border: none;">

<div class="col-4 pt-4" style="background: url(https://vignette.wikia.nocookie.net/food-fantasy/images/b/bb/Dish-Piglet_Daifuku.png) center 60% no-repeat; background-size: 55%;">

<a class="text-light" data-slide-to="2" href="#info">

<p class="mt-3" style="background-image: linear-gradient(to right, rgba(58, 21, 5, 0), rgba(58, 21, 5, .5), rgba(58, 21, 5, .5), rgba(58, 21, 5, 0));">Story</p>

</a>

</div>

<div class="col-4 nav-item pt-4" style="background: url(https://vignette.wikia.nocookie.net/food-fantasy/images/7/73/Souvenir-Idol_CD.png) center no-repeat; background-size: 35%;">

<a class="text-light" data-slide-to="1" href="#info">

<p class="mt-3" style="background-image: linear-gradient(to right, rgba(58, 21, 5, 0), rgba(58, 21, 5, .5), rgba(58, 21, 5, .5), rgba(58, 21, 5, 0));">Playlist</p>

</a>

</div>

<div class="col-4 nav-item pt-4 active" style="background: url(https://vignette.wikia.nocookie.net/food-fantasy/images/4/42/Souvenir-Handmade_Dim_Sum.png) top no-repeat; background-size: 36%;">

<a class="text-light active" data-slide-to="0" href="#info">

<p class="mt-3" style="background-image: linear-gradient(to right, rgba(58, 21, 5, 0), rgba(58, 21, 5, .5), rgba(58, 21, 5, .5), rgba(58, 21, 5, 0));">Data</p>

</a>

</div>

</div>

</div>

</div>