pink xaiotng crd tut codes

<!--- CSS FOR ELEMENTS --->
<style>
@font-face {
font-family:'yipes';
src: url(https://dl.dropbox.com/s/qrdm3wived8sm66/Yipes.ttf);
}

@font-face {
font-family: 'manuscribe';
src: url(https://dl.dropbox.com/s/o6x6hslh0vo6crd/Manuscribe-Regular.ttf);
}

#image01 {
-webkit-mask-image: url(https://i.imgur.com/HQ8caZ1.png);
-webkit-mask-size: 90%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}

#image01 img:hover {
webkit-filter: blur(2px);
filter: blur(2px);
transition: 0.5s;
}

#text01 {
background: #ffa6d6;
border-radius: 0.5em 0.5em 0em 0em;
font-family: 'manuscribe';
padding-bottom: 4px;
}

#text02 {
border: 1px solid #ffa6d6;
border-radius: 0em 0em 0.5em 0.5em;
background: white;
padding: 2px;
}

#text03 {
position: relative;
top: 0.25em;
z-index: 99;
font-family:'yipes';
}
</style>



<!--- HORIZONTAL SCROLLBOX -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Questrial&display=swap" rel="stylesheet">

<style>
@font-face {
font-family: 'manuscribe';
src: url(https://dl.dropbox.com/s/o6x6hslh0vo6crd/Manuscribe-Regular.ttf);
}

#hoohoo {
width: 100%;
white-space: nowrap;
overflow-x: auto;
box-sizing: border-box;
overflow-y: hidden;
}

.lala {
width: 16.35em;
border: 1px solid #ffbbe0;
white-space: normal;
display: inline-block;
margin-right: 8px;
height: 16em;
font-size: 0.875em;
padding: 8px;
vertical-align: middle;
border-radius: 0.5em;
overflow-y: scroll;
font-family: 'Questrial', sans-serif;
background: white;
text-align: left;
}

</style>

<div id="hoohoo">
<div class="lala">
<span style="font-family:'manuscribe'; font-size: 1.75em; font-weight: bold; color:#ff9cd1;">About Me</span> <br>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text
<br></br>
<span style="font-family:'manuscribe'; font-size: 1.75em; font-weight: bold; color:#ff9cd1;">My Print</span> <br> text text text text text text text text text text text text text text text text text text text text text text text text text text text text
<br></br>
<span style="font-family:'manuscribe'; font-size: 1.75em; font-weight: bold; color:#ff9cd1;">Music</span> <br> text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</div>

<div class="lala">
<span style="font-family:'manuscribe'; font-size: 1.75em; font-weight: bold; color:#ff9cd1;">To Know</span> <br>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
<br></br>
<span style="font-family:'manuscribe'; font-size: 1.75em; font-weight: bold; color:#ff9cd1;">Go Away</span> <br> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</div>

</div>