F2U - 004

<!-----Extended 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 grid-cols-6 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-2 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="lg:col-span-1 col-span-2 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="lg:col-span-1 col-span-2 max-w-2xl p-2 bg-white bg-opacity-40 rounded-sm text-center">
    <a class="active hover:text-yellow-600 justify-around" href="TWITTER LINK" rel="nofollow"><i class="fab fa-twitter"></i></a>
    </div>

    <div class="lg:col-span-1 col-span-2 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="lg:col-span-1 col-span-2 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="lg:col-span-1 col-span-2 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-6 gap-3 px-4">
<!------------ABOUT ME BOX------------------>
    <div class="lg:col-span-4 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-48">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>
     <hr class="col-span-full border-1 border-yellow-600">
	 <!-----------LIKES AND DISLIKES------------------->
     <div class="flex lg:flex-row flex-col justify-between px-7">
    	<div>
        		<h4 class="text-center">Likes</h4>
                <ul class="list-inside list-disc">
          		<li>content</li>
          		<li>content</li>
        		<li>content</li>
          		<li>content</li>
        </ul>
        </div>

        <div>
        		<h4 class="text-center">Dislikes</h4>
                <ul class="list-inside list-disc">
          		<li>content</li>
          		<li>content</li>
        		<li>content</li>
          		<li>content</li>
        </ul>
        </div>
     </div>
    </div>
<!-----------------NAME/COMMISSION INFO BOX (name gets automatically put 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 drop-shadow-lg 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">
        <h4 class="mb-2 text-yellow-600">Commissions</h4>
        <p class="italic">closed</p>
        <h4 class="mb-2 text-yellow-600">Trades</h4>
        <p class="italic">closed</p>
        <h4 class="mb-2 text-yellow-600">Requests</h4>
        <p class="italic">closed</p>
     </div>
     </div>
<!----------------CHARACTER 1-------------->
    <div class="lg:col-span-2 col-span-full">

      <img class="rounded-sm mb-2 w-full" src="CHARACTER 1 IMAGE">
      <a class="bg-white bg-opacity-40 block rounded-sm text-center p-2 hover:text-yellow-600" href="TH LINK" rel="nofollow">Character</a>
    </div>
<!----------------CHARACTER 2-------------->
    <div class="lg:col-span-2 col-span-full">

      <img class="rounded-sm mb-2 w-full" src="CHARACTER 2 IMAGE">
      <a class="bg-white bg-opacity-40 block rounded-sm text-center p-2 hover:text-yellow-600" href="TH LINK" rel="nofollow">Character</a>
    </div>
<!----------------CHARACTER 3-------------->
    <div class="lg:col-span-2 col-span-full">

      <img class="rounded-sm mb-2 w-full" src="CHARACTER 3 IMAGE">
      <a class="bg-white bg-opacity-40 block rounded-sm text-center p-2 hover:text-yellow-600" href="TH LINK" rel="nofollow">Character</a>
    </div>
</div></div>

</div>