F2U - 002

<!-----Compact 2----->
<!-- 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">
<!--------------QUOTE BOX----------------->
  <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">&#34;quote&#34;</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="OTTHER 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>

<!--------------ABOUT ME BOX------------>
    <div class="grid grid-cols-5 gap-3 px-4">
    <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-28">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>
	 <!----COMMISSION/TRADE/REQUEST INFO--------->
     <p class="mt-2"><span class="text-yellow-600">Commissions</span><span class="float-right mr-1 italic">closed</span></p>
     <p><span class="text-yellow-600">Trades</span><span class="float-right mr-1 italic">closed</span></p>
     <p><span class="text-yellow-600">Requests</span><span class="float-right mr-1 italic">closed</span></p>
    </div>
<!------------IMAGE AND NAME BOX (name gets automatically in uppercase)--------------->
    <div class="lg:col-span-2 col-span-full justify-between">
    <div class="col-span-full max-w-2xl p-2 bg-white bg-opacity-40 rounded-sm text-center">
    	<img src="IMAGE LINK" class="rounded-full mx-auto border-2 border-yellow-600">
        <hr class="col-span-full border-1 border-yellow-600">
        <h4 class="font-semibold mb-2 uppercase">name</h4>
        <hr class="col-span-full border-1 border-yellow-600">
        </div>

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