style="
  background-color: #000000;
  background-image: repeating-linear-gradient(
      to right,
      transparent 0 49px,
      #eee1 49px 50px
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0 49px,
      #eee1 49px 50px
    );
"

      <!-- <div class="mx-[5rem] relative" >
    <div class="grid grid-cols-3 gap-4">
      <div class="col-span-2"><img class="w-[19rem] h-[12rem]" src="https://th.bing.com/th/id/OIG3.V1KfZeFOoFBCoJZTEqR.?w=1024&h=1024&rs=1&pid=ImgDetMain" alt=""></div>
      <div class="text-white">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum ipsam perspiciatis aliquam sunt vel! Ipsam nulla culpa distinctio nostrum expedita possimus quod qui, dolore, esse mollitia veritatis quibusdam voluptas labore?</div>
      <div class="text-white">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore a possimus suscipit nam, doloribus numquam sed animi mollitia architecto perferendis. Totam dolorem nam repellat repellendus! Aspernatur sit veniam quibusdam exercitationem?</div>
      <div class="col-span-2 "><img src="https://www.elegantthemes.com/blog/wp-content/uploads/2021/01/000-Basic-CSS.png" alt=""></div>
    </div>
  </div> -->

  <div class="border-2 rounded-lg flex gap-4 ">
      <div class="border-r-2 flex py-5 px-3"><i class="text-red-500 text-5xl self-center ti ti-brand-html5"></i></div>
      <div><p class="text-white py-5 px-8">Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed!</p></div>
    </div>

     <div class="border-2 w-[67rem]  h-[79rem] flex flex-col  items-center">
    <div class="w-[8rem] h-[4rem] bg-sky-500" style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%);"></div>
    <div class="w-[12rem] h-[4rem] bg-sky-500" style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%);"></div>
    <div class="w-[16rem] h-[4rem] bg-sky-500" style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%);"></div>
    <div class="w-[20rem] h-[4rem] bg-sky-500" style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%);"></div>
    <div class="w-[24rem] h-[4rem] bg-sky-500" style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%);"></div>
  </div>


  <div class="p-4  rounded-lg inline-block mt-[4rem] relative"  >
    <div style="filter: blur(1px);z-index: -1;background-image: linear-gradient(to right, #2104c7,#c70404);z-index: -2;" class="absolute h-full w-full"></div>
    <div class=" flex h-[34rem] flex-col rounded-lg gap-[6rem] p-4" style="overflow-y: auto;">
      <div class="flex border-b-2 pb-7 gap-[5rem]">
        <p class="text-5xl text-white">Video of Project:</p>
        <div class="w-[16rem] ml-auto rounded-lg relative bg-red-500 h-[3rem]">
          <input type="search" class="h-full w-full rounded-lg " name="" id="">
          <button class="text-white absolute top-0 rounded-r-lg right-0 px-6 bg-red-500 h-full"><i class="ti ti-search"></i></button>
       </div>
      </div>
      <div class="flex flex-col gap-[16rem]">
        <div class="flex">
          <div class="w-[30rem] h-[8rem] rounded-2xl">
            <video class="rounded-xl" src="./src/Video/1.mp4" controls autoplay></video>
          </div>
          <i class="ti ti-heart text-3xl self-center text-white  ml-auto"></i>
        </div>
        <div class="flex">
          <div class="w-[30rem] h-[8rem] rounded-2xl">
            <video class="rounded-xl" src="./src/Video/2.mp4" controls autoplay></video>
          </div>
          <i class="ti ti-heart text-3xl self-center text-white  ml-auto"></i>
        </div>
        <div class="flex">
          <div class="w-[30rem] h-[8rem] rounded-2xl">
            <video class="rounded-xl" src="./src/Video/3.mp4" controls autoplay></video>
          </div>
          <i class="ti ti-heart text-3xl self-center text-white  ml-auto"></i>
        </div>
        <div class="flex">
          <div class="w-[30rem] h-[8rem] rounded-2xl">
            <video class="rounded-xl" src="./src/Video/4.mp4" controls autoplay></video>
          </div>
          <i class="ti ti-heart text-3xl self-center text-white  ml-auto"></i>
        </div>
      </div>
    </div>
  </div>


  <!-- <a href="">
                <i class="ti ti-brand-html5"></i>
                HTML
              </a>
              <a href="">
                <i class="ti ti-brand-css3"></i>
                CSS
              </a>
              <a href=""><i class="ti ti-brand-typescript pr-2"></i>TypeScript</a>
              <a href="">TailWindCss</a>
              <a href="">Angular</a> -->


              <div class="mx-auto flex justify-center">
    <picture>
      <source srcset="https://fonts.gstatic.com/s/e/notoemoji/latest/1f92b/512.webp" type="image/webp">
      <img src="https://fonts.gstatic.com/s/e/notoemoji/latest/1f92b/512.gif" alt="🤫" width="300" height="300">
    </picture>
  </div>

GGG

      <div class="text-white text-2xl flex gap-3 items-center justify-center">
        <i class="ti ti-brand-youtube hover:text-sky-500 "></i>
        <a  href="https://github.com/DevelopPlus2024">
          <i class="ti ti-brand-github hover:text-sky-500"></i>
        </a>
        <a href="https://www.facebook.com/profile.php?id=61554760410819"><i class="ti ti-brand-facebook hover:text-sky-500 "></i></a>
        <i class="ti ti-brand-twitter hover:text-sky-500"></i>
        <i class="ti ti-brand-instagram hover:text-sky-500"></i>
        <i class="ti ti-brand-codepen hover:text-sky-500"></i>
      </div>
      <div class="flex gap-4 ">
        <a href="login.html"><button class="bg-white  text-black rounded-md px-8 py-1" style="font-family: MuseoModerno, sans-serif;">Login</button></a>
        <button class="rounded-md text-white button px-8 py-1 " style="font-family: MuseoModerno, sans-serif;">Sign Up</button>
      </div>

Deveploper 2024 Copyright © 2024

<title>ActSeLis</title> <script src="./script.js"></script> <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>

Next