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