Slap On Sum Images
Slap On Sum Images
Slap On Sum Images
com"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aH
K8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
body {
font-family: "Montserrat", sans-serif;
}
img {
aspect-ratio: 1/1;
}
ul {
max-width: 100px;
}
ul li a {
transform: rotate(-45deg);
}
.overlay {
width: calc(100% - 20px);
top: 10px;
height: calc(100% - 10px);
left: 50%;
transform: translateX(-50%);
}
.active {
opacity: 1;
border-color: #818cf8;
}
.active .overlay {
background-color: #818cf8b3;
}
.active ul {
opacity: 1;
}
.active a {
color: #1f2937;
}
</style>
<section>
<div class="px-200 xl:px-5 min-h-screen place-content-center grid sm:grid-cols-2
lg:grid-cols-3 gap-6 max-w-screen-xl mx-auto teams">
<h1 class="capitalize text-center mb-5 md:mb-10 sm:col-span-2 lg:col-span-4
text-4xl sm:text-5xl xl:text-6xl font-extrabold text-transparent bg-clip-text bg-
gradient-to-r from-pink-400 to-indigo-600">meet our team (hover to contact)</h1>
<div class="bg-white shadow-lg border-b-4 border-transparent group transition
ease-in-out delay-150 hover:border-indigo-400 duration-300 cursor-pointer">
<div class="relative">
<img src="https://media.istockphoto.com/vectors/pretty-girl-avatar-flat-
cartoon-style-vector-illustration-vector-id1140166223?
k=20&m=1140166223&s=170667a&w=0&h=wgeq7igZ8rP0WrzCBGJL70dLF9bPri1nrMXNerQ6kOA="
alt="Thana Prakash" class="w-full object-cover">
<div class="overlay absolute bg-indigo-400 bg-opacity-0 group-hover:bg-
opacity-70 grid place-items-center transition-colors ease-in delay-100">
<ul class="opacity-0 transition transition-opacity group-hover:opacity-
100 ease-in-out delay-150 flex flex-wrap gap-1 text-xl place-items-center transform
rotate-45">
<li class="w-11 h-11 bg-gray-700 flex items-center justify-center
cursor-pointer hover:bg-gray-600"><a
href="https://www.instagram.com/thananaaaaa_085/"><i class="fa-brands fa-instagram
text-white"></i></a></li>
<li class="w-11 h-11 bg-gray-700 flex items-center justify-center
cursor-pointer hover:bg-gray-600"><a
href="mailto:[email protected]"><i class="fa-solid fa-envelope
text-white"></i></a></li>
<li class="w-11 h-11 bg-gray-700 flex items-center justify-center
cursor-pointer hover:bg-gray-600"><a
href="https://www.facebook.com/VidGamesLive"><i class="fa-brands fa-facebook-f
text-white"></i></a></li>
<li class="w-11 h-11 bg-gray-700 flex items-center justify-center
cursor-pointer hover:bg-gray-600"><a href="https://twitter.com/VideoGameNews"><i
class="fa-brands fa-twitter text-white"></i></a></li>
</ul>
</div>
</div>
<div class="pt-5 pb-7 px-5 text-center">
<h2 class="text-xl font-semibold">Thana Prakash</h2>
<span class="text-gray-500 capitalize inline-block mt-1 mb-4">Space Game
Developer</span>
<p class="text-gray-500">Email: <a href="#" class="font-medium group-
hover:text-gray-800">[email protected]</a></p>
</div>
</div>
</div>
</section>