Stor8

<!-- BG -->
<div class="row justify-content-center">
<div class="card p-3 mt-3" style="width:450px; background-image:url(https://images.unsplash.com/photo-1542273917363-3b1817f69a2d?q=80&w=2074&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D); background-size:450px; background-position:cover; background-repeat:no-repeat; border-style:double; border-width:4px; border-color:#ffffff;">

<!-- HEADER -->
<div class="row justify-content-center">
<div class="card p-0 mb-2" style="width:300px; background-color:#3e6f49; opacity:0.5; font-size:18px; text-align:center; border-style:double; border-width:4px; border-color:#ffffff">
<p> <span style="font-weight:bold; color:#ffffff; font-family:Century Gothic"> 
<i class="fa-solid fa-tree"></i>
<i>Folder Name</i>
<i class="fa-solid fa-tree"></i>
</span> </p>
</div>
</div>

<!-- ROW 1 -->
<div class="row no-gutters justify-content-center">
  
<!-- TEXT -->
<div class="col-7 mb-3 mt-1 text-center text-muted" style="max-height: 100px; overflow-y: auto; background-color:#3e6f49; opacity:0.5; border-style:double; border-width:4px; border-color:#ffffff">
<p style= "font-family:Century Gothic;color:#ffffff;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed suscipit neque, ut mattis felis. Integer pellentesque consectetur erat, nec rutrum ipsum vestibulum vel.
</p>
<p style= "font-family:Century Gothic;color:#ffffff;">
Aliquam vitae fringilla turpis. Donec ultricies venenatis quam eget luctus. Phasellus nec nibh sapien. Donec varius sagittis ullamcorper.
</p>
</div>
</div>

<!-- DIVIDER -->
<div class="row justify-content-center">
<div class="col-5 mt-1 p-0">
<img src="https://watermelon.crd.co/assets/images/gallery19/0db8af68.png?v=6332de85">
</div>
</div>

<!-- CREDIT (DO NOT REMOVE) -->
<div class="row justify-content-center">
<p><a href="https://toyhou.se/wytchstarr"><i class="fa-solid fa-code" style="color: #ffffff; padding: 0px;"></i></a></p>
</div>
</div>
</div>