crditem crd menu

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<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=Archivo:wght@200;300;500&family=Atkinson+Hyperlegible:wght@400;700&family=Inconsolata:wght@300;400;600&display=swap" rel="stylesheet">

<script src="https://kit.fontawesome.com/8ef97d3168.js" crossorigin="anonymous"></script>

<div class="all">

<div class="bubble bubble-bottom-left">

<div id="bub"> <marquee>welcome girl! cr crditem (dont remove)</marquee> </div> <!-- text bubble -->

</div>

<div id="cont">

<img class=inside src="https://64.media.tumblr.com/fc9298de36d4e3d1b0bc4294fd479391/tumblr_o6z2aebPaP1vrhmrvo1_400.jpg">
<div id="cont2"><div class="grid-item"></div>

<div class="grid-item"> <mark>username ・online!</mark> <!-- username thing -->
<br></br>
</div>

</div>

<div id="cont3">
<div class="grid-item">

<div class="scroll" id="ones"> info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info </div> <!-- info 1 -->
</div>

<div class="grid-item">

<div id="name">text<em>!</em> </div> <!-- name -->

<div class="scroll" id="twos"> info info info info info info info info info info info info info info info info info info info info info info info info info info info info </div> <!-- info 2 -->

<center> <a href="twitter link here"><i class="fab fa-twitter"></i></a>

<a href="music link here"><i class="fas fa-headphones"></i></a>

<a href="other link here"><i class="fas fa-heart"></i></a>

</center>

</div>

</div>

</div>

</div>

<style>

@font-face {
font-family: handy;
src: url(https://dl.dropbox.com/s/ga9hf4idu3egjb5/handy00.ttf);
}

@font-face {
font-family: billo;
src: url(https://dl.dropbox.com/s/klv8tmajlqrb2xz/BILLO___.TTF);
}

* { padding: 0; margin: 0; box-sizing: border-box; }

html { /*dont modify*/
height: 100vh;
width: 100vw;
font-size: 16px;
position: fixed;
display: flex;
align-items: center;
justify-content: center;
}

body { /* bg colors */
background: rgb(255,224,245);
background: linear-gradient(165deg, rgba(255,224,245,1) 26%, rgb(255,255,255) 83%);
}

.all { /*dont modify*/
margin: auto;
width: 16em;
height: 16em;
position: relative;
display: flex;
align-items: center;
justify-content: center;
text-align: left;
}

#cont { /*dont modify unless stated*/
-webkit-filter: drop-shadow(0px 0px 1px #fff);
border: 2px solid #fff;
width: 15em;
height: 15em;
background: rgb(252,207,238);
background: radial-gradient(circle, rgba(252,207,238,1) 60%, rgba(254,241,227,1) 100%); /*bg of the container */
border-radius: 100%;
transition: 1s ease-in-out;
position: relative;
overflow: hidden;

}

#cont:hover {
border-radius: 6px;
}

.inside { /*dont modify*/
width: 100%;
height: 100%;
position: absolute;
top: 0;
left:0;
z-index: 99;
border-radius: 100%;
object-fit: cover;
transition: 1s ease-in-out;
transition-delay: 0.6s;
border: 1px solid transparent;
}

#cont:hover .inside { /*dont modify*/
width: 23%;
height: 23%;
top: 10px;
left: 10px;
-webkit-filter: drop-shadow(0px 0px 1px #ffffff);
border: 1px solid white;
}

.grid-item { /*dont modify*/
padding: 10px;
height: 20%;
top: 10px;
position: relative;
}

mark { /*dont modify (white bg of the username online thing*/
background: #fff;
color: #000;
border-radius: 20px;
padding-left: 22px;
left: -22px;
position: relative;
padding-right: 2px;
}

#cont2 { /*dont modify*/
position: relative;
display: grid;
grid-template-columns: auto 72%;
font-family: handy; /*font of the username thing + name */
font-size: 10px;
padding: 0px;
}

#cont3 { /*dont modify*/
position: relative;
display: grid;
grid-template-columns: 50% 50%;
top: 10px;
}

.scroll {
width: 100%;
background: #ffffff6;
border: 2px solid white;
border-radius: 3px;
overflow: scroll;
padding: 3px;
font-family: 'Archivo', sans-serif; /*font of the scrollbox*/
font-size: 14px;
font-weight: 300;
line-height: 1.2;

}

#ones { /*dont modify*/
height: 10.5em;
}

#twos { /*dont modify*/
height: 5.5em;
width: 115%;
top: -10px;
left: -12px;
position: relative;
}

#name { /*name css (isita)*/
font-size: 2.5em;
text-align: left;
-webkit-background-clip: text;
-webkit-text-fill-color: #fff8f4;
-webkit-text-stroke: 0.6px #fff;
-webkit-filter: drop-shadow(0px 0px 1px #fff);
line-height: 1;
left: -10px;
position: relative;
margin-bottom: 0px;
font-family: billo;
}

.fa-twitter , .fa-heart , .fa-headphones { /*css of the icons (twitter, heart & headphones)*/
color: white;
text-decoration: none;
position: relative;
left: -7px;
margin-right: 5px;

}

.fa-twitter , .fa-heart , .fa-headphones a:link {
text-decoration: none;
color: white;
}

.fas fa-heart a:link {
text-decoration: none;
color: white;
}

.bubble { /*dont modify*/
filter: drop-shadow(1px 1px 0 #fff) drop-shadow(-1px 0px 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff) ;
transform: rotate(10deg);
position: absolute;
top: 1%;
right: -0%;
line-height: 11px;
width: 35%;
background: rgb(255,250,244);
background: linear-gradient(0deg, rgba(255,250,244,1) 0%, rgba(255,224,245,1) 36%, rgba(255,224,245,1) 62%, rgba(255,250,244,1) 100%);z-index: 1000;
border-radius: 40px;
padding: 5px;
text-align: center;
color: #000;
font-family: handy;
font-size: 11px;

}

.bubble-bottom-left:before { /*dont modify*/
content: "";
font-family: deliosa;
-webkit-transform: scaleX(1);
transform: scaleX(1);
width: 0px;
height: 0px;
position: absolute;
border-left: 11px solid #FFF8F4;
border-right: 8px solid transparent;
border-top: 8px solid #FFF8F4;
border-bottom: 10px solid transparent;
left: 32px;
bottom: -18px;
}
</style>