galaxy/Cards/sushma-godawari-college_tiny-pig-87.html

66 lines
No EOL
2.7 KiB
HTML

<!-- From Uiverse.io by sushma-godawari-college - Tags: card -->
<a
href="#"
class="group relative block max-w-screen-sm mx-auto h-64 sm:h-80 lg:h-96"
>
<span class="absolute inset-0 border-2 border-dashed border-black"></span>
<div
class="relative flex h-full w-60 transform items-end border-2 border-black bg-white transition-transform group-hover:scale-105"
>
<div
class="p-4 !pt-0 transition-opacity group-hover:absolute group-hover:opacity-0 sm:p-6 lg:p-8"
>
<svg
class="w-10"
fill="#000000"
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 512 512"
xml:space="preserve"
>
<g>
<g>
<path
d="M11.905,246.817H0.27v30.385h11.636v87.014H0.27v30.385h11.636v117.398h142.473V246.817H11.905z M73.56,453.134H43.175 v-30.051H73.56V453.134z M73.56,335.734H43.175v-30.051H73.56V335.734z M123.11,453.134H92.725v-30.051h30.385V453.134z M123.11,335.734H92.725v-30.051h30.385V335.734z"
></path>
</g>
</g>
<g>
<g>
<path
d="M357.621,172.23l-30.385-22.362l-56.043-41.246V84l98.467-36.386L240.806,0v108.623l-56.043,41.246l-30.385,22.362 l-13.786,10.146l13.786,18.204l4.559,6.019l25.826-18.904V512h6.178h130.116h6.178V187.696l25.826,18.903l4.559-6.019 l13.786-18.204L357.621,172.23z M246.417,453.134h-30.385v-30.051h30.385V453.134z M246.417,335.734h-30.385v-30.051h30.385 V335.734z M246.417,218.335h-30.385v-30.051h30.385V218.335z M295.967,453.134h-30.385v-30.051h30.385V453.134z M295.967,335.734 h-30.385v-30.051h30.385V335.734z M295.967,218.335h-30.385v-30.051h30.385V218.335z"
></path>
</g>
</g>
<g>
<g>
<path
d="M500.094,364.216v-87.014h11.635v-30.385h-11.637H357.621v265.182h142.473V394.601h11.636v-30.385H500.094z M419.274,453.134h-30.385v-30.051h30.385V453.134z M419.274,335.734h-30.385v-30.051h30.385V335.734z M468.824,453.134h-30.385 v-30.051h30.385V453.134z M468.824,335.734h-30.385v-30.051h30.385V335.734z"
></path>
</g>
</g>
</svg>
<h2 class="mt-4 text-xl font-medium sm:text-2xl">Sushma Godawari</h2>
</div>
<div
class="absolute p-4 opacity-0 transition-opacity group-hover:relative group-hover:opacity-100 sm:p-6 lg:p-8"
>
<h3 class="mt-4 text-xl font-medium sm:text-2xl">Sushma Godawari</h3>
<p class="mt-4 text-sm sm:text-base">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate,
praesentium voluptatem omnis atque culpa repellendus.
</p>
<p class="mt-8 font-bold">Read more</p>
</div>
</div>
</a>