پیشنمایش زنده
کد HTML
<div
class="card shadow-[0px_4px_16px_px_#367E08] h-[400px] w-[280px] group gap-[0.5em] rounded-[1.5em] relative flex justify-end flex-col p-[1.5em] z-[1] overflow-hidden"
>
<div class="absolute top-0 left-0 h-full w-full bg-[#111111]"></div>
<div
class="container text-white z-[2] relative font-nunito flex flex-col gap-[0.5em]"
>
<div class="h-fit w-full">
<h1
class="card_heading text-[1.5em] tracking-[.2em]"
style="font-weight: 900;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 1px;
text-shadow: 0 0 7px #fff;"
>
STEEL BALL RUN
</h1>
<p
class="text-[1.2em]"
style="font-weight: 900;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 1px;
text-shadow: 0 0 7px #fff;"
>
By Hirohiko Araki
</p>
</div>
<div class="flex justify-left items-center h-fit w-full gap-[1.5em]">
<div class="w-fit h-fit flex justify-left gap-[0.5em]">
<svg
viewBox="0 0 576 512"
xmlns="http://www.w3.org/2000/svg"
class="h-[1em] w-[1em]"
fill="white"
>
<path
d="M316.7 17.8l65.43 132.4l146.4 21.29c26.27 3.796 36.79 36.09 17.75 54.59l-105.9 102.1l25.05 145.5c4.508 26.31-23.23 45.9-46.49 33.7L288 439.6l-130.9 68.7C133.8 520.5 106.1 500.9 110.6 474.6l25.05-145.5L29.72 226.1c-19.03-18.5-8.516-50.79 17.75-54.59l146.4-21.29l65.43-132.4C271.1-6.083 305-5.786 316.7 17.8z"
></path>
</svg>
<svg
viewBox="0 0 576 512"
xmlns="http://www.w3.org/2000/svg"
class="h-[1em] w-[1em]"
fill="white"
>
<path
d="M316.7 17.8l65.43 132.4l146.4 21.29c26.27 3.796 36.79 36.09 17.75 54.59l-105.9 102.1l25.05 145.5c4.508 26.31-23.23 45.9-46.49 33.7L288 439.6l-130.9 68.7C133.8 520.5 106.1 500.9 110.6 474.6l25.05-145.5L29.72 226.1c-19.03-18.5-8.516-50.79 17.75-54.59l146.4-21.29l65.43-132.4C271.1-6.083 305-5.786 316.7 17.8z"
></path>
</svg>
<svg
viewBox="0 0 576 512"
xmlns="http://www.w3.org/2000/svg"
class="h-[1em] w-[1em]"
fill="white"
>
<path
d="M316.7 17.8l65.43 132.4l146.4 21.29c26.27 3.796 36.79 36.09 17.75 54.59l-105.9 102.1l25.05 145.5c4.508 26.31-23.23 45.9-46.49 33.7L288 439.6l-130.9 68.7C133.8 520.5 106.1 500.9 110.6 474.6l25.05-145.5L29.72 226.1c-19.03-18.5-8.516-50.79 17.75-54.59l146.4-21.29l65.43-132.4C271.1-6.083 305-5.786 316.7 17.8z"
></path>
</svg>
<svg
viewBox="0 0 576 512"
xmlns="http://www.w3.org/2000/svg"
class="h-[1em] w-[1em]"
fill="white"
>
<path
d="M316.7 17.8l65.43 132.4l146.4 21.29c26.27 3.796 36.79 36.09 17.75 54.59l-105.9 102.1l25.05 145.5c4.508 26.31-23.23 45.9-46.49 33.7L288 439.6l-130.9 68.7C133.8 520.5 106.1 500.9 110.6 474.6l25.05-145.5L29.72 226.1c-19.03-18.5-8.516-50.79 17.75-54.59l146.4-21.29l65.43-132.4C271.1-6.083 305-5.786 316.7 17.8z"
></path>
</svg>
<svg
viewBox="0 0 576 512"
xmlns="http://www.w3.org/2000/svg"
class="h-[1em] w-[1em]"
fill="white"
>
<path
d="M288 439.6l-130.9 68.7C152.2 510.8 147.1 512 142.2 512c-18.59 0-35.17-16.66-31.61-37.45l25.04-145.5L29.72 226.1C10.68 207.6 21.2 175.3 47.47 171.5l146.4-21.29l65.43-132.4c5.883-11.91 17.33-17.8 28.73-17.8c.0234 0-.0234 0 0 0L288 439.6z"
></path>
</svg>
</div>
<div class="w-fit h-fit text-white font-nunito text-[1.2em] font-light">
<p>4.5/5 stars</p>
</div>
</div>
<div class="flex justify-center items-center h-fit w-fit gap-[0.5em]">
<div
class="border-2 border-white rounded-[0.5em] text-white font-nunito text-[1em] font-normal px-[0.5em] py-[0.05em] hover:bg-white hover:text-[#222222] duration-300 cursor-pointer"
>
<p>Drama</p>
</div>
<div
class="border-2 border-white rounded-[0.5em] text-white font-nunito text-[1em] font-normal px-[0.5em] py-[0.05em] hover:bg-white hover:text-[#222222] duration-300 cursor-pointer"
>
<p>Action</p>
</div>
<div
class="border-2 border-white rounded-[0.5em] text-white font-nunito text-[1em] font-normal px-[0.5em] py-[0.05em] hover:bg-white hover:text-[#222222] duration-300 cursor-pointer"
>
<p>Balls</p>
</div>
</div>
</div>
<p
class="font-nunito block text-white font-light relative h-[0em] group-hover:h-[7em] leading-[1.2em] duration-500 overflow-hidden"
>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet officiis,
dolorem ab animi magnam culpa fugit error voluptates adipisci, debitis ut
fuga at nisi laborum suscipit a eos similique unde.
</p>
</div>
کد CSS
.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.absolute{position:absolute}.relative{position:relative}.left-0{left:0px}.top-0{top:0px}.z-\[1\]{z-index:1}.z-\[2\]{z-index:2}.block{display:block}.flex{display:flex}.h-\[0em\]{height:0em}.h-\[1em\]{height:1em}.h-\[400px\]{height:400px}.h-fit{height:-moz-fit-content;height:fit-content}.h-full{height:100%}.w-\[1em\]{width:1em}.w-\[280px\]{width:280px}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.gap-\[0\.5em\]{gap:0.5em}.gap-\[1\.5em\]{gap:1.5em}.overflow-hidden{overflow:hidden}.rounded-\[0\.5em\]{border-radius:0.5em}.rounded-\[1\.5em\]{border-radius:1.5em}.border-2{border-width:2px}.border-white{--tw-border-opacity:1;border-color:rgb(255 255 255 / var(--tw-border-opacity))}.bg-\[\#111111\]{--tw-bg-opacity:1;background-color:rgb(17 17 17 / var(--tw-bg-opacity))}.p-\[1\.5em\]{padding:1.5em}.px-\[0\.5em\]{padding-left:0.5em;padding-right:0.5em}.py-\[0\.05em\]{padding-top:0.05em;padding-bottom:0.05em}.text-\[1\.2em\]{font-size:1.2em}.text-\[1\.5em\]{font-size:1.5em}.text-\[1em\]{font-size:1em}.font-light{font-weight:300}.font-normal{font-weight:400}.leading-\[1\.2em\]{line-height:1.2em}.tracking-\[\.2em\]{letter-spacing:.2em}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.shadow-\[0px_4px_16px_px_\#367E08\]{--tw-shadow:0px 4px 16px px #367E08;--tw-shadow-colored:0px 4px 16px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.duration-300{transition-duration:300ms}.duration-500{transition-duration:500ms}.hover\:bg-white:hover{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.hover\:text-\[\#222222\]:hover{--tw-text-opacity:1;color:rgb(34 34 34 / var(--tw-text-opacity))}.group:hover .group-hover\:h-\[7em\]{height:7em}