<!-- made by @beck , recommended edits are labeled by commented css -->
<style>
.contain {
margin: 0 auto;
background: #fcfcfc; /* container box background */
max-width: 20em;
height: 25em;
border-radius: 4px;
border: #cacaca 1px solid; /* first layer border color */
}

.container-1 {
border: none;
padding: 0;
}

#title {
margin: 3px auto;
background: #e6e6e6;
max-width: 19.5em;
height: 1.5em;
border-radius: 4px;
border: #cacaca 1px solid;
padding-left: 5px;
}

p#title { /* title text settings */
font-size: 15px;
}

#thebox {
margin: 6px auto;
background: #fdfdfd; /* main content box background (the whitest background) */
max-width: 19.5em;
height: 22.5em;
border: #cacaca 1px solid; /* main context box border color */
overflow-y: scroll;
}

#navbar {
background: #f6f6f6; /* navigation section background (the light gray background) */
max-width: 19.5em;
height: 1.5em;
border-bottom: #cacaca 1px solid; /* this border color should match the main context box border color */
display: flex;
padding: 0 5px;
justify-content: space-between;
}

#links a { /* navigation links settings */
color: #656464 !important; 
text-decoration: underline 1px;
}

#links a:visited { /* navigation links settings */
color: #656464 !important; 
}

#icon { /* image settings */
width: 9.5em;
}

#columns {
display: flex;
flex-direction: column;
align-items: center;
}

#columns span{
background: none; /* main content title box background */
border: #cacaca 1px solid; /* main content title box border */
border-radius: 0px; 
height: 1.8em;
width: 9em;
padding: 0 5px;
margin-top: 5px
}

#scroll { 
width: 8em;
height: 3.5em;
overflow: scroll;
color: #656464; /* scrollbox text color */
}

#scroll::-webkit-scrollbar {
  display: none;
}

#thebox::-webkit-scrollbar {
  display: none;
}


</style>

<div class="contain">
<div id="title">
<b>ʬʬ‎ ‎ title card</b>
</div>
<div id="thebox">
<!-- start of navigation & links box-->
<div id="navbar">
<p>♡ ‎ ♡ ‎ ♡ ‎ ♡</p> <div id="links"><a href="/60aa818e">link</a> ‎ <a href="/60aa818e">link</a> ‎ <a href="/60aa818e">link</a></div>
</div>
<!--end of navigation & links box-->
<div style="display: flex; justify-content: center;">
<!-- start of "column" div -->
<div id="columns"> 
<img id="icon" src="https://file.garden/ZuQf8MRKYTjyuCx8/pd-2">
<span><b> ⬭ ﹒ about</b></span>
<div id="scroll">
<p>txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt </p>
</div>
<span><b> ⬭ ﹒ friends</b></span>
<div id="scroll">
<p>txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt </p>
</div>
</div>
<!-- end of "column" div-->
<!-- start of "column" div -->
<div id="columns">
<span><b> ⬭ ﹒ dni ₊ byi</b></span>
<div id="scroll">
<p>txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt </p>
</div>
<span><b> ⬭ ﹒ misc info</b></span>
<div id="scroll">
<p>txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt </p>
</div>
<img id="icon" src="https://file.garden/ZuQf8MRKYTjyuCx8/pd-1">
</div>
<!-- end of "column" div-->
</div>
</div>
</div>
</div>