fantom.html

<!-- header -->
<div class="bg-gray-500 p-4 flex justify-center items-center">
  <!-- Header -->
  <div class="flex items-center">
    <a href="#" class="inline-block p-4 text-indigo-200 hover:text-indigo-100">About</a>
    <img src="https://www.chilledhub.com/assets/Images/mylogo-round-fit.png" width="70" alt="Logo" class="mr-2">
    <a href="#" class="inline-block p-2 text-indigo-200 hover:text-indigo-100">Projects</a>
  </div>
</div>

<!-- Hero -->
<div class="flex justify-center flex flex-col py-20 px-10 bg-gray-600 text-indigo-100">
  <div class="justify-md:w-1/2 mb-10 md:mb-0">
    <h2 class="text-2xl text-center font-semibold md:text-4xl lf:text-6xl text-white mb-6"><span style="color: #1AD4FD">Coding Projects.</span></h2>
    <p class="text-2xl text-center font-medium mb-6">I develop things.</p>
    <p class="text-xl text-center mb-6">⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯</p>
      
      <!-- First Section -->
    <div class="flex justify-center items-center justify-center">
      <a href="#" class="block justify-center inline-block py-3 px-6 text-lg bg-gray-400 text-gray-800 hover:bg-gray-300 rounded mr-2">Projects</a>
      <a href="#" class="block justify-center inline-block py-3 px-6 text-lg bg-yellow-400 text-yellow-800 hover:bg-yellow-300 rounded">About</a>
    </div>
  </div>
</div>
    
<!-- Second Section -->
<div class="md:flex py-16 px-10 bg-indigo-800 text-indigo-200 text-center">
  <div class="mr-2 text-center">
    <p class="mb-3">Games</p>
    <a href="https://chilledhub.com">
      <img src="https://images.unsplash.com/photo-1578750793486-d587f2d464f9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=3153&q=80" class="w-full mb-4 rounded border-solid border-2 border-indigo-400">
    </a>
  </div>
  <div class="mr-2 text-center">
    <p class="mb-3">Productivity</p>
    <a href="https://chilledhub.com">
      <img src="https://images.unsplash.com/photo-1587997825005-a8d9ec83d2d2?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2767&q=80" class="w-full mb-4 rounded border-solid border-2 border-indigo-400">
    </a>
  </div>
  <div class="mr-2 text-center">
    <p class="mb-3">Community</p>
    <a href="https://chilledhub.com">
      <img src="https://images.unsplash.com/photo-1596391899360-7a5afa7a53d7?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=3150&q=80" class="w-full mb-4 rounded border-solid border-2 border-indigo-400">
    </a>
  </div>
  <div class="mr-2 text-center">
    <p class="mb-3">ehgeahugah.</p>
    <a href="https://chilledhub.com">
      <img src="https://images.unsplash.com/photo-1587997825005-a8d9ec83d2d2?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2767&q=80" class="w-full mb-4 rounded border-solid border-2 border-indigo-400">
    </a>
  </div>
</div>

<!-- Info -->

<!-- Icons -->
<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>