F2U - 001

<!-----Compact 1----->
<!-- HOW TO CHANGE THE COLOURS:
change the "white" in bg-white to change the background colour
the "yellow-600" to change the highlight colour
the text colour changes with the different buzzly themes, add "text-'your colour'" in the class of the second div to use a standard text colour
-->

<div class="container mx-auto my-10 px-10">
<div class="my-4 mx-6 p-4 max-w-2xl rounded-sm"><!--Add "text-'yourcolour'" here for standard text colour-->
  <div class="grid lg:grid-cols-5 grid-cols-2 gap-3 p-4">
<!-----------NAME BOX (name gets automatically put in uppercase)----------->
  <div class="col-span-full max-w-2xl p-2 bg-white bg-opacity-40 rounded-sm text-center">
      <h4 class="font-semibold mb-2 uppercase">name</h4>
  </div>
<!-----------LINKS (I wouldn't recommend deleting any)------------------->
  	<div class="lg:col-span-1 col-span-full max-w-2xl p-2 bg-white bg-opacity-40 rounded-sm text-center">
    <a class="active hover:text-yellow-600 justify-around" href="INSTAGRAM LINK" rel="nofollow"><i class="fab fa-instagram"></i></a>
    </div>

     <div class="col-span-1 max-w-2xl p-2 bg-white bg-opacity-40 rounded-sm text-center">
    <a class="active hover:text-yellow-600 justify-around" href="DA LINK" rel="nofollow"><i class="fab fa-deviantart"></i></a>
    </div>

    <div class="col-span-1 max-w-2xl p-2 bg-white bg-opacity-40 rounded-sm text-center">
    <a class="active hover:text-yellow-600 justify-around" href="TH LINK" rel="nofollow"><i class="fas fa-house-user"></i></a>
    </div>

    <div class="col-span-1 max-w-2xl p-2 bg-white bg-opacity-40 rounded-sm text-center">
    <a class="active hover:text-yellow-600 justify-around" href="OTHER LINK" rel="nofollow"><i class="far fa-link"></i></a>
    </div>
<!----------CREDIT----------->
    <div class="col-span-1 max-w-2xl p-2 bg-white bg-opacity-40 rounded-sm text-center">
    <a class="active hover:text-yellow-600 justify-around" href="https://buzzly.art/~ravenscodes" rel="nofollow"><i class="fas fa-code"></i></a>
    </div>
    </div>



    <div class="grid grid-cols-5 gap-3 px-4">
<!------------ABOUT ME BOX------------------>
    <div class="lg:col-span-3 col-span-full max-w-2xl p-2 bg-white bg-opacity-40 rounded-sm text-left">
    <h4>About Me<span class="float-right mr-1"><i class="fas fa-star"></i></span></h4>
    <hr class="col-span-full border-1 border-yellow-600">
     <p class="overflow-auto h-40">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ullamcorper a nulla in sagittis. Sed convallis faucibus tristique.  Etiam quis ipsum imperdiet, dignissim massa eget, feugiat quam. Vestibulum a orci leo. Pellentesque eu accumsan risus.  Etiam quis ipsum imperdiet, dignissim massa eget, feugiat quam. Vestibulum a orci leo. Pellentesque eu accumsan risus. </p>
    </div>
<!------------COMMISSION/TRADE/REQUEST INFO----------------------->
    <div class="lg:col-span-2 col-span-full justify-between">
    <div class="flex flex-col gap-y-3">
    	<div class="max-w-2xl p-1 bg-white bg-opacity-40 rounded-sm text-center">
        <h4 class="font-semibold mb-2 uppercase text-yellow-600">commissions</h4>
        <p class="italic">closed</p>
        </div>
        <div class="max-w-2xl p-1 bg-white bg-opacity-40 rounded-sm text-center">
        <h4 class="font-semibold mb-2 uppercase text-yellow-600">trades</h4>
        <p class="italic">closed</p>
        </div>
        <div class="max-w-2xl p-1 bg-white bg-opacity-40 rounded-sm text-center">
        <h4 class="font-semibold mb-2 uppercase text-yellow-600">requests</h4>
        <p class="italic">closed</p>
        </div>
        </div>

    </div>
</div></div></div>